方向性和引力

方向信号有助于巩固用户在体验过程中建立的心理模型。 任何运动的方向都必须支持空间连续性和空间中对象的完整性。

定向运动受到力(例如重力)的影响。 对运动施加力可让运动看起来更加自然。

示例

WinUI Gallery

如果已安装 WinUI 2 库 应用,请单击此处 打开该应用并查看“运动”操作

运动方向

运动的方向对应于物理运动。 就像在自然界中一样,对象可以沿任意世界轴(X、Y、Z)移动。 我们按照这种方式看待对象在屏幕上的运动。 移动对象时,避免非自然碰撞。 ​请记住对象的来处和去向,并且始终支持场景中可能使用的更高级别的构造,例如滚动方向或布局层次结构。​

Short video showing a circle and then the addition of an X axis, a Y axis, and a Z axis.

导航方向

应用中场景之间的导航方向是概念性的。 用户前进和后退导航。 场景移入和移出视图。 这些概念结合物理运动为用户提供指引。

当导航导致对象从前一个场景移动到新场景时,该对象在屏幕上进行简单的 A 到 B 移动。 为了让运动效果更加逼真,增加了标准缓动和引力感。

对于后退导航,移动是反向的(从 B 到 A)。 当用户导航回来时,他们希望尽快返回到之前的状态。 计时更快、更直接,并使用减速缓动。

下面的示例应用了上述原则:在前进和后退导航过程中,所选项目停留在屏幕上。

UI example of continuous motion

当导航导致屏幕上的项目被替换时,显示退出场景去往何方、新场景来自何处至关重要。

这有以下几个好处:

  • 巩固用户的空间心理模型。
  • 退出场景的持续时间提供更多时间来准备内容,以便为进入场景应用动画效果。
  • 这改善了应用的感知性能。

需要仔细考虑 4 个导航方向。

前向进入:接收进入场景的内容,其进入方式采用不与移出内容发生碰撞的方式。 内容减速进入场景。

direction forward in

前向移出:内容快速退出。 对象加速离开屏幕。

direction forward out

后退进入:与前向进入相同,但是倒转过来。

Short video showing a circle entering from the right of the frame and stopping in the middle of the frame.

后退移出:与前向移出相同,但是倒转过来。

direction backward out

引力

引力可让体验更加自然。 在 Z 轴上移动且未通过屏幕上的功能可见性固定到场景中的对象可能会受到重力的影响。​当一个物体脱离场景,并在达到逃逸速度之前,重力会拉下该物体,在其移动时产生一条更自然的物体轨迹曲线。

重力通常会在对象需要从一个场景跳转到另一个场景时发生作用。因此,连接的动画会使用重力的概念。

在下面的示例中,网格顶行中的一个元素受到引力的影响,致使其在离开原来位置时略微下降,然后才移动到前方。

Short video showing a rectangle element leaving the top row of a grid, dropping lightly, and then zooming to the front of the window.