CZen

移动端动效设计

动效：一连串运动的画面组合而成

【作用和意义】

1. 辅助操作，增强感知

2. 减弱主观时间感知，缓解等待焦虑

3. 提升情感，渲染气氛

4. 营造应用独特气质，提升品牌

【动效设计方法/动效拆解】

1. 触发行为：如何触发，点击或者手势，请详细描述

2. 明确运动对象，及对象之间的关系（静止与运动的相对参照）；先后顺序

3. 动效形式：移动、翻转、放大/缩小......

4. 速度与节奏：动效在多少时间内一定要完成；动效速度曲线最好可以给出详细的demo参数；除了匀速，最好可以使用摩擦力、回弹、重力等拟物性增加动效的节奏感，获得更加真实细腻富有感染力的效果

5. 动效的形变包括：

• 形状变化

• 大小

• 方向/移动路径/位置

• 透明度

• 明暗度

• 颜色

【常用到动效的几个地方】

1. 界面转场

   界面的跳转，一个界面到另外一个界面

   界面间的跳转主要包括、开关门、缩小放大、折叠、旋转......

2. 用户引导

• 新手/新功能引导 — 不宜过多，突出重点，更新颖的形式和动效的运用

• 界面中隐藏功能引导

         适当出现和消失，不干扰用户操作；

         突出重要功能，不重要功能请使用彩蛋式。

         过多的引导会使用户眼花缭乱，尽可能使用轻量型动效（轻量≠简单）

3. 操作反馈

•    操作过程中的反馈和操作结果的反馈君告知用户状态变化

•    轻量化、有目的性、连关于过渡性；

•    加强效果可参考模拟现实拟物式动效

4. 加载/进度

   加载动效的目的：

•    显示当前进度和剩余时间，告知用户当前状态，消除不可知；

•    新颖有趣的加载动效吸引用户注意力，消除等待焦虑感；

•    加载页面与品牌形象相符合，宣传与增强品牌感知

     如果加载时间＜0.1S，则不使用加载页面；如果在0.1-1S之间，请显示总      体进度，已加载和剩余时间；超过1S以上的，则采用备用可操作选项

5. 启动画面

•    用户对于产品的第一印象和感知，尽可能新颖和创新，赋予情感化，    凸显品牌和应用品质、特性等；

•    时间不要太长，加载内容多的产品需采用技巧性尽快进入

【动效设计原则】

1. 节奏速度，巧妙使用曲线时长：顺畅自然优雅的动效与节奏分不开

2. 结合操作，关联轻量自然：动效关联轻量自然，不干扰正常操作

3. 点到为止，切记过犹不及：高频操作谨慎使用，动效看过了也会腻而显得拖沓

4. 拟物、隐喻、品牌特性