加载动效项目全解析【百科全说】

成长期产品如何用最小成本做加载动效统一？4步教你用最小成本达到目标，分别是了解加载动效的价值、成长期产品的加载开展、确定场景及类型、进行竟品分析总结

加载动效的价值

著名的Seo公司Kissmetrics，得出一个报表结论：网页反应延迟一秒钟会导致访问量下降7%，这也就意味着一家每天可赚10万的电子商务网站，每延迟一秒，一年将会损失255万！要知道，阿里巴巴每天收入就达到了6亿多！

在web时代，用户能够忍受加载的最长时间是：8秒。8秒是一个临界值，如果加载时间超过8秒，大部分访问者最终会选择放弃。到了移动端这个体验至上的时代，用户就变得更加“不耐烦”了。这时候，一个能安抚用户情绪的加载动效，意义不言而喻。

成长期产品的加载开展

如果探索期产品，有的设计师可以对加载内容进行清晰定义，但对于成长期的产品，不足的设计师对加载场景大部分都是没有定义清楚的。这时单凭“不好看”、“想要统一样式”这样武断的想法太过浅层，难以在团队内进行推动。

面对这样的境况，设计师需要明确在适合的时机、具备明确的价值与完整的方案，才可以推动团队执行。这里着重说下，我在公司进行推动的方案及遇到的一些问题。

总体分为4个步骤：先定出大方向，再倒推去拆解大方向，定出小目标和时间节点，流程如下：

确定场景及类型

产品在成长期中，是已经存在各种不同的用户场景了，不同的用户场景下使用的加载动效可能会不同。这好比猫眼使用的智能卡片，当距离电影开始前15分钟会推送提醒卡片，当定位到用户到达电影院时，会推送取票的卡片。

因此，在这个阶段，率先要确认的就是存在当前产品下各个使用场景，做好收集统计，再考虑对应场景下适合使用什么加载样式。而确定场景及类型的方法，可以按以下3个步骤进行（不同平台要分开收集，再考虑是否可以用统一样式）：

1. 把所有出现了加载的页面进行了收集统计；
2. 梳理和归纳所有加载场景，分析场景，总结出总共需要多少个类型的加载状态（这里的关键思维：加载样式是否合适当前的场景？同一场景下的多个样式是否能合并？为什么能合并？为什么不能合并？等）；
3. 将梳理出的场景和类型与产品等其他同事讨论确认，是否有错漏。

进行竟品分析总结

此处的竟品调研并非为了找视觉上的参考，而是旨在通过多个竟品和类竟品的调研，来确定当前市场上各类应用在使用加载动效的场景和加载方式的。这个加载场景和方法的归纳为后续自身做加载方案给出了明确的方向。

1. 梳理场景，选对方法

要做调研，率先的就要选取一定数量的调研对象，调研对象越多得出的结果越趋向真实，这跟问卷调查是一个道理。这时你也许会疑问，这么多竟品要如何做收集分析呢？

调研的竟品，要分竟品和类竟品两类。竟品当然是跟自己产品类型相近的App，而类竟品是市面上做得出彩的app，分别对他们的加载样式做各种录屏和截图。比如，这次调研中，总共调研了126个竟品和类竟品，保存了136个录屏和130个关键截图。

这时，我们不难发现加载动效的2个重点是：

a. 加载场景；
b. 加载方法。

a. 加载场景

经过多个调研对象的总结，常见的加载场景一般分为以下6种：下拉刷新、上拉刷新、切换新页面的数据加载、页面局部模块的加载、启动页加载、按钮加载。因业务不同，不排除有产品有特殊场景。所以总结出较通用的场景即可，便于多项目并行复用。

这里使用我工作中使用的案例说明，作为思路开拓，大家可以举一反三。

b. 加载方法

当梳理完后，接下来我们针对不同的加载场景采取对应的解决方法（即加载方法）即可。加载方法的选取要根据通过不同的场景搭配不同的加载样式，才能更好的做到缓解用户的等待焦虑。

比如：华尔街日报的分步加载。在切换页面时，由于页面内容多，为了减少用户等待时间，优先加载占网络资源较小的元素。如先文字和默认图标后图片，或是选择优先加载文字，图片加载完成前使用占位符显示，后加载图片和视屏，最终等待图片加载完成。

再比如：大众点评的tab采用的同级加载。在同一页面内加载完所有tab的内容，当同级页面间切换时就会非常的流畅。

可以看出，根据不同的场景选择合适的加载方法，不仅能最大限度的降低焦虑，也能让用户有个更好的使用体验，降低了用户的页面跳出率。这在后续的工作中用户跳出率数据反馈上从8%降低到3%，很好的证实统一加载的设计价值。

其余详细的加载场景和加载方法线上也有不少资料，这里就不做详细的罗列了，有兴趣的请阅读：

https://www.uisdc.com/5000-word-app-loading-design-summary

2. 分析加载样式

我们可以通过3个纬度去分析竟品中加载样式：a.动效形态；b. 动效动态；c. 风格颜色。它可做设计参考，但更多还是需要创新的。

a.动效形态

加载动效的形态主要分为：形象物、logo、slogan、转圈等非品牌样式。

b.加载动态

加载效果以这5种为主：形象物出现、形象物动态、转圈、logo出现、logo动态。

c.风格颜色

最后，就是加载的风格分扁平和立体，颜色分主题色和非主题色。

单场景设计-多场景验证

在有限的资源配置下，设计师需要把精力放在量入为出的价值输出上。方案实施前，先用较小成本在小渠道做AB测试验证。保证在其他变量不变，只改变设计变量的情况下，证明设计的价值。经过多次调整后，再复用到多场景、多业务中。

如何做到提升效率而降低成本？可以采用辐射思维的方法，即挑选单一场景下进行样式设计，方案得到部门同事支持后，可复用到多个不同场景下，检验它是否适用于对应下的每一个场景。

1. 单场景设计

挑选不同场景下不同样式以单场景的形式分别设计。挑选单场景的前提是，必须已经做好前文提及到的两大步骤，自身项目的加载场景已经按不同的样式分类好，在同样样式下分别挑出对应的一个场景，作为一种样式的单场景进行设计。

比如：在列表用户需要下拉更新数据的场景、用户在进入详情页的场景。这两个场景可以提取为下拉加载一个样式，详情页内子模块的加载一个样式，分别输出设计后，去跟产品确认样式是否合理。

2. 多场景复用

单场景的加载样式得到确立后，把样式的手法进行复用，代入到各个场景中去验证。

可以通过自问自答的方式进行自我走查，确保每一个场景对应的每一个样式都是合理的。比如，在tab页切换时下拉的样式是否合适？假如用了形象物做加载，他的动态在场景中是否合适？在账单数据的子模块用同样的模块加载样式是否合适？场景A和场景B为什么要用不同的样式？等等。

3. A/B测试

最后，便是进行用户场景测试了。提供最优的方案A和方案B分别对用户进行测试，收集他们对加载效果的反馈，根据反馈做最后细节的调整，最终敲下设计稿。

△ 图片来自网络

以上可以看出，用辐射思维的方式，把单一场景复用到多场景验证，是用最小成本的控制资源。快速验证出具有价值的加载方案，既能提升设计的效能，也能节省产品资源。

制作组件并总结

当验证了所有场景的样式都适用后，敲定了设计方案，最后一步就是把整套规范完整的输出，制作好组件和说明文档，交付好给开发小哥哥。建议使用sketch做成symbol，标明使用场景和类型，方便日后在多产品线并行的情况下，能直接复用组件，包括代码或样式，会大大提升设计和开发的效率。

总的来说，“规范化”意味着对团队合作的统一指标，对细节的细致追求。我们可以不被规范所约束，可以去创造新的东西，但却不能完全脱离规范思维。在创新的前提下，团队的合作需要规范的确立，才能在多人协作的项目里，防止产品设计走样。就像造房子一样，得有地基，才能在上面搭建房子。

希望这篇文章对你有所启发。

站酷

作者：高点点_ko

加载动效项目全解析