提升导航菜单体验，先让入口容易找到、名称容易理解，再明确当前位置，并把“展开子菜单”和“进入页面”分开。最后用鼠标、键盘和手机触摸分别走一遍：能打开、能选中目标、能关闭，也能在页面跳转后知道自己在哪里。下面从可见性、位置、标签、操作和交互五个方面说明。
可以在UI 设计阶段就画出这些状态：例如，后台左栏的“订单”下有“全部订单”和“退款处理”，当前在“全部订单”页时展开“商品”，页面不应随之跳走。把这个小流程画清楚，后面的视觉细节才有明确依据。
什么是UI导航菜单
导航菜单是内容类别或功能的列表，通常显示为一组链接或图标，这些链接或图标与设计的其余视觉样式组合在一起。导航菜单包括但不限于导航栏和汉堡菜单。
如Pixso社区的外卖app所示，在移动界面的左上角可以看到“汉堡式菜单”，它通常是三行堆积在一起，形状类似于汉堡的层叠结构，因为占用空间少，所以常被作为一个设计功能纳入移动端菜单。
菜单非常重要，几乎可以在遇到的每个网站或软件中找到它们，但并非所有菜单都是设计合理的。我们经常观察到，用户在使用令人困惑、难以操作或难以找到的菜单时苦苦挣扎。
1. 让菜单可见
1.1 不要在大屏幕上使用小菜单或菜单图标
当有足够空间显示常用菜单时，优先让主要入口可见。在官网或后台管理界面中，常用菜单通常不必收起；如果工作区确实需要更多空间，可以提供收起方式，并保留清楚的展开入口。
1.2 将菜单放在熟悉的位置
用户希望找到他们之前在其他网站或应用程序上看到过的UI元素，例如：左栏、屏幕顶部等。通过将菜单放在用户期望找到它们的地方，减轻用户思考。对于后台应用，菜单往往放在左侧，并随窗口大小而进行精简响应。
1.3 使菜单链接看起来具有交互性
如果选项看起来不可点击，用户甚至可能不会意识到这是一个菜单。如果包含太多图形，或者过于严格地遵循平面设计原则，菜单可能看起来只是装饰性的图片或标题。
如Pixso社区中的后台管理系统设计规范文件所示，选中后的一级菜单采用了高亮的浅蓝色背景填充，当前停留的页面菜单文字变为主题蓝色。
这里还要区分三种状态：展开表示下级内容已显示，当前页面表示正在浏览的目的地，键盘焦点表示下一次按键会作用的位置。比如用户留在“全部订单”页，但用 Tab 移到“商品”的展开按钮，这时“全部订单”的当前标记仍应保留，焦点边框则出现在“商品”按钮上，不能两者一起跳动。
1.4 确保菜单有足够的视觉重量
在许多情况下，放置在熟悉位置的菜单不需要太多周围的留白或颜色饱和度即可引人注目。但是，如果设计杂乱无章，缺乏视觉重点的菜单很容易在争夺用户注意力的图形、促销和标题的海洋中消失。
1.5 使用与背景颜色形成对比的链接文本颜色
在设计菜单时，设计师很容易会忽略对比原则。在数字空间中，导航已经足够迷失方向，若是还要为了阅读菜单而眯着眼睛看屏幕，体验会很糟糕。
即使是熟悉所有这些准则的设计师最终仍可能会创建被用户忽略的菜单，因为客观地评估自己的工作非常困难，尤其是对于某些元素是否可见等主观标准。因此，与用户一起测试菜单非常有必要。
2. 传达当前位置
2.1 告诉用户当前可见屏幕在菜单选项中的“位置”
“我在哪儿？”是用户成功导航需要回答的基本问题之一。
用户依靠来自菜单和其他导航元素，如面包屑等视觉提示来回答这个关键问题。未能指出当前位置可能是我们在网站菜单上看到的最常见错误。具有讽刺意味的是，这些菜单最需要引导用户，因为访问者通常不会从主页进入。
面包屑显示当前内容在网站层级中的位置，用户可以通过它返回上级分类。它通常不是浏览历史，也不保证返回刚才访问的上一页。比如从搜索结果进入某个订单，面包屑仍可显示“订单 / 全部订单 / 订单详情”；需要回到搜索结果时，应另有明确的返回入口。
3. 与用户任务协调菜单
3.1 使用易于理解的链接标签
找出用户在寻找什么，并使用熟悉且相关的类别标签。菜单应避免用虚构的词和内部行话，设计师应坚持使用能清楚描述内容和功能的术语。
3.2 使链接标签易于扫描
可以通过左对齐垂直菜单和将关键术语放在标签开头来减少用户阅读菜单所需的时间。
例如，“订单退款处理”与“订单发票管理”比一组都叫“业务管理”“业务处理”的标签更容易区分。如果当前已经处于订单分组中，子菜单可简化为“退款处理”“发票管理”，省掉重复前缀，让用户扫一眼就能找到任务。
3.3 对于大型网站，使用菜单让用户预览较低级别的内容
如果涉及向下钻取多个级别，大型菜单或传统的下拉菜单可以通过让用户跳过其中一个或两个级别来节省用户时间。大型菜单通常应用于电商购物平台，因为种类繁多，用户可以按类别直接选择细分产品。
3.4 为密切相关的内容提供本地导航菜单
如果用户经常想比较相关产品或在单个部分中完成多项任务，请让本地导航菜单使附近的页面可见，而不是强迫人们在层次结构中上下移动。
3.5 利用视觉传达
为菜单选项加入容易理解的图标、图形或颜色，可以辅助用户辨认，但应保留清楚的文字标签，避免只能凭图形猜含义。
如Pixso社区中的Material Design组件所示，菜单栏加入了辅助理解的图标，让界面更美观的同时提升了用户体验。
4. 使菜单易于操作
4.1 使菜单链接足够大，以便轻松点击
太小或太靠近的链接对移动用户来说是一个巨大的挫败感，也使大屏幕设计不必要地难以使用。
4.2 确保下拉菜单不会太小或太大
通过鼠标悬停展开的下拉菜单，不应在指针从入口移向子菜单的途中立即消失。入口与面板之间若有空隙，或稍微偏离直线路径就关闭，用户会反复展开却点不到目标。
另一方面，太长的垂直下拉菜单使访问列表底部附近的链接变得困难，因为它们可能会在屏幕边缘下方被截断并需要滚动。
后台左栏项目较多时，可让菜单区域在可用高度内滚动，并保证聚焦的项目进入可见范围。不能把页面底部的“设置”放在被裁掉的位置，也不要把滚动锁在菜单中，让用户无法继续访问页面内容。手机上还要检查系统放大字体后，底部的关闭入口是否仍可到达。
过宽的悬停下拉面板可能遮挡大部分正文，应让面板边界与所属入口清楚可辨，并提供容易发现的关闭方式。不要只因内容多就将面板铺满屏幕，却没有说明用户仍在同一页面。
上图中，Pixso 资源社区菜单在鼠标移入时展开二级选项，用户可以选择资源分类。类似导航在触摸设备上还需要点击展开的路径，不能依赖手机上不存在的持续悬停。
4.3 考虑长页面的“粘性”菜单
到达长页面底部的用户在返回顶部菜单之前可能会面临大量繁琐的滚动。即使在滚动之后仍然在视口顶部保持可见的菜单可以解决该问题，这一点在较小的屏幕上尤其受欢迎。
固定菜单会占据屏幕空间。设计时应同时确认正文标题、锚点定位和键盘焦点不会被它挡住；在手机横屏或浏览器放大后，必要时缩减固定区域，优先让用户看到正在阅读和操作的内容。
4.4 缩短到达常用入口的距离
对于下拉菜单，可以把常用项目放在靠近展开入口的位置，减少鼠标或手指的移动距离。但同一用户反复使用时，稳定的位置同样重要，不要每次都按临时热度重新排列。对于以页面导航为目的的菜单，优先采用熟悉的分组与链接，不必为了新颖改成难以扫描的圆形布局。
5. 优化菜单交互方式
在创建菜单时，尝试用酷炫的效果给用户留下深刻印象不应该是你的首要任务之一。其他设计师可能对新颖的菜单设计印象深刻，但用户往往并不买单。
用户往往对能通过熟悉的菜单轻松访问的精彩内容印象更深刻。当然，有时新类型的菜单会改善用户体验。
把打开、进入页面与关闭分别说明
| 操作 | 桌面与键盘 | 手机触摸 |
|---|---|---|
| 展开“订单”分组 | 点击展开按钮，或聚焦按钮后按 Enter/空格；显示下级入口 | 点击分组展开；不同时跳转到未知页面 |
| 进入“退款处理” | 激活对应链接，当前页面标记随目的地更新 | 点击链接进入页面；收起抽屉，让新内容可见 |
| 只看了菜单、不跳转 | 有清楚的收起方式；浮层可用 Esc 关闭并回到触发入口 | 提供明确关闭入口；点击遮罩关闭时，不能让关闭操作穿透到页面 |
| 页面正在填写内容 | 仅展开分组不会丢失输入；真正跳转是否提醒由未保存规则决定 | 不要把打开抽屉当成离开页面 |
普通网站导航一般由链接、列表和控制展开的按钮组成，并不因为视觉上叫“菜单”就必须套用应用命令菜单的行为。W3C 的展开式导航示例使用这一结构。交付给研发时，重点写清按钮的展开状态、链接的当前页面状态和焦点去向；不要把 Tab 导航强行改成仅能使用方向键。
如果使用悬停展开，面板应允许指针移入并操作，内容在需要时持续可见，同时具备关闭办法。W3C 对悬停与焦点内容的要求给出了这几个条件。可以在 Pixso 中给“打开”“关闭”“进入页面”分别加上交互说明，再在实际页面里检查鼠标、键盘和触摸的行为。
文中的侧栏、后台和分类导航案例都可从对应的 Pixso 社区链接打开。制作自己的菜单时，先选一组真实任务，例如“打开全部订单、展开商品、回到订单详情”，在桌面和手机画板上各走一遍，再比较用户是否理解层级与当前位置。
