作者：王争
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
争论点：用户体验设计师的交互指南试读：
前言
为什么写书
对设计师来说，工作能力从来不会跟工作年限画等号。很多设计师已经工作了5年以上，但是对于一些知识点的认识还停留在很浅显的阶段。他们满足于一知半解，觉得够用就行，对于设计原理不会深入研究，知其然而不知其所以然。这类设计师很容易进入职业生涯的瓶颈期而无法再提高，我也曾经进入过瓶颈期。当时我希望可以通过大量地看视频和阅读文章来提升自己的能力，但是效果一直不太明显。因为我没有对这些松散知识点进行总结，使之“系统化”。界面里的每一个元素都不是以独立的个体而存在的，它们相互联系，相互影响。罔顾整体的影响，就会使得我们对个体的学习很片面，不得要领。因此，“设计理论系统化”是我一直追求的目标，而市面上这样的书很少，这本书算是我的一次探索和尝试。在本书中我用通俗易懂的文字深入浅出地阐述设计原理，书中的每一个理论，我都会加上产品实例加以论证，方便读者理解。
本书内容
本书共分为5章，各章内容介绍如下。
第1章：不管是产品经理还是设计师，我们的目的都是为了提升产品的用户体验。那么用户体验到底是什么？我们怎么衡量一款产品的用户体验水平？本章开门见山地介绍了产品用户体验的基本概念，将用户体验分为六大基本原则：有用性、可见性、易感知、易用性、容错性和一致性，并且针对每个原则进行了详细而系统的阐述。
第2章：本章主要列举了几个让设计师比较头疼的问题，例如：设计规范、界面适配、手势设计、异常场景设计。这些问题也会让很多工作好几年的设计师经常犯晕，这里我结合了大量的产品实例对其进行了深入的讲解。
第3章：界面中的元素主要分为8类：色彩、布局、文字、图标、按钮、间距、插画、动画，这些元素共同构成了产品的界面。设计师的职责就是在界面中合理地分配这些元素，让用户更好地使用。本章主要介绍了界面设计中基本元素的设计思路。
第4章：界面里的每一个元素都不是以一个独立个体而存在的，它们相互联系，相互影响。所以，设计师在设计的过程中，着眼点应该是整个产品。本章主要通过介绍常见设计体系的构建，探讨设计师如何从产品的维度进行设计。
第5章：本章主要介绍常用组件的使用方法。很多设计师对于组件只做到了浅尝辄止：只会使用Toast通知用户，只会使用文本框让用户录入信息。他们不会深究每个组件最适用的场景。对一名优秀的设计师来说，一旦一个功能可以由多个组件完成，他就需要选择出那个最合适的组件。
致谢
感谢本书的编辑王静，她在2017年10月就向我邀稿。2018年5月，我正式下定决心开始写书，到现在本书出版，整整一年，感谢她一直以来给予巨大的帮助。
感谢我的朋友夏彩云，在我最开始翻译文章的时候，远在德国的她一直在帮我审核文章的内容，保障了我的文章的质量。
感谢孙律明老师在2016-2018年这两年来的启发和引导，让我明白设计不止于界面设计。感谢贾考祥在我2018年转型的时候给予我的巨大的帮助。感谢所有关注我的朋友，你们的认可和支持是我埋头写书最大的动力。
勘误与互动
本人虽然已经竭尽全力，但是书中难免会有一些错误，欢迎大家在我的个人微信公众号“王M争”中直接反馈问题。我也会定期发布书籍的勘误信息。作者第1章 用户体验入门
什么是用户体验？用户体验的评价标准又有哪些？1.1 什么是用户体验
近年来，“用户体验”作为一个热词，在越来越多的场合中被提及。很多互联网公司都打出口号要提升产品的用户体验，并且成立了专门的UED部门或者小组推进产品的用户体验优化工作。
这是一个非常令人欣喜的现象，其表明用户体验在产品设计中受到越来越多的重视。这也意味着，用户体验将作为一个新的指标用以评价我们这些互联网行业从业者的能力。为了不被淘汰，也为了可以有更好的发展，我们需要更新自己的技能库，将用户体验纳入自己的知识框架中。
要系统地了解和学习用户体验，首先我们得知道究竟什么是用户体验。这个问题虽然看似有点儿“多余”，但是我发现很多设计行业的从业者都没有弄清楚用户体验的含义。
用户体验是一个含义很广泛的术语，百度百科给出的用户体验定义是：用户体验（User Experience，简称UE/UX）是用户在使用产品过程中建立起来的一种纯主观的感受。要理解这句话的含义，就要弄明白这里所提到的“产品”和“纯主观感受”是什么意思。1.1.1 产品
很多人都对用户体验存在一个误解，认为用户体验仅存在于互联网领域中。如果按照这个思路，那么上文所说的产品必然也就是特指互联网产品，其实不然，任何可以解决用户痛点（需求）的事物我们都可以称为产品。而用户在使用产品过程中所产生的心理反馈就是用户体验。
手机满足了我们对于沟通的诉求；高铁满足了我们对于出行速度的诉求；餐馆满足了我们对于美食的诉求（见图1-1）。因此，我们可以说手机、高铁和餐馆是产品，我们在与之“交互”过程中所产生的心理反馈就是用户体验。图1-1 强哥的手机、高铁和大学时代的最后一次聚餐
如果一家餐馆的灯光柔和、服务员态度热情，并且在客人就餐过程中会播放轻缓、唯美的轻音乐，那么我们可以说这家餐馆的用户体验做得很到位。
所以，用户体验虽然因为互联网而被大家熟知，但是用户体验绝对不仅仅存在于互联网领域中，它存在于生活中的方方面面。我们通过深度学习掌握互联网产品用户体验的核心知识，在其他领域同样适用。1.1.2 纯主观感受/心理反馈
心理反馈是建立在用户对产品的感知上，而用户对产品的感知来自感官。眼睛是“心灵的窗户”，90%的外界信息都是通过眼睛来获取的，这也是很多人把用户体验设计误认为UI（User Interface，用户界面）设计的原因。用户体验设计是一个庞大的体系，如图1-2所示。图1-2 用户体验设计体系
2017年，为了提升产品的用户体验，领导让我组织一次产品线交叉“走查”活动。因为产品线的负责人每天都在做自己的产品，很难发现其中的问题。所以我们安排大家互相“走查”对方的产品线，希望能发现更多的问题。不过有一条产品线的负责人当时就拒绝了我的要求，他的理由是他们的产品是根据设计部门最新给的设计规范做的，所以用户体验没有问题。
这样的观点是狭隘的，因为用户体验设计的范围要远大于UI设计。以一个抽奖活动页为例，如图1-3所示。如果我们要评价这个抽奖活动页的用户体验，那么评价指标不仅仅是这个页面配色是否好看，按钮位置是否居中，还应该包括活动规则乃至奖品的领取方式，因为这些都会影响用户在使用过程中的感受。所以，要做产品的用户体验优化工作，不能给自己设限制。用户体验优化工作是没有禁区的。图1-3 用户体验设计≠UI设计
以iOS 12系统为例。据官方介绍，iOS 12系统中的APP启动速度快了40%，输入法调出速度快了50%，照相机启动速度快了70%。对iOS系统中的应用程序来说，即使设计者没有在交互和视觉层面做出优化，其用户体验同样得到了提升。
我们可以将用户对于产品的心理反馈理解为用户对于产品的满意度。而满意度其实是一个特别虚无缥缈的东西，“一千个人眼里有一千个哈姆雷特”。对于同一个事物，不同的人有不同的看法，因为所处的位置不一样，观看的角度也不一样。所以，经常会有人觉得用户体验是一门玄学，因为它无法被量化。我平时很喜欢分析一些产品，因为自己不是这些产品的开发人员，也没有准确的数据，所以，很多时候我的分析会很主观。很多分析都是错的，但是独立思考的习惯和态度应该是一个合格设计师所具备的基本素养，或许有的时候思考到最后也无法得出一个令自己满意的答案，但是这个思考的过程对我们来说比得到“那个答案”可能更加重要。在不断犯错，不断否定之前的自己的过程中完成进步。1.1.3 用户体验的评价模型
要优化产品的用户体验，首先我们得知道什么是好的用户体验，什么是差的用户体验。这就要求我们必须建立一套合理的用户体验评价模型。
当我们评价一个事物的时候，首先要分清楚这是属于价值判断还是属于事实判断。在我看来，对于互联网产品（以下简称“产品”）和电影的评价，属于典型的价值判断：只有喜欢/不喜欢，没有一定要怎么样。我说我喜欢周星驰拍的电影，你非说看喜剧电影没有品位，应该看王家卫拍的电影。价值判断就像评价“王家卫和周星驰谁拍的电影更好”一样，是没有正确答案的。
我们可以通过活跃用户数、人均打开次数、使用时长等指标来评价一款产品在商业上的表现，但是，评价一款产品的用户体验不能仅仅看这些指标。很多“国民级”的产品，即使拥有数以亿计的用户量，我们也不能说这款产品的用户体验就做得很好，例如改版前的12306 APP。和电影一样，没有任何一套公式或者模型可以真正做到能精准无误地用量化的方法去评估产品的用户体验水平。
我曾经看过一家公司UED部门出过的一套用户体验指标度量体系。我看了一下，该体系共有21项评价指标，对产品经理或设计师来说可操作性不是很大。因为该体系的记忆成本太高，我们在做产品设计的时候，不可能时时刻刻记住这21项评价指标。所以，产品用户体验的评价模型或者优化原则必须要力求精简。
用户体验评价模型有很多，每个模型都有自己的细分指标。我总结出有六大用户体验要素：有用性、可见性、易感知、易用性、容错性和一致性，如图1-4所示，本书的内容主要就是围绕这六个要素来展开的。图1-4 用户体验评价模型
当然，需要申明的是，这些并不是我原创的，而是我根据行业里各位前辈们的理论总结出来的。构建这个评价模型，最难的部分就是定义。用户体验本身是一个非常庞大的体系，如果不对其进行分类梳理就想理解和学习，就会让你无从下手。但是，用户体验的各个要素又是相互关联的，很难划分明确的边界。所以，各个要素在边界划分的时候难免有相互重叠的地方，希望读者可以将其连接起来。1.2 有用性
为什么把有用性放在第一位呢？因为产品是功能的集合，功能的存在意义在于解决用户的痛点，满足用户的需求。如果我们的产品无法解决用户的痛点，那么将它做得再精细又有什么用呢？百度网盘9.0大改版后，用户的评论都是围绕着“下载速度”这一话题的。由此可见，对百度网盘的用户来说，他们的首要诉求是“更快的下载速度”，产品的界面做成什么样他们真的不是很关心。
如果现在你“砸”钱去开发一款手电筒应用程序，则即使界面做得非常好看，估计用户量也会少得可怜，如图1-5所示。因为现在很多手机都支持开启闪光灯来进行照明，所以用户为什么要额外安装你的应用程序？有用性是一款产品或者一个功能底层的特性——满足用户的需求。图1-5 电影《国产凌凌漆》里的光能手电筒1.2.1 需求分类
根据KANO模型，我们可以把需求分为基本型需求、期望型需求和魅力型需求。为了方便理解，你可以把它们理解成基本工资、绩效工资和奖金。
基本型需求是用户认为你的产品必须要具备的功能，如果没有，则用户可能会立马卸载你的产品。如果支付宝APP不支持转账、付款、线下支付等功能，那么用户可能会立马放弃使用支付宝APP。
期望型需求不属于“必需”的需求，但是用户希望你的产品可以满足这些需求。例如，支付宝中的便民服务功能。用户可以在支付宝APP中交水电费、买火车票、买地铁票，有的城市的用户甚至可以在其中查询社保和公积金账户信息。这类需求在产品中实现得越多，可以满足用户的使用场景也就越多，用户的满意度也就越高。
魅力型需求就像电影中的“彩蛋”一样，对用户来说是一种惊喜。我来翻译一下什么叫作惊喜。我理解的惊喜就是用户也不一定能想到的需求，其隐藏在期望型需求下面，需要我们自己去挖掘。下面我通过购买火车票这个场景来具体说明一下这三种需求之间的关系。
对12306 APP来说，购买火车票是基本型需求，而对支付宝APP和京东金融APP来说，则属于期望型需求。在节假日期间，火车票非常难买，此时你在上海工作，要购买火车票回南京过年。可是到南京的直达车的票非常难买，你只能退而求其次，购买到常州或者苏州的票，上车后再补票。这就是产生了一个魅力型需求——给用户展示途经站点。当然，需求的定位是会随着时间而改变的，就像在以前冰箱、彩电和洗衣机属于期望型需求，但现在是基本型需求了。
京东金融APP的解决方案是通过一个弹框来展示该次列车途经的所有站点，看起来问题得到了完美的解决。但是，用户要求展示途经站点的根本诉求是上车后再补票，如果不提供每个站点的余票数量，则用户还要挨个查看每个站点的余票，非常不方便。而支付宝（飞猪）APP就更加人性化一点，直接提供上车后再补票的功能，过滤无余票的站点，并且用户可以直接点击购买，如图1-6所示。图1-6 支付宝（飞猪）APP的上车补票功能可以过滤无余票的站点
从上面这个例子可以发现，要提升产品的用户体验，就要学习挖掘与分析用户的需求。因为在很多时候，用户无法准确地表达自己的诉求，特别是魅力型需求。在150年前，如果你问一个用户想要什么样的交通工具，那么他可能会告诉你想要一匹跑得特别快的马。“特别快的马”的本质就是对速度的追求，如果我们不提炼出这个核心需求，每个人都去马场配种，那么汽车永远无法被发明出来。1.2.2 用户体验地图
很多设计师容易犯的错误是无法解决用户全面的痛点，经常会遗漏一些用户需求。为了系统地梳理用户在产品使用过程中的痛点，我们可以绘制用户体验地图。
1.什么是用户体验地图
用户体验地图可以可视化地展示用户使用产品或接受服务的体验情况，以此来发现用户在使用过程中的问题点和满意点。
用户体验地图一般是产品经理或用户研究团队负责绘制的，我之前给一些产品经理们推广过用户体验地图，但是收到最多的反馈就是不会画。因为很多产品经理并不是设计出身，不会使用Photoshop、Sketch等软件。但是不会使用绘图软件就等于不会制作用户体验地图吗？很多人存在一个误区：把工具等同于技能。例如，认为会使用Photoshop就等于会设计。这一点我们应该深有体会，经常会有朋友找你帮忙“P”一个LOGO，而不是“设计一个LOGO”。
2.怎么画用户体验地图
一个合格的用户体验地图由以下几个模块组成：用户画像、用户目标（需求）、操作阶段、动作、痛点、情绪和优化点，如图1-7所示。图1-7 绘制用户体验地图的过程就是对产品进行拆解的过程
用户画像：不同产品的目标用户群是不一样的，所以在给产品做用户体验地图前必须明确产品的用户画像；
用户目标：用户是抱着什么目标去使用你的产品的？例如对一个金融产品来说，用户想要通过它进行存款、理财、贷款；
操作阶段：用户要实现这个目标要经历哪些阶段？例如，用户要借款，必须要经历录入借款金额-选择收款账户-验证密码-短信/刷脸验证这些阶段；
动作：在每一个阶段用户又需要哪些具体的操作行为；
痛点：痛点是用户体验地图最有价值的产出物，我们的目的就是系统地梳理出用户在操作过程中不满意的地方；
情绪：情绪曲线可以直观地展示用户在整个产品使用过程中的情绪变化；
优化点：优化点和痛点是相对应的，针对发现的痛点进行针对性的优化。
从上面的分析中，我们可以看出来，绘制用户体验地图的过程就是对产品进行拆解的过程。首先根据用户画像，分析用户的预期和目标，然后挑选出几个主要的目标。分析用户为了实现这个目标需要经历哪些阶段？每个阶段又对应哪些具体的操作？每个操作的具体痛点和优化点又是什么？这样一来，偌大的产品可以被拆解到动作节点的维度，方便我们进行系统的梳理和分析。
会使用Photoshop并不等于会设计，Photoshop只是实现设计方案的一个工具。不会使用专业的绘图软件没有关系，我们不要拘泥于形式。用户体验地图的绘制过程就是产品的拆解过程，只要你可以系统地拆解整个产品，用Excel画都可以。1.2.3 用户视角
要找到用户的痛点需要我们站在用户的视角考虑问题。例如，现在一些交通旅行类的产品可以支持用户在购买火车票的时候选择换乘服务。在换乘服务中会存在一个问题：因为现在很多城市都不止有一个火车站，如果用户对此不注意，那么极有可能造成行程延误，所以一些产品就会给用户一些提示，如图1-8所示。图1-8 异站中转给用户提示以免延误
想要做到全方位地满足用户需求，这就需要设计师在产品设计阶段把自己带入用户的角色，体验一下产品使用的全流程。
当用户进入一个产品页面时，他会对这个页面中的内容有一个心理预期，这个心理预期就是他的需求，我们要尽量满足。例如，现在很多用户都接触过小额贷款服务，此时我们要设计一个类似“我的借款” 的聚合页，在这个页面中用户期望看到什么呢？从我的角度来说，我想知道自己总共借了多少钱，总共借了多少笔，总的利息大概是多少，最近一期的待还金额和日期是多少。对比图1-9所示的两款竞品，我们发现，左边的产品没有为用户提供近期待还款的金额和日期，而右边的产品没有提供利息总额。用户想要查看就必须进入每笔贷款的详情页，增加了查看路径，这些都属于可以优化的地方。图1-9 满足用户的心理预期
此外，我们还非常有必要分析需求的优先级，明确高层次的需求和低层次的需求。因为每一个需求映射到设计层面后，可能是一个 icon，也可能是一个页面。对于一些次要的需求，我们在展示上要尽量弱化。以图1-10为例，同样的购票界面，用户的主要需求是选座位。而更换场次属于次要需求，但它的展示形式只是一个 icon，没有打乱整个界面的布局，也没有过度分散用户的注意力。图1-10 次要功能在界面中不能抢风头1.3 可见性
从操作流程的角度来说，用户要使用一个功能，首先必然要找到这个功能。如何让用户快速找到目标功能呢？我们需要建立有效的产品导航体系，明确产品的功能路径。1.3.1 合理的信息架构
信息架构是一款产品的骨架，其本质就是分类。为什么要分类？因为产品是众多功能的集合体，如果不对其进行分类整合，那么用户很难找到自己想要的功能。
信息架构不仅仅存在于互联网产品中，投射到现实生活里，导视图就是商场的信息架构，目录就是书籍的信息架构（见图1-11）。不管是导视图还是目录，目的都是帮助用户尽快地找到自己想要的。那么到了产品中，信息架构的作用就是帮助用户找到期望的功能。图1-11 生活中的信息架构
搭建合理的信息架构要注意两点：
第一，平衡好信息架构的广度与深度。广度指的是页面的长度，深度代表页面的层级。页面越长，可以展示的功能越多，但是这也并不是好事。
埋点数据表明，页面超过一屏后，页面的曝光量会急剧下降，用户很少会查看一屏以外的内容。因此，虽然你的产品功能处于一级页面中，但是只要超过了一屏，其曝光量说不定还不如二级页面。要注意控制页面的长度，尽量保持在1.5屏以内，如图1-12所示。图1-12 超过一屏的内容用户其实很少去看
当然这个问题说起来简单，可操作性非常差。因为每一个功能的业务方都希望自己的功能入口可以被放在产品的“首页”和“我的”这样的一级页面中，这就导致了一级页面非常长。我们可以考虑根据用户画像给用户进行个性化推荐，让每一个用户看到的内容都是不一样的，由“千人一面”转变到“千人千面”。这样在保证内容可以精准地触达目标用户的同时，还有效地控制了页面长度。
页面不能太长，也不能太深，层级越深，用户的查找路径也就越长。以图1-13所示的设置页为例，其中一些功能被放到了四级页面中。不是说不能出现四级页面，四级页面并不是原罪。只是在当前页面中还有1/3空间空闲着的情况下，出现功能层级过深是不合理的。埋点数据显示，一些四级页面的流量比三级页面的还要多。所以，对设置页进行信息架构的重建是非常有必要的。
在搭建信息架构时，首先应该确保页面的长度在1～1.5屏内，在此基础上，要注意协调功能的层级，避免出现“宽而浅”和“窄而深”的问题。
第二，信息架构的逻辑性经常会被我们忽略。用户并不是互联网“小白”，在使用你这款产品之前，他们可能都用过上百款APP了。他们在使用那些产品时所积累的经验会让其在心中建立出一个产品画像，这个产品画像就是逻辑。不符合逻辑的设置会对用户造成干扰。例如，大部分的电影院都位于商场的顶层，所以，用户的心理预期是电影院就应该在顶层，可能会下意识去顶层找电影院。如果你把电影院安排在二楼，这就是不符合逻辑。不要挑战用户的固有认知。
以图1-13为例，如果你是用户，打算修改账户的手势密码，那么在这个界面中，你是点击“账户安全中心”选项，还是点击“密码设置”选项？对于我来说，我会点击“密码设置”选项，因为在我的认知里，手势密码属于密码的范畴。而这个产品将手势密码放在账户安全中心里，在我看来，这样的分类是不合逻辑的，会给用户造成干扰。图1-13 窄而深的信息架构1.3.2 跳转动作
如果说信息架构是地图，可以让用户清楚地了解目的地在哪里，那么跳转动作就是交通工具，带你快速地到达目的地。跳转动作可以让用户对功能信息快速定位，减少用户的操作步骤。
如图1-14所示，这里有一个报错场景，需要用户重置支付密码。如果使用左图所示的对话框样式，那么用户需要返回至“我的”页，找到设置页后再进入支付密码设置页，完成支付密码重置，整个步骤特别烦琐，而且对新用户来说，他们甚至都不知道在哪里重置支付密码。如果使用右图所示的对话框样式，给予用户直接去重置支付密码的选项，则减少了用户的操作步骤。图1-14 用户可以直接点击文字按钮去重置支付密码
图1-15所示的是两款竞品，具有同样的客服功能。在左图所示的产品中，如果用户想修改绑定的手机号，那么会自动回复更换绑定手机页的路径：“我的—安全设置—修改手机号”。这个做法其实对用户来说非常不友好，因为如果功能层级过深，则会使用户的记忆成本很高。如果这里直接提供跳转超链接，如右图所示，让用户可以直接跳转到目标页，就会方便很多。1.3.3 快捷入口
对于一些热门的功能，可以考虑为给其提供一个快捷入口，就像“任意门”一样，缩短用户的操作路径。我们最熟悉的快捷入口有Shortcut或者3D Touch等，如图1-16所示。图1-15 提供跳转超链接，减少操作步骤图1-16 提供快捷入口
具体到产品内部，快捷入口在展示形式上可以被分为两类：浮动类入口和固定类入口。浮动类入口顾名思义就是浮在界面上的入口，例如虎扑APP中的“发帖”功能和链家APP中的“地图找房”功能都采用了浮动按钮样式，如图1-17所示。图1-17 浮动按钮
浮动类入口的优点在于可以很好地吸引用户的注意力，缺点在于会对界面中的内容造成遮挡，有的时候遮挡到重要的区域会极大地伤害产品的用户体验。例如，如图1-18所示，这里的网络故障提示直接把返回按钮给遮挡了，用户要离开这个界面必须得停止程序进程，这非常不合理。
如图1-19所示，微信的浮窗可以随意更改位置，避免遮挡重要内容，这是一个很好的处理方法。
固定类入口一般被融入界面中。为了不破坏当前页面的布局，其一般会出现在页面的顶部栏或底部栏中，因为页面中间一般为内容区，而内容百变，很难做到与其完美融合。图1-18 浮动方元素会对界面内容造成遮挡图1-19 用户可以自由调整浮窗的位置，避免对重要内容造成遮挡
例如，我们一般会在页面的右上角提供“帮助中心”的入口，其实用户使用“帮助中心”的频率并不是很高，但是它又不得不存在。在网易云音乐APP中，其大多数页面的右上角都有歌曲播放图标，用户点击可以直接进入歌曲播放界面，如图1-20所示。
底部栏菜单也可以作为快捷入口，但是只有一级页面中才会有底部栏菜单。用户点击进入更深层级的页面后，这个快捷入口也就消失了。当然我们也可以更加灵活一点，以蜻蜓FMAPP为例，在一级页面中，播放界面的入口被放在底部栏菜单中，而进入二级页面后，入口变成了浮动按钮，如图1-21所示。图1-20 顶部栏的快捷入口图1-21 不同的层级，不同的展示样式1.4 易感知
与传统媒介相比，互联网产品所包含的内容更多，而且更加复杂。以书籍为例，我们读书时都是一页页地翻，一句句地读。但是我们无法期望用户像读书一样来使用互联网产品。尼尔森的一项统计显示，互联网用户平均只读了每个页面文本内容的28%。这意味着用户很少会读完大段的文字，他们更多地是“扫描”。所以，互联网产品必须要思考如何提升用户对信息的感知效率，让用户在短时间内就可以获取到他们期望的信息或者我们希望他们感知到的信息。1.4.1 信息优先级
一个页面中会有很多信息，但并不是所有的信息对用户来说都是有用的。根据“二八原则”，80%的用户平时只用到了一个产品20%的功能。这就要求我们要梳理信息的优先级，把重要的20%的信息在视觉设计上进行凸显，让用户在快速浏览的模式下，可以看到他们感兴趣或者我们希望他们关注的内容。如何凸显这些信息呢？可以通过合理运用位置、间距、配色、形状和阴影等视觉要素来建立信息层级以完成区分。 我们的目的是让用户在短时间就能清楚这个页面中各个元素之间的联系。
例如，当用户打开旅行类APP进行旅程规划时，在“日期选择”功能中，应该对周末和国家的法定节假日进行标示。如图1-22所示，Skyscanner是一个旅行类APP，这里的日历将周六和周日与其他日子区分开，这个设计很有心，因为周末是大多数人选择旅行的时间，所以应该突出展示，让用户更容易发现。图1-22 Skyscanner
图1-23所示的这个登录页比较常见，在“登录”按钮下有三个超链接，分别是：“忘记密码？”“立即注册”和“游客登录”。为了吸引新用户，我们通常希望新用户点击“立即注册”这个超链接，所以，这里使用了橙色将其凸显出来。这属于通过配色来实现对比。其实在这里除使用配色外，还可以使用大小和位置来实现对比，将“游客登录”超链接移到下方，缩小字号。这两种设计方案都可以很好地鼓励用户完成注册。图1-23 鼓励用户去注册1.4.2 缩短路径
为了让用户可以更好地获取信息，我们要缩短信息的获取路径。要知道信息的层级越深，用户的获取成本就越高。例如，如图1-24所示，用户要查看已结清的贷款记录，在这个页面中只能看到贷款金额和贷款日期，如果想查看更多的贷款详情，就要点击进入贷款详情页。市场上很多的金融类产品都采用这样的处理机制，但是这样设计就是好的吗？首先右边的“已结清”的文字标签在这里完全是多余的，因为根据上面的tab栏，我们已经知道这里显示的都是已结清的贷款项。对于这种鸡肋型元素，我们完全可以去掉，这样页面中的空间就会被释放出来。我们可以更改一下布局，将贷款的“还款方式”和“用途”这两个用户比较关注的信息外露，这样用户不需要点击进入详情页就能看到这两个信息。
其实，一款优秀的产品应该做到让页面里的每一个元素都有自己的意义，都是一个小功能，都可以向用户传递信息。以网易云音乐APP为例，如果当前播放的歌曲未下载，那么“本地音乐”那一栏展示的是歌曲数目；如果当前播放的歌曲已经下载了，那么“本地音乐”那一栏展示的是小喇叭icon。同样的位置，通过更改元素就可以向用户传递不同的信息，如图1-25所示。图1-24 让页面里的每一个元素都有意义图1-25 网易云音乐APP1.4.3 信息可视化
当我们设计出一个抽奖活动页时，如果别人问你这个活动是怎么玩的，你回答“下面有具体的活动规则自己看”，这样的抽奖活动页就是不合格的。因为用户是不会看活动规则的，准确地说，用户很少看文字。在用户不看文字或者很少看文字的前提下，如何通过具象元素完成信息的传达是摆在每一个设计师面前的难题。
俗话说“字不如表，表不如图”。用户对于具象元素（表格、插画、icon和图像等）的感知能力更强，具象元素也更能传递情绪。例如，道路两旁的路标多数是以图形为主体的。这是因为在车子高速行驶的过程中，司机没有足够的时间阅读标示上的文字。
如图1-26所示，“场均得分122.4分，30.6个助攻，46.25个篮板……”这些数据对我们来说只是冷冰冰的数字，很难理解其背后的含义。这里使用了雷达图对球队数据进行了可视化处理，提升了信息的可读性。因为相比纯文本，用户理解图形的速度要快得多。图1-26 雷达图
如图1-27所示，以谷歌日历APP为例，如果用户要做瑜伽，谷歌日历就会在日程详情页中配一个瑜伽垫的插画；如果用户要跑步，其就会配一幅跑鞋插画。用户甚至不用看文字，通过插画上所描绘的场景就可以知道自己接下来的行程。
举一个现实生活中的例子，我们发现朋友圈中“晒图”获得的点赞和评论数量要远高于分享歌曲和文章。当然造成这种现象的原因有很多，例如经常“晒图”的人要么长得好看，要么个性开朗、热衷于社交，这类人比较受欢迎。另一个原因就是信息的可读性，点赞和评论的前提是你要明白这条动态的意思，对于一张照片，我一秒钟就能明白其中的含义，而对于一首歌曲和一篇公众号文章，我需要花3～5分钟才能理解，有这个时间几十张照片都已看完，所以评论关于歌曲和文章的动态所需的时间成本太高。图1-27 不同的日程配以不同的插画，帮助用户快速识别1.4.4 化繁为简
用户所能接受的信息量是有限的，如果页面中的内容过多，用户就会望而却步。为了更利于用户消化信息，可以将一个页面中的信息拆解到几个页面中来展示，这样单个页面中的信息量就会大大减少，这就是我们常说的“一个页面，一个任务”原则。
例如，现在很多产品都对注册流程进行了拆解，不像之前那样由一个页面完成所有信息的输入，而是分成好几个页面来完成：在这个页面中只输入手机号，在下一个页面中只输入短信验证码，最后再让用户设置登录密码，如图1-28所示。
产品为了更了解用户，在用户首次登录的时候会询问一些个人信息。如果把所有的问题都放在一个页面中，用户很有可能会选择直接跳过这一步骤。一个页面只问一个问题，然后一步步地诱导用户完成个人信息的填写。图1-28 一个页面，一个任务
但是，任何事物都是有利有弊的，一个页面就能完成的任务现在要跳转到几个页面中，增加了用户的操作路径，可能会对转化率造成影响，而且对产品的容错性也提出挑战。以图1-28所示的短信快捷登录为例，如果用户没有收到短信，那么他想要确认自己有没有输错手机号，就必须返回上一个页面。所以，在设计中，并没有放之四海而皆准的原理，我们不能罔顾实际情况而机械地套用。
那么可不可以在不删减当前页面内容的前提下，让内容更容易被用户消化呢？当然可以，还是同样的原则：化繁为简。将大的模块切割成小的模块，让用户了解页面的信息结构，提升内容的可读性。就好比你看到一篇5000字的公众号文章，整篇文章就一个段落，更别说分成小的章节了，这样的文章看起来会很费劲。
同样，当表单项目过多时，我们要通过将其整合分组来提升内容的可读性。如图1-29所示，右表格将左表格中的11个项目分成3组。同样数量的内容，但用户的观感却大不相同。图1-29 信息整合提升内容可读性
当然，在运用“化繁为简”原则时一定要考虑具体的场景，切勿盲目生搬硬套。有的教程会比较长，而且上下文关联性强，如果分页展示就会让用户难以理解。比如你看到一个教程，其中第5页会用到第4页里的知识，这时候如果要跳转到第4页中去看就会显得很麻烦。“化繁为简”原则不一定仅存在于交互和视觉设计上，还与产品的运营策略有关。支付宝和京东金融都有各自的会员等级体系，支付宝的蚂蚁会员等级是根据蚂蚁积分来判定的；京东金融的会员等级是通过会员成长值来判定的。但是支付宝中的用户可以直接将蚂蚁积分兑换成商品和权益，京东金融的用户则只能使用金币兑换。而金币和会员成长值的获取方式类似，也就是说，用户在支付宝中做任务获得的积分既可以提升等级也可以直接使用；而在京东金融中做任务只能二选一，因为它们是两套完全不同的体系，这样的设置会增加用户的认知和操作成本，如图1-30所示。图1-30 支付宝APP和京东APP的会员体系
试读结束[说明：试读内容隐藏了图片]