Windows 11 での動き

モーションにより、インターフェイスがユーザーの操作に対してどのようにアニメーション化して応答するかが表されます。 Windows のモーションは、反応的、直接的であり、状況に応じて変化します。 ユーザーの入力をフィードバックし、目的地まで分かりやすく誘導する配置の枠組みを強化します。

An animated image that shows several examples of motion in the Windows UI.

モーションの原則

これらの原則では、Windows でのモーションの使用について説明します。

Connected: アクションの要素がシームレスに接続されます

位置とサイズを変更する要素は、内部で接続されていない場合でも、ある状態から別の状態に視覚的に接続する必要があります。 ユーザーは、ポイントからポイントまでの要素に従って、静的な状態変更の認識負荷を軽減するようにガイドされています。

例: ウィンドウをフローティング、スナップ、最大化の間で切り替えた場合、常に同じウィンドウのように感じられます。

An animated image that shows a Microsoft Edge window transitioning between floating, snapped, and maximized views.

ヒント

アクセシビリティと読みやすさを向上させるために、このページでは既定のビューで静止画像を使用しています。 画像をクリックすると、アニメーション化されたバージョンが表示されます。

一貫性: 要素は、エントリポイントを共有するときに同様の方法で動作する必要があります。

同じ UI エントリポイントを共有するサーフェスは、相互作用に一貫性を持たせるために、同じ方法を呼び出す必要があります。 各遷移では、他の要素のタイミング、イージング、および方向が考慮されるため、サーフェスが相互にまとまりを感じることがあります。

例: すべてのタスクバー flyouts が呼び出されるとスライドアップし、閉じられるとスライドダウンします。

An animated image that shows several Windows UI surfaces in succession, such as the start menu and search pane. Each surface slides up from the taskbar when invoked, and slides down when dismissed, in a consistent manner.

画像をクリックすると、アニメーションが表示されます。

応答性: システムが応答し、ユーザーの入力と選択肢に適合します。

インジケーターのクリアは、システムが認識し、さまざまな入力、事後姿勢、および向きに適切に適応することを示します。 アプリは OS の動作に基づいて構築し、応答性、生き、および入力方法に応じた使用を支援する必要があります。

例: キーボードが切断されると、タスクバーアイコンが広がります。 ウィンドウの端は、カーソルまたはタッチ入力に応じて別のビジュアルを呼び出します。

An animated image. On the left, taskbar icons spread out when a keyboard is detached. On the right, window edges have different visual effects when manipulated with the cursor or touch input.

画像をクリックすると、アニメーションが表示されます。

すばらしい: 目的を想定した予期しない瞬間

モーションは、単純なアクションを満足させるの瞬間に変換するために、パーソナリティとエネルギーをエクスペリエンスに追加します。 この瞬間は常に brief と fleeting であり、ユーザーの操作を補強するのに役立ちます。

例: ウィンドウを最小化すると、アプリアイコンが上に移動されますが、アプリアイコンがバウンスされます。

An animated image that shows an app icon bounce down when the window is minimized, and bounce up when the window is restored.

画像をクリックすると、アニメーションが表示されます。

機知: 既存のコントロールを利用して、可能な限り一貫性を保ちます。

可能な限り、カスタムアニメーションは避けてください。 ページの切り替え、ページ内のフォーカス、およびマイクロの相互作用には、 WinUI コントロールのようなアニメーションリソースを使用します。 WinUI コントロールを使用できない場合は、アプリのエントリポイントが存在する場所に基づいて、既存の OS の動作を模倣します。

例:ページの切り替え効果接続されたアニメーション、および アニメーションアイコン は、アプリにすばらしいと必要な動作を追加するために推奨される WinUI コントロールです。

An animated image that shows examples of page transitions, connected animations, and animated icons in the Windows UI.

画像をクリックすると、アニメーションが表示されます。

使用

アニメーションのプロパティ

Windows の動きは、高速、直接的、およびコンテキストに適しています。 タイミングとイージングの曲線は、一貫したエクスペリエンスを作成するために、アニメーションの目的に基づいて調整されます。

目的 定義 緩和 タイミング 用途
直接開始 高速– In 3次ベジエ (0、0、0、1) 167、250、333 位置、スケール、回転
既存の要素 ポイントポイント 3次ベジエ (0.55、0.55、0、1) 167、250、333ms 位置、スケール、回転
直接終了 高速-出力 3次ベジエ (0、0、0、1) 167ms 位置、スケール、回転 (常にフェードアウトと結合)
終了を緩やかに ソフトアウト 3次ベジエ (1, 0, 1, 1) 167ms Position、Scale
ベア・最小 フェード– In + Out Linear 83ms Opacity
強力な入口 エラスティック (3 キーフレーム) (次の3つの値) (次の3つの値) Position、Scale
キーフレーム1 3次ベジエ (0.85、0、0、1) 167ms
キーフレーム2 3次ベジエ (0.85、0、0.75、1) 167ms
キーフレーム3 3次ベジエ (0.85、0、0、1) 333ms

コントロール

このリリースの Windows では、 WinUIコントロールで特別な目的マイクロ相互作用が導入されています。 これらのコントロールをアプリに追加して、情報を整理しやすくします。また、アプリのユーザーがページからページ、レイヤーからレイヤー、および状態を相互作用の状態に移行できるようにします。

ページの切り替え: 同じ画面内のページ間の切り替え

ページの 切り替え効果 を使用して、ページ間をスムーズに切り替えたり、アニメーションの方向を構成してアプリのフローを尊重したりします。

ページの切り替えによって、ユーザーは受信および送信コンテンツに注目し、認知の負荷が軽減されます。

An animated image that shows navigation between several pages in the Windows Settings app. Top-level pages slide up from the bottom. When navigating between top-level and sub-pages, pages slide left and right.

画像をクリックすると、アニメーションが表示されます。

接続されたアニメーション: 同じページ内のレイヤーからレイヤーへの切り替え

接続されたアニメーションを使用して、コンテキストを保持しながら、ページまたは画面内の特定の情報を強調表示します。

接続されたアニメーションは、選択した要素にフォーカスを移し、フォーカスがある状態と非フォーカス状態をシームレスに切り替えます。

An animated image of the Microsoft Store app that shows an image in a page that animates to a zoomed-in view of the image.

画像をクリックすると、アニメーションが表示されます。

アニメーションアイコン: 満足させるを追加し、マイクロ相互作用を通じて情報を明らかにします。

アニメーション化された アイコン を使用して、 Lottie アニメーションを使用して、軽量、ベクターベース、アイコン、および図をモーションで実装します。

アニメーションアイコンは、特定のエントリポイントに注目し、状態から状態へのフィードバックを提供し、満足させるを相互作用に追加します。

An animated image that shows a grid of various examples of animated icon controls.

画像をクリックすると、アニメーションが表示されます。