四时宝库

程序员的知识宝库

loading动画如何做到情感化设计(情感动画制作)

关于设计,关于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软件也是一个不错的工具,而且能力足够的话,用代码写也是可行的。工具只是用来服务你的想法,所以设计之前一定要先有个不错的想法,然后尝试的施行。

刘霞平

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接