方向性と重力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.

ここでは、これらの原則が適用されます。これは、選択した項目が前方および back ナビゲーション中に画面上に表示されるためです。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.

グリッドの一番上の行を離れたままにして、ウィンドウの前にズームする四角形要素を表示する短いビデオ。