动效设计-交互设计的最后一公里（四）

honghu2

动效设计-交互设计的最后一千米（四）

本文先容了动效设计功效物规范的六个部门：动效Demo，Demo关头帧、触刊行为、活动工具、活动参数、活动曲线。

作为交互设计的延长，动效设计功效物除供给需要的动效资本、全能的GIF图片，也必要供给一些雷同“设计阐明”的注释。这些注释用来对动效的全部进程举行阐明，引导开辟实现动效设计，出格是在转场类动效中，供给的动效阐明文档就显得非分特别首要。

动效设计本色是：界面元素在触发祥的触发下，相干元素（包含本身）颠末一系列的变革，终极静止的全部进程。

全部动效进程包括了的三个部门：原由、颠末与成果。动效功效物规范，本色上就是对这三部门的请求与阐明。



功效物规范重要包括了六部门内容，别离是：动效Demo，Demo关头帧、触刊行为、活动工具、活动参数、活动曲线。
1、 动效Demo
动效Demo是总体动效设计的展现结果，可所以关头帧动画、GIF、视频，也能够是可交互的动效文档。动效功效物比力合适以单个功效或操作为单位，将动效动画切割成，削减检察结果时的期待时候。

在所有的Demo格局中，GIF的格局最佳，可以实现一个Demo的轮回展现，削减了预览职员的操作。

在视频播放器中，单个视频多为一次播放，必要设置才能实现轮回播放，预览职员必要对每一个视频举行设置，才能反复检察一个动画的结果。

对付可交互的动效文档，一方面必要对设计方案比力认识的职员来举行操作，另外一方面，在开辟进程中，该情势的功效也轻易遗漏一些细节动效。是以，可交互的动效文档不适合直接提供应开辟同事，更多的是在动效设计评审中利用。

本文以新浪微博的舵式导航的动画结果作为案例举行阐明：



新浪微博的导航稻草网动效
2、Demo关头帧
对付无穷轮回的动效Demo，若没有明白标出动效的起头与竣事，轻易造成混同。

是以，在文档中，需标明动效的肇端状况，并对中心帧作以标识，便于明白在最小的动效单位中的活动次序。在明白总体动画结果后，将Demo的关头帧抽离出来并举行标识，可高效的引导开辟进程，同时实现文档的同一性。



Demo关头帧
3、触刊行为
触刊行为包括三个要素，包含：触发祥、触发工具、触发方法，在动效规范文档中要明白论述三者的联动瓜葛。



触刊行为

在当前的互联网产物中，常见的触发祥有四种：手指、鼠标、键盘和前提触发祥。

触发工具是界面中触发祥的感化工具，是发生全部动效的出发点。

触发方法即装备的操作方法，根据平台分歧，触发方法也分歧，触控装备的触发方法多为手势操作或感到器触发等。针对PC电脑而言，触发方法多鼠标点击与键盘输入等；针对电视装备而言，触发方法多为按键操作等。



触控平台的手势操作
4、活动工具
活动工具指的是：触策动作发出后，产生属性变革的页面元素。

此中，属性包括了外形、色彩、位置、扭转角度、透明度、巨细等。在动效设计功效物中，可以在页面中将活动工具经由过程序号标识出来。

作为其在接下来花季视频的活动参数举行对应，一方面使功效物加倍整齐；另外一方面，经由过程对其编号，可以有用的削减活动工具的漏掉，使活动工具的表达加倍完备。



活动工具
5、活动参数
活动参数是动效进程的数据化的表现情势，是动效实现的根基前提。

是以，在全部动效规范中茄子视频，基于同一的时候出发点，将活动工具的属性值逐一映照到时候轴上，构成活动工具的活动参数表格。

在基于统一时候出发点，绘制出每个活动工具延迟时候和活动的时长，并将分歧属性在起止时候点标识出来，使时候变量与属性变量对应起来，使活动参数直观化。

注：按照动效设计原则，一般的动效延续时候不跨越0.5s。



活动参数
6、活动曲线
活动参数只表示出了活动工具的起止时候、活动时长和属性变革的量，可是没有展现活动进程中的变革。是以，最后必要展现活动参数变革的曲线。

活动曲线是动效进程节拍的表现，也是其质量的包管。在完成动效时候的根本上，标识出其活动的节拍可以有用的引导开辟对动效进程的表达。

常见的活动曲线有五种：直线、缓出、缓入、缓动和弹性活动。

动效进程的节拍都是由这五种活动情势的蜕变或组合而成，按照当前的开策动效库，要供给必定的参数。

分歧的开辟方法，供给的参数有所分歧，此中一种是供给活动曲线手柄的坐标，弹性曲线供给张力与磨擦力。在AE软件中，可以按照插件Flow来标识表记标帜活动曲线。



常见的活动曲线

在案例中，共触及两种活动情势和蜕变情势。



例子中的活动曲线

文中所描写的动效设计功效物规范，只是最经常使用的一种，分歧的动效建造软件平台有分歧的参数表述方法。比方：在AE中，可以经由过程BodyMovie来供给与开辟的资本对接，在这里就纷歧一先容。

相对于而言，动效设计的实现较为简略，不苏格论是挪动端利用或是Web利用，其通例的动效组件库都较为成熟与规范。

优异的动效设计不但仅必要设计师在动效细节的把控与专注，也必要设计师将动效进程清楚、明白的参数化展现出来。

是以，细致的动效规范文档是鞭策动效方案落地的关头身分。
#专栏作家#
弘毅道，公家号：UIUX设计事情坊，人人都是产物司理专栏作家。存眷to B营业，特别长于后台步伐界面设计，包含需求沟通，原型设计和后期的设计评审等。

本文原创公布于人人都是产物司理。未经允许，制止转载

题图来自Unsplash，基于CC0协定