Loading作为一个常见,并且带有排他性的动画,已经被各路大神表现的淋漓尽至。那么如何在众优秀作品下,做出一个性化的Loading动画?
Loading种类:
1.状态类(进度条)
状态型的Loading以进度条累为基准,可以为用户提供预期时间,多伴随百分比进度出现。(通常数据量很大,客户端已知加载量,并能根据当前加载速度计算出何时加载完成)状态型的Loading以进度条类为基准,可以为用户提供预期时间,多伴随百分比进度出现。进度条的形式以线性的形式出现,已知总量,降低用户对期待时间的感受。无聊的等待会让人厌烦,作为一个UI设计师需要关注每一个细节,尤其是用户的情绪并将引导到加载后的页面。
2.无状态类(菊花)
无状态类的Loaing以菊花为代表,通常都是一组可以无限循环播放的动画。(通常数据量比较小,客户端无法预知加载量。)
无状态类的Loaing如有需要可以做的特别一些:https://dribbble.com/search?q=loading
我们的App需要一个无状态的Loading。
我始终相信设计的直觉很重要,抓住直觉的爆发点,是一个成熟设计师必备的素质。于是先按照最初的想法快速做了一版。
相信很多人对这个Loaing眼熟,当然,这肯定不是我们要的效果,不过在制作这Loading的时候不断的推翻自己的想法,时而清醒时而模糊,感觉突然找到了方向但瞬间也可能烟消云散。这种不断反复的过程中还是收获了很多。
既然是无限,循环,表现上就不能过于缺乏趣味,这个度很难把握。形式感上面设计要简单,又要通过最直接的方法创造空间感,偶然间发现马戏团的抛球表演。突然间有了灵感,于是就沿着这个思路开始动手设计:
我尝试用二维去表现三维,但是效果并不是很好,但是从Demo中可以看出,值得很入研究。
为此我们搜索了一下现实中的扔球效果:
经过分析我们得出了第一条小球的运动路经是一个无限的符号。
有了草图开始通过规范的制图来推算出最精确的运动轨迹,这一点在动画效果和以后的代码实现上非常重要。
工作路经确定后,导入C4D中进行单球运动轨迹测
由于实例中,小球会受到重力以及加速度的影响,并非匀速运动,但在实际Loading制作过程中,为了视觉效果,我们希望小球做匀速运动
发现问题:小球在中心焦点位置出现明显卡顿
起初我们认为是速度曲线没有调整好所导致的,但我们尝试几版后发现并不是这样,最后我们发现导致这个问题的原因是路经节点问题。
调整节点
通过调整节点后,不难发现,中心焦点处的卡顿明显不见了
为了加强透视效果,我们将球的大小和颜色进行了关键帧处理,这已处理增加的景深对视觉的冲击,使得空间感更强了。
看起来怪怪的。。。。。
为了使整个运动规律更加精准,我们发现运动的起点距离是关键,不懈的追求完美的情况下,总是会有顿悟的时刻,幸运的是找到了问题的所在
三个球匀速运动的情况下,应该保证每相邻两个球之间路经上的距离是相同的。
以上
致谢:王爻 、杨硕 、王谦
我们正在招聘有想法的UI设计师,简历请投hr@raventech.com