第 1 章 导航

第 1 章 导航

图像说明文字

  • 主导航模式——全局导航
    跳板式(Springboard)、列表菜单式(List Menu)、仪表式(Dashboard)、陈列馆式(Gallery)、选项卡菜单式(Tab Menu)、隐喻式(Skeuomorphic)

  • 主导航模式——瞬时导航
    侧边抽屉式(Side Drawer)、下拉菜单式(Toggle Menu)、转盘菜单式(Pie Menu)

  • 次级导航模式 翻页式(Page Swiping)、滚动选项卡式(Scrolling Tabs)、伸缩面板式(Expand/Collapse Panel)

我喜欢查看移动应用市场上的用户评价,以便更深入地理解人们如何使用应用。移动应用市场的评分系统提供了极有价值的反馈信息,这种反馈在网页和桌面应用领域是不存在的。这些信息很好地反映了用户的偏好和期望。

总体上来说,大多数4星和5星评价描述得并不具体,基本上就是“这个应用太棒了,界面好看,用起来顺手”,诸如此类。但1星和2星评价就很有看头了,这样的评价往往更为真实地反映了用户在使用过程中遇到的问题。最常见的抱怨如下:

  • 软件崩溃

  • 关键功能缺失(比如同步、筛选、关联账号)

  • 界面设计混乱

  • 导航欠佳(比如无法返回,找不到要找的东西)

设计模式并不能解决前两个问题,因为这两个问题都需要进行用户测试和设备测试,但肯定可以解决后两个问题。遵循常见的导航设计模式可以确保用户能够在你的应用中找到并使用其中有价值的功能。

良好的导航与优秀的设计如出一辙,都是低调内敛的。好的导航设计使得应用软件简单易用,无论是浏览图片,还是申请购车贷款,用户都可以轻松完成。

主导航模式——全局导航

接下来,我们要介绍的第一组模式用于主导航,比如从一个主类别切换到另一个主类别,就像桌面应用程序的一级菜单。自本书第1版出版以来,主导航已经演化成了两种不同的类型:全局(persistent)导航和瞬时(transient)导航。

全局导航包括列表菜单式、选项卡菜单式等简单的菜单结构。只要打开有全局导航的应用,主导航的各个选项立刻一目了然。

而瞬时导航必须通过点击或手势才会清楚地显示出来。由于智能手机的屏幕尺寸十分有限,这让移动应用设计师们不得不思考如何“打破(屏幕的)框架”,于是这种导航模式渐渐流行起来。

对我来说,经典的9点谜题游戏完美阐释了移动应用导航设计模式的思维变化。试试看:用4条或更少的直线将全部9个圆点连接起来,要一笔完成,且各条线之间不能重叠。

图1-1 9点谜题

你会怎么做呢?你可能已经发现,解决这个谜题的唯一办法是打破虚拟的边界。在移动领域,这一思想叫作“突破画布”(off-canvas)。

图1-2 9点谜题的两种解法

这种突破画布思维启发了侧边抽屉设计模式,这种模式成为现在iOS和安卓应用上最受欢迎的主导航模式之一。

图1-3 iOS版和安卓版WordPress:侧边抽屉设计体现了“突破画布”的思想

“打破虚拟边界”的思想也在很大程度上影响了Windows Phone 8和Ubuntu Touch(一个新的开源移动操作系统)。

图1-4 Windows Phone的全景控件设计

图像说明文字

图1-5 在Ubuntu移动系统中,可以通过滑动屏幕边缘来调出设置选项和菜单,这样可以用整个屏幕来展示应用内容

设计师们的设计思维从此发生了巨大转变,他们开始将内容层叠起来,而不是将UI统统放到一个平面上去。通过3D图层面板和手势交互创造极佳用户体验的一个很好的例子,是Twitter早期的iPad应用:左侧面板是菜单栏,中间面板是内容列表,右侧面板显示详细内容。点击中间部分的任意一条内容时,左侧菜单将收起,同时在右侧面板显示内容预览。点击右侧面板,右侧面板将展开,大小占到全屏的70%左右。

{}

图1-6 iPad版Twitter的早期版本:图层面板和手势交互利用了移动平台的特性

在决定使用全局导航还是瞬时导航时,你可以自问以下几个问题:

  • 你的应用层次是否“扁平”?应用的菜单分类是同级的还是有优先级的?主要类别是否只有少数几个,即3到5个?

  • 你的用户是否需要菜单一直处于可见状态以便快速访问?

  • 菜单分类有无状态指示,比如未读邮件数?

如果对于以上问题,你的回答中至少有一个“是”,那么你可能最好使用全局导航。现在就让我们看看这些设计模式吧。

跳板式

跳板式设计模式,也称为启动面板(Launchpad),是2011年最流行的导航模式。该模式指的是一个带有菜单选项的登录界面,而菜单选项就是进入各个应用的起点。

跳板式模式风行一时的原因之一是跨平台。当时,我们很多人都还在摸索没有操作系统倾向的、具有兼容性并可重复利用的设计。跳板式流行起来的另外一个原因是,这种模式一屏最多可以放置9个选项(3×3格)。相比iOS和安卓系统标签栏上3到5个选项卡的限制,这种设计大大增加了选项容量。而且如果再在页面上加入翻页指示(底部的小圆点),那么设计师还可以提供更多的菜单选项。

图1-7 iOS版Trulia和安卓版Gowalla

图1-8 iOS版Facebook和安卓版LinkedIn:2011年版中的跳板式设计

跳板式设计模式的主要缺点是全部选项都被扁平化,没有任何优先级。而开启抽屉式模式时代的,是Aza Raskin设计的火狐浏览器移动版(http://www.azarask.in/blog/post/firefox-mobile-concept-video)。2011年,抽屉式被Path采用。这种模式比选项栏容纳的选项更多,而且可以通过对这些选项进行逻辑分组来表达重要性或优先级。我们稍后会在本章进行探讨。

图1-9 iOS版Path(2011年11月):进入抽屉式设计时代

然而,跳板式设计模式并没有消亡。安卓、iOS和Windows Phone均在操作系统层级延续了这一导航模式。

图1-10 iOS 7、安卓4.4(奇巧)和Windows Phone 8均在操作系统层面使用了跳板式导航模式

至今还有很多应用仍在使用传统的跳板式设计。LearnVest、BBC Radio和Vimeo分别采用了标准的4宫格、6宫格和9宫格布局。

图1-11 iOS版LearnVest、Windows Phone版BBC Radio和安卓版Vimeo:应用上的传统跳板式设计不死,而且看上去不错

Orbitz和EasyJet采用不同的图标设计和栅格布局,从视觉上展现出了菜单的优先级。

图1-12 iOS版Orbitz和安卓版EasyJet:图标和布局暗示层次关系

Windows Phone的磁贴模式(tiles)将跳板式设计发挥到了极致。磁贴有动态的,也有静态的,拥有三种不同的尺寸。动态磁贴可以显示未接来电数、下次约会安排情况或是最近联系人头像这样的动态信息。要了解更多关于tiles的信息,请阅读Windows设计指南: http://msdn.microsoft.com/library/windows/apps/jj662929(v=vs.105).aspx

Windows Phone的磁贴可以用来做主导航,或者作为一个二级导航模式搭配全局控制来使用。下面三个应用的例子显示了Windows Phone磁贴的多功能性。CalendarPro利用动态磁贴做主导航设计,NBC News则设计了子导航栏,而Evernote利用静态磁贴做了子导航栏的设计。

图1-13 Windows Phone版CalendarPro、NBC News和Evernote展示了各种磁贴的实现

安卓和iOS版的Evernote Hello采用了基于磁贴模式的跳板式导航设计。用户可以通过先添加人物再添加会议来自定义用户界面。

图1-14 安卓版Evernote Hello:经磁贴启发的可定制的跳板式设计

卡片式

2010年到2011年使用过Palm手机的人可能都熟悉卡片式导航。卡片式导航的原型是扑克牌,模仿了扑克牌中常见的切牌、洗牌、弃牌、翻牌等手法。

图1-15 2010年到2011年左右的Palm webOS系统:应用像纸牌一样,呈扇形展开

这种模式随着Google Now应用的发布而重获新生,Google Now用一连串信息卡堆叠的形式展示一系列进入应用的切入点,或是阅读内容的快捷操作。

图1-16 iOS版和安卓版Google Now:卡片式主导航

Jelly和Potluck应用也一脉相承地采用了卡片式设计作为导航和内容交互的主要模式。在Jelly里,向下滑动卡片可以将其从屏幕上移走,这意味着你不能回答别人的问题,与此同时新的卡片取而代之。在Potluck中,向左滑动一叠卡片的最上面一张可以跳过这个故事,向右滑动会将这张卡片移动到“保存的卡片组”中。

图1-17 iOS版Jelly(http://www.youtube.com/watch?v=bCDB_TrAhSY)和Potluck(http://www.youtube.com/watch?v=pcfNFuvvdrA

Facebook和Pinterest利用了卡片式的视觉风格,但与前面提到的例子相比缺少了手势交互。这让二者更像卡片风格的列表元素,而非真正的卡片式设计。

要想了解误用卡片式设计模式的例子,请参阅第11章“标新立异”一节中关于阿拉斯加航空(Alaska Airlines)应用的讨论。

说明

卡片式设计模式给出了一种展示内容的优雅方案。真正的卡片式模式还应该包括模拟切牌、换牌、翻牌等的交互。

列表菜单式

列表菜单式中的每一个列表项都是进入该应用各项功能的入口,这一点与跳板式类似,并且模块之间的切换需要返回到列表主页。苹果的设计规范(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Navigation.html#//apple_ref/doc/uid/TP40006556-CH53-SW1)将其称为层级导航(hierarchal navigation):

在层级式的应用中,用户通过在每个页面选择一次进行导航,直至到达目标位置。要到达另一个位置,用户必须原路返回几步(或者从头开始),然后做出不同的选择。“设置”和“邮件”是使用层级式结构应用的典范。

Kayak、Day One和AroundMe应用的页面展示出各种不同的列表菜单样式。

图1-18 iOS版Kayak:点击“首页”(Home,见右图)返回列表菜单

图1-19 iOS版Day One:列表菜单式的主导航

图1-20 iOS版AroundMe:返回按钮文字也许叫作“首页”(Home)或“菜单”(Menu)会更好一些

安卓中的列表菜单式导航大同小异,只是表达这种模式的层级结构的返回按钮(Back button)被称为向上按钮(Up button)。关于这一点,安卓设计指南中写道:

向上按钮用来在应用的各个页面之间根据层级关系进行导航。举例来说,如果页面A显示一个条目列表,点击其中一项进入页面B(显示该项的详情),那么页面B应该有返回页面A的向上按钮。如果某个页面已经是应用的顶级页(即首页),那就不需要向上按钮。

eBay应用就是这样一个例子:向上按钮由eBay图标前加左箭头组成。请注意,多数用户的预期是左箭头和logo或图标同时可点。

图1-21 安卓版eBay:左箭头图标是向上按钮

说明

在设计层级结构的应用导航时可以考虑列表菜单式。这种模式对于列表项名称较长的菜单和列表项既要有名称又要有描述的菜单都同样适用。实现这种导航模式要遵循不同操作系统的设计规范。

仪表盘式

仪表盘式与跳板式和列表菜单式相似。

设计优秀的仪表盘让用户一眼就能看到他最需要的信息概览,而不用转到另一个页面。

当你逐级深入设计各界面时,要提供能够返回到仪表盘的导航,这一点与列表菜单式和跳板式的导航设计规则相同。有关仪表盘式设计的更多内容请参见第6章。

图1-22 iOS版Mint:仪表盘将数据作为各选项的入口

说明

在需要使用关键指标或数据作为应用入口的时候,可以采用仪表盘式。但不要载入过多信息,对于要展示的关键指标或数据需经过仔细研究再做决定。

陈列馆式

陈列馆式设计可用来呈现实时内容,比如新闻、菜谱或照片,可以采用网格布局(比如Recipeas和Square Wallet应用)或轮盘布局(比如LinkedIn Pulse和BBC News应用),还可以采用幻灯片模式进行展示。

图1-23 iOS版Recipeas和Square Wallet:陈列馆式设计展示了彼此独立、无层级关系的内容项

图1-24 安卓版LinkedIn Pulse和BBC News:字幕式文本比浮层式文本更清晰易读

请留意一下,快速浏览BBC News的内容要比LinkedIn Pulse轻松,这是因为前者的文章标题位于图片下方,而不是覆盖在图片上。

说明

陈列馆式设计模式最适合呈现经常更新的、视觉效果直观的无层级内容。

选项卡菜单式

就选项卡式设计而言,安卓、iOS和Windows Phone都有各自特定的术语和设计规范。在此我会把这些规范一 一列出来,这是因为,即使你决定在设计迭代中抛开这些规范,理解它们的原则也非常重要。

iOS

苹果自第1版iOS系统发布以来,就建议我们把标签栏作为扁平式应用的导航(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Navigation.html):

在扁平式信息结构的应用中,因为所有的主要类别都可以从主页面进入,所以用户可以直接从一个主要类别切换到另一个。音乐和应用商店便是运用扁平式结构的范例。

有意思的是,Facebook在采用侧边抽屉式导航长达两年之后,最近又回归到了选项卡式设计。你可以浏览网页http://tcrn.ch/1dZFlUF,阅读更多关于Facebook用户测试过程和结果的信息。

图1-25 iOS版Facebook的新旧版本:在千万级用户批量测试中,选项卡式(右图)完胜侧边抽屉式(左图)和其他类型的导航模式

iOS系统中的标签栏限制在5个选项卡以内。如果应用的主要类别超过5个,那么你可以把“更多”放在最右侧的第五个选项卡上。

理解iOS中的标签栏和工具栏之间的区别十分重要。标签栏的作用是在应用的主要类别之间进行切换,而工具栏上显示的是工具,或是指向特定页面的可执行操作。

图1-26 iOS版亚马逊和沃尔玛:标签栏的应用

图1-27 标签栏(左图)上有选项卡菜单;工具栏(右图)上有可操作的工具

有些应用,例如Instagram和RunKeeper,主要针对进行单一操作的用户(如拍摄照片或者开始跑步),所以他们把行为召唤(calls to action,一项优先的行动)放置在标签栏上。

图1-28 iOS版Instagram和RunKeeper:标签栏上的行为召唤按钮

如果你要设计这种标签栏,就要确保突出选中的选项卡。比如,在Everlapse和Tumblr中,你就很难分辨出选中的是哪一个选项卡,因为选中项过于黯淡,完全被主要操作按钮的视觉效果所掩盖。

图1-29 iOS版Everlapse和Tumblr:突出的操作按钮掩盖了选项卡菜单的位置指示

安卓

安卓系统为顶级导航或称主导航提供了三种不同的选项卡菜单模式:固定选项卡(Fixed Tabs)、下拉菜单(Spinners)和导航抽屉(Navigation Drawers)。以下链接可以查看安卓设计指南中关于固定选项卡的部分:http://developer.android.com/design/patterns/app-structure.html

固定选项卡同时显示多个顶级内容视图,可以方便地在不同视图间进行浏览和切换。固定选项卡会一直显示在屏幕上,不能像滚动选项卡(Scrolling Tabs)那样移动。固定选项卡应该始终允许用户通过在内容区向左滑或向右滑,来切换不同的界面。

在以下场景中使用选项卡:

  • 预计你的用户会经常切换视图。
  • 顶级内容视图有限,最多3个。
  • 你想让用户清楚地知道有可供选择的视图。

Path使用图标作为固定选项卡,而Quora把4个文字选项卡塞进了有限的空间里。设计师往往错误地在主导航中使用滚动选项卡,而实际上应该使用下拉菜单或导航抽屉。

图1-30 安卓版Quora把4个文字选项卡塞进了有限的空间里;安卓版Path使用图标作为固定选项卡

图1-31 安卓版Bump和Newegg;错误地将滚动选项卡作为主导航

Windows Phone

Windows Phone系统中的选项卡菜单被称为应用选项卡(App Tabs),你可以通过水平滚动来浏览延伸至屏幕之外的选项卡页面,这一模式是通过透视控件(Pivot control)实现的。Windows Phone设计指南中(http://msdn.microsoft.com/library/windows/apps/hh202890(v=vs.105).aspx)建议道:

你可使用透视控件(http://msdn.microsoft.com/library/windows/apps/microsoft.phone.controls.pivot(v=vs.105).aspx)实现“应用选项卡”模式。该控件允许用户在每个页面(称为透视项目1)之间向左右水平导航。

1透视项目译法,见http://msdn.microsoft.com/zh-cn/library/windows/apps/dn596104.aspx。——译者注

图1-32 Windows Phone版Netflix:透视控件实现应用选项卡模式

新生模式

无论是桌面端还是移动端网页,都有一种新的设计趋势,就是在用户滚动屏幕或向下滑动页面内容时把网站头部隐藏或是收缩起来。

这种折叠选项卡式(Retracting Tab)设计也出现在了原生应用中。Pinterest就在用户向下滑动浏览内容时把工具栏收起来,在向上滑动时工具栏又重新显示出来。iOS版的Luvocracy和Polar也用到了这种效果。

图1-33 iOS版Pinterest:向下滑动隐藏工具栏,向上滑动显示工具栏(http://www.youtube.com/watch?v=joaaJgvTN28

可配置选项卡式(Configurable Tabs)是标准选项卡菜单式的另一个变种。Frequency的设计模仿了所有主要桌面网页浏览器上的标签页效果。添加一个频道就增加一个新的选项卡。如果屏幕上已经有太多选项卡,头部就可以滚动。用户只需长按一个选项卡,再拖动到目标位置,就可以调整选项卡的顺序。

图1-34 iOS版Frequency;新生模式之一的可配置选项卡式,效果类似于网页浏览器的标签页

原生应用中的侧边栏也像网页应用中的侧边栏一样愈发流行起来。Twitter在其iPad应用中,用清晰的文字标识主界面的侧边栏导航。Yammer的选项卡数量几乎是Twitter的两倍,但是没有文字标识,这让导航用起来有点困难。

图1-35 iPad版Twitter的选项卡文字标识清晰,iPad版Yammer则没有文字标识

侧边栏不太可能被广泛用作智能手机的全局导航模式,这有两个原因:

  • 大多数人都是在竖屏模式下使用智能手机,而侧边栏需要占用相当多的横向空间。
  • 因为空间有限,所以文字表示往往被去掉,这就降低了应用的可用性。

Dwell是一个能起到警示作用的例子。这个应用看上去挺不错,但你不得不点击每个图标去看看各个主要类别究竟是什么——这真是一个“肉之迷导航”(mystery meat navigation,http://www.webpagesthatsuck.com/mysterymeatnavigation.html)的经典案例。

图1-36 安卓版Dwell:肉之迷式的侧边栏导航

说明

要了解并遵守不同操作系统对选项卡菜单式的设计规范。用选中和未选中选项卡间的视觉差异明确指示出用户所处的位置。

隐喻式

隐喻式(或拟物式)的特征是用页面模仿应用的隐喻对象。尽管现在视觉设计的审美倾向于扁平化设计,但一些应用仍然能够通过模仿真实世界的物体和工具提升可用性。

隐喻式导航主要用在游戏设计中,比如《狙击手:幽灵战士2》(Sniper: Ghost Warrior 2),但在一些非游戏类型的应用中也能看到,如混音应用软件Cross DJ、照片应用软件 Hipstamatic,以及旅行类应用软件FlightBoard。

图1-37 安卓版和iOS版《狙击手:幽灵战士2》:拟物风格在游戏导航中十分普遍

图1-38 iOS版Cross DJ:拟物设计也见于一些非游戏类的应用

图1-39 iOS版Hipstamatic:对真实物体的模拟

还有其他一些例子,其中包括iOS 7版乐顺备忘录(Awesome Note)和苹果的报刊杂志(Newsstand)的新设计。这两个应用的设计能让人立刻识别出来,并且非常直观,因为我们可以看出它是在模仿文件夹和书架。

图1-40 iOS版Awesome Note和Newsstand:拟物风格使得导航更直观

图1-41 iOS版FlightBoard:设计成机场里的航班信息显示系统的模样

当然,延伸到电子领域的任何隐喻都是有限的。比如说,早期版本的iBook就一直让人有些迷惑:一些用户认为电子书架的大小暗示了它能装下的电子书的数量,然而实际上并非如此。

说明

一定要谨慎地使用隐喻式导航,蹩脚的模仿很可能造成第11章中讨论的标新立异反模式(Novel Notion anti-Pattern)。

主导航模式——瞬时导航

“瞬时”一词意为短时间停留,它精确地表达了下面这种导航菜单的作用。这种导航菜单只有在我们需要的时候才显示出来,在我们做出选择后,它会再次消失。这里我们要介绍三种瞬时导航:侧边抽屉式、下拉菜单式和转盘菜单式。

侧边抽屉式

侧边抽屉式有两种风格。第一种是浮层(overlay),通过轻滑或点击的手势打开抽屉,抽屉部分遮挡或覆盖原来页面的内容,例如RetailMeNot。第二种风格是嵌入层(inlay),通过轻滑、平移或点击打开抽屉,把原先的页面内容部分推出屏幕外,例如Path。

图1-42 安卓版RetailMeNot:点击导航图标或在屏幕边缘轻滑,以显示侧边抽屉浮层,浮层部分覆盖主页内容

图1-43 iOS版Path:点击导航图标或水平移动以显示侧边抽屉嵌入层,嵌入层将主页推向另一侧

让用户知道侧边抽屉存在的最好办法是什么?

安卓设计指南(http://developer.android.com/design/patterns/navigation-drawer.html)中建议,在用户首次打开应用时显示抽屉打开的状态,这样用户就可以看到菜单,并知道如何关闭抽屉:

在首次启动应用时,通过自动打开抽屉的方法向用户介绍导航抽屉。这样做可以确保用户知道导航抽屉的存在,并促使他们探索抽屉里的内容来了解你的应用结构。随后几次启动应用时,继续显示抽屉,直到用户主动地手动打开导航抽屉为止。一旦知道用户已经学会如何打开抽屉,你就可以将启动应用时的导航抽屉设置为关闭状态。

听上去不错,对吧?然而,根据我对多位客户所做的用户测试显示,这项建议并没有获得良好的效果。于是我推荐了一个类似菜谱大全(Allthecooks)那样的设计——只在首次启动应用时弹出抽屉。

最流行的设计趋势是左侧抽屉,但也可以设计在右侧,就像IfThisThenThat(IFTTT)那样,又或是两侧都有抽屉,比如Windows Phone版的Facebook Beta。

图1-44 安卓版Allthecooks:首次启动应用时弹出抽屉,提醒用户那里有导航菜单(http://youtu.be/iLlCs-gyNaE

图1-45 iOS版IFTTT:用于配置和导航的抽屉在右侧

图1-46 Windows Phone版Facebook Beta:两侧抽屉——左侧是主菜单,右侧是快捷链接

可不要像om finder和Frost应用那样把抽屉放在底端。这个位置与唤出iOS 7控制中心时使用的向上滑动手势相冲突。

图1-47 iOS版om finder:屏幕底端的抽屉与iOS 7的控制中心冲突

图1-48 iOS版Frost:几乎每次我想打开菜单的时候,打开的都是iOS的控制中心

侧边抽屉的内容不必限制在导航选项范围内。Zillow房贷市场(Zillow's Mortgage Marketplace)应用中的抽屉显示了实时房屋抵押贷款利率曲线图,像LinkedIn这样的社交应用也时常在抽屉中放入个人资料信息。

图1-49 iOS版Zillow房贷市场:侧边抽屉同时包含内容和菜单项

图1-50 iOS版LinkedIn:侧边抽屉包含个人资料信息(哦!我有好多邮件了)

侧边抽屉式可以拥有多个层级。比如,在Fancy中你可以一路点击、点击再点击,直至到达最底层的类别。当你逐级深入的时候,右侧内容也会随之更新。在Wish的侧边抽屉中,类别路径只有两级,选择类别的模式采用的是跳板式风格。

图1-51 iOS版Fancy:多层级的侧边抽屉

侧边抽屉还可以让用户在高层级的场景中进行切换。在iOS版Gmail的抽屉里,点击我的名字旁边的箭头会在菜单选项下滑动打开一个面板。在这里我可以切换电子邮件账户,或是添加一个新的账户。

说明

侧边抽屉的设计可以多样化,但切忌不要让它承载太多功能。抽屉的首要功能是展示主导航选项。

图1-52 iOS版Wish:侧边抽屉的类别路径只有两级,随后转换到跳板式

图1-53 iOS版Gmail:抽屉里的下拉面板可以切换或添加账户

新兴模式

为了响应iOS 7设计规范,Luvocracy的设计师一直在试验一种嵌入式侧边抽屉的变种(http://uxmag.com/articles/adapting-ui-to-ios-7-the-side-menu)。

点击导航图标(或者叫“汉堡包”图标)打开侧边抽屉的时候,嵌入式抽屉不仅把上一级页面向右推开,还采用3D效果将其推到后面。

图1-54 iOS版Luvocracy:点击导航或“汉堡包”,侧边抽屉会将上一级页面推到旁边和后面

Luvocracy的导航简洁,转场流畅。然而,iOS版Airbnb虽然具有类似风格的菜单,却成了一个反模式。这个新的设计拥有3个高层级菜单类别:旅行(Travel)、业主(Host)和登录(Log In)。“旅行”的标题横穿屏幕最上方(实际的旅行菜单选项与之分离,显示在下方),而“业主”和“登录”则放在屏幕底端,一左一右。点击“业主”或者垂直滑动会将“业主”切换到上方,而“旅行”移到底端(登录保持不动)。再次滑动会将其切换回去。这个设计对用户来说既不切实际又效率低下。我并不是完全同意iOS设计指南(https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Alerts.html)的每一条规范,但是将下文中的“滚动”换成“滑动”,就指明了这个案例的问题所在:

不要让用户通过滚动来查看所有菜单选项。这会使用户不安,因为他们必须花更多的时间去分辨这些选项。而且,在滚动屏幕的时候,难免会无意识地点击选项。

图1-55 iOS 7版Airbnb:新型侧边抽屉的运用令人迷惑(http://www.youtube.com/watch?v=Rl1ZwXINhIc

说明

在采用侧边抽屉做导航前,先制定出应用的信息架构,并与用户确认。如果侧边抽屉行得通,你应该做出几种不同的应用原型进行测试,看看哪一个设计效果最好。

安卓版本的Airbnb同样采用了抽屉导航,相比之下,这个版本的导航就清晰多了,无需用户费心揣测。

侧边抽屉导航在iOS上实现的一个更好的例子是American Airlines,通过侧边抽屉导航,它展示了一个设计优美的分组菜单。但我希望它的上级页面不是半透明的,因为那个页面仍是一个触摸对象。

图1-56 安卓版Airbnb:侧边抽屉导航十分清晰

图1-57 iOS版American Airlines:侧边抽屉的分组菜单设计优美,但上级页面应该是不透明的

下拉菜单式

在本书第1版中,我沿用了网页设计的叫法,把这种模式称为超级菜单(Mega Menu)。从那以后,移动网页和响应式网页设计推动了这一模式的发展,现在更普遍的叫法是下拉菜单。

图1-58 Starbucks.com:采用下拉菜单式导航的响应式网页设计

与侧边抽屉式一样,下拉菜单也可以是嵌入式的,将页面内容推到菜单之下;还可以是浮层式的,菜单层浮在内容页之上,如Pocket2和Qwiki,Walmart和Home Depot。浮层设计在原生移动应用中更为常见。在Ultravisual应用里,浮层式下拉菜单从底端显示出来。

2Pocket现在的版本已经是抽屉式导航了。——译者注

图1-59 iOS版Pocket和Qwiki:浮层式下拉菜单

图1-60 安卓版Walmart和Windows Phone版Home Depot:浮层式下拉菜单

图1-61 iOS版Ultravisual:浮层式下拉菜单从底端显示出来

下拉菜单式的一个重要规则是,无论什么样的手势,都能打开菜单,比如点击图标、轻滑、平移。同样,隐藏菜单也是这样的。

不要让菜单覆盖整个屏幕,要把背景露出来一点。点击背景的任一位置时,同样可以隐藏菜单。

安卓为这种主导航提供了一种特别的控件——Spinner控件。但要记住,Spinner应该用于在同一个类别下的不同视图间进行导航,而不是跳转到完全不同的类别。

举例来说,NPR和NYTimes这两个都是新闻类应用,Spinner提供了不同的方式对应用中的海量新闻内容进行细分。但是,如果NPR要在这个菜单里提供其他选项,比如音乐或天气,那么就应该按照安卓设计指南中讲的,采用标签栏或是导航抽屉。

在安卓平台上,如果要通过下拉菜单实现同一类别下不同视图间的导航,就要使用Spinner控件。但请记住,在iOS和Windows Phone平台上,下拉菜单是自定义控件,这可能需要更多的时间去实现、测试和维护。

图1-62 安卓版NPR和NYTimes:Spinner下拉菜单用来切换同一类别下的不同视图

转盘菜单式

转盘菜单也叫轮盘、环形菜单或径向菜单,自20世纪90年代以来一直出现在桌面软件设计中,近年来更多地出现在网页应用中。在游戏设计中,这种模式也非常受欢迎。所以,当上手试玩PIE(开源的第三方安卓系统Paranoid中的转盘菜单)时,我非常兴奋,并且对其操作之流畅感到非常惊讶。

图1-63 开源的第三方安卓系统Paranoid中的转盘菜单式导航(http://www.androidpolice.com/2013/01/22/paranoid-androids-pie-navigation-system-is-almost-out-of-the-oven-and-it-smells-fantastic/

如果安卓系统把转盘菜单设为标准控件之一的话,那么我不认为它适合用来作应用的主导航,因为这会在操作系统和应用之间造成太多的冲突。

看看其他操作系统吧,我发现只有屈指可数的几个应用尝试采用了这种模式作为主导航。我找到的这些例子并不那么理想。比如说,使用PortalWebBrowser的多层轮盘导航时,用户需要具备强大的心理能力以及外科医生般精准的操作手法。

图1-64 iOS版PortalWebBrowser:使用多层转盘菜单时需要外科医生般精确的触摸

Paranoid安卓系统中的PIE与PortalWebBrowser中的转盘菜单在设计上的主要区别在于,后者的层级太多,而且触摸对象太袖珍了。点击、长按,然后滑过轮盘,移至或大或小的楔形按钮,这个手势既不简单也不自然。不过,在选择操作方面,转盘菜单式是有一些优秀示例的,请参看第5章。

说明

这个模式可能是所有主导航模式中最不常用的,在设计任何有多个层级的菜单时应该避免采用。如果你的应用信息结构扁平化,那么可以考虑选用选项卡式菜单,这对所有用户来说都更为熟悉。

次级导航模式

如果只讲主导航的话,本章内容会不够完整,所以我将次级导航也放到了本章。我所说的次级导航,指的是在一个选中模块内活动的导航。比如说,星巴克采用选项卡菜单式作为主导航,而首页上使用的是跳板式次级导航。与之类似,Brit & Co.也使用选项卡菜单式作主导航(即一个Windows透视控件),在浏览模块内则采用跳板式作为次级导航。

图1-65 iOS版星巴克和Windows Phone版Brit & Co.:跳板式的次级导航

所有主导航模式都同样可以用作次级导航模式。选项卡式导航里包含选项卡、列表或仪表盘,跳板式导航里包含陈列馆式等,都十分常见。

图1-66 iOS版《国家地理》(National Geographic)出品的国家公园(National Parks):主导航是侧边抽屉式,次级导航是陈列馆式

图1-67 iOS版BillGuard:主导航是侧边抽屉式,次级导航是跳板式

还有一些模式也可以用作次级导航,其中有翻页式、滚动选项卡式和伸缩面板式。

翻页式

这种模式可以通过滑动手势快速导航内容页。表现这种导航模式的最常见方式是利用页面指示器(Page Indicator,iOS里对一行小圆点的叫法)。卡片隐喻也同样适用于页面,比如Ness和Foodspotting中的设计。在这些例子中,部分可见的背景卡片或页面用以引导用户去滑动屏幕。

图1-68 iOS版Audible:主导航是选项卡式,次导航是翻页式。注意页面指示器

图1-69 iOS版Ness和Foodspotting:部分可见的内容引导用户滑动屏幕

许多安卓应用都提供了类似的翻页体验。在谷歌地图(Google Maps)中,你可以滑动搜索结果列表。初次使用时,会显示一个关于这种滑动翻页操作的提示。

Ark Mail与Gmail类似,都用翻页式作为电子邮件消息的快速导航。一窄行页脚显示消息的总数和当前消息数,并在底端两侧分别标示出新旧邮件,以此表明水平滑动可以看到其他邮件。

图1-70 安卓版谷歌地图和Ark Mail

News360是翻页式的一个反模式案例,因为它缺乏功能指示。如果它像HuffPost那样,在顶部加入页面指示器小圆点标识而不是采用垂直滚动条,便会立刻让人明白,使用水平滑动手势便可以查看下一篇新闻。

说明

运用翻页式时要利用移动的手势控制,不要依赖像下一步按钮或标签页这类桌面端模式。但要注意提供视觉指示,让用户知道可以使用滑动手势。

图1-71 iOS版News360:水平滑动查看下一篇文章的提示信息不可见

图1-72 iOS版HuffPost:位于顶部的小巧的翻页指示器标识出滑动功能

滚动选项卡式

安卓设计指南(http://developer.android.com/design/building-blocks/tabs.html)把这些次级导航控件称为滚动选项卡式,所以我延续它的叫法。在某一个模块中显示多种类别或视图时,这种模式非常有用。滚动选项卡一般比标准的标签栏要窄,因为它们没有必要作为触摸对象。更典型的是将它们用作水平滑动指示。

在Google Play应用中,在导航抽屉中选择了一个菜单项(比如电影和电视剧)之后,滚动选项卡用来对结果进行筛选。Songza和TuneIn的例子展示了这种模式的其他应用。

图1-73 安卓版Google Play、Songza和TuneIn:滚动选项卡式的次级导航

如果你要使用这种模式,请确保你的界面设计清晰地指示出了选中的标签项。

折叠菜单式

折叠菜单式(Accordion,又称手风琴式)能使用户在同一页面上查看到更多的信息。这种模式比跳转到另一页面再跳回去更高效。注意Elevatr、Flava和安卓Play Store这些例子,它们全都使用了常见的图标去指示面板的展开或收起状态。

图1-74 iOS版Elevatr:当面板展开时“+”号变成“-”号,而且标题变成反色

图1-75 iOS版Flava:向下的箭头指示面板展开

图1-76 安卓Play Store:“新版变化”面板中的展开/收起

说明

要使用常见的图标来指示折叠式菜单的打开或关闭状态。

目录