《移动应用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、长表单：一些表单不能只放进一屏之内，在这种情况下，长的滚动页比把表格切分成

多页要好得多。最棘手的问题是何处放置执行和退出按钮。

表单总结表单的五要素：标签、输入框、即时反馈、帮助信息、执行动作