CZen

It`s never too late to learn !

[About Dynamic]

移动端动效设计

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

【作用和意义】

  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. 拟物、隐喻、品牌特性

评论(4)
热度(3)
  1. 许昊CZen 转载了此文字

© CZen | Powered by LOFTER