导航设计模式的重要意义

在本文中，我们将以几个热门网站和web应用为例讨论导航设计模式的重要意义。

用户在使用你的网站或web应用时，需要清楚自己应当何去何从。如果你的应用无法提供方便的导航，用户将快速流失。所以说，为web应用设计出有效的导航功能具有至关重要的意义。

1.跳转

示例：Pinterest.

问题：用户希望能够快速跳过web应用的某个部分。

解决方案：创建快捷方式或热点，让用户能够直接跳转至web应用的特定部分。这一方式通常应用在app的开头或结尾处，但在其他时点也很常见。

例如，用户可以在页面任意位置点击某个标签或按钮或者滚动前往页面顶部。如果你的应用另外还采用了“无限滚动”（见下方）模式造成页面随着下方加载新内容的不断增多而越来越长，那么这一模式将尤其有用。

当用户需要使用只有在页面顶部才能看见的功能或信息时，让他们向前滚动个十几页回到顶部简直就是煎熬。在这方面，Pinterest采用了一个不太显眼的“返回顶部”按钮方便用户立刻滚动回顶部，从而有效解决了这一问题。

2.单页Web应用

示例：Gmail

问题：用户希望有一个集中的位置查看或对大部分或全部内容执行操作，这样就不用浪费时间在不同页面之间来回导航了。

解决方案：使用现代web开发技术构建一个不需要在用户浏览过程中进行重新加载的单页应用。这一模式还不仅仅是在应用开发完成后的小修改，它更大程度上是对web的工作模式进行全面的重构。在一定程度上，单页应用中的“页”并不是传统意义上的页面，它更像是一个特殊的数据页面。单页web应用会异步加载（使用AJAX），也就是说它们能够瞬时完成加载，用户在执行不同操作之间时不需要等待各个页面分别加载。

Gmai就是单页应用的一个很好的例子，其将多项操作融入了一个单独的“页面”中。单页设计的趋势是这一UI模式中相对不太高端的一种实现方式，在这一设计模式下，所有内容均可通过同一页面访问。这一模式可以让浏览变得更快、响应更迅速，从而让桌面与web应用之间的界限不再如此分明。

对于Spotify等web应用，考虑到用户有时会在背景播放音乐的同时浏览其他音乐，这时单页应用模式的重要性就愈发凸显，通过使用单页应用，用户就无需对页面进行重新加载，也不会造成音乐停止播放。

在使用单页应用时需要考虑的一个问题就是URL结构。由于内容使用JavaScript动态加载，URL会失去作用，如果设计不当，还会造成无法访问特定视图。Gmail和Twitter等应用通过为每个视图生成专门的URL来克服这一问题，这一方法还能够解决浏览器后退按钮失效的问题。

3.推荐

示例：Spotify

问题：用户希望了解下面应当浏览哪些内容。

解决方案：在不同时点显示内容建议和推荐，帮助用户浏览内容。Facebook、Eventbrite、Spotify和Yelp等很多应用会根据用户个人资料里的偏好信息或者其在应用中的过往交互记录生成针对性的内容推荐，从而帮助用户发现最新的相关内容。

这些内容推荐可以以“流行主题”或“最新发布”等形式出现。Facebook的做法是根据用户与时间轴上的帖子的交互记录提供“相关”页面，另外还会提供一个更具专有性的推荐栏以便用户发现新页面和新关注对象。对于用户来说，这样的内容流可以无穷无尽，特别是在充满用户生成内容的社交网络应用上。正如Web UI设计模式2014中所讨论，在UI中提供一个完善的推荐引擎是帮助用户发现新内容的绝佳方式。

4.相关内容

示例：纽约时报

问题：在发现当前内容不是自己所需或者需要更多内容时，用户希望浏览类似的其他内容。

解决方案：显示类似或相关内容帮助用户找到更多与自己当前所浏览内容相似的其他内容。和上述的推荐功能一样，相关内容也正在成为用户生成内容类web应用的一大重要UI设计模式，但不同的是，相关内容模式并不会根据用户的偏好或过往活动定制推荐，而是根据用户所属分类展示相关内容。

Amazon、TIME和纽约时报等网站在展示与当前浏览内容相类似的其他内容方面是很好的榜样。在这一方面，各大媒体则更进一步，它们一般会允许读者自行在文章的延伸阅读部分添加链接推荐相关内容。

5.后续步骤

示例：Quora

问题：用户希望了解在完成某些操作后应当执行哪些后续步骤。

解决方案：为用户提供一份明确的后续步骤清单以便他们相应执行，进而获得更深入的体验。举例来说，在填写个人资料时，Quora会为用户创建一份“操作步骤表”以便他们对照操作。LinkedIn则会将所有可以让用户添加到个人资料里的部分以列表形式展现出来，同时还提供一个完整度标尺来Ji励用户继续填写。

大部分复杂的web应用都会有多样的用户流，所以为用户显示操作清单是提供指导的好办法。这一设计模式还可以跟相关内容模式相互配合使用；媒体应用在这方面走的很靠前，它们会在用户到达当前文章末尾时显示其他文章的预览。这样就会让用户对你的UI更加投入。

6.历史/近期浏览

示例：Amazon.

问题：用户希望回看自己之前交互过的内容。

解决方案：允许用户继续先前中断的活动。举例来说，Amazon会记录用户的浏览记录并显示近期浏览内容，以便用户在有需要的时候回看。很多web应用都会记录用户的过往活动，Facebook的时间轴就是这方面的最佳示例。不仅是用户上传的时间轴记录帖子和照片，其还能记录用户和其他页面和Spotify等应用的互动历史，以便用户在有需要时回看。

Google Play Music和Spotify会记录近期播放的歌曲。这一模式可以帮助用户记录过往交互过的内容，也可以用作待处理事项的书签。

7.特色内容

示例：Airbnb

问题：用户希望了解使用应用能创建哪些内容？

解决方案：将特色内容布局到显眼位置，不要和有时效性的内容混在一起。这一类内容包括付费信息、新信息或其他各种重要信息。

特色内容的作用是告知用户各种可能操作方向并帮助他们了解平台能实现哪些操作等等。Airbnb、Etsy和Flickr等网站会在首页显示随机内容以帮助用户无所顾虑地探索网站，同时帮助现有用户扩大影响力来鼓励他们继续使用网站。

另一方面，这一方法还可以提高特定的内容重要性，从而使其获得更大关注度。你可以对付费或“特色”内容进行特殊标记，让用户对其有所期待。

8.无限制滚动

示例：Pinterest.

问题：用户希望能够浏览全部内容。

解决方案：在用户达到当前页面底部时自动加载下一组内容页面，形成无限滚动页面的效果。通过这种方法，新内容就能够自动加载，用户也就无需在点击“下一页”链接后进行等待。如果要显示的内容很多（例如Facebook、Twitter、Pinterest和Tumblr等很多大型社交媒体），无限制滚动将带来极大的帮助。

但是，尽管这个方法很适合于浏览内容，特别是多媒体内容，其还是存在着用户容易迷失方向、找不到自己当前所处位置这两个基本问题。如果用户想要暂时跳过特定点位或书签等以后有时间再回过头来看，无限制滚动就会造成问题。针对这一问题，Facebook所采取的办法是在用户浏览时间轴时创建一个页码/无限制滚动组合体，让用户能够跳过某个月或年。Pinterest则采用了滚动至顶部模式，同时配有一个小按钮让用户能够跳转到页面开头。

9.教程&指导标记

示例：Slack

问题：用户希望了解如何使用应用的不同功能。

解决方案：设计一套教程为用户演示各个功能如何使用。很多web应用都已经开始使用这项技术在用户首次使用时提供指导，具体操作上，其可分为两种基本方法。

Slack等web应用采用了重叠式指南的方法，使用“指导标记”凸显UI中的重要部分进而说明其功能。另外，Slack还使用了聊天机器人的方法帮助用户创建个人档案。考虑到Slack是一款聊天应用，这一方法合情合理，另外，“Slackbot”还会带领用户填写手机号码等个人资料信息并以对话的形式显示用户名。

除此之外，Tumblr则通过教程的方式让用户熟悉应用。这一教程同时也是在简单注册之外进一步收集重要信息的绝佳时机，很类似于设置指南的作用。这一模式对于所有无法让人一眼看懂的应用来说都至关重要，因为用户对你的产品越了解就越可能继续使用。

10.溢出菜单

示例：Spotify

问题：用户希望快速使用常规之外的选项或操作。

解决方案：使用可扩展的菜单隐藏额外选项和按钮以免它们占满主界面。Facebook和Google都在其web应用使用了“溢出菜单”这一方法来保持用户界面的整洁，具体方法是使用可扩展菜单隐藏比较重要的二级选项。

这一方法也可以用来显示“互动参与”方面的一些关键操作选项。举例说明，Pinterest会在应用上显示一个“分享到Facebook”按钮，以便用户在各个“大头针”下快速执行这一常用的操作。另外，也可以使用溢出菜单放置一些额外于主UI的菜单项或操作选项。

11.变形控件

示例：Pinterest

问题：用户希望执行不同类型的操作，但屏幕空间有限，无法显示所有控件。

解决方案：使用其他功能替代按钮和屏幕上显示的控件。根据用户当前所执行操作的不同，可以在UI上使用另外的元素替代原先的元素，例如使用“执行”替换“撤销”，或“添加”替换“删除”。如果先后所执行的操作在一定程度上具有联系，那么这个方法将有很大帮助。Pinterest和Facebook对“赞”和“踩”都使用了相同的按钮以节省空间，同时为用户指示当前的状态。这一UI设计模式能够节约空间、让撤销操作更加快捷，同时整体来看也是一项很有趣的解决方案。

12.“跟随式”固定导航栏

示例：Houzz

问题：用户希望能够在网页上随时访问菜单。

解决方案：让顶部、侧面或底部导航栏在页面滚动时保持不动。在某些情况下，一些子节的标题也可以在滚动时保持不动，或者替换掉或附着到当前的固定导航栏上。

Google+和Pinterest的主导航栏会固定在页面顶部，这样用户就能在有需要时快速使用菜单项和筛选器。如果再配合上无限制滚动模式，跟随式导航菜单可以在用户滚动幅度超过一个页面时带来极大的方便。

13.垂直导航

示例：Spotify

问题：用户需要能够在应用的不同部分之间导航，但屏幕上显示信息的空间却太有限。

解决方案：可以将UI中的重要部分放到一个列表中显示，以便用户上下滚动寻找自己要找的内容。这一方法还可以让UI的标题和注脚能够更加自由的进行“全局”导航，例如操作栏等。传统上说，大部分导航模式都采用标签或按钮等水平模式。垂直导航模式是为了应对用户生成内容（例如用户时间轴和无限制滚动内容等）而对传统导航设计的重大演变。

14.弹框

示例：Facebook

问题：用户希望在浏览相关内容的同时保持自己在当前UI页面中的位置。

解决方案：以弹框的形式显示重要的通知及其他信息。这一UI模式的好处在于其能够让用户方便、直接地浏览额外信息或执行特定操作，同时不会离开当前活动。

Pinterest和Fitocracy都采用了模态化弹框让用户只需快速操作。Facebook则使用弹框快速显示来自活动栏内容的片段。弹框UI模式对于这一类操作具有很重要的意义，因为这类操作的执行对象是数据，弹框模式可以让用户知道自己操作执行的应用对象是什么。

由于之前浏览的内容仍然在背景中显示，用户不用在各个视图之间进行切换就可以对筛选选项进行调整，或者更改字体大小等，一切都近在眼前。因为要关闭弹框或模态化窗口需要用户点击或滑动，因此它们还可用于显示重要通知或者需要用户特别注意的内容。

15.滑出窗口、侧边栏和抽屉

示例：纽约时报

问题：用户需要在应用不同部分之间进行导航时不会受到干扰。

解决方案：将应用的二级部分（例如导航、聊天、设置、用户资料等）放入一个可折叠的面板，并在不需要使用时将其隐藏到主要部分后方。在需要使用时，其可以将主要部分移走到一旁或者直接滑动覆盖主界面。由于滑出窗口是独立于应用主要内容的内容层，因此可以采用多种不同的方法将其内容布局到抽屉中——图标、文字甚至简单的控件都可以用作使用渠道。

通常情况下，抽屉可以隐藏到一个“汉堡式菜单”后方，或者使用简单的箭头指示此处有更多内容。将所有不太重要的内容藏到“侧边抽屉”里是个很不错的方法，这样可以让用户将注意力集中到各个视图的重要信息上。这样的例子到处都是。Asana、Spotify（搜索框）和Facebook（聊天框）。另外还有些突出性不太强的例子，比如Houzz，其使用了一个次导航抽屉，当用户向下滚动时会消失，滚动回顶部时重新出现；另外还有纽约时报，其侧边抽屉在用户点击页面左侧顶部“小节”按钮时会在左侧出现。在Pinterest中，用户向下滚动时，会显示一个向上箭头指向顶部，在其“如何使用”页面中也有同样的箭头。

16.无所不往的链接

示例：Asana

问题：用户需要有前后一致的内容导航方式，导航时不受到额外内容的分心。

解决方案：应用中大部分乃至全部用户内容都有链接，以便用户自由探索应用并寻找自己所需的信息而不必担心走到死路或者被乱七八糟的超链接文本、不需要的按钮、行动呼吁或者其他网站上常见的内容等所分心。如果用户想要和某个部分的内容进行交互，他们有可能会直接点击这一部分内容并打开新视图已获得更加细节化的体验。

内容密集的应用（例如Asana和Spotify）允许用户通过单击探索各种各样的内容，例如，可以单击某个艺术家或用户以查看其个人资料、各项内容都可以点击、表格抬头可以点击进行排序等等各种操作。

让用户放手导航

关注用户预期的导航目标、他们是否会观察导航元素、他们导航到应用某一区域的频率、用户的来源和使用应用的目的（也就是用户流）等等。反复对导航元素进行整理、排序、改变大小和微调，直到获得超越预期的结果。当然还需要深思用户在尝试进入应用的某个部分时实际会采取哪种方式，切勿遗漏关键要素。

翻译：蒋灿

原文地址: speckyboy