专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
优设AIGC  ·  AI工具:50MB→5MB!这款免费神器,5 ... ·  昨天  
庞门正道  ·  帐篷界的虫王争霸! ·  3 天前  
设计上海  ·  热力持续升温——“设计上海” Day 2 ... ·  昨天  
51好读  ›  专栏  ›  微交互

做了这么酷炫的动效,开发哥哥会不会砍我啊

微交互  · 公众号  · 设计  · 2017-11-17 13:24

正文

请到「今天看啥」查看全文



通过上面说的,结合我们自身产品设计的特性,我们可以总结出动效设计的动机主要有如下几点:

① 使等待不枯燥;

② 使变化不生硬;

③ 使反馈不单调;

④ 使体验有情感;

⑤ 使用户更愉悦。



好的动效是什么?


知道为什么做动效设计,那我们应该做什么样的动效设计?或者说好的动效设计是什么呢?是炫酷的,翻滚的,旋转的,爆炸的吗? 复杂程度是评判好与坏的标准吗?


国外一位著名的一线设计师,曾经在分享会上对于好的动效下过这样一个定义:


“好的动效应该是隐形的,好的动效应该是以提高可用性为前提,并且以令人觉得自然含蓄的方式提供有效用户反馈的一种机制。”


这句话其实就是,好的动效设计是合适的,是对于用户使用体验的提升,最终服务的是体验而不是展示你的动画设计。


既然如此 ,那么让我们总结一下好的动效设计的标准:

首先要具备一下几点特性:

① 快速且流畅;

② 恰到好处的反馈;

③ 提升操作感受;

④ 提供良好的视觉效果;



其次:

好的动效设计应该是首先服务于体验,其次适当设计(考虑全面,如性能,实现成本,是否干扰用户等),再次就是要让用户感受到你输出的情感互动,最后也是最基本的就是要具有视觉上的美感。



怎样设计动效?


知道了什么是好的动效设计,那么就引申出下一个问题,我们怎么进行动效设计? 或者说,动效设计该如何入手,尤其是初学者?


很简单,就两步:

①先要有一个构思,想法;

②根据想法进行丰满实现。


没有想法?想法怎么来?怎么构思?从我自身总结,可以从这6个方面进行构思:



①结合产品去设计:

要结合产品进行思考,思路设计要符合提升的产品体验,要经过细致思考不要盲目。


②了解基本常识:

这些常识包含,动效设计的基本常识(如,基本的运动规律,节奏,动画如何),开发的基本常识,什么样子的动效果大概如何实现,实现成本大概是多少。确保能够顺利落地。


③观察生活:

人们对于美的认知,大部分来自于日常的生活经历。比如什么样的运动是温柔地,激烈的,具有震撼性的。当我们对于我们需要构思的动效有性质定位的时候,可以从生活中这些相同的,定性的自然事物中寻找灵感,截取精华。


④看并思考:

就是除了观察生活,我们还需要多看一些优秀的动效设计,时刻作为积累。同时,也需要对于“看”的事物进行细致思考。要思考他为什么这么设计,怎么完成这套动画设计的(是通过那些技巧构成这个动效设计的,整体节奏是怎样的一种感觉)。时刻与自己对类似事物的想法进行对比,找差距,补不足。这就是经验技巧积累的过程。


⑤学会拆解:

web,app中大部分的动效设计,都是通过基本的变化组合而成的。我们要通过多看多观察,慢慢学会怎么去拆解别人复杂的动效设计,从中总结经验。而后,通过合理的编排设计出自己的动效设计,你就是这场动效设计的导演。


⑥关注流行:

这个很简单,就是大家要保持对于设计行业,或者说是web,app动效设计领域的关注。了解当下新的设计手法,设计趋势以及设计方式。不要做一个落伍者,也不要把自己永远定义为一个跟随者。


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



基础变化主要包含:移动,旋转,缩放以及属性变化。


前面几点都很好理解,在此就不在详细解释。

解释一下最后一个属性变化,它其实就是指透明度,形状,颜色等这些属性的变化。

所有的这些变化形式,经过合理的编排在配合上合适的运动节奏,就是一个完整的动效设计。


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



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







请到「今天看啥」查看全文