网站能让我们访问多种多样的信息。不论是想了解某个公司更多的信息、还是买东西、捐款、访问一个资源等等操作，我们都依赖于网站的导航来帮助我们找到想要找的内容。然而很多网站的导航设计只能说“还好吧”，它能帮助人们找到想要的信息，只不过可能需要用户难受那么一会。下面介绍一些最佳实践的设计方法，也许能帮助设计师设计出更高效、清晰的导航体验。
Gerry McGovern在他的著作“Navigation is more important than search”中展示了他团队对一个实验: 他们让固定的用户使用网站去完成大量的任务，发现用户有70%的几率是通过点击一个链接开始一项任务的；30%的几率使用了搜索。McGovern声称：人们依赖于导航因为点击链接要比搜索来的更快更容易。他解释道，当链接的文字恰好和用户想要找的内容有某些关联或相匹配时，用户就越容易点击它。
然而当有太多的链接时，如果它们没有被很好的组织起来，或者名字很让人迷惑的时候，就会阻碍人们使用链接。在文章的最后他强调: 伟大的网站都要建立在清晰的菜单和链接上的。这是一个非常重要的设计导航的原则，但不是唯一的原则。还有一些原则是需要UX设计师在设计现代导航时需要注意的：
-
一致性优先原则
-
设计清晰的交互
-
避免层次过深的导航
-
为自适应和兼容性而设计
一致性优先原则
导航的不一致体现在内容不能很好地和站点的导航相呼应，于是它就被单独列出来了。或者人们需要快速浏览一个层次比较深的内容时，管理员就随便在导航上硬生生加了一个快速链接。其实，还有有其他的设计方法可以避免在导航上加这些不和谐不一致的额外内容的。
子页面和Landing page
一致性涉及到做出选择。例如，是否所有的导航元素都要显示他们的子页面的链接，还是所有的都不显示？只有一部分显示子页面的话人们就会很迷惑，为什么有的显示了有的却不显示。如果子页面不在主导航中被列出来的话，那就确保二级导航也使用一致的行为。
在Nashville Zoo 网站, 当hover每个主导航时，每个部分的子页面就会显示出来。
相似地，要么所有主导航需要链接到各自的landing page, 要么所有的主导航都只是二级导航的一个总览的标题不可点击。如果你让一部分主导航可点，一部分不可点，那么同样会使用户困惑当他们点击了某个导航时并没有跳转页面。
视觉设计也需要清晰地指出主导航是链接(可点)还是只是总览的标题(不可点)。如果不是链接，要使用另外的颜色或字体来说明这一点。另一个有效的指示是当鼠标移动到链接上时，光标样式会变化(变成手)。
The National Parks Conservation Association 网站的主导航就是一个标题而已，不可以点击，所以文字是黑色的。而可以点击的文字是绿色的。
另外，如果主导航是个链接，就让相应的操作更清晰一些，比如利用视觉设计。在下面这个菜单上，用户就可以通过点击Career的文字来访问Career的landing page, 而通过点击箭头来访问Career的子页面。
Fairfax County Public School
如果发现有不合适的内容被突兀地加在了当前网站上的话，那是时候重新考虑网站的结构了，或者考虑为什么这个信息和其他信息格格不入？它是否该被移除掉？或是否可以将它合并到某个相关的页面去而不是独立地存在着？
如果有一个页面需要经常被访问，或需要更容易被找到的话，可以考虑在主页加一个常用功能/页面的快速链接模块。人们能轻易就关注到这些块Block – 别让一个重要的、有特色的功能打乱整体网站的布局。
面包屑导航
面包屑导航旨在帮助人们在网站中指明方向。这种指向功能在人们从外部链接跳转到某站点中很深层次的页面时尤其有帮助。但是面包屑导航需要被正确有效地使用，它们必须要正确地展示网站的层级或页面的层次。如果小网站只有两个层次的话，那根本不需要面包屑。
你可以对比下Nashville Zoo 上的面包屑，和展开的导航菜单，它们应该是完全一致的层次结构
设计清晰的交互
当网站的浏览者不知道哪个元素是可以交互的时候，或者期待出现什么交互的时候，通过精心设计的交互来自解释以及让其变得可理解就很重要了。
清晰的功能指示
视觉上的变化有助于说明网站上期望的交互行为。例如，通过点击调转一个展开的图标的箭头方向从而变成一个收缩的图标，就表明有些事情变化了，以及如何反转这种变化。当图标不变化的时候，人们可能不会注意到事情的变化了。
在Bill and Melinda Gates Foundation 网站上, 注意箭头翻转的变化的方向
使用带图标的标签
在图标后加一个文本标签可以减少含糊不清。例如，在有争议的汉堡图标前面增加了一个文字标签Menu, 这样就帮助人们理解更容易理解汉堡图标元素的含义了。这种方法对于其他通用的Icon也适用，例如Contact或者Log In.
在teehan+lax 网站， “MENU” 标签挨着汉堡图标。当汉堡图标变成X的时候，Menu仍然显示着，这就避免了用户不知道此处是什么含义的问题。
区分图标是否有链接
区分图标是否有链接功能。例如，给那些有链接功能的图标以链接的样式，那些没有链接功能，仅仅是装饰的图标就不要给链接的样式了。
根据NNG的研究，相较于单纯的文本，如果同时使用颜色和图标的视觉指示，用户在找相关的内容时大约能提高37%的速度。除了图标本身的颜色外，通过hover改变图标的颜色，将更帮助人们更容易理解该图
标指代的不同含义。
例如，在twitter上，那些用户不能交互的图标都是白色方块形状的图标。用户可以交互的图标是灰色的，当鼠标浮上的时候变成另外一种颜色。
力争设计扁平导航
为了设计出更好的导航，我们的站点层级和信息架构都需要来支持。我们需要创建好的站点地图，力争设计扁平的导航系统，即：不论用户想访问多深层次的页面，都必须在3次点击之内就能到达。
当然扁平导航系统是理想化的，同样“由于短期记忆是有限的，那么菜单也应该是短的”这句话也是不完全正确的。菜单的目标是为了让人们“依靠识别而非记忆”来寻找信息，所以菜单需要短到至少能被浏览，而长到足够清晰表明其含义。
限制层级的数量
一个导航的层级数绝大多数是由网站本身的页面层级决定的。理想化的情况下，用户尽可能少的点击，尽可能快的访问他们想访问的内容。引用Nielsen Norman Group的说法就是：层级越深，用户就变得越容易迷失方向。
扁平层级: 注意纵向只有三层
深层级: 纵向至少有五个层级
通常，大多数网站会有三到四层。这样不仅能让内容容易被访问，也不会让网站导航太多(第二层的链接数)。为了确定最合适的层级数，可以有以下一些信息架构的方法:
-
调整标签之间的关联关系，例如之前他们可能是根据主题来划分的，也许可以考虑根据操作类型来划分组。
-
考虑合并或删除内容，最扁平的导航设计就好像下图一样，只有一层并且没有子页面，所有的页面都被展现在网站的同一级别上。
Big Spaceship , 注意导航是在一个全页面上由链接列表组成的，使用淡化后四个导航文字颜色的方式来使它们重要性降低。(除了扁平的导航设计外，还有优先和顺序性也体现出来了)
每个级别独特的视觉设计
人们应该能够快速浏览导航以及能立即弄清哪些是首要链接、二级链接和三级链接。利用位置摆放和分组能够建立这一层级关系。
视觉设计 – 例如字体、字号、字重(weight)、字体颜色等等，都可以被用来建立几个层级之间的视觉对比关系，并且这种样式区别带来的层级关系在所有页面都保持统一。
注意Antro’s 网站的一级导航是白色的，粗的较大文字。鼠标浮上之后导航文字变成灰色。二级导航的颜色是蓝色、细的小一号字体，鼠标浮上有下划线出现。主导航和二级导航的区分会随着用户移动而展现出他们的不同。
使用位置指示
和面包屑导航一样，位置指示帮助人们引导他们自己。尤其是当网站层次特别深的时候。可以清晰地告知用户当前在网站的的哪个部分中。
在Audubon 网站,当用户点击了这个导航并处于这个导航内容中时，注意Conservation在导航上是被高亮出来的。
为自适应和兼容性设计
伟大的导航设计能够轻松在移动设备和平板电脑上转换。为所有设备来设计导航，或者考虑两种相似的导航方式在桌面和移动设备上转换，可以帮助用户快速适应设备的转换带来的问题(例如屏幕变小)。
放弃hover交互
二级导航经常在鼠标浮上主导航后显示出来，然而在移动设备上可能就不管用了。不能在移动设备上使用悬停的交互导致了两种设备间的不一致性。人们不会那么快的知道原本悬停能够显示的菜单如今在手机上应该如何显示出来。如果你需要提供两种交互方式给一个Link元素的话，就考虑明显的的两个位置来让用户去点击。例如，点击文本链接本身跳转到landing page, 点击icon则表示展开子选项的含义。这样也能避免歧义了。
区分移动版和桌面版
在NNG的文章Mobile First is NOT Mobile Only中，他们建议优化每个设备上的导航。当然这可能看起来需要做分开的两种不同的设计给不同的的设备，NNG解释说这种用户体验会更好，因为不同设备有不同的屏幕尺寸，有不同的使用场景就有不同的交互能力。
例如下图The Japan Times网站的导航，当宽屏时所有的分类是横向的平铺开的。二级导航是在主导航下的一行的位置。而在移动设备上，使用了汉堡图标将这些导航收缩起来，并且所有的导航都纵向的的排列。而且当前显示的主导航直接显示一级导航和二级子页面列表。注意蓝色的线的标签全部都是二级导航。并没有按照规律变化，而是按照人们容易使用的方式进行了变化。
The Japan Times
总结
这篇文章主要涵盖了设计导航需要注意的几点要素。再回顾一下四个要点:
-
一致性优先原则
-
设计清晰的交互
-
避免层次过深的导航
-
为自适应和兼容性而设计
当然还有很多值得我们学习的已有的导航设计模式，还需要大家继续探索和学习。
校区一 / 高新园区阳光数码大厦12楼
校区二 / 中山区青泥8号7楼
校区三 / 西安路兴工街麦凯乐正对面
校区四 / 大连广播电视大学校区
校区五 / 大连海洋大学校区
译文作者：创课 Ada老师