超全面!交互/视觉都需要掌握的App加载动画知识体系 - 优设网 - UISDC

超全面!交互/视觉都需要掌握的App加载动画知识体系

2016/12/31 21558评论区

app-loading-motion-design-1

今天我要分享的是关于加载动画的知识体系及简单的制作方法,至于特殊场景总结不全之处,还请批判指正。

大纲如下:

一、加载动画存在的意义

二、加载动画的使用场景

三、前段开发实现动画的方法

四、工作中输出加载动画的方法与步骤

五、制作加载动画时的注意事项

六、加载动画的流行趋势

一、加载动画存在的意义

众所周知,app服务器在加载数据的时候需要用户等待一段时间,为了缓解用户等待过程中的焦虑情绪,设计者可以采用加载动画的方式来缓解用户的等待时间,使整个等待过程变得更加友好、流畅。

一个好的加载动画分为两个层次,第一个层次是满足用户的基本心理预期,缓解等待的焦虑;第二个层次是要给出用户一定的惊喜,甚至让用户对加载动画抱有期待、好奇的心理。

这里我们暂时先只讨论第一个层次的内容,因为这已经能够满足大多数app的需求了,至于如何做出让用户惊喜的加载动画(如饿了么、京东的加载动画),我们可以另外讨论。

二、加载动画的使用场景

查阅大量关于加载的资料后,发现很多教程与文章都是从样式的维度来分类的,今天我们换个维度,从使用场景出发,来打造属于我们自己的加载动画设计体系。

加载动画的常见使用场景一共分为以下5种:

1.下拉刷新加载

2.切换新页面数据加载

3. 页面上拉加载

4. 页面局部加载

5. 启动页加载

我们还是一个一个来了解:

1. 下拉刷新加载

下拉刷新可以让用户在看到本地数据的同时去重新加载数据,以确保用户可以看到最新的内容。

下拉加载一般分为两种形式:动画加文字(如今日头条下拉加载样式)、纯动画(如网易邮箱)。

如下图:

uisdc-vision-20161230-0

2. 切换新页面数据加载

当切换到新页面时,常常会有加载数据的时候,这也是加载动画使用最多的场景,市面上的加载样式也是多种多样,如:白屏加载、toast加载、进度条加载、导航栏加载等等。

uisdc-vision-20161230-1

uisdc-vision-20161230-2

3. 页面上拉加载

当一个页面数据量过大时,服务器不会一次性将内容全部加载,而是加载一部分,只有当用户向上拉动页面时,才会加载更多,如下图:

uisdc-vision-20161230-3

上拉加载的样式不会过于复杂,一般采用比较简单的转圈动画来实现。

4. 页面局部加载

常见的局部加载场景有视频列表、加载图片的占位图等,如下图:

uisdc-vision-20161230-4

5. 启动页加载

为了缓解用户启动app时的等待时间,有些app会将启动页设计成一个加载动画,如京东、百度贴吧等,不仅使等待时间变得有趣,并且增加了品牌记忆,达到了一箭双雕的效果。

uisdc-vision-20161230-5

三、前端开发实现动画的方法

1. 调取系统自带样式

系统自带样式比较简单,iOS系统的样式是一个菊花,安卓系统的是一个转圈的圆线。

2. 设计师直接提供gif动图

这种提供gif的方法,一般适用于比较大场景的加载动画,如启动页。

需要注意的是原生系统是不支持gif控件的,iOS需要调取网页的gif,而安卓需要调取播放器才能实现动动画的展现,所以如果不是特殊场景,一般不推荐使用gif控件来实现动画。

3. 前端自己将动画用代码写出来

最常用的一种方式就是让前端哥哥自己将动画写出来,当然这时候你还是要做出一个示范动画, 并告知动画的规则是怎样的(下文会详细说明)。

四、工作中输出加载动画的方法与步骤

讲了这么多内容其实只是让大家对整个加载动画的全局有个认知,在执行过程中有理有据,避免无从下手的情况出现。换句话说,在了解以上内容后,至少我们知道了某种场景下该做什么,至于怎么做,我用一个下拉刷新的动画实例来具体讲解一下输出加载动画的过程。

1. 确定使用场景与实现方法

使用场景:下拉刷新

实现方式:前端代码实现

2. 设计师制作下拉刷新动画,并透彻理解动画机制

动画如下图(参考QQ邮箱下拉加载):

uisdc-vision-20161230-6

制作过程中,我们可以优先考虑加入品牌元素在动画中,如品牌logo、品牌颜色、品牌名称,这些都可以融入到加载动画当中。

3. 输出加载动画的规范(如下图):

uisdc-vision-20161230-7

首先你需要将动画本身的规则写出来,如我们目前制作的这三个小球,一个循环内平均有6个关键节点,每个节点需要0.3秒,也就是循环一次需要1.8秒,我们将其动作全部分解输出给开发,并将圆球的大小、颜色等信息注明,这样开发看到规则后就会一目了然,保证动画的还原度。

然而这仅仅只是做了动画本身的规则,我们还需要考虑动画与页面间的关系,例如下图是一个下拉松开手指后,页面正在加载的状态,我们不仅要考虑正在加载的状态,还要考虑其下拉过程中可能会发生的情况。

uisdc-vision-20161230-8

总的来说,我们需要标明动画加载时,动画与导航栏的间距,与内容区的间距,且下拉过程中哪个间距是可变的、哪个间距是不可变的等等,甚至还需要考虑可拉动的最大距离是多少,当然拉动时的弹性是系统自带的,一般不予考虑。

只有将这些内容全部考虑清楚并输出规范,才算是一个合格的下拉加载动画。

这里我举的例子是动画中没有文案的情况,当有文案时,考虑的内容会更多,如:一个下拉过程可能会有“下拉加载”、释放加载、正在加载这三个状态,而当加载完成后,还需有反馈状态告诉用户有多少条新的信息,如新闻类的下拉刷新。如下图:

uisdc-vision-20161230-9

大家有兴趣可以自行了解一下,这里就不予过多解释了。

五、制作加载动画时的注意事项

1. 不论你的动画有多好看、多吸引眼球,如果成本太高或者过于复杂都是无法落地的,所以我们要遵循简单实用的原则来进行设计,不要过度设计。

2. 其实在开发哥哥那里,他们的时间计算单位是毫秒(1秒等于1000毫秒),也没有动画里“帧”的概念,所以如果你能用代码的语言(毫秒)与开发哥哥沟通,他会更喜欢你的,万一是个开发妹妹,你懂的!

3. 这一条我相信不只是在做加载动画时需要考虑的,所有的交互视觉场景,都需要考虑这条原则:任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说,我们需要考虑加载成功的反馈与加载失败的反馈,并将之注明在输出规范中(虽然有些场景的加载的确没有反馈状态,但是在考虑全局时,这些都是我们前期必须思考的内容)。

六、加载动画的流行趋势

对于加载动画的流行趋势,不论是交互还是视觉,国外很多主流app都是非常简洁并且无文字提示的,下面是部分截图:

uisdc-vision-20161230-10

uisdc-vision-20161230-11

所以我大胆预测了一下,以后app的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

以上就是目前阶段我对于加载动画的一些总结与分析,希望能对于你有一点启发作用,如果你有不同的见解,欢迎与我一起交流,大家共同进步。

欢迎关注作者的微信公众号:菜心设计铺

cxsjpqr

「加载动画的好文合集」

  1. 先判断该不该做丨《DO OR DO NOT?如何从3个方面判断是否做交互动画》
  2. 再看6个常见模式的总结丨《详析6种常见的LOADING设计模式》
  3. 最后看优秀案例丨《整点新鲜的!学学这些爱不释手的加载动效设计》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/app-loading-motion-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设专访 职场 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里