【翻訳してみた】マテリアルデザイン - コレオグラフィ
前置き
モーションデザインに関する日本語文献の不足を憂い、自身の知見の為にも翻訳をしてみることにしました。こちらはGoogleが発表したUIガイドラインのマテリアルデザインからモーションデザインについての翻訳になります。
引用元 Google - Material Design
Choreography - Material Design
※動画像データもこちらから引用させていただいております。
しっかりとした情報が欲しい方はコチラをご覧ください。
(※スマホから元サイトに飛ぶとページが上手く表示されないようです。元サイトはPCから見ることをオススメ致します。)
コレオグラフィ
コレオグラフィとは、ユーザーの注目をUIに持続させる動きの並び方のことです。
シーケンス
- アニメーションシーケンス
アニメーションシーケンスはアニメーションが表示位置や動きの始まりや終わりなどの順番を指します。
適切なシーケンス設定は、要素が追加されたり取り除かれたりしても容易に画面の変化を理解させ、次の操作のために何が重要なのかを示すことが出来ます。
- シンプルなシーケンス
シンプルなシーケンスは全ての要素を一致させてアニメーションさせます。
このボトムシートはオプションを表示するために標準的なイージングを使ってスライドさせています。色と位置を含む全てのアニメーションのディティールの開始点と終点を同期させています。
- 複雑なシーケンス
連絡先リストから詳細を表示するような複雑なトランジションでは、より凝ったシーケンスが必要です。複雑なシーケンスは、要素が最も速く動く地点でトランジションを2つのパートに分けることで実装することが出来ます。それぞれの要素を入ってくる要素、出ていく要素、持続的な要素、静止する要素の4つに分類します。
・最初のトランジション : 出ていく要素を消します。
・2つめのトランジション : 入ってくる要素を表します。
・全体のトランジション : 持続的な要素を変化させます。
※つまりは最も加速している地点に向かい要素が消えていき、新しい要素がその地点から最高速度で表れ、徐々に減速していきます。
標準的なカーブのピーク速度の部分はデュレーション全体の30%になります。出ていく要素は90ms(0.09秒)で消え、入ってくる要素は210ms(0.21秒)で表れます。
・Incoming : 入ってくる要素のイージング
・Outgoing : 出ていく要素のイージング
・Presistent : 持続的な要素のイージング
変形
- シンプルな変形
シンプルな変形はある状態から次の状態へと変化する全てのプロパティをトゥイーンさせます。
※トゥイーン : モーフィングのような滑らかな変形
このシンプルな変形は左から右へ移動し色を白から紫に変えてスイッチコンポーネントの位置と色のトゥイーンを表しています。
- 複雑な変形
複雑なレイアウトの変更は、あるレイアウトから次のレイアウトへのスムーズなトランジションを作成するために共有された変化を使用します。各要素に独立したアニメーションを使うのではなく、要素をグループ化して1つのユニットとして変化させます。これにより注意を奪うような重なり合った複数の変化を避けることが出来ます。
グループ化された要素はフェードスルートランジションによって変化します。グループ化された要素が消え、最終的なルックが表れます。
良い例
独立して動く要素の数を最小限にします。個別の要素がフェードインまたはフェードアウトする間にグループの変化が連続性を保つように注意します。
悪い例
多くの要素を互いにアニメーションさせないでください。個々の動きは注意を競合させてしまい、見る位置を分散させてしまいます。
悪い例
UIを急に飛ばしたり移動させたりしないでください。焦点を合わせ続けることが難しくなってしまいます。
- アニメーションのあるコンテナのトランジション
トランジション中に、要素グループの境目(カードやディバイダー)に含まれるとき、コンテナは変形します。内側のグループはアスペクト比を維持しながらコンテナの幅に合わせてスケールします。中のグループはコンテナの下端で切り取ることが出来ます。
連続性がコンテナと連携したグループのアニメーションによって作り出されています。グループはコンテナの幅に合わせてスケールします。展開されても下端以外の要素は切り取られません。
- アニメーションのないコンテナのトランジション
要素のグループが明確な境界に含まれていない場合、またはコンテナがアニメーションしない場合には、共有された変化によってスムーズなトランジションを作り出すことが出来ます。例えば、フローティンアクションボタン内にあるペアのアイコンを回転させ、連続性を作り出すことが出来ます。
アイコンのトランジションに時計回りの回転を使っています。
入ってくる要素と出ていく要素は垂直のステッパーと連携してグループで上下に移動します。
ステッパー : 手続きの順番を表す、UIの要素。
焦点要素の使い方
トランジションには階層にとって重要な、持続的な焦点要素を含めることが出来ます。アニメーションコンテナのようにシームレスに見た目を変化させることで、焦点要素の持続性を高めることが出来ます。
ヘッダー画像は焦点要素になり、折りたたまれたレイアウトから展開するレイアウトまで、表示されたままになります。
- 焦点要素の衝突
いくつかのトランジションは、他ー要素の経路に焦点要素を配置します。このような場合は焦点要素の使用を避け通常のトランジションの適用し、要素を消してから再び表れるようにします。
注意
焦点要素が動いている他の要素に重なると無秩序なトランジションを作り出してしまいます。
良い例
重なり合う動きを単純化するために、焦点要素をフェードスルートランジションで置き換えることを検討してください。
- 焦点要素のグループ化
トランジションに統一して動くことが出来ない焦点要素と動的なコンテナの両方が含まれているとき、トランジションの要素をグループにして分けます。
例えば、カードのトランジションは以下の動きをグループ化できます。
・焦点要素を含む折り畳みのレイアウト
・コンテナ(カードなど)を含む展開するレイアウト
良い例
要素をグループ化させ、コンテナ内で出来るだけ移動しないようにします。折りたたまれたレイアウトは焦点要素(サムネイル画像)にグループ化されており、展開するレイアウトはコンテナ(カード)にグループ化されています。
悪い例
コンテナの内部で移動するような要素のグループ化は避けましょう。トランジション中に要素がカードにグループ化されていません。カードの下端で展開するレイアウトよりも4辺全てで展開するレイアウトをカードに使用しましょう。
以上が3章になります。ご拝読有難うございました。
この記事が気に入ったらサポートをしてみませんか？