动效设计理论

Question

实用和优雅是你的目标

实用

• 借鉴惯例
• 预览结果: 为用户提供交互结果的预览
• 无聊时的消遣: 填写长表单时,可使用颜色和动画增添点兴趣
• 用本能反应: 人面对突然运动时都会作出反应
• 使人对互动充满欲望：用户喜欢按丰富的渐变色彩而且又大又软的按钮
• 体现重要性：使用感觉上同等重要的动效设计来强调重要性
• 减少同时发生的动画：许多元素同时运动，会削弱对这些运动的意义的理解
• 减少动画种类： 动画种类越少,越能确保用户理解 UI 上每个动画的含义
• 镜像动画
• 限制持续时间：动画的持续时间不宜过长
• 限制动画：若某个动画移除不会影响用户理解界面，考虑将它去掉，用样式来替代

优雅

• 不要华而不实
• 唯一华而不实的机会：元素从初始不可见状态直至以动画进入视图这段时间
• 考虑个性化
• 不要拘泥于不透明度动画：缩小元素让其显示、向上滑动划出视图,或通过改变元素背景颜色实现
• 将动画拆分为多步：避免线性感觉（人类被多样性和反差所吸引）
• 错开动画: 在视觉上添加层次感
• 从触发元素处产生动画: 在UI中连接因果关系,模仿物理原理
• 使用图形：典型例子是三条横线摞在一起构成的表示菜单的汉堡图标