内容简介

    用户体验(User Experience，UE)是用户在使用产品过程中建立起

    来的一种纯主观感受。近年来，用户体验在产品设计中越来越受到重

    视。用户体验虽然因为互联网而被大家熟知，但它绝对不仅仅存在于互

    联网领域，还存在于生活中的方方面面。

    本书主要介绍用户体验设计师需要掌握的一些技能，以及用户体验

    的优化策略，主要内容包括用户体验设计入门、概念、元素、体系、组

    件。全书每个知识点都通过举例或者对比的形式来介绍，具有直观、易

    学的特点。

    本书适合用户体验设计师、交互视觉设计师、产品经理学习。未经许可，不得以任何方式复制或抄袭本书之部分或全部内容。

    版权所有，侵权必究。

    图书在版编目(CIP)数据

    争论点：用户体验设计师的交互指南王争著.—北京：电子工业出

    版社，2019.6

    ISBN 978-7-121-36206-4

    Ⅰ.①争… Ⅱ.①王… Ⅲ.①人-机系统-系统设计 Ⅳ.①TP11

    中国版本图书馆CIP数据核字(2019)第057391号

    责任编辑：王 静

    印 刷：天津千鹤文化传播有限公司

    装 订：天津千鹤文化传播有限公司

    出版发行：电子工业出版社

    北京市海淀区万寿路173信箱 邮编100036

    开 本：787×980 116 印张：17.25 字数：366千字

    版 次：2019年6月第1版

    印 次：2019年6月第1次印刷

    定 价：99.90元

    凡所购买电子工业出版社图书有缺损问题，请向购买书店调换。若

    书店售缺，请与本社发行部联系，联系及邮购电话：(010)

    88254888，88258888。

    质量投诉请发邮件至zlts@phei.com.cn，盗版侵权举报请发邮件至

    dbqq@phei.com.cn。

    本书咨询联系方式：010-51260888-819，faq@phei.com.cn。推荐序

    这是一个人人都讲用户体验的时代，很多“BAT”级别公司中的设计

    团队，已经逐步放弃了交互设计与视觉设计的分工界限，转而重视具备

    综合能力的“用户体验设计师”这个岗位。我相信在不久的将来，“用户

    体验设计师”将成为设计师们新的代名词。这让我们必须从“用户”的角

    度去审视我们的作品。王争是在UI中国用户体验设计平台成长起来的新

    秀，他的文章通俗易懂，非常适合初学者和入行不久的设计师，也得到

    不少会员的支持和肯定。本书同样如此，简单明了的四个模块：概念、元素、体系、组件，把移动端体验设计的基本方法说得很清楚，是用户

    体验设计师前期需要系统了解的内容，值得一看。

    董景博

    中国用户体验设计平台 创始人CEO前言

    为什么写书

    对设计师来说，工作能力从来不会跟工作年限画等号。很多设计师

    已经工作了5年以上，但是对于一些知识点的认识还停留在很浅显的阶

    段。他们满足于一知半解，觉得够用就行，对于设计原理不会深入研

    究，知其然而不知其所以然。这类设计师很容易进入职业生涯的瓶颈期

    而无法再提高，我也曾经进入过瓶颈期。当时我希望可以通过大量地看

    视频和阅读文章来提升自己的能力，但是效果一直不太明显。因为我没

    有对这些松散知识点进行总结，使之“系统化”。界面里的每一个元素都

    不是以独立的个体而存在的，它们相互联系，相互影响。罔顾整体的影

    响，就会使得我们对个体的学习很片面，不得要领。因此，“设计理论

    系统化”是我一直追求的目标，而市面上这样的书很少，这本书算是我

    的一次探索和尝试。在本书中我用通俗易懂的文字深入浅出地阐述设计

    原理，书中的每一个理论，我都会加上产品实例加以论证，方便读者理

    解。

    本书内容

    本书共分为5章，各章内容介绍如下。

    第1章：不管是产品经理还是设计师，我们的目的都是为了提升产

    品的用户体验。那么用户体验到底是什么？我们怎么衡量一款产品的用

    户体验水平？本章开门见山地介绍了产品用户体验的基本概念，将用户

    体验分为六大基本原则：有用性、可见性、易感知、易用性、容错性和

    一致性，并且针对每个原则进行了详细而系统的阐述。

    第2章：本章主要列举了几个让设计师比较头疼的问题，例如：设

    计规范、界面适配、手势设计、异常场景设计。这些问题也会让很多工

    作好几年的设计师经常犯晕，这里我结合了大量的产品实例对其进行了

    深入的讲解。

    第3章：界面中的元素主要分为8类：色彩、布局、文字、图标、按

    钮、间距、插画、动画，这些元素共同构成了产品的界面。设计师的职责就是在界面中合理地分配这些元素，让用户更好地使用。本章主要介

    绍了界面设计中基本元素的设计思路。

    第4章：界面里的每一个元素都不是以一个独立个体而存在的，它

    们相互联系，相互影响。所以，设计师在设计的过程中，着眼点应该是

    整个产品。本章主要通过介绍常见设计体系的构建，探讨设计师如何从

    产品的维度进行设计。

    第5章：本章主要介绍常用组件的使用方法。很多设计师对于组件

    只做到了浅尝辄止：只会使用Toast通知用户，只会使用文本框让用户

    录入信息。他们不会深究每个组件最适用的场景。对一名优秀的设计师

    来说，一旦一个功能可以由多个组件完成，他就需要选择出那个最合适

    的组件。

    致谢

    感谢本书的编辑王静，她在2017年10月就向我邀稿。2018年5月，我正式下定决心开始写书，到现在本书出版，整整一年，感谢她一直以

    来给予巨大的帮助。

    感谢我的朋友夏彩云，在我最开始翻译文章的时候，远在德国的她

    一直在帮我审核文章的内容，保障了我的文章的质量。

    感谢孙律明老师在2016-2018年这两年来的启发和引导，让我明白

    设计不止于界面设计。感谢贾考祥在我2018年转型的时候给予我的巨大

    的帮助。感谢所有关注我的朋友，你们的认可和支持是我埋头写书最大

    的动力。

    勘误与互动

    本人虽然已经竭尽全力，但是书中难免会有一些错误，欢迎大家在

    我的个人微信公众号“王M争”中直接反馈问题。我也会定期发布书籍的

    勘误信息。

    作者目 录

    内容简介

    推荐序

    前言

    第1章 用户体验入门

    1.1 什么是用户体验

    1.1.1 产品

    1.1.2 纯主观感受心理反馈

    1.1.3 用户体验的评价模型

    1.2 有用性

    1.2.1 需求分类

    1.2.2 用户体验地图

    1.2.3 用户视角

    1.3 可见性

    1.3.1 合理的信息架构

    1.3.2 跳转动作

    1.3.3 快捷入口1.4 易感知

    1.4.1 信息优先级

    1.4.2 缩短路径

    1.4.3 信息可视化

    1.4.4 化繁为简

    1.4.5 隐藏机制

    1.5 易用性

    1.5.1 减少操作步骤

    1.5.2 降低交互成本

    1.5.3 减少场景转换

    1.5.4 合理的限制

    1.5.5 定制化

    1.6 容错性

    1.6.1 引导

    1.6.2 报错

    1.6.3 解决

    1.7 一致性

    1.7.1 品牌基因

    1.7.2 平台的差异性

    1.7.3 终端一致性1.7.4 有用大于统一

    1.7.5 设计规范

    第2章 概 念

    2.1 MD和iOS设计规范

    2.1.1 阴影

    2.1.2 导航体系

    2.1.3 配色

    2.1.4 组件

    2.2 适配

    2.2.1 像素与分辨率

    2.2.2 适配原则

    2.2.3 全面屏手机适配

    2.2.4 小结

    2.3 手势

    2.3.1 “拇指法则”

    2.3.2 功能可见性

    2.3.3 滑动优先

    2.3.4 场景

    2.4 异常场景2.4.1 网络故障

    2.4.2 空页面

    2.4.3 超越临界值

    第3章 元 素

    3.1 色彩

    3.1.1 为什么要配色

    3.1.2 配色规范

    3.2 布局

    3.2.1 视觉吸引力

    3.2.2 可拓展性

    3.2.3 信息量

    3.3 文字

    3.3.1 标题类文字

    3.3.2 正文类文字

    3.3.3 提示类文字

    3.3.4 交互类文字

    3.3.5 文案的力量

    3.4 图标

    3.4.1 可识别性3.4.2 网格

    3.4.3 视觉统一

    3.5 按钮

    3.5.1 形状

    3.5.2 填充

    3.5.3 内容

    3.5.4 状态

    3.5.5 按钮组

    3.6 间距

    3.6.1 块内间距和块外间距

    3.6.2 间距与分割线

    3.6.3 间距的替代品

    3.6.4 慎用间距

    3.7 插画

    3.7.1 提升信息传达效率

    3.7.2 插画or图像

    3.7.3 尺寸比例

    3.8 动画

    3.8.1 引导

    3.8.2 吸引用户的注意力3.8.3 转场过渡

    3.8.4 对“花瓶”说“不”

    第4章 体 系

    4.1 导航体系

    4.1.1 基本元素

    4.1.2 组合样式

    4.1.3 容器

    4.2 搜索功能

    4.2.1 搜索入口

    4.2.2 信息录入

    4.2.3 搜索结果

    4.3 返回功能

    4.3.1 两种返回

    4.3.2 返回路径

    4.3.3 手势

    4.4 反馈机制

    4.4.1 为什么要反馈

    4.4.2 实时性

    4.4.3 自身反馈4.4.4 轻量化

    4.4.5 反馈的种类

    4.5 分享功能

    4.5.1 动机

    4.5.2 能力

    4.5.3 触发器

    4.5.4 载体

    4.6 引导页

    4.6.1 启动页、引导页和开屏广告

    4.6.2 引导页设计要素

    4.6.3 不只是引导页

    4.7 顶部栏

    4.7.1 去标题化

    4.7.2 可点击

    4.7.3 背景色

    4.7.4 导航栏

    4.7.5 隐藏

    第5章 组 件

    5.1 弹框5.1.1 模态弹框

    5.1.2 非模态弹框

    5.1.3 弹框体系的建立

    5.2 表单

    5.2.1 标签

    5.2.2 输入框

    5.2.3 容错性设计

    5.2.4 按钮

    5.3 tab

    5.3.1 位置

    5.3.2 状态

    5.3.3 使用场景

    5.3.4 tab与Segment Control

    5.4 标记系统

    5.4.1 角标

    5.4.2 标签

    5.4.3 红点

    5.4.4 印章

    5.4.5 场景和层级

    5.5 信息录入5.5.1 列表

    5.5.2 单选按钮

    5.5.3 开关

    5.5.4 计数器和滑块第1章 用户体验入门

    什么是用户体验？用户体验的评价标准又有哪些？1.1 什么是用户体验

    近年来，“用户体验”作为一个热词，在越来越多的场合中被提及。

    很多互联网公司都打出口号要提升产品的用户体验，并且成立了专门的

    UED部门或者小组推进产品的用户体验优化工作。

    这是一个非常令人欣喜的现象，其表明用户体验在产品设计中受到

    越来越多的重视。这也意味着，用户体验将作为一个新的指标用以评价

    我们这些互联网行业从业者的能力。为了不被淘汰，也为了可以有更好

    的发展，我们需要更新自己的技能库，将用户体验纳入自己的知识框架

    中。

    要系统地了解和学习用户体验，首先我们得知道究竟什么是用户体

    验。这个问题虽然看似有点儿“多余”，但是我发现很多设计行业的从业

    者都没有弄清楚用户体验的含义。

    用户体验是一个含义很广泛的术语，百度百科给出的用户体验定义

    是：用户体验(User Experience，简称UEUX)是用户在使用产品过

    程中建立起来的一种纯主观的感受。要理解这句话的含义，就要弄明

    白这里所提到的“产品”和“纯主观感受”是什么意思。

    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所示的设置页为例，其中一些功能被放到了四级页面中。

    不是说不能出现四级页面，四级页面并不是原罪。只是在当前页面中还

    有13空间空闲着的情况下，出现功能层级过深是不合理的。埋点数据

    显示，一些四级页面的流量比三级页面的还要多。所以，对设置页进行

    信息架构的重建是非常有必要的。

    在搭建信息架构时，首先应该确保页面的长度在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 网易云音乐APP

    1.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的会员体系

    1.4.5 隐藏机制

    身为设计师，可能都会有这样的苦恼：我也想控制页面的内容量

    啊，但是页面里的东西就是那么多，我也没法删啊。我们不一定非要删

    内容，也可以隐藏内容。因为虽然页面中有那么多功能，但并不是每一

    个功能用户都是全程需要的。如果我们可以感知到某个场景下用户对

    于特定功能的诉求很低，就可以考虑隐藏这个功能。

    例如，在知乎APP中，用户进行搜索操作时，在搜索结果里浏览了

    大概3屏内容之后会在底部弹出一个“向知友提问”的浮框。这是因为一

    旦用户浏览了3屏内容，大概就可以判断用户对当前的搜索结果不满

    意，这时引导用户去提问是很合适的。如果一开始就展示这样一个浮

    框，则会减少用户的阅读区域，如图1-31所示。

    这个例子也告诉我们，从用户的行为去判断用户的心理状态可能

    会带来不一样的收获。在网易云音乐APP中，如果用户点赞一首歌，就

    会出现一个小动画来引导用户去分享。因为一旦用户点赞了，就说明用

    户喜欢这首歌，系统就会抓住这个契机来引导用户，此时用户的分享意

    愿会更高，如图1-32所示。图1-31 滑动3屏会出现“向知友提问”浮板

    图1-32 寻找触发分享功能的时机1.5 易用性

    怎么让你的产品更加容易操作呢？要回答这个问题，首先得了解操

    作流程这个概念。操作流程指的是用户为了达到某个目标所需要经历

    的操作和场景转换。举一个生活中的例子，小时候我爸带我去电信营业

    厅交电话费。当时交电话费的操作流程为：从家骑自行车去电信营业厅

    —排队—查询话费—交钱—骑车回家。所需要经历的场景转换是：家—

    营业厅—家，如图1-33所示。

    图1-33 交电话费流程

    而在产品设计中，我们可以将“操作”理解成交互方式，将“场景转

    换”理解成经历的页面数。所以，优化操作流程、提升易用性可以被划

    分为两个方向：优化交互方式，减少不必要的场景转换(页面)。“易

    操作”原则会极大地影响产品的用户体验，我对我们公司的用户反馈的

    问题进行了分类后，发现超过30%的用户反馈都可以被归纳为“易操

    作”原则，可见用户对易用性是非常看重的。

    1.5.1 减少操作步骤

    对于交互方式的优化，我们可以从两个方面来入手：减少操作步骤

    和降低交互成本。

    让用户在更少的操作步骤下完成操作，其实就是提升信息的录入和

    反馈效率。一些新技术的应用可以帮助我们实现这个目的。

    例如，现在在产品中绑定银行卡的时候，一些产品引入了OCR技

    术，即拍照即可直接识别卡号，这样用户就不需要手动输入卡号，如图

    1-34所示。这样可以减少用户的点击次数，而且还降低了用户手动输入

    错误的概率。此外，还有一些指纹支付、刷脸登录这样的生物识别功能，这些新技术的应用可以极大地提升用户的交互效率。所以，产品和

    交互设计师对新技术的持续关注是非常有必要的。

    当然，这并不意味着我们需要埋头于追求新技术。很多时候只要利

    用好现有的技术，同样可以优化产品体验。例如，如图1-35所示，在性

    别录入的时候，设计师使用的是下拉列表，但是我觉得使用单选框会更

    加合适，因为总共就两个选项。使用下拉列表，用户需要用拇指在输入

    项和底部栏中来回地切换，而选择单选框，则可以减少用户的点击次

    数，降低了操作难度。

    图1-34 OCR技术的应用减少用户操作步骤图1-35 性别录入选择下拉列表是否合适？

    从上面这个例子我们可以发现，有些组件在功能上有重叠的部分。

    一旦一个功能可以由多个组件来完成，那么我们必须要找出最优方案。

    所以，交互设计师和产品经理的一个基本功就是明确每个组件的最适用

    场景，并在原型图中予以明确。具体每个组件的使用方法，会在第5章

    中详细说明。

    评估每个操作的重要程度和风险性也可以减少操作步骤。为什么这

    么说？因为有些操作步骤的冗余是故意防止用户误操作。例如对一些风

    险较大或不可逆的操作，系统都需要用户二次确认。但是对于一些风险

    性不是很高的操作，大胆地减少操作步骤更加合适。例如同样的缓存操

    作，A站用户需要选择好视频，最后点击“离线”选项开始缓存。这个点

    击缓存选项的操作真的有必要吗？在选择视频的时候，系统就已经知道

    你要下载的视频，为什么还要再点击一次缓存选项呢？与之对应的B站

    的用户只需要点击一下视频就开始缓存，减少了一步操作，如图1-36所

    示。图1-36 缓存视频操作

    这个例子可能会有人存在异议，A站的处理方式对用户误操作更加

    友好。但是误操作毕竟相对来说是小概率事件，我们不能因噎废食，而

    且误下载视频并不会带来多么严重的后果。

    1.5.2 降低交互成本

    以上内容的重点是减少操作步骤，接下来主要说一说降低交互成

    本。这里的交互成本可以被理解为单次动作的成本，同样的一个点击动

    作，如何减少成本呢？交互成本主要有两方面：移动距离和落点范围。

    由动作A到动作B，虽然操作次数还是一次，但是拇指的移动范围

    应该被纳入成本的考量中。下面看一个案例，如图1-37所示，以前当用

    户想删微信中的好友时，微信会从底部弹出一个对话框让用户确认一

    下。但是新版微信的“确认删除”操作直接在消息栏中展示了。其实改版

    前后用户的点击次数都是一样的，但是新版微信的反馈具有更强的指向

    性，用户的目光(注意力)不会发生转移，拇指的移动范围也更小。图1-37 哪个“确认删除”样式更好？

    在第2.4节中着重分析了点击和滑动这两种手势。其中滑动的一大

    优势在于更模糊的落点，点击动作要生效，则拇指必须落在对应的范围

    内，而滑动手势更多的是全屏操作。更模糊的落点范围，意味着用户

    需要更少的“瞄准”时间，如图1-38所示。图1-38 滑动手势在产品设计中应用的越来越广泛

    上面提到了用户的目光，这里介绍一下人类眼球对于视觉信息的处

    理过程：

    (1)基本信息提取，处理多个视角特征；

    (2)根据目的需要，筛选关注信息；

    (3)保存关键目标，联想相关特征。

    其中第一阶段中的基本信息涵盖了形状、颜色、位置、轮廓等。每

    次用户收到一个反馈，进入一个新的页面时，都要重新去获取这些信

    息。为了提升用户对视觉信息的处理效率，我们可以提供相同的形状、颜色、位置、轮廓等。如果在同一个产品中不同的页面样式存在差异，例如在这个页面中标题是居中的，在另一个页面中是居左的；这个按钮

    是有圆角的，另一个却没有。这些不一致的元素对用户来说是陌生的，需要花时间去熟悉，这样会影响处理其他信息。 就好比我们要换工

    作，发现新公司里有之前熟悉的老友，那么自己会更快地适应新环境。

    这就是一致性原则可以减少用户的学习操作成本的原因。例如前面介

    绍的微信的例子，旧版本微信底部对话框的反馈样式，需要用户重新识别位置和形状，而新版微信的反馈样式则不会出现这种情况，更加易

    用。

    1.5.3 减少场景转换

    同样一个实名认证流程，你的产品需要4个页面才可以完成，而你

    的竞品只需要3个页面。更少的页面意味着更加精简的操作流程，对产

    品的易用性来说是一个巨大的提升。那么，如何才能减少不必要的场景

    转换呢？

    如何判断哪些是不必要的场景转换呢？我们可以尝试把它删除，看

    看会不会对当前的操作流程造成影响。例如，用户在酷狗音乐APP里打

    算下载一首歌，这时会出现一个弹框通知用户下载这首歌需要开通会员

    或者直接购买单曲。而在QQ音乐和网易云音乐APP中，用户直接可以

    进入会员开通页，会员开通页里包含了购买单曲的选项，如图1-39所

    示。仅从减少场景转换的角度来说，我们可以考虑删除弹框，当然这里

    弹框的使用可能是为了更好地引导用户去开通会员。

    图1-39 引导用户去开通会员的对话框是否有存在的必要？在产品中，“不必要的场景”的集合非空页面莫属。为什么？就是因

    为它“空”啊。“空”意味着没有，空页面相对于常态页面来说，没有向用

    户展示足够重要的信息和内容。

    举一个例子，“咕咚”是一款我常用的运动类APP。其在“我的”页中

    有一个功能是“训练计划”(见图1-40左图)，如果用户当前没有训练计

    划，那么点击它就会进入一个空页面(见图1-40中图)，用户点击“查

    看”按钮可以查看全部的训练课程，自行添加自己想要的课程(见图1-

    40右图)。我之前一直觉得这种处理方式没有什么不妥，直到我看到了

    英语流利说APP。在英语流利说APP中，有一个类似的场景，但是处理

    方式却完全不一样，如图1-41所示。

    图1-40 咕咚APP中的空页面

    如果用户没有添加课程，那么课程入口就会直接显示一个“添加课

    程”按钮。英语流利说APP删除了空页面，我非常赞同这种做法。因为

    如果只是想告知用户当前没有添加过课程，那么为什么非要通过一整个

    页面来传达这个信息？这样未免太过奢侈了。一般的空页面由“空状

    态”和“去添加”组成。“空状态”告诉用户当前没有进行任何操作，“去添加”告诉用户操作路径。“空状态”是非必需的，因为用户看到了“去添

    加”按钮也能感知到“空状态”。

    按照这个思路，在咕咚APP中，如果用户当前没有训练计划，那么

    在“我的”页中可以给用户展示“发现添加训练课程”的文案，用户点击后

    可以直接进入全部课程页。因为在空页面中，无论那个“去添加”按钮做

    得多好看，它的转化率也不可能达到100%。所以，适当地删减空页面

    场景，不仅可以减少用户操作步骤，还可以提升转化率，如图1-42所

    示。

    图1-41 英语流利说APP图1-42 引导没有训练计划的用户去直接添加课程

    1.5.4 合理的限制

    合理的限制可以提升产品的用户体验。为什么我们要限制？因为

    多，我们才要限制。多会带来哪些坏处呢？内容多，用户处理不过来；

    选项多，用户会挑花眼；时间多，优惠券没有有效期限制，用户懒得

    用。在设计圈中有一句俗语：Don't make me think(不要让我想)。其

    实我更倾向于把think(想)改成choose(选择)，因为没有choose哪来

    的think。所面临的选项越多，用户就越难做出决策。这就好比很多条件

    非常优秀的人一直是单身，因为挑花了眼。所以，为了避免用户在使用

    产品过程中陷入“挑花眼”的境地，我们应该考虑去弱化甚至隐藏一些选

    择场景。

    选择场景可以分为两种：殊途同归和分道扬镳。

    殊途同归：从A出发，遇到一个岔路口，告诉你现在有3条路可以

    选，不管选择哪条都会到达B(见图1-43左图)。

    分道扬镳：从A出发，遇到一个岔路口，告诉你现在有3条路可以选，选择不同的路会到达不同的目的地B、C、D(见图1-43右图)。

    图1-43 两种选择场景

    对殊途同归的场景来说，既然无论选择哪条路都能到达同样的目的

    地，那么说明这个选择场景不是必需的，可以考虑将其隐藏。怎么隐

    藏？可以提供一个默认路径(状态)。

    以实名认证为例，常见的实名认证方法可以是输入姓名及身份证

    号、上传身份证的正反面照片或者人脸识别。一般的流程是：用户点击

    实名认证按钮，进入下一个页面，在这个页面中让用户选择验证方式。

    其实我们可以考虑直接给用户一个默认的认证方式，例如，埋点数据表

    明，超过90%的用户都选择上传身份证正反面照片这个方式，那么我们

    可以让用户不用选择，直接进入上传身份证正反面照片的页面。为了防

    止用户对默认的认证方式不满意，再提供一个选择其他认证方式的超链

    接，这样的设置对于没有进行二次选择的用户来说等于减少了一个步

    骤，如图1-44所示。图1-44 提供默认值，避免不必要的选择场景

    其实从上面的例子中我们可以看出，所谓限制用户的选择场景，不

    是不让用户选择，而是选择后置。不要让用户过早地做出选择，过早地

    做出选择会有哪些坏处呢？还是以前面的下载歌曲为例，酷狗音乐APP

    就属于让用户过早地做出选择。后续用户进入的开通会员页和单曲购买

    页是两个独立的页面，如图1-45所示，用户无法获知另一个页面里的内

    容，这就造成了信息的不对称性。而做出正确的决策必须要消减信息的

    不对称性，用户在不知道“音乐包”和“豪华VIP”的权益和费用的情况

    下，如何知道选择购买单曲是否是最正确的决策？

    1.5.5 定制化

    “定制化”也可以减少场景转换。所谓“定制化”，就是给用户权限，让他们根据自己的实际需求调整产品的页面布局、内容模块和视觉样式

    等。例如，我们可以根据自己的喜好更换产品的界面主题，当然这种定

    制化无法减少用户的操作步骤。在支付宝APP中，用户可以自行添加常

    用的功能，这样就不需要每次都去相应的模块中找，非常方便，这样的定制化处理减少了用户的操作步骤，如图1-46所示。

    图1-45 酷狗音乐APP图1-46 用户自定义首页功能模块1.6 容错性

    用户在使用产品的过程中，难免会犯错。一个好的产品可以降低用

    户犯错的概率，以及提升解决错误的效率。通俗一点说就是帮助用户避

    开操作过程中的“坑”，即使用户掉进“坑”里，也能让他们很快地爬出

    来。这就是产品设计中的容错性原则。

    为了方便读者理解，我将容错性原则分为三个阶段：引导、报错和

    解决。首先通过简洁、易懂的引导来帮助用户规避那些错误；当用户

    不得已犯错之后，会给予提示，告知用户犯错的原因及解决方案，如

    图1-47所示。

    图1-47 容错性原则的三个阶段

    1.6.1 引导

    我发现很多交互设计师在设计产品的时候很容易犯一个毛病，觉得

    用户什么都懂，因此忽视了引导的重要性。

    一提到引导，读者可能会想到引导页、弹框、浮层等。这些都是常

    见的引导方式，确切地说是主要针对新用户，让他们很快地了解该产品

    的核心功能及主要的操作方式，帮助他们更快地上手，如图1-48和图1-

    49所示。

    但是引导功能的实现方式不仅限于此，输入框中的输入提示也是常

    见的引导样式。输入框是用户完成信息录入的主要途径之一，有录入才

    有报错，有报错才需要引导。图1-48 引导页

    图1-49 浮层引导以日期录入为例，如果我们不给用户提供日期选择组件，那么必须

    要在输入框里提供日期格式。因为日期(如2018年6月10日)可以有多

    种录入格式，如果不以输入提示的方式予以明确，那么用户就不知道该

    怎么输入，如图1-50所示。

    图1-50 需要让用户明白是以哪种格式录入日期

    类似的案例还有在用户注册新账户时，当用户设置登录密码后点

    击“注册”按钮时却通知用户密码强度不够。因为用户的密码里没有大写

    字母，但是这个密码的设置规范并没有在用户录入之前告知他，所以他

    才会犯错。

    以上说的都属于狭义上的引导，用户还停留在被动地接受引导的阶

    段。其实引导归根结底是为了避免用户在操作过程中犯错，而用户的操

    作过程又可以被看成不断做决策的过程，要想做出正确的决策，必须要

    消减信息的不对称性。所以，我们可以把引导功能理解为就是消减信

    息的不对称性，让用户做出正确的决策。

    例如如图1-51所示，用户想要买水果，与其他商品不同的是，水果

    的保质期很短，所以，用户会很看重水果的配送时间。如果用户觉得这

    家店铺的菠萝价格公道，将其添加到了购物车中，等到临近付款的时候

    才发现原来是后天才送达，有些用户可能会取消订单，之前填写的重

    量、种类等操作都白费了。这其实也可以算作是“错误操作”，因为用户

    选择了错误的商品。图1-51 用户在将商品加入购物车之前已经知道预计送达时间

    为了避免出现这种情况，配送时间这个信息必须在用户做“加入购

    物车”这个决策之前就展示给用户。总而言之，会影响用户做决策的因

    素必须要及时反馈给用户。

    如果你确定对用户足够了解，在用户录入信息的时候就可以设置合

    理的默认值。因为对用户来说，填写信息永远都不是一件有趣的事情，设置合理的默认值可以节省用户的操作时间，更能避免用户犯错。

    例如，用户在9月下旬打开某个APP要预订机票，那么出行日期可

    以直接默认为10月1日，返程日期可以默认为10月7日，因为这符合大部

    分用户的预期。当然，如果日期跟用户的实际行程不符，用户也可以手

    动更改，这不会增加任何额外的操作步骤。

    当用户在文本框里输入时，可以设置让系统猜测可能的答案，显示

    可选列表，如图1-52所示。自动完成信息填写可以为用户节省时间、精

    力和记忆成本，避免犯错。

    此外，还要特别注意文案的使用，因为用户对于信息的获取主要依

    靠的就是文案。呆板、机械的文案有的时候会让用户迷惑。如图1-53所示，在实名认证的阶段，需要用户补全身份证信息，而这里的“起始时

    间”和“结束时间”很难让用户明白是什么意思，更不知道应该怎么填。

    其实这里的“起始时间”和“结束时间”指的是身份证的签发时间和有效

    期。

    图1-52 提供可选列表，减少操作步骤

    图1-53 文案需要站在用户视角

    1.6.2 报错

    报错就意味着引导失效了，用户掉进“坑”里了。对于报错，下面主

    要从两个方面进行分析：报错方式及报错时机。主要的报错方式就是使用弹框，可能我们会觉得只要了解了弹框的

    使用方法，就知道怎么设计报错流程了。这个说法不严谨，因为忽视了

    报错时机这个因素。

    以图1-54为例，用户在注册账户的时候要录入手机号，我在这一步

    故意少输了一位数字，直接点击“同意协议并注册”按钮后，竟然可以进

    入下一个页面。当我滑动滑块验证的时候才出现一个Toast告诉我格式

    错误，如果要修改，则还要回到上一个页面，这种反馈效率无疑是非常

    滞后的。

    图1-54 进入下一个页面才反馈上一个页面的问题，反馈效率滞后

    如果用户输入的手机号不是以1开头或者位数不对，那么对于这种

    低级错误，输入框应该立即校验出来，并且提示用户，如图1-55所示。

    至于如何提示用户，方式是多种多样的。如何选择合适的报错方式，需

    要从以下三个方面进行分析：重要性、字数和指向性。

    很多设计师倾向于使用Toast来作为报错样式，因为Toast非常轻

    量，不会打断用户正常的操作流程。但是，如果报错信息非常重要，那

    么千万不要使用Toast。例如，在用户转账的时候，发生了系统故障，为了避免重复转账，在这种场景下的报错信息必须要保证用户可以看

    到。而我们发现，在某些安卓手机中，用户在系统设置时可能会在无意

    之中把Toast给禁用了。其实用户的本意只是想禁用通知或者浮窗 ，没

    想到把Toast也给关了。所以，对于一些非常重要、必须保证用户可以

    看到的报错信息，最好不要使用Toast。

    图1-55 实时校验出手机号的错误，及时反馈给用户

    因为Toast显示一段时间就会消失，所以不利于承载过多的文字。

    不同的产品对字数有着不同的限制，我倾向于设置15个字，也就是说

    Toast最多只可以显示15个字。当然会有人说，Toast的持续时间是可以

    控制的，可以让开发人员设置一下，让持续时间跟字数成正比。但是这

    里有一个问题，用户对于Toast已经形成了心理暗示，认为Toast会很快

    消失，所以很难静下心来阅读其中显示的大段文字。就算能安心读完，那么持续显示近10s的Toast就完全失去了其轻量化的优点，我们为什么

    还要使用Toast？

    不是每一个场景的报错信息都是需要通过弹框来展示的。例如，用

    户在用手势解锁时，当解锁失败后，如果使用弹框的样式来报错，则用户每次必须点击“确定”按钮关闭弹框才可以重新解锁，增加了操作步

    骤。如果直接使用文字提示，就会方便很多，如图1-56所示。

    图1-56 文字提示可以减少用户的操作步骤

    以上举例的报错针对的都是单一对象，如果在一个表单中，用户需

    要输入多个项目，那么在这种情况下的报错要具有指向性，要让用户可

    以快速明白到底是哪一个项目在报错。

    下面来看一个案例。如图1-57所示，如果用户的邮箱格式填写错

    误，那么此APP会通过Toast提示用户，并且邮箱地址选项也会被标红。

    如果我们只使用Toast，那么用户还要寻找报错的项目，这里的标红使

    报错具有了指向性。在项目特别多的表单中，具有指向性的报错可以省

    去用户的查找时间。

    此外，有的报错场景是通过一个页面来展示的，其实我不是很喜欢

    这种样式，因为专门做一个页面来传递报错信息过于浪费了。当然这只

    是我个人的观点，用一个页面来展示一个失败操作流程的终点也没什么

    不可以。

    当用户碰到报错提示时，可能心情会非常郁闷和烦躁，所以，在报错的同时还要注意安抚用户。图1-58所示的这种报错样式我不是很认

    可，因为置身于报错场景中的用户本身就很烦躁了，使用大面积的红色

    会刺激用户的情绪。就像电脑在出现故障时，会出现蓝屏而不是红屏，因为蓝色可以帮助用户平复焦虑的心情。

    图1-57 多行表单应该对报错项进行标识图1-58 界面充斥大面积的红色会刺激用户情绪

    1.6.3 解决

    前面介绍了报错的方式和时机，现在到了解决这一步，解决方法是

    撰写合适的报错文案。我梳理一些过产品中的报错文案，发现很多报错

    文案都只描述了报错场景，告诉用户“对不起，你掉进‘坑’里了”，没有

    解释为什么掉进“坑”里，怎么爬出来，以及下次如何避免再次掉

    进“坑”里。

    如图1-59所示，在此APP中绑定银行卡要输入预留的手机号，当用

    户输错的时候告诉用户手机号不符，连续输错好几次之后结果通知用户

    尝试次数过多。既然错误次数是有限制的，那么就应该告诉用户还剩多

    少次机会。

    此外，“尝试次数过多”是一个很笼统的提示，到底尝试几次才

    是“尝试次数过多”，是不是24小时之后用户又可以重新输入了？用户是

    不是可以咨询客服来解除这个冻结的状态，这些都没有提示。

    所以报错文案不能只描述场景，还必须包含报错原因及解决方案，报错文案要简洁、干练、概括性强。

    图1-59 报错文案应该告诉用户错误原因和解决方案

    例如，新浪金融APP中的实名认证流程可以分为三个步骤：一是验

    证身份证信息；二是绑定银行卡；三是验证手机号。其中在绑定银行

    卡的页面中，如果用户输入了错误的银行卡号，就会出现对话框告诉用

    户“实名信息不正确”，这种模棱两可的提示让我误以为是身份证号输错

    了，然后返回到上一页，检查后发现身份证号是对的。这时我才想起来

    可能是我的银行卡号输错了，但是返回来之后之前的信息又要重新录

    入，如图1-60所示。从这个例子中我们可以发现，在报错文案中如果没

    有明确报错原因，则容易造成用户误操作。

    当然，如果可以给出具体的解决方案，报错原因其实并没有那么重

    要。例如，如果因为公安网维护导致从今晚22点到次日8点无法提供服

    务，则可以直接简化成“系统维护中，今晚22点至次日8点暂停服务”。

    其实用户不在乎具体是什么原因，他们在乎的是什么时候可以恢复服

    务。

    如果解决方案需要发生跳转动作，那么为了方便用户操作，要尽量提供跳转超链接。例如，当用户输错支付密码超过次数限制，导致支付

    密码被锁，需要重置支付密码时，我们不能给用户一句提示就完了，因

    为用户可能不知道到哪里重置支付密码。为了提升产品的易用性，可以

    给用户提供超链接让用户直接跳转到重置支付密码页中，如图1-61所

    示。

    图1-60 银行卡号输错却报错“实名信息不正确”

    图1-61 用户可以直接点击文字按钮去重置支付密码

    此外，如果是系统可以帮助用户完成的操作，则尽量由系统来完

    成。举个例子，我们经常会看到“××失败，请重试”的报错场景，其实每

    次遇到这个场景时我都会很头疼。因为我不知道“重试”这个动作是在当

    前页面就可以完成，还是需要返回上一个页面后再进来“重试”。又例如，在拍照识别银行卡号的时候，出现了一个Toast提示用

    户“识别失败，请重试”。这种模棱两可的报错文案让用户无法获知具体

    的错误原因是因为系统故障，还是因为用户刚才拍照的时候手抖了。如

    果是因为系统故障，那么用户可能需要退出页面重新打开手机摄像头再

    识别一次；如果是因为手抖，那么用户只需要保持稳定的姿势重新拍摄

    就行了，不需要返回上一级页面。在这里如果是因为系统故障，那么应

    该直接退回到上一级页面，在上一级页面中提示用户重试，而不是在当

    前页面提示用户重试。

    另外，有些报错属于系统内部的报错，用户无法自己解决，需要客

    服的介入，我们应该给用户提供在线客服或者帮助中心的超链接。很多

    产品都选择在页面的右上角提供帮助中心的入口，入口最好统一，入口

    不一致会增加用户的操作成本，如图1-62所示。

    图1-62 帮助中心入口不一致会增加用户的操作成本

    其实说实话，报错文案很难写。之前我们上线了一个卡券，但是有

    些用户被系统判断为风险等级较高导致无法领取。针对这个报错文案，我们改了好几版，但是每次都会有用户投诉。他们询问为什么自己无法

    领取，直接告诉他们是高危用户也不太合适，因为用户是执行了某些操作才被判定为风险等级较高的。而我们在用户操作前并没有告知，直接

    告诉他们是高危用户可能会引起新的投诉。最合理的方法就是提前判断

    用户状态，如果被判定为高危用户，则直接不展示这个卡券，也就不会

    出现报错场景。1.7 一致性

    一致性原则也可以被称为统一性原则。从设计师和开发人员的角

    度来说，一致性原则的确立可以极大地节省功能迭代的时间。从用户

    的角度来说，一致性可以减少用户的学习成本，更能增加用户对于产

    品的认可度。

    我把一致性原则放在最后面介绍，不是因为它不重要。恰恰相反，在我看来，一致性原则决定了一款产品的上限，也是最考验产品经理或

    者设计师能力的。为什么这么说？因为前面介绍的几类关于用户体验的

    问题即使你不主动去寻找，用户也会提出来。

    我曾经对我们公司的2017年第1季度用户反馈的问题进行了一次分

    类，发现关于产品一致性问题的投诉量只占到2%左右。投诉量低不意

    味着产品一致性做得好，一致性问题本身很难发现，因为一致性问题的

    本质就是A与B不一样，这就是要求用户最起码用过A和B两个场景并且

    注意到有不一样的地方。

    例如，在图1-63所示的两个协议页面中，一个设置的是返回按钮；

    另一个设置的是关闭按钮。用户不一定都进入过这两个页面，就算进入

    也不一定会注意到这个问题，即使注意到了这个问题，也不一定会反

    馈。因为不管是返回按钮还是关闭按钮，用户点击了都能离开这个协议

    页面，不影响正常使用。除非我们给用户提供相应的激励，不然此类问

    题我们很难收集到。图1-63 用户很难发现一致性问题

    这就表明，对于一致性原则的优化，设计师和产品经理必须要具有

    强大的自驱力，要主动排查及寻找自己产品中的问题。

    1.7.1 品牌基因

    何为一致性？一致性就是产品设计中共有元素的集合。以知识星

    球APP为例，其底部菜单栏的icon都具有“断线”的设计特征，这里的“断

    线”就属于共有元素，如图1-64所示。因此，要实现一致性原则，总结

    起来有两个阶段：发现共有要素；将共有元素植入产品设计中。

    图1-64 知识星球图标中的“断线”那么从哪里才可以找到足够多的共有元素呢？首先我们可以考虑从

    品牌入手，提取品牌基因作为共有元素。品牌可以在用户心中创建一种

    产品区别于其他竞品的态度，有效的品牌化处理可以为产品或者服务增

    值。从产品设计的角度来看，品牌可被拆解为：品牌色、LOGO和品牌

    定位等。

    品牌色是应用最多的，大多数产品界面的主色调就是品牌色。以网

    易为例，其旗下所有的产品都采用了网易红。这种配色上的统一可以让

    不同的产品线之间产生很好的关联感，如图1-65所示。

    图1-65 网易系产品：统一的配色增强不同产品线之间的关联感

    微众银行是由腾讯发起并设立的，其主体视觉形象是一只企鹅，在

    其APP界面设计中这只小企鹅的出镜率非常高，如图1-66所示。这样的

    设计无时无刻不在向用户传递一个信息——钱放在我这，你放心，因为

    我的背后是腾讯。图1-66 微众银行

    飞猪APP的搜索框设计没有选择普通的矩形或者圆角矩形样式，其

    右半部分明显是参照了其LOGO的形状特征，如图1-67所示。

    图1-67 将LOGO的视觉特征植入输入框设计

    品牌定位会影响产品的设计风格，例如你要给一个读书、旅行类的

    APP设计界面。你的品牌定位决定了你的主要目标用户群体是文艺青

    年，那么针对文艺青年，你的产品界面设计就要简约大方，宽间距，配

    色少，保持界面的“呼吸感”，如图1-68所示。图1-68 品牌定位决定了设计风格

    1.7.2 平台的差异性

    目前，主流的设计规范有iOS Humen Interface Guidelines(简称

    iOS)和Material Design(简称MD)两种。iOS设计规范主要用于

    iPhone，而MD设计规范主要用于安卓手机。但是目前很多产品，包括

    一些“国民级”的应用程序都只出一套iOS风格的设计稿，然后用它去适

    配安卓手机。很少会有针对安卓手机再出一套MD风格的设计稿的现

    象。这种现象虽然盛行，但是存在并不意味着合理。因为不同的系统

    平台采用了不同的设计语言，不同的设计语言会培养出不同的操作习

    惯。

    例如，使用安卓手机的用户平时见到的都是MD风格的界面，突然

    使用iOS风格的应用程序时，操作起来就会很不习惯，在无形中增加了

    用户的学习成本。在微信里，iOS端用户如果要删除一条聊天记录，向

    左滑动聊天记录即可；而安卓端用户则需要长按聊天记录，在弹出的浮层中进行删除操作，这就是两个用户端的产品在手势上的差异，如图1-

    69所示。

    图1-69 iOS端和安卓端的差异性

    所以，产品设计要做到“入乡随俗”，遵循各自平台的设计风格。关

    于iOS和MD两种设计风格的具体比较，在第2.1节中会详细说明。

    1.7.3 终端一致性

    终端一致性指的是移动端和PC端在界面设计上要保持一致。说实

    话，做到这一点很难。因为如今大多数产品的主要流量都来自移动端。

    以我们公司的产品为例，移动端和PC端的流量比例达到9∶1，所以我

    们更愿意把时间和精力放到移动端上。

    一般移动端产品可能一个月就迭代一次，而PC端产品可能半年都

    不动，很难跟得上移动端的速度。这样就导致移动端产品和PC端产品

    的差距越来越大，甚至完全看不出是同一款产品。1.7.4 有用大于统一

    对用户来说，有用大于统一。在产品设计过程中，我们经常会面临

    各种各样的抉择，每次抉择都意味着牺牲一方的利益，因为没有完美的

    设计方案。以在线客服为例，在线客服是一个共有的模块，不同的业务

    线都会调用。那么在入口设计上，我们要注意保持一致性。但是过度追

    求一致性就会损害易用性，因为在不同场景中用户对于客服的诉求是不

    一样的。相对于生活缴费，用户对于借钱这个场景更加敏感，有更多的

    问题要去确认。这笔贷款的利率是怎么算的啊？还款方式是什么样的？

    会不会影响个人征信？因此在借钱页中，在线客服的入口会被放置在更

    加显眼的右上角，而生活缴费页的入口被放在界面底部，如图1-70所

    示。

    图1-70 不能过度追求一致性

    1.7.5 设计规范

    要保持产品设计的一致性，我们需要建立一套视觉、交互甚至是文案层面的设计规范。设计规范作为设计准则，可以帮助我们提升工作效

    率。但是设计规范也不能做得过于详细，因为越详细，那些条条框框就

    会在产品迭代期间禁锢设计师的创造力。最终整个团队做出来的产品像

    是一个人做出来的，这样真的合理吗？

    我之前曾经负责过一个项目，领导让我设计其中基金专区的界面。

    虽然设计整个专区看起来工作量好像很大，但主要工作就是搬运图层，因为现有的设计规范已经包含所有的场景，我直接套用就行了。所以，对一致性的追求要做到张弛有度，避免矫枉过正。在整体保持统一的前

    提下，个别场景进行差异化处理也是可以的。

    我在前面提到过，用户很难发现产品的一致性问题。可能会有人质

    疑，既然用户感知不到，我们是否有必要去做一致性的优化？

    对于这个问题，这里来做一个类比。我们可以把产品看成电影，产

    品经理相当于导演，产品中的一致性问题相当于电影中的穿帮镜头。对

    于穿帮镜头，其实观众也不一定能够看出来，例如国内的很多历史剧中

    出现不符合时代背景的物件，普通观众根本看不出来。

    而很多大师级的导演对于道具的要求几近苛刻，其实它可能在银幕

    中就出现两三秒，观众都不一定能反应过来，很多普通的导演觉得差不

    多就行了。一个小问题观众可能发现不了，但是众多的小问题堆积起来

    就可能会毁了这部电影。往往对细节有着近乎病态般偏执的人才会拍出

    优秀的作品，这就是所谓的“不疯魔，不成活”。

    这个理论在产品设计中同样适用，真正影响用户体验的往往就是那

    些一个个不起眼的小细节。不要有侥幸心理，这里的间距是6像素，那

    里的间距是8像素，差两像素的问题，用户看不出来。的确，用户没

    有“像素眼”看不出来，真正可怕的也不是这两像素，而是这种对错误已

    经妥协了的心态，一般有了这种妥协且侥幸的心态，就意味着产品中有

    很多类似的“两像素”问题。所以，我们对于一致性的追求，其实追求的

    是一种对于产品精益求精的态度。第2章 概 念

    为了让更多的小伙伴可以在一起沟通与交流，我从2017年就开始

    建立自己的微信群。我发现大家在群里讨论的大多数问题都很基础，主要是一些常见的设计概念，很多工作好几年的“老鸟”对一些很简单

    的概念还没有做到完全掌握。这让我意识到工作年限与工作经验并不

    是可以直接画等号的。对大部分人来说，一旦自己的能力满足了日常

    工作需要，他们就会进入“舒适区”，不再考虑寻找新的突破点来提升

    自己的能力。我们所从事的这个行业，每天都在发生巨大的变化，不

    断有新的设计风潮袭来，新的技术应用导致用户对产品交互提出了更

    高的要求。我们需要不断学习、总结。本章主要想谈一谈那些我们很

    熟悉但是又很陌生的设计概念。2.1 MD和iOS设计规范

    Material Design(简称MD)和iOS Human Interface Guidelines(简

    称iOS)是目前最常见的两种设计规范。MD是谷歌设计的一套视觉语言

    设计规范，主要应用于安卓类应用程序中。iOS是苹果公司针对iOS系统

    设计的一套人机交互指南，目的是使运行在iOS系统中的应用程序都能

    遵从一套特定的视觉及交互规范，从而能够在风格上进行统一。

    相对来说，我们对于iOS的设计规范更加熟悉。考虑到成本，大多

    数设计师在进行产品设计时只会设计一套iOS风格的设计稿，然后去适

    配安卓手机，很少会针对安卓手机再设计一套MD风格的方案，这种现

    象虽然存在，但是并不合理。不同的系统平台采用了不同的设计语

    言，不同的设计语言会让用户培养出不同的操作习惯。

    使用安卓手机的用户平时见到的都是MD风格的界面，如果突然下

    载了一个iOS风格的应用程序，那么操作起来就会很不习惯，增加了学

    习成本。为了让产品可以符合不同平台用户的操作习惯，提供MD和iOS

    两套风格的设计稿是非常有必要的。那么MD和iOS风格的不同点究竟在

    哪里呢？

    2.1.1 阴影

    对很多不太熟悉MD风格的设计师来说，一提到MD风格就会联想

    到“大色块+阴影”。为什么MD风格如此痴迷于阴影？从它的名字就可以

    看出来，Material Design，翻译成中文就是“质感设计”或者“材料设

    计”，这里的材料指的是纸张。纸张来源于现实生活，所以与iOS风格相

    比，MD风格更加注重对现实世界的隐喻，要求设计元素可以和现实生

    活中的事物关联起来。MD风格非常喜欢使用真实世界中的元素的物理

    规律与空间关系来表现组件之间的层级关系。而阴影就是最常见的表

    现形式。

    如图2-1所示，同样的账户注册界面，安卓系统界面中的“继续”按

    钮带有阴影，而iOS系统界面中的按钮没有阴影。带有阴影的浮动操作按钮(FAB，Floating Action Button)甚至成

    为MD风格的一大招牌。相比较而言，iOS风格更加扁平化，如图2-2所

    示。

    图2-1 阴影是MD风格的一大特征图2-2 FAB在MD风格中很常见

    2.1.2 导航体系

    产品的导航体系主要由菜单栏构成，而其根据位置以及交互方式可

    以被分为顶部栏菜单、底部栏菜单和侧边栏菜单。iOS风格的导航体系

    主要由底部栏菜单构成，而MD风格的导航体系大量使用了顶部栏菜

    单和侧边栏菜单。下面来看几个例子：网易云音乐APP在iOS手机中采

    用的是底部栏菜单导航，而在安卓手机中导航栏被移到界面顶部，“账

    号”页被收到侧边栏中，如图2-3所示。图2-3 MD风格更偏爱顶部栏菜单和侧边栏菜单

    B站APP在iOS手机的底部栏菜单中有5个标签，而在安卓手机中只

    有4个标签，“我的”页同样被侧边栏收起来，如图2-4所示。

    推特APP在iOS手机中使用的是底部栏菜单导航，在安卓手机中导

    航栏被移到了顶部，如图2-5所示。

    而Apple Music做得更彻底，在安卓手机中直接舍弃了底部栏菜单，采用了侧边栏作为主导航模式，如图2-6所示。

    不只是Apple Music APP和推特APP，很多国外的安卓类APP都没有

    使用底部栏菜单。而国内的APP即使“MD化”也是简化版的，属于iOS和

    MD风格的“混血儿”。甚至最近出现了一种风潮，很多安卓应用程序开

    始舍弃MD风格，开始往iOS风格上转。以B站APP为例，在其5.11.0之前

    的安卓版本中都是没有底部栏菜单的，如图2-7所示。图2-4 B站APP

    图2-5 推特APP图2-6 Apple Music APP

    当然这里并不是评价MD风格和iOS风格哪个导航体系更好用，只是

    说一下我的观点。底部栏菜单的使用非常适合用户在单手握持手机的

    情况下操作，因为在单手握持手机的姿势下，用户的拇指很难够得着

    顶部栏菜单和侧边栏菜单，如图2-8所示。因此对大屏手机来说，单手

    操作手机会显得很吃力。可是如果手机屏幕过大，用户不得不双手握

    持手机，那么从易用性上来说，底部栏菜单没有任何优势。所以，在

    我看来，如果手机继续现在的“大屏化”发展趋势，则底部栏菜单会逐

    渐被淘汰。图2-7 B站APP在5.11.0版本里采用了底部栏菜单

    图2-8 拇指法则

    MD的设计规范更加精巧，更加注重对界面空间的利用。侧边栏菜

    单就不说了，以底部栏菜单为例，一般底部栏菜单的高度为98px，也就

    意味着这98px里的内容是被遮挡的。很多的产品，例如知乎APP，虽然

    使用了底部栏菜单，但是当用户滑动界面的时候，底部栏菜单是被隐藏的，以借此来释放空间，如图2-9所示。

    图2-9 用户滑动界面时底部栏菜单会被隐藏

    侧边栏菜单的优势还体现在可以提供更多的标签，在理论上，你可

    以把无数个功能入口(标签)都“塞”到侧边栏菜单里，只要用户愿意滑

    动界面就行了。而底部栏菜单中最多可以放5个标签。

    侧边栏菜单的缺点在于其需要用户点击才能调出来，比较隐蔽。与

    侧边栏菜单类似的还有“汉堡”按钮，“汉堡”按钮可以通过将一些次要的

    信息隐藏来释放界面的空间，这样使界面更加清爽、简洁，用户的注意

    力可以更好地集中在重要的信息上。

    至于为什么MD风格会抛弃底部栏菜单，我个人的猜想是设备原

    因。因为在MD设计规范被提出的时候，多数安卓手机底部都有物理按

    键，如果采用底部栏菜单作为主导航模式，则容易造成用户误点击，如

    图2-10所示。类似的还有Web类应用程序，因为浏览器的控件栏也在底

    部，如果采用了底部栏菜单，则同样会造成用户的误操作。图2-10 浏览器控件栏容易造成用户误操作

    2.1.3 配色

    MD风格提倡使用高饱和度的对比色来提升产品的视觉表现力，也

    就是我在前面提到的大色块。如图2-11所示，同样的工作群聊页，从顶

    部栏背景色、插画到按钮，我们可以发现，iOS风格在色彩的使用上比

    较克制，用一个词来形容就是“小清新”。

    如图2-12所示，知乎APP在其之前的安卓版本中使用了大面积的蓝

    色，后来改成了与iOS版本一样的白色。对于这样的调整，用户褒贬不

    一，有的用户认为这完全照搬了iOS风格，要改回MD风格。因为一旦用

    户适应了MD风格，对于iOS风格就会比较抗拒。这种“喜旧厌新”现象在

    产品设计中经常出现，用户对于新的事物永远是比较抗拒的，连微信

    APP都不能幸免。每个产品在发布新版本时，在初期都是免不了被用

    户“吐槽”。新版本在用户体验上的提升是一个长期的过程，用户目前还

    感知不到。用户在享受到产品改版所带来的红利之前，所能感受到的只

    有增加的学习成本——“我又要重新学习怎么操作了”。

    在产品的界面设计中，对比效果主要由配色、尺寸、间距和阴影来完成。MD风格在配色和阴影上做得比较出彩，所以MD风格的产品在

    视觉表现上更有冲击力。而iOS风格则显得比较“小清新”，其追求扁平

    和简洁。我们无法评判这两款设计风格孰好孰坏，因为其各自的出发点

    就是不一样的。

    图2-11 iOS风格在界面配色上更加克制图2-12 知乎APP里的颜色越来越少

    2.1.4 组件

    同一种组件，在MD和iOS风格中，其设计样式有很多不一样的地

    方，下面举几个常见的例子。以对话框为例，在iOS风格中，对话框的

    标题和按钮都是居中对齐的；而在MD风格中却是一个偏左，一个偏

    右，如图2-13所示。MD和iOS风格对于有多个按钮的对话框样式的处理

    也不一样，开关样式的区别也很大。具体的不同点，我们可以查看官方

    提供的设计规范。图2-13 iOS和MD风格的对话框

    当然，MD和iOS风格的差异不仅仅体现在以上说的这四点，还有一

    些小细节也非常值得我们注意。大多数人都知道在iOS系统中，用户向

    右滑动界面的时候会返回上一级页面。因为苹果手机没有物理返回按

    键，所以这种设置非常受欢迎，但是这在一些特定的场景中就会有问

    题。例如，如图2-14所示，如果我想复制微博里的文字“一曲肝肠断，天涯何处觅知音”，选中光标并从左向右滑动界面时，这时就会返回上

    一级页面，特别不方便。所以，我只能从右向左滑动页面进行复制，后

    来我在微信APP和QQAPP中试了一下，发现默认复制的是整条动态信

    息，这也算是iOS风格一个折中的方案。

    需要再次重申的是，我并不愿意评判iOS和MD这两种设计风格孰好

    孰坏，也没有这个能力。而且iOS和MD风格本身也并不是完全对立的，有很多产品同时使用了这两种设计风格。以虎扑APP为例，其搜索框使

    用的就是MD风格的输入框样式，但是下面的那一栏tab却使用iOS11

    的“大标题”风格，如图2-15所示。这两种设计风格结合得很好，并没有很“违和”的感觉。所以说白了就是无所谓设计风格之争，只要能够更好

    地表达产品中的内容，让用户更容易接受就可以了。设计师也不要给自

    己套上枷锁，当我们制定设计规范时，不要太在意这个组件是iOS风格

    特有的还是MD风格特有的，只要可以实现，我们都可以采用“拿来主

    义”。

    图2-14 细节问题图2-15 虎扑APP的界面融合MD和iOS设计风格

    或许在以后iOS和MD这两种设计风格会逐渐融合，但是现在还是有

    很大差异的。当然，让我们现在就为自己的产品做出两套设计稿，在目

    前来说也不太现实。很多“国民级”应用程序都只采用了一套设计稿，大

    家都这么做，整个大环境就是这样的。但是还是那句话，存在不一定合

    理。做两套设计稿虽然现在看起来不现实，但是我们也要做好准备，明

    白两种设计风格之间的区别。当需要我们做两套设计稿的时候，要有能

    力做出来。2.2 适配

    适配对设计师来说是一个老生常谈的话题，但是很少有人能够做到

    真正完全掌握。因为不管是UI设计还是交互设计，都属于从国外传进来

    的“舶来品”，在翻译成中文的时候可能会出现一些词不达意的错误。在

    传播过程中，这些错误可能会被进一步放大。我们可以在网上看到很多

    与适配相关的文章和教程，其中相同的概念在不同的地方可能会有不同

    的表述，甚至有些还是相互矛盾的。这就给我们的分析总结工作带来了

    很大的不便。

    2.2.1 像素与分辨率

    为什么要做适配？适配是为了让同一个界面在不同尺寸、不同分

    辨率的设备上具备相同的显示效果。要掌握适配，首先我们得了解像

    素和分辨率这两个基本概念。

    像素：由一个数字序列表示的图像中的一个最小单位；

    分辨率分为两种：ppi和dpi。

    ppi：每英寸(长度)所包含的像素点数目；

    dpi：每英寸(长度)所包含点的数目。

    这里需要注意的是，英寸是一个长度单位。在我小时候，大家会

    说家里的电视机是21英寸、25英寸、29英寸的等，包括手机屏幕我们也

    会说是5.8英寸、6.1英寸的等，如图2-16所示。但是显示屏毕竟是一个

    面，而我们用英寸来表示一个面，所以，在很多人心中会把英寸误以为

    是一个面积单位，也就是说把英寸看成了平方英寸。

    把英寸看成面积单位的设计师就会对分辨率产生完全不一样的认

    识。其实这里的英寸是指屏幕对角线的长度，英寸实际上是长度单位，如图2-17所示。图2-16 英寸是长度单位

    图2-17 分辨率(ppi)指的是每英寸(长度)所包含的像素点数目

    上面我们提到了分辨率可以分为ppi和dpi。对于dpi，我们只要了解

    就可以了，ppi才是我们真正需要掌握的。从上面的定义可以看出，其

    实dpi和ppi的区别并不大，只不过像素(px)是设计中最小的设计单

    位，点(pt)是iOS中最小的开发单位。我们日常所说的2倍图、3倍图

    就是指屏幕中一个点中有2个像素或3个像素。一个设备究竟要使用2倍

    图还是3倍图，只需看ppi和dpi的比值就可以了。

    在iOS设计规范中，我们经常会看到44、88这些数字。那么44是怎

    么来的呢？其实iOS风格推荐的最小可点击元素的尺寸是44px×44 px。

    以iPhone1为例，因为在iOS设计规范被提出来的时候，苹果还没有适应

    Retina屏，苹果是从iPhone 4才开始采用Retina屏的，当时其屏幕的ppi是

    163，如图2-18所示。而用户在屏幕中可点击的物理尺寸是7～9mm。以

    7mm来计算，1英寸长度里有163个像素，1英寸有25.4mm，那么7mm里

    应该有多少个像素呢？图2-18 iPhone各个版本的屏幕尺寸和分辨率

    简单地计算一下就可以得出是44.92px，也就是我们常说的44px，如图2-19所示。所以这个44px只是相对的长度，随着屏幕ppi的改变而改

    变。如果不懂这个原理，你可能就会死抓着这个44px不放，在任何分辨

    率的屏幕中都是使用44px，这明显是不对的。

    图2-19 屏幕最小可点击区域

    2.2.2 适配原则

    适配原则很简单，只要记住一句话：所有的适配都要在同一倍率

    的方案下完成，同一倍率下组件的尺寸(多数情况)要保持统一。看

    不懂没关系，下面详细解释一下。

    目前来说，我们给APP做界面设计基本上都是在750px×1334px(在

    iPhone 678中的尺寸)的尺寸上做的。所以，适配流程就是以

    750px×1334px的设计稿为基准，切2倍图对iPhone 5、iPhone SE和iPhone

    XR进行适配，切3倍图对iPhone Plus、iPhone X和iPhone XS Max进行适

    配。这里提到的都是iPhone的机型，安卓手机的碎片化太严重了，但是

    适配原则都是一样的。可能有设计师会很困惑，我本身的设计稿就是以2倍图为基准做

    的，而iPhone 5用的也是2倍图，为什么还要做适配呢？这是因为虽然同

    是2倍图，但是手机屏幕尺寸是不一样的。iPhone 8的尺寸是

    750px×1334px，iPhone 5的尺寸是640px×1136px，如图2-20所示。如果

    直接将设计稿等比压缩来进行适配，就会导致在同一倍率下组件尺寸缩

    小。同一个应用程序在iPhone 5中显示的尺寸和间距为iPhone 8中的

    0.853倍，这是不符合上面提到的“同一倍率，同一尺寸”原则的。

    图2-20 同一倍率，同一尺寸

    所以，对iPhone 5做适配就是将750px×1334px尺寸里的元素移植到

    640px×1136px尺寸中。这种同倍率的移植，相对来说比较简单。移植的

    方法主要有以下两种。

    1.高度不变，水平方向尺寸或间距自适应

    这种方法比较适合组件类元素，例如搜索框的高度不变，为了适应

    不同屏幕的宽度，进行适当拉伸；底部栏菜单icon尺寸保持不变，间距

    自适应，如图2-21所示。2.等比缩放

    等比缩放一般适用的是图片类元素，如图2-22所示。

    图2-21 高度不变，水平方向尺寸(间距)为自适应

    图2-22 等比缩放

    3倍图也是同样的思路和流程。目前常见的3倍图机型屏幕分辨率为

    1242px×2208px、1125px×2436px、1080px×1920px、1242px×2688px

    等，在进行适配的时候，统一将其换算为2倍图的尺寸，即

    828px×1472px、750px×1624px、720px×1280px、828px×1792px，然后

    再选择是等比缩放还是高度不变，水平方向尺寸或间距自适应。

    2.2.3 全面屏手机适配

    苹果的全面屏手机完全去除了物理按键，追求更高的屏占比。从苹

    果公司在2017年秋季开始推出的iPhone X，再到2018年推出的iPhone

    XS、iPhone XR和iPhone XS Max，都属于全面屏手机。针对全面屏手机

    做适配其实并不难，全面屏手机与普通手机最大的区别在于其屏幕是不

    规则的：顶部有“刘海”区，底部有Home Indicator，如图2-23所示。

    “刘海”区高度为44pt，Home Indicator高度为34pt。这两部分都是危

    险区，界面内容不能进入危险区。如图2-24所示的例子就是产品界面底部按钮没有针对iPhone X做适配。

    图2-23 全面屏手机适配要注意刘海和Home Indicator

    图2-24 页面内容不要进入“危险区”与危险区相对应的就是安全区。在全面屏手机中最重要的适配原

    则就是界面内容必须保证在安全区以内。图2-25所示的就是iPhone系列

    全面屏手机的安全区示意图，我们可以发现安全区的尺寸比设计尺寸少

    78pt，这是由“刘海”区和Home Indicator高度相加所得的。有意思的是，iPhone XR的倍率是2倍图，它是iPhone全面屏系列手机中唯一一款采用2

    倍图的机型。

    图2-25 iPhone的安全区

    2.2.4 小结

    掌握适配的原则可以帮助我们在产品设计中避过很多潜在的“坑”。

    例如，很多产品首页都使用这种单屏的宫格式布局，因为这样可以让所

    有的信息都得到充足的展示，可点击区域大，用户操作方便。但是这种

    单屏设计在适配的时候就会很困难，手机屏幕尺寸越大，元素高度就会

    越被拉伸，从而造成尺寸比例不统一，如图2-26所示。所以，为了兼顾设计的一致性原则，我们要尽量避免使用这种单屏设计样式。

    图2-26 单屏页面适配iPhone X元素高度会被拉伸

    还有一点我们需要注意，在2倍图的基础上做图时，我们一定要注

    意组件的尺寸不能是单数，比如按钮的高度是75px，那么在3倍图里，即75px放大1.5倍后，图片肯定会出现虚边。这种问题我们要规避。2.3 手势

    鼠标和键盘是个人电脑中最主要的信息录入工具，然而对移动端产

    品来说，与产品进行交互主要靠的是我们的手指，或者说手势。手势成

    了一种强大的交互模式，可以说一款移动端产品在易用性上能否取得成

    功，在很大程度上取决于我们所构建的手势体系是否合理。为什么手势

    这么重要呢？简单来说，手势的使用主要有两大作用：(1)节省界面

    空间；(2)简化交互方式。

    我们都知道iPhone的一个革命性突破就是抛弃了物理键盘，引入虚

    拟按键，增加了屏幕面积。在手机还处于物理按键时代时，因为手机必

    须要预留按键区，所以手机的屏幕尺寸很难再扩大，3.0英寸就已经算

    是大屏幕了，而苹果于2018年秋季发布的iPhone XS Max的屏幕尺寸已

    经达到了6.5英寸，如图2-27所示。

    图2-27 iPhone X系列的屏幕尺寸

    不仅如此，之前用户如果想在手机中放大或缩小照片，则必须点击

    +-键，现在随着多点触控技术的应用，用户可以直接依靠扩张或收缩双

    指来完成照片的放大、缩小，让用户感觉可以直接跟屏幕中的元素进行

    互动，操作更加人性化。2017年，苹果公司发布的 iPhone X 则直接把 Home 键也去掉了，整

    个屏幕底部的空间也被解放了，手势在产品交互中的重要性进一步得到

    了提升。那么我们如何才能正确地构建手势体系？目前来说常见的手势

    有：点击、滑动、拖曳、长按和多点触控等。

    2.3.1 “拇指法则”

    “拇指法则”对于我们了解手势设计具有很现实的指导意义。“拇指

    法则”是资深交互设计师Steven Hoober在2013年对1300名手机用户进行

    调查及研究后提出来的一个新理论。他通过研究发现，49%的用户都是

    单手拿着手机，使用拇指进行操作的。甚至在使用不得不双手握持的大

    屏手机时，大多数人也还是倾向于使用自己的拇指操作。Josh Clark在

    另一项研究中也得出了类似的结论，他指出：75%的手机交互都是由拇

    指完成的。因此，我们也可以说，对触摸屏手机进行交互设计，主要

    针对的就是拇指。

    人类的拇指远比猿类灵活、有力，它使人类拥有了准确的抓握能

    力，具有使用工具的能力 。然而在手机操作中，拇指的可操作区域是

    有限的。如果我们竭尽全力，拇指可以在整个手机屏幕上进行操作(大

    屏手机除外)，但是这也会影响用户使用的舒适度。

    图2-28所示的就是拇指在手机屏幕上的活动范围热图，我们根据各

    区域到拇指的距离，将手机屏幕分为容易区(容易操作)、伸展区(拇

    指需要伸直才能操作)和困难区(拇指比较难操作)。这个拇指活动范

    围热图可以在我们绘制产品原型图时作为参考，对于一些主要功能，我

    们将尽量放在容易区，对于次要功能，可以考虑放在伸展区甚至困难

    区。图2-28 拇指在手机屏幕上的活动范围热图

    例如，我们可以发现，手机屏幕左上角属于困难区或伸展区，而手

    机屏幕左上角一般会放返回按钮。用户在单手握持手机的情况下，拇指

    很难直接点击到返回按钮，如果是大屏手机，则必须要双手操作。而返

    回功能属于高频操作功能，放在困难区会影响用户体验。为了解决这个

    问题，有些产品将返回按钮放到界面底部的容易区。更有甚者，直接引

    入手势来替代返回按钮，用户向下滑动即可返回，如图2-29所示。图2-29 非典型的返回样式

    当然，不同产品针对不同的用户群，要适时调整自己的“拇指法

    则”。例如，经常从事体力劳动的人手指一般会比较粗，如果你的产品

    的目标用户主要为体力劳动者，为了避免用户误操作，我们需要适度放

    大组件的尺寸和组件间的距离。

    2.3.2 功能可见性

    应用手势可以代替按键，但是手势跟按键不一样，它没有实体，用

    户看不见也摸不着。每次使用全面屏手机时，我都要找半天那个替代

    Home键的手势。让用户感知到手势的存在是手势设计的重要前提。如

    果用户都不知道这个元素是可以点击或者滑动的，那么他是不会想到使

    用手势的。以微信为例，可以回想一下自己是使用微信多长时间后才发

    现长按照相机图标可以发纯文字动态信息，滑动聊天记录是可以删除聊

    天记录的。

    传统手机的物理按键上一般都会标有数字、字母和符号来帮助用户

    识别功能。但是现在手机的物理按键被淘汰了，特别是在2017年发布的

    iPhone X带起了一波新的全面屏手机风潮后，手机对用户来说就是一块

    玻璃板。我们要通过手势来跟这块玻璃板进行交互，如果没有引导，那

    么用户很难理解应该如何操作。那么我们该如何引导用户呢？主要的方

    法有以下三种。

    1.引入现实生活中的隐喻

    隐喻设计指的是将现实生活中用户熟悉的事物映射到界面设计中，方便用户理解和记忆。

    例如，在QQ阅读中(见图2-30)，夜间模式的开启关闭是通过滑

    动一根灯绳图标实现的。大部分用户一看到这个灯绳图标肯定知道这是

    可以滑动(拉动)的。图2-30 夜间模式的开启关闭

    同样在这个界面中，翻页效果模拟的也是真实场景中的效果。当然

    这个效果更多的是为了营造氛围，让用户觉得自己真的是在读一本书。

    2.浮层引导

    当我们上线了一些新功能或者用户首次使用功能时，我们可以考虑

    使用浮层进行引导；浮层的引导适用于简单易记的手势，因为浮层一般

    只会出现一次，如图2-31所示。图2-31 浮层引导

    对视频播放界面来说，在界面左侧上下滑动是控制屏幕亮度，而在

    界面右侧上下滑动是控制音量，在界面上方左右滑动是控制播放进度，如图2-32所示。

    图2-32 视频播放界面浮层引导

    3.对隐藏内容进行适当展示

    如果将内容完全隐藏起来用户就看不到了，所以要适当露出一

    点“尾巴”。以知乎APP为例，适当地露出下一条答案，用户就会明白滑动屏幕可以切换答案，如图2-33所示。

    当然，可以培养用户对于手势的感知。以图2-32所示的视频播放界

    面为例，即使我们不做任何引导，根据长久以来的操作习惯，用户也知

    道左右滑动屏幕可以调整视频播放进度，上下滑动屏幕可以控制屏幕亮

    度和音量。但是不同地区用户的操作习惯是不一样的，我曾经就看到过

    这样一个例子：一个朋友参加了一个国际产品的录音功能设计，其中

    icon就是一个话筒图标，交互就是点击话筒图标就开始录音。结果发

    现，除中国用户外的用户都是点击话筒图标；而中国用户绝大部分都是

    长按话筒图标。这是因为中国用户最常见的录音功能就是微信APP中的

    发语音功能，而在微信APP中的交互方式就是长按图标，如图2-34所

    示。

    图2-33 对下一条答案进行适当露出图2-34 微信APP影响了国人的交互习惯

    2.3.3 滑动优先

    不同的手势，用户操作起来的难易程度是不一样的。以最常用的两

    种手势：点击和滑动为例，滑动要比点击更容易操作。如果我们想提

    升产品的易用性，则可以尝试将热门功能的交互方式由点击改成滑动。

    因为相比点击，滑动对于落点区的要求不是很高。滑动一般是全屏操

    作，就像之前提到的iOS系统中的返回手势，在屏幕任何区域滑动手指

    就可以了，而点击对拇指的落点要求较高。

    在微博中用户只需上下滑动屏幕就可以查看更多的内容。之前在网

    易云音乐中APP要查看歌曲的评论，用户需要点击评论图标。但是现在

    用户只需向上滑动屏幕就可以直接查看歌曲的评论列表，网易云音乐

    APP为了打造产品的社区属性可谓不遗余力，如图2-35所示。图2-35 滑动手势在产品设计中应用得越来越广泛

    在微信中弹出浮窗后，用户只要滑动屏幕，就会询问是否要取消当

    前的浮窗，如图2-36所示。如果不取消就直接释放手势，如果取消就滑

    动到屏幕右下角，非常方便。如果使用传统的对话框，且不说会增加用

    户的点击次数，就说要通过什么手势来唤起对话框吧，滑动肯定不行，因为一滑动就出现对话框，那么用户就无法挪动浮窗的位置。点击会进

    入文章页，所以也不可取。 唯一可行的就是长按唤起对话框，但是这

    样交互使得难度进一步加大。

    滑动手势更容易受到用户青睐的另一个例子是瀑布流的出现，在移

    动应用程序中我们很少看到分页按钮。一篇文章可以分成好几页展示或

    直接让用户滑动屏幕查看全文，后者肯定用户体验更佳。因为用户不用

    每次点击加载进入一个新的页面，滑动一下手指在当前页面中就可以看

    到全部的内容。此外不用展示分页按钮，也节省了界面的空间。

    上面说了滑动手势的优点，接下来说一下滑动手势的缺点。用户越

    往下滑动，当前界面所加载的内容就越多，从而会降低页面性能。滑动

    手势的另一个缺点是无法完成位置标记，当你在浏览页面时，突然想起

    上面有一条评论挺不错的，想翻回去找，此时就只能一条条去看。但是如果有分页功能，那么你就可以直接跳转到那个页面，从而能快速地找

    到信息。

    图2-36 使用传统的弹框样式会增加交互难度

    2.3.4 场景

    对于手势的使用一定要考虑具体的场景。例如，在iOS系统中，用

    户向右滑动屏幕就会返回上一级页面，但是在不同的场景中，这个设定

    会发生相应的改变。在网易云音乐APP中，如果手指的落点位于唱片的

    外部，那么向右滑屏幕会返回上一级页面；如果手指的落点位于唱片的

    内部，那么向右滑动屏幕会切换歌曲，如图2-37所示。这种设计会产生

    一个问题：切换歌曲和返回上一级页面的操作手势容易混淆。

    类似的场景在知乎APP中也有，在知乎APP之前的iOS版本中，用

    户是可以左右滑动屏幕切换答案的。但是在新版本中，改成了上下滑动

    屏幕切换答案，当系统识别出用户在进行左右滑动屏幕的操作时，会立

    刻出现弹框提示用户“上下滑动切换答案”。当然，这里的改动不一定仅仅因为切换答案手势容易和返回上一级页面手势混淆，也可能是因为知

    乎APP希望增加底部广告和评论的曝光量，提升答案的阅读完成率，如

    图2-38所示。

    而在虾米音乐APP中，当用户想从播放页面返回至上一级页面时，只要向下滑动屏幕就行了，避免了手势“撞车”，如图2-39所示。所以，手势的应用不能生搬硬套，要考虑具体的场景。

    图2-37 滑动手势要考虑落点图2-38 左右滑动屏幕改成了上下滑动屏幕

    图2-39 向下滑动屏幕返回上一级页面手势的设计要考虑到平台的差异性，要做到入乡随俗。在iOS手机

    中，用户要删除一条微信的聊天记录，使用的手势是向左滑动屏幕；但

    是在安卓手机要中，用户使用的手势是点击并长按“聊天记录”，如图2-

    40所示。如果我们在安卓系统的APP里使用iOS系统的手势，那么用户

    操作起来会很不舒适。

    手势的操作不一定仅限于屏幕上。例如在谷歌翻译APP中，用户向

    左滑动屏幕可以删除记录。如果用户想恢复删除的记录，则只要摇晃手

    机就可以了。在iOS系统中，用户摇一摇手机就可以撤销输入也是类似

    的案例，如图2-40所示。

    图2-40 手势的操作不一定仅限于屏幕上2.4 异常场景

    在产品设计中，我们除规划好那些正常的使用场景外，一定还要考

    虑到那些容易被忽视的异常场景。因为用户是非常挑剔的，我们做对

    100件事所营造的好感可能会毁于做错的1件事。所谓细节决定成败，用

    户体验尤为如此。更何况正常的使用场景大家都在做，我们很难做出差

    异化来赢得用户的芳心。倒不如用心把所有的异常场景都做好，处理好

    这些同行们都注意不到的小细节，从而弯道超车。

    异常是相对于正常来说的，如果正常范围为1～N，0就是极端小，代表着下限，代表着无。这里的“无”有多重含义，如无网络，无(拍

    照、通信录等)权限，无数据等。N代表着上限，代表着无穷大，代表

    着超越临界值。接下来我们就介绍几种需要我们考虑的异常场景。

    2.4.1 网络故障

    网络故障可以被分为两种：网络故障和网络切换，其实网络切换从

    严格意义上来说不属于网络故障的范畴。

    1.网络故障

    所有的报错提示反馈都可以被拆解为两个部分：报错现象(原

    因)和解决方案。因此，在网络发生故障时，我们首先应该告诉用户当

    前网络状态异常，让用户知道这个事实，然后再提供解决方案。

    目前来说，常见的报错样式有Toast、Snackbar、对话框、通告

    栏、界面内嵌与空页面。我看了一下自己之前写的文章，发现都是基于

    组件来阐述适用场景的。这种解构方式存在一个问题，那就是在现实情

    况中，产品或者交互设计师都是基于场景来确定合适的组件。因此，为

    了更方便读者理解，这里不具体介绍每个组件的用法，而是以场景来定

    义组件。

    如何梳理网络故障场景呢？我们可以从用户对于网络的诉求来入

    手。在有的场景中，用户对于网络的诉求不是很高，那么当网络中断时我们可以不主动提示用户，避免给用户造成干扰。

    需要注意这里是不主动提示用户，并不是真的不给用户提示，而是

    只有在用户执行了请求数据的操作时才告知用户网络发生故障。支付宝

    APP就是一个典型的例子，即使断网了，用户基本也感知不到。只有请

    求了新数据，才会通知用户网络异常，如图2-41所示。

    图2-41 支付宝很少主动告知用户网络异常

    支付宝这样“高冷”也是有底气的，因为其大多数页面都有缓存机

    制，用户不用在每次进入这个页面后都要去服务端请求一遍数据。类似

    的产品还有QQ音乐、咕咚，对这些产品来说，断网并不会带来灾难性

    的影响。因为断网不影响用户听已缓存或已下载的歌曲，也不会影响记

    录运动数据，用户对于网络诉求不是很高。所以，对于此类场景，当网

    络发生故障的时候，只要用户没有执行请求数据的操作，就没有必要提

    示用户。

    当然，我们需要给缓存数据设置一个有效期，如果过了这个有效

    期，网络还没有恢复正常，就应该及时提示用户网络发生故障。最常见

    的提示方式就是使用Toast，因为其非常轻量化，出现几秒后会自动消失，不会打断用户正常的操作流程。

    但是Toast有一个缺点：不可以承载点击事件。而Snackbar正好可以

    弥补这个缺陷，我们可以让用户点击Snackbar进入一个网络故障提示

    页，在其中提供一些常见的网络故障场景以及解决方案，最好可以让用

    户直接跳转到系统设置页中去设置网络。当然我们也可以直接让

    Snackbar跳转到系统设置页中。

    对于有缓存数据且对网络诉求不是很高的场景，我们可以考虑不主

    动提示用户。但是对于QQ和微信这类即时通信类的应用程序来说，当

    网络发生故障时及时给予用户提示是非常有必要的。因为如果不给用户

    提示，那么用户就不知道对方突然不回消息是因为惹对方生气了，还是

    因为网络发生故障收不到信息了。QQ和微信在这方面采用的是通告

    栏，用户点击之后会进入一个展示网络故障解决方案的页面。这时可能

    会有读者问，为什么不使用对话框，对话框也可以完成跳转动作啊(见

    图2-42)？

    下面来分析一下。如果使用对话框，那么对话框的触发机制有两

    种：

    (1)只要检测出网络不通畅，就立即弹出对话框通知用户；

    (2)如果第一次检测出网络不通畅，就立即弹出对话框通知用

    户，用户关闭之后不做二次提示。

    第一种触发机制明显不合理，因为用户在使用微信时并不一定非要

    网络通畅，有的用户就是想翻看一下聊天记录。如果只要检测出网络不

    通畅就立即弹出一个对话框，就会对用户造成很大的干扰。图2-42 使用对话框还是通告栏？

    第二种触发机制也不合理，如果用户所处的网络环境不稳定，时断

    时续，一旦用户第一次点击关闭了提示对话框，那么用户就无法感知到

    后续的网络故障。

    所以，微信用户对网络故障提示的诉求是：在给予用户持续性提示

    的前提下，还不能干扰用户的正常操作。也就是让用户知道这个问

    题，但是用户不需要立即去处理。

    可以满足上面这个条件的控件有两个：Snackbar和通告栏，微信

    APP用的是通告栏，京东APP用的是Snackbar，如图2-43所示。

    以京东APP为例，用户在使用京东APP的过程中如果网络突然发生

    故障，那么会从界面顶部弹出一个Snackbar来通知用户，这里的

    Snackbar做了特殊处理，只要网络没有恢复正常就会一直存在。用户点

    击之后会进入一个网络故障提示页，其中展示了一些解决方案。其实在

    前面也提到过，所谓的解决方案就是让用户去系统设置页中检查开通

    网络权限，我们可以像网易云音乐APP一样，直接提供一个跳转超链

    接，这样可以节省用户的操作步骤，如图2-44所示。图2-43 微信APP和京东APP的网络故障提示

    图2-44 让用户直接跳转到系统设置页中，节省操作步骤Snackbar和通告栏的区别在于，Snackbar的位置是浮动的，只要手

    机的网络不畅通，它就一直会出现在界面顶部。这是因为京东APP的用

    户对于网络的诉求比微信用户更强，即使没有网络，微信APP的用户还

    可以翻看聊天记录，而京东的用户在没有网络的情况下还能干什么？没

    有办法浏览商品，更不用说下单了，京东APP比微信APP更需要用户去

    解决网络故障问题，所以京东需要让用户时时刻刻都看到提示。当然，对这种浮动的Snackbar来说，其最大的问题在于不同机型的适配，要不

    然很容易造成对重要功能的遮挡。以“扫码支付”场景为例，如图2-45所

    示，此时Snackbar遮挡住了返回按钮，用户想要离开当前的界面，必须

    要“杀掉”进程，非常不方便。

    图2-45 Snackbar遮挡了返回按钮

    上面提到的场景都是页面已经缓存了数据的，对于没有缓存数据的

    页面，应该怎么提示用户呢？有两种解决方案：一种是展示空页面；另

    一种是展示骨架屏(Skeleton Screen)，如图2-46所示。

    骨架屏，顾名思义就是展示页面的框架，当数据请求完成时再渲染

    页面。这种先占好位置再加载数据的模式也被称为占位符。图2-46 骨架屏

    最后再说空页面。空页面的展示方案也有两种，如图2-47所示。

    图2-47 网络故障提示页：空页面(1)提供“刷新页面”按钮；

    (2)提供“查看解决方案”按钮。

    这两种方案都有各自的优点，我更倾向于把这两种方案进行融合：

    显示“刷新页面”按钮，如果用户点击了还是没有办法请求到数据，则再

    以Snackbar的形式提供解决方案的跳转超链接。其实这两种解决方案都

    是引导用户去系统设置页面里检查开通网络权限。

    2.网络切换

    除网络中断与网络信号弱的情况外，还有一个需要考虑的问题：网

    络切换。当将网络从4G网络切换至Wi-Fi时，用Toast来提示用户是没有

    任何问题的，甚至不提示也没事，不会对用户产生太大的影响。但是反

    过来，当Wi-Fi突然断掉，切换至4G网络时，我们还能如此淡定吗？

    当用户用Wi-Fi观看视频时，如果Wi-Fi突然断掉，那么系统会自动

    切换至4G网络。为了避免让用户在不知情的情况下耗费大量的移动流

    量，我们应该给用户一个网络切换的提示，用户确认之后才可以继续观

    看视频。提示的方式在目前来说主要有使用界面内嵌和对话框两种方

    式，哔哩哔哩APP和网易云音乐APP在这里使用的都是界面内嵌的方

    式，如图2-48所示。

    在QQ音乐APP中，如果在用户听歌过程中Wi-Fi突然断掉，其就会

    立刻暂停缓存，防止用户在不知情的情况下使用移动流量缓存歌曲，如

    图2-49所示。当然，如果每个月的移动流量足够多，用户也可以手动关

    闭网络切换提醒，之后使用移动流量播放下载歌曲时不会收到类似的

    提示。

    我们需要特别注意：提示网络由Wi-Fi切换至4G网络时绝对不可以

    使用Toast!因为在某些安卓手机中，用户在系统设置中关闭推送信息

    时会把Toast也给禁用了，这些用户是收不到提示的。所以，优先级高

    的反馈我们都只考虑使用对话框，因为对话框所承载的信息百分之百会

    让用户看到。

    前面提到的都是网络发生故障的场景，那么网络恢复正常应该怎么

    办？我比较喜欢网易云音乐APP的处理方式：当检测到网络恢复正常

    时，页面会自动完成刷新和加载，不需要用户自己手动刷新。这种处理

    方式有两个好处：(1)减少用户的操作步骤。

    (2)避免使用弹框。

    图2-48 界面内嵌式网络提示图2-49 Wi-Fi中断立刻通知用户，避免在用户不知情的情况下使用移动流量缓存歌曲

    很多人都形成了一个思维定式：认为如果系统状态发生了变更，就

    应该通过弹框来通知用户。但是如果用户看到了页面自动完成了刷新和

    加载数据，就肯定感知到了“网络恢复正常”这个事实，还需要加一个弹

    框来提示吗？明显是多此一举，而且哪怕Toast再轻量化，对用户也会

    造成干扰。所以，在产品设计中，如果可以通过控件自身状态的改变

    而让用户感知状态的变更，那么我们就没有必要使用弹框。使用弹框

    来通知用户是我们最后的选项。

    此外，我们还要考虑手机开启热点的情况(用户使用苹果手机可能

    会开启热点)，如果产品经理没有考虑到这个场景，就会导致整个产品

    界面向下移动，从而对底部菜单栏中的信息造成遮挡，即使没有遮挡，平移了一下产品界面也不是一个好的用户体验，如图2-50所示。图2-50 开启热点会导致界面整体下移

    2.4.2 空页面

    空页面是我们目前对于状态0的最常见表现方式，因为空即代表着

    无。当然出现空页面也并不一定意味着场景异常，有的时候因为用户从

    未进行过操作也会展示空页面。例如，在“我的银行卡”页中，用户首次

    进入后展示的是空页面，这是因为用户从来就没有绑定过银行卡。

    1.空页面真的有必要吗？

    设计师不要每次在接到空页面需求时上来就做，首先要思考其存在

    的必要性。空页面真的有存在的必要吗？例如，如图2-51所示，当用户

    没有购买保险时，点击“我的”页中的“保险”一栏会进入“我的保单”空页

    面。空页面中会提供“进入保险首页”按钮，用户可以去“保险”首页购买

    保险。如果我们非常希望用户去购买保险，为什么不做一个判断？当没

    有购买保险的用户点击“保险”一栏时，可以让用户直接跳转到“保险”首

    页去购买。对一个从来没有购买过保险的用户来说，展示一个关于保单

    的空页面没有任何意义，哪怕你的按钮做得再好看，其转化率也不可能

    是100%，让用户直接去购买更合适。图2-51 引导从来没有购买过保险的用户进入保单空页面是否合理

    2.where how

    在懒人英语APP中点击“我的收藏”按钮后，会进入一个空页面，这

    里什么东西也没有。到底是因为用户之前没有收藏过课程，还是因为网

    络原因导致数据加载失败呢？用户不知道，所以合格的空页面首先要向

    用户介绍这是一个什么页面，告知用户当前的位置并解释原因。

    同样还是懒人英语APP，这次点击的是“缓存管理”按钮。但是进入

    的页面的标题是“本地节目”，这属于一致性问题，这里就不说了。这个

    空页面告诉用户其还没有下载任何内容，但是没有说明具体应该去哪里

    下载内容，没有提供操作路径，如图2-52所示。这是空页面应该回答用

    户：接下来可以干什么，以及将会出现的情况。

    如果我们不提供解决方案，那么用户进入这个空页面后就只能原路

    返回，就像进了一个死胡同一样，这对用户体验来说是一种伤害。所

    以，我们应该在空页面中给用户提供相应的引导，例如，在喜马拉雅

    FM APP中，如果用户没有上传过作品，那么应该引导用户去上传作

    品，如图2-53所示。图2-52 空页面应该告知用户“空”的原因，并且引导用户进行后续操作

    图2-53 引导用户去录制节目如图5-54所示，用户要购买从南京到新疆阿克苏的火车票，可是没

    有从南京到阿克苏的直达列车。如果图省事，那么可以直接告诉用户没

    有查询到相应的车次。而好的用户体验通常就在于可以往前再走一

    步。没有直达的列车，我们可以给用户提供中转列车，这样用户就不需

    要自己手动规划中转方案；还可以推荐机票，为机票业务带来流量，增

    加产品内不同模块之间的渗透率。

    3.品牌化设计

    你与别人不一样的地方往往就是你比别人优秀的地方，不要随波逐

    流，要留住自己的“棱角”。这句话同样适用于产品。一款产品如果想从

    众多的同类产品中脱颖而出，就需要有自己独有的核心竞争力。从设计

    的角度来说，产品之间的区别就体现在各自的品牌，要将品牌基因注入

    空页面的设计中，将空页面打造成一个释放自己品牌魅力的平台。

    例如，Khaylo Workout这个训练类APP在空页面中放上了拳击手套

    的图像，在提升了页面设计感的同时，也能彰显“运动拼搏”的企业文

    化，如图2-55所示。

    而网易漫画在空页面中放上了漫画人物，这与产品的特性相契合。

    其底部所配的文案也很俏皮，很好地起到了愉悦用户的作用，如图2-56

    所示。图2-54 给用户提供备用方案

    图2-55 将品牌基因注入空页面设计图2-56 空页面设计与产品的特性相契合

    4.简单至上

    大部分的空页面中的内容都是插画+文案的组合，其中文案字数很

    少。从用户体验的角度来说，我们希望用户在空页面中停留的时间越短

    越好。所以，我们应该让用户进入这个页面后，在短时间内就知道当前

    页面为什么没有“内容”，以及如何脱离当前页面。注意，说明文字要足

    够简单，不要写大段的内容，因为用户没有耐心去读。

    2.4.3 超越临界值

    超越临界值意味着极端场景。例如，在用户录入姓名的场景下，就

    要考虑如果用户是少数民族，名字很长的情况，那么在这种情况下是缩

    小字号还是加省略号？

    当我们做一个抽奖活动页时，如果超过了活动最终期限，奖品还没

    有发完，那么应该怎么处理？

    当然，这里的临界值不一定特指数值，它也代表着用户的极端操

    作。例如上面提到的报错提醒。用户刷新界面一次就会通过Snackbar提

    醒一次用户，如果用户在短时间内重复刷新界面，那么应该如何给予合

    适的提示？

    此外，我们还应该考虑因为意外情况导致用户操作中断的场景：是

    否要保存之前的数据方便用户下次操作。如果无法保存，那么也要给用

    户提供入口让他们继续完成被中断的操作，如图2-57所示。图2-57 产品设计需要考虑所有的异常场景

    很多产品都给用户提供了指纹解锁功能，有些用户在秋冬季节手会

    蜕皮，从而导致指纹解锁失败，所以他们会希望关闭指纹解锁功能。但

    是关闭指纹解锁功能时还是需要验证指纹的，验证不通过会导致无法关

    闭此功能。后来我们给用户额外提供了输入登录密码关闭指纹解锁功能

    的路径。所以一款产品要做到让用户满意，就必须要考虑到足够多的特

    殊场景。第3章 元 素

    色彩、文字、图标、布局、图片和按钮是界面设计中的六大视觉

    元素，而究竟应该怎么组合这些元素呢？3.1 色彩

    之前曾盛传谷歌会推出新的All-White设计风格，即在界面设计中大

    面积地使用白色，将极简主义发挥到极致。虽然后来被证实这并不是谷

    歌官方推出的设计规范，但是在界面设计中配色越来越少却是一个不争

    的事实。以网易云音乐6.0的这次改版为例，其界面中大面积的“网易

    红”已经不复存在，取而代之的是白色，画风更加轻盈，如图3-1所示。

    图3-1 网易云音乐6.0版本与之前版本对比

    我们常说视觉稿只是给高保真原型图上了一遍色，而用户对于色彩

    的诉求正在降低，所上的色越来越少，这就导致现在很多产品的高保真

    原型图和最终的视觉稿差距很小。

    3.1.1 为什么要配色

    要了解用户对于色彩诉求降低的原因，我们首先要明白色彩在产品

    设计中的价值体现在哪里，如图3-2所示。图3-2 色彩在产品设计中的价值体现在哪里

    通常来说，产品配色体系的建立主要有以下三个目标：

    ·视觉区分。

    ·调整界面风格。

    ·吸引用户的注意力。

    1.视觉区分

    一个产品可能会有好几个同级别的功能模块和分区。设计师需要对

    产品的信息内容和功能模块进行整体规划，建立界面的信息层级，以

    帮助用户在视觉上更好地区分。配色可以很好地帮助设计师实现这个

    目标。例如，如图3-3所示，一款金融APP主要的功能模块有财富、白条

    和借钱。其中每个分区都会被配上不同的主题色，方便用户更好地识

    别，因为用户使用产品时间长了就会将配色和相应的功能模块关联起

    来。图3-3 配色可以帮助用户区分不同的功能模块

    配色可以实现视觉区分，但是视觉区分不是只能通过配色来实现。

    文字、图像(图标)、布局都可以实现视觉区分。

    例如，在一款金融类应用程序中会有不同类型的理财产品(普通

    型、随借随还型和可转让型3种类型)和不同的状态(投资确认中、投

    资成功已起息、清算中等合计11种状态)。

    在这种情况下(3种产品类型，11种产品状态)，配色就要很小心

    了。如果为每一种产品类型和状态都配有不同的颜色，那么界面整体就

    会显得很凌乱、花哨，而且用户的记忆成本很高。

    这就需要我们对状态进行整合，将相似的状态整合成一种，这样可

    以减少颜色的数量。当然会有人感觉6种颜色还是多，因为书本上告诉

    我们，在同一页面中配色不要超过3种。但是我们得从实际情况出发，对理财产品来说，用户不太可能在同一界面中看到6种状态，也就是

    说，用户同时看到6种颜色的概率很小，所以在这里使用6种颜色问题不

    是很大，如图3-4所示。

    既然上面对产品状态使用了颜色来进行标识，那么对于产品类型，我们可以选择使用文字(标签)的形式来区分，如图3-5所示。文字相

    对于色彩来说，给用户的视觉观感还是稍弱。但是相比产品类型，用户

    更加关心的是产品的当前状态，所以弱化也没有关系。

    图3-4 配色标识状态

    图3-5 文字标识类型

    使用布局来实现视觉区分也很常见。以图3-6为例，同样的一个借

    款页，在这个页面中，用户最主要的需求是录入借款金额，那么在页面

    布局中就应该给予借款金额文本框最大的空间，将它从其他元素中区分

    出来。而图3-6右图所示的页面则没有做到这一点，没有展示信息的优

    先级。

    2.调整界面风格

    每款产品的视觉风格都是由其自身的市场地位和目标用户群所决

    定的。例如，医疗类产品会使用绿色作为主色调，因为这象征着健康、安全、可靠。而电商类产品会使用光波较长的红色和橙色作为主色调，因为这两种颜色可以让用户产生兴奋感，刺激用户产生购买欲望，如图

    3-7所示。图3-6 信息层级越高，间距越大

    图3-7 产品的自身定位和目标用户群决定了其视觉风格当我们的电脑出现故障时，会出现蓝屏，为什么是出现蓝屏而不是

    红屏或者绿屏呢？因为蓝色是冷色系，会让人联想到天空、海洋，可以

    给人一种冷静、沉稳的感觉。而当电脑出现故障时，最需要做的就是安

    抚用户的情绪，让其不要慌张。如果使用红屏，则会刺激用户原本就不

    稳定的情绪。

    前面提到的金刚区icon，在举行活动和大促期间，也可以为其配上

    与节日相衬的颜色来烘托气氛进行营销宣传，如图3-8所示。

    图3-8 针对不同的活动，配置不同风格的icon

    与视觉区分一样，界面风格也不是只由配色决定的，文字跳跃率同

    样可以影响界面风格。

    文字跳跃率是指在同一界面中不同文字之间的大小比率。对于不同

    功能的文字，在排版设计的时候会有字体、字号和字重的区别，例如主

    标题、副标题和正文的字号通常是依次减小的，这种字号的差异会带来

    不同的文字跳跃率。一般来说，文字跳跃率高的界面会显得比较活泼，文字跳跃率低的界面会显得平静、沉着，如图3-9所示。

    当然，不只文字有跳跃率，图片也有跳跃率。对一些具有文艺风格、小众的产品来说，因为自身的定位和目标用户，导致其配色要尽

    量“克制”，一般会大面积地使用白、灰、黑或者其他同色相配色(蓝色

    与浅蓝色，红色与粉红色等)，这样的界面会显得庄重、高雅且富有现

    代感，但是也会显得单调，无法激起用户的兴趣，如图3-10所示。设计

    师可以通过提升图片的跳跃率来提升产品界面的活力。

    图3-9 文字跳跃率高的界面会显得比较活泼图3-10 图片也要有跳跃率

    3.吸引用户的注意力

    我们经常喜欢使用配色来吸引用户的注意力，以图3-11所示的行为

    召唤按钮(call to action)为例，为其配以与背景色差距较大的颜色，可

    以使其从背景中凸显出来。

    其实，即使我们不使用配色，也可以很好地吸引用户的注意力。例

    如，如图3-12所示，在谷歌搜索页中有大面积的留白，用户的目光自然

    就会被吸引到搜索框上。这和谷歌的初衷相契合，他们希望用户在这个

    页面完成搜索操作，所以不用展示过多其他的信息来分散用户的注意

    力。

    阴影效果也可以用来吸引用户的注意力。阴影效果可以提升目标元

    素的“海拔”，进而使其从背景中凸显出来，这来自对现实生活的隐喻。

    目前QQ音乐的搜索框是半透明的背景，将其改成纯白色背景属于在配

    色上进行区分，再加上阴影效果可以进一步地使其凸显，如图3-13所

    示。图3-11 用配色来标识行为召唤按钮

    图3-12 少即是多图3-13 阴影效果

    当然，我们还可以使用模糊效果来吸引用户的注意力。用户总是会

    不由自主地被焦点部分吸引，而忽视被虚化的部分。人眼的对焦机制好

    像一个调节器，可以捕捉那些离你忽远忽近的物体，这样才能让你感受

    到周围一切事物的深度和距离。设计师可以根据这个理论，将界面中一

    些不重要的内容进行模糊处理以凸显那些重要的内容，如图3-14所示。图3-14 对背景进行模糊处理可以让用户的视线聚焦

    4.为什么是色彩

    通过上面的分析我们可以发现，色彩的三大主要功能都可以通过其

    他的替代元素来完成，这从根本上给我们推行极简主义配色的设计理念

    提供了先决条件。我们都明白色彩是可以被替代的，但是替代的关系是

    相互的，为什么是你替代我而不是我替代你呢？

    人类在回忆所看过的场景和事物时，对色彩的记忆度要高于形态。

    也就是说，从视觉角度来看，一款产品给用户留下最深的印象往往是

    其整体的配色。我们经常说黑色、白色、灰色是永不过时的配色，为什

    么？因为这3种颜色可以呈现事物的本质。饱和度高的配色会表达出很

    多主观的内容，在产品内容比较匮乏的时代，这样的配色可以让用户不

    会感到单调。但是现在产品中的内容越来越多，我们必须让用户的注意

    力聚焦于内容本身。而用户的注意力是一个有限的资源，配色又是最能

    吸引用户注意力的元素，所以我们首先会从配色这里下手。

    3.1.2 配色规范知道了为什么而配色，接下来就分析如何从0到1构建一款产品的配

    色规范。

    1.选取色彩

    多伦多大学曾经做过一项调查，发现大部分用户都倾向于在一个页

    面中最多出现2～3种颜色。而为了彰显产品的品牌基因，我们一般会

    选取产品的品牌色作为主色调，这也就是说，我们还需要挑选1～2种

    颜色作为辅色。当然这也不一定，因为现在很多产品的LOGO中出现了

    两种配色，我们可以直接选用这两种颜色。以图3-15为例，微众银行的

    图标选择了以蓝色和红色为主体。所以，如果产品的LOGO是现成的，那么选取颜色这个步骤就会变得很简单。

    互补色搭配：在色轮中(见图3-16)，处于彼此的对立面的两种颜

    色被叫作互补色。因为互补色的色相差距太大，所以搭配起来会形成强

    烈的对比效果，进而可以吸引用户的注意力。在使用互补色的时候，我

    们需要特别谨慎，不加节制地使用的话，就会导致页面出现“红配绿”的

    效果，非常刺眼。当然可能会有人说，“红配绿”的效果不一定差，微信

    的消息提示就是“红配绿”。这是因为微信的诉求就是希望用户感知到有

    新消息，如果做得不刺眼，那么用户就感知不到了。

    然而在产品内部页面设计中，只有优先级最高的信息才可以考虑使

    用互补色来搭配。

    单色搭配：也有很多产品使用单色搭配，即在整个产品的界面中，除品牌色和必要的中性色外，将其他的颜色精简到极致，如图3-17所

    示。 这种做法有两个好处：

    (1)避免用户的注意力被配色吸引，可以让其关注内容本身；

    (2)提升用户对于品牌的感知度。

    类比色搭配：除互补色搭配和单色搭配外，类比色搭配也很常见。

    类比色搭配是指选用一款颜色作为主色调，将色轮中邻近的颜色作为

    辅色。因为这两种颜色在色轮中相互靠得很近，所以搭配起来不会有很

    突兀的感觉。图3-15 提取LOGO配色注入界面设计

    图3-16 色轮图3-17 单色搭配

    2.主体风格

    对很多设计师来说，选好主色、辅色就意味着设置好了配色规范。

    其实这还远远不够，我们还要确定产品的主体配色风格。什么是主体配

    色风格？举个例子，如果你的产品选择了单色搭配，那么在主界面中到

    底是选择“素雅白金”还是选择“酷炫黑金”呢？这一点需要在配色规范中

    予以明确，如图3-18所示。

    对于主体配色风格，我们可以从产品定位和使用场景两个方面进行

    分析。

    首先来说产品定位。如果你对页面的要求是可读性第一，那么浅色

    背景会更加合适。因为用户长时间看深色背景更容易疲劳，而浅色背景

    会增加页面的空间感，不会让页面显得厚重、拥挤，可以让用户更加容

    易将注意力集中在内容本身上。这一点在第2章中也提到过，即知乎的

    改版，对知乎用户来说，他们真正关注的是里面的“干货”，是文字，所

    以建议减少配色的使用，或者选用浅色系配色，从而避免吸引用户的注

    意力，让用户聚焦于内容，如图3-19所示。图3-18 确定主体风格

    图3-19 减少不必要的配色，让用户聚焦于内容反过来说，如果你希望这个页面在视觉表现力上更强一点，或者说

    更加酷炫，那么深色背景会更加合适。因为深色背景虽然会让页面显得

    很厚重，但是因为其吸收了页面中其他元素的光，更有利于表现非文字

    形式的内容。

    使用场景同样重要。在阳光照射条件下，深色背景的屏幕会反光，不利于用户阅读。所以户外使用场景较多的产品使用浅色背景更加合

    适；反之，在光线条件不佳的情况下，使用深色背景更加稳妥。例如，很多阅读类APP的夜间护眼模式就是将页面设置成了“黑底白字”。3.2 布局

    APP与图书、杂志、报纸等传统媒介在本质上都属于信息的容器，只不过APP这个容器的容量要大得多，而且其中的信息分类更加复杂，包括文本、图片、视频和音乐等。不同的界面布局会极大地影响用户对

    于信息的感知效率。界面的布局细分起来有很多种，如果要挨个介绍，则不利于读者理解，而且也没有必要。所以，这里我把界面的布局分为

    两种：列表式布局和宫格式布局，如图3-20所示。

    图3-20 列表式布局和宫格式布局

    不管是列表式布局还是宫格式布局，都是属于信息整合的方式。

    APP就像是一本书，而且是一本大部头的书，如果不对信息进行分割及

    整合，那么用户很难去“阅读”。列表式布局是将信息整合成纵向的信息

    栏中，而宫格式布局则是将信息整合到不同的模块中，每一个模块代表

    了一类信息。那么列表式布局和宫格式布局最适用的场景分别是什么呢？下面从视觉吸引力和可拓展性两个方面来具体分析。

    3.2.1 视觉吸引力

    不知道读者有没有注意到一个现象：一般产品的一级页面大多使用

    宫格式布局，而二级、三级页面大多使用列表式布局。这是因为一级页

    面是产品的门户和“脸面”，而且又多属于功能的聚合页面，特别是首

    页，这就要求一级页面在展示足够多入口的同时，还要兼顾视觉上的吸

    引力。而以icon、插画、图像为主要表现形式的宫格式布局在视觉设计

    上更容易出彩，如图3-21所示。列表式布局在视觉吸引力上的确弱了一

    点，经常会被“吐槽”不好看。

    图3-21 宫格式布局在视觉设计上更容易出彩

    在相同的空间里，宫格式布局可以展示更多的入口，如图3-22所

    示。以底部动作栏为例，如果采用宫格式布局，则可以轻松地展示8个

    选项。但是如果采用列表式布局，则最多只能展示5～6个选项。

    此外，宫格式布局更可以表现信息的优先级，我们可以通过更改宫格的尺寸来调整用户的注意力分布。而列表式布局更显得中规中矩，在

    表现信息的重要程度上显得力不从心，其只能通过更改信息的排列次序

    来表现信息的优先级。

    图3-22 宫格式布局可以展示更多的入口

    3.2.2 可拓展性

    宫格式布局最大的缺点就是可拓展性差。什么是可拓展性？在产品

    设计中，可拓展性就是为了应对将来未知的改变。一个产品的布局不会

    因为功能的改变而发生巨大的变化。

    布局的改变一般来自功能的改变，因为产品是由一个个功能组成

    的。功能的改变可以被分为两类：数量的改变和状态的改变。当然，这

    里不涉及具体的功能设计，只是探讨功能入口的展示。

    以金刚区为例，不管其布局是2×5样式还是3×4样式，如果想单独新

    增一个功能，则界面就会失衡。当然，我们可以进行分页，这就意味着有一些功能需要用户滑动页面才能看到，具有一定的风险，如图3-23所

    示。

    列表式布局就没有这方面的顾虑，它可以在不影响界面布局的情况

    下，无限制地增加新功能入口。例如，在微信的“个人中心”页中，根据

    用户等级不同，所展示的功能也不一样，这里使用列表式布局更加合

    适，如图3-24所示。

    图3-23 分页功能会导致有一些功能需要用户滑动页面才能看到图3-24 用户可以手动设置“发现”功能，不影响界面布局

    上面说的是功能数量的改变，接下来介绍功能状态的改变。其实功

    能状态的改变又可以被分为外部状态改变和内部状态改变。

    外部状态改变主要指产品层面的变化，针对的是C端产品。对C端

    产品来说，定期组织营销活动来吸引用户肯定是必不可少的。在这种情

    况下，我们需要对页面的元素进行处理，使其适应不同的活动氛围。从

    这个方面来说，我们可以发现为什么宫格式布局更容易受各大电商平台

    的青睐，因为它可以根据不同的活动配置一套完全不同的icon，灵活多

    变。这种通过改变状态来打造营销氛围的能力是列表式布局所不具备

    的，如图3-25所示。图3-25 针对不同的活动，配置不同风格的icon

    对于一级页面的设计，我还有一个建议：千万不要随意把功能入口

    放在顶部栏上。因为对一些小功能的迭代来说，入口放在哪里都一样，用户能看到最好，看不到也无所谓。但是，如果要上线一些层级比较高

    的功能，又不想打乱界面的原有布局，则最好放到顶部栏上。特别是当

    页面中还没有搜索、城市定位、分享、筛选、通知等全局功能时，一定

    要把顶部栏的位置空出来。

    3.2.3 信息量

    列表式布局所占的页面空间更大，因此可以承载更多的信息量。以

    图3-26所示的日历为例，此时做了一个拆红包活动，如果采用以icon为

    主的宫格式布局，则只能加一个“拆红包”的角标；如果采用列表式布

    局，可以直接展示金额，更能起到刺激用户的作用。图3-26 列表式布局可以展示红包金额，更能刺激用户

    此外，我曾想过：如果微信的聊天列表界面改成了宫格式布局，那

    么会怎么样？这样的改动可以让用户在一屏内看到更多的好友，但是用

    户无法像现在一样预览消息。此外，微信用户可以通过消息预览得知这

    是一条文字信息还是语音信息，抑或是红包、音乐、小程序等。如果使

    用了宫格式布局，则我们只能通过不同样式的角标来进行区分，但是还

    是无法让用户看到具体的信息内容。当然我们可以选择放大单个宫格的

    尺寸，给予信息更多的展示空间。可是这样做的话，一屏内展示的好友

    数量就会减少，那么宫格式布局最大的优点也就不复存在了，所以这里

    使用列表式布局，如图3-27所示。

    此外，还有一个问题，收到最新消息的好友的头像肯定会跳转到页

    面的左上角，不同于列表式布局直线型的上下移动，宫格式布局的这种

    上下左右式移动对用户来说并不是一个好的体验。图3-27 如果微信的好友列表改成宫格式布局会如何呢？3.3 文字

    文字是界面设计中不可或缺的一个部分，如果缺少文字，那么用户

    就无法获得准确的信息。前段时间我去体检，医院墙上的显示屏引起了

    我的注意：为什么有的人的名字前面有咖啡杯图标，有的人没有(见图

    3-28)？后来问了护士才明白，有咖啡杯图标意味着你可以去吃早饭

    了，接下来的体检项目不要求空腹。在这里，用户很难通过一个咖啡杯

    图标领会这层意思，不如加上“可就餐”的文字更直接。

    图3-28 咖啡杯图标代表什么意思？

    以上这个例子不是个例，就以底部栏菜单来说，不管你的icon画得

    多么传神，大多数产品还是会在icon底部加上文字说明。这是因为具象

    的元素可以让用户更快地感知信息，但是无法保证精确性。

    制定一套字体规范一直都很困难，因为产品中出现文字的场景实在

    是太多了。但是，如果你要制定字体规范，就必须要把产品中的文字梳

    理一遍。在这里，我将产品中的文字主要分为四类：标题类、正文类、提示类和交互类。

    3.3.1 标题类文字

    首先来说标题类文字。标题，顾名思义就是要让用户在短时间内了

    解界面中的大致内容，其讲究简洁明了。在APP中，标题一般有顶部栏

    标题、底部栏标题、列表标题、表单标题等。不同类别的标题代表了不同的等级，而我们一般选择使用不同的字色和字号来区分不同等级的

    标题，如图3-29所示。例如，顶部栏标题的等级最高，所以字号最大，甚至会改变字重，例如从Regular调整到Bold。

    标题类文字配色相对来说比较简单，选项比较少，一般只会使用深

    灰色或者品牌色，如图3-30所示。标题虽然很重要，但是也不能过于抢

    眼。

    根据重要性程度，我们可以把标题分为不同的层级，一般来说，层

    级越低的标题，颜色越浅，字号也越小。深浅的搭配可以给界面带来意

    想不到的效果。

    图3-29 字体样式

    图3-30 文字配色

    例如，在微信的好友列表和聊天界面中，用户名和聊天记录的文字

    颜色深浅设置正好是反过来的，如图3-31所示。这其实也很好理解：在

    好友列表中，用户关注的是好友是谁，而在聊天界面中，用户更关注的

    是好友说了什么。所以，这里用深浅不同的文字来帮助用户加以区分。

    很少有产品会将标题的颜色设为品牌色，因为品牌色的饱和度一般

    都很高，将标题的颜色设为品牌色很容易分散用户的注意力，除非是底

    部栏菜单这种有选中状态的文字才会考虑使用品牌色，如图3-32所示。图3-31 用深浅不同的文字帮助用户加以区分

    图3-32 未选中选中状态

    3.3.2 正文类文字

    正文类文字是给用户提供详细说明和解释的，正文类文字的配色要

    比标题类文字浅一些，字号也会小一些。这样的设置主要是从两方面来

    考虑：一是因为用户对正文都不太感兴趣，很少去读，所以我们没有必

    要在这里使用配色来吸引他们的注意力。二是因为正文的字数一般比较

    多，所以小字号会更加合适，而且过于花哨的配色会让用户在长时间阅

    读后容易造成视觉疲劳，如图3-33所示。图3-33 正文类文字

    正文尽量不要使用衬线字体，因为正文字号一般较小，有的设备显

    示器的像素不足以表现小字体上细小的衬线，会出现锯齿效果，对易读

    性影响很大。

    3.3.3 提示类文字

    提示类文字，顾名思义就是要给用户以引导和提示。这就意味着提

    示类文字要足够显眼。如果用户都注意不到文字，还怎么提示呢？当

    然，这里的显眼是相对来说的。

    提示类文字的一个主要用途就是给用户展示当前的状态。我们来设

    想一个场景：你在一个理财平台上购买了一款理财产品。在不同的时间

    段内，产品会有不同的状态。你看到这款理财产品的收益率不错，于是

    投资了3000元，这时的状态是“确认中”；过了几天，这个产品开始起

    息，进入“起息中”状态；又过了一段时间，你临时有事急需用钱，就把

    产品转让给别人，又会依次进入“转让中”和“转让成功”状态，如图3-34

    所示。图3-34 状态过多的情况，使用文字进行标识

    对于不同的状态，我们需要在设计上加以区分，以帮助用户更好地

    识别。一般常见的方法就是使用不同的配色来进行区分，但是这只适用

    于产品状态较少的情况。如果你的产品状态过多，每一个状态都配以一

     ......