返回知识库产品与设计 · 页面结构与适配
导航栏Navbar
用 3–5 个带图标与文字的主要目的地组成稳定导航，并让当前页面有颜色之外的清楚标记。
在理财 App 底栏里找到本月账单
Navbar 在手机上通常承载 3–5 个最高频目的地。先体验无标签图标造成的误点，再修复并用同一个查账任务重试。
手机任务单手找到“账单”，查看本月总支出先点一次只有图标的底栏；误入后修复，再用相同目标重试。
9:41● ● ▰
随手记 · 个人理财今日余额
¥ 12,680首页显示账户总览，不是月度账单。
当前失败设计：5 个目的地只有图标，选中仅靠青色。请直接点一个你认为是“账单”的入口。
刚才的底部 Navbar 教会了什么
目的地、当前状态和拇指可达性都能在手机对象上直接观察。
目的地只留 3–5 个主要页面首页、明细、账单、计划、我的都是高频跨页面入口。
标签图标必须配可见文字“▤”不一定人人都理解；“账单”把目的地说清。
当前文字、形状、语义三重标记胶囊底形与“当前”文字配 aria-current，不只换颜色。
位置固定在拇指可达的屏幕底部入口顺序稳定，切页后内容和当前项同步变化。
什么时候用底部 Navbar
适合移动产品的少量平级主目的地；一次性流程和大量层级不适合。
适合个人理财、出行、社交、内容 App3–5 个高频平级入口需要随时单手切换，并保持位置稳定。
不适合注册流程、结账、超过 5 个顶级目的地流程页应专注下一步；入口过多应重组信息架构，而不是继续缩小图标。
怎么搭一条不靠猜的 Navbar
先选目的地，再做冗余标记，最后用单手找入口任务验收。
- 选择 3–5 个平级高频目的地：动作按钮（如“扫码”）不要伪装成页面入口。
- 每项同时放图标与短标签：图标辅助扫视，文字负责消除歧义。
- 当前项加冗余：形状、字重、“当前”文字与 aria-current 共同表达。
- 在 390px 真机复测：单手点击每个入口，页面内容与当前项必须同步，误点后仍能立即切回。
同一个查账目标，只差状态表达
入口数量和页面都不变；只改变标签与当前项是否可辨认。
正例 · 冗余表达▤ 账单 · 当前图标＋文字说明目的地，胶囊形状＋aria-current 说明当前位置。
反例 · 只靠猜5 个抽象图标，当前项只变青色色弱用户看不出当前项，新用户也无法判断哪个图标是月度账单。
快速自测
一个出行 App 的底部 Navbar 有 7 个无文字图标，当前项只变成蓝色。最先该改什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。