ZartUI Mobile 导航栏规范

表单页导航栏 10 States

尺寸 414×108px（状态栏 44px + 标题栏 54px） | 标题字号 20px · 字重 500 · 颜色 G60 #223355 | 搜索框高度 36px · 全圆角 · 两端边距 16px

状态一 — 只有标题

状态二 — 左侧返回图标

状态三 — 返回 + 更多

状态四 — 返回 + 扫描 + 更多

状态五 — 辅助说明文字 12px · #A8B4C8

状态六 — 搜索框 · 162px · 搜索+清空

状态七 — 搜索框右侧文字搜索按钮

状态八 — 右侧筛选图标

状态九 — 排序 + 筛选

状态十 — 排序 + 筛选 + 多选

首页导航栏 5 States

蓝色背景 DB60 #3388FF | 状态栏图标白色 | 搜索框背景 #000 · 0.1 透明度 · 全圆角 · + 图标外置与搜索框右侧

状态一 — 108px · 状态栏 + 搜索栏

状态二 — 162px · 标题 20px 白色

状态三 — 标题右侧扫描 + 更多

状态四 — #F5F7FA · 小智机器人 · + G60线型图标外置

状态五 — #F5F7FA · 标题 + 搜索 · + G60线型外置

导航栏规范速查表Quick Ref

属性	表单页	首页（蓝底）	首页（浅灰底）
背景颜色	#F5F7FA	DB60 #3388FF	#F5F7FA
状态栏颜色	G60 #223355	#FFFFFF	G60 #223355
标题字号	20px · 500	20px · 500	20px · 500
标题颜色	G60 #223355	#FFFFFF	G60 #223355
搜索框背景	#FFFFFF	#000 10% 透明	#FFFFFF
搜索框高度	36px 全圆角	36px 全圆角	36px 全圆角
基本高度	108px（状态栏44 + 标题54）	108px（状态栏44 + 搜索64）	108px
含搜索高度	162px	162px	162px
搜索右边距	16px 两端边距

注意事项6 Tips

类别	说明	正确做法
避坑	首页蓝底导航栏文字用 G60	蓝底 DB60 下状态栏/标题/图标全部用白色
避坑	搜索框高度不一致	统一 36px 全圆角，所有场景保持一致
避坑	状态栏 108px → 162px 高度切换遗漏	有搜索框时整体高度 = 162px（44+54+36+16+12spacing）
避坑	辅助说明文字颜色过深	固定使用 #A8B4C8，12px，居中对齐
避坑	搜索框内图标间距不均	左侧搜索图标 + 输入区，右侧操作图标用 flex gap:8px 排列
避坑	首页搜索框不透明	蓝底下搜索框背景 rgba(0,0,0,0.10)，不是实色灰色