Windows アプリのモーション

Fluent モーションはアプリで目的を果たします。 これは、ユーザーの動作に基づいてインテリジェントなフィードバックを提供し、UI にアクティブな印象を与え、アプリ内でユーザーのナビゲーションを誘導します。 Fluent モーションは、ユーザーとそのデジタル エクスペリエンス間の感情面の結び付きを生み出します。 マイクロソフトでは、ユーザーが既に現実世界から認識している自然な動きの基盤のうえに構築し、そこからシステムを拡張します。

WinUI ギャラリー

WinUI 2 ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、モーションの動作を確認してください。

Fluent モーションの原則

運動能力

移動中のオブジェクトは、現実世界のオブジェクトの動作を示します。流動的で応答性の高い動きにより、エクスペリエンスが自然に感じられ、感情のつながりが生み出され、パーソナリティが追加されます。

物理モーションの UI の例

タッチで UI を操作すると、UI の動きが、操作の速度に直接関連します。 また、タッチは直接操作であるため、操作するオブジェクトが周囲のオブジェクトに影響します。

機能

モーションは目的を果たし、確信があります。 複雑さに関してユーザーをサポートし、階層を確立する手助けをします。 モーションは、パフォーマンスが向上した印象を与え、体感する待ち時間を隠蔽することでユーザー エクスペリエンスを最適化します。

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

ページ切り替えは、目的に特化されています。 ページが相互に関連する方法に関するヒントを提供します。 パフォーマンスが最適でない場合でも速く感じられるような方法で移動します。

継続的

ポイントからポイントへの流動的な移動は、自然に目を引き、ユーザーを導きます。ユーザーのタスクを洗練された方法で組み合わせ、より使いやすくフレンドリーなものにします。

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

オブジェクトは、シーン間を移動したり、シーン内でモーフィングして継続性を提供し、ユーザーがコンテキストを維持できるようにします。

コンテキストに応じた判断

インテリジェントなモーションは、UI を操作する方法に沿った方法でユーザーにフィードバックを提供します。 対話式操作はユーザーが中心になっています。この動きはフォームファクターに適しており、シナリオを中心に設計されています。ユーザーごとに快適である必要があります。

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

アニメーションはユーザーの操作に沿ったものである必要があります。 コンテキスト メニューは、ユーザーがアクティブ化したポイントから展開されます。

モーションの記事

タイミングとイージング

タイミングとイージングは、UI 内で出入りしたり、移動したりするオブジェクトのモーションを自然に感じさせる重要な要素です。

方向性と重力

方向指示は、ユーザーがエクスペリエンス全体を通じて行う取り組みの強固な概念的モデルを提供するのに役立ちます。 方向性は、重力などのエネルギーの影響を受け、これにより移動の自然な感覚が強化されます。

ページ切り替え効果

ページ切り替え効果により、ユーザーがアプリ内のページ間を移動するため、ページ間の関係がフィードバックされます。 ユーザーがナビゲーション階層内の場所を理解するのに役立ちます。

接続型アニメーション

接続型アニメーションを使用すると、2 つの異なるビューの間で要素が切り替わる様子をアニメーション化することによって、動的で魅力的なナビゲーション エクスペリエンスを作成できます。