2017 Material design 第二章第三节《运动》

三、运动(Movement)

Material的运动借鉴了现实世界中的物理法则,比如重力的参考。

屏幕上的运动(On-screen movement)
圆弧状向上(Arc upward)
圆弧状向下(Arc downward)

进入和离开屏幕的运动(In-and-out screen movement)
独立运动(Independent movement)
关联运动(Relative movement)

在屏幕范围内运动

在屏幕范围内两点间运动的对象的运动路径呈凹型圆弧状,并且都使用标准曲线(Standard curve)缓动效果。

圆弧状向上
模拟现实世界中重力的影响,故在屏幕范围内Material对象做向上移动会受到重力的影响。

对象向斜上方移动,整个运动过程是逐渐加速移动。
可行

对象向斜上方移动忽略了重力对其的影响,显得非常不自然。
不可行

圆弧状向下
同样地,对象向下移动时受到重力影响加速运动。

对象向斜下方移动,整个运动过程是逐渐减速移动。
可行

对象向斜下方移动忽略了重力对其的影响,显得非常不自然。
不可行

不是沿圆弧路径运动的情况
如果对象沿单一轴向(横向或纵向)移动,就不需要沿圆弧路径运动。这种情况下,这些简单的对象移动可以稍微加快点速度。

保持对象沿单一轴向直线运动。
可行

对象沿单一轴向移动的情况下不要使用圆弧路径。
不可行


对象进入和离开屏幕的动效也是沿单一轴向运动。

对象沿直线进入屏幕有助于在用户脑海中形成对对象入口位置的清晰了解。
可行

在离开屏幕的运动中不要应用圆弧路径,因为这会让用户难以理解入口的位置。
不可行


进入和离开屏幕的运动

独立运动
从屏幕外(内)到屏幕内(外)做运动的对象因为不会影响到其他对象在屏幕上的位置,所以被称之为独立对象。

进入屏幕
对象进入屏幕动效应用的是减速曲线(Deceleration curve)效果。从屏幕外加速进入屏幕内,进入后慢慢减速直至停止。运用这种效果的对象运动看起来就像是匆匆赶过来的一样。

永久地离开屏幕
如果一个对象离开屏幕后再也不会返回屏幕,那它应使用加速曲线(Acceleration curve)的运动效果。在时间上,其离开的时间应比进入屏幕的时间要短,因为该对象再也不会返回,也不需要用户太多对其的关注,所以就让它赶快走吧。

减速曲线(Deceleration curve)适用于进入屏幕的对象运动,这类对象运动不会影响到其他对象在屏幕上的位置。在移动端上,进入屏幕的动效持续时间一般是225ms。与之对应的加速曲线Acceleration curve)适用于永久地离开屏幕的对象运动。在移动端上,永久离开屏幕的动效持续时间一般在195ms以上。
可行

不要使用标准曲线(standard curve)在进入或离开屏幕的对象运动上面。如在刚入屏之时,对象运动不应该还是在逐渐加速的,因为我们更需要关注的是它停留在屏幕上的位置,所以它应该加速进入屏幕之后朝着屏幕上的停留点逐渐减速;在离屏的时候,对象运动不应该是逐渐减速的,因为它离开屏幕后停留的点我们根本看不见,所以没必要用减速运动凸显它的行进路径。
不可行

暂时地离开屏幕
如果一个对象只是暂时离开屏幕,并有可能随时返回屏幕的话,那它的运动应使用突变曲线(Sharp curve)的运动效果。

突变曲线适用于那些离开屏幕后有可能返回屏幕的对象。当这些对象返回屏幕的时候使用减速曲线(Deceleration curve)。在移动端上,暂时离开屏幕的动效持续时间一般在300ms以上。
可行

加速曲线运动适用于那些离开屏幕后再也不会返回屏幕的对象,或者即使返回也是从屏幕上不同于之前的位置返回屏幕。
不可行

关联运动
如果一个对象在进入(或离开)屏幕的时候跟其他屏幕上已有的对象发生冲突,那么其他对象应该沿着这个对象的运动路径并且应用平滑的曲线运动效果做关联运动。这样做能够最小限度引起对象间关系的混乱,和避免引起用户注意。

被迫移动的这些对象运动应使用标准曲线(standard curve)效果。

屏幕上的浮动按钮(FAB)的位置被进入屏幕的卡片(card)所影响,浮动按钮被迫跟随卡片的运动路径运动。为了避免引起对象间关系的混乱和干扰到用户注意力,浮动按钮的运动必须使用标准曲线效果,这样就可以保持浮动按钮在开始和结束运动时候的平稳。在移动端上,这种被关联的运动持续时间一般在195ms以上。
可行

虽然是关联运动,但这并不意味着被迫移动的浮动按钮也会使用减速、加速曲线效果。从图中你可以看出,如果应用了这两个效果,你就会看到浮动按钮非常突然地开始和结束运动。这肯定会引起用户注意,制造不必要的视觉干扰。
不可行
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值