交互基础知识科普！带你认识最热门的12种导航模式

@网秦UEC ：在本文中，Chris Bank将与您探讨导航设计模式的重要意义，并以当下最热门的几个移动应用为例详细进行讲解——在UXPin的免费电子书《移动UI设计模式2014》中还提供了更多有关导航模式设计的示例，以及多达45种其他移动应用设计模式的详解。

导航中的倚天剑和屠龙刀，孰胜孰赢？决赛戳：《交互设计实战！Tab导航与侧边抽屉导航的巅峰对决》

用户在使用应用时，需要随时清楚了解下一步应当前往哪一页面以及如何前往该页面。如果用户无法轻松在应用中进行导航，则将很快对你的应用失去兴趣。因此，能否为移动应用设计出有效的导航功能至关重要。在投入菜单、操作栏、弹窗、按钮、箭头、链接等内容的设计之前，你需要牢记几个基本的注意事项。

导航设计的4大注意事项

在弄清自己移动应用的架构和组织情况之后，就可以开始考虑导航设计了。在此时，你需要考虑下面的几个事项：

1. 可达性

移动应用的导航功能可以说是所有界面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

2. 是否有意义

确保菜单、操作栏、弹窗、按钮、箭头、链接等导航要素简单明了，让用户一看就知道是什么意思以及操作结果是什么。不要弄的太过花哨，用户没有耐心去“猜”。

3. 易于理解

如果你想设计比较高级的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），请务必在设计过程中保证前后一致，以便用户熟悉你所使用的模式，同时还应加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户注意力，并以微妙的方式对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。

4. 通用性

你的导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度的调整。

导航模式概述

在记住上述设计目标后，下面是本文要详细说明（对这些设计模式的更深入探讨请见我们的电子书《移动UI设计模式2014》）的几个设计模式的概览：

1. 说明与引导标记

2. 溢出菜单

3. 滑块

4. 基于内容的导航

5. 变换式控件

6. “跟随式”固定导航

7. 垂直导航

8. 弹窗

9. 滑出页面、侧边栏和抽屉

10. 无所不至的链接

11. 高级滚动条

12. 滑动视图

1. 说明与引导标记

Secret

问题

用户希望了解如何使用应用的各项功能。

解决方案

设计一套说明或教程来演示各项功能如何使用。现在很多应用都使用这种方式在用户首次启动时提供演示。这种方式可以分为两大基本方法。Secret和YouTube等应用采用了覆盖图指南的方法，并使用“引导标记”突出显示UI中的关键部分来说明其作用。

另外，Carousel和Duolingo等应用则会在用户首次启动时以幻灯片的形式引导用户走完全部体验过程，从而有效地说明应用能够帮助用户实现哪些功能。这一引导过程同时也是收集重要信息（方便后期简单注册乃至更深入的需求）的绝佳时机，类似于设置向导。这一模式对于无法第一时间直观了解功能的应用来说至关重要，因为用户对你的应用了解越深刻，就越有可能继续用下去。

2. 溢出菜单

Whatsapp、Gmail

问题

用户希望能够快速使用附加选项或操作。

解决方案

将附加选项和按钮隐藏在溢出菜单中，这样它们就不会干扰主界面。溢出菜单在安卓系统中有着广泛的应用，其主要用于将不常用但与当前内容有相关度的选项和菜单项隐藏到操作栏中。Whatsapp和Gmail等应用对刷新和状态设置等菜单项（这些都是用户需要能够快速使用，但如果放在显眼位置会比较碍事的附加功能）就采用了这种模式。在RelateIQ中，用户可以按住主菜单项来查看子菜单，从而实现快速导航到不同视图。

3. 滑块

Uber

问题

用户希望能够在不同选项之间无缝切换。

解决方案

使用滑动手指的方式实现选项切换的显眼、轻松过渡。例如，Uber可让用户在各侧间拖动滑块无缝切换四种出行服务方式。在这一UI设计模式中，其甚至可以放大缩小地图，从而给用户模拟出周边车辆的密度水平，让你能够自动看到各种可行的方案。

4. 基于内容的导航

Tinder

问题

用户希望能够轻松、直观探索特定内容的细节。

解决方案

实现概览和细节界面的无缝过渡。Tinder和9Gag均实现了这方面的无缝响应。在Tinder中，其UI设计模式可让用户在两种用户资料界面无缝过渡，用户只需单击各视图的主照片即可。不仅如此，如果用户在用户资料的详细视图界面下滑动各个照片，然后单击某个照片返回基本视图，其还会保留显示你所单击选中的照片。这样即可实现极为流畅、直观的用户体验和流程。

5. 变换式控件

Pinterest

问题 

用户希望能够执行各种不同的操作，但屏幕空间有限，无法显示全部所需控件。

解决方案

使用其他功能替换按钮和屏幕控件。根据用户当前操作情况的不同，UI设计可以使用针对性的元素替换先前的元素。例如，用“执行”替换“撤销”或“添加”替换“删除”。如果用户先后执行的操作存在一定的关联，那么这种方法绝对有效。

Pinterest和Spotify会把“+”变成“x”按钮，这样用户就能知道自己可以取消添加别针或关注相簿。这一UI设计模式可大量节约空间，让撤销操作快速简洁，整体上堪称值得玩味的解决方案。

6. “跟随式”固定导航

Dropbox

问题

用户希望能够在应用内随时访问菜单。

解决方案

滚动页面时保持顶部、侧边或底部导航栏不变。在某些情况下，页面部分子节的标题也可在滚动时保持固定，或附着到已有的固定导航栏上。以地址簿为例，其中按字母顺序分隔的每个分节（“a”、“b”“c”等）可以在滚动过分节标题时保持在顶部导航栏下方。相册和文件夹类应用多采用这种设计模式。在其他方面，当用户朝着某一方向滚动时，可以让菜单消失，而朝另一方向滚动时则会固定显示。在这方面Pinterest是一个很好的例子，其菜单会在向上滚动时从底部消失，向下滚动时重新出现。这一点与用操作栏（Android机广为采用的模式）存储常用app功能的模式完全不同。

7. 垂直导航

Facebook、Spotify

问题

用户希望能够在应用的不同部分之间进行导航，但屏幕空间有限，无法显示全部信息。

解决方案

将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。在这一方面，滚动是一个比较标准的移动应用手势，所以应用采用这一模式进行导航布局是比较合理的。这一模式还可让UI的标题和脚标能够实现更多“通用”导航，例如操作栏等。Spotify等音乐播放器，Yahoo！、Digest等新闻阅读器以及之外的各种应用都以不同方式采用了垂直导航的模式。

8. 弹窗

TED、Dropbox

问题

用户希望在查看相关信息的同时保持当前在UI中所处的位置。

解决方案

以弹窗的形式显示重要通知和其他信息。这一UI模式的优势在于能够以简洁明了的形式查看其他信息或执行特定操作，同时无需用户退出当前活动。正式的TED应用会以弹窗的形式放置播放控件，同时背景会以半透明形式显示，这样一方面可以让用户知道自己能够对播放器执行相关操作，同时，又不会干扰用户浏览当前内容。

Dropbox和Kindle也将控件放到了弹窗里。弹窗式UI模式对于这类应用的操作非常重要，因为其主要执行对象是数据，因此这一模式就可以让用户清楚看到控件的操作目标。在保证内容可见的情况下，用户可以对筛选选项进行调整或改变字体大小，同时不需要在不同视图间来回切换——所有操作都可以在当前界面完成。弹窗和模拟窗口也可用于显示重要通知或需要用户特别注意的提示，要隐去弹窗需要用户点击或滑动。以Secret和Swarm为例，这两个应用均使用弹窗来说明用户继续操作的预期结果。

9. 滑出页面、侧边栏和抽屉

LinkedIn、Gogobot

问题

用户希望能够在应用内的各个不同部分间进行导航，同时导航期间不用在每个部分耽误时间。

解决方案

为应用设计一个二级部分——例如导航、聊天、设置、用户资料等，该二级部分可在不需要时以可折叠面板的形式隐藏到主要部分之后。在需要访问时，可移动到主要部分一旁或滑动覆盖主要部分。由于滑动页面是和应用主要内容相脱离的单独内容层，因此具体如何对抽屉内的内容（图标、文字乃至简单控件）进行布局可以灵活掌握，只要能够保证重要功能的快速访问即可。

通常情况下，抽屉可以隐藏到“汉堡式层叠菜单”下方，或者隐藏在一个简单箭头（表明箭头内包含额外内容）后方。

10. 无所不至的链接

Yelp

问题

用户希望获得前后一致的内容导航体验，同时不会受到多余内容的干扰。

解决方案

给应用内的大部分甚至全部内容加上链接，让用户能够自由探索寻找自己所需的信息，而不会陷入死循环或被繁冗的超链接文本、多余的按钮、广告宣传等网站上常见的无聊内容所干扰。如果用户希望与应用中的某一部分内容进行交互，他们一般会点击该内容，打开新视图获得详细体验。举例来说，在Yelp中，用户面临着多种选择——他们可以点击底部的按钮，也可以点击内容本身（例如地图或评论）进行浏览。而Flipboard则在用户浏览数字杂志时提供了眼花缭乱的导航方式，例如滑动、点击、手抓退出、撤销、返回等等等等，相比Yelp要复杂得多。

10. 高级滚动条

Carousel、Dropbox

问题

用户希望能够看到自己当前在整体内容中所处的位置，并能够快速跳跃到较长的列表或图集的某个特定位置。

解决方案

除了使用滑动手势进行滚动外，很多移动清单或图集类应用还提供长时间显示或滑动时短暂显示的滚动条。在很多情况下，滚动条还会配套滚动索引（按日期、字母、分类、位置等排序）。对于索引式滚动，其滚动提示条通常是长时间显示的，也就是说用户不执行滚动操作时也显示。通过触摸或拖动滚动提示条能够以显眼的方式弹出当前所处部分提示。但是，滚动条和索引两者也可以结合采用，并且仅在滚动时显示以节省屏幕空间、减少对用户的干扰。对于滚动和索引的功能比较关键的应用，滚动条一般会以显眼方式长时间显示。

例如Carousel，其不仅有显眼的滚动条，在底部还提供了一个强力滚动条，以便用户轻松滚过上百万张照片。随着用户创造内容、订阅、组群、列表等的日渐增多，我们在未来将看到更多能够让用户以搜索和滚动条之外的方式寻找所需的创造性UI设计模式。

11. 滑动视图

Yahoo! 、Digest、Flipboard

问题

用户希望能够在不返回索引的情况下从某项内容快速导航到另一内容。

解决方案

让用户能够以滑动内容的方式在不同项目间切换。这一模式很类似于浏览相簿的感觉，现在有越来越多的应用开始采用这一模式，比如Yahoo！、Digest和Flipboard等。这一模式有助于维持用户的浸入式体验，另外，其还可用于架构用途，例如把应用中的不同部分分类到各个“标签”，让用户能够通过滑动进行查看。在采用这一模式时，还可以考虑一下如何以最佳方式让界面表现出其具有滑动功能。

让用户放手导航

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

成为交互设计师的必读好文！

阿里巴巴资深交互设计师经验！
《推荐！交互设计那些事儿（一）》

网易设计总监亲历分享！
《网易美女设计主管！交互设计菜鸟如何入门？》

交互设计师自学指南！
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

原文地址：designmodo
译文地址：uec.nq.com
译者：蒋灿
uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量77万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：