Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,605 views

Published on

Mobile design pattern gallery Chinese translation version

  • Be the first to comment

  • Be the first to like this

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

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

×