互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查。然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是网页软件信息处理急需时间等等,难免会出现需要用户等待的时候。
那么,在这些情况下,UI/UX设计师应该如何设计Web和软件,才能让用户心甘情愿的等待,而不是直接离开呢?答案很简单。美观,有趣,又实用的加载动画,不仅能够有效地减缓用户负面情绪,让用户挺留更长的时间,而且还能极大地加深用户对Web,软件或产品的印象,提升用户体验,让等待成为一种享受,而不再是枯燥乏味。
但是,作为设计师,究竟如何才能设计出美观,有趣又吸睛的加载动画呢?
以下小编为大家收集和解析了14款最新的Web和软件加载动画设计,希望能对你有所帮助:
1.Orb animation WIP
设计师:Aleksey Tsvetkov
亮点:神秘的烟雾特效
这一款设计利用了加载动画中惯用的旋转圆环,再加上烟雾特效,让整个loading动画神秘而吸睛。而且,黑白的色彩搭配,更是强化了烟雾的效果,让用户不知不觉被动画而吸引,从而忘却等待的时间。所以,用户体验也是极佳的。
因此,在你的Web或app加载动画设计中,也可添加类似的烟雾效果,让简单常见的圆环,柱状或条形动画,也能脱颖而出。
2.Loading Micro Animation
设计师:Nick Buturishvili
亮点:结合网页产品特色
作为一款专为酒类网站设计的加载动画,设计师结合产品特色,将其酒类产品制作流程以动画的形式展示出来,减缓用户可能产生的负面情绪的同时,又能让用户更加生动直观地了解公司或产品。
所以,在你的动画设计之中,也可结合产品,公司甚至品牌特色,添加产品制作流程,动态产品展示以及公司文化展示等等,留住用户的同时,加深他们对产品,公司甚至品牌的印象,提升产品知名度。一举三得,何乐而不为呢?
3.Avanti e indietro loader
设计师:Vitaly Silkin
亮点:图形的前后位置变换,加之渐变色彩的精彩应用
这款加载动画,集中采用了图形交替变换位置实现动态变化,简洁直观。渐变色彩的使用也使整款设计,更加的美观舒适。对于丰富用户枯燥乏味的等待时间,也是不错的尝试。(点击来学习更多精妙的渐变色网页设计)
所以,在你的设计中,也可利用类似图形左右,前后,上下等等位置依次变换的方式,同时结合发光,流体以及背景色彩对比之类效果,让整个动画兼具视觉效果和趣味性。
4.Loading Screen Animation - Hourglass
设计师:Makito Ninomiya
亮点:形象的动态沙漏计时,以及文本与动画的结合
这款加载动画,除了采用了更加形象贴切的动态插画沙漏,拉近与客户的距离。还选择了动画与文字的结合方式,安抚用户的同时,也能尽量获取用户理解,实现与用户的情感层面的交流。
所以,在你的设计中,也可适当的采用一些微文本设计,获取用户共鸣的同时,也能提升用户体验。
5."bouncy" - B&W loading animation 9
设计师:Lilian Tedone
亮点:简单的形状,跳跃以及旋转的完美结合
整款设计简洁清爽,舒适而不失趣味。简单形状,跳跃以及旋转的完美结合,让整个动画设计更加灵动而富有感染力。对于减缓用户等待时的枯燥乏味之感,效果也是立竿见影的。(点击查看更多设计师loading gif系列)
所以,在你的设计中,也可效仿这款设计,利用有限的简单图形,添加旋转和跳跃等动效,配合颜色和阴影的变化,让整个动画设计简单灵动,丰富多变,视觉效果也是绚丽吸睛。用户体验当然也不会差。