飞特网 顶部通栏广告

我的UI动效野路子

专注发布于:2020-1-14 11:37 |原作者: 轻量文
简介: 对于动效,我只是略知一二,不过UI设计师,会点动效是会有所加分,只要对基础属性有所了解,就可以解决工作上很多简单的动效需求,主要还是思考的时候要理清思路,所以我把自己一点心得分享给大家,希望能帮助到你。 ... ... ...

版权申明:本教程出自“轻量文”原创,感谢“轻量文”的原创教程分享!

动效,干嘛的?

产品设计中的动效,简单一句话就是让用户更好的体验产品。如果非要细分来说,可以讲很多,比如减缓焦虑、引导操作、增加趣味等等吧!

作为UI设计师,会点简单的动效设计是很加分的,因为不是所有团队都有专门的动效设计师。

我呢,本科读的是广告学,学过一点AE,后来做了UI,偶尔也会弄一弄,虽然很业余,但多少还是做过一点作品,比如:

我的UI动效野路子 飞特网 UI设计教程

FEVTE编注:更多UI设计教程,和UI设计理论知识请访问飞特网UI设计教程栏目:https://www.fevte.com/plan/UIdesign/

临摹作品

我的UI动效野路子 飞特网 UI设计教程

我的UI动效野路子 飞特网 UI设计教程

随着经验的积累,对动效的理解也稍微多了一些,借此机会与大家分享一点自己的心得!

一般来说,所有动效都逃不出这4个基础属性:位移、缩放、旋转、透明度。有些动效只用到一个两个属性,尤其是在我们界面设计的工作当中,并没有你想象中那么难。在我看来,只要对基础属性有一定了解,就可以解决工作上的很多问题。

下面就结合自己平时做的一些动效需求,讲一些实用的知识点。

大纲如下:

1.动效分层思考

2.加个回弹更自然

3.一些形态动效的原理

4.一定要符合常识

5.基础属性以外的效果

01 动效分层思考

动效很考验一个人的整理能力,内容过于复杂时,设计师很容易蒙圈,为了使其简化,我经常使用分层思考的方法来简化复杂程度,比如下面这个"我的"图标为例:

我的UI动效野路子 飞特网 UI设计教程

我会将"我的"图标动效分为两层:脑袋层、五官层。

我的UI动效野路子 飞特网 UI设计教程

整个动效,脑袋层的动画很简单,只有缩放:

我的UI动效野路子 飞特网 UI设计教程

而五官层的动画先是缩放,然后是向上位移,最后是眼睛的眨眼:

我的UI动效野路子 飞特网 UI设计教程

当把动画分层分析之后,思路会清晰很多,执行起来也会很高效。

02 加个回弹更自然

我平时用到的最多就是位移,只要用心拆解,你会发现,很多东西好像没那么难。

举个例子:

我的UI动效野路子 飞特网 UI设计教程

这个动效就只有位移的属性,有三个位移:

1.整体从上至下位移

2.高光从左至右位移

3.眼睛锚点向中间位移(闭眼),再向上下位移(睁眼)

有了这三个位移的属性之后,自然就有了上面这个动画,如此整理,方可清晰。

但是整体的位移有些生硬,原因就在于没有回弹:

我的UI动效野路子 飞特网 UI设计教程

加上回弹之后:

我的UI动效野路子 飞特网 UI设计教程

形象的眨眼加回弹,是我经常使用的小技巧,哈哈哈,当然回弹不仅仅只是位移的回弹,刚才"我的"图标在缩放上也有回弹。

12下一页
5

好评

差评

刚表态过的朋友 (5 人)

专注
辽宁省 鞍山市 摄影师
+ 关注 私信
  • 插画创作流程分享!
  • 冬季冰雪题材拍摄10个建议技巧及思路
  • 我的UI动效野路子

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业

本周热点文章

关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 移动版| 飞特网