15条必知的⽹站导航设计原则
为⽤户设计导航是每⼀位和app设计者的⾸要职责。毕竟⽤户⼀旦迷路，再炫酷的动效、再有趣的内容也都毫⽆意义。即使我们的⽹站中有搜索功能，也不能把搜索框当成⽤户导航的唯⼀⼯具。⼤多设计者已意识到这⼀点，并在⾃⼰的⽹站中设计了导航菜单。
定义：导航菜单是⽹站主要内容或特征的列表，通常由⼀组链接或icon组成，并在视觉样式上与⽹站其他内容有显著差异。
导航菜单包含但不限于导航条和汉堡菜单。
导航菜单的重要性已经不⾔⽽喻，我们平时遇到的每⼀个⽹站或软件中都有它的存在；但并不是所有的导航菜单都设计得准确⽆误。我们也常发现⽤户因导航设计不当⽽感到困惑、难以操作，或者连导航在哪⼉都不知道。
下⾯的设计原则，可以避免导航菜单出错。
导航菜单要清晰可见
1. ⼤屏中的导航菜单不要太⼩。如果空间⾜够，不要将菜单隐藏。
2. 把导航菜单放在⽤户熟悉的位置。通常⽤户会希望在浏览过的⽹站或app中的类似位置（譬如⽹站顶部、左侧等）中到他们想要的UI元素。
3. 让菜单链接看起来有互动感。如果菜单选项看起来不可点击，⽤户未必能认出它是导航。如果我们的导航设计融⼊太重的图形、或太过追崇扁平化设计风格，会使它们看起来更像是装饰性图⽚或标题。
4. 确保导航菜单拥有⾜够的视觉吸引⼒。很多导航菜单的周围会留有⼀点空⽩区域以从视觉上突显它。
但当⽹站UI元素⽐较拥挤时，如果导航菜单视觉⽐重太弱就会在各⾊图形、促销⼴告、标题⾥迷失，不易被⽤户识别。
5. 菜单选项的颜⾊要与⽹站背景⾊对⽐鲜明。令⼈惊讶的是，有⾮常多的设计师都忽视了“对⽐原则”。
导航菜单
即便是熟悉以上规则的设计师设计出来的导航菜单也有可能会被⽤户忽视，因为他们很难客观地评价⾃⼰的作品——尤其是碰上⽐较主观的设计标准时，⽐如哪个UI元素应该拥有更明显的视觉效果。如果你知道你的导航菜单在哪⼉，⾃然能⼀看看到它，因为这是你设计的。因此，让⽤户参与验证⼗分必要。
告诉⽤户其当前位置
6. 告诉⽤户当前所处什么位置。⽤户成功导航的⼀个最基本的标准是他⾃⼰能发现：“我在哪⼉？” 通常被选中的菜单选项在视觉上与其他选项是有差异的，这可以帮助⽤户明确⾃⼰的当前所在位置（或者通过⾯包屑导航定位）。如果没有让⽤户明确所在位置、导致他们迷路，那么就犯了⽹站设计最基本的错误。讽刺的是⽤户不总是通过⾸页到达⽬的页，所以导航菜单对于⽤户来说意义重⼤。
导航菜单要与⽤户任务协调⼀致
7. 使⽤易懂的链接标签。清楚⽤户要的是什么，使⽤相似且相关的类别标签。要记住导航菜单并不是拿⾃造词和⾏话去忽悠⼈的。请使⽤可以准确描述⽹站内容和特征的术语。
8. 链接标签要容易阅读。减少⽤户阅读菜单具体内容的时间，如使⽤左对齐的垂直菜单、或将关键词前置。
9. 对于⼤型⽹站来说，让⽤户通过导航菜单预览⼦级内容。对于喜欢挖掘⽹站各层级内容的典型⽤户来说，下拉菜单可以让⽤户快速浏览、节省时间。
10. 为息息相关的内容提供本地导航。如果⽤户喜欢对⼀些同类商品频繁对⽐、或在某个场景⾥完成多个任务，可以将这些临近页⾯做成本地导航菜单，这样⽤户就不需要在复杂的路径⾥“上蹿下跳”了。
11. 利⽤视觉的传达⼒。图像、颜⾊等元素可以帮助⽤户理解菜单选项，但也要确保这些图形起的是积极作⽤（⾄少不能让操作变得更难）。
导航菜单要易于操作
12. 菜单选项要够⼤、⽅便点击。如果导航菜单的选项过⼩或者彼此靠得太近，会给移动⽤户造成很⼤的困扰；⼤屏⽹站中导航菜单选项如果也设计成这样，那就会很难操作。
13. 确保下拉菜单不会太⼤或太⼩。⿏标悬停触发的下拉菜单呈现时间太过短暂会给⽤户带来挫败感，因为⽤户还没来得及点击菜单⾥的某个链接的时候，下拉菜单就消失了。另外，太长的垂直导航菜单也不利于底部选项的点击，除⾮滚动屏幕。最后，⿏标悬停触发的下拉菜单不能太宽，否则会让⽤户误以为是新页⾯、并且好奇为什么⾃⼰还没点击就出现了新的“页⾯”？
14. 当页⾯内容很长时，可以考虑悬浮吸顶（或固底）菜单。已浏览到页⾯底部的⽤户要想回到⾸屏需要⼀次⼜⼀次地回滚⿏标（移动端则是不断向上划动屏幕）；如果导航可以悬浮吸顶，⽤户就可以很⽅便地进⾏其他菜单选项的切换。这很适合⼩屏幕场景。
15. 尽可能缩短导航菜单最常⽤操作的物理距离。下拉菜单内容⽐较多时，将⽤户最常点击的链接放到离⿏标悬停的选项最近的地⽅可以减少⿏标移动的距离（移动端也类似）。最近⼀些app中流⾏的饼状菜单则将所有菜单选项成圆（有的是半圆）状围绕在菜单周围，这样每⼀个选项链接的物理点击距离都是最短的。
⽤新颖有趣的交互⽅式去惊艳⽤户？
实际上……答案是“不”。
炫酷的效果并⾮我们的⾸要⽬标。对于⽤户来说，最能打动他们的还是⽹站的精彩内容、以及熟悉且操作简单的导航菜单。
当然，有的时候⼀些创新型菜单的确可以提升⽤户体验（下拉菜单就是⼀个例⼦）。在某些场景下，由于新技术的独特要求，这15条原则也未必使⽤——举个例⼦，第4条 “确保导航菜单拥有⾜够的视觉吸引⼒” 就不适⽤于语⾳识别。但⼤多数情况下，这15条都是我们需要考虑的指导原则，因为它们会⼤⼤提⾼导航菜单的易⽤性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。