加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 运营 > 正文

全方位科普手册:产品的动效设计

发布时间:2018-01-01 20:35:20 所属栏目:运营 来源:人人都是产品经理
导读:副标题#e# 看完本文你会学到: 1. 为什么需要动效设计? 什么是动效设计? 动效在产品设计的作用 动效设计的好标准 2. 如何设计动效? 6 个构思动效的方法 6 个实现动效的方法 3. 动效的类别 4. 常用的动效软件 5. 让动效落地的 4 个方法 为什么需要设计动

前面我们说大部分我们在web&app中看到的动效设计,都是由一些基本的变化组合而成的,那这些基础变化是什么呢?(见下图)

全方位科普手册:产品的动效设计

动画的基础变化

基础变化主要包含:移动,旋转,缩放以及属性变化。前面几点都很好理解,在此就不在详细解释。解释一下最后一个属性变化,它其实就是指透明度,形状,颜色等这些属性的变化。所有的这些变化形式,经过合理的编排在配合上合适的运动节奏,就是一个完整的动效设计。

简单来说就是:你要确定你要发生什么样的运动,这个运动要以何种节奏运动。贝塞尔曲线,就是将速度与时间的关系,用图形的形式展现出来,使其表意更直观。

全方位科普手册:产品的动效设计

变化节奏

上图就是一些常见的贝塞尔曲线,右边就是我们在AE设计过程中,运动曲线调节界面。

为什么运动需要配合合适的节奏呢?

因为自然界中运动都不是线性的匀速运动,而是按照物理规律,呈现出的曲线的变速运动。这就是之前说的基本常识,基本规律。人们对于一个运动形式产生的情感反馈,大部分也来自于生活中看到的类似的运动形式。所以我们要符合物理规律,这样才能准确的专递我们动效设计的情感。当然可以适当根据需要夸张,精简。规矩是死的人是活的。活学活用。

http://easings.net这个网站上归结了基本全部运动形式的贝塞尔曲线,并且有预览。还能直接使用js代码,很方便,很直观。

说了如何构思,接下来就要想想怎么实现你的想法:

全方位科普手册:产品的动效设计

实现动效设计

如上图所示:

实现想法基本就是技术与技巧的问题,这需要学习与积累,怎么学习积累呢?

1.  动手尝试,熟能生巧

不断尝试才能不断锻炼自己的技术技巧。只有尝试了才能真的验证你的设计。

2. 临摹作品

学习任何东西,尤其是设计这个行当。临摹都是很有效的入门办法,之前的写实图标,现在的动效设计都是如此。临摹的过程其实就是你与优秀设计者交流的过程,从中你能仔细了解和学习他的设计思路手法,也能在临摹过程中对于原有设计手法结合自身经验进行优化升级,是很好的提升技巧的方法。

3. 注重细节

这个很简单,就和做单纯的视觉设计一样,一定要注意细节,细节决定成败,尤其是动效设计。要认真,多想,想全面。

4. 有节奏感

这个前面说过。要让你的作品有活力不死板,才能赋予产品以新的活力。

5. 先加后减

(编辑:惠州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读