移动设计模式大观 精华翻译版
Neil, Theresa 著 郭杉杉 译
2012.8.28 V1
|
移动设计模式大观 精华翻译版 Neil, Theresa 著 郭杉杉 译 2012.8.28 V1 1 移动设计模式大观 中文精华翻译版 2 Mobile Design Pattern Gallery 一书的中文精华内容 翻译版。所谓中文精华内容翻译版就是指去除与手机交互无关 的内容(如书中谈到手机与 web 交互的差异性)而保留书中 最精华的部分。使得整本书变得简洁、专注。 简洁、专注也是我追求的产品及交互设计原则。相对于 PC 的大屏幕，手机的小尺寸屏幕使得产品设计人员在设计产品时 候更要学会做减法。手机与 web 相比更像是一个 30 平的小户型与一个 180 平 的大户型房子。30 平的小房子就要学会“聚”、“藏”、“换”、“合”、“分”、“压”、 “顺”等装修手法，对应手机设计就是将各种菜单、通知、相关项收到一块，有 型的控件、手势与重力感应、页面跳转与导航、输入框与标签，宫格与区域划分， 挤压处理，屏幕边缘化处理等各种处理技术。 作为一个手机产品经理和交互设计师，日常工作里需要不断给自己充电，保 持自己跟上行业的步伐。可是，国内市场上能找到的相关中文书籍少之又少，部 分内容也过于老旧。某日偶然间发现 Mobile Design Pattern Gallery 一书，没想 到一看到目录及书籍内容的组织形式，我便像找到宝贝一样，抱着这本书每天啃 一点、每天翻译一点，因为它正是我需要的。书中语言通俗易懂、案例丰富，更 不乏作者理性的总结。作者将手机交互设计总结成十大模式并给出了正反案例， 使得该书不仅具有较高的可读性，更可视为日常工作的速查手册。 翻译终归是个体力活儿，虽然在的翻译过程中使我交互设计水平迅速增长、 学到了很多曾经不曾发现的问题，但是翻译此书也花费了我不少时间。第一次翻 译图书，水平肤浅，为了给各位尽量翻译出至少能看的懂的作品，避免贻笑大方， 我寻求了很多行业内的同学一同审阅。他们指出了本书翻译中的问题，为翻译出 这本书做了不少贡献，特别感谢卓大师的产品经理王伟同学。在此向他们表示感 谢。 感谢本书作者为大家撰写了这么一本优秀的专业图书。为尊重原作者的劳动， 本翻译版在内容上做了适当的删减处理，译者会随时根据出版商及原作者需要， 停止该中文翻译版在公众渠道的免费共享。 本作品采用知识共享署名-非商业性使用-禁止演绎 中国大陆许可协议进行 许可。此中文版不得以各种名义用于任何商业行为，如产生相关纠纷，译者概不 承认任何法律责任。 最后，给出我的联系方式，希望各位产品经理及交互设计师同行能多多与我 交流。也希望各位同行能对本书的翻译不足能提出您宝贵的意见。 联系方式 QQ: 609956246 E-mail: guoshsh@yeah.net 微博(新浪):http://weibo.com/u/2876938842 移动设计模式大观 中文精华翻译版 —DavidGuo(郭杉杉 3 -王伟 卓大师 产品经理 追求完美的路上没有重点，GUI 设计需要我们有颗不断超越和探索的心，关注 交互的同时又要把握好视觉的表现;每每翻开这里总能找到不一样的思维启迪。 -陈庆福 4399 UI 设计师 这本书内容言简意赅，非常适合手机 GUI 设计的速查手册，强烈推荐。 -聂勇 电信集团增值应用 产品线经理 在国内我们的团队一直为众多的客户提供商业软件的价值!IT 时代发展到 今天，手机已经是用户的个人信息终端。看过了《移动设计模式大观》，其中很 多内容非常有营养，对我们的团队和客户的最终成就起到了很好的帮助。非常感 谢编者，希望未来有更好的内容提供给我们。 -葛旭东 联合永道中国 产品市场部总经理 俾斯麦说:“蠢人常说他们从自己的经验中学习，我却认为利用别人的经验 更加好些。”书里总结了大量移动产品的设计经验、方法以及教训，并且都有据 可依。读过本书，感觉在移动互联网产品探索的道路上又有新的收获。站在巨人 的肩膀上可以让我们看的更远。推荐本书作为产品经理，产品设计师必备的工具 书。 -李红岩 人人网 LBS 产品经理 曾经的败笔，是对进步和创新的最好指导，在充满激情的职业生涯中更是如 此，以史为鉴，以此书为鉴! -雷燕泽 金山云 产品经理 交互源于体验，如何让用户通过微缩的移动终端获得最轻松、最自然的体验， 这本书可以让你少走弯路! -林其翔 网龙无线 产品经理 一款优秀的产品是通过精心简约的设计，隐藏背后复杂的技术细节，给用户 提供便捷简单的使用体验。《移动设计模式大观》正是教我们如何掌握这些设计 方法，创造出优秀用户体验的产品。值得一读!-潘运武 91 助手产品经理 毫无疑问，建立自己的设计模式数据库，从来都是最重要的!此书是目前移 动产品 GUI 设计模式数据库最好的总结! -赵敬双 网龙无线 91 桌面创始人 该书用简洁的文字将移动设计的精髓娓娓道来，绝对是你踏足移动领域的最 佳指南 -李亚婷 经桥网络科技 产品经理 作为本书的目标用户之一，我认为该产品(=本书)切合需求，相见恨晚，应分 享给身边需要提高交互设计水平的新老童鞋。本书译者郭杉杉，一直以来是一个 注重实践和乐意分享的人，期待本书完整纸质版能够早日上市发售。 -王鲲鹏 亿八佰 产品经理 移动设计模式大观 中文精华翻译版 4 目录 第一章 导航设计......................................................................................................................8 主导航 ....................................................................................................................................8 桌面式 ................................................................................................................................8 列表式 ..............................................................................................................................11 选项卡式 ..........................................................................................................................15 图库式 ..............................................................................................................................20 仪表盘式 ..........................................................................................................................22 隐喻式 ..............................................................................................................................23 菜单式 ..............................................................................................................................26 二级导航 ..............................................................................................................................27 页面旋转式 ......................................................................................................................29 图片旋转式 ......................................................................................................................31 当前页面展开式 ..............................................................................................................33 第二章 表单设计....................................................................................................................35 登陆表单 ..........................................................................................................................35 注册表单 ..........................................................................................................................37 确认表单 ..........................................................................................................................39 计算表单 ..........................................................................................................................40 搜索表单 ..........................................................................................................................42 多步操作表单 ..................................................................................................................44 长表单 ..............................................................................................................................47 第三章 表格与列表................................................................................................................49 普通型 ..............................................................................................................................51 无表头型 ..........................................................................................................................52 固定列表 ..........................................................................................................................52 综合+数据 ........................................................................................................................53 分组型 ..............................................................................................................................55 层叠型 ..............................................................................................................................55 视觉指示型 ......................................................................................................................56 移动设计模式大观 中文精华翻译版 可编辑型 ..........................................................................................................................57 第四章 搜索与排序................................................................................................................58 搜索模式 ..............................................................................................................................58 触发搜索 ..........................................................................................................................58 自动完成 ..........................................................................................................................60 动态搜索 ..........................................................................................................................62 搜索范围 ..........................................................................................................................63 保存和最近搜索 ..............................................................................................................65 搜索表单 ..........................................................................................................................67 搜索结果 ..........................................................................................................................68 排序模式 ..............................................................................................................................70 直接排序 ..........................................................................................................................71 排序选择器 ......................................................................................................................72 排序表单 ..........................................................................................................................74 过滤模式 ..............................................................................................................................74 直接过滤 ..........................................................................................................................75 过滤抽屉 ..........................................................................................................................77 过滤对话框 ......................................................................................................................77 过滤表单 ..........................................................................................................................78 第五章 工具............................................................................................................................81 工具栏 ..............................................................................................................................83 选项卡式 ..........................................................................................................................87 操作按钮 ..........................................................................................................................88 情景工具 ..........................................................................................................................90 内联操作 ..........................................................................................................................92 多态按钮 ..........................................................................................................................94 批量操作 ..........................................................................................................................97 第六章 图表设计....................................................................................................................98 带过滤图表 ....................................................................................................................100 预览窗口 ........................................................................................................................104 移动设计模式大观 中文精华翻译版 5 预览+数据 ......................................................................................................................106 数据点细节 ....................................................................................................................108 深入数据 ........................................................................................................................111 缩放处理 ........................................................................................................................112 数据透视表 ....................................................................................................................113 波形图 ............................................................................................................................114 第七章 引导设计..................................................................................................................116 对话框 ............................................................................................................................118 提示信息 ........................................................................................................................119 全局预览 ........................................................................................................................121 视频 DEMO ....................................................................................................................122 透明化设计 ....................................................................................................................124 初次使用引导 ................................................................................................................124 持久性设计 ....................................................................................................................125 易发现设计 ....................................................................................................................126 第八章 反馈及可见性..........................................................................................................127 反馈设计 ............................................................................................................................127 错误提示 ........................................................................................................................128 确认信息 ........................................................................................................................129 系统状态 ........................................................................................................................131 功能可见性 ........................................................................................................................136 可触摸设计 ....................................................................................................................136 可滑动设计 ....................................................................................................................138 可拖拽设计 ....................................................................................................................140 第九章 帮助设计..................................................................................................................141 如何操作 ........................................................................................................................141 速查表 ............................................................................................................................142 向导模式 ........................................................................................................................143 第十章 设计反例..................................................................................................................145 盲目创新 ............................................................................................................................145 移动设计模式大观 中文精华翻译版 6 隐喻控件不匹配 ................................................................................................................151 控件不匹配 ....................................................................................................................151 图标不匹配 ....................................................................................................................153 心智模型不匹配 ............................................................................................................153 提示对话框不匹配 ........................................................................................................154 垃圾图表 ............................................................................................................................156 过多的按钮 ........................................................................................................................158 移动设计模式大观 中文精华翻译版 7 8 主导航 9 桌面式布局也用于可显示带有个性化桌面按钮配置信息的页面，通常桌面布局是可以随个 性化定制而改变的。 移动设计模式大观 中文精华翻译版 通常按钮以3*3，2*3,2*2和1*2形式排布于桌面。 10 但也不是必须遵守等长宽布局，有些时候一个按钮可能是其它按钮的几倍。 移动设计模式大观 中文精华翻译版 11 最佳实践:菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间 较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给用户提供个性化和定 制化功能 12 移动设计模式大观 中文精华翻译版 13 移动设计模式大观 中文精华翻译版 14 最佳实践:列表菜单导航适合长标题或者有副标题说明，使用类表菜单导航应该提供一个从 子页面返回类表页面的方式，通常在标题栏添加一个一个带有菜单字样的按钮作为返回按钮。 通常按钮以3*3，2*3,2*2和1*2形式排布于桌面。 但也不是必须遵守等长宽布局，有些时候一个按钮可能是其它按钮的几倍。 移动设计模式大观 中文精华翻译版 15 最佳实践:菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间 较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给用户提供个性化和定 制化功能 16 底部选项卡深受IOS，黑莓，webOS喜爱。 移动设计模式大观 中文精华翻译版 17 在星巴克和蓝色移动APP的水平及卷动选项按钮，用户不需要打开更多页面就可以得到更多 的选项 移动设计模式大观 中文精华翻译版 18 安卓，塞班和Win系统喜欢顶部Tab导航，他们看起来更像传统网站导航。 移动设计模式大观 中文精华翻译版 19 移动设计模式大观 中文精华翻译版 20 最佳实践:使用选项卡导航要注意视觉上对已选择和未选择的选项进行有效区分 21 有时候如果内容区是以分组形势布局，分组的内容应该容易被用户浏览到。使用侧Tab形 势去管理分组内容，让用户能够在Tab中切换，查看不同分组。 移动设计模式大观 中文精华翻译版 22 最佳实践:图库式适用于用户想要浏览的经常更新的内容 23 最佳实践:仪表盘不需要载过多内容，而需要载入一些被研究确认过的关键数据 24 移动设计模式大观 中文精华翻译版 25 最佳实践:使用隐喻式要慎重，如果一个执行起来不明确的隐喻反而会起到不好的反作用。 移动设计模式大观 中文精华翻译版 26 webOS版本的Facebook使用流式菜单导航，避免跳转到额外的桌面式导航中。在Android 版的沃尔玛应用中也使用同样布局。 移动设计模式大观 中文精华翻译版 27 最佳实践:在选择导航模式前，请先明确你的信息架构，根据信息架构选择需要的导航模式。 28 任何主导航都可以用于二级导航，如我们常见的带有二级Tab的Tab导航，带有二级Tab 的列表导航，带有Tab的仪表盘，桌面和图库导航。 移动设计模式大观 中文精华翻译版 29 有一些专门适合二级而不是主导航的导航模式。如页面旋转式，图片旋转式和当前页展开式 IOS系统下面的小点)显 示一共有多少页可供旋转;用户滑动时将显示下一个页面。 移动设计模式大观 中文精华翻译版 30 页面旋转导航应用有一定的局限性，当页面超过8个时，请考虑使用列表导航。 移动设计模式大观 中文精华翻译版 31 最佳实践:页面旋转适用页面数量较少的情况，使用指示器反应页面数量和当前页面，左右 滑动手势是最常见的旋转导航手势。 iTunes展示的那种2D旋转木马形式。如下面两个应用使用了图 片旋转木马式二级导航。 移动设计模式大观 中文精华翻译版 图片菜谱是另一种图片旋转木马形式，图片以不同的烹饪法分组显示在不同的列中。 32 移动设计模式大观 中文精华翻译版 可滑动的“n”形Tab导航是一种结合Tab模式与图片旋转木马模式优点的好例子。使用图片 木马导航作为背景，使用“框架”进行选择，使用剪贴薄的展示样式观看。如下图: 最佳实践:图片旋转木马式最适合展示新的视觉内容，例如文章、产品和图片。注意要提供 视觉的可预见性，要么左右留有箭头，要么有部分图片漏出来，要么有页面指示“...”能够显 示更多的内容 Android 2.3中"Call log"更好的展示了这一 布局。同一号码被聚合在一行展示，点击图标会显示每个的单独状态。 33 移动设计模式大观 中文精华翻译版 这种模式更常用语在移动设备上对原来网站的优化显示。如下图gap.com的应用， Ex-panding列表代替层叠列表 34 移动设计模式大观 中文精华翻译版 WEB那样设计表单。移 动设备上常用表单形态如下: 35 最佳实践:扩展类表模式特别适合逐步显示细节或者某一对象的信息。 36 移动设计模式大观 中文精华翻译版 另一种做法是放弃用户名字段，只需要一个密码。用户只需要输入密码来访问敏感数据，在 金融类应用中大受欢迎。如图只要输入一个密码即可: 最佳实践:不要在登陆屏幕上做太多创新。通常登陆表单要做的足够容易让用户完成登陆， 要留有密码找回功能，以便用户找回密码。 37 移动设计模式大观 中文精华翻译版 适时提供控件及时内部反馈，如KIK的用户名和密码可用检测 38 移动设计模式大观 中文精华翻译版 最佳实践:保持简短，一屏内显示，去掉邮件和密码确认，使用纵向标签，实时反馈有效性 确认表单 移动设备确认表单设计原则: 39 移动设计模式大观 中文精华翻译版 40 最佳实践:侧重速度，效率和安全，减少不必要的字段，将页面和步骤最小化。 41 对齐，标签，字体，按钮位置，对比和颜色这些能够影响移动表单可用性的元素。例如:易 读，标签及字段对齐的计算器程序。 好的计算截面应该输入输出对齐整洁并带有计算结果的视觉展示，如下图的计算器程序 移动设计模式大观 中文精华翻译版 42 最佳实践:对齐，标签，字体，按钮摆放，对比，颜色，都会影响到表单可读性，尽可能 在同一页面展示可视化效果。 Kayak’s航班,使用定制化表单布局保持 所有的搜索条件，搜索按钮在列表折叠中。OpenTable应用则会默认显示你目前的位置， 日期，和时间段，去搜索你能够预定的饭店。 移动设计模式大观 中文精华翻译版 以下两个应用在完整搜索运行前就已经实现了显示“活的”预览输出。 43 移动设计模式大观 中文精华翻译版 以下两个应用中相比于右边的布局，左边的截面更容易操作且不显得那么拥挤。 最佳实践:搜索字段不要太多，一个页面一个搜索维度或字段，空间布局合适，操作快捷方 便。 WEB上常用的臃肿型的多步操作表单。在移动 设备上的一个简单的解决方式是显示当前步骤和总步骤数。如下图应用: 44 移动设计模式大观 中文精华翻译版 更多的内容可能需要更长的流程，例如下面星巴克应用，带有上下导航按钮，但是这种 做法破坏了让用户知道我能去哪里及我去过哪里的设计原则。清楚的导航在移动设备交互设 计中对用户更为重要，因为在移动设备中用户更容易被打断和分心。 45 移动设计模式大观 中文精华翻译版 好的设计应该像“TurboTax SnapTax”，步骤和提交按钮出现在单一界面。每一步可以 继续深入和完成。单页提供了更有价值的导航模式(如有三步要处理，还剩两步)。同时， 在提交前它也是一个简明的预览摘要 Square应用在标题行使用一个程式化的进度条，提供一个可视化步骤和数量及当前步 骤的指示器。 46 移动设计模式大观 中文精华翻译版 47 最佳实践:显示用户去过哪，还可以去哪，减少不必要的字段，将页面和步骤最小化。 Zappos和Skype，都使用了模式化的表单在他们的IOS应用中，按钮被防止在Title Bar 中。 移动设计模式大观 中文精华翻译版 这样做不符合其他OS的规范，把底部按钮放置在其他位置。 48 移动设计模式大观 中文精华翻译版 遵循表单设计最佳实践，以及特定系统为按钮，对齐的指导原则。以下两个应用设计的不太 理想 最佳实践:不要为了减少滚动机械的将表单划分成几步。必要为了没有必要的字段去编辑表 单，遵循各OS设计规范。 Web中通常习惯于在表格中塞满各种数据，使其具有充实的行列。但是，在移动设备设计
中需要重新评估，显示重要的数据。如下图: 49 移动设计模式大观 中文精华翻译版 我们可以在移动设备上提供一个带动态搜索的无表头列表试图，以便用户能够快速搜索到特 定学生信息，如下图: 常用表格类型如下图 50 移动设计模式大观 中文精华翻译版 51 最佳实践:避免使用黑色网格线以及将表格垂直划分的形式，文字左对齐，数字右对齐，如 果一屏信息太多时，可考虑使用其他模式。 Realtor.com应 用。 此模式的理想状态是显示数据项集合和搜素结果。想一个列表，此模式用来快速的扫视和选 择。 最佳实践:表中每一行最多显示三小行信息，信息内容要有主次之分，对于主次，不要主观 猜测，可由用户调研后得出结果确定设计 52 移动设计模式大观 中文精华翻译版 53 最佳实践:当列被固定后，要提供视觉引导，提示用户滑动后可以看到更多内容。 ++数据模式是指在单个行上面显示一些总结综述性信息。在移动设备上，如美国银 行应用在详细数据上面显示一个大的综述信息，而在NASDAQ.com上面是综述内容，用户 可以滚动下面细节而不会错过上面的综述信息。 移动设计模式大观 中文精华翻译版 如下图左侧的大饼图难以辨认，右侧的设计却很不错。 54 最佳实践:综述位于数据之上，比较醒目，容易理解。 移动设计模式大观 中文精华翻译版 55 最佳实践:在视觉上区分总分关系 WineSpectator应用各国的选择: 移动设计模式大观 中文精华翻译版 56 IOS系统使用这个表试图，引用一个被称作“单列多行的当前数据”的UI元素。DropBox在 其二级带有Tab导航使用此方式.如下图: app,使用红绿箭头表示我的卡路里摄入量是高于或低于我一天消耗的。Roambi 则使用微线图表示每月销售数字，趋势及状况。如下图: 移动设计模式大观 中文精华翻译版 57 最佳实践:选择的图标要一眼容易辨认出来，避免使用无意义的图标。 quickoffice应用。许多相同的用于WEB的设计指导 方针仍可用于移动设备设计
移动设计模式大观 中文精华翻译版 与现有的WEB应用不同，移动设备表格数据录入，不支持现有的键盘录入，而是被广泛的 移动设备键盘所支持。 最佳实践:不太适用于大规模的数据录入和编辑。 搜索模式 target应用。这些结果通常显示在搜索栏下面，考虑配对显示搜 索模式和自动完成模式。如下图: 58 移动设计模式大观 中文精华翻译版 59 最佳实践:搜索框比较醒目，提供取消搜索操作，当搜索正在执行时，给用户提供反馈信息。 移动设计模式大观 中文精华翻译版 WEB和移动端最广泛的搜索模式是自动完成的。只要在输入框输入内容搜索立即会被执 行，结果当即显示，或者继续敲击打字并点击搜索按钮，完成搜索并显示结果。 60 理想情况下，结果被立即显示出来，但是有个进度条指示器，用以系统反馈。如下图应 用，一个指示器显示搜索字段，下面显示最终的搜素结果。 移动设计模式大观 中文精华翻译版 61 TripAdvisor应用提供了一个有大众目的地，酒店，餐馆为目标的增强的自动完成、分组结 果的功能。 移动设计模式大观 中文精华翻译版 62 最佳实践:如果在显示搜索结果时有延迟，要给用户提供反馈，在搜索结果中，对于匹配的 结果可以重点突出。 WebOS中都输入过滤文本，显示列表项。 移动设计模式大观 中文精华翻译版 63 最佳实践:适用于有限的数据集，如通讯录，媒体库，如果数据集比较大，可能不太合适使 用。 google 和Photobucket使用不同的设计，但是达到相同的效果。 移动设计模式大观 中文精华翻译版 64 AllRecipes应用在提交搜索前允许选择(过滤搜索)标准。DropBox默认初始范围为所 有，但也可以按下搜索按钮前切换到文件或文件夹。 移动设计模式大观 中文精华翻译版 65 最佳实践:基于数据集提供合理的搜索条件，提供3-6个选项足够，可以考虑表单式的高级 搜索。 “尊重用户的劳动”是成功手机界面设计的最基本原则。保存和最近搜索使得搜索条件容易 从先前的搜索中选择，而不用再次输入相同的关键词。eBay和其他应用使用此方式提高用 户搜索的效率。 移动设计模式大观 中文精华翻译版 66 其他基于尊重用户劳动的搜索包括基于地理位置的搜索选择项，如图 其他尊重用户尝试的搜索选项包括基于地理位置的搜索，如Trulia,条形码搜索，如亚马逊 移动设计模式大观 中文精华翻译版 应用。 最佳实践:保存搜索需要额外的步骤去命名搜索参考值，尊重用户的劳动，让用户少操作。 Kayak 和 Whole Foods使用搜索表单来搜索航班和酒店。 67 移动设计模式大观 中文精华翻译版 最佳实践:最少的数字输入。实现操作系统相关的输入正确控制检查。遵循表单设计原则(对 齐、标签、大小)。 68 移动设计模式大观 中文精华翻译版 延迟加载是常用的技术，这样一些结果会被显示，一些结果会被延迟加载。如下图 Ebay Motors 和 BestBuy。 69 移动设计模式大观 中文精华翻译版 许多应用提供一个按钮来显示查看更多或在屏幕滑动时候自动加载更多结果。如下图: 避免分页，他们违背在移动设备上的自然交互模式。 最佳实践:显示搜索结果数量。使用加载的方式代替翻页，选择一个合理的搜索结果默认排 序。 70 移动设计模式大观 中文精华翻译版 71 “单一TAP”解决方案。排序选项放在 顶部或底部取决于页面其他元素。 如Target应用提供了四种排序选项与三个排序切换按钮。对于价格排序选项，他们提供了 两个选择;按价格升序或降序排序。 移动设计模式大观 中文精华翻译版 最佳实践:清楚的显示那些选项被选中或者处于开启状态。，如果选项标签在目标按钮条上 不合适放置的话，考虑使用按排序顺序的选择模式 UI组件可供选择，但是考 虑到不同OS的设计指南(如菜单是常见的Android的应用程序，选择器更适合IOS设备)。 选择器标题可以更长更准确，提供更多的选择。如下图Walmart和Realtor.com应用。 72 移动设计模式大观 中文精华翻译版 OS的中性设计解决方案包括一个简单的下拉列表框(如Target)及层叠菜单(如Awesome Note) 73 移动设计模式大观 中文精华翻译版 最佳实践:遵守OS设计规范使用选择器，选择一个OS中立的接口控制。清楚的显示哪个排 序选项被应用。 “完成”或"应用"). 最佳实践:在选择排序表单之前，建议采用更有效的排序或排序选择模式。 74 移动设计模式大观 中文精华翻译版 75 也可以看到前面的搜搜模式，作用域搜索，可选的预搜索技术。 TAP一起，过滤器被使用。 HeyZap使用标准的开关按钮，而谷歌应用使用垂直标签。如下图: CBS News 和 ACL Festival，使用范围过滤栏，使得用户能够分别快速的发现文章和乐 队。 移动设计模式大观 中文精华翻译版 SWXS提供了过滤按钮栏和第二排的过滤选项。新闻过滤客户端Feed使用一个简单的组合 方式过滤新闻。 76 移动设计模式大观 中文精华翻译版 最佳实践:过滤选项应当措辞清楚并且容易理解。显示显示过滤条件或使用开关关键词“ON”。 不要用过滤模式作为主导航，但是使用其分组和过滤内容。 SAMS应用更好的过滤形式是使用动态过滤而非显示过滤。 web应用中的弹窗，过滤对话框是模式化的。它需要用户选择或取消过滤器选项。以 下应用均使用过滤对话框让进行过滤条件的筛选。 77 移动设计模式大观 中文精华翻译版 78 过滤对话框可以完成工作，但是前两个模式给用户更多的自由尝试的自由和允许直接在内容 上过滤。 最佳实践:保持选项列表的简短，并避免滚动。对于较长和更多的选项考虑过滤表单形式。 /细化选项。例如Kayak及Zappo应用。 移动设计模式大观 中文精华翻译版 Freetime应用使用定制控制过滤形式，首先考虑过滤类别，然后选择过滤标准，最后在 日历上应用过滤。 79 移动设计模式大观 中文精华翻译版 80 有条件选择器，也称为谓词编辑或表达式构建，高级过滤形式出现在报告工具上。如下 面的WEB应用: 因为表单的关系，在移动设备上创建有过滤条件的应用是具有挑战性的。但下面的Roambi 应用却成功的完成了。 移动设计模式大观 中文精华翻译版 81 最佳实践:不要过度设计过滤器，一个简单的屏幕或抽屉过滤通常就够了。如果必须要过 滤表单，那么遵循表单设计最佳实践。 WEB Flicker的内联设计是个很好的例子。 保持轻量级是指保持交互尽可能简洁。WEB DIGG的早期形态是个良好的例子。 移动设计模式大观 中文精华翻译版 举个不好的例子，就是photoshop express版本。这个移动App使用老的桌面和Web的习 惯来剪切，校正，旋转和过滤图像。 82 移动设计模式大观 中文精华翻译版 下面一款应用则使用较好的交互方式 83 工具主要有下面几种布局形式。 Pan-dora应用中，工具栏选项包括 移动设计模式大观 中文精华翻译版 84 切换到列表视图，为这首歌评级，暂停或向前跳跃。A+图片效果为黑莓提供了日常操作的 工具栏。 在IOS设备上默认样式是淡蓝色的一个bar，但是更模式化. 移动设计模式大观 中文精华翻译版 一种操作系统中性化设计是使用级联菜单显示操作栏选择工具选项。许多移动应用使用这种 技术来提供编辑和格式化选项。 Evernote使用不同技术来提供富文本格式选项:一个内部可见的内嵌面板。 85 移动设计模式大观 中文精华翻译版 如图好的和不好的工具栏设计 86 最佳实践:工具栏通常显示在屏幕底部包含屏幕水平操作。选择的图标要易于识别或者使用 图标+标签形式。 移动设计模式大观 中文精华翻译版 87 Android系统菜单可由硬件菜单按钮操作，但其他的则有滑动处理或点击屏幕上的菜单按钮 完成。 移动设计模式大观 中文精华翻译版 88 最佳实践:尽可能选择直接的交互形式，不要将导航藏在选项菜单里，如果在屏幕上只有一 个操作的情形，建议使用操作按模式。 Groupon,Gilt,Expedia等已使用该模式替代传统的工具栏或者选项菜单。 移动设计模式大观 中文精华翻译版 89 此模式也适用于工作屏幕上只有一个主要和一个辅助的行为被召唤，如下图应用: 移动设计模式大观 中文精华翻译版 90 最佳实践:不要将主要的行为召唤隐藏在菜单或者放置在工具条里(难以认出)，主要及次 要行为应该有明显的对比。 Android特定 手势)将显示图表里程碑，或者WebOS的选项列表。 移动设计模式大观 中文精华翻译版 91 移动设计模式大观 中文精华翻译版 92 情景化工具可以模态化显示，就像之前的例子，或非模态化，如Daily-Burn和 twittermobile. 最佳实践:尽可能选择直接交互，如果按钮是必须的，那么与被操作对象尽量靠近，选择易 识别的ICON或者文本标签。 ACL中的添加按钮和删除转换，OpenCaching 中被开启或关闭的最喜欢的明星功能。下面的模式，多态按钮，合并两个或多个状态。 93 移动设计模式大观 中文精华翻译版 最佳实践:尽可能选择直接交互，如果按钮是必须的，应该尽可能与被操作对象靠近。选择 易识别的图标或文本标签，每个被操作对象最多有1-2个当前操作。 Android的应用市场使用此模式购买和更新应用。 94 移动设计模式大观 中文精华翻译版 95 另一种常见的多态按钮式删除或移除一个对象。虽然它打破交互的连贯性，但是它的一个优 势是在用户进行不可逆向的操作前，先请求用户确认。如下图: 移动设计模式大观 中文精华翻译版 96 最佳实践:多状态按钮比较适用于关联比较紧密的几个操作，而这些操作是要按照一定顺序 执行的。 移动设计模式大观 中文精华翻译版 97 IOS的本地客户端提供了一个批量选择照片的机制。同样的， Animoto应用提供了一个重排或删除视频剪辑的功能。 ShoppingList应用有个编辑列表的简单设计。 Path和Pules提供了一个简单的批量操作去完成诸如添加，删除，重新排序等一些列操作。 移动设计模式大观 中文精华翻译版 98 最佳实践:批量操作像删除或者重新排序最好放置在编辑模式下，提出比较明显的退出当前 模式的按钮。 WEB而继承而来。一个图表至少包含标题，轴标签和 数据。数据可能显示为一个饼图，列、面积、线,气泡,散布图,弹头、雷达、测量或混合图 表形态。根据不同图表类型，一个图例说明可能是必备的。一些基本的图表，如下图2个应 用，随时间迁移而显示不同数据。 移动设计模式大观 中文精华翻译版 一旦图表被建立，要小心那些随图表而带来的来的垃圾数据。垃圾图表是指那些图表或图形 中显示没用的元素。一些图表允许用户自定义显示内容如下图; 移动端图表主要有以下几种模式 99 移动设计模式大观 中文精华翻译版 100 101 如果你准备提供时间过滤，请为触碰区提供足够空间。下图应用中很难看到时间过滤控制， 因为他们被藏在了图表里。 移动设计模式大观 中文精华翻译版 102 推荐使用例如下图应用的底部对齐控制，因为他们容易被访问，用户操作时候，手不会遮挡 到数据。 下图应用，使用日期和时间来过滤图表显示。 移动设计模式大观 中文精华翻译版 103 过滤器可被应用到不同类型的图表，下图应用显示了应用过滤器区分显示不同类型的图表。 移动设计模式大观 中文精华翻译版 104 最佳实践:使用标准的UI过滤器模式，动态更新图表而不是使用一个应用按钮。 105 大多数金融应用程序，使用此模式的只读版本去显示比当前数据更早时间的数据内容。 移动设计模式大观 中文精华翻译版 106 最佳实践:应该确定预览窗口的只读与互动性。如果它是互动的，可触碰区要设置的足够大。 +107 移动设计模式大观 中文精华翻译版 概述应该设计的简单、简洁，图表应该设计的易读。上面例子中左边的字太小，小于移动设 备推荐字体大小。另一个是易读易总结，设计亮点部分在屏幕顶端，容易读取数据。 最佳实践:测试图表看人们是否可以回答下面三个简单的问题:主题是什么，重要信息是什 么，重要信息提供的价值是什么。 “onHover”并不纯在在移动设备中，对于一个数据点，需要一个不同的交互显示详细 信息。在此例子中，触摸图表将显示选中试图的页面详细信息。 108 移动设计模式大观 中文精华翻译版 下图两个例子中:数据点也是高亮显示在预览图表底部窗口。 109 在接近数据部分提供细节要优于使用模态对话框。例如下图的sencha touch应用: 移动设计模式大观 中文精华翻译版 110 Roambi提供了一个“详细模式”，可以利用右下的”+“图标。此模式窗口或框架下有个滚动 条滑动到特定的数据点。此设计在Roambi被称作“viewtron.” 移动设计模式大观 中文精华翻译版 111 最佳实践:考虑在用户触摸操作的实现细节，给用户提供想要的额外信息。 ”哪里输入就哪里输出“。它使得用户点击图表获取深入数据的时候更有意 义。深入数据和数据细节无法并存设计，所以要先确定哪些特征能够为用户提供最大值，然 后选择适当的模式。 如下图Adobe Flex Sales Dashboard应用，清楚的显示了获取更详细数据的页面和路径 或图表标题。在此例子中我们还保留了着色一致在整个深层数据获取过程中。根据不同OS， 一个后退按钮也是必要的。 移动设计模式大观 中文精华翻译版 最佳实践:邀请用户获取深度数据。使用面包屑导航去展示层级结构。 112 移动设计模式大观 中文精华翻译版 113 重要的是向一个拥有旋转能力的设备发出一个沉浸式试图的邀请。如下图两个应用分别向 用户发出旋转至全屏的邀请。发出邀请的前提是只有当图表显示时。 最佳实践:邀请用户旋转到全景全屏幕试图，当设备旋转到正常状态时自动恢复导航。 OLAP表，用户创建未加权的交叉表格。在WEB和桌面应用中，用户可 以通过拖拽图形改变表摘要结构。如下图: 移动设计模式大观 中文精华翻译版 114 下图的Roambi应用开发了一个简单的接口用于探索数据的展示方式，类似于数据透视表。 Y轴固定，但是可以选择维度的X轴。每个维度都有特定的可选定。 最佳实践:保持数据透视表和结果图表在同一屏幕。应用动态选择设计。 115 移动设计模式大观 中文精华翻译版 116 最佳实践:遵循波形图设计原则。让你的用户去验证设计。考虑结合微线条加深入模式，揭 示图表细节 5分钟时间和难用的界面足 够使用户抛弃这个应用而去下载另一个。下图是一个足够强大的浏览器应用。 移动设计模式大观 中文精华翻译版 117 邀请是个有用的技巧，当用户第一次打开应用或去到一个新地方，有用的提示便会显 示出来。它们帮助用户按我们预期的方式使用APP。一个简单的邀请可以把用户第一次进入 应用的沮丧心情转化为满意的使用。移动应用邀请包括: 移动设计模式大观 中文精华翻译版 118 APP来说，一个简单的对话框是一种最常见的引导设计。它也是最容易被摒弃和忽 略的。 移动设计模式大观 中文精华翻译版 119 最佳实践:保持对话框文案简短，确保有一种从应用程序中可以访问的替代方式。 ebay应用使用提示告知用户五角星意思。 移动设计模式大观 中文精华翻译版 ShoppingList的应用在其每个部分都有提示。 120 移动设计模式大观 中文精华翻译版 最佳实践:提示尽可能靠近指向对象。内容要简短，交互开始(比如当触碰屏幕)，提示要 自动消失。 GPS 应用是此模式很好的例子。旅行模式强化了移动设备简洁复制、生动的图形、简单的导航和 一个明确退出标志的特点。旅行出现在主屏上，一旦你使用旅行你可以通过滑动七个提示中 的每一个来运行它。如下图Nike应用: 121 移动设计模式大观 中文精华翻译版 122 最佳实践:旅行用于强化或突出显示应用的关键或核心功能，一般从用户目标角度出发，尽 量保持简短和视觉引导。 DEMO 视频展示也许是基于特定交互/行为的最好的引导方式，因为它展示正在运行中的应用程序。 如以下两个应用均使用视频DEMO的方式作为引导。 移动设计模式大观 中文精华翻译版 123 移动设计模式大观 中文精华翻译版 最佳实践:DEMO要从标准的工作流角度阐述如何使用应用程序关键或核心功能，一般有播 放，暂停，音量控制等功能。 最佳实践:透明化应该被谨慎的使用，而不是为了弥补糟糕的设计。当交互开始时，应去 除透明化提示(如开始触碰屏幕)。 124 移动设计模式大观 中文精华翻译版 125 最佳实践:用图片或其他视觉元素明显区分引导与其他内容，如不要使用相同颜色很大小的 文字 “+”按钮来添加在屏幕上持久展示的内容。 移动设计模式大观 中文精华翻译版 126 最佳实践:用图片或其他视觉元素明显区分邀请与其他内容，如不要使用相同颜色和大小的 文字，尽量保持简短 127 最佳实践:此模式主要用户刷新数据及内容。 反馈设计 关于反馈的可用性原则提及“提供适当的、清晰的、及时的反馈给用户，让他们知道自己的 操作结果在系统上产生什么影响”反馈的范围可以从简单的进度指示和确认信息到复杂的动 画效果。移动负反馈模式分为: 移动设计模式大观 中文精华翻译版 128 129 最佳实践:使用通俗的语言告诉用户如何解决出现的问题，能看的见的错误，在当前屏幕显 示错误信息，不要使用模式化对话框。 kik中看到的内联反馈及在Android市场看到的状态改变按钮，都是用不引人注入的 方式来提供没有打断交互流程的确认方式。如下图: 130 移动设计模式大观 中文精华翻译版 131 移动设计模式大观 中文精华翻译版 132 有时候确认信息需要突出显示，像交易结束或当信息被提交时。 移动设计模式大观 中文精华翻译版 133 最佳实践:动作操作完成后提供确认信息，但不能阻碍用户完成此操作。 bar或不同类型的组合。如下图应用: 移动设计模式大观 中文精华翻译版 Kayak使用一个进度条显示状态飞行结果。注意在IOS和Android上的不同处理形式。 对于长期漫长的过程提供一个取消按钮，如SXSW应用下载时间表。虽然阿迪达斯的应用提 供了一个关于文本大小的预先警告，但是应该提供一个取消按钮。 134 移动设计模式大观 中文精华翻译版 135 移动设计模式大观 中文精华翻译版 最佳实践:提供系统状态的反馈，如果存在长时间加载的现象，提供取消功能。 3D控制(按钮和滑动条)。 136 移动设计模式大观 中文精华翻译版 重要的是保持这种效果的正确。如下图YELP的搜索按钮看起来不像个按钮，而右图每个元 素看起来不像个标签到像按钮，甚至字段标签。 137 移动设计模式大观 中文精华翻译版 最佳实践:使用常用的视觉设计去知名可敲打的位置，但是要明智的使用3D效果，额外的 阴影和凹凸变化可减少软件可读性。 IOS页面控制，这些小点点，已被广 泛用在WEB和其他移动应用程序中。 138 另一个方式在底部或者侧面露出一点接下来要显示的东西。这两种技术鼓励用户滑动看到更 多信息。 移动设计模式大观 中文精华翻译版 一个不太常见的选择是显示滚动条。bar也可以作为一个触摸目标，快速跳转至某个确切的 点。Roambi使用几乎透明的指示条，并使用一个绿点表明当前位置，Skype使用字母滑动 条，此方式很容易在IOS应用中找到。 139 移动设计模式大观 中文精华翻译版 最佳实践:使用页面指示器或者边缘显示一点下一个元素的方式去提供一个功能可见性设计， 来显示更多的元素。避免重型滚动条。 Yahoo Finance 和Roambi. 140 移动设计模式大观 中文精华翻译版 141 最佳实践:图标易识别，可考虑引导告知用户拖拽功能是允许的。考虑使用引导，随着拖动 手柄告诉用户这个特性是可用的。 如何操作 如何操作是一种简单的解释如何使用应用程序。他们可能像Phoster和Pictory的单页，也 可能像Awesome Note的复杂的大的帮助系统。 移动设计模式大观 中文精华翻译版 最佳实践:在如何操作说明上结合使用屏幕截图，插图和文本互动。 142 移动设计模式大观 中文精华翻译版 速查表提供轻量级的方式在屏幕上介绍所有元素。 最佳实践:一个速查表代替不了好的设计，但是它可以帮助用户在使用应用时获得舒适和富 有成效的。 143 移动设计模式大观 中文精华翻译版 144 尽管其非常有效，但也不能像下面应用这样，使用12页去展现如何使用，尽量缩减到6页内。 移动设计模式大观 中文精华翻译版 145 最佳实践:向导模式应该突出应用程序的关键特性，最好从一个用户的角度为目标切入。保 持简短和视觉的冲击力。 盲目创新 新颖的设计旨在成为新的、前卫、创造和创新。但是大部分时间他们应用带来的是不好的一 面，难以理解，更难以使用。盲目创新可存在在应用程序中的任何位置，从主导航下来到个 性化控制，互动及手势控制。下图应用有很多盲目创新，但最能体现的是他们的导航。他们 创建一个自定义菜单抽泣，包括一个桌面导航。这非常可怕，它使用起来非常笨拙，更主要 的是游客和付费版本用户转化基本上是隐喻的(在桌面导航菜单的第二页)。如图: 移动设计模式大观 中文精华翻译版 下图设计很好的解决了上面应用的问题 146 移动设计模式大观 中文精华翻译版 下图的应用有着一样的创新过度的菜单，但是他们已经被另一个过度设计有HOME和联系我 们的状态栏所取代。 147 有时候一个有经验的设计团队可以为完成一个新颖的设计提供足够的技巧供其使用。 移动设计模式大观 中文精华翻译版 Gowalla’s 的菜单设计足够精美。Forecast过度模仿前者而没有理解设计上的细微差别。 右侧的CHECKIN设计的十分糟糕，视觉设计不会帮助右侧的CHECKIN区分选中或未选中， 是否有朋友签到过。 Forecast也设计了用户自定义状态栏，但是没有发光处理。 一个简单的开关工具栏将减轻这种混淆。这个设计依赖于预测建立一个可辨认的“预测”图标 指示如有朋友check in 这个地方。 148 移动设计模式大观 中文精华翻译版 149 对应用来说这种带有一个主要操作类型的自定义状态栏非常适合。如下图应用: 移动设计模式大观 中文精华翻译版 一个持久化的带有用户引导标识的添加预测按钮非常不错，特别是新用户，帮他们一次性通 过。如果没有，应该开发一个图标用户自定义状态栏。 150 移动设计模式大观 中文精华翻译版 151 最佳实践:如果你正在寻找一种方式来创新你的应用，关注你的核心功能和产品，依赖最佳 实践实现交互设计。如果你设计自定义控制，严格测试和改进它，确保它是可用的。 控件不匹配 如下图，他们提供的一个时代列表供用户选择而不是一个日期选择器。右侧的所有的标签都 看起来像按钮。 下图应用看起来应用貌似有四个婴儿追踪选项和一个日志查看按钮。 移动设计模式大观 中文精华翻译版 但在粉红色标题栏下面有一个完整的菜单选项卡。虽然看起来像ACL和360新闻应用，但是 它却充当一个可怜的主要导航功能。作者安装后，只看到四个选项，所以干脆删除之。 152 移动设计模式大观 中文精华翻译版 Weight Watcher’s 应用右上部有一个IOSSendButton,它提供了诸如发送email和发 送Facebook功能。提供一个标准工具栏将使应用程序更直观，并且可能导致更高的使用“喜 欢”和“购物清单”特征。 ABC新闻的IPAD应用。一个全球导航的新闻内容?实际上ABC新闻与环球无关。这是 一个难以阅读和浏览的旋转的球。GeoWalk应用此模式。GeoWalk有快速卡片承载全球不 同位置上。你可以探索一个特定的区域。 153 图:ACL和360News 移动设计模式大观 中文精华翻译版 154 最佳实践:隐喻，从图解和控制概念模型，可以被用来提高使用经验。使用不当会使用用程 序难以学习和使用。 Photobucker的注册表单。费尽心思的填了10个字段冒出一个你同意 创建账户的提示框。如果我不同意我干嘛填写那10个字段并按下大大的绿色按钮。 当一个物品被添加到购物车时Best Buy提供了一个白痴反馈对话框。 移动设计模式大观 中文精华翻译版 Zappos 更夸张的设计了一下完成两个目标的任务。 155 移动设计模式大观 中文精华翻译版 根本不必要用一个拿雨伞的猫来作为反馈的入口。 最佳实践:尽量不要阻碍操作流程，只有在不可修复的操作即将发生时，才提供确认对话框， 比如永久删除操作。 BrainChallenge 应用是较好的反例，从高光，阴影，标志性按钮到双梯度列，用了个遍。 下一个案例是SmartGlance，背景的红色筛子与绿色图表很难辨认。 156 QlikView的报告模块则包含了几个错误的模式，比喻不匹配，过滤图标不匹，盲目创新和 垃圾图表设计。大约一个屏幕的一半用于显示图像可能的图表形态(和他们的倒影)。其余 部分采用色彩斑斓的3D图表与字迹模糊的标签。 移动设计模式大观 中文精华翻译版 垃圾图表通常使用那些耀眼的视觉效果，使得图表过度“性感”。如下图应用，用不同颜色标 识哪些数据在正常范围内。 157 移动设计模式大观 中文精华翻译版 下图的WeatherPro有着华丽的图表，但却难以阅读。除非他们消除: 在每栏中交替渐变 eBay的Android应用遭遇过按钮的海洋，然而，他们的iPhone应用使用仪表盘模式，这是 一个很好解决此问题的方式。 158 移动设计模式大观 中文精华翻译版 159 Footfeed在下面的每一条上列出了所有的活动。1Mobile在每个列表中显示了同样的Open 按钮。上下文是处理此问题的很好的选择。 第一眼一看 Pushbi 有一个标准的操作栏，但是在仔细用，它就是一个按钮的海洋。导航 按钮的操作按钮，甚至是更多按钮，大概只用于此，现在上面。 移动设计模式大观 中文精华翻译版 160 最佳实践:使用标准的模式显示页面级别的操作。对于同级工具提供上下文操作 而不是同样的按钮。保持页面级别的操作与视觉导航元素分离。 移动设计模式大观 中文精华翻译版 |
|