Material Design 之运动(Motion)– 运动

运动

实体运动遵循真实世界中的各种原则,如重力原则等。

屏幕内运动

弧形向上运动

弧形向下运动

 

进出屏幕运动

独立运动

相对运动

屏幕边界内运动

在屏幕边界内两个点之间进行运动的元素其运动轨迹遵循自然的凹弧;同样屏幕上的所有的运动都遵循标准曲线。

弧形向上运动

在现实中向上运动会需求额外的努力来对抗重力的束缚,同样在屏幕内向上运动的元素也应该遵循类似的在加速过程中缓慢向上的运动过程。

正确

向上移动时,从一个比较平缓的上升坡度开始且以一个比较陡峭的坡度结束

错误

不要以一个很陡峭的坡度开始向上的运动过程

弧形向下运动

在现实世界中的元素是通过重力加速来下降。因此元素在屏幕上向下移动时应该要表现出仅需很少的努力但能通过更快的速度进行向下运动。

正确

元素向下运动时,应该以一个比较陡峭的坡度开始

错误

不要以一个比较缓和的坡度开始向下运动

非弧形运动时

沿单个坐标轴运动的元素(水平或垂直,但不是两者)都不会随弧形运动。这些动作比较简单,速度可能会稍快一些。

正确

保持运动轨迹沿单一坐标轴直线运动

错误

不要不自然的使其沿弧形运动

同样道理,元素进出屏幕一样遵循沿单一坐标轴直线运动的原则。

正确

线性入口易遵循一个明确的切入点

错误

如果某个元素在屏幕上移动,那么不要使它偏离路径,因为它会使入口点复杂化。

进出屏幕范围内的运动

独立运动

对于进入和退出屏幕都不会影响其他元素在屏幕内的位置的元素被称为独立元素。

进入屏幕

进入屏幕的元素使用减速曲线来进行快速进入,以表明它们正以峰值速度行驶。

永久离开屏幕

永久离开屏幕的元素使用加速曲线,一方面可以缩短屏幕的距离,缩短过渡时间;另一方面因为它们不会返回,所以需要较少的用户焦点。

正确

将减速曲线应用到进入屏幕的运动上,且不会影响到周围其他元素的位置。在移动中,这种转变通常发生在225ms。应用加速曲线到离开屏幕的运动上,对于此类相同的项目,因为他们会永久地离开屏幕,所以在移动,这种转变通常只发生在195ms。

错误

不使用标准曲线来应对任何这种运动。对于进入运动,缓慢的加速度是不必要的,因为焦点应该位于最后的静止点。对于离开运动,缓慢减速是不必要的,因为最后的静止点是不可见的。

暂时性离开屏幕

暂时离开屏幕的元素应该使用比较尖锐的曲线,因为它们可能随时返回屏幕,所以它们应该出现在附近触手可及的地方。

正确

将比较尖锐的曲线应用于临时离开屏幕原始目,这些元素可能会从同一出口返回。当他们返回时,使用减速曲线。在此移动中,这种转变通常发生在300ms。

错误

不要将加速度曲线应用于永久离开屏幕的元素,或者使它们从不同位置返回。如果返回,使用减速曲线。

相对运动

进入或退出运动如果会影响屏幕中的其它元素的位置,那么请使其沿着平滑的缓和曲线去运动,以保持最小的破坏性,避免引人注目的戏剧性动作。

使用标准曲线来移动屏幕内外的元素。与独立运动相比,这个曲线的持续时间会稍长一些。

正确

由于屏幕上的浮动动作按钮的运动受输入卡的影响,标准曲线被应用于两个元素的运动,以保持顺利启动和停止。在移动,这种转变通常发生在300ms。

错误

使用上下移动的减速和加速度曲线,屏幕上的浮动动作按钮突然开始向上移动,突然停止向下移动。这场运动是残酷的和破坏性的。