网站导航设计规范

解决什么问题

导航不是装饰，而是网站的信息目录：用户在任何时刻都需要知道自己在哪、能去哪、怎么返回。实际项目里常见的问题包括主菜单塞进十几个入口导致决策疲劳、桌面端把导航藏进汉堡图标、面包屑层级与真实信息架构脱节、浏览器返回按钮在 SPA 路由下失效等。这套规范面向设计与前端工程师，在重构或评审导航结构时提供一套可逐条核对的判断标准。

技能如何工作

规范先确立五条原则：导航即定位，回答"我在哪、能去哪、怎么回"；信息架构先行，先组织内容再推导导航，顺序不能反过来；清晰优于创意，菜单命名必须让用户可预测链接背后的内容；大屏可见，汉堡菜单是移动模式而非通用模式；3 次点击是设计基准而非教条。

在此基础上给出可直接执行的 DO / DON'T 规则：主导航限 5-7 项，把最重要的链接放在首位与末位（序列位置效应）；菜单项用描述性命名，如 WordPress Tutorials 而非 Tutorials，并使用目标用户的语言；组合主导航、Meta 导航、页脚导航与面包屑提供多条路径，约 100 个子页面起引入站内搜索；层级超过 2 层时启用面包屑，当前页不可点击；全程保证键盘可操作，触摸目标不小于 44x44px，文本对比度不低于 4.5:1。

规范还按站点类型给出导航模式对照表（企业站、电商、博客、作品集、内容门户、单页站），并说明 Mega Menu、侧边栏、滚动导航、站内搜索各自的适用条件与常见反模式。

适用边界与注意点

3 次点击规则是基准而非硬门槛，重要页面仍可接受更深的点击路径。规范不替代信息架构工作——必须先梳理内容结构再谈导航。键盘操作、ARIA 标签与对比度要求需与无障碍规范配合使用。