Mobile design pattern gallery中文译文--导航

Mobile Design Pattern Gallery 中文译本

目录
第一章导航 ..................................................................................................................................... 1
一级导航 ..................................................................................................................................... 2
宫格(Springboard) ................................................................................................................... 3
列表菜单（Listmenu） .......................................................................................................... 7
标签菜单(Tab menu) ............................................................................................................ 12
画册(Gallery) ......................................................................................................................... 16
仪表盘(Dashboard) ............................................................................................................... 20
隐喻图例-拟物化设计(Metaphor) ....................................................................................... 21
标签下拉菜单(Mega menu) ................................................................................................. 23
二级导航 ................................................................................................................................... 25
页面翻转切换(Page carousel) .............................................................................................. 28
图片翻转(Image carousel) .................................................................................................... 30
扩展列表(Inline expand) ....................................................................................................... 33

第一章导航

一级导航：宫格，列表菜单，标签菜单，画册，仪表盘，隐喻图例-拟物化设计，标签下
拉菜单

二级导航：页面翻转切换，图片翻转，扩展列表

我经常会去看应用商店用户评论的板块，这让我更好的去理解用户的需求。通过评分能得
到用户最直接的反馈，正是网页和桌面应用无法比拟的。大量的信息反馈用户的意愿和期
望。

一般看来，大多数 4 星 5 星评价的都不会特别具体。基本上都是诸如“很牛的应用，UI 很
棒，功能运行强大”。1 星 2 星的评论多少会有些抱怨，大体上描述一下使用中出现的问
题。通常来说都会囊括以下几点:

1 程序运行中崩溃

Nijah.cheung@gmail.com @小寒一点
Page 1


2 主要功能不全（同步、筛选，多账户链接……）

3 导航不清晰（无法返回，搜索不准确……）

4 界面设计具有误导性

以上提及的前两个问题无法通过本书的模版布局来解决，但后两个的大多数情况都可以修
复。在应用设计的过程中遵循导航设计模版，就能保证用户轻松的完成预期任务。

一级导航

优秀的导航，正如优秀的设计一样，遁寻于无形之中。导航优秀的应用，会让用户仅凭直
觉就可以轻而易举的完成任务，从好友浏览到申请购车贷款。多种不同的导航模版，可依
据不同的应用内容来择优使用。此处集中介绍 6 种一级导航，主要针对主页菜单导航。

宫格(Springboard) 列表菜单(List menu) 标签菜单(Tab menu) 画册(Gallery)

仪表盘(Dashboard) 隐喻图例-拟物化设计(Metaphor) 标签下拉菜单(Mega menu)

图例 1-1 一级导航模版

Page 2


宫格(Springboard)

宫格布局最早起源于 iOS，一般平均分割整个页面，类似启动面板。进入宫格页面后，
相应的点击可以直接进入各个应用。Facebook 就采用了 iOS 的主页宫格布局，结果就
是疯狂的被模仿。

图例 1-2 Facebook 宫格布局 & Ovi 地图(诺基亚出品，多内置在 Mego、塞班里)

Page 3


图例 1-3 Trulia & LinkedIn

Page 4


图例 1-4 Palm 端 NewsRoom & Nokia 端 Yahoo！

摆脱传统形态的宫格布局，可以用来作为用户信息的展示页，加之对应的操作选项，
针对不同功能需求做一些布局上的优化，会带来更加出色的体验。

Page 5


图例 1-5 针对不同功能优化后的 PayPal 和早期的 Gowalla

3*3 的九宫格，2*3 的六宫格，2*2 的四宫格，还有 1*2 的双宫格，是最常见的宫格布
局。也可以打破这种传统宫格模式，对重要内容放大，例如 Masters 的 video 这一栏比
其他的要大 2 到 3 倍，用以来对 Video 内容进行推荐。

图例 1-7 多种宫格布局

Page 6


图例 1-6 Norton Mobile 的 2*2 的四宫格布局，Masters 的非传统布局。

温馨小提示：宫格布局可以是传统的等分模式，或是非传统的，以便来突出展示某一
推荐功能，可以考虑更多个性化的展示方式。

列表菜单（Listmenu）

列表菜单与宫格的布局有些类似，都是进入某一应用的入口。列表菜单有很多表现形
式，包括许多应用自定义的群组列表、优化后的列表（简单的列表菜单，但增加了诸
如搜索、浏览、筛选等其他功能。）

Page 7


图例 1-8 菜单列表：Valspar & Kayak.

Page 8


图例 1-9 菜单列表：radio 的 Palm 版本和 Cozi.

Page 9


图例 1-10 个性化列表：Blackboard 和 Zoho CRM.

Page 10


图例 1-11 优化后列表显示方式：.Amazon MP3；群组列表：Stratus

温馨小提示：菜单列表对于长标题或有二级内容的应用非常适用。但在使用列表菜单
的时候需要提供返回到列表主页的操作，通常情况下是在标题栏增加一个“主页”的
图标按键。

Page 11


标签菜单(Tab menu)

图例 1-12 不同系统下标签列表的位置

底部标签菜单，是 iOS、WebOS 和 BlackBerry 经常使用的标签形式，易用性很强的一
种导航形式。

Page 12


图例 1-13 Jamie Oliver Recipes 和 Molome 采用底部标签。

图例 1-14 BlackBerry 的应用商店和 WorldMate，也采用底部标签的布局。

像 Starbucks 和 BlueMobile 那样，水平滑动底部标签，可以查看更多标签，停留在当前
页面。

Page 13


图例 1-15 Starbucks 和 Blue Mobile，可以滑动底部标签。

顶部标签，经常被 Android，Symbian 和 Windows 使用，和网页上的导航形式类似。
Nokia 和 Windows 也都采用了顶部标签，可以滑动查看更多标签选项。

Page 14


图例 1-16 Nokia 端的 Harvest Time Tractor 和 Fring，都采用了顶部滑动标签的形式。

Page 15


图例 1-17 Foursquare 和 HitPost 采用顶部标签的方式。

温馨小提示：当前选中项和其他标签要明确的进行视觉上的区分，标签图标也要清晰
易懂。

画册(Gallery)

在内容的导航方面会进行明显的区分。内容可以是文章、食谱、照片，滑动、网格或
是幻灯片来展现内容。

Page 16


图例 1-18 BBC 和 PULSE。

Page 17


图例 1-19 Flicker 和 Palm 端 PictureIt。

如果将如此多的图片内容进行分组将更便于浏览，Dwell 采用侧边标签的形式来管理内
容，更有条理。

Page 18


Page 19


图例 1-20 Dwell。

温馨小提示：画册这种页面布局形式最适用于内容刷新频率频繁的应用，以便于用户
更好的进行浏览。

仪表盘(Dashboard)

仪表盘的布局强调主要需要展示的内容，其英文缩写为 KPIs(Key performance
indicators),即把关键的数值以更明确的方式来展现。每一个数值都可以展开展示更多的
信息。很适用于财务应用、分析工具以及市场销售应用。

图例 1-21 Mint 和 ego dashoards。

温馨小提示：不要加载过多的数值内容，必要时可以做一下调研，确定一个能全面概
括的关键数值作为显示对象。

Page 20


隐喻图例-拟物化设计(Metaphor)

这种形式是对启动页面一个个性化的展现，从而更好的契合应用本身的主题属性。常
见于游戏中，或者是像一些记事本，阅读类的应用。

图例 1-22 Awesome note。

图例 1-23 Cellar。

Page 21


图例 1-24DoItTomorrow 和 TripJournal。

Page 22


图例 1-25 Aldiko Book Reader。

温馨小提示：选取合适的应用使用这种布局样式，使用不当就会像 Novel Notion 一样带来
糟糕的体验，你可以在第九章看到具体的分析。

标签下拉菜单(Mega menu)

这种标签下来菜单，在移动端和网页中的形式比较类似，各种不同形式和分组，以一种大
面积的半覆盖弹出的效果展现。The RipCurl 就在衣服类别的二级导航中采用了这种形式。

Page 23


图例 1-26 RipShop.com。

Facebook 的 WebOS 版本就采用了标签下拉菜单的简约型导航，从而避免了使用传统的宫
格模式。Walmart 在 Android 端也采用了这种方式。

Page 24


图例 1-27 WebOS 端的 Facebook 和 Android 端的 Walmart。

温馨小提示：在选择一级导航形式之前，务必要明确应用的信息架构，选择适合的布局，
在只有几个主要二级栏目的情况下，可以选择标签菜单。

二级导航

个人感觉如果本章节只包含菜单的一些布局样式会不太完整，因此扩展到了二级页面的导
航布局。对于二级导航，当然我指的是一些布局形态，例如，应用 ANZ 一级导航采用标签
菜单和二级导航宫格的方式。类似的还有 Jamie Oliver’s Recipes,同时采用了标签菜单和列
表菜单的两种导航。

Page 25


图例 1-28 (左侧)一级：标签菜单；二级：宫格；(右侧)一级：标签菜单；二级：列表。

任何一种一级导航模式都可以在二级导航中使用，像双标签菜单的导航，标签菜单和列表
的组合，以及与仪表盘、宫格或是画册等等的结合使用，都是很常见的表现形式。

Page 26


图例 1-29 (左侧)一级：标签菜单；二级：仪表盘；(右侧)一级：标签菜单；二级：标签菜单。

对于二级导航，有一切其他的布局可以使用(当然如笔者前面所述，任何一级导航都可以
在二级中进行复用)，但以下这些对于一级导航显然不太合适。

页面翻转切换(Page carousel) 图片翻转切换(Image carousel) 扩展列表(Inline expand)

图例 1-30 二级导航样式

Page 27


页面翻转切换(Page carousel)

滑动切换页面的一种导航形式，在各个页面切换的过程中会有对应的“页面指示器”来传
达页面总数的信息(在 iOS 中通常是用“小圆点”来表示)，采用滑动切换到下一页的操作
方式。以下的四个图例均采用了标签一级导航, 页面翻转为二级导航的布局。

图例 1-31 Nigella Quick Collection 和 Zappos。

Page 28


图例 1-32 Yhoo! Finance 和 iMobile。
对于页面总数较少的页面比较适合采用这种布局，页面比较多？考虑一下用列表菜单吧。

Page 29


图例 1-33ExcellentAnalystics，页面太多了。

温馨小提示：页面翻转导航最适用于页面数量较少的应用导航，从视觉效果上对于页面总
数和当前所在页面进行明显的提示。滑动为主要的操作手势。

图片翻转(Image carousel)

图片翻转可以是普通的 2D 效果，也可以像 iTunes 的流转封面一样比较炫的效果。IMDB
采用图片翻转的方式来表示最多浏览的影片。在做 Adobe Flex Show 的设计的时候，我们
也采用了这种方式来突出推荐的商品内容。

Page 30


图例 1-34 IMDB 和 Adobe Flex4.5 的商品展示应用。

The Photo Cookbook 是图片翻转的另外一个例子，但不同的是，对于不同的菜谱类型，图
片进行了分组。

Page 31


图例 1-35 The Photo Cookbook。

Tap’n’Scrap 更是很好的应用了这种布局，在背景的选择中采用了 2D 的手法，剪切薄的浏
览则使用了 3D 的效果。

图例 1-36 Tap’n’Scrap

ANZ 银行应用对于账户支付信息的展示采用了 3D 的封面浏览的方式，虽然这很抢眼，也
是一种很好的展示方式，但就这样滑动使用几次之后，也许就会觉得操作起来没有那么的
实在，毕竟这是一款金融支付类应用。

Page 32


图例 1-37ANZ 支付环节采用了 3D 效果的图片翻转，展示效果很好，几次使用之后，便会觉得厌倦。

温馨小提示：页面翻转的布局只适合用来展现最近更新的内容，像文章、商品、图片等。
对于可滑动的操作进行视觉上的指示，可以是箭头指示，亦或是只显示左/右半边的内容，
来告知用户还有更多地内容可以滑动查看。

扩展列表(Inline expand)

扩展列表可以在单独的一个页面，通过下拉操作来展示更多地信息。Android 的
Gingerbread 版本在通话记录中采用了这种布局，同一号码的通话记录统一展示在一行，
点击列表前的图标，可以展开查看每一个具体的通话记录。

Page 33


图例 1-38 Android 的通话记录页面。

这种布局，相对于应用，更多的应用在为移动设备优化后的网中，但两者也都是可以使用
此种布局的，像 Gap.Com，采用扩展列表来代替长列表的方式，来展示分类女装。

Page 34


图例 1-39 Gap 移动端网页。

温馨小提示：扩展列表比较适用于有较多展开项信息或是操作的应用。

Page 35

Mobile design pattern gallery中文译文--导航

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mobile design pattern gallery中文译文--导航

Semelhante a Mobile design pattern gallery中文译文--导航 (20)

Mobile design pattern gallery中文译文--导航