这周看了一本书——《移动应用UI设计模式》，与0-1岁产品经理分享：

其实全书就是把移动应用的表皮撕碎了来讲，从用户下载app，首次打开app，进行注册、登录、使用（期间使用工具、导航、进行搜索筛选排序等操作）、与他人建立联系，app从一开始对用户进行引导、实时反馈、并给予帮助，整个过程都有正反模式的case进行讲解，全面但不够深入，可作入门。

（没有图片的文字可读性太差了，以后有机会补上，大家可自行阅读原书）

一. 导航

主导航——全局导航：

1. 跳板式

优势：跨平台；

缺点：过于扁平化无法区分优先级

2. 卡片式

模拟扑克，真正的卡片式还包括模拟切牌、换牌、翻牌等

3. 列表菜单式（层级导航）

“要到达一个另一个位置，用户必须原路返回几步，然后再做出选择”，eg. 邮箱&设置

安卓中把返回按钮又叫做向上按钮（up button），“向上按钮在各个页面之间根据层级关系进行导航”,每个页面（除了顶级页面即首页）都需要返回按钮。

4. 仪表盘式

5. 陈列馆式

6. 选项卡菜单式（标签栏）

7. 折叠选项卡式：用户滚动/下滑页面时，隐藏或收缩网站头部/底部工具栏

8. 可配置选项卡式

9. 隐喻式

主导航——瞬时导航：

瞬时导航只有在需要时才会出现，做出选择之后又会收起。

1. 侧边抽屉导航：

形式：浮层式（部分遮盖原有内容）+嵌入式（将原有内容全部推出）

分类：左抽屉、右抽屉、两边抽屉

注意：用户首次打开应用展示抽屉，再次打开时收起状，告诉用户那里有导航菜单

2. 下拉菜单式：统一类别下不同视图的导航

形式：浮层式（部分遮盖原有内容）+嵌入式（将原有内容全部推出）

任何手势（点击、滑动、平移）都能打开菜单。 不要让菜单覆盖整个屏幕，漏出一点，点击屏幕任意位置，可隐藏菜单。 安卓使用spinner控件，iOS自定义。

3. 转盘菜单式（少见）

次级导航：

1. 翻页式：页面指示器（小圆点）是一种形式，注意提供视觉指示，让用户感知到这里可以滑动。

2. 滚动选项卡式：注意区别已选中选项，一般会比较窄，因为更多的是作为滑动而非点击触摸。

3. 折叠菜单式：在避免跳转页面的前提下，提供更多的内容。注意使用常用图标显示展开或收齐状态。

二. 工具

工具栏：

按钮与操控对象有一定距离，是操控主体的辅助工具，在设计按钮时，想一想是否真的有必要在这里放个按钮？（放大缩小 & 上下页）这样的设计是否只是桌面设计遗留的产物？滑动翻页是否更为有效。

iOS：

1. 始终显示在页面底部，但不用来导航；

2. 点击工具栏的一个按钮可以调起标准操作菜单或者自定义操作菜单；

上下文工具栏：

用于文本输入；

工具箱:

工具箱类似于增强型的工具栏，常见于摄影和设计类应用（需要大量效果处理），主工具箱放在页面底部，从主工具箱中选择一个工具，会显示该工具特定的一个选项集（可以是浮层选项菜单，或者作为第二行显示在工具箱上方）；

标签+图标的形式可以增强工具栏和工具箱的可用性；

还有一种方式是显示主要的工具集，当选择了一个工具时，其子选项才显示出来，这个时候需要提供当前位置 及 退出路径；

扇形工具箱；

行为召唤按钮:

1. 全局行为召唤按钮；

2. 悬浮行为召唤按钮；

3. 帮助用户成功完成一个流程时，或者让用户快捷使用有特定全局操作的应用时（比如拍照录音），可采用行为召唤按钮。

行内操作:

操作按钮与其作用的对象在同一行，而不是全局或者整个屏幕层级上；

大部分应用都一块状态按钮来实现行内操作：两种状态

行内操作应靠近被操作对象，选择用户熟悉的图标，且可以考虑为图标加上文字标签。

对象详情页中的行为操作。

多状态按钮:

在一系列紧密相关的过程被快速连续执行时，多状态按钮十分有效，在设计提示用户确认不可撤回的操作时，可考虑使用多状态操作按钮取代对话框。

一般来说，不应该在一个UI控件中设置多个操作，因为会让页面过载，让用户感到压力，多状态按钮是个例外，多状态按钮既用作操作触发器，同时也是一种反馈机制。

上下文工具:

上下文工具：针对一个对象或任务，只有在上下文建立起来后才显示。

点击/长按/左右滑显示上下文工具——内嵌式/浮层式；

长按一个文件会触发选择模式，可以选择更多对象，且上下文工具（下载分享复制删除等）取代了操作按钮

批量操作:

常见的批量操作包括选择删除和重新排序；

上下文工具可以对条目执行批量操作；

删除和重排这样的批量操作最好使用独立的编辑模式，要提供一个退出编辑模式的明显选项；

锁屏控件:

如果你的应用要在后台运行，且用户需要快捷方式进行暂停、停止或调整应用，可以考虑锁屏控件，有时小部件能够提供比通知更深层次的体验。

三. 表单

大多数网页应用都大量依赖表单实现数据输入和配置。

登录表单：

登录表单应包含尽可能少的输入：用户名、密码、操作按钮、密码帮助以及注册选项。

A. 登录表单的种类：

1. 一些应用将输入框全部设计在同一页面。一些则首先显示登录和注册选项，然后引导用户填写相应表单。

2. 还有些应用将注册和登录选项放在引导页上，通过在每一页固定显示，让新用户一旦决定使用应用就可以立即注册，同时老用户也可以方便地登录。

3. 登录和注册标签页是另一种呈现两个选项又能将导航最小化的可行模式。

4. 金融领域，直接放弃用户名输入框，只要求输入密码，就可以访问敏感数据，也非常流行。手机PIN码作为密码也能实现同样的效果。

让第一个输入框自动获得焦点，避免用户额外点击操作以打开键盘。 明文显示密码的选项，同时提供隐藏按钮。

B. 何时登录：

大多数应用，登录表单在启动应用时会显示出来。但很多情况下，最好让用户在使用应用时无需登录或注册，登录不一定是第一步。什么时候验证用户身份才是最重要的？（淘宝）

注册表单：

企业希望用户注册时候获取尽可能多的信息，但注册表单应尽可能少的输入项，每增加一个输入，就会大大降低注册表单的转化率。应减少不必要的功能元素，比如不必要的确认电子邮箱和密码确认字段。

标签项垂直对齐而不是水平对齐。

1. 建立一个易于阅读的标签标准，每个表单项都有即时反馈。

2. 输入框中使用提示文字，但有个问题是，一旦用户开始输入字符，提示文字就会消失。

3. 悬浮标签可解决水印式标签（提示文字）存在的易用性问题，只要输入文字，水印式标签就会悬浮在输入框上方。

内联额形式对用户的输入给予实时的反馈

预先显示密码要求：如果对密码的安全性有特定要求（字母大小写等），一点那个要在用户提交/完成之前告诉，不要在自后显示错误提示信息。

一旦用户提交注册表单，要及时注册反馈。

注册过程中，尽量让用户始终停留在app内，如果必须链接到一个网页表单，请提前在移动浏览器中测试可用性。

重复注册检测到账号已经存在，引导用户进行登录而不是错误提示。

注册表单要简单，表单长度最好在一屏之内，操作按钮要放在可视范围内。清楚地说明输入要求，可利用实时反馈加快注册过程，并让用户了解当前状况。要考虑到所有用户的使用情况。

个性化注册表单：

目的是魏用户提供更加个性化的内容（ness/news 360：偏好设置提示），通过关联社交媒体提升用户体验（path/Instagram：注册流程中鼓励用户找到好友find friend），或是获取设置所需数据（personal capital：电话号码和资产范围的提示，同时提供链接账号的选项）

结账表单：

通过简化支付流程，去除不必要的步骤并提供快捷方式，完成移动端转化设计。（扫描二维码、自助结账）

高效率支付流程：

1. 同时提供登录、注册和客人用户选项：允许客户在账号信息中保存个人资料，以便将来快速结账；同时提供客人用户结账的选项，完全可以在用户完成支付后提示去创建账号；

2. 简化流程：放弃进程蓝，把分屏步骤放进一个结账页。单一结账页有额外信息的页面，用于添加详细信息。

3. 提供省时的快捷方式：导入地址（可选导入或自动填充）、扫描卡片支付、所选付款方式；

4. 极度快速的结账方式：一键结账按钮，并让用户可以自行设置。

5. 忘记网页版购物车的隐喻和多步骤支付流程（PK对比）

计算表单:

计算风格的应用，对齐方式、标签、字体、按钮位置、对比及颜色，都会影响移动表单易用性。 输入数据时的实时可视化，实时反馈。

搜索表单：

搜索表单只关心最核心、不可或缺的输入字段，并提供合理的默认值。

可以在搜索结果页提供筛选功能，让用户对搜索列表进行细化。

在表单页上直接预览搜索结果的书目，且可以保存搜索，为将来搜索节省时间和精力（zillow）

票价提醒功能和保存搜索类似，都是通过保存搜索条件进一步提高移动用户的效率，这个提醒使得用户一次又一次打开应用。

搜索条件尽量控制在一页之内或更少，提供合理的默认值和保存搜索的选项，以供将来使用。

隐式搜索建议附近可选餐厅。

多步骤表单：

向用户在展示所处位置，并显示下一步；

网页端，多步骤注册使用进程栏（process bar），指示用户所处位置，并提示下一步骤。但移动设备屏幕太小，没有足够空间显示那么大的进程栏。

1. 移动端：去掉进程栏，如果几个步骤不得不跨屏幕显示，你可以采取显示当前步骤是第几步的方法，显示在标题栏或页脚。

2. 每一步的详情收起，点击向下展开，这个单页设计提供提供了有价值的导航信息，同时也使高层级的摘要内容增加；

3. 点击”下一步“，页面向下依次展开，已填选项显示为只读状态；

4. 提供固定的详情按钮，显示选择的选项详情参数；

长表单：

长的滚动表单比把表格切分成多页要好得多。

关键在于何处放置执行和退出按钮：

iOS：命令按钮放在右上角，取消按钮放左上角；

windows phone：命令按钮放在应用栏（固定显示在页面底端）上；

android：命令按钮应该放在操作栏上（固定在屏幕顶端）——但是用户测试表现不佳。还是会有一些android应用在底部位置固定显示命令按钮。

四. 表格

移动端展示数据表格既是机会又是挑战，我们会更加严格地审视数据，从而确定用户真正需要从中获得的是什么？

基本表格：

基本表格指的是带有固定列表头及网格布局的标准表格。

不使用深色的网格线，如果为了视觉降噪不用垂直网格线的话，请务必保证对齐。

无表头表格：

无表头表格：用较宽的行显示某一对象的多个变量，且没有列标签。常见的做法是突出显示行标识符（信息关键部分）。适用于显示项目集合（菜谱、专辑等），也适合显示搜索结果。

无表头 表格点击行内展开详情；

清晰的设计和美观的排列在无表头表格中很重要，保证快速浏览并执行操作。

固定列表格：

针对较大的表格；

提供视觉可见性，让用户知道通过滑动可以显示更多列，页面默认显示最重要的列。

左侧列固定，其他列可左右滑动

概览加数据型表格：

概览（图像/文字）+表格 （财务/天气） 如果概览图用饼图或环形图表示，且图标和图例占用了整个页面，采用逐级深入模式的效果可能会更好。

行分组表格：

行分组可以让数据表格更易读，一组分组行集可作为节区头部，比如按年分组。

从视觉上将汇总行和其他行区别开，一般汇总行应该较窄，字体颜色较浅。

带有视觉指示器的表格：

只有视觉指示器能够突出表格时，才使用；

带有视觉指示器的表格模式设计中，波形图和图标可以提升信息显示效果。

可编辑表格：

1. 清晰指示出选中的单元格和行；

2. 如果单元格有特定格式，就提供适当的编辑器；

3. 只在保存时要求用户确认；

五. 图表：

数据可视化；

图标应该通过描绘数据之间的重要关系讲述故事；

1. 了解基础知识：

图标包含且仅包含所有必要的信息。必要信息至少包括图标标题、带有标签的坐标轴、数据。

2. 保持简单（跑步app。。。理财app。。。）

3. 用户测试

4. 了解开发团队使用的图表库

带有筛选器的图标：

时间控件或其他筛选器可增强图表，用户可以查看不同时间段的信息； 采用单页筛选设计模式时，为触摸对象保留足够空间。

交互式时间线：滚动窗口

如在屏幕底部的小图表提供选择时间点的交互式空间（两个拖曳手柄），在上方显示所选时间段的大图表。

优势：比起静态图表或可视化数据，交互式时间线能为用户在选择上下文方面提供能多自由和控制能力。

数据点详情：点击显示数据点详情，而不是实时悬浮

逐级深入：

如果想在上下文中多显示有点信息，采用数据点详情模式就行了，但如果需要更深入地查看数据，可以考虑逐级深入模式，注意使用系统相应的控件 来提供返回路径。

概览加数据；

趋势图（交互式环形图/气泡图等）+详细数据

交互式预览：

适用于需要显示多个预测场景，常见于个人理财类应用设置预算。

仪表盘：

可作为主导航，也可作为次级导航，接受自定义；

缩放：

常见做法是引导用户旋转至横屏，查看全屏图表。一般会隐藏图标和导航元素，尽可能为图标的展示留出足够空间。旋转屏幕至竖屏时，导航和其他空间恢复原状。

同时，需要为旋转屏幕查看浸入式图标视图提供一个视觉吸引。（图标/点击toast提示）尝试用缩放或平移的收拾来扩展或缩小图表的焦点。

迷你图：一个微小密集、简单明了的图表

可以嵌入到句子、表格、标题、地图、数据表、图像中，适合于移动设备，因为既概况了数据趋势，又不会占用太多空间。 磁贴式、子弹式、微型环形...

嵌入式图例：

把图例嵌入到图标标题/数据表格下方/数据表格中，会大大节省屏幕空间。 阈值对标示个人用户目标特别有用，可以把阈值标记设计成交互式（比如在图表中可以调节阈值）

阈值：

使用阈值表现数据是在范围内还是超出了范围，可以用标注在图表上的颜色、色带或线条表示。

透视表格：

透视表格是置于大表格中的小概览表格。

六. 搜索 排序 筛选

1. 搜索模式

隐式搜索：

感觉起来类似推荐，如基于地理位置的隐式搜索：推荐附近餐厅；

在选择其他搜索模式前先考虑隐式搜索的可能性，这种模式可创造愉悦的用户体验；

地理围栏：LBS的应用，用一个虚拟的栅栏围出一个虚拟地理边界。当手机进入，离开某个特定地理区域，或在该区域活动时，可自动接收通知。

显式搜索：：通过显式的用户操作获取搜索结果。

最小化输入需求（扫一扫、最近搜索、最近保存搜索、自动填充等），提高搜索效率；

1. 语音搜索；

2. 直接操纵，手势搜索（地图）

3. 模态搜索：从首页/导航抽屉进入，点击搜索框，打开一个新的搜索页面

模态搜索优势在于：用单个搜索页面增加了搜索控件。要为不打算搜索的用户提供一个返回路径。使用反馈来标示系统正在进行搜索操作。

自动完成搜索：

当用户输入文字时，会出现一组可能的结果。当用户继续输入文字时，搜搜结果也相应减少。点击任何一项结果就会触发搜索。自动完成搜索的结果会立即显示出来，但应用使用进程指示器（搜索中search...）给予用户反馈。

增强型自动完成搜索：分组显示，显示群组名的搜索。

限定范围的搜索：

让用户在开始搜索前先设定好搜索范围，就能更便捷地获得搜索结果；

为数据集提供合理的范围选项，三到五个，更多需提供高级搜索。

android：下拉菜单控件：限定搜索范围；

iOS：分段控件、滚动选项卡

动态搜索：

动态搜索可以理解为动态筛选，在已有list里进行筛选。在动态搜索模式下，空白的搜索框下会显示全部可能的分类结果，而输入搜索字符串会动态地对结果进行筛选，缩减列表范围。

适用于有限的数据集，比如地址簿或个人媒体库。

保存的搜索、最近搜索记录和热门搜索；

搜索表单：

有一个用于输入多个搜索条件的单独的表单和一个显式搜索按钮；（去哪儿机票）

搜索结果：

搜索结果可以在同一页面展示，也可以跳转页面；

展示形式：表格、列表视图、磁贴视图、卡片式、幻灯片式、地图（酒店）、卫星图、甘特图式时间线（机票）...

延迟加载：在其他页面正在加载时显示部分搜索结果的常用技术。许多应用都会在用户滑动屏幕时自动加载更多结果，或提供更多加载的链接。标明搜索返回的条目个数，用延迟加载代替分页。

2. 排序模式

单页排序：

只有在少数几种排序选项的情况下，单页排序可以作为一种简单的一键式解决方案：

1. 点击排序按钮后显示单页排序选项，提供关闭按钮；（iOS）

2. 下拉菜单控件（android）

排序浮层：

用户通过点击排序标签或图标开启浮层，可以将它放在搜索结果页的顶部（iOS）、中间（对话框式）或底部（Android）。

排序选项应该放置于其他对结果列表进行处理的工具附近，筛选、视图切换开关等。要明确显示出活动的排序选项。

排序表单：

排序表单模式可能需要用户做出更多操作——打开表单，选择选项，而且可能还要点击“完成”“应用”或“返回”按钮（android平台），在iOS平台里，一个排序选项在被点击后立即执行，无需点击“应用/完成”按钮。

在采用排序表单前，优先考虑更高效的单页排序或排序浮层模式。如果要将排序模式和筛选模式放在一页表单里（因为二者都是用于进一步精细化搜索），要尽可能保持页面简短整洁。

3. 筛选模式

单页筛选：

单页筛选显示在搜索结果页，点击后，筛选立即执行，不跳转页面：

提供筛选器是否被应用的视觉线索，尤其是在筛选控件有时被隐藏起来的情况。

1. 筛选栏：位于顶部（iOS）和底部（android）；

2. 滚动栏

3. 双层筛选：提供能看到高级筛选何时处于开启状态，当筛选从关闭状态到开启状态时，颜色和字体改变；

4. 下拉控件：

劣势：不能一眼看出全部筛选选项；

优势：能清晰显示当前被选中的选项

筛选浮层：

优势：提供更多高级筛选选项；节省屏幕空间；

劣势：需要消耗用户更多时间和精力。

筛选表单：

筛选表单也需要用户做出更多操作——打开表单，选择一个或多个选项，然后点击“应用”按钮。筛选表单适合筛选选项很多的情况。

也适用于嵌套式/层级式的选择项；

与搜索相关的筛选表单；

筛选抽屉：

筛选抽屉和筛选浮层/表单一样，需要额外点击“应用”或“完成”按钮以获取筛选结果。区别在于筛选抽屉是从当前页面侧边活出的，允许用户在筛选过程中停留在筛选结果页上。并把搜索结果显露出来一点。

指南：

1. 打开和关闭抽屉式对应的操作；

2. 动态更新搜索结果的个数；

3. 搜索结果在背景层始终可见；

4. 在筛选器被执行后给予清楚反馈；

基于手势的筛选：

基于地理位置的筛选：地图

七.社交模式

社交注册：

通过提供社交（Facebook）登录和选填个人信息简化注册流程；用Facebook的API接口显示一个单独的授权页面。如果用户授权就会从Facebook的个人资料中把相关注册信息调取出来创建你的个人资料。

保证正确使用Facebook API接口实现快捷登录。

连接：建立批量连接

利用其它社交平台API的一大好处是：能让用户访问他们已有的社交连接。在用第三方注册后，生成预先填写了的个人资料，自己只需要填写密码即可。几次点击后，就能和在其它第三方注册平台上所关注的人建立联系。

在应用中始终提供连接点，注册时在一个或多个其它用户操作流程中提供连接的机会。

关注：

关注是提供一对一的连接选择，如果还想查看一个人更多的分享等信息，我们就会去关注他，关注值代表了用户在该社交网络的影响力。

推荐用户使“关注”成为一种用户转化策略，在关注流程中，显示推荐用户及一个行为召唤的关注按钮，如果想查看推荐用户的更多信息，需要注册。

个人资料：

个人资料是社交网络的核心，其设计应该涵盖足够的信息，让大家愿意在这个网络中彼此链接，建立关系；

个人资料常常包括头像、简介、兴趣列表，近期动态（足迹）、互动（赞）、成就，并提供关注或加好友的功能。

选项卡式，列表式；

群组：

一些群组是内部设置好的，一些群组需要用户创建，创建的过程需要极其简单，且视觉吸引；

游戏化：

人们想要游戏化，实际上是想设计有粘性的应用。

激励机制：如果你的激励机制不能用一两句话解释清楚，就说明可能过于复杂，起不到激励用户的作用；

升级和惊喜；

排行榜；

实现游戏化，需要满足用户跨设备互联和同步的期望。

八. 反馈与功能可见性

1. 反馈模式：

为用户提供恰当、清晰、及时的反馈，让用户看到自己的操作结果

1.1 错误提示：

在一页上显示错误提示，优于模态对话框（会遮挡问题）。用直白的语言说明错误，并提供解决方案。

1.2 确认：

1. 避免用对话框打断用户流程。（购物车）

2. 行内反馈是一种不错的提供确认的设计模式，适用于表单，当提交无效数据时，会出发多个错误提示（自建昵称）

行内反馈还可以提供功能性手势。（滑动删除：iOS 不同于 android，iOS滑动显示（swipe-to-reveal）滑动时只显示选择的操作，没有执行操作，只有当使用第二个手势-点击，才会存档邮件。android 则是滑动执行操作（swipe-to-perform），滑动立即存档，触发行内确认，同时带有撤销操作。

3. toast提示：简单的toast提示，暂时toast提示提供确认和撤销选项。

4. 多状态按钮：在不打断操作流的前提下提供确认反馈的方法。

5. 进度指示器

6. 完成一个项目后要给予醒目的反馈，因为这些事件常出现在流程的最后，所以这时可以采取全屏或对话框式的确认反馈。

1.3 系统状态:

为系统状态提供反馈，但要让用户专注于进程，而不是等待。为很长的进程提供取消选项。

加载指示器（loading）：让用户专注于进程而不是加载页面。

有很多办法让用户不用干等：

1. 逐步加载的架构页面作为进度反馈；

2. 实时反馈每项任务的完成百分比；

3. 进度条的同时介绍产品功能；

2. 功能可见模式

功能可见性是指，一个对象具有让用户知道它可以用来执行一项操作的特性。（门把手）

2.1 点击：

扁平化设计可能会降低可用性，它迫使简化，从而达到使用更少的视觉联系提供同样清晰的视觉传达的目的。

2.2滑动/轻扫

1. 页面指示器控件（小圆点）

2. 页面溢出（暗示如何操作才能查看未显示出来的内容）

3. 滚动条（字母表滚动条/拖曳手柄的可隐藏式滚动条）

4. 其他为滑动提供视觉功能可见性的设计隐喻还包括封面流（暗示水平滑动）、名片盒（暗示垂直滑动）、堆叠的照片、动画

5. 在吸引用户滑动操作方面，文字的方式起不到作用。

2.3 拖曳

在移动设备上，要先进入一个模式才能使用拖曳操作，比如编辑模式，或者长按。

iOS：长按应用图标进入编辑模式，可进行拖曳或删除；

android：长安应用图标会显示“拖放区域”，但反模式的点在于，要想查看应用信息，用户必须先把应用图标拽进信息拖放区。更好的解决方法是长按显示菜单，菜单的前几个选线是“移动”“删除”“应用信息”。点击“移动”会激活编辑模式，并显示页面拖放区，类似现在的长按设计一样。

最常见的拖曳功能可见性是手柄，在编辑模式之后显示，用来排序列表项。

九. 引导和视觉吸引

/

十. 帮助

/

十一. 反模式

反模式即“陷阱”，指的是重复发明的糟糕的设计模式，在设计功能时应避免：

1. 避免注册登录的反模式：避免在用户还没真正使用前，就出现登录注册表单。要知道，用户使用应用前出现长注册表单=用户删除应用；

2. 避免格格不入：避免为单一平台做的设计直接套用到另一套平台（入iOS-android/网页-移动）；注意适配；

3. 避免按钮海；

4. 避免对话框：不要扰乱用户的操作流，只在用户执行不可撤销的操作（如永久删除）时才显示对话框；

5. 避免错位的情况：心理模型错位、手势错位（用户习惯下拉刷新）、图标错位、隐喻错位、控件错位（android使用iOS的控件）；

6.避免不必要的复杂；

7.错误的标新立异；

很多事物在知道名字后，就渐渐明晰了，不信试试~