移动端产品设计完全指南1:降低认知负荷
现在相比于历史上任何时期，人们对手机的依赖性都更强。美国的人均使用手机时长达到 5 个小时，其中的绝大部分时间都花在了App和浏览网页上。
用户体验是衡量移动应用优秀与否的最重要标准，尤其是用户对App的期待越来越高：快速加载、易用性、趣味性。如果想让你的App取得成功，那么用户体验是不可或缺的，是产品设计各阶段都必须时刻思考的。
当设计移动端产品时，有很多事情需要考虑，在本文中，笔者根据经历过的各项目，总结了移动端产品设计中的一些建议，希望能给读者以启发。
文章较长，文章目录如下，各位同学可以根据自己的需要阅读。
目录
- 降低认知负荷
- 满足用户的控制感
- 界面的无障碍设计
- 导航栏设计
- 导航中的动效设计
- 关注用户的首次启动
- 加快App的响应速度
- 提高内容的展示质量
- 触控设计
- 情感化设计
- 优化消息推送
- 针对移动设备的优化
- App的设计应适应新兴市场
- 测试和反馈
1. 降低认知负荷
认知负荷指用户使用App时所需的大脑能量。人脑的处理能力有限，而且当App一次性提供过多信息时，可能会让用户产生压迫感，并促使他们放弃使用。
1.1. 整理界面
减少产品的凌乱感是一个有效的方法。凌乱是糟糕产品的最大特征，如果界面堆满了杂乱的元素，用户就要承载过多的信息：每个新增的按钮、图片和icon都会让界面更加臃肿。
凌乱的桌面让我们心烦，凌乱的产品则会让用户更加烦躁（这点很容易理解，智能手机的屏幕更小，凌乱感相应地会被放大）。产品经理和交互设计师应该尽量去掉App中的不必要元素，因为降低凌乱感有助于提高用户的理解力。简约的界面和功能设计不失为好方案：
- 将内容数量保持在最低限度，只展示用户必须知道的内容；
- 尽量减少界面元素，让产品的界面更清晰，这也有助于降低认知负荷；
右图所示的tab bar明显优于左图（图像来源：Apple）
- 使用渐进式呈现（Progressive Disclosure）的方法展示更多元素或者选项。
点击后，展开更多隐藏项（图片来源：Ramotion）
1.2. 减少任务
寻找产品方案中任何可能需要用户思考的模块（可能是表单输入或者选项选择），并找寻其他的替代方案。举例来说，某些情况下，可以通过本地缓存记录数据，而不是要求用户每次都在相同的地方反复输入；此外，还可以根据用户的使用行为和使用习惯，为用户设置默认值。
1.3. 分解任务
如果一项任务包含多个步骤、需要用户执行多个操作，那最好将其分解为若干相关的子任务。这个原则在移动端产品设计上非常重要，因为不应让用户一次性承载过多过复杂的任务。一个很好的例子是电商App的下单购买流程，在电商的购买任务里，原本一个复杂的任务被分解为一系列逻辑递进的子任务，用户在每个子任务中分别执行所需操作。
任务分解后，降低了用户对任务的难度预期（图片来源：Murat Mutlu）
一方面，分解任务降低了用户的认知负荷，另一方面，也起到连接不同任务的作用。比如浏览和购买在逻辑上相关，但在实际操作中无关，但由于用户在各个任务里的操作复杂度基本相同，所以从浏览到购买有比较好的过渡，用户在不同任务衔接时也不会感到突兀。
购买电影票的任务分解（图片来源：Anton Skvortsov）
1.4. 使用常见的界面设计方案
常见的界面设计方案是指多数App使用的设计方案，包括导航栏位置、交互方式、tab话术等。在近十年的移动端产品发展中，很多界面元素的设计方案已经是习以为常的定式，不需要规定也不需要解释，因为用户已经熟悉这种设计方式了。用户使用已形成的使用习惯来使用新App时，避免了学习成本和可能带来的流失。
Quora的用户页
1.5. 尽量减少用户输入
在手机屏幕上打字的用户体验极差，这单纯因为物理尺寸太小，和软件性能无关，再熟练的用户都会出现打错字的情况。需要用户手动输入的最常见场景就是填写表单，这里有一些建议可供参考：
- 删除任何不必要的字段，缩短表单长度，保证用户输入最少的内容；
表单设计的准则是越短越好，可以将多个字段合并（图片来源：Luke W.）
- 使用input mask，这是一种帮助用户格式化输入文本的插件，能够执行对输入内容的切断、分组等操作，帮助用户专注于表单填写上，让用户更容易发现错误；
（图片来源：Josh Morony）
- 使用诸如自动填充的智能功能。比如，填写地址是任何登记类表单中最容易出问题的地方，可以先根据手机定位自动填充地址信息，这样在大多数场景下，用户只需要进行简单的修正即可；
- 动态验证字段值。提交后才能知道输入错误，然后再返回更正，这点的用户体验很差。如果有可能，应当在用户输入后立即检查输入字段的准确性，以便用户可以立即更正；
在线的实时验证（图片来源：Baymard）
- 根据字段类型显示键盘类型。在输入电话号码时，应显示数字键盘；如果输入的是电子邮箱，还需要包括@键。要确保这个功能在整个App中都是一致的，而不仅限于某些表单。
将键盘匹配所需的文本类型（图片来源：ThinkWithGoogle）
1.6. 预估用户需求
在产品设计阶段，需要根据用户的操作路径使用产品，主动发现使用流程中的潜藏痛点。比如在下图中，提示了用户需要提供信息的具体位置。
这种字段旁的简明帮助文本很有效（图片来源：Hotjar）
1.7. 用视觉重量传达重要性
界面里最重要的元素应该有最直观的重量。增加元素的重量可以通过改变字重、大小、颜色等方式实现。
大尺寸元素比小尺寸更吸引眼球
1.8. 避免专业术语
在任何移动端产品设计里，清晰准确地表达信息都是最重要的。使用目标用户习惯的表达方式，而不是你的产研团队习惯了的表达方式（或者行业术语）。
行业术语或短语会增加用户的认知负载（图片来源：ThinkWithGoogle）
1.9. 一致性设计
一致性是设计的基本原则，一致性有助于降低混乱度。在App设计中，一致性意味着以下内容：
- 视觉的一致性：App里的字体、按钮形式、文本标签样式需保持一致；
- 功能的一致性：交互方式和交互元素在各个页面中应保持一致；
- 产品间的一致性：同一系列的不同产品之间需保持一致性（比如网易邮箱和网易云音乐），这样能降低用户使用相关产品的学习成本。
关于设计一致性，有如下的建议：
- 遵循平台指南/规范
每个移动端的操作系统都有界面设计的标准指南，比如苹果的界面设计规范。遵循平台规范很重要，因为用户已经熟悉了他的手机操作系统，任何与这个系统的交互模式相悖的产品都会在使用过程中出现摩擦、造成用户的不适感。
- 不要模仿其他平台的UI设计
在为Android或者iOS设计App时，不要参考其他平台的UI设计。icon、功能模块（输入框、复选框、开关等）、字体等元素应保持该系统原生的感觉。尽可能使用原生系统的组件，这样会增强用户的信任感。
- 保持同一产品在不同终端的一致性
这属于产品间一致性的范畴。如果你的产品同时有Web端和移动端，那么应尽可能地保持二者的风格一致，这将减少用户在PC和手机间切换的不适感。二者的不一致（比如不同的导航方式或者不同的配色方案）可能会造成混乱，增加用户的认知负荷。
