导航设计 – 设计之家

解决方案：使用现代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则会将所有可以让用户添加到个人资料里的部分以列表形式展现出来，同时还提供一个完整度标尺来激励用户继续填写。

大部分复杂的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

30个创意导航设计的网页欣赏

sj33cn — Fri, 24 Oct 2014 12:19:13 +0000

Walk The Line Festival

60 Years in 60 Poems

30例响应式网站导航设计欣赏

sj33cn — Wed, 06 Nov 2013 15:02:14 +0000

响应式导航的设计遵循了响应式Web设计理念，页面的设计往往会根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式，使用户在不同的平台上有着独一无二的用户体验。

Ableton

Bretzel et Bredele

Adaptive Path

Jan Finnesand

Not Complex

Andre Maurice

United Pixel Workers

Oliver Russell

Hicksdesign

Design Made in Germany

25个创意有趣的网站导航设计欣赏

sj33cn — Sun, 27 Oct 2013 15:52:50 +0000

Official Website of Jens Lehmann

House Campaign

Soundscape

Quechua CrossRock 2013

Agence Interactive

Director Creativo Digital

Vismap Cucine

Digital Agency

Experience

Dassel Und Wagner

Aclam Guitars

Diesel Home

The Drawing Room Creative

Lacoste Celebrating Eighty

Mosne

Liquors Marie Brizard

Dreams Doodler

Holler London

Mister

Laura Baffari

Digital Bakery

ELI

Hide, Listen & Find

New Skoda Octavia

The Production Kitchen

30个国外创新的网站导航设计

sj33cn — Wed, 23 Oct 2013 13:11:58 +0000

Ook

dibiasotto.com

colouredlines.com.au

Ampersand

designembraced.com

unfold.no

moto.oakley.com

isseymiyakeparfums.com

wherearego.com

nerval.ch

audedegrassat.com

artpress.themebucket.net

weareeli.dk

ommegang.com

50个不同寻常的网站导航设计

sj33cn — Tue, 25 Jun 2013 00:40:58 +0000

1. We Are Eli

2. Etch Apps

6. Hommard

8. El Monstruo

9. Silktricky

10. Carbon Studio

页面导航设计的快速验证方法

sj33cn — Sun, 16 Sep 2012 13:53:00 +0000

著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划，将面包屑撒在来时的路上，虽然当月亮升起时，面包屑被鸟吃掉了，但是现在的互联网设计师们从这个故事中找到了灵感，设计出不会被鸟吃掉的固定“面包屑”。

图1:互联网上各种各样的面包屑

汉赛尔和格莱特为了在森林中找到回家的路，撒下了面包屑，这是一种导航方式，如果没有被鸟吃掉，无论走到森林的任何地方都可以知道如何从当前的位置走回家去。在互联网信息爆炸的今天，互联网的设计师们在网页上设计出各种各样的固定面包屑（如图1）也是为了不让用户迷失在信息的大海中，给予用户的一个导航的方式。Apple是大家公认的用户体验最好的设计公司，我们来看看apple.com是用什么方式完美地完成用户导航需求的。

页面导航原则

图2:apple网站itunes新功能介绍的面包屑

图2是apple.com上面itunes新功能介绍的面包屑。一共有两个元素：节点标签和箭头。

节点标签：有apple的logo、itunes和what’s new。且节点标签有不同的样式，what’new用了Bold的样式。每个节点标签中间都用箭头隔开。箭头：是一个有方向指向的符号。

面包屑这种方式完成导航需求的方式为：

1、通过最后一个节点标签告知用户当前位置；2、面包屑整体从左到右告诉用户来到当前位置的固定路径；3、除了当前页面的节点标签，其它节点标签均可点击，可以让用户回到上一级页面（可以回到最初起点的作用）。通过这三点任何用户都不会在网站中迷失方向。

图3: apple网站itunes新功能介绍的页面

然后我们再对照这个面包屑所在的页面（图3）从上往下的各种导航方式的元素进行分析，看页面除面包屑之外是如何自我完成导航需求的：

1、首先导航菜单栏上的logo 告诉用户在apple的网站上，导航上的菜单分类告诉用户这个网站一共有多少个维度，菜单上被选中的Itunes ，告诉用户当前处于itunes的菜单维度下。

2、接着是itunes的页面导航栏，大大的标题itunes 告诉用户下面的内容都是讲itunes，右边的itunes的页面菜单导航告诉用户itunes页面的内容分类，其中不一样状态的what’s new 告诉用户目前选中的是这个类容，下文内容是在这个分类下的。

3、最后是这个页面的标题What’s new in iTunes ,表示当前页面的内容是按照这个标题全面铺开内容。

上述导航元素也清楚地告知了我们1、用户当前位置（当前页面标题）；2、来到当前页面的固定路径（从上往下的导航路径布局和元素）；3、如何返回上一级页面（每个导航菜单均可点击，除了当前页面标题）。其中涉及到3级导航：apple网站主导航、itunes类别导航和what’s new 内容导航，每一级导航都有导航菜单和被选中的状态。将每一级导航的起始点用箭头链接起来，如图3所示→→，形成了一个和实际存在的面包屑一模一样的页面路径。告知用户是如何来到这个页面的。

从上述页面中的面包屑样式分析和页面自己的内容分析，可以看出整个页面里所有的导航方式所要传达描述的信息是一致的，那么我们可以归纳出页面导航原则：1、告知用户当前位置；2、告知用户来到当前页面的固定路径；3、可以让用户返回上一级页面。

页面导航原则指导设计

1、符合页面导航原则的设计：

图4：Nestle.com

图5：Nestle.com

我们用导航原则来检验nestle.com的导航设计，这个页面通过页面标题“baby foods”告诉我们当前位置，通过网站logo，二级导航栏中选中的“Brands”，左侧三级导航栏选中的“Baby foods”，告诉我们这个页面的固定路径是从home，选择brands分类，再选择Babyfoods。且导航栏的每一个分类都可以被点击，可以让用户返回到上一级。这个页面完成了导航所需要的所有信息传达元素。我们也可以明显地找到页面中的：→→的页面路径。图4是根据它的面包屑的节点标签元素，将页面中的相同元素找出来，这些元素都已比较明显的样式表示选中，与相同信息不同状态的内容区分开来，导航布局从上而下形成了包含与被包含的关系，图5是将这些选中的元素用箭头连接起来，这样就找到了页面中的的页面路径。

图6：amazon.com

图6是在amazon浏览到web navigation的搜索结果页。图中将隐藏的页面路径和实际存在的面包屑都标示出来了。面包屑的每个节点标签在页面的其它导航方式中都有被选中的状态，且自上而下，从外到内形成包含与被包含的关系，从而形成一个隐藏的页面路径。这里使用的导航方式和前面都不一样，不止用了导航菜单，还使用了树形的级联菜单的方式。当前页面也不是用页面标题，而是直接用的实体面包屑的最后一级节点标签的强化样式。这个页面通过不同的方式完成了用户的导航需求。

2、其它符合页面导航原则的新型样式：

图7：Booreiland

图8：John Lewis购物网站

图9：wowhead面包屑

3、不符合页面导航原则的设计：

图10：meilishuo.com

Meilishuo的一个杂志内容页面，没有实际存在的面包屑，那么我们寻找其它导航方式，如上图网站logo、导航栏、页面标题等，如箭头所指，我们会发现页面路径少了了一段。我们不知道从首页去了什么分类，然后来到“所在杂志”。这样用户想找杂志所在的上一分类就找不到了，回不到上一级。这个页面的导航原则就没有满足，用户在此处就会迷失。它主要少了主导航条没有选中当前所在内容分类，从而让路径断了一节。

小结

设计师的创意是无限的，但是用户的导航需求是固定的，任何样式，只要能够符合导航原则的几点要求，就可以完成用户的导航任务。更加简便的方法就是只要能在页面元素中找到这个页面的页面路径，就相当于满足了导航原则。这样的原则和方法既可以用来检验我们的设计是否达标，也可以用来指导我们对导航方式的设计。

37个独特的网页导航设计

sj33cn — Mon, 13 Apr 2009 05:52:00 +0000