mobile design pattern gallery中文译文--导航
Post on 26-Jun-2015
2.520 Views
Preview:
DESCRIPTION
TRANSCRIPT
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 1
@小寒一点
目录
第一章导航 ..................................................................................................................................... 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 程序运行中崩溃
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 2
@小寒一点
2 主要功能不全(同步、筛选,多账户链接……)
3 导航不清晰(无法返回,搜索不准确……)
4 界面设计具有误导性
以上提及的前两个问题无法通过本书的模版布局来解决,但后两个的大多数情况都可以修
复。在应用设计的过程中遵循导航设计模版,就能保证用户轻松的完成预期任务。
一级导航
优秀的导航,正如优秀的设计一样,遁寻于无形之中。导航优秀的应用,会让用户仅凭直
觉就可以轻而易举的完成任务,从好友浏览到申请购车贷款。多种不同的导航模版,可依
据不同的应用内容来择优使用。此处集中介绍 6 种一级导航,主要针对主页菜单导航。
宫格(Springboard) 列表菜单(List menu) 标签菜单(Tab menu) 画册(Gallery)
仪表盘(Dashboard) 隐喻图例-拟物化设计(Metaphor) 标签下拉菜单(Mega menu)
图例 1-1 一级导航模版
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 3
@小寒一点
宫格(Springboard)
宫格布局最早起源于 iOS,一般平均分割整个页面,类似启动面板。进入宫格页面后,
相应的点击可以直接进入各个应用。Facebook 就采用了 iOS 的主页宫格布局,结果就
是疯狂的被模仿。
图例 1-2 Facebook 宫格布局 & Ovi 地图(诺基亚出品,多内置在 Mego、塞班里)
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 4
@小寒一点
图例 1-3 Trulia & LinkedIn
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 5
@小寒一点
图例 1-4 Palm 端 NewsRoom & Nokia 端 Yahoo!
摆脱传统形态的宫格布局,可以用来作为用户信息的展示页,加之对应的操作选项,
针对不同功能需求做一些布局上的优化,会带来更加出色的体验。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 6
@小寒一点
图例 1-5 针对不同功能优化后的 PayPal 和早期的 Gowalla
3*3 的九宫格,2*3 的六宫格,2*2 的四宫格,还有 1*2 的双宫格,是最常见的宫格布
局。也可以打破这种传统宫格模式,对重要内容放大,例如 Masters 的 video 这一栏比
其他的要大 2 到 3 倍,用以来对 Video 内容进行推荐。
图例 1-7 多种宫格布局
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 7
@小寒一点
图例 1-6 Norton Mobile 的 2*2 的四宫格布局,Masters 的非传统布局。
温馨小提示:宫格布局可以是传统的等分模式,或是非传统的,以便来突出展示某一
推荐功能,可以考虑更多个性化的展示方式。
列表菜单(Listmenu)
列表菜单与宫格的布局有些类似,都是进入某一应用的入口。列表菜单有很多表现形
式,包括许多应用自定义的群组列表、优化后的列表(简单的列表菜单,但增加了诸
如搜索、浏览、筛选等其他功能。)
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 8
@小寒一点
图例 1-8 菜单列表:Valspar & Kayak.
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 9
@小寒一点
图例 1-9 菜单列表:radio 的 Palm 版本和 Cozi.
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 10
@小寒一点
图例 1-10 个性化列表:Blackboard 和 Zoho CRM.
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 11
@小寒一点
图例 1-11 优化后列表显示方式:.Amazon MP3;群组列表:Stratus
温馨小提示:菜单列表对于长标题或有二级内容的应用非常适用。但在使用列表菜单
的时候需要提供返回到列表主页的操作,通常情况下是在标题栏增加一个“主页”的
图标按键。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 12
@小寒一点
标签菜单(Tab menu)
图例 1-12 不同系统下标签列表的位置
底部标签菜单,是 iOS、WebOS 和 BlackBerry 经常使用的标签形式,易用性很强的一
种导航形式。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 13
@小寒一点
图例 1-13 Jamie Oliver Recipes 和 Molome 采用底部标签。
图例 1-14 BlackBerry 的应用商店和 WorldMate,也采用底部标签的布局。
像 Starbucks 和 BlueMobile 那样,水平滑动底部标签,可以查看更多标签,停留在当前
页面。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 14
@小寒一点
图例 1-15 Starbucks 和 Blue Mobile,可以滑动底部标签。
顶部标签,经常被 Android,Symbian 和 Windows 使用,和网页上的导航形式类似。
Nokia 和 Windows 也都采用了顶部标签,可以滑动查看更多标签选项。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 15
@小寒一点
图例 1-16 Nokia 端的 Harvest Time Tractor 和 Fring,都采用了顶部滑动标签的形式。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 16
@小寒一点
图例 1-17 Foursquare 和 HitPost 采用顶部标签的方式。
温馨小提示:当前选中项和其他标签要明确的进行视觉上的区分,标签图标也要清晰
易懂。
画册(Gallery)
在内容的导航方面会进行明显的区分。内容可以是文章、食谱、照片,滑动、网格或
是幻灯片来展现内容。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 17
@小寒一点
图例 1-18 BBC 和 PULSE。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 18
@小寒一点
图例 1-19 Flicker 和 Palm 端 PictureIt。
如果将如此多的图片内容进行分组将更便于浏览,Dwell 采用侧边标签的形式来管理内
容,更有条理。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 19
@小寒一点
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 20
@小寒一点
图例 1-20 Dwell。
温馨小提示:画册这种页面布局形式最适用于内容刷新频率频繁的应用,以便于用户
更好的进行浏览。
仪表盘(Dashboard)
仪表盘的布局强调主要需要展示的内容,其英文缩写为 KPIs(Key performance
indicators),即把关键的数值以更明确的方式来展现。每一个数值都可以展开展示更多的
信息。很适用于财务应用、分析工具以及市场销售应用。
图例 1-21 Mint 和 ego dashoards。
温馨小提示:不要加载过多的数值内容,必要时可以做一下调研,确定一个能全面概
括的关键数值作为显示对象。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 21
@小寒一点
隐喻图例-拟物化设计(Metaphor)
这种形式是对启动页面一个个性化的展现,从而更好的契合应用本身的主题属性。常
见于游戏中,或者是像一些记事本,阅读类的应用。
图例 1-22 Awesome note。
图例 1-23 Cellar。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 22
@小寒一点
图例 1-24DoItTomorrow 和 TripJournal。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 23
@小寒一点
图例 1-25 Aldiko Book Reader。
温馨小提示:选取合适的应用使用这种布局样式,使用不当就会像 Novel Notion 一样带来
糟糕的体验,你可以在第九章看到具体的分析。
标签下拉菜单(Mega menu)
这种标签下来菜单,在移动端和网页中的形式比较类似,各种不同形式和分组,以一种大
面积的半覆盖弹出的效果展现。The RipCurl 就在衣服类别的二级导航中采用了这种形式。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 24
@小寒一点
图例 1-26 RipShop.com。
Facebook 的 WebOS 版本就采用了标签下拉菜单的简约型导航,从而避免了使用传统的宫
格模式。Walmart 在 Android 端也采用了这种方式。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 25
@小寒一点
图例 1-27 WebOS 端的 Facebook 和 Android 端的 Walmart。
温馨小提示:在选择一级导航形式之前,务必要明确应用的信息架构,选择适合的布局,
在只有几个主要二级栏目的情况下,可以选择标签菜单。
二级导航
个人感觉如果本章节只包含菜单的一些布局样式会不太完整,因此扩展到了二级页面的导
航布局。对于二级导航,当然我指的是一些布局形态,例如,应用 ANZ 一级导航采用标签
菜单和二级导航宫格的方式。类似的还有 Jamie Oliver’s Recipes,同时采用了标签菜单和列
表菜单的两种导航。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 26
@小寒一点
图例 1-28 (左侧)一级:标签菜单;二级:宫格;(右侧)一级:标签菜单;二级:列表。
任何一种一级导航模式都可以在二级导航中使用,像双标签菜单的导航,标签菜单和列表
的组合,以及与仪表盘、宫格或是画册等等的结合使用,都是很常见的表现形式。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 27
@小寒一点
图例 1-29 (左侧)一级:标签菜单;二级:仪表盘;(右侧)一级:标签菜单;二级:标签菜单。
对于二级导航,有一切其他的布局可以使用(当然如笔者前面所述,任何一级导航都可以
在二级中进行复用),但以下这些对于一级导航显然不太合适。
页面翻转切换(Page carousel) 图片翻转切换(Image carousel) 扩展列表(Inline expand)
图例 1-30 二级导航样式
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 28
@小寒一点
页面翻转切换(Page carousel)
滑动切换页面的一种导航形式,在各个页面切换的过程中会有对应的“页面指示器”来传
达页面总数的信息(在 iOS 中通常是用“小圆点”来表示),采用滑动切换到下一页的操作
方式。以下的四个图例均采用了标签一级导航, 页面翻转为二级导航的布局。
图例 1-31 Nigella Quick Collection 和 Zappos。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 29
@小寒一点
图例 1-32 Yhoo! Finance 和 iMobile。
对于页面总数较少的页面比较适合采用这种布局,页面比较多?考虑一下用列表菜单吧。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 30
@小寒一点
图例 1-33ExcellentAnalystics,页面太多了。
温馨小提示:页面翻转导航最适用于页面数量较少的应用导航,从视觉效果上对于页面总
数和当前所在页面进行明显的提示。滑动为主要的操作手势。
图片翻转(Image carousel)
图片翻转可以是普通的 2D 效果,也可以像 iTunes 的流转封面一样比较炫的效果。IMDB
采用图片翻转的方式来表示最多浏览的影片。在做 Adobe Flex Show 的设计的时候,我们
也采用了这种方式来突出推荐的商品内容。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 31
@小寒一点
图例 1-34 IMDB 和 Adobe Flex4.5 的商品展示应用。
The Photo Cookbook 是图片翻转的另外一个例子,但不同的是,对于不同的菜谱类型,图
片进行了分组。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 32
@小寒一点
图例 1-35 The Photo Cookbook。
Tap’n’Scrap 更是很好的应用了这种布局,在背景的选择中采用了 2D 的手法,剪切薄的浏
览则使用了 3D 的效果。
图例 1-36 Tap’n’Scrap
ANZ 银行应用对于账户支付信息的展示采用了 3D 的封面浏览的方式,虽然这很抢眼,也
是一种很好的展示方式,但就这样滑动使用几次之后,也许就会觉得操作起来没有那么的
实在,毕竟这是一款金融支付类应用。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 33
@小寒一点
图例 1-37ANZ 支付环节采用了 3D 效果的图片翻转,展示效果很好,几次使用之后,便会觉得厌倦。
温馨小提示:页面翻转的布局只适合用来展现最近更新的内容,像文章、商品、图片等。
对于可滑动的操作进行视觉上的指示,可以是箭头指示,亦或是只显示左/右半边的内容,
来告知用户还有更多地内容可以滑动查看。
扩展列表(Inline expand)
扩展列表可以在单独的一个页面,通过下拉操作来展示更多地信息。Android 的
Gingerbread 版本在通话记录中采用了这种布局,同一号码的通话记录统一展示在一行,
点击列表前的图标,可以展开查看每一个具体的通话记录。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 34
@小寒一点
图例 1-38 Android 的通话记录页面。
这种布局,相对于应用,更多的应用在为移动设备优化后的网中,但两者也都是可以使用
此种布局的,像 Gap.Com,采用扩展列表来代替长列表的方式,来展示分类女装。
Mobile Design Pattern Gallery 中文译本
Nijah.cheung@gmail.com Page 35
@小寒一点
图例 1-39 Gap 移动端网页。
温馨小提示:扩展列表比较适用于有较多展开项信息或是操作的应用。
top related