动效、缓存与加载看完本文你会学到：1. 为什么需要动效

看完本文你会学到：

1. 为什么需要动效设计？

什么是动效设计？

动效在产品设计的作用

动效设计的好标准

2. 如何设计动效？

6个构思动效的方法

6个实现动效的方法

3. 动效的类别

4. 常用的动效软件

5. 让动效落地的4个方法

一、为什么需要设计动效？

我最开始接触动效设计，只是觉得又炫，又酷——翻滚的，旋转的，爆炸的。只是觉得新鲜，好玩，可以炫技，可以让设计更加酷炫。

可能大部分同学，在做刚开始接触的时候多多少少都会有和我差不多的想法——这就是我们做动效设计的目的吗？应该不是。

解决为什么要做动效设计这个问题，就要搞清楚什么是动效设计？动效设计有什么作用？

1. 什么是动效设计？

动效大范围兴起，大概始于扁平化设计之后，扁平化设计的好处在于用户的注意力可以集中在界面的核心信息上，将对用户无效的设计元素去掉，不被设计所打扰分散注意力，使用体验更加纯粹自然。

这个思路是对的，回归了产品设计的本质，就是提供更好的使用体验，而不是提供更漂亮的界面设计。

但是，过于扁平化的设计，也带来了新的问题：一些复杂层级关系如何展现？用户如何被引导和吸引？

这与用户在现实3D世界中的自然感受很不一致，所以Google推出了Material Design设计语言。

Material design 设计规范中，将动效设计这一章命名为「Animation」，动画、活泼的意思。

动词 Animate 是「赋予生命」的意思，动效可以定义为使用类似动画的手法，赋予界面生命和活力。

前面我们说过Material design设计语言，一部分作用是为了解决过于扁平化设计所带来的弊端：复杂层级关系如何展现，用户如何被引导和代入。

为了解决这个问题，Material design 设计风格，充分利用Z轴，通过分层设计以及动效相配合的方式，在扁平化基础上提供给用户更好理解的层级关系，赋予设计以情感增加用户使用过程中的参与度。

2. 动效设计对于产品设计有什么作用？

动效设计的作用

如上图所示，动效对于产品设计的作用包含：

传递层级信息；

传递状态信息；

提示隐藏信息功能；

传递情感化信息。

知道了这些，那么，我们为什么需要动效设计？

通过上面说的，结合我们自身产品设计的特性，我们可以总结出动效设计的动机主要有如下几点：

使等待不枯燥；

使变化不生硬；

使反馈不单调；

使体验有情感；

使用户更愉悦。

好的动效是什么?

知道为什么做动效设计，那我们应该做什么样的动效设计？或者说好的动效设计是什么呢？是炫酷的，翻滚的，旋转的，爆炸的吗? 复杂程度是评判好与坏的标准吗？

国外一位著名的一线设计师，曾经在分享会上对于好的动效下过这样一个定义：

好的动效应该是隐形的，好的动效应该是以提高可用性为前提，并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制。

这句话其实就是：好的动效设计是合适的，是对于用户使用体验的提升，最终服务的是体验而不是展示你的动画设计。

既然如此，那么让我们总结一下好的动效设计的标准。

首先要具备一下几点特性：

快速且流畅；

恰到好处的反馈；

提升操作感受；

提供良好的视觉效果。

动效设计标准

其次，好的动效设计应该是首先服务于体验，其次适当设计（考虑全面，如性能，实现成本，是否干扰用户等），再次就是要让用户感受到你输出的情感互动，最后也是最基本的就是要具有视觉上的美感。

二、怎样设计动效？

知道了什么是好的动效设计，那么就引申出下一个问题，我们怎么进行动效设计？或者说，动效设计该如何入手，尤其是初学者？

很简单，就两步：

先要有一个构思，想法；

根据想法进行丰满实现。

没有想法？想法怎么来？怎么构思？从我自身总结，可以从这6个方面进行构思：

动效灵感来源

1. 结合产品去设计

要结合产品进行思考，思路设计要符合提升的产品体验，要经过细致思考不要盲目。

2. 了解基本常识

这些常识包含，动效设计的基本常识（如：基本的运动规律，节奏，动画如何），开发的基本常识，什么样子的动效果大概如何实现，实现成本大概是多少。确保能够顺利落地。

3. 观察生活

人们对于美的认知，大部分来自于日常的生活经历。比如什么样的运动是温柔地，激烈的，具有震撼性的。

当我们对于我们需要构思的动效有性质定位的时候，可以从生活中这些相同的，定性的自然事物中寻找灵感，截取精华。

4. 看并思考

就是除了观察生活，我们还需要多看一些优秀的动效设计，时刻作为积累。同时，也需要对于「看」的事物进行细致思考。要思考他为什么这么设计，怎么完成这套动画设计的（是通过那些技巧构成这个动效设计的，整体节奏是怎样的一种感觉）。

时刻与自己对类似事物的想法进行对比，找差距，补不足。这就是经验技巧积累的过程。

5. 学会拆解

web、app中大部分的动效设计，都是通过基本的变化组合而成的。我们要通过多看多观察，慢慢学会怎么去拆解别人复杂的动效设计，从中总结经验。而后，通过合理的编排设计出自己的动效设计，你就是这场动效设计的导演。

6. 关注流行

这个很简单，就是大家要保持对于设计行业，或者说是web，app动效设计领域的关注。

了解当下新的设计手法，设计趋势以及设计方式。不要做一个落伍者，也不要把自己永远定义为一个跟随者。

前面我们说大部分我们在web&app中看到的动效设计，都是由一些基本的变化组合而成的，那这些基础变化是什么呢？（见下图）

动画的基础变化

基础变化主要包含：移动，旋转，缩放以及属性变化。前面几点都很好理解，在此就不在详细解释。解释一下最后一个属性变化，它其实就是指透明度，形状，颜色等这些属性的变化。

所有的这些变化形式，经过合理的编排在配合上合适的运动节奏，就是一个完整的动效设计。

简单来说就是：你要确定你要发生什么样的运动，这个运动要以何种节奏运动。

贝塞尔曲线，就是将速度与时间的关系，用图形的形式展现出来，使其表意更直观。

变化节奏

上图就是一些常见的贝塞尔曲线，右边就是我们在AE设计过程中，运动曲线调节界面。

为什么运动需要配合合适的节奏呢？

因为自然界中运动都不是线性的匀速运动，而是按照物理规律，呈现出的曲线的变速运动。这就是之前说的基本常识，基本规律。

人们对于一个运动形式产生的情感反馈，大部分也来自于生活中看到的类似的运动形式。

所以我们要符合物理规律，这样才能准确的专递我们动效设计的情感。当然可以适当根据需要夸张，精简。规矩是死的人是活的。活学活用。

http://easings.net 这个网站上归结了基本全部运动形式的贝塞尔曲线，并且有预览。还能直接使用js代码，很方便，很直观。

说了如何构思，接下来就要想想怎么实现你的想法：

实现动效设计

如上图所示：

实现想法基本就是技术与技巧的问题，这需要学习与积累。

怎么学习积累呢？

1. 动手尝试，熟能生巧

不断尝试才能不断锻炼自己的技术技巧。只有尝试了才能真的验证你的设计。

2. 临摹作品

学习任何东西，尤其是设计这个行当。临摹都是很有效的入门办法，之前的写实图标，现在的动效设计都是如此。

临摹的过程其实就是你与优秀设计者交流的过程，从中你能仔细了解和学习他的设计思路手法，也能在临摹过程中对于原有设计手法结合自身经验进行优化升级，是很好的提升技巧的方法。

3. 注重细节

这个很简单，就和做单纯的视觉设计一样，一定要注意细节，细节决定成败，尤其是动效设计。要认真，多想，想全面。

4. 有节奏感

这个前面说过：要让你的作品有活力不死板，才能赋予产品以新的活力。

5. 先加后减

在实现过程中你一定是要不断的丰富你的原有设计想法的，当你不太明确如何丰富自己的设计，或者不太清楚使用何种技巧达到自己设想的感觉时，可以先尝试看哪些地方可以动态化，可以这样运动是否可以那样运动，制造出可能性，制造出突破。

而后，在这些可能性和突破后进行减法，去除多余保留精华。

6. 搜索引擎

有问题我建议大家尽量使用搜索引擎，善用搜索引擎基本可以解决你遇到的95%的问题。

重要的是：自己去寻找解决问题的办法，你可以记忆的更加深刻系统，你还可以掌握解决问题的办法。

三、动效有那些类别？

我们可以把现在的动效设计粗略的分为两个大类：

1. 功能性动效（如下图）

此种动效设计多适用于产品设计，也是本文中主要陈述的内容。

功能性动效（此图来自网络采集非作者原创）

2. 展示型动效果（如下图）

这些动效设计，相对来说复杂，实际应用中比较少。基本用于一些展示性的动效设计，也不能用我们哪些基本运动规律去很好的嵌套（不是不能嵌套，是太复杂），他们实现一般是通过AE插件进行实现的，插件也不是很难，有专门的插件网站，大家有兴趣可以去研究，一般插件都是英文的。

展示型动效（此图来自网络采集非作者原创）

四、用什么软件做动效设计？

动效设计所用软件

简单给大家介绍几个常用个制作软件。

制作动效，比较头疼的就是时间成本问题。这几个软件各有特点：

AE：全能选手，几乎可以制作任何你想要的效果，但是操作相对复杂时间成本较高。

Principle：操作简单，效率高。适合制作快速展示用的demo或一些简单的动效设计。

Hype3：介于AE 与 Principle之间。是近年来新兴起的动画设计软件，可以直接生成代码，配合sketch使用效率极高。

大家可以在工作中根据实际情况酌情使用。

五、动效设计如何落地？

前面讲了为什么做，什么是好的，怎么做。接下来就要说说我们如何将我们费尽心机的设计最终完美落地。

基本上就是你和开发怎么在动效设计这块，高效配合。普遍做法就是口述+例子。基本相当于我们用中文与一个日本人用日语在一起手舞足蹈的交流，只能传达大意，绝大多数是有偏差，而且成本比较大，很多时候彼此都不懂。

我们需要告别通信基本靠吼，如何才能让开发爱上动效设计呢？

自己简单总结了一下几个要点：

动效落地

1. 专业的设计产出

若要让开发信服你，首先我们自己在我们本职的事情上要做到专业。

希望有一个靠谱的开发，首先自己要成为一名靠谱的设计师。

比如我们希望开发精确到像素级别，那我们提供的产出起码要先精确到像素级别，同理心，专业性。

2. 良好的前期沟通

在设计之初一定要多和开发沟通，知道自己做的时间成本是否允许。目前技术条件是否有坑。就是确定你的方案基本可行，再开始开发设计。

一句话：让开发先知道你要做什么，在他眼里怎么看待这件事的实现成本，毕竟他们是最终代码产出者，避免工作白费。

3. 了解基本实现原理

自己要学习了解一些基本的实现原理，逻辑。这样你做的时候能够更有根据，知道什么好做，什么难做，什么目前此平台暂时达不到你的目的。这样可以更好地控制动效设计的节奏，和最终落地。

有时候也能帮助开发思考这个动画设计该以怎样的逻辑实现，因为你是动效的设计者，你更清楚这个动效里面有哪些变化，哪些步骤。

4. 具象的阐述动效设计

就是让开发形象的知道你要做的什么，这个时候就需要适当的将你的动效设计——数据化。

（必要时输出动效说明文档）

那么问题来了，是所有动设计都是可以数据化的描述的吗？

准确的讲：我们平常web&APP设计中大部分是可以描述的。

还有一些不可描述的动效设计，他们的基本是用在品牌展示（比如logo的变化等），或者一些小的惊喜点，比如JD的app中loadinggif，是正在送货的小人。这类的动效设计我归结为展示型动效设计。

展示型动效设计：

展示型动效（此图来自网络采集非作者原创）

因为他们基本不存在复杂的交互，尤其在动效原件本身上，基本是满足一定条件触发播放，满足一定条件触发停止的逻辑。

他们基本实现方式就是输出PNG序列，或者视频或者GIF文件形式，所以也就不存在输出说明文档的问题了。

输出视频就要涉及到压缩体积，下面给大家说一说怎么压缩这类文件的体积：

AE文件压缩

AE压缩设置

如果你用AE做，在渲染输出时，如图设置。基本可以将一半的动效设计控制在几百KB以内，将复杂动效控制在几M之内。

如果还是过大，怎么办? 就需要压缩软件：

视频压缩软件

HandBrake是一款强大的视频压缩软件，可以将几十（MB）的视频文件在画面几乎无损的情况下压缩至几十（KB）大小。是不是很感人？

更感人的是它还免费，有需要的同学可以下载下来研究一下。

功能型动效设计：

功能型动效（此图来自网络采集非作者原创）

类似上面这种动效设计我叫他们功能型动效设计，这是我们平常工作中可能使用最多的一种动效设计。

这些动效设计就需要涉及到我们前面讲的动效设计数据化，输出效果设计文档——因为他们运动本身会涉及到页面中各种交互元件，以及交互操作。

不能单单输出一个视频，需要开发使用程序控制个原件的运动实现动效设计。但是如果只对开发说我要这样一个动效设计，开发是很难理解你到底要干什么，要做到什么程度？往往还原度很低，会被开发鄙视。

为了使我们的动效也能精确到像素，这个时候我们就需要进行动效数据化就是根据实际情况适当的书写《动效设计文档》。

这里说的，根据实际情况适当的书写《动效设计文档》。为什么要加根据实际情况和适时呢？这就是时间成本问题。

我们书写这个的目的就是想要通过精确的用数字和文字传递一种具象的动效设计——所以动效说明文档，只是一种可以向开发传递具象动效设计的方法；这个方案最终落地的形式，不需要一定是一份文档，可以根据实际情况活学活用。

如何书写动效设计文档？

怎么书写动效说明文档呢？或者说我们怎么向开发具象的陈述我们的动效设计呢？

我做了一张表，简单描述了一下动效说明文档的输出的基本流程（见下图）

书写动效说明文档流程图

举个例子：

以下示例为之前在某滴专车事业部所做实际项目。

转场动效

动效基本参数：

动画尺寸: 750*1334(px)

帧速率: 25f/s(帧/秒)

动画时长: 1.0s(秒)

动效详细说明：

（1）0f – 6f 接机顶部栏从屏幕上边缘移入其对应位置；Y轴位移: 128px；动画速率: 先快后慢。

速度曲线（截图中时间帧不做参考）

（2）3f – 8f 背景色#edeff0，做渐显动画；透明度: 0%-100%；动画速率: 匀速运动。

（3）0f – 6f 表单下方「叫车按钮」背景图渐显出现；透明度：0%-100%；动画速率: 匀速运动。

（4）2f – 8f 表单下方「叫车按钮」整体做从下至上位移和渐显动画；Y轴位移：20px；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线（截图中时间帧不做参考）

（5）15f – 23f 接机表单卡片从距离屏幕上边缘268px的位置向上；移动，至距离屏幕上边缘148px的位置（设计图中最终位置）；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线（截图中时间帧不做参考）

（6）17f – 25f 车型选择卡片从距离屏幕上边缘852px的位置向上；移动，至距离屏幕上边缘732px的位置（设计图中最终位置）；透明度：0%-100%；动画速率: 先做短暂加速运动，后做减速运动。

速度曲线（截图中时间帧不做参考）

我们输出动效说明文档的原因是：传递更清晰具象，效果更可控，降低沟通成本，提高配合默契度，保证设计还原度。

六、写在最后

说了这么多其实就是想尽量的告诉大家，我认为的要怎么把设计做好。我并不觉得，现在我们需要做动效设计了，就该将原来的界面设计师，在分出一个动效设计师职位。

真正的独立的动效设计师需要做的，绝对不仅仅是我们产品设计中需要的这点东西——因为我觉得这都是界面设计师应该输出体验的一部分，只不过就现在而言我们又多了一种表现形式可以使用。

设计师应该为最终输出的体验负责，就是正在被用户使用的产品的体验，而不是为几张漂亮的设计稿。

讲了这么多动效设计，动效设计难吗？之前有个人和我说过一句话，我觉得挺有道理。

要对设计或者你做的产品，充满爱。要带着爱去做设计。这样你输出的设计才会让用户感受到情感。

缓存，在互联网产品中可以简单理解为：

第一次请求数据放到存储器中，下次显示该页面先把上次保存的数据显示出来，同时去请求数据，请求完成刷新显示新数据，并将其再缓存起来。

当今互联网应用（网站或App）的整体实现流程是：

用户的请求从界面（浏览器或App界面）到网络传送、应用服务再到存储（数据库或文件系统），然后返回到界面呈现内容。

随着内容信息越来越复杂，用户数和访问量越来越大，我们的应用需要支撑更多的并发量，同时应用服务器和数据库服务器所做的计算也越来越多。

但是往往我们的应用服务器资源是有限的，数据库每秒能接受的请求次数也是有限的（文件的读写也是有限的）。

如何能够有效利用有限的资源来提供尽可能大的吞吐量？

一个有效的办法就是引入缓存，每个环节中请求可以从缓存中直接获取目标数据并返回，从而减少计算量，有效提升响应速度，让有限的资源服务更多的用户。

一、计算机缓存

计算机的缓存往往使用的是RAM（断电就掉的非永久储存），所以在用完后还是会把文件送到硬盘等存储器里永久存储。

计算机里最大的缓存是内存条，最快的是CPU上镶嵌的L1和L2缓存，显卡的显存是给显卡运算芯片用的缓存，硬盘上也有16M或者32M的缓存。

其工作原理是：

当CPU要读取数据时，首先从CPU缓存中查找，找到就立即读取并送给CPU处理；如果没有找到，就从速率相对较慢的内存中读取并送给CPU处理，同时把这个数据所在的数据区块调入缓存中，可以使以后对整块数据的读取都从缓存中进行，不必再调用内存。

这样的读取机制CPU读取缓存的命中率非常高，也就是说CPU下一次要读取的数据90%都在CPU缓存中，只有大约10%需要从内存读取。

这大大节省了CPU直接读取内存的时间，也使CPU读取数据时基本无需等待。

二、WEB浏览器缓存

下面我们进入正题。

浏览器会缓存它浏览过的「资源」（包括网页，图片等），如果资源在保质期内，那下次同样的请求直接用缓存。

过期之后，会带上资源上次的修改时间，由服务器来判断是否失效，失效的话就会给浏览器返回新的数据并继续缓存下来。

浏览器的缓存，存在用户电脑的硬盘上，用户每次使用浏览器读取缓存时先将硬盘上的缓存数据加载到内存中，再读取给浏览器。

浏览器端缓存的规则主要在HTTP协议头和HTML的meta标签中定义。他们分别从新鲜度和校验值两个维度来规定浏览器是直接使用缓存中的数据，还是需要去源服务器获取更新的版本。

新鲜度（过期机制）：

缓存数据保质期。缓存数据必须满足以下条件，浏览器会认为它是有效的，足够新的：

含有完整的过期时间控制头信息（HTTP协议报文头），并且仍在有效期内

浏览器已经使用过这个缓存数据，并且在上一次会话中（也就是用户上一次访问该数据时）已经检查过其新鲜度

满足以上两个情况的一种，浏览器会直接从缓存中获取缓存数据并渲染给浏览器。

校验值（验证机制）：

服务器返回数据的时候有时在头信息中带上这个资源的实体标签，它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明数据已经被修改或过期，浏览器需要重新获取数据内容。

三、HTTP缓存机制

当用户通过浏览器发起一个数据请求的时候，浏览器会通过以下几步来获取数据：

本地缓存阶段：先在本地查找该数据，如果有发现该数据，而且该数据还没有过期，就使用此数据，不会发送http请求到服务器

协商缓存阶段：如果在本地缓存找到对应的数据，但是不知道该数据是否过期，则发一个HTTP请求到服务器，然后服务器判断这个请求，如果请求的数据在服务器上没有改动过或过期，则返回304状态码（可以理解为服务器给浏览器的暗号），让浏览器在本地找到该数据

缓存失败阶段：当服务器发现请求的资源已经修改过，或者这是一个新的请求，服务器则返回该数据，并且返回200状态码，此过程的前提是指找到该数据，如果服务器上没有数据，则返回404（这个大家多见过吧，就是平时见到404页面时的状态码）

浏览器中的操作对缓存的影响：

强制刷新：当按下ctrl+F5来刷新页面的时候，浏览器将绕过各种缓存(本地缓存和协商缓存)，直接让服务器返回最新数据

普通刷新：当按下F5或者点击刷新按钮来刷新页面的时候，浏览器将绕过本地缓存发送请求给服务器，此时协商缓存是有效的

回车或跳转：当在地址栏上输入回车或者按下跳转按钮的时候，所有缓存都生效

浏览器缓存机制

四、安卓、iOS缓存机制

APP上的缓存机制和浏览器缓存的原理类似，APP与服务器交互的协议同样是大多基于HTTP（S）。

先普及下基础知识：

手机内存包括运行内存和内部存储。

运行内存是用来运行程序的，不能用来永久存储数据，手机一旦关机或杀死进程，在内存中的所有数据都将会丢失。

内部存储相当于计算机中的硬盘的角色，用于存储操作系统和应用程序的存储介质。

iOS的本地缓存数据存在磁盘存储（内部存储）中，由于Android手机通常将内部存储器固定在芯上，所以一般无法更换内部存储器的。

为了增强Android手机的存储能力，很多Android手机都支持扩展的SD卡（相当于计算机的U盘或者移动硬盘）功能。所以，Android手机存储缓存是可以选择数据存储位置的。

APP端存储数据的时候，会存储很多字段内容，一般情况下后台会给每条数据设定一个独立的id值，那么前端在请求数据的可以先查询本地缓存的数据中，最新的一条数据的id值，通过网络请求，把这个id值发给服务端，服务端会根据这个id在后台服务器中查询是否有比这个id值更大（更新）的数据存在，如果有就把新的数据返回给前端APP。

五、数据库缓存

数据库的缓存机制分为两个层面。

1. 由数据库提供，可以对数据表建立的高速缓存。

数据库的数据临时保存在一个位置上，再次同样的请求直接把这个数据返回去，而不需要再次去查询各种表取数据了，减少了查数据库的时间，提升效率。

并不是所有的历史记录都缓存起来，要有策略，比如只缓存两个月的数据，并且两个月之前有请求过之后不再请求该数据的时候就会回收，就是把这条记录抹掉，就近多次请求的才会保存。

时间过长、使用率不高的优先清除，要不然缓存太多就失去了缓存的本质和意义。

2. 在数据库中，数据都是存放在磁盘中的。

虽然数据库层做了对应的缓存，但这种数据库层次的缓存一般针对的是查询内容，一般只有表中数据没有变更的时候，数据库对应的缓存才发挥了作用。

有时并不能减少业务系统对数据库产生的增、删、查、改产生的庞大压力。此时，一般的做法是在数据库与业务服务器之间增加一个缓存服务器，比如我们熟悉的redis。

客户端第一次请求的数据从数据库拿出后就放到了redis中，数据不过期或不更改的前提下，下一次的请求都从redis中直接拿数据，这样做极大的缓解了数据库的压力。

服务器缓存六、业务服务器缓存

业务服务器缓存是将动态页面直接生成静态的页面放在服务器上的硬盘里，用户调取相同页面时，静态页面将直接下载到客户端，不再需要通过程序的运行和数据库的访问，大大节约了服务器的负载。

每次访问页面时，会检测相应的缓存页面是否存在，若不存在，则连接数据库得到数据渲染页面并生成缓存页面文件，这样下次访问的页面文件就能发挥作用了。

举一个小例子：

用户A访问a页面，服务器解析a页面返回给用户A，同时在服务器内存上做一个映射，把a页面缓存在服务器的硬盘上。用户B访问a页面，服务器直接根据内存上的映射找到相应的页面缓存，直接返回给用户B。

这样做减少了服务器对同以页面的重复解析。

七、代理服务器缓存

代理服务器是客户端和业务服务器之间的中间服务器，客户端先向这个中间服务器发起请求，经过处理后，再将请求转发到业务服务器。代理服务器缓存的运作原理跟浏览器的运作原理差不多，只是规模更大。

可以把它理解为一个共享缓存，不只为一个用户服务，一般为大量用户提供服务，因此在减少相应时间和带宽使用方面很有效，同一个缓存数据会被重复使用多次。

以上，就是关于缓存机制的简单总结。

产品汪们，再涉及项目中的缓存机制时，就不怕被程序猿们怼了！

大多数App都要与服务器进行数据的交换，用户向服务器发出数据请求，服务器接收到请求之后向用户展示上传或下载相应的数据。

由于网络原因，需要花费一定时间，才能完成这样的交互。在等待的过程中，往往让用户产生了不同程度的焦虑感。我整理了一些案例来分析一下互联网产品都是通过怎样的方式来消除用户的焦虑感。

一、异步处理（Asynchronous Processing）

什么是异步处理？

我们举个例子：

在网络不好的情况下，你在微信朋友圈给好友点了赞，微信并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为。

这就是异步处理——让产品自己去解决问题，而不是把问题抛给用户。

再比如发布朋友圈时，你不用等所有文字和照片都上传完毕，才显示朋友圈，当你点击发送后，App上显示出你已发出的朋友圈，然而微信其实在后台仍然在上传数据，仔细看上图在发布完朋友圈之后，会有一次内容的闪屏，那个时候才是将数据正式发布并展示给好友。

这样的异步处理很好的减少了用户的等待时间消除了用户的焦虑感。

二、预加载（Skeleton Screen）

可能大家对于Skeleton Screen并不熟悉。它是一种将未加载出来的内容区域，用灰色的色块填充的方式。所以整个页面在加载过程中会给用户很连贯的感觉。

国外的Facebook，国内的支付宝、微博、豆瓣都采用了这种加载形式。

这种形式一般用于内容框架固定的页面，如果页面可能会出现空数据的情况也不宜使用。支付宝的首页，页面结构固定，且内容不会为空（除非网络异常导致加载失败），就很适合用Skeleton Screen的加载形式。

三、加载1. loading动画

加载动画自不必多说，所有的产品都会采用这样的方式来度过让用户较长的等待加载时间，从一开始比较简单的进度条、菊花转，延伸到现在结合自己品牌形象所制作的各种无限循环动画效果。

更有甚者，现在出现了一些以有趣，创意为主的加载动画。

2. 标题加载

一些将数据存储在本地的App一般不会出现白屏加载的情况，所以会采用标题加载的形式，这种情况多在即时聊天工具中，比如微信、陌陌、钉钉等。

这个时候加载无需获取用户的视觉焦点，只要告知用户页面正在请求新数据，所以选择在标题栏展示App正在加载是个不错的选择，加载成功则标题栏loading消失，若因为网络错误未连接服务器，则在标题栏显示未连接状态。

3. 分段式加载

当新页面的内容有好几百条甚至更多时，如果一次性加载所有内容，会增加设备的负担，而且加载内容过大，加载时间会过长，同时APP自身也可以因为运算成本太高而崩溃。

为了解决这个问题，产生了一种叫分段加载的形式。即：先加载最新的几十条数据，当用户继续向上滑动想浏览更多时，再加载几十条。

分段加载要在PRD或者交互设计文档里明确注明，一次性加载多少条内容，如果内容以图片为主，建议加载20到30条左右，如果内容以文本为主，建议40到60条左右，这是本人的设计习惯，大家可以借鉴。

我无聊的数了数今日头条每次分段加载会加载60条新闻。

四、分步导航（Substep Navigation）

当用户在填写一些冗长的资料时，总是会有这样的疑问：

“我进行到哪一步了？”

“怎么还没结束，还有多少要填写？”

而分步导航就很好的解决了这一问题。

设计良好的分步导航清晰地指明了完成任务的路径。研究表明，它给用户以明确的概念，完成最终目标需要多少步，能够显著降低放弃的概率。

从心理学角度来看，这颇具意义。如果你知道完成这个过程需要多少步，你就更容易完成它。

当然，创建优秀的分布导航并不是一件容易的事情，以后有机会我会详细的展开描述，这里就不多加赘述了，最主要的是“调查用户期望，并建立起合理的流程”。

五、异常界面与Toast

先前说过，App都是需要和服务器做出数据请求的，所以我们无法保证不出现异常情况。因此在出现异常情况时，所展示给用户的异常页面也就显得尤为重要，这是降低用户焦虑最主要和直接的手段。

页面异常主要的类型有一下几种情况：

当发生异常情况时，什么样的页面能够帮助用户降低焦虑感呢？

1. 明确告知用户异常的类型

让用户明确知道是什么情况导致异常的发生。

如微信在断开网络之后会明确告知用户“网络连接不可用”那么用户会去检查自己的WIFI或者数据连接情况。

而右边的界面则是告知了用户发生了一些错误，然而用户仍然不知道该怎样去解决问题。

2. 给予用户解决方案

当用户发生错误时，情绪是比较挫败和焦虑的。

在优秀的异常页面上，我们可以看到其异常不仅有提示，并且给予TOAST显示当前的错误原因，可以检查的设置。

方便用户去恢复当前出现的错误，在断网情况下不仅仅需要给予用户当前网络提示，还需要给予用户一个操作入口，能够给予去修复当前状态的行为操作。

六、总结

不要为了极端情况而让用户花费时间在等待上。

在暂时无法展示用户想要的内容时，不要直接展示空白页，可以用Skeleton Screen的预加载方式或者有趣的加载动画来进行过度。

对于冗长的信息内容应该进行归类分步导航。

发生异常，应该及时给予用户解决方案，而不是让用户不知所措。