移动设计模式总结（一）

这篇文章整理自一本书《移动设计模式大观》，下载地址：http://download.csdn.net/detail/shanxing2/5103470

1.导航

1.1桌面式

最佳实践：菜单无主次之分，每个菜单所占空间大小一致。菜单有主次之分，主要的占空间较大，其余的占空间较小。在使用桌面式导航布局时，要充分考虑到给用户提供个性化和定制化功能。

1.2列表式

最佳实践：列表菜单导航适合长标题或者有副标题说明，使用类表菜单导航应该提供一个从子页面返回类表页面的方式，通常在标题栏添加一个一个带有菜单字样的按钮作为返回按钮。

1.3选项卡式

最佳实践：使用选项卡导航要注意视觉上对已选择和未选择的选项进行有效区分 图库式

1.4图库式

图库式表面被分为各个内容区用于导航。内容区通常载有单独的文章，标题，照片，产品和其他能够放置在内容区，网格或幻灯片展示里的内容。

最佳实践：图库式适用于用户想要浏览的经常更新的内容

1.5仪表盘式

仪表盘汇集展示了一些关键指标。进入每一种度量方式都可以了解更多额外信息。这种主导航模式常用于金融应用程序、分析工具、销售和营销应用程序

最佳实践：仪表盘不需要载过多内容，而需要载入一些被研究确认过的关键数据

1.6隐喻式

用一个页面来反应整个应用程序。这种模式常用于游戏，也能够在帮助人们分类物品（如各类笔记，书籍，酒品）等应用中看到

最佳实践：使用隐喻式要慎重，如果一个执行起来不明确的隐喻反而会起到不好的反作用

1.7菜单式

移动应用菜单式导航与网页上菜单导航极为相似。

最佳实践：在选择导航模式前，请先明确你的信息架构，根据信息架构选择需要的导航模式。

1.8二级导航

任何主导航都适合于二级导航，有些专门适合二级而不是主导航的导航：页面旋转式、图片旋转式和当前页面展开式

页面旋转适用于页面数量较少的情况，使用指示器反应页面数量和当前页面，左右滑动手势是最常见的旋转导航手势。

图片旋转木马式最适合展示新的视觉内容，例如文章，产品和图片。注意要提供视觉可预见性，要么左右留有箭头，要么有部分图片漏出来，要么有页面指示“…”能够显示更多的内容。

扩展类表模式特别适合逐步显示细节或者某一对性的信息

2.表单设计

2.1登录表单

登录表单至少应有用户名及密码的输入框，登录按钮，密码找回及注册选择几项组成。另一种做法是放弃用户名字段，只需要一个密码。用户只需要输入密码来访问敏感数据，在金融类应用中大受欢迎。

最佳实践：不要在登录屏幕上做太多创新。通常登录表单要做的足够容易让用户完成登录，要留有密码找回功能，以便用户找回密码。

2.2注册

最佳实践：保持简短，一屏内显示，去掉右键和密码确认，使用纵向标签，实时反馈有效性

2.3确认表单

移动设备确认表单设计原则：在确认表单使用设备标准控制；考虑多屏使用一个控制表单；提供一种机制为未来更快速的确认，例如借记卡信息或登录结账；显示一个安全的锁头标志来表示一个安全的连接；checkout向导模式可能不是一个最快速有效的设计

最佳实践：侧重速度，效率和安全，减少不必要的字段，将页面和步骤最小化

2.4计算表单

如体重跟踪器，税收计算器和贷款计算器。好的计算截面应该输入输出对其整洁并带有计算结果的视觉展示。

最佳实践：对齐，标签，字体，按钮摆放，对比，颜色，都会影响到表单可读性，尽可能在同一页面展示可视化效果。

2.5搜索表单

最佳实践：搜索字段不要太多，一个页面一个搜索维度或字段，空间布局合适，操作快捷方便

2.6多步操作表单

移动设备上的一个简单的解决方式是显示当前步骤和总步骤数。

最佳实践：显示用户去过哪里，还可以去哪里，减少不必要的字段，将页面和步骤最小化。

2.7长表单

最佳实践：不要为了减少滚动机械的将表单划分成几步。

3.表格与列表

3.1普通型

一般是网格布局并带有标准列和标题，同时有不同颜色的分割线区分个行列（或更精细的分割线）使得表格更易读。

最佳实践：避免使用黑色网格线以及将表格垂直划分的形式，文字左对齐，数字右对齐，如果一屏信息太多时，可考虑使用其他模式。

3.2无表头型

无表头表格布局的特点是不使用列,但是使用行显示一个对象的丰富变量。通常使用较大的文字显示行标识符,而使用较小的文字显示每行细节内容。此模式的理想状态是显示数据项集合和搜素结果。想一个列表,此模式用来快速的扫视和选择。

最佳实践:表中每一行最多显示三小行信息,信息内容要有主次之分,对于主次,不要主观猜测,可由用户调研后得出结果确定设计

3.3固定列型

对于大的表格,固定列模式表格可能是一个很好的解决方案。

最佳实践:当列被固定后,要提供视觉引导,提示用户滑动后可以看到更多内容。

3.4综述+数据型

综述+数据模式是指在单个行上面显示一些总结综述性信息。

最佳实践:综述位于数据之上,比较醒目,容易理解。

3.5分组型

行分组可以使表格的数据更容易理解。行分组可以充当小节或分段的标题摘要,

最佳实践:在视觉上区分总分关系

3.6层叠型

原因很明显,在移动设备上,一个树形表格会非常繁琐臃肿,级联层叠表格可提供相同的层次结构。

3.7视觉指示型

微线图和图标可以增强一个表的视觉展示,使其在特定元素中更淋漓尽致的表现。

最佳实践:选择的图标要一眼容易辨认出来,避免使用无意义的图标。

3.8可编辑型

可编辑型应用几乎完全是电子表格。许多相同的用于WEB的设计指导方针仍可用于移动设备设计。晰的表明被选择的行或列。如果表格使用特定的格式,提供适当的编辑器(选择器,颜色选择,数据选择等)。在保存状态时提供反馈和错误信息,而不是在更改状态中

最佳实践:不太适用于大规模的数据录入和编辑。