加载动态设计--等待的艺术创作思维

在市场发展的趋势中,为了产生更好的视觉或者跳转的过程的必要,设计师都很清楚认知到在目前的APP设计和网站加载是无法避免的事了,所以在面对这种困难,必须把这种缺点一步步的变成为优点,打造优秀的用户体验。

目前许多产品的加载或者等待动效常用于增加用户的第一印象,但是可以延伸到更多的实际使用范畴,在设计项目中,遇到加载动效是必定的,有时会在内页切换遇到,有时在组件加载的时候遇到,或者在幻灯片切换的时候用上,还有一个比较重要的是,填补系统的崩溃或者出错的页面,都可以换成有创意的等待动效,会很大程度的引导用户觉得不是发生了错误。

等待和加载动效中,最常见的表现形式是进度条,但是许多设计师采用了更加有趣的表现手法。

4:20 Dead Obies


在很多传统的设计师的思维中都会有遇到等待加载时总会用进度条,然后就是一个生硬的LOADING的英文,不仅会让用户产生烦躁,而且也十分无趣,设计师可以通过把字母给拆分,然后让静态变成动态,让画面显得更新鲜,更有趣。

NewsTech


有一些充满科技感的加载等待画面,让人产生一个种在看科幻的片的感觉,用各种加载数据的样式,让等待变成一次高科技的表现形式。

Ferias Beach Park


这个Ferias海滩公园的页面借助了美观的配送和怀旧的人物设计,让人联想到那个过去的童年,也是一种不错的创意。

Mad Max Fury Road


年度神作《Mad Max 4》本就是以突出的视觉设计而令人记住,所以它的官网在设计美学上也保持了一致性。加载动效中那个粗糙但古朴的LOGO也与整个电影风格相呼应,营造出躁动而个性十足的氛围。

Panda Raid


网站的加载等待需要还是用了类似进度条的方式,但是图中的汽车轮胎的速度会随这个画面的加载速度而改变,更形象化。


Wiser Digital


在这个加载话面中用了一种乒乓球击打的效果,会产生一种不规则的动画,会使人觉得等待时间不会很长。

Tenfold Creative


为了填补等待的时间,设计师将朗朗上口的文字做成动效,在加载的时候用它们来与你进行互动。虽然许多文字是一闪而过,但是你可以在阅读中度过这段时间。


Tham Nguyen


Tham Nguyen 是一位著名的法国女设计师,她的个人网站中糅合了自然的情怀和女性的细腻,加载动画采用了走路的小女孩儿,俏皮而有趣。


50m.space


和前面许多案例一样,设计师采用了扁平风的动态插画来填补等待时间,强化整体风格。



Kajikenseiji


设计师在这个网页中,使用的是吐着气泡的鱼来作为过度,古朴的文字强化了网站的品牌形象,简单的色调和鱼的形象也充满了日系网站的独特气质。


One Kichjoji


和之前的网站一样,加载动效采用了单色的灯塔形象,简单有趣但是也优雅地呈现了品牌形象。

Interatction with Artificial Physics


这是一个精心设计的网站,强调人造和物理的属性,这种兼顾自然和人工设计的特征也体现在加载动效上,四个相互运动的气泡时大时小,看起来自然而混乱,但是仔细看你又仿佛能找到某种规律,这个有趣的过程中你会忘记时间的流动,直到网站加载完成。

Catch the Dragon


水波纹扩散一般的加载动效,在黑白色调之下,兼顾了自然的特征和科技的感觉,微妙的互补效应和震动的效果令整个动效简单而赏心悦目。

SLMF


沉稳和有创意的排版,让等待转换成为数据的透明度有虚转为实。


Zodiac

这是一个星际的画面,充满人类对宇宙的向往和探索,科幻般的感觉,充满艺术感,在等待中欣赏也是一种好主意。

MTV Bump


打开页面之后,鼠标光标变成了复古的沙漏造型,更让人惊喜的是加载动画是一个不停吞吐着彩虹色带的MTV Logo,复古而有趣。

Y7K

Y7K的加载动效其实蛮讨巧的,巨大的LOGO上叠加一个色彩丰富的视频,漂亮而简单。

The Happy Forecast


这个网站的动效设计手法并不鲜见,但是设计是不仅仅是添加了进度条那么简单,他还用渐变的动态文字告诉用户正在加载网站的哪个部分。时间很长,但并不无趣。



结语

动态设计虽然是一个很少的部分,但也会起到意想不到的效果,在用户体验中让不愉快的等待,变成有趣,有创意的快乐感,动态设计是大势所趋,加载/等待动效也是其中的重要组成部分,如果你热衷于动效设计,不妨关注一下这个领域。

原文地址:https://www.cnblogs.com/qudaxueyuan/p/4827250.html