一 物体运动
- 为什么需要motion
motion提供:
引导不同视图
暗示用户当完成某个动作时的结果
元素之间的层级和空间关系
分散用户注意力当后台在运行的时候(比如获取内容或者加载下一个视图的时候)
有特点,修饰,令人愉悦的 - 物体是怎样运动的
(1)反应灵敏 一旦触发,能够快速响应
(2)自然运动 在外力作用下自然运动
(3)与周围物体互动
(4)具有目的性 引导用户的注意力 - 一个成功的动作设计具有的特点
(1)快速 避免引起用户不必要的等待
(2)动作简洁干净连续,避免一次做太多动作
(3)运动是相关的 物体是速度,反应和目的的结合,app的每一个自定义的动作应该保持统一贯穿于整个app。
二 持续时间与缓入缓出
- 速度 速度的大小既要足够快不让用户等待又要给予充分的时间让用户理解这种过渡
2 持续时间 持续时间与物体的运动距离,速度及表面变化相吻合,而不是用单一的持续时间,当一个物体离开屏幕的时候用更短的时间因为它们没必要引起用户的注意。
通常的持续时间:
(1)手机:
通常情况下,手机上动作的过渡时间一般在300ms左右,但以下情况除外:
大的,复杂的,全屏的过渡需要更长的过渡时间,375ms左右;
进入屏幕需要225ms;
离开屏幕需要195ms
过渡时间超过400ms,会让人觉得太漫长。
(2)大屏幕:
大屏幕需要的持续时间要大于小屏幕的,因为物体相同时间内,运动距离越长速度越大。
(3)平板电脑
平板运动的持续时间比手机长30%。例如,在手机上需要300ms的运动时间在平板电脑上需要390ms。
(4)可穿戴设备
在可穿戴设备上的运动持续时间要比手机上短30%。
(5)台式电脑
台式电脑上的运动应该比移动设备的更快更简洁。一般在150ms到200ms。
因为台式电脑的过渡不需要太明显,复杂的web运动经常导致丢失帧,快速的运动使得这个现象不明显。
- 自然的缓入缓出
(1)物体的加速和减速要平滑
(2)加速和减速不对称
缓入缓出曲线的有多种形式,最常见的有:标准曲线,减速曲线,加速曲线,锐曲线
标准曲线:最常见的的形式,物体快速加速缓慢减速,适用于事物放大和缩小
减速曲线:物体全速进入屏幕,然后减速到达静止位置,在减速过程中,物体或者尺寸增大到100%,或者透明度增加到100%。有些情况下,当物体进入屏幕时透明度为0%,在进入的过程中可能会尺寸稍微缩小。
加速曲线:物体全速离开屏幕。离开过程中不减速。物体在动画一开始就开始加速,活着尺寸减速到0%,或者透明度减到0%。
锐曲线:适用于物体会随时回到屏幕的情况下。
加速出现在屏幕,减速离开屏幕,加速和减速时对称的。减速过程快于标准曲线。