材质中的运动遵循现实世界的力学,比如重力。
屏幕上的移动
向上弧线
向下弧线
进出屏幕的移动
独立移动
关联移动

材质中的运动遵循现实世界的力学,比如重力。
向上弧线
向下弧线
独立移动
关联移动

元素在屏幕内两点之间会沿着一条自然下凹的弧线移动。所有屏幕内的移动都遵循标准曲线。
在现实世界中,物体上升需要克服重力。屏幕内的元素向上移动也应体现这种“费力感”,在加速过程中以较慢的向上运动来表现。
推荐做法
向斜上方移动时,刚开始坡度较缓,结束时坡度较陡。
不推荐做法
元素向上移动时,不要一开始就使用陡峭的坡度。
在现实世界中,物体会在重力作用下加速下落。屏幕上的元素向下移动也应体现更省力的感觉,以下落更快的方式表现。
推荐做法
当沿着对角线向下移动时,开始的曲线比较陡峭,结束的曲线比较平缓。
不推荐做法
元素向下移动时,不要一开始就使用平缓的曲线。
沿着单个轴(水平或垂直)移动的元素不需要遵循弧线轨迹。这种移动更简单,且可以以稍快的速度移动。
推荐做法
沿着单个轴移动时使用直线轨迹。
不推荐做法
沿着单个轴移动时使用曲线轨迹会显得很不自然。
元素进出屏幕时的移动也是沿着单个轴的。
推荐做法
直线进入屏幕可以很容易地感知到入口的位置。
不推荐做法
不要让离开屏幕的元素沿弧线运动,这会让入场点更难界定。
元素进出屏幕时完全独立移动,不会影响屏幕内其他内容的位置。
元素进入屏幕时使用减速曲线实现快速进入,表明它们此前一直以峰值速度行进。
元素永久离开屏幕时,使用加速曲线来实现在较短的时间内加快离开屏幕,因为它们不会再返回,且不太需要获得用户的注意。
推荐做法
对进入屏幕且不影响周围其他元素位置的元素,应使用减速曲线。在移动端,这个过渡通常持续 225ms。对同一类元素的永久离开,应使用加速曲线。在移动端,这个过渡通常持续 195ms。
不推荐做法
不要在这些情况下使用标准曲线。对于入场,缓慢的加速是没有必要的,因为用户的焦点会停在元素最终静止的点。对于出场,缓慢的减速是没有必要的,因为终点是不可见的。
元素暂时离开屏幕时应该使用急促曲线,因为元素随时可能返回屏幕,并且应看起来仍在附近、触手可及。
推荐做法
元素暂时离开屏幕且可能从同一离开点返回时应使用急促曲线;返回时使用减速曲线。在移动端,这个过渡通常持续 300ms。
不推荐做法
元素永久离开屏幕时、或者需要从其他地方返回屏幕时,请使用加速曲线。而当元素返回时,应使用减速曲线。
元素进入或离开屏幕,导致屏幕上其他元素发生移动时,需要使用平滑的缓动曲线,这样才能减小混乱,避免视觉干扰和突然的移动。
标准曲线用于在屏幕的边界内或边界外移动的元素。与独立运动的元素相比,标准曲线的持续时间会稍久一点。
推荐做法
当屏幕内的浮动操作按钮被进入屏幕的卡片影响时,标准曲线可以让两个元素保持平滑的开始和结束。在移动端,这个过渡通常持续 300ms。
不推荐做法
在向上和向下移动时使用减速/加速曲线,会让屏幕内的浮动操作按钮向上开始得很突兀、向下停止得也很突兀。这种移动生硬且具有干扰性。