关于设计，关于loading动效

申明:这篇经验为我在看了来自知乎、简书、站酷、优设等平台上很多大神的文章总结而出。很多词汇并非原创，再次向原作者表示感谢。

文章主要分为以下几个部分：

What？   什么是loading动画？

Why？    设计loading动画的意义有什么?

How?     怎样设计一个富有情感化的loading动画？

大家可着重选择选择阅读哈~

一、什么是loading动画？

"loading"翻译：n.装货;装载量;（保险金的）附加费;填充物 / v.把…装上车[船]( load的现在分词 );装… ，“loading动画”里一般翻译为“加载”即加载动画，或者翻译为进度条动画。

大家知道，用户使用产品上传数据到服务器，和服务器回传数据时是需要一些时间的。此时，就是使用户处于一种空状态，为了减少此时用户的焦虑状态，便会引用“loading动画”的设计，使进度可视化，给用户一个期待值，当然现在load-ing动画的作用远不如此。

二、设计loading动画的意义有什么？

从上段文字，我们知道loading动画会使数据传输进度可视化，减少用户的焦虑，这是loading动画存在的最重要的意义，然而，现在赋予loading动画的意义还有很多，包括：

1、把loading设计的可爱，生动有趣，让用户不仅没有焦虑感，还会让用户爱上这样的设计，而使用户对整体体验好感提升。

2、loading动画形象设计贴切并符合产品气质，能提高用户整体操作的流畅度。

3、好设计总是体现在设计中，细小的loading动画，总会给用户惊喜，从而达到情感话设计的最大化。

总之，最大的意义就是让用户使用产品时没有卡顿感，并给予意想不到的操作体验。

三、怎样设计一个富有情感化的loading动画。

设计一个富有情感化的loading动画前，第一件重要的事是要明白loading的使用场景，满足的目标是什么。通常情况下loading的使用场景一般有：

1、进度条loading;

2、标题栏消息载入loading;

3、白屏loading;

4、浮层loading;

5、刷新loading;

然后，根据具体的应用情况，设计一种符合产品风格的loading, 设计往往从想法开始，然后找相关素材（可以从生活中往往寻找设计的点，设计师新村则人总结的经验），然后草稿，然后绘制，调试。

设计一个loading的方法有很多，不仅可以用常用的PS，AI,AE等工具，一些3D软件也是一个不错的工具，而且能力足够的话，用代码写也是可行的。工具只是用来服务你的想法，所以设计之前一定要先有个不错的想法，然后尝试的施行。

好了我的分享就到这里，希望能帮助到你，喜欢的话就大大的点个赞吧~

PS:打开以下链接，可以更详细了解关于loading动画的设计分享噢~

http://www.uisdc.com/app-loading-motion-design     《超全面！交互/视觉都需要掌握的APP加载动画知识体系 》 

http://www.uehtml.com/post/36201/     《什么样的loading动画，我会等！》

http://www.jianshu.com/p/98be9ae50296    《loading设计的常见形式》

http://www.jianshu.com/p/493514b0017b     《Loading的设计》