《移动应用UI设计模式》读书笔记

《移动应用UI设计模式》读书笔记主导航模式由于移动桌面尺寸限制，瞬时导航很好的体现了打破框架、突破画布的思想。

通过3D图层面板和手势交互创造极佳的用户体验，将内容层、菜单层、详细页层叠起来的方式。

1、何时使用全局导航：应用层次扁平化、菜单分类是同级、主要类别只有3到5个。

用户需要菜单一直处于可见状态以便快速访问。

菜单分类有状态指示，比如未读邮件数。

跳板式1.1跳板式也成为启动面板，是2011年最流行的导航模式，指的是一个带有菜单选项的登录界面，而菜单选项就是进入各个应用的起点。

优点：可以容纳更多选项。

缺点：全部选项被扁平化，没有优先级。

1.2卡片式卡片式模仿的原型是扑克牌，切牌、换牌的手法。

在苹果的切换运行应用中也使用了卡片式，在谷歌now中。

他给出了一种展示内容的优雅方式。

1.3列表菜单式每一个列表都是进入该应用各项功能的入口，并且模块之间的切换需要返回到列表主页。

在设计层级结构的应用导航中可以考虑列表菜单模式。

1.4仪表盘式在需要使用关键指标或数据作为应用入口的时候，可以采用仪表盘式。

但不要载入过多的信息，对于要展示的关键指标或数据需要经过仔细的研究再做决定。

1.5陈列馆式可用来呈现实时内容，比如新闻、菜谱、或照片。

可采用网格布局或轮盘布局。

字幕式的文本比浮层式的文本更清晰易读。

陈列馆式的设计模式最适合呈现经常更新的、视觉效果直观的无层级内容。

1.6选项卡菜单IOS标签栏的作用是在应用的主要类别之间进行切换；而工具栏上显示的是工具或指向特定页面的可执行操作。

IOS系统中的标签栏限制在5个以内，如果应用的主要类别超过5个，那么你可以把“更多”放在最右侧的第五个选项卡上。

在扁平式信息结构的应用中，因为所有的主要类别都可以从主页进入，所以用户可以直接从一个主要类别切换到另一个。

Instagram针对进行单一操作的用户（拍照）所以他们把行为召唤放置在标签栏上。

安卓系统主导航提供三种不同选项卡模式：固定选项卡：固定选项卡同时显示多个顶级内容视图，可以方便在不同视图间进行切换。

固定选项卡会一直显示在屏幕上，始终允许用户通过在内容区左右滑动切换不同界面。

下拉菜单导航抽屉在以下场景中使用选项卡：预计用户会经常切换视图顶级内容视图最多3个你想让用户清楚地知道有可供选择的视图。

1.7新生模式在用户滚动屏幕活动页面时将网站头部隐藏或是收缩起来。

折叠选项卡：用户向下滑动浏览内容时，把工具栏收起来。

在向上滑动时将工具栏重新显示出来。

可配置选项卡：通过模仿浏览器标签页效果，用户可增添选项卡可对选项卡排序。

侧边栏不太可能被用作全局导航模式的元婴：1、大多数人是竖屏使用手机，侧边栏占用相当多空间。

2、因为空间限制，所以文字标识常常被去掉，降低了应用的可用性。

1.8隐喻式通过拟现实世界的物，多应用在游戏中。

2、主导航模式——瞬时导航瞬时导航只有在我们需要的时候才显示出来，在我们做出选择后，他会再次消失。

2.1侧边抽屉式两种风格：浮层：通过轻滑或点击的手势打开抽屉，抽屉部分遮挡或覆盖原来的页面内容。

嵌入层：通过轻滑、平移、点击打开抽屉，把原先的页面内容部分推出屏幕外。

在首次启动应用时，自动弹出左侧抽屉导航，可以让用户了解应用结构。

左侧导航不必局限于导航还可以加入类似linkedin的个人资料，zillow房贷利率变化曲线。

左侧导航也可以采用多层级的模式。

新兴的模式：类似手机QQ点击导航，侧边抽屉会将上一级页面推到旁边或者后边，类似3D 的效果。

下拉菜单：移动网页和响应式网页设计推动了这一模式的发展。

下拉菜单也可以从底端显示出来，底端更切近人手触摸移动设备。

无论什么样子的手势，都能打开菜单，比如点击图标、平移、轻滑。

不要让菜单完全盖住背景，露出一点背景，当用户点击露出的背景任何部分可以隐藏该下拉菜单。

转盘菜单：在游戏设计中，这种模式受欢迎。

在主导航模式中不常用，在设计任何多级菜单时，应该避免采用。

3、次级导航模式翻页式：可以通过滑动手势快速导航内容页。

的导航需要提供视觉提示，让用户知道可以滑动手势。

滚动选项卡：应用于次级导航，一般比标准的标签栏要窄，因为他没有必要作为触摸对象，更是将他们用作水平滑动指示。

折叠菜单：又叫作手风琴式，能使用户在同一页面上查看更多的信息，比跳转到另一页面再跳回来更高效。

通过常见的图标指示展开或收缩状态。

例如在一些帮助页面中可以将帮助标题与内容间采用。

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

常见表单：登录表单、注册表单、个性化注册表单、结账表单、计算表单、搜索表单、多步骤表单、长表单。

表单流失：没有完成并提交表单就放弃的用户。

智能手机狭小的屏幕和受限输入方式导致移动表单设计必须简单。

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

应该让第一个输入框自动获得焦点，避免用户做额外的点击操作以打开键盘。

将注册页面与登录页面放在引导页，可以让新用户一旦确定使用就立刻注册，同时也让老用户方便登录。

标签页呈现两个选项有能将导航最小化的可行模式，左右切换登录和注册。

登录注册不一定非得在第一步，想一想什么时候验证用户身份才最合适，让用户玩一会app 有兴趣再注册。

1、注册表单注册表单应该可以去掉不必要的确认电子邮件字段和确认密码字段。

如果给每个表单加即时反馈可以避免用户输入重放手机号码表单提交后就给予用户注册反馈。

表单要简短，最好在一屏之内，操作按钮放在可视范围内，重复注册的聪明解决方案：识别出用户手机号码已经注册过，直接进入找回密码页面并将手机号码自动录入表单内，用户点击找回密码按钮，即可等待验证码找回密码。

2、个性化表单在网页端，多步骤注册过程经常使用进程栏指示用户他们所在的位置，并提示下一步操作。

而手机端进程栏似乎有些不适用，可以通过多个页面的引导或标题栏显示步骤页脚。

产品配置是一种特殊的多步骤表单，不是典型的线性流程，而是需要实现返回——前进的导航。

3、结账表单最好让用户在应用中结账，而非跳转至第三方。

高转化率的支付流程设计技巧：同时提供登录，注册和客人账户选项简化流程提供省时的快捷方式提供快速结账方式忘掉网页端。

4、计算表单设计最好的计算器应用应该将输入结果用视觉效果呈现出来。

测量仪的数据输入后即时更新。

计算器表单布局使用标准化表单设计。

在符合应用场景的情况下增加交互可视化。

5、搜索表单要短而简单，搜索条件尽量控制在一页内或更少。

提供合理的默认值和保存搜索的选项，以便将来使用。

6、长表单：一些表单不能只放进一屏之内，在这种情况下，长的滚动页比把表格切分成多页要好得多。

最棘手的问题是何处放置执行和退出按钮。

表单总结表单的五要素：标签、输入框、即时反馈、帮助信息、执行动作三、表格1、基本表格就是带有固定列表头及网格布局的标准表格。

设置斑马纹（不同行颜色）或者两行之间细线分割。

现在普遍的做法省略垂直网格线以减少视觉噪音，在不用垂直网格线的情况下，要确保列对齐，文字左对齐，数字右对齐。

2、无表头表格无表头表格的特征是用较宽的行显示某一对象的多个变量，且没有列标签。

突出显示标示符，信息的关键部分。

当用户点击一行时，航班详情会在行内显示出来，而不会跳到新的页面。

非常适合用来显示项目集合，也很适合显示搜索结果。

3、固定列表格对交大的表格来说，固定列表格模式或许是一个可行的解决方案，最左侧的列固定，其他列可左右滑动。

4、概览加数据型表格特点是表格内容的摘要显示在第一行数据的上方，这种模式在财务类应用中多，适合用户想从中看到总数或随时间变化的趋势。

当图表占据整个页面，可采用逐级深入模式比概览模式效果更好。

5、行分组表格行分组可以让表格数据更易读。

一组分组行集可以作为节区头部即汇总行，可以按照年份、类别进行分组。

一般而言汇总行应该窄一些，字体颜色浅一些。

6、带有视觉指示器的表格波形图和图标可以提升表格的信息显示效果，但不要用没用的图标堆满表格，给数据的显示造成干扰。

7、可编辑表格移动端可编辑表格的设计规范：(1)清晰地指示出选中的单元格和行(2)如果单元格有特定的格式，就要提供适当的编辑器，如选择器，下拉菜单，颜色选择器，日期选择器等。

(3)除非编辑后产生错误提示，否则没有必要为每一项编辑都提供确认反馈，只需在保存时要求用户确认即可。

四、搜索，排序和筛选1、搜索模式隐式搜索：通过大数据预测式的搜索，例如谷歌now把隐式搜索提升到了一个新的层次。

这种模式可以创造愉悦的用户体验。

地理围栏：利用LBS的一种新应用，就是用一个虚拟的栅栏围出一个虚拟地理边界。

当手机进入离开特定地理区域，或在该区域活动时，它可自动接受通知。

2、显示搜索通过显示的用户操作实现搜索并获得结果。

语音搜索随着语音识别技术的提升将成为重要的显示搜索方式。

模态搜索搜索框位于导航抽屉内，只要用户点击搜索框，搜索模式就会显示为一个带有键盘的完整搜索页。

模态搜索的好处在于用单个搜索页面增加了搜索空间。

4、自动完成搜索自动完成搜索已经成为了显示搜索的标配，当用户输入文字时，就会出现一族可能的结果，当用户继续输入文字时，搜索结果也相应的减少。

甚至有的显示群组名的增强型自动完成搜索。

5、动态搜索也叫作动态筛选，在动态搜索模式下，空白的搜索框下会显示全部可能的分类结果，而输入搜索字符会动态滴对结果进行筛选，缩减列表的范围。

这种搜索适用于有限的数据集，比如地址簿个人媒体库，在海量搜索时，则不应被使用。

6、限定范围的搜索让用户在开始搜索前，设定好搜索范围，就可以更便捷地得到搜索结果。

安卓版的可以在搜索框图标下放一个下拉菜单控件。

IOS版常采用分段控件实现限定范围的搜索，在数据集提供合理的范围选项，三到五个就够了。

如果要提供高级的搜索可设计一个搜索表单。

7、保存的搜索、最近搜索记录和热门搜索记录通过选择先前的搜索记录、实现搜索流程的简化，让用户不必重复输入相同的关键词或搜索条件。

8、搜索表单这种搜索模式的特点是有一个用于输入多个搜索条件的单独的表单和一个显示搜索按钮。

酒店机票类搜索需要设定必要的条件适合该种模式。

尽量减少用户设定条件的个数。

搜索表单通常一页完成。

9、搜索结果/查看结果在执行完搜索后，搜索结果可以在同一个页面显示，也可以跳转到专门的搜索结果页。

搜索结果可以显示为表格、列表、地图、卫星图、或缩略图的形式。

新趋势：卡片式、幻灯片或磁铁样式显示搜索结果，用户可以通过轻扫的手势进行切换浏览。

对于机票这一类与时间和价格两个维度有关系的搜索结果可以采用甘特图时间轴来显示。

对于地理位置敏感的搜索结果可采用地图模式，热力图浮层显示各种统计信息在地图上。

加载延迟是一种在其他结果正在加载时显示部分搜索结果的常用技术，尽量不用分页表格的形式。

排序模式：能极大地提高搜索可用性，可考虑在搜索结果中选用单页排序、排序浮层、排序表单。