Material Design 3 要点まとめ #12 Motion - Transitions
Material Design 3 ガイドラインの要点をまとめたものです。
第11・12回はMotionの章。ちょっと長いので記事を2つに分けます。今回はTransitionsの項について。代表的なトランジションパターンの性質と、それぞれの適切なユースケースについて紹介されています。ところどころでAndroidとiOSのデフォルトについて言及されているのが印象的。
Transition patterns
・トランジションとは
・コンテナの変形
・「進む」と「戻る」
・横方向
・トップレベル
・出現と消失
・スケルトンローダー
トランジションとは
トランジションとは、個々の要素や全画面表示をつなぐ短いアニメーションのこと。
トランジションは、ユーザーがアプリの動作を理解し、優れたUXを実現するための基本要素。
以下の6つが一般的なトランジションパターン。
コンテナの変形
「進む」と「戻る」
横方向
トップレベル
出現と消失
スケルトンローダー
コンテナの変形
カードが詳細ページに展開するように、要素をシームレスに変形させて詳細を表示するために使用する。
永続要素（トランジション前後でも変わらず表示される要素）の使用により、トランジションの開始と終了をシームレスに接続する。
永続要素にはコンテナやメイン画像が選ばれることが多い。
すべてのトランジションパターンの中で、このパターンが最もトランジション前後の要素の関係を強める。
「進む」と「戻る」
受信トレイからメッセージスレッドに移動するような、連続した階層の画面間を移動するために使用される。
水平方向にスライドする動作は、画面間の前進・後退を表す。
AndroidとiOSでは、デフォルトのスタイルが異なる。
Androidでは、画面がスライドする際にフェードを使用する。端末の幅いっぱいに画面をスライドさせる必要がないため、動作量が軽減される。
iOSはパララックスを使用。背景が前景よりもゆっくりとスライドする。これも全体の動きの量を減らす効果がある。
横方向
コンテンツライブラリのタブ間をスワイプするように、同じ階層にあるコンテンツ間を移動するために使用される。
「進む」と「戻る」のパターンに似たスライド動作だが、フェードやパララックスは使わない。
スライド対象の要素同士は一体のグループとしてスライドすることで、強い同調関係を作り出している。
これは、要素をスワイプするジェスチャーに反応できることも示唆している。
トップレベル
ナビゲーションバーで目的地をタップするように、アプリのトップレベルの目的地間を移動するために使用。
退場する画面が素早くフェードアウトし、その後、入場する画面がフェードインする。
トップレベルの遷移先のコンテンツは必ずしも関連性がないため、このモーションでは意図的に画面間の強い関連性を持たせない。
出現と消失
コンポーネントを画面上に登場させたり、画面から消失させたりするのに使用する。
画面内で出現/消失するケースと、画面の境界を超えるケースが存在し、それぞれAndroidとiOSで表現が異なる。
画面内
Android：X軸またはY軸方向に伸縮しながら出現/消失する。スケールやz軸の変化は高度（Elevation）変化を意味するため避けている。
伸縮する方向は画面上の位置によって決まる。出現時に、デバイスの端から離れる方向に伸長する。
iOS：出現時はスケール変化。消失時はフェードアウト。
画面の境界を超える
Android：X軸やY軸に沿って伸縮しながら移動する。
iOS：形状を変えずに移動する。
コンポーネントは、スクロールジェスチャーに合わせて、画面の枠を越えて出現/消失できる。
スケルトンローダー
一時的なロード状態から完全にロードされたUIにトランジションするために使用。
コンテンツが読み込まれたときに、どこに表示されるかを示すUIの抽象化表現。
他のトランジションと組み合わせて使用することで、コンテンツが読み込まれるまでの待ち時間を短縮し、レイアウトを安定させることができる。
スケルトンローダーには、不確定な進行状況を示す微妙な脈動アニメーションがある。
Applying transitions
・トランジション適用のポイント
・コンテナの変形
・「進む」と「戻る」
・横方向
・トップレベル
・出現と消失
トランジション適用のポイント
アクセシブルな設定に準ずる：ほとんどのプラットフォームでは、動きに敏感なユーザーのために、アニメーションを減らす設定がある。この設定に対応できるように実装する。
一貫性：適切なトランジションを一貫して適用する。
ジャンプカットは最小限に：ある画面から次の画面へ瞬時にトランジションすると、ユーザーが前後の画面の関係性を確認するための手がかりがありません。一方、純粋な効率性が最優先されるアプリの場合は、ジャンプカットの方が望ましい場合もあります。
一貫した空間モデル：アプリ全体で一貫した空間モデルに沿ったトランジションを用いることで、UIの物理的な位置関係を理解しやすくなる。
動きの方向の統一：一つのトランジションの変化の方向は一種類に統一されている必要がある。いくつかの永続要素をそれぞれ別々の方向に動かさない。
シンプル：トランジションを複雑に装飾しない。トランジションは頻繁に発生し、画面の大部分を占める。ユーザーがタスクを達成するのを助けることが主な目的である。
以下はトランジションパターンごとのユースケース。
コンテナの変形
要素間の関係を作り出すのに効果的。
スタイルの面でも最もドラマチックなパターン
例えば以下のようなユースケースに適している。
主役コンテンツが登場する場面で、表現力を高めたい場合。
浅い階層で、要素を拡張して詳細を確認した後、折りたたむ場合。
要素間のシームレスな接続を作成する。
階層の深い場所ではコンテナ変形は使わない。
「進む」と「戻る」
AndroidもiOSも、「進む」と「戻る」のナビゲーションには、プラットフォームのデフォルトを使用する。
階層化された画面の移動に使用する。
横方向
同じセットに含まれる同じ種類のコンテンツを閲覧するために使用する。
階層化された画面の移動には横方向トランジションは使用しない。代わりに「進む」と「戻る」トランジションを使用する。
トップレベル
アプリの最上位階層で使用。
ナビゲーションバー、ナビゲーションレール、ナビゲーションドロワーに適用される。
出現と消失
画面のメインUIのコンテキストでコンポーネントを紹介するために使用される。
ダイアログやボトムシートなど。
階層化された画面の移動には使用しない。
MDとしてのガイドラインを提示するだけでなく、ところどころでAndroidとiOSのネイティブアプリに実装する際の使い分けについて触れられているところが印象的でした。MD内での統一とOS内での統一の融和に一歩踏み込んだ感があって面白いです。