导航(Navigation)

看完了 Theresa Neil: Mobile Design Pattern Gallery,尝试一下运用书里的内容理解身边的应用所使用的设计模式。

一级导航模式,持久(persistent)

Springboard, Cards, List Menu, Dashboard, Gallery, Tab Menu, Skeuomorphic

一级导航模式,短暂(transient)

Side Drawer, Toggle Menu, Pie Menu

二级导航模式

Page Swiping, Scrolling Tabs, Accordion

短暂导航(transient navigation)必须要通过点击或手势才能显示出来。这种模式的原因是智能手机屏幕尺寸的限制,这确实推动移动设计师们“在盒子外”思考。

当决定用持久和短暂导航时,问你自己一些问题:

  • 你的应用是“扁平”的吗?菜单项在层级中是同等的,仅仅只有几个(比如 3–5个)主要类别吗?
  • 你的用户需要菜单总是可见以便快速访问吗?
  • 菜单项有状态标示吗,比如类似未读邮件数?

当上面1+个问题都是肯定的,可能最好选用持久导航。

Springboard

Springboard模式,也称为启动板(Launchpad),是2011年最流行的导航模式。Springboard是一个登陆页面(landing screen),它上面有发射点(launch points),可以导航你到一个新的地方。

Springboard的优点

Springboard的优点是可以整合大量的信息,它没有tab那样3–5个的限制。它可以 -4, -6 , -9 , -12格这样的排布。像支付宝,通过这种方法,在应用中整合了大量的功能入口。

​ Figure 1–1 支付宝 for iOS

Springboard的缺陷

Springboard的缺陷是扁平化的架构,所有的选项都是同等的位置,没有分级结构。但是一些应用通过视觉设计,让Springboard模式显得有分级。

Figure 1–2 天巡旅游 for iOS

Springboard在系统级别的使用

Figure 1–3 iOS 9 在系统级使用Springboard模式

瓷砖设计

Windows运用瓷砖设计,深度使用Springboard模式。瓷砖可以动态或静态,大小各异。

Figure 1–4 Windows 10 Start:多样的瓷砖实现

二级导航

Figure 1–5 Grid Diary, 豌豆荚一览 and tumblr for iOS:配合Tab做为二级导航/子导航

什么不是Springboard

概念的好处是,你知道什么不是Springboard。因为它上面没有可以导航你到一个新的地方的发射点(launch points),这里只是收听时间(listening time)的统计结果显示,点击并不会跳转到哪里。

Figure 1–6 Audible for iOS:并不是Springboard模式

Cards

卡片导航基于纸牌隐喻,包括一般的纸牌操作比如堆叠,洗牌,丢弃和翻转。

Chrome将网页信息以卡片形式垂直堆叠显示。

Figure 1–7 Chrome for iOS: Cards 做为一级导航

同样地,Cleen Books 运用Cards做为导航和交互的主要手段。向下滑动,把照片放进垃圾桶;向左滑动,把照片放在Later文件夹。

Figure 1–8 Cleen Books for iOS

豌豆荚一览使用卡片式视觉风格,但是没有基于手势的交互。更像风格化的列元素而不是真正的卡片。

Figure 1–9 豌豆荚一览 for iOS

List Menu

列表菜单模式类似于Springboard,每个列表项都是一个应用的入口(launch point),切换模块需要退回列表。

Figure 1–10 Settings for iOS: 按Settings返回List Menu

Dashboard

Figure 1–11 Money++ for iOS

Gallery

Gallery模式显示直播内容 — — 像新闻故事,菜谱或照片 — — 以网格,旋转木马或幻灯片形式排布。Gallery模式利于显示高频率更新的,高视觉的,没有分级要求的内容。

Figure 1–12 Instagram for iOS: 内容以幻灯片,旋转木马和网格形式显示。

Tab Menu

Apple建议用Tab Bar来导航扁平应用。扁平信息架构的应用,用户可以直接从一个主类别到另一个主类别,因为所有的主类别都可以从主界面可访问。

Figure 1–13 Tweetbot, 豌豆荚一览 and Medium for iOS

重要的单一动作(calls to action)也可以直接放在Tab Bar。

Figure 1–14 Instagram and Audible for iOS: calls to action in the Tab Bar

Figure 1–15 豌豆荚一览 for iOS: 有Android Fixed Tabs的设计风格

Emerging Patterns

桌面和移动网页设计有一种新的趋势就是当用户向下滑动内容时隐藏或折叠标题。这种缩回Tab的设计在本地应用中也有出现。

Figure 1–16 Queue for iOS: 向下滚动隐藏Tab和Tittle;向上滚动显示Tab和Tittle

Figure 1–17 AppSo for iOS: 向下滚动隐藏图片;向上滚动显示图片,并出现返回键

Skeuomorphic

拟物化风格的特点是外观设计匹配现实世界对应物。

Figure 1–18 Smartisan Clock for iOS:

一级导航模式,短暂(transient)

短暂(transient) 意味着停留时间短暂,这些导航Side Drawers, Toggle Menus 和 Pie Menus都能实现短暂停留:我们打开它们前它们是隐藏状态,然后我们做个选择它们又消失。

Side Drawer

有2种类型的Side Drawer:第一种是overlay,意味着滑动或点按操作会打开抽屉菜单,部分覆盖原来的界面;第二种是inlay,滑动或点按会打开抽屉,把原来的界面推到一边。

Figure 1–19 Kindle for iOS: an overlay style Side Drawer

Figure 1–20 Queue for iOS: an inlay style Side Drawer

Side Drawer可以是多层结构。

Figure 1–21 Wish for iOS: 两层结构的Side Drawer

Toggle Menu

Toggle Menu的操作常规是打开它的操作,比如按键,滑动,同时应该也可以关闭它。这种菜单不应该占满整个屏幕,而是让背景透出来。点按背景的任何位置应该也能关闭它。

Figure 1–22 豌豆荚一览 for iOS: an overlay style Toggle Menu

Figure 1–23 BBC News for iOS: an overlay style Toggle Menu

Pie Menu

Figure 1–24 Pinterest, Path for iOS

二级导航模式

Page Swiping

Figure 1–25 iOS Homescreen: Springboard 一级导航,Page Swiping 二级导航,分页标示和暗示用户可以滑动的部分可见内容

Scrolling Tabs

这种模式用于在一个特定模块里显示多个类别或视图。

Figure 1–26 丁香医生 for iOS: Tabs 一级导航,Scrolling Tabs 二级导航

Accordion

Accordion在同一页上让用户看到更多的信息。这张模式会比导航到新的页面,然后再导航回来要更高效。

Figure 1–27 Murphy’s English Grammar in Use for iOS

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.