方向性和重力Directionality and gravity

方向訊號有助於強化使用者體驗期間的心智模式。Directional signals help to solidify the mental model of the journey a user takes across experiences. 任何動作的方向,必須能同時支援空間的持續性,以及空間中物件的完整性。It is important that the direction of any motion support both the continuity of the space as well as the integrity of the objects in the space.

方向移動皆受像引力之類的力量牽引。Directional movement is subject to forces like gravity. 將力量運用到動作,可強化動作的自然感。Applying forces to movement reinforces the natural feel of the motion.

範例Examples

XAML controls gallery

如果您已安裝 XAML 控制項庫應用程式,請按一下此處以開啟應用程式並查看動作運作情形If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

移動方向Direction of movement

移動方向對應到實體動作。Direction of movement corresponds to physical motion. 就像大自然中,物件可在任何世界軸 (X、Y、Z) 移動。Just like in nature, objects can move in any world axis - X,Y,Z. 這就是我們想像螢幕上物件如何移動的情況。This is how we think of the movement of objects on the screen. 當您移動物件時,請避免非自然衝突。When you move objects, avoid unnatural collisions. 請記住,物件來自和移至,而且一律支援可在場景中使用的較高層級的結構,例如滾動方向或版面配置階層。Keep in mind where objects come from and go to, and alway support higher level constructs that may be used in the scene, such as scroll direction or layout hierarchy.

顯示圓形,然後新增 X 軸、Y 軸和 Z 軸的短片。

瀏覽方向Direction of navigation

應用程式中場景之間的瀏覽方向是一種概念。The direction of navigation between scenes in your app is conceptual. 使用者前後瀏覽。Users navigate forward and back. 場景在視野中出入。Scenes move in and out of view. 這些概念結合實體移動來指引使用者。These concepts combine with physical movement to guide the user.

當瀏覽造成物件從先前的場景移動到新的場景時,物件可在螢幕上進行簡單的 A 到 B 的移動。When navigation causes an object to travel from the previous scene to the new scene, the object makes a simple A-to-B move on the screen. 若要讓移動的感覺到更實際,會加入標準加/減速及重力感。To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

要往回瀏覽,就往反方向移動 (B 到 A)。For back navigation, the move is reversed (B-to-A). 當使用者往回瀏覽時,它們會預期儘速返回到先前的狀態。When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. 時間更快速、更直接,並開始減速。The timing is quicker, more direct, and uses the decelerate easing.

在此,會套用這些原則,因為在向前和向後流覽時,所選取的專案會留在螢幕上。Here, these principles are applied as the selected item stays on screen during forward and back navigation.

連續動作的 UI 範例

當瀏覽造成螢幕上的項目遭到更換,很重要的一點是須顯示退出的場景退到哪裡,新的場景來自哪裡。When navigation causes items on the screen to be replaced, its important to show where the exiting scene went to, and where the new scene is coming from.

這有幾項優點:This has several benefits:

  • 它強化使用者的空間心理模式。It solidifies the user's mental model of the space.
  • 退出場景的持續時間提供更多時間準備內容讓傳入的場景做動畫效果。The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • 它改善應用程式的感知效能。It improves the perceived performance of the app.

有 4 個謹慎瀏覽方向考量。There are 4 discreet directions of navigation to consider.

向前 復原以與外寄內容不衝突的方式來輸入場景的慶祝內容。Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. 內容減速到場景中。Content decelerates into the scene.

向前前進方向

向前輸出 內容很快就結束。Forward-Out Content exits quickly. 物件會加速螢幕。Objects accelerate off screen.

順向輸出方向

往回 和向前復原相同,但是反轉。Backward-In Same as Forward-In, but reversed.

顯示從框架右邊進入,並在框架中間停止的短片。

反向 與順向的相同,但反轉。Backward-Out Same as Forward-Out, but reversed.

方向反向

重力Gravity

重力可讓您體驗更自然的感覺。Gravity makes your experiences feel more natural. 在 z 軸上移動的物件,其不是透過螢幕上的布景固定在場景上,便可能受到重力影響。Objects that move on the Z-axis and are not anchored to the scene by an onscreen affordance have the potential to be affected by gravity. 當物件擺脫場景,在其達到逸出速度之前,重力會將物件拉住,讓物件移動的軌跡曲線更加自然。As an object breaks free of the scene and before it reaches escape velocity, gravity pulls down on the object, creating a more natural curve of the object trajectory as it moves.

當物件必須從一個場景跳到另一個場景時,重力通常會顯現出來。Gravity typically manifests when an object must jump from one scene to another. 因此,連接的動畫便使用重力的概念。Because of this, connected animation uses the concept of gravity.

在此,方格頂端列中的元素受到重力影響,讓它在離開其位置時緩慢地往下掉,並移動到前方。Here, an element in the top row of the grid is affected by gravity, causing it to drop slightly as it leaves its place and moves to the front.

顯示矩形元素離開方格頂端資料列、輕微卸載,然後縮放至視窗前端的短片。