UWP アプリのモーションMotion for UWP apps

モーション アイコン

Fluent モーションはアプリで目的を果たします。Fluent motion serves a purpose in your app. これは、ユーザーの動作に基づいてインテリジェントなフィードバックを提供し、UI にアクティブな印象を与え、アプリ内でユーザーのナビゲーションを誘導します。It gives intelligent feedback based on the user's behavior, keeps the UI feeling alive, and guides the user's navigation through your app. Fluent モーションは、ユーザーとそのデジタル エクスペリエンス間の感情面の結び付きを生み出します。Fluent motion elicits an emotional connection between a user and their digital experience. マイクロソフトでは、ユーザーが既に現実世界から認識している自然な動きの基盤のうえに構築し、そこからシステムを拡張します。We build on a foundation of natural movement the user already understands from the physical world, and we extend our system from there.

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.

Fluent モーションの原則Fluent motion principles

運動能力Physical

動作中のオブジェクトは、現実世界でのオブジェクトの動作を示します。Objects in motion exhibit behaviors of objects in the real world. 滑らかで応答性の高い動きによって、自然な操作性を感じさせるエクスペリエンスが実現され、感情面の結び付きが生みだされ、個性が追加されます。Fluid, responsive movement makes the experience feel natural, creating emotional connections and adding personality.

物理モーションの UI の例

タッチで UI を操作すると、UI の動きが、操作の速度に直接関連します。When you interact with UI via touch, the movement of the UI is directly related to the velocity of the interaction. また、タッチは直接操作であるため、操作するオブジェクトが周囲のオブジェクトに影響します。And because touch is direct manipulation, the object you interact with affects the objects around it.

機能性Functional

モーションは目的を果たし、確信があります。Motion serves a purpose and has conviction. 複雑さに関してユーザーをサポートし、階層を確立する手助けをします。It guides the user through complexity and helps establish hierarchy. モーションは、パフォーマンスが向上した印象を与え、体感する待ち時間を隠蔽することでユーザー エクスペリエンスを最適化します。Movement gives the impression of enhanced performance and optimizes the user experience by hiding perceived latency.

機能的なモーションの UI の例

ページ切り替えは、目的に特化されています。Page transitions are purpose-built. ページが相互に関連する方法に関するヒントを提供します。They give hints about how pages are related to each other. パフォーマンスが最適でない場合でも速く感じられるような方法で移動します。They move in a manner that's perceived as fast even when performance is not optimal.

継続性Continuous

ポイントからポイントへの滑らか動きは、自然に目を引きつけ、ユーザーを誘導します。Fluid movement from point to point naturally draws the eye and guides the user. 適切にユーザーのタスクをまとめて、よりコンシューマブルで親しみやすく感じられるようにします。It elegantly stitches together a user’s task, making it feel more consumable and friendly.

継続的なモーションの UI の例

オブジェクトは、シーン間を移動したり、シーン内でモーフィングして継続性を提供し、ユーザーがコンテキストを維持できるようにします。Objects can travel from scene to scene or morph within a scene to provide continuity and help the user maintain context.

状況依存Contextual

インテリジェントなモーションは、UI を操作する方法に沿った方法でユーザーにフィードバックを提供します。Intelligent motion provides feedback to the user in a manner that's aligned with how they manipulated the UI. 操作はユーザーを中心にしています。Interaction is centered around the user. 動きはフォーム ファクターに適切であると感じられ、シナリオに基づいて設計されています。The movement feels appropriate to the form-factor and designed around the scenario. 各ユーザーにとって快適である必要があります。It should be comfortable for each user.

状況依存のモーションの UI の例

アニメーションはユーザーの操作に沿ったものである必要があります。Animation should tie back to the user interaction. コンテキスト メニューは、ユーザーがアクティブ化したポイントから展開されます。A context menu is deployed from a point where the user activated it.

モーションの記事Motion articles

Timing and easing

Timing and easing are important elements that make motion feel natural for objects entering, exiting, or moving within the UI.

Directionality and gravity

Directional signals help provide a solid mental model of the journey a user takes across experiences. Directional movement is subject to forces like gravity, which reinforces the natural feel of the movement.

Page transitions

Page transitions navigate users between pages in an app, providing feedback about the relationship between pages. They help users understand where they are in the navigation hierarchy.

Connected animation

Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views.