导航选单的重要性已经不言而喻,我们平时遇到的每一个网站或站群软件中都有它的存在;但并不是所有的导航选单都设计得准确无误。我们也常发现多用户因导航设计不当而感到困惑、难以操作,或者连导航在哪儿都不知道。下面是网站导航设计的几个要点.
1. 导航设计要大气
大屏中的导航选单不要太小. 如果空间足够,不要将选单隐藏。
2. 导航操作要简单方便
通常多用户会希望在浏览过的网站或 app 中的类似位置(譬如网站顶部、左侧等)中找到他们想要的 UI 元素。
3. 要有互动感
如果选单选项看起来不可点选,多用户未必能认出它是导航。如果我们的导航设计融入太重的图形、或太过追崇扁平化设计风格,会使它们看起来更像是装饰性图片或标题。
4. 有视觉冲击力
很多导航选单的周围会留有一点空白区域以从视觉上突显它。但当网站 UI 元素比较拥挤时,如果导航选单视觉比重太弱就会在各色图形、促销广告、标题里迷失,不易被多用户识别。
5. 导航选单与背景要对比鲜明
即便是熟悉以上规则的设计师设计出来的导航选单也有可能会被多用户忽视,因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时,比如哪个 UI 元素应该拥有更明显的视觉效果。如果你知道你的导航选单在哪儿,自然能一看看到它,因为这是你设计的。因此,让多用户参与验证十分必要。
6. 位置导航
多用户成功导航的一个最基本的标准是他自己能发现:“我在哪儿?” 通常被选中的选单选项在视觉上与其他选项是有差异的,这可以帮助多用户明确自己的当前所在位置(或者通过面包屑导航定位)。如果没有让多用户明确所在位置、导致他们迷路,那么就犯了 WordPress 网站设计最基本的错误。讽刺的是多用户不总是通过首页到达目的页,所以导航选单对于多用户来说意义重大。
7. 链接标签要清晰
清楚多用户要找的是什么,使用相似且相关的类别标签。要记住导航选单并不是拿自造词和行话去忽悠人的。请使用可以准确描述 WordPress 网站内容和特征的术语。
8. 链接标签要易读
减少多用户阅读选单具体内容的时间,如使用左对齐的垂直选单、或将关键词前置。
9. 对于二级选单要易于查询
对于大型网站来说,让多用户通过导航选单预览子级内容。对于喜欢挖掘网站各层级内容的典型多用户来说,下拉选单可以让多用户快速浏览、节省时间。
10. 为内容提供本地导航
如果多用户喜欢对一些同类商品频繁对比、或在某个场景里完成多个任务,可以将这些临近页面做成本地导航选单,这样多用户就不需要在复杂的路径里 “上蹿下跳” 了。
11. 传达网站意图
利用视觉的传达力。影象、颜色等元素可以帮助多用户理解选单选项,但也要确保这些图形起的是积极作用(至少不能让操作变得更难)。
12. 选单选项要够大、方便点选
如果导航选单的选项过小或者彼此靠得太近,会给移动多用户造成很大的困扰;大屏网站中导航选单选项如果也设计成这样,那就会很难操作。
13. 确保下拉选单不会太大或太小
滑鼠悬停触发的下拉选单呈现时间太过短暂会给多用户带来挫败感,因为多用户还没来得及点选选单里的某个链接的时候,下拉选单就消失了。另外,太长的垂直导航选单也不利于底部选项的点选,除非滚动萤幕。最后,滑鼠悬停触发的下拉选单不能太宽,否则会让多用户误以为是新页面、并且好奇为什么自己还没点选就出现了新的 “页面”?
14. 悬浮吸顶(或固底)选单的使用
当页面内容很长时,可以考虑悬浮吸顶(或固底)选单。已浏览到页面底部的多用户要想回到首屏需要一次又一次地回滚滑鼠(移动端则是不断向上划动萤幕);如果导航可以悬浮吸顶,多用户就可以很方便地进行其他选单选项的切换。这很适合小萤幕场景。
15. 缩短导航选单最常用操作的物理距离
下拉选单内容比较多时,将多用户最常点选的链接放到离滑鼠悬停的选项最近的地方可以减少滑鼠移动的距离(移动端也类似)。最近一些 app 中流行的饼状选单则将所有选单选项成圆(有的是半圆)状围绕在选单周围,这样每一个选项链接的物理点选距离都是最短的。