移动端产品设计完全指南1:降低认知负荷

2018-03-1009:23:37网页设计Comments2,692 views字数 2823阅读模式

现在相比于历史上任何时期,人们对手机的依赖性都更强。美国的人均使用手机时长达到 5 个小时,其中的绝大部分时间都花在了App和浏览网页上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

用户体验是衡量移动应用优秀与否的最重要标准,尤其是用户对App的期待越来越高:快速加载、易用性、趣味性。如果想让你的App取得成功,那么用户体验是不可或缺的,是产品设计各阶段都必须时刻思考的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

当设计移动端产品时,有很多事情需要考虑,在本文中,笔者根据经历过的各项目,总结了移动端产品设计中的一些建议,希望能给读者以启发。
移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

文章较长,文章目录如下,各位同学可以根据自己的需要阅读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

目录文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  1. 降低认知负荷
  2. 满足用户的控制感
  3. 界面的无障碍设计
  4. 导航栏设计
  5. 导航中的动效设计
  6. 关注用户的首次启动
  7. 加快App的响应速度
  8. 提高内容的展示质量
  9. 触控设计
  10. 情感化设计
  11. 优化消息推送
  12. 针对移动设备的优化
  13. App的设计应适应新兴市场
  14. 测试和反馈

1. 降低认知负荷

认知负荷指用户使用App时所需的大脑能量。人脑的处理能力有限,而且当App一次性提供过多信息时,可能会让用户产生压迫感,并促使他们放弃使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.1. 整理界面

减少产品的凌乱感是一个有效的方法。凌乱是糟糕产品的最大特征,如果界面堆满了杂乱的元素,用户就要承载过多的信息:每个新增的按钮、图片和icon都会让界面更加臃肿。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

凌乱的桌面让我们心烦,凌乱的产品则会让用户更加烦躁(这点很容易理解,智能手机的屏幕更小,凌乱感相应地会被放大)。产品经理和交互设计师应该尽量去掉App中的不必要元素,因为降低凌乱感有助于提高用户的理解力。简约的界面和功能设计不失为好方案:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 将内容数量保持在最低限度,只展示用户必须知道的内容;
  • 尽量减少界面元素,让产品的界面更清晰,这也有助于降低认知负荷;

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

右图所示的tab bar明显优于左图(图像来源:Apple)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 使用渐进式呈现(Progressive Disclosure)的方法展示更多元素或者选项。

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

点击后,展开更多隐藏项(图片来源:Ramotion)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.2. 减少任务

寻找产品方案中任何可能需要用户思考的模块(可能是表单输入或者选项选择),并找寻其他的替代方案。举例来说,某些情况下,可以通过本地缓存记录数据,而不是要求用户每次都在相同的地方反复输入;此外,还可以根据用户的使用行为和使用习惯,为用户设置默认值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.3. 分解任务

如果一项任务包含多个步骤、需要用户执行多个操作,那最好将其分解为若干相关的子任务。这个原则在移动端产品设计上非常重要,因为不应让用户一次性承载过多过复杂的任务。一个很好的例子是电商App的下单购买流程,在电商的购买任务里,原本一个复杂的任务被分解为一系列逻辑递进的子任务,用户在每个子任务中分别执行所需操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

任务分解后,降低了用户对任务的难度预期(图片来源:Murat Mutlu)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

一方面,分解任务降低了用户的认知负荷,另一方面,也起到连接不同任务的作用。比如浏览和购买在逻辑上相关,但在实际操作中无关,但由于用户在各个任务里的操作复杂度基本相同,所以从浏览到购买有比较好的过渡,用户在不同任务衔接时也不会感到突兀。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

购买电影票的任务分解(图片来源:Anton Skvortsov)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.4. 使用常见的界面设计方案

常见的界面设计方案是指多数App使用的设计方案,包括导航栏位置、交互方式、tab话术等。在近十年的移动端产品发展中,很多界面元素的设计方案已经是习以为常的定式,不需要规定也不需要解释,因为用户已经熟悉这种设计方式了。用户使用已形成的使用习惯来使用新App时,避免了学习成本和可能带来的流失。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

Quora的用户页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.5. 尽量减少用户输入

在手机屏幕上打字的用户体验极差,这单纯因为物理尺寸太小,和软件性能无关,再熟练的用户都会出现打错字的情况。需要用户手动输入的最常见场景就是填写表单,这里有一些建议可供参考:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 删除任何不必要的字段,缩短表单长度,保证用户输入最少的内容;

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

表单设计的准则是越短越好,可以将多个字段合并(图片来源:Luke W.)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 使用input mask,这是一种帮助用户格式化输入文本的插件,能够执行对输入内容的切断、分组等操作,帮助用户专注于表单填写上,让用户更容易发现错误;

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

(图片来源:Josh Morony)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 使用诸如自动填充的智能功能。比如,填写地址是任何登记类表单中最容易出问题的地方,可以先根据手机定位自动填充地址信息,这样在大多数场景下,用户只需要进行简单的修正即可;
  • 动态验证字段值。提交后才能知道输入错误,然后再返回更正,这点的用户体验很差。如果有可能,应当在用户输入后立即检查输入字段的准确性,以便用户可以立即更正;

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

在线的实时验证(图片来源:Baymard)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 根据字段类型显示键盘类型。在输入电话号码时,应显示数字键盘;如果输入的是电子邮箱,还需要包括@键。要确保这个功能在整个App中都是一致的,而不仅限于某些表单。

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

将键盘匹配所需的文本类型(图片来源:ThinkWithGoogle)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.6. 预估用户需求

在产品设计阶段,需要根据用户的操作路径使用产品,主动发现使用流程中的潜藏痛点。比如在下图中,提示了用户需要提供信息的具体位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

这种字段旁的简明帮助文本很有效(图片来源:Hotjar)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.7. 用视觉重量传达重要性

界面里最重要的元素应该有最直观的重量。增加元素的重量可以通过改变字重、大小、颜色等方式实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

大尺寸元素比小尺寸更吸引眼球文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.8. 避免专业术语

在任何移动端产品设计里,清晰准确地表达信息都是最重要的。使用目标用户习惯的表达方式,而不是你的产研团队习惯了的表达方式(或者行业术语)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

移动端产品设计完全指南1:降低认知负荷文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

行业术语或短语会增加用户的认知负载(图片来源:ThinkWithGoogle)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

1.9. 一致性设计

一致性是设计的基本原则,一致性有助于降低混乱度。在App设计中,一致性意味着以下内容:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 视觉的一致性:App里的字体、按钮形式、文本标签样式需保持一致;
  • 功能的一致性:交互方式和交互元素在各个页面中应保持一致;
  • 产品间的一致性:同一系列的不同产品之间需保持一致性(比如网易邮箱和网易云音乐),这样能降低用户使用相关产品的学习成本。

关于设计一致性,有如下的建议:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 遵循平台指南/规范

每个移动端的操作系统都有界面设计的标准指南,比如苹果的界面设计规范。遵循平台规范很重要,因为用户已经熟悉了他的手机操作系统,任何与这个系统的交互模式相悖的产品都会在使用过程中出现摩擦、造成用户的不适感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 不要模仿其他平台的UI设计

在为Android或者iOS设计App时,不要参考其他平台的UI设计。icon、功能模块(输入框、复选框、开关等)、字体等元素应保持该系统原生的感觉。尽可能使用原生系统的组件,这样会增强用户的信任感。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 保持同一产品在不同终端的一致性

这属于产品间一致性的范畴。如果你的产品同时有Web端和移动端,那么应尽可能地保持二者的风格一致,这将减少用户在PC和手机间切换的不适感。二者的不一致(比如不同的导航方式或者不同的配色方案)可能会造成混乱,增加用户的认知负荷。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/1468.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/sheji/1468.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定