移动应用UI设计模式

作为工具书，读完后强烈推荐移动产品设计入门的童鞋们备一本放在案头，有空多翻翻。很多以前在其他产品看到的好的设计都在这本书中找到了定义，不仅如此，还从中得到了很多启发，而这些只是这本书第一次读过后的收获。另外，作为一本设计书，强烈建议有兴趣的去买彩印（有黑白彩印两种）。

1、导航

1.1 主要导航模式：跳板式、列表菜单式、选项卡菜单式、陈列馆式、仪表式、隐喻式、超级菜单式

跳板式：为同等重要的内容项使用网格布局，为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

列表菜单：很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项用来返回菜单列表。

列表菜单和跳板式导航的共同点在于，每个菜单项都是进入应用各项功能的入口点。

选项卡：不同操作系统有不同规则，定义选项卡位置时需要考虑到不同的操作系统。

陈列馆式：通过在平面上显示各个内容项来实现导航，能很好的应用于用户需要经常浏览，频繁更新的内容。

仪表式：不要使用过多的仪表导航，使用之前先开展研究确定对哪些关键指标使用仪表导航。

隐喻式：多用于游戏中，慎用，用不好会起反作用。

超级菜单式：选择此类导航前，先确定信息架构。如果导航的对象不是太多，可考虑用其他导航形式。

1.2 次级导航

所有的主要导航都可以用来做次级导航，除此以外，还有一些不适合当主要导航，但可以做次要导航的形式：页面轮盘式、图片轮盘式、行内扩展式。

页面轮盘式：可以很好的实现少量页面的导航（页面太多就用其他导航），利用直观的指示器来表明总屏数和当前所处位置。通常用“滑动”动作来操作。

图片轮盘：能很好地显示清新悦目的内容，如艺术品、产品、照片等。

扩展列表式：能很好地逐步显示某个内容项的更多细节或选项。

2、表单

登录表单：不要自己“独创”登陆表单，采用常见的设计方案。

注册表单：界面应该简洁明了，最好在一屏内显示完所有要填的信息，注册按钮应该显示在同一屏内。不要把标签和输入框水平排列，而应该采用垂直排列。

核对表单：把提升速度、效率和让用户放心作为设计目标。去掉不必要的输入域，减少页面和操作步骤。

计算表单：使用标准的表单设计和布局原则。如果可以，在同一页面内显示计算结果，位置尽量明显。

搜索表单：不要让太多的搜索选项吓倒用户，把搜索条件控制在一页以内。采用能够通过手指，方便且快速操作的控制方式。

多步骤表单：告知用户当前所在的位置和将要去的地方。去掉不必要的输入域，最小化页面和操作步骤的数量。

长表单：不要人为的把表单划分成一些步骤来避免屏幕的滚动。坚决去掉不必要的输入域，遵循特定的操作系统的按钮布局标准（标题栏或底部）

3、表格和列表

基本表格：不要使用暗色的网格线和垂直分割方式。文字左对齐，数字右对齐。一屏内显示的表格内容不宜过多，如果单个屏幕内显示大量信息，考虑其他方式。

无表头表格：这种表格模式非常适合用来显示项目集合和这些项的搜索结果，这种形式能方便用户进行快速浏览和选择。每一宽行内最多显示三行信息，不太重要的细节内容使用较小、浅色的字体。

固定列表格的表格：对于较大的表格，固定某一列或某几列是个可行的做法。为固定的列设计比较醒目的样式，以提示用户，滑动操作能浏览更多的数据。

带有内容总览和数据的表格：表格内容总览应该显示在数据上方，且要一目了然。

行分组表格：为内容总结行设定与其他行不同的视觉效果。

级联式列表：使用较为宽泛的信息结构可以避免在应用内产生较深的层次。

带有视觉指示器的表格：使用那些用户能够快速识别的视觉化指示器，去掉不必要的图标。

4、搜索、分类和过滤

4.1 搜索

显性搜索：在输入域周围提供明显的操作按钮，并提供撤销搜索的选项。通过反馈告知用户搜索动作已执行。

自动补全搜索：如果程序在显示搜索结果时有延迟，就要给出一些反馈。在搜索结果中突出显示用户输入的搜索内容。

动态搜索：对于有限的数据，如地址簿或个人媒体库，这种搜索模式非常有效。不太适合用来搜索海量数据。

范围搜索：3~6个范围选项足矣，用搜索表单实现高级搜索功能。

搜索表单：尽量减少输入域的数量，为特定的操作系统选择适当的输入控制

搜索结果/浏览结果：标明已找到搜索结果的总项数，使用延迟加载，而非分页显示的方式

4.2 分类：屏内分类、分类排序选择器、分类表单

4.3 过滤：屏内过滤、过滤容器、过滤对话框、过滤表单

过滤器选项的用词应该清晰无误，易于理解。使用过滤对话框时，使用简短的过滤选项列表，避免滚屏。如果列表较长或有多个过滤选项，使用过滤表单。

5、工具

工具栏：也称为操作栏，工具栏通常显示在屏幕底端，工具栏内的图标应该是用户熟悉、易于识别的或者采用标签加图标的设计。

选项菜单：如果可能，采取直接交互式的设计方案。不要把导航隐藏在选项菜单中。

调用动作按钮：不要把主要操作隐藏在菜单中，也不能将其设计成无法识别的工具栏图标。一定要让其显而易见（良好的对比效果），不言自明（含义清晰的标签）

情景工具：如果可能，采取直接交互式的设计方案。如果需要按钮，尽量将其放置在可操作对象旁边，使用用户熟悉或带有文字标签的图标。

内联操作：每个对象最多只能有1~2种内联操作。

批量操作：诸如删除和重新排序之类的批量操作最好在编辑模式下进行。提供明显的选项，让用户可以退出编辑模式。

6、图表

常见图表模式：带过滤器的图标、总览加数据式图表、滚动预览图表、数据点细节图、详细信息图、缩放图、数据透视表、火花谱线图

所有的图标模式都建立在基本图表的设计之上，最简单的图标应该包括标题、轴标签以及数据。数据应该显示为饼状图、条形图、柱状图、面积图、折线图、气泡图、散点图、子弹图、雷达图、计量图或混合图表。

7、视觉吸引

对话框：内容一定要言简意赅，对话框是移动设计中最常见的视觉吸引模式，但也是最容易被忽略、最得不到用户注意的元素。

提示：可以出现于屏幕的任意位置，比对话框更能融入使用情景。提示要尽可能的接近所指向的功能，保持内容的简洁，在交互开始时关闭提示。

使用向导：能很好地从用户使用目标的角度出发，突出应用的主要功能。兼顾内容简洁和视觉效果。

视频演示：可以展示应用的关键功能，也可以显示标准使用流程。一定要提供常见的视频控制选项（停止、暂停、音量控制等）。

幻灯片：注意把握，不要把屏幕搞得混乱不堪，一旦交互开始，移除幻灯片。

首次使用引导：将首次使用引导和其他内容区别开来。

持续视觉吸引：保持持续视觉吸引元素的简洁，与其他内容区分开来。

可发现的视觉吸引：最常见的是鼓励用户刷洗数据的提示。

8、反馈与功能可见性

反馈：出错信息、确认、系统状态

出错信息用纯文字形式展现，不要使用模式对话框。主动向用户提供解决方法，在屏幕上突出显示出错信息。

当用户执行某操作时，提示确认信息，但不要打断用户使用产品的过程。

系统及时提供反馈信息能提升用户对软件的信任度，为可能会持续较长时间的操作提供“取消”选项

功能可见性：触摸、滑动、拖曳

触摸：用常见的视觉效果来暗示可触摸的控制项，一定要谨慎的使用三维效果，泛滥的阴影和斜角效果会降低可读性

滑动：通过页面指示器，或显示其余内容的一部分来告知用户，滑动屏幕可以发现更多内容。不要使用反应过慢的滚动条。

拖曳：拖动手柄的图标一定要易于识别。

9、帮助

使用说明、界面元素说明、使用向导

10、反模式

标新立异、隐喻错位、愚蠢的对话框、图表垃圾、按钮海。