交互类移动设计模式

1、1移动设计模式大观精华翻译版Neil, Theresa 著郭杉杉 译2012.8.28 V12译者序这是 Mobile Design Pattern Gallery 一书的中文精华内容翻译版。所谓中文精华内容翻译版就是指去除与交互无关的内容（如书中谈到与 web 交互的差异性）而保留书中最精华的部分。使得整本书变得简洁、专注。简洁、专注也是我追求的产品及交互设计原则。相对于 PC的大屏幕，的小尺寸屏幕使得产品设计在设计产品时候更要学会做减法。与 web 相比更像是一个 30 平的小户型与一个 180 平 的大户型房子。30 平的小房子就要学会“聚”、“藏”、“换”、“合”、“分”、“压”、“顺

2、”等装修手法，对应设计就是将各种菜单、通知、相关项收到一块，有型的控件、手势与重力感应、页面跳转与导航、输入框与挤压处理，屏幕边缘化处理等各种处理技术。，宫格与区域划分，作为一个产品经理和交互设计师，日常工作里需要不断给自己充电，保持自己跟上行业的步伐。，国内市场上能找到的相关中文书籍少之又少，部分内容也过于老旧。某日偶然间发现 Mobile Design Pattern Gallery 一书，没想到一看到目录及书籍内容的组织形式，我便像找到宝贝一样，抱着这本书每天啃一点、每天翻译一点，因为它正是我需要的。书中语言通俗易懂、案例丰富，更不乏作者理性的总结。作者将交互设计总结成十大模式并给出了正

3、反案例，使得该书不仅具有较高的可读性，更可视为日常工作的速查手册。翻译终归是力活儿，虽然在的翻译过程中使我交互设计水平迅速增长、学到了很多曾经不曾发现，但是翻译此书也花费了我不少时间。第一次翻译，水平肤浅，为了给各位尽量翻译出至少能看的懂的作品，避免贻笑大方，我寻求了很多行业内的同学一同审阅。他们了本书翻译中，为翻译出这本书做了不少贡献，特别感谢卓大师的产品经理谢。同学。在此向他们表示感感谢本书作者为大家撰写了这么一本优秀的专业。为尊重原作者的劳动，本翻译版在内容上做了适当的删减处理，译者会随时根据商及原作者需要，停止该中文翻译版在公众的免费共享。本作品采用知识共享署名-非商业性使用-演绎陆协

4、议进行。此中文版不得以各种名义用于任何商业行为，如产生相关纠纷，译者概不承认任何。最后，给出交流。也希望各位，希望各位产品经理及交互设计师能多多与我能对本书的翻译能提出您宝贵的意见。: HYPERLINK mailto:guoshsh guoshsh（新浪）：/u/2876938842 DavidGuo(郭杉杉3每当我思绪不展时，就会拿起这本书，来一次头脑风暴，思路瞬时开阔了许-多。卓大师 产品经理追求完美的没有重点，GUI 设计需要有颗不断和探索的心，关注交互的同时又要把握好视觉的表现；每每翻开这里总能找到不一样的思维启迪。-4399 UI 设计师这本书内容言简意赅，非常适合GUI 设计的速

5、查手册，强烈。-电信增值应用 产品线经理在国内的团队一直为众多的客户提供商业的价值！IT 时代发展到今天，已经是用户的个人信息终端。看过了移动设计模式大观，其中很多内容非常有营养，对的团队和客户的最终成就起到了很好的帮助。非常感谢编者，希望未来有更好的内容提供给。-葛旭东联合永道中国产品市场部总经理说：“蠢人常说他们从自己的经验中学习，我却认为利用别人的经验更加好些。”书里总结了大量移动产品的设计经验、方法以及教训，并且都有据可依。读过本书，感觉在移动互联网产品探索的道又有新的收获。站在巨人的肩膀上可以让书。看的更远。本书作为产品经理，产品设计师必备的工具-人人网LBS 产品经理曾经的败笔，是

6、对进步和创新的最好指导，在充满的职业生涯中更是如金山云 产品经理-此，以史为鉴，以此书为鉴！交互源于体验，如何让用户通过微缩的移动终端获得最轻松、最自然的体验，-这本书可以让你少走弯路！网龙无线 产品经理一款优秀的产品是通过精心简约的设计，隐藏背后复杂的技术细节，给用户提供便捷简单的使用体验。移动设计模式大观正是教如何掌握这些设计方法，创造出优秀用户体验的产品。值得一读！-91 助手产品经理，建立自己的设计模式数据库，从来都是最重要的！此书是目前移动产品 GUI 设计模式数据库最好的总结！-网龙无线91 桌面创始人该书用简洁的文字将移动设计的精髓娓娓道来，绝对是你踏足移动领域的最-佳指南经桥网

7、络科技 产品经理作为本书的目标用户之一，我认为该产品（=本书）切合需求，相见恨晚，应分享给身边需要提高交互设计水平的新老童鞋。本书译者郭杉杉，一直以来是一个注重实践和乐意的人，期待本书完整纸质版能够早日上市发售。-王鲲鹏 亿八佰 产品经理朋友们的感言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视觉指

8、示型565可编辑型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预览窗口1046预览+数据106数据点细节108深入数据111缩放处理112数据表113波形图114第七章 引导设计116框118提示信息119全局预览121DEMO122透明化设计124初次使用引导124持久性设计

9、125易发现设计126第八章 反馈及可见性127反馈设计127错误提示128确认信息129系统状态131功能可见性136可触摸设计136可滑动设计138可拖拽设计140第九章 帮助设计141如何操作141速查表142向导模式143第十章设计反例145盲目创新1457隐喻控件不匹配151控件不匹配151图标不匹配153心智模型不匹配153提示框不匹配154图表156过多的按钮1588主导航桌面式酷似操作系统或启动控制面板，其特色是有一个按钮组成的主页转至其它子系统第一章导航设计9桌面式布局也用于可显示带有个性化桌面按钮配置信息的页面，通常桌面布局是可以随个性化定制而改变的。10通常按钮以3*3，

10、2*3,2*2和1*2形式排布于桌面。但也不是必须遵守等长宽布局，有些时候一个按钮可能是其它按钮的几倍。11最佳实践：菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给用户提供个性化和定制化功能列表式列表菜单导航与桌面导航类似，也是每个列表项指向相应的应用。列表菜单导航有许多衍生形态，包括个性化菜单列表，分组菜单列表和增强型菜单列表。增强型菜单列表是指简单列表附带有额外的搜索、浏览及过滤功能。121314最佳实践：列表菜单导航适合长标题或者有副标题说明，使用类表菜单导航应该提供一个从子页面返回类表页面的方式，通常

11、在标题栏添加一个一个带有菜单字样的按钮作为返回按钮。通常按钮以3*3，2*3,2*2和1*2形式排布于桌面。但也不是必须遵守等长宽布局，有些时候一个按钮可能是其它按钮的几倍。15最佳实践：菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给用户提供个性化和定制化功能选项卡式每种操作系统在导航的位置和设计上都有自己的标准。当选择此模式作为主导航，请为不同系统实现定制化导航位置设计。16底部选项卡深受IOS，黑莓，we喜爱。17在星巴克和蓝色移动APP的水平及卷动选项按钮，用户不需要打开的选项页面就可以得到18安卓，塞

12、班和Win系统喜欢顶部Tab导航，他们看起来更像传统导航。1920最佳实践：使用选项卡导航要注意视觉上对已选择和未选择的选项进行有效区分图库式图库式表面被分为各个内容区用于导航。内容区通常载有单独的文章，标题，其他能够放置在内容区，网格或幻灯片展示里的内容。，产品和21有时候如果内容区是以分组形势布局，分组的内容应该容易被用户浏览到。使用侧Tab形势去管理分组内容，让用户能够在Tab中切换，查看不同分组。22最佳实践：图库式适用于用户想要浏览的经常更新的内容汇集展示了一些关键指标。进入每一种度量方式都可以了解额外信息。这种主导航模式常用于金融应用程序、分析工具、销售和应用程序。式23最佳实践：

13、不需要载过多内容，而需要载入一些被研究确认过的关键数据隐喻式这种模式的特点是用一个页面来反应整个应用程序。这种模式常用于们分类物品（如各类笔记，书籍，酒品）等应用中看到。，也能够在帮助人2425最佳实践：使用隐喻式要慎重，如果一个执行起来不明确的隐喻反而会起到不好的反作用。26菜单式移动应用菜单式导航与网页上菜单导航极为相似we使用流式菜单导航，避免跳转到额外的桌面式导航中。在Android版本的版的沃尔玛应用中也使用同样布局。27最佳实践：在选择导航模式前，请先明确你的信息架构，根据信息架构选择需要的导航模式。二级导航二级导航用于在页面及模块中进行导航，如以下两个应用分别使用了主导航和二级导

14、航28任何主导航都可以用于二级导航，如常见的带有二级Tab的Tab导航，带有二级Tab的列表导航，带有Tab的，桌面和图库导航。29有一些专门适合二级而不是主导航的导航模式。如页面旋转式，旋转式和当前页展开式页面旋转式此模式可用于使用左右滑动手势在页面间快速导航。页面指示器（IOS系统下面的小点）显示一共有多少页可供旋转；用户滑动时将显示下一个页面。30页面旋转导航应用有一定的局限性，当页面超过8个时，请考虑使用列表导航。31最佳实践：页面旋转适用页面数量较少的情况，使用指示器反应页面数量和当前页面，左右滑动手势是最常见的旋转导航手势。旋转式常见形态是类似iTunes展示的那种2D旋转木马形式

15、。如下面两个应用使用了图片旋转木马式二级导航。旋转式32菜谱是另一种旋转木马形式，以不同的烹饪法分组显示在不同的列中。33可滑动的“n”形Tab导航是一种结合Tab模式与旋转木马模式优点的好例子。使用木马导航作为背景，使用“框架”进行选择，使用剪贴薄的展示样式。如下图：最佳实践：旋转木马式最适合展示新的视觉内容，例如文章、产品和。注意要提供视觉的可预见性，要么左右留有箭头，要么有部分漏出来，要么有页面指示“.”能够显示的内容当前页面展开式当前页面展开式允许在一屏下展示更所信息。Android 2.3中Call log更好的展示了这一布局。同一号码被聚合在一行展示，点击图标会显示每个的单独状态。

16、34这种模式更常用语在移动设备上对原来Ex-panding列表代替层叠列表的优化显示。如下图的应用，35最佳实践：扩展类表模式特别适合逐步显示细节或者某一对象的信息。由于移动设备更小的屏幕和更具有限制性的输入设备，使得无法像WEB那样设计表单。移动设备上常用表单形态如下：登陆表单登陆表单至少应有用户名及的输入框，登陆按钮，找回及选择几项组成。有些应用程序在一屏上展示全部内容。如下图应用：第二章 表单设计36其他一些应用则分屏显示登陆或号码登陆的方式。，然后把用户引导到相应表单。一些应用也提供使用第37另一种做法是放弃用户名字段，只需要一个金融类应用中大受欢迎。如图只要输入一个。用户只需要输入即

17、可：来敏感数据，在最佳实践：不要在登陆屏幕上做太多创新。通常登陆表单要做的足够容易让用户完成登陆，要留有找回功能，以便用户找回。与登陆相似应该有个很小的输入框。建立一个容易的辅助说明，使用纵向，避免横向，页面如下图：表单38适时提供控件及时反馈，如KIK的用户名和可用检测39最佳实践：保持简短，一屏内显示，去掉邮件和确认，使用纵向，实时反馈有效性确认表单移动设备确认表单设计原则：在确认表单使用设备标准控制；考虑多屏使用一个控制表单；提供一种机制为未来更快速的确认，例如借记卡信息或登陆结账；显示一个安全的锁头标志来表示一个安全的连接；checkout向导模式可能不是一个最快速有效的设计。如：40

18、最佳实践：侧重速度，效率和安全，减少不必要的字段，将页面和步骤最小化。计算表单计算器样式布局，如体重，计算器和计算器。尽管这些表单可自定义控件布局，但一些设计原则仍需要遵循41对齐，读，字体，按钮位置，对比和颜色这些能够影响移动表单可用性的元素。例如：易及字段对齐的计算器程序。好的计算截面应该输入输出对齐整洁并带有计算结果的视觉展示，如下图的计算器程序42最佳实践：对齐，字体，按钮摆放，对比，颜色，都会影响到表单可读性，尽可能在同一页面展示可视化效果。搜索表单一些搜索需要输入多行，或者选择一些搜索条件去产生结果。像其他模式，搜索条件应该限定有最基本的字段并提供合理的默认值。例如 Kayaks航

19、班,使用定制化表单布局保持所有的搜索条件，搜索按钮在列表折叠中。OpenTable应用则会默认显示你目前的位置，日期，和时间段，去搜索你能够预定的饭店。43以下两个应用在完整搜索运行前就已经实现了显示“活的”预览输出。44以下两个应用中相比于右边的布局，左边的截面更容易操作且不显得那么拥挤。最佳实践：搜索字段不要太多，一个页面一个搜索维度或字段，空间布局合适，操作快捷方便。多步操作表单由于屏幕大小限制，移动设备不能够显示在WEB上常用的臃肿型的多步操作表单。在移动设备上的一个简单的解决方式是显示当前步骤和总步骤数。如下图应用：45的内容可能需要更长的流程，例如下面星巴克应用，带有上下导航按钮，

20、但是这种做法破坏了让用户知道我能去哪里及我去过哪里的设计原则。清楚的导航在移动设备交互设计中对用户更为重要，因为在移动设备中用户更容易被打断和分心。46好的设计应该像“TurboTax SnapTax”，步骤和提交按钮出现在单一界面。每一步可以继续深入和完成。单页提供了更有价值的导航模式（在提交前它也是一个简明的预览摘要三步要处理，两步）。同时，Square应用在标题行使用一个程式化的进度条，提供一个可视化步骤和数量及当前步骤的指示器。47最佳实践：显示用户去过哪，还可以去哪，减少不必要的字段，将页面和步骤最小化。长表单一些表单需要滚动显示，最棘手时长表单放哪以及命令和了的按钮。Zap中。和S

21、kype，都使用了模式化的表单在他们的IOS应用中，按钮被防止在Titar48这样做不符合其他OS的规范，把底部按钮放置在其他位置。49遵循表单设计最佳实践，以及特定系统为按钮，对齐的指导原则。以下两个应用设计的不太理想最佳实践：不要为了减少滚单，遵循各OS设计规范。械的将表单划分成几步。必要为了没有必要的字段去编辑表Web中通常于在表格中塞满各种数据，使其具有充实的行列。但是，在移动设备设计中需要重新评估，显示重要的数据。如下图：Web及形式：第三章 表格与列表50可以在移动设备上提供一个带动态搜索的无表头列表试图，以便用户能够快速搜索到特定学生信息，如下图：常用表格类型如下图51普通型一般

22、是网格布局并带有标准列和标题，同时有不同颜色的分割线区分个行列（或更精细的分割线）使得表格更易读。如下图：52最佳实践：避免使用黑色网格线以及将表格垂直划分的形式，文字左对齐，数字右对齐，如果一屏信息太多时，可考虑使用其他模式。无表头型无表头表格布局的特点是不使用列，但是使用行显示一个对象的丰富变量。通常使用较大的文字显示行标识符，而使用较小的文字显示每行细节内容。如下图的用。应此模式的理想状态是显示数据项集合和搜素结果。想一个列表，此模式用来快速的扫视和选择。最佳实践：表中每一行最多显示三小行信息，信息内容要有主次之分，对于主次，不要猜测，可由用户调研后得出结果确定设计固定列型对于大的表格，

23、固定列模式表格可能是一个很好的解决方案。如下图两个应用，左边列固定形式53最佳实践：当列被固定后，要提供视觉引导，提示用户滑动后可以看到内容。综述+数据型综述+数据模式是指在单个行上面显示一些总结综述性信息。在移动设备上，如银行应用在详细数据上面显示一个大的综述信息，而在可以滚动下面细节而不会错过上面的综述信息。上面是综述内容，用户54如下图左侧的大饼图难以辨认，右侧的设计却很不错。最佳实践：综述位于数据之上，比较醒目，容易理解。55分组型行分组可以使表格的数据更容易理解。行分组可以充当小节或分段的标题摘要，如下图应用最佳实践：在视觉上区分总分关系层叠型原因很明显，在移动设备上，一个树形表格会

24、非常繁琐臃肿，级联层叠表格可提供相同的层次结构。如下图的WineSpecor应用各国的选择：56IOS系统使用这个表试图，一个被称作“单列多行的当前数据”的UI元素。Drox在其二级带有Tab导航使用此方式.如下图：视觉指示型微线图和图标可以增强一个表的视觉展示，使其在特定元素中更淋漓尽致的表现。如饮食的应用app,使用红绿箭头表示卡路里摄入量是高于或低于我一天消耗的。Roambi则使用微线图表示每月销售数字，趋势及状况。如下图：57最佳实践：选择的图标要一眼容易辨认出来，避免使用无意义的图标。可编辑型可编辑型应用几乎完全是电子表格，如quickoffice应用。许多相同的用于WEB的设计指导

25、方针仍可用于移动设备设计清晰的表明被选择的行或列如果表格使用特定的格式，提供适当的编辑器（选择器，颜色选择，数据选择等）在保存状态时提供反馈和错误信息，而不是在更改状态中58与现有的WEB应用不同，移动设备表格数据录入，不支持现有的键盘录入，而是被广泛的移动设备键盘所支持。最佳实践：不太适用于大规模的数据录入和编辑。搜索模式触发搜索触发搜索依赖一个明确的行动来执行搜索和查看结果。这可能会使用屏幕上的一个搜索按钮。如沃尔玛应用或使用键盘的索模式和自动完成模式。如下图：应用。这些结果通常显示在搜索栏下面，考虑配对显示搜第四章 搜索与排序59最佳实践：搜索框比较醒目，提供取消搜索操作，当搜索正在执行

26、时，给用户提供反馈信息。60自动完成在WEB和移动端最广泛的搜索模式是自动完成的。只要在输入框输入内容搜索立即会被执行，结果当即显示，或者继续敲击打字并点击搜索按钮，完成搜索并显示结果。理想情况下，结果被立即显示出来，但是有个进度条指示器，用以系统反馈。如下图应用，一个指示器显示搜索字段，下面显示最终的搜素结果。61TripAdvisor应用提供了一个有大众目的地，酒店，餐馆为目标的增强的自动完成、分组结果的功能。62最佳实践：如果在显示搜索结果时有延迟，要给用户提供反馈，在搜索结果中，对于匹配的结果可以重点突出。动态搜索这种模式也被成为动态过滤。输入文本数据将会动态过滤数据显示在屏幕上。下面

27、的黑莓及We中都输入过滤文本，显示列表项。63最佳实践：适用于有限的数据集，如用。，如果数据集比较大，可能不太合适使搜索范围有时候在执行标准搜索前，范围搜索很容易和更快的获得期望的结果范围。如下图的和Photobucket使用不同的设计，但是达到相同的效果。64AllRecipes应用在提交搜索前允许选择（过滤搜索）标准。Dr有，但也可以按下搜索按钮前切换到文件或文件夹。ox默认初始范围为所65最佳实践：基于数据集提供合理的搜索条件，提供3-6个选项足够，可以考虑表单式的高级搜索。保存和最近搜索“尊重用户的劳动”是成功界面设计的最基本原则。保存和最近搜索使得搜索条件容易。eBay和其他应用使用

28、此方式提高用从先前的搜索中选择，而不用再次输入相同的户搜索的效率。66其他基于尊重用户劳动的搜索包括基于地理位置的搜索选择项，如图其他尊重用户尝试的搜索选项包括基于地理位置的搜索，如Trulia,条形码搜索，如亚马逊67应用。最佳实践：保存搜索需要额外的步骤去命名搜索参考值，尊重用户的劳动，让用户少操作。搜索表单这种模式的特点是一个单独的表单输入多个条件和一个明显的搜索按钮。Kayak 和Whole Foods使用搜索表单来搜索航班和酒店。68最佳实践：最少的数字输入。实现操作系统相关的输入正确控制检查。遵循表单设计原则（对齐、大小）。搜索结果一旦搜索执行时，结果会被显示在同一个屏幕或者单独一

29、个屏幕显示结果。结果会被显示在表或列表，缩略图，地图也会被使用。图等上面。根据不同结果和用户使用首选项，多视图显示69延迟加载是常用的技术，这样一些结果会被显示，一些结果会被延迟加载。如下图 EbayMotors 和 BestBuy。70许多应用提供一个按钮来显示查看或在屏幕滑动时候自动加载结果。如下图：避免分页，他们违背在移动设备上的自然交互模式。最佳实践：显示搜索结果数量。使用加载的方式代替翻页，选择一个合理的搜索结果默认排序。排序模式重要的是选择合理的排序显示搜索结果。用户验证加上产品设计经验是显示默认排序的最佳方法。如果应用提供额外的排序功能，请选择下面的排序页面模式。71直接排序数排

30、序选项，屏幕上的排序可以提供一个简单的“单一TAP”解决方案。排序选项放在顶部或底部取决于页面其他元素。如应用提供了四种排序选项与三个排序切换按钮。对于价格排序选项，他们提供了两个选择；按价格升序或降序排序。72最佳实践：清楚的显示那些选项被选中或者处于开启状态。，如果选项不合适放置的话，考虑使用按排序顺序的选择模式在目标按钮条上排序选择器选择器模式是一种好的选择屏幕上的排序。在设计中有许多的UI组件可供选择，但是考虑到不同OS的设计指南（如菜单是常见的Android的应用程序，选择器更适合IOS设备）。选择器标题可以更长更准确，提供的选择。如下图和应用。73OS的中性设计解决方案包括一个简单

31、的下拉列表框(如Note）)及层叠菜单（如Awesome74最佳实践：遵守OS设计规范使用选择器，选择一个OS中立的接口控制。清楚的显示哪个排序选项被应用。排序表单一些应用程序将排序和过滤选项合并到一个屏幕上，代表性的成为完善。这个是最有效的排序模式，需要用户打开表单，选择一个选项，然后应用选择（点击“完成”或应用）.最佳实践：在选择排序表单之前，建议采用更有效的排序或排序选择模式。过滤模式大量的数据可能需要额外的过滤，也成为精滤。过滤依赖用户根据搜索结果或设置的大的对象而重新设置选择标准。75也可以看到前面的搜搜模式，作用域搜索，可选的预搜索技术。直接过滤类似于直接搜索，直接过滤显示结果或列

32、表数据。与一个TAP一起，过滤器被使用。HeyZap使用标准的开关按钮，而谷歌应用使用垂直。如下图：CBS News 和 ACL Festival，使用范围过滤栏，使得用户能够分别快速的发现文章和乐队。76SWXS提供了过滤按钮栏和第二排的过滤选项。过滤客户端Feed使用一个简单的组合方式过滤。77“ON”。最佳实践：过滤选项应当措辞清楚并且容易理解。显示显示过滤条件或使用开关不要用过滤模式作为主导航，但是使用其分组和过滤内容。过滤抽屉几乎跟直接过滤一样有效，抽屉过滤也可以用以过滤选项。滑动或点击打开抽屉。如下述两个应用均使用抽屉过滤。对于SAMS应用更好的过滤形式是使用动态过滤而非显示过滤。

33、过滤框像web应用中的弹窗，过滤框是模式化的。它需要用户选择或取消过滤器选项。以下应用均使用过滤框让进行过滤条件的筛选。78过滤上过滤。框可以完成工作，但是前两个模式给用户的尝试的和允许直接在内容最佳实践：保持选项列表的简短，并避免滚动。对于较长和的选项考虑过滤表单形式。过滤表单对于大型数据集更使用与高级的过滤器/细化选项。例如Kayak及Zappo应用。79Freetime应用使用定制控制过滤形式，首先考虑过滤类别，然后选择过滤标准，最后在日历上应用过滤。80有条件选择器，也称为谓词编辑或表达式构建，高级过滤形式出现在面的WEB应用：工具上。如下因为表单的关系，在移动设备上创建有过滤条件的应

34、用是具有性的。但下面的Roambi应用却成功的完成了。81最佳实践：不要过度设计过滤器，一个简单的屏幕或抽屉过滤通常就够了。如果必须要过滤表单，那么遵循表单设计最佳实践。两个原则，保持直接和轻量级，能够帮助在移动设备中设计工具。哪里有输入哪里就有输出是保持直接化的一个特点。接口应该直接回复用户的交互。WEBFlicker的内联设计是个很好的例子。保持轻量级是指保持交互尽可能简洁。WEB DIGG的早期形态是个良好的例子。第五章 工具82举个不好的例子，就是photoshop express版本。这个移动App使用老的桌面和Web的习惯来剪切，校正，旋转和过滤图像。83下面一款应用则使用较好的交

35、互方式工具主要有下面几种布局形式。也成为操作栏包含工具屏幕水平功能。在下面的 Pan-dora应用中，选项包括84切换到列表视图，为这首歌，暂停或向前跳跃。A+。效果为黑莓提供了日常操作的在IOS设备上默认样式是淡蓝色的一个bar，但是更模式化.85一种操作系统中性化设计是使用级联菜单显示操作栏选择工具选项。许多移动应用使用这种技术来提供编辑和格式化选项。Evernote使用不同技术来提供富文本格式选项：一个可见的内嵌面板。86如图好的和不好的设计最佳实践：通常显示在屏幕底部包含屏幕水平操作。选择的图标要易于识别或者使用图标+形式。87选项菜单选项菜单，像，可包含屏幕层面的操作，但是可由不同的

36、方式显示和。Android系统菜单可由硬件菜单完成。作，但其他的则有滑动处理或点击屏幕上的菜单按钮88最佳实践：尽可能选择直接的交互形式，不要将导航藏在选项菜单里，如果在屏幕上只有一个操作的情形，建议使用操作按模式。操作按钮当在屏幕上只有一个主要的行为召唤时，调用操作按钮可能是一个比选择。如Groupon,Gilt,Expedia等已使用该模式替代传统的或者菜单更好的或者选项菜单。89此模式也适用于工作屏幕上只有一个主要和一个辅助的行为被召唤，如下图应用：90最佳实践：不要将主要的行为召唤隐藏在菜单或者放置在工具条里（难以认出），主要及次要行为应该有明显的对比。情景工具情景工具可用来工作在一个

37、特定对象屏幕上。例如，长时间按一个对象（一个Android特定手势）将显示图表里程碑，或者We的选项列表。9192情景化工具可以模态化显示，就像之前的例子，或非模态化，如Daily-Burn和mobile.最佳实践：尽可能选择直接交互，如果按钮是必须的，那么与作对象尽量靠近，选择易识别的ICON或者文本。内联操作内联操作模式工作显示在一个特定对象上，但是与前面的模式不同，此模式操作总是一直的。例如下面应用：93许多应用程序依赖有状态的内联按钮，例如ACL中的添加按钮和删除转换，OpenCaching中被开启或关闭的最喜欢的功能。下面的模式，多态按钮，合并两个或多个状态。94最佳实践：尽可能选择

38、直接交互，如果按钮是必须的，应该尽可能与作对象靠近。选择，每个作对象最多有1-2个当前操作。易识别的图标或文本多态按钮通常，用户界面应该有一个单一的目的。但是，多状态按钮是一个例外。在有限的屏幕空间内，它是一个按钮及扮演触发又扮演反馈机制。如下图应用，首先，你看到应用内联按钮一个故事，再次按下。然后它变成、取消或故事的进度指示器。苹果的应用商店和Android的应用市场使用此模式和更新应用。95另一种常见的多态按钮式删除或移除一个对象。虽然它打破交互的连贯性，但是它的一个优势是在用户进行不可逆向的操作前，先请求用户确认。如下图：96最佳实践：多状态按钮比较适用于关联比较紧密的几个操作，而这些操

39、作是要按照一定顺序执行的。97批量操作常见的批量操作包括选择、添加、删除及重新排序。提供一个简洁批量操作模式取代会造成屏幕的单个操作模式。IOS的本地客户端提供了一个批量选择的机制。同样的，Animoto应用提供了一个重排或删除剪辑的功能。ShopList应用有个编辑列表的简单设计。Path和Pules提供了一个简单的批量操作去完成诸如添加，删除，重新排序等一些列操作。98最佳实践：批量操作像删除或者重新排序最好放置在编辑模式下，提出比较明显的退出当前模式的按钮。移动图表设计指导原则可由桌面及WEB而继承而来。一个图表至少包含标题，轴和数据。数据可能显示为一个饼图，列、面积、线,气泡,散布图,

40、弹头、测量或混合图表形态。根据不同图表类型，一个图例说明可能是必备的。一些基本的图表，如下图2个应用，随时间迁移而显示不同数据。第六章 图表设计99一旦图表被建立，要那些随图表而带来的来的数据。图表是指那些图表或图形中显示没用的元素。一些图表允许用户自定义显示内容如下图；移动端图表主要有以下几种模式100带过滤的图表一个基本的图表可行分析。时间控制或其它过滤功能。下图两个应用数据可从不同的时间帧中进101如果你准备提供时间过滤，请为触碰区提供足够空间。下图应用中很难看到时间过滤控制，因为他们被藏在了图表里。102使用例如下图应用的底部对齐控制，因为他们容易被到数据。，用户操作时候，手不会遮挡下

41、图应用，使用日期和时间来过滤图表显示。103过滤器可被应用到不同类型的图表，下图应用显示了应用过滤器区分显示不同类型的图表。104最佳实践：使用标准的UI过滤器模式，动态更新图表而不是使用一个应用按钮。预览窗口此模式用于传递改变因数据超时，提供滑动内容及历史性信息，在移动设备上更恰当，不用此模式不需要用户进行滑动操作，在移动设备上及时传递展示因数据超时而无法显示的更更多内容及历史性数据。如下图应用：105大多数金融应用程序，使用此模式的只读版本去显示比当前数据更早时间的数据内容。106最佳实践：应该确定预览窗口的只读与互动性。如果它是互动的，可触碰区要设置的足够大。预览+数据此模式在第三章提到

42、过，但是此章特别提及的是数据图表。下面的例子都是用图表去总结最重要的信息，使用数据表去展示数据细节。107108概述应该设计的简单、简洁，图表应该设计的易读。上面例子中左边的字太小，小于移动设备字体大小。另一个是易读易总结，设计亮点部分在屏幕顶端，容易数据。最佳实践：测试图表看人们是否可以回答下面三个简单么，重要信息提供的价值是什么。：是什么，重要信息是什数据点细节因为“onHover”并不纯在在移动设备中，对于一个数据点，需要一个不同的交互显示详细信息。在此例子中，触摸图表将显示选中试图的页面详细信息。109下图两个例子中：数据点也是显示在预览图表底部窗口。在接近数据部分提供细节要优于使用模

43、态框。例如下图的sencha touch应用：110Roambi提供了一个“详细模式”，可以利用右下的”+“图标。此模式窗口或框架下有个滚动条滑动到特定的数据点。此设计在Roambi被称作“viewtron.”111最佳实践：考虑在用户触摸操作的实现细节，给用户提供想要的额外信息。深入数据可用性测试的格言”哪里输入就哪里输出“。它使得用户点击图表获取深入数据的时候更有意义。深入数据和数据细节无法并存设计，所以要先确定哪些特征能够为用户提供最大值，然后选择适当的模式。如下图Adobe Flex Sales Dashboard应用，清楚的显示了获取更详细数据的页面和路径一致在整个数据获取过程中。根

44、据不同OS，或图表标题。在此例子中还保留了一个后退按钮也是必要的。112最佳实践：邀请用户获取深度数据。使用面包屑导航去展示层级结构。缩放处理在屏幕上的图表可能只有众多元素中的一个元素，屏幕大小的限制使得图表易读性下降。通常的做法是邀请用户旋转他们机，以获得全屏预览试图。标题和导航尽可能隐藏，以给图表的显示空间。旋转设备返回导航和其他控制。113重要的是向一个拥有旋转能力的设备发出一个沉浸式试图的邀请。如下图两个应用分别向用户发出旋转至全屏的邀请。发出邀请的前提是只有当图表显示时。最佳实践：邀请用户旋转到全景全屏幕试图，当设备旋转到正常状态时自动恢复导航。数据表，也成为OLAP表，用户创建未的

45、交叉表格。在WEB和桌面应用中，用户可以通过拖拽图形改变表摘。如下图：数据表114下图的Roambi应用开发了一个简单的接口用于探索数据的展示方式，类似于数据Y轴固定，但是可以选择维度的X轴。每个维度都有特定的可选定。表。最佳实践：保持数据表和结果图表在同一屏幕。应用动态选择设计。波形图波形图也微线图（迷你图）。以体积小和高度数据密集而著名的信息图表。适于显示带有一些测量的目前的趋势和变化情况，例如使用一种简单的凝聚的方式显示温度变化和变化情况。市场115波形图（微线图）适用于是因为他们提供形状或状态数据的图形化预览，但是不需要为显示完整的图表给予额外的空间。116最佳实践：遵循波形图设计原则

46、。让你的用户去验证设计。考虑结合微线条加深入模式，揭示图表细节，。5分钟时间和难用的界面足市场上许多免费应用导致够使用户抛弃这个应用而去和免费的被同等另一个。下图是一个足够强大的浏览器应用。第七章 引导设计117邀请是个有用的技巧，当用户第一次打开应用或去到一个新地方，有用的提示便会显示出来。它们帮助用户按预期的方式使用APP。一个简单的邀请可以把用户第一次进入应用的沮丧心情转化为满意的使用。移动应用邀请包括：118对于移动APP来说，一个简单的略的。框是一种最常见的引导设计。它也是最容易被摒弃和忽框119最佳实践：保持框文案简短，确保有一种从应用程序中可以的替代方式。提示信息提示可以在屏幕任

47、何地方实现，比框更符合上下文相关。提示可以用于任何屏幕，不仅是主屏。如下图ebay应用使用提示告知用户五角星意思。120ShopList的应用在其每个部分都有提示。121最佳实践：提示尽可能靠近指象。内容要简短，交互开始（比如当触碰屏幕），提示要自动。全局预览全局预览通过应用程序逐屏逐功能的最终邀请，完成应用程序最终的探索。耐克的GPS应用是此模式很好的例子。旅行模式强化了移动设备简洁、生动的图形、简单的导航和一个明确退出标志的特点。旅行出现在主屏上，一旦你使用旅行你可以通过滑动七个提示中的每一个来运行它。如下图Nike应用：122最佳实践：旅行用于强化或突出显示应用的关键或量保持简短和视觉引

48、导。功能，一般从用户目标角度出发，尽展示也许是基于特定交互/行为的最好的引导方式，因为它展示正在运行中的应用程序。如以下两个应用均使用DEMO的方式作为引导。DEMO123124最佳实践：DEMO要从标准的工作流角度阐述如何使用应用程序关键或放，暂停，音量控制等功能。功能，一般有播透明化设计透明化是独一无二的应用在触摸屏设备上的引导方式（目前为止）。一般放置主屏幕上，一个带有提示的透明层蒙住下面主屏幕内容。下面两个应用使用透明引导模式：最佳实践：透明化应该被谨慎的使用，而不是为了弥补糟糕的设计。当交互开始时，应去除透明化提示（如开始触碰屏幕）。初次使用引导不像其他的引导，初次使用引导不需要在屏

49、幕上提及引导。初次使用引导被在屏幕设计里。它们被设计在界面里，直到其他交互被执行或被其他内容覆盖，否则一直出现在那。许多笔记类应用，都使用初次使用引导去吸户添加内容。125最佳实践：用文字或其他视觉元素明显区分引导与其他内容，如不要使用相同颜色很大小的持久性设计持久性提示构建于屏幕使得其他元素可见。无论你是第一次还是第十次，它依然在屏幕上显示。下图应用通过用户点击“+”按钮来添加在屏幕上持久展示的内容。126最佳实践：用或其他视觉元素明显区分邀请与其他内容，如不要使用相同颜色和大小的文字，尽量保持简短易发现设计一个易发现的引导看起来像个，但是它是一个不会扰乱屏幕，鼓励特定交互的有效方法。当被要

50、求执行一些常见的动作（如滑动，短按）这些引导会被执行。127最佳实践：此模式主要用户刷新数据及内容。反馈设计关于反馈的可用性原则提及“提供适当的、清晰的、及时的反馈给用户，让他们知道自己的操作结果在系统上产生什么影响”反馈的范围可以从简单的进度指示和确认信息到复杂的动画效果。移动负反馈模式分为：第八章 反馈及可见性128错误提示错误提示应该表示在普通语言（没有代码），精准的表示问题，并建设性的提出解决方案。在屏幕上错误消息，适时使用框，因为框可以遮盖住问题。如下图应用：129最佳实践：使用通俗的语言告诉用户如何解决出现，能看的见的错误，在当前屏幕显示错误信息，不要使用模式化框。确认信息当交互动

51、作发生后必须给一个确认信息。需要做到既提供用户确认信息，又不会打扰用户正常的交互流。例如下面应用使用动画显示物品被添加到列表，点添加按钮物品被落到底部栏上。130在kik中看到的内联反馈及在Android市场看到的状态改变按钮，都是用不引人注入的方式来提供没有打断交互流程的确认方式。如下图：131132有时候确认信息需要突出显示，像交易结束或当信息被提交时。133最佳实践：动作操作完成后提供确认信息，但不能阻碍用户完成此操作。系统状态及时反馈增加了用户与应用程序的交互信心。系统状态可被描述成一个带有简单信息，动画指导，加载bar或不同类型的组合。如下图应用：134Kayak使用一个进度条显示状

52、态飞行结果。注意在IOS和Android上的不同处理形式。对于长期漫长的过程提供一个取消按钮，如SXSW应用时间表。虽然阿迪达斯的应用提供了一个关于文本大小的预先警告，但是应该提供一个取消按钮。135136最佳实践：提供系统状态的反馈，如果存在长时间加载的现象，提供取消功能。功能可见性设计功能可见性是指允许执行个人动作的对象。像打开抽泣或者关上一扇门。在例子包括拖动处理，3D控制（按钮和滑动条）。上通常的可触摸设计视觉设计元素像斜边和阴影可以使元素出现按动效果。如下图应用均使用这种效果：137重要的是保持这种效果的正确。如下图YELP的搜索按钮看起来不像个按钮，而右图每个元素看起来不像个到像按

53、钮，甚至字段。138最佳实践：使用常用的视觉设计去知名可敲打的位置，但是要明智的使用3D效果，额外的阴影和凹凸变化可减少可读性。可滑动设计很多方法可以提供功能可见性还有的东西要去看。IOS页面控制，这些小点点，已被广泛用在WEB和其他移动应用程序中。另一个方式在底部或者侧面露出一点接下来要显示的东西。这两种技术鼓励用户滑动看到更多信息。139一个不太常见的选择是显示滚动条。bar也可以作为一个触摸目标，快速跳转至某个确切的点。Roambi使用几乎透明的指示条，并使用一个绿点表明当前位置，Skype使用字母滑动条，此方式很容易在IOS应用中找到。140最佳实践：使用页面指示器或者边缘显示一点下一

54、个元素的方式去提供一个功能可见性设计，来显示的元素。避免重型滚动条。可拖拽设计拖拽是指一个元素可移动，从新排序，从新放置位置。如Yahoo Finance 和Roambi.141最佳实践：图标易识别，可考虑引导告知用户拖拽功能是允许的。考虑使用引导，随着拖动手柄告诉用户这个特性是可用的。移动应用程序应该快速学习和很容易掌握。但是，无论应用程序有多么直观，应该提供某种形式的帮助。如何操作如何操作是一种简单的解释如何使用应用程序。他们可能像Phoster和Pictory的单页，也可能像Awesome Note的复杂的大的帮助系统。第九章 帮助设计142最佳实践：在如何操作说明上结合使用屏幕截图，插

55、图和文本互动。速查表143速查表提供轻量级的方式在屏幕上介绍所有元素。最佳实践：一个速查表代替不了好的设计，但是它可以帮助用户在使用应用时获得舒适和富有成效的。向导模式旅行模式可能是应用程序中最好的提供帮助的方式。它可以在第一次使用以及未来任何时间内使用中被应用程序提供。144尽管其非常有效，但也不能像下面应用这样，使用12页去展现如何使用，尽量缩减到6页内。145最佳实践：向导模式应该突出应用程序的关键特性，最好从一个用户的角度为目标切入。保持简短和视觉的冲击力。盲目创新新颖的设计旨在成为新的、前卫、创造和创新。但是大部分时间他们应用带来的是不好的一面，难以理解，更难以使用。盲目创新可存在在应用程序中的任何位置，从主