有效地简化导航-Part 2：导航系统

怎么才能做出一个既简洁而又具有预见性的导航？在Part 1里面说，前两步分别是：组织内容，简化导航选项；解释这些选择，降低用户的认知障碍。

然而，我们还需要多做两步——选择正确的导航菜单形式，并设计出来。本系列 Part 2 将展示第三步和讨论哪种导航菜单适应哪些内容。

界面上的导航菜单都为了给用户提供浏览内容的导航选项。这不包括，文章或商品页面里面的超链接，因为它们的主要作用是流量，而不是导航。

主（传统的）导航和次级（备用的）导航之间是有区别的，但很难精确界定。有人说主导航主要是通过点击、悬停来选择或浏览元素据类型，而次级导航在其中某方面有缺失。

传统的导航菜单

传统的导航菜单有以下5种类型，从简单到复杂排序：

1. 菜单栏
2. 常规下拉菜单
3. 多栏下拉菜单 (Mega-menu)
4. 分页
5. 动态过滤器

当然还存在更复杂的混合型方案，但是所有混合型导航都能拆解成以上5个类型。现在问题是什么时候该选择哪种类型。

就像 Part 1说的，设计师用3种方式来解释导航选项：标签；标签+图；标签+图+描述。为了降低用户的认知障碍，设计师应为目标用户提供提供足够的信息来让他们理解这些选项。

下面这条经验法则 (rule of thumb) 可以帮你决定什么时候选用哪条规则：越少的选项，需要解释的就越少，所以导航应该尽可能简洁。

为什么有些 widget 更易用，什么时候应该选择这个而不是那个…… 首先仔细看下这5种导航菜单。

菜单栏

几乎每个网站一个横向或竖直的栏来容纳顶级类别。

01-navigation-bar-500

<small>最基本的导航——一个横向或竖直的栏</small>

建议

最重要或最频繁被访问的栏目或类别应该放到这个导航栏里面。

解释

一个导航栏是最简单的导航形式。这个导航栏里面的栏目或类别都是全局性的，可以直接被看见及访问。相比之下，用回会悬停在一个下拉菜单或等待分页加载要访问的选项。

问题

导航栏（横向或竖直）只能放下一小撮栏目，而且还受限于屏幕宽度和方向，它会占据本应该显示主要内容的空间。

下面的截图中，会看到横向的导航也是很好用，它只占据一行空间。为了把它放到更小尺寸的屏幕里面，设计师把导航堆砌在行里面，然而这样就会把主要内容压下去，用户就需要多滚动几次。

navigation-stack-preview-opt

<small>多列的导航就会变得很难用。</small>

在宽屏中，竖直的导航适用于更多的菜单栏目，但它有另一个缺点。它占据的竖直空间本可以更高效地展示主要内容，文章、视频、商品信息……下面我展示并对比它们的效果。

03-navigation-bar-500

<small>竖直导航会束缚内容在宽屏中的展示效果。</small>

这就是为什么下拉、浮动菜单更适合多栏目。它们可以根据需要来显示额外的栏目，把舞台让给内容。

常规下拉菜单

下拉、浮动菜单，被触发的时候，就会出现在内容上面。它的条目都是竖直堆砌在一列里面，由文字或文字+图标组成。

04-dropdown-menu-500

<small>下拉菜单把所有条目竖直堆砌在一列里面。</small>

建议

如果栏目可以很好地用文字表达，并且不会太长，一个常规下拉菜单是最简单而又有效的方案。

解释

与多栏下拉菜单相比，常规下拉菜单有如下优点：

• 快速加载
• 多栏下拉菜单需要更多的空间，而常规下拉菜单只需要少量文字。多栏下拉菜单还会干扰用户，至少也会降低他们的浏览速度，因为他们需要花费时间来搞清楚这个布局。相比之下，一个简短的竖直列表就很适合快速阅读和理解。

问题

如果菜单太长，整件事就会变得很奇葩。一个长的竖直下拉列表会被浏览器窗口切掉一部分，这就需要用户不断滚动。有两个方法可以处理这个问题。

把表弄成子类别。但这个方法，如果交互设计得不恰当的话，从一个子菜单到另一个子菜单的导航会让人沮丧。这个问题会在本系列的 Part 3 中说到。

第二个方法就是使用适合屏幕方向的多列下拉菜单。

05-dropdown-menu-500

<small>如果屏幕空间是决定性因素，让菜单适应屏幕方向不错的变通方案。</small>

多栏下拉菜单 (MEGA-MENUS)

有一种很特别的下拉菜单叫做多栏下拉菜单。多栏下拉菜单就是下拉或浮动菜单，但它并不是用一列条目堆砌起来，而是用图片、印刷上的层级、不同的图层来显示选项。

06-mega-menu-500

<small>多栏下拉菜单就是一个更大、更复杂的下拉菜单。</small>

建议

如果选项需要文字+图片，那多栏下拉菜单就是个好选择。

解释

常规下拉菜单不能提供这样的空间或形象化的选项。不管是常规还是多列，与分页相比都会有以下的优点

• 快速加载
• 降低认识障碍。分页的话，用户就会思考“哪个是广告？”，“哪个才是真正的内容？”，“导航在哪？”……下拉菜单只会出现在导航，并且出现在鼠标光标附近。

问题

即使是多列下拉菜单，空间也是有限的。如果有很多很多栏目，那分页就不可避免。

分页

第四种显示栏目、类别的方法就是用一个独立页面。

07-separate-pages-500

<small>分页就可以容纳很多子类别。</small>

建议

如果需要文字+图片+描述，分页就是最好的。

解释

用多列下拉菜单来容纳这些内容也是可行的，但也只有描述很短的时候。

问题

把用户带到一个分页来浏览导航选项，而不是内容，这并不是一个优雅的方案。同时用户也会被带离当前页面的语境。但如果多列下拉菜单不足以容纳这么多的选项，分页就是最好的方案。

动态过滤器

动态过滤器是最复杂，最强大的方案，依靠用户的组合他们想要看的内容流。

08-filter-500

<small>复杂而强大，动态过滤器让用户可一组织他们需要的内容。</small>

很多网站只有前3种导航菜单，动态过滤器就没有单独出现。而是作为一个选项附加在主导航上。

Kmart （下图）以下拉菜单开始导航步骤，常规和多列都有。在下一个层级，使用分页来展示产品类别。当用户导航至某个系里面，他们就会看见一个动态过滤器。用以精准搜索。

09-dynamic-filter-500

<small>动态过滤器经常会附加在主导航上。</small>

建议

符合在Part 1里面讨论的元数据类别。可以这样说，前3种导航适合重要和互斥类别，动态过滤器适合把类别整合在一起。

解释

动态过滤器的有点就是可以让用户选择，并及时改变值。而不是在不同导航层级里面前进、后退，用户可以停在一个层级，动态地整合值，直到结果符合他们的要求。

动态过滤器通常是竖直的并不是一个缺点，因为过滤结果并不是前面所说的“内容”。他们仍然是导航的一部分，左边选择的值和右边及时反馈的结果是有动态联系的。

问题

动态过滤器很强大，也很复杂。它们占据更多的空间，需要更多的时间来加载。用户需要去分析这些不同的元素，包括过滤器、结果、结果排序、展示模式，这些使动态过滤器在电脑上造成挑战，就更别说手机上。如果更简单的导航就可以完成工作，就不要使用它。

备用的导航

几乎所有的网站都会选用其中一种传统导航作为它们的主导航。然而，很多还会以备用导航系统作为补充。这么流行的方式也是很重要的。

这里有四种基本的形式：

• 搜索
• A-Z的索引
• 网站地图
• 标签

搜索

搜索让用户从在各个导航层级中抽离出来，把他们直接带到目的地。其中的不同点在于，页面的标题已经由用户手动设定好了。

10-search-500

<small>搜索是在不同层级中浏览想要的内容的快捷方式</small>

设计师会在所有的页面上应用标签、关键字系统，来解释用户和搜索引擎之间的误差，例如错别字、同义词、内容不同的概念模型。换言而知，搜索引擎会尝试猜测用户究竟想要什么。

建议

提供搜索作为主导航的补充，并不等于作为主导航。

解释

用户是否以搜索为主导，关于这点不同的研究有不同的结论。当然，这也会受搜索引擎是如何设计、展现等因素影响，甚至导航的设计太差也会增加搜索的占有率。总之，搜索并不是首要方案。

尽管开发者作出各种努力来避免错误，搜索成功率还是很低。原因是每个网站都会有自己的标签、分类方案、命名习惯。用户不知道这些细节，所以它们经常猜测性地填写搜索请求，这是一个累赘而又不确定的过程，导致很多人只有一、两次搜索功能。在移动设备上尤其明显，因为填写搜索请求的体验更不舒服。

另外一个问题就是，即使搜索结果都是相关，用户也不确定它的完整性。“会不会因为搜索引擎曲解了我的搜索请求而导致少了些什么？”……传统的导航，确立并展现所有类别，同时展示所有相关条目，提供用户所浏览的确定信息。

另外，还会经常讨论搜索的转化率比导航菜单高。其实这可以被解释——浏览和搜索的区别。浏览型的用户会用菜单，而很少决定买些舍呢么，那些知道自己想买什么的用户，就会直接输入并搜索。

然而，搜索能够更有效地找到特定商品，它并不那么流行。

11-search-vs-navigation-500

<small>用户会倾向于使用传统导航，即使是在找特定商品的时候。</small>

用搜索的问题是，不同的详细配置、不同的地区命名或型号，很难说出产品的确切名称。“GS-50 or G-150?”，“这个有额外的电池？”通过动态过滤器，用户可以指定他们想要的功能，而不需要想起具体型号、编码。

另外一个问题就是，搜索会妨碍用户寻找相关条目，如果用户找到他想要的确切条目，他就不会去看其他。而使用动态过滤器，用户就会看到相关的条目，包括一些功能更多或价格更低的物品。

给搜索引擎添加动态过滤器也是可的，这可以结合两种的有点。

总的来说，搜索引擎，特别是有复杂的功能和算法，可以提供很好的结果，但是它本身存在的问题使得它还不如一个经过精心设计的传统菜单。这就是为什么把搜索是作为一个备选方案，它并不是导航的核心。

搜索在用户生成内容 (user-generated content) 的本地应用能更好地工作，因为用户知道他们命名过、标记过的内容。

A - Z的索引 (A – Z index)

一个 A - Z 的索引包括网站上面的所有条目，并按字母顺序排列。

12-index

<small> A - Z 的索引按字母顺序排列网站的所有内容。</small>

建议

不要优先考虑 A - Z的索引。只列出所有的类别页面，比列出上千个独立页面要有用。

解释

A - Z的索引的好处在于大家都知道怎么按字母顺序来导航。但也存在3个问题。

第一，A - Z的索引很适合文字，不适用于图片和描述，有很多时候图片和描述是不可或缺。

第二，选取符合用户期望的词汇也不简单。由于地域、年代、术语的关系，可能会造成用户在错误的地方寻找想要的条目。唯一的变通方案就是，包含同义词。在传统导航中，同义词并不是一个大问题，因为用户不会同时面对大量选项。

第三，A-Z的索引，就像搜索那样，也会妨碍用户发现相关条目。例如，找“eggs and beans”(…蛋和豆)，他们就只能得到蛋和豆。在传统导航里面，用户还会见到其他早餐，因为他们的导航线路是“早餐”->“蛋和豆”。

网站地图 (site maps)

网站地图通过主标题、副标题来展示网站的结构。

13-map-500

<small>网站地图展示网站结构。</small>

建议

sitemap.xml文档可以帮助搜索引擎索引索引网站。但是不应该把它视作导航手段。

解释

网站地图通常只包括文字，但是用户需要的是图标、图片、藐似来理解选项。网站地图可以包含这些元素，不过这会加剧另一个问题。网站地图通常会一次性显示所有内容，并不提供筛选。这就会影响用户浏览这些内容、获取信息。

标签 (tags)

标签，可以是关键字，并不需要有父集、子集类别。通常出现在文章末尾。

14-tags

<small>通常会带上“More about”的标签</small>

建议

基于标签的系统在调用额外信息方便做得很好，即便如此，仍没传统的基于类别系统做得好。

解释

在所有的备用导航中，标签最接近传统导航。毕竟，标签本质上就是创造元数据，信息架构的第一步，传统导航的基础。然而每篇文章都有一串标签，你很快就会得到成千上万个标签。

这就是为什么为标签分类这么重要。把这些标签整理成父类别、子类别，设计师就能把一大堆标签结构化成一组组相关的信息。包含这些类别的传统导航可以让用户跳过不想要的组别，直接浏览想要的信息。

很多以内容为基础的网站，会用混合导航 (hybrid navigation) 来代替传统的菜单。这些分类标签一般很粗略，依靠其他的导航模型，如外部和内部的搜索引擎、feeds、社交媒体链接。这类系统可以把用户带到想看的文章，但这很难让用户找到想要的一类文章。为了解决这个问题，一些设计师简单地把他们归结为一系列关键字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用户访问这些标签来浏览他们感兴趣的相关文章。

在传统的导航，用户会按相关的关键字来做导航——News → Politics → US → Domestic policy → Health care。在这个案例中，用户会对这篇文章很感兴趣，因为它论述了美国医保系统，而不是因为它提到“Barack Obama,” “Democrats,” “Republicans,” “shutdown.” 访问父类别就能查看相关文章。

15-tags-500

<small>传统基于层级的菜单，是最精准的导航类型。</small>

基于标签的系统，如果在社交媒体和搜索引擎的补充下，会变得十分有效。但是它作为一种导航方法，像钓鱼，而不是目的性强的搜索。同时，用户不一定依赖搜索引擎、外部链接来浏览网站。他们更倾向在首页寻找信息，所以经过设计的传统菜单还是最高效的方法。

结论

当你要选择恰当的导航方式，底线是很明确的：尽可能少选项，尽可能用简短的信息来解释它们，尽可能简洁的导航。

最大的问题在于是否或怎么使用备用的导航，作为传统导航的补充。

备用的方案不应该是高成本的。而它们本身又有缺点，以至于它们不能成为主导航系统。此外，用户一般不会使用这些备用方案，除非主导航不起作用。

所以，与其投入大量努力去改进、提升备用导航，还不如去设计一个好的主导航。这样就不需要次级导航的出现。

这篇文章的建议都在下面总结了一遍。

选用传统导航

• 一个竖直的导航栏并不会比横向的差，但他会分散对主内容的注意力，因为它和内容出现在同一块位置。一个横向导航栏更适合顶级类别，只要条目可以放在一行里面。如果一行不够的话，就使用下拉菜单或分页，而不是简单地把它弄成竖直导航。
• 如果文字就足以解释选项，常规下拉菜单就足够。把长的列表分割成次级类别，或者选用适应屏幕方向的多栏下拉菜单。
• 如果需要文字+图片，选用多栏下拉菜单。
• 如果需要文字+图片+描述，那就使用分页。
• 上面这些对主要、互斥可选类别都很有效。如果可选类别可以合并，那就使用附加在传统菜单上的动态过滤器。

选用备用导航

• 如果用户知道他们想找的具体条目，搜索或 A - Z 索引就很好用。然后它们都有碍于发现相关条目，不要把它们看得比传统导航更重要。
• 如果分类内容的成本不会太高的话，基于标签的系统是一个很好的方案。不过它需要社交媒体和搜索引擎的支援。

了解哪种导航适合哪类选项解决了很多问题。但是第4步也是必要的——即，设计简洁、可预测、舒适的导航。会在 Part 3 中讨论

推荐阅读

• “Is It Time to Rethink Website Navigation?,” Jason Gross, Six Revisions
• “The Case Against Vertical Navigation,” Louis Lazaris, Smashing Magazine
• “Designing Search,” Tony Russell-Rose, UX Magazine
• “Dynamic Tag-Based Navigation for Web Sites,” Heinrich Hussmann, Academia
• “A – Z Website Indexes Explained,” Heather Hedden, SitePoint

---

来源：smashingmagazine / May 9th, 2014
作者：Anastasios Karafillis
翻译：lyzhie

---

时隔半年才又开始「翻译？！别闹了」…… 其实原因有两个，简书在windows下变好看；最近多了很多人来点喜欢。嗯，谢谢