导航乱，本质是信息架构乱。先想清楚站点有哪些一级/二级栏目、用户从哪来要去哪，导航只是把这份结构用界面表达出来。
顶部导航承载全局入口，侧边导航承载功能细分，面包屑记录位置，标签页方便切换——各司其职。
检验标准：随机选一个功能，新用户能否在 3 次点击内找到它。
成熟导航组件的功能覆盖。
一二级菜单、折叠展开、无限层级。
桌面横向导航，移动端汉堡菜单。
位置回溯与层级跳转。
多页签切换、可关闭、可固定。
当前页、选中态、悬停态清晰。
长页面导航固定，随时可达。
系统化搭建站点导航。
盘点所有页面与功能，归并为合理的栏目层级，命名通俗一致。
站内栏目多选侧边+顶部，内容站选顶部主导航，复杂后台用侧边可折叠。
当前高亮、面包屑联动、移动端汉堡菜单、折叠动画。
做卡片分类测试与点击路径测试，验证用户能否快速定位。
不同产品场景适合不同的导航。
| 形态 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 顶部导航 | 内容站/官网 | 全局可见、直观 | 栏目多时放不下 |
| 侧边导航 | 中后台/功能多 | 承载能力强、可折叠 | 占用横向空间 |
| 面包屑 | 层级深的页面 | 定位清晰、可回溯 | 不适合扁平结构 |
| 标签页 | 多任务办公 | 高效切换 | 过多会拥挤 |
收拢到侧边导航或用“更多”聚合；同时用下拉/分组避免无限横向扩展。
不冲突。面包屑反映层级位置，标签页反映工作状态，可并存于不同层级场景。
主信息用汉堡菜单收纳，核心操作可保留底部 Tab；注意触控目标 ≥44px。
用“三击定位测试”和“反向回程测试”：用户能否快速找到目标、能否顺畅返回。
