UI设计师在工作过程当中难免会遇到一些界面设计之外的细节,比如Loading动画,或是转场动画等,今天推荐的一个网站,就是一个Loading动画收集站,除了可以直接调用其中的资源之外。还能直接线上修改Loading效果。实乃UI设计必备之佳品。

UI 动效设计灵感站:《让界面动起来!9个移动动效设计必备的灵感收集站》

Preloaders

Preloaders的动画类别非常之多,可以看到除了常见的图片以外,他们对图片还进行了分类可以是三维的loading效果,也可以是纯文字的。总之你能想到的常见分类,这里都是可以直接找到对应的作品。

​它里面可以生成的格式是GIF、SVG或者APNG,有“Free”标签的Loading是可以直接下载使用的。这对于设计师来说减少了很多与RD同学的沟通成本。

与此同时,美丫姐觉得最最方便是它有很多的效果是能够直接在网页里面去编辑的。比如:修改颜色、修改运动速度。要知道这些在AE里面修改之后输出资源,还是非常麻烦的。

​从上图可以看到,可以修改的地方还是非常多的。比如前景背景色,还有大小,运动速度等等。让我们修改看看吧。

改起来非常直观,这样我们就获得了一个崭新的蓝色GIF图片。这里选用的是.gif格式进行下载,所以最终的显示效果也是直接就能预览的GIF动图,效果如下:

其他的样式也可以随意更改,总之是非常非常方便,以下效果均出自Preloaders

​以后再跟RD哥哥沟通页面效果的时候,完全可以拿出这个网站的案例作为范例来给RD哥哥演示。即使图形上有偏差,也可以作为效果演示。简简单单搞定~

当然,这个网站也有一个非常逼死强迫症的地方:就是它的网站图标,是一个Loading图!!总觉得没有加载出来啊啊啊啊啊,急死我了…

简直可怕…

​想要了解更多的设计神器,可以关注@你丫才美工

同时推荐一个非常棒的免费UI教程网站给大家:uiiiuiii.com

​​

uiiiuiii.com优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏,帮您开启免费自学新篇章。

今天的神器就介绍到这里咯,欢迎同学们关注最充满智(dou)慧(bi)的设计账号:

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

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

点赞
收藏 16
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏