Material Design ガイドにある「Meaningful Transitions」を紹介します。このエントリーは「Material Design Advent Calendar 2014」12月7日の記事です。
Material Design Advent Calendar 2014 - Adventar
Meaningful transitions
点Aから点Bへ移動が理解しづらい場合があります。モーションデザインを効果的に利用することはユーザの注意を導き、プロセスや操作手順など複数のステップに対してアピールすることができます。モーションデザインは、レイアウトの変更や要素の配置が変わる全体的な美しさはだけでなく、機能的な目的を果たす必要があります。
Visual continuity
状態の変化は滑らかでいて利用者に対し戸惑いを抱かせてはいけません。うまく設計された構成は色々なことができるが、操作するべきことを明確に理解できます。トランジションは、要素の3つのカテゴリがあります：
- 着信要素 - 新しく生成されたりするかどうかは、これらの項目は、導入または再確立する必要があります。
- 発信要素 - 新しいコンテキストに関連する要素は、適切な方法でシーンから除去されなければなりません。
- 共有要素 - 最初から持続する要素は、トランジションの末尾にし、それらは単一のアイコンのように微妙なことができます、もしくはギャラリー画像が画面に合わせ大きさに合わせて優勢になります。
Customize Activity Transitions
Considerations
アニメーションを設計するときは、次の点を考慮してください
- ユーザの注意が向けられるべきかについて考えてみてください。どのような要素や運動は、その目標をサポートしていますか？どのように、発信、着信べきであり、要素が強調または遷移を通じてデエンファシスも共有
- 画面を設計する際の遷移を検討し、色や持続素子を介して遷移状態間の視覚的な接続を作成する機会を見つける。
- 慎重にモーションを追加します。特定の要素を移動する遷移に明快さと喜びを追加する方法を検討してください。
Hierarchical timing
トランジションを構築する場合、要素の動きの順番とタイミングを検討する必要があります。コンテンツは目の動きにそってパスを作成することで、最も重要なもの伝える、動きが情報の階層をサポートしていることを確認できます。
しかし、最も重要なことは、最初に移動することで、少なくとも最後ではありません。遷移元のタイミングがスムーズに流れるようにし、とりとめのない感じは避けるべきです。
Consistent choreography
移行する要素は、画面の周りに移動すると、それらは協調的に振る舞うべきです。パス要素は一緒に動くすべての意味をなすべきであり、整然としてください。行き当たりばったりの動きが邪魔になります。
よく振り付けられたアプリケーションは教えやすい操作を提供しています。移行する要素が調整されている場合には、アプリの利用者の理解が早いです。アプリを取得したら、アニメーションによる混乱感じることはありません。
Best Practices
- 運動が軸に拘束されたり、他の構成要素と協調して特定のポイントから離れてるか向かって移動された場合を除き線形空間のパスを避けます。
- 要素が移動する方向が遷移渡って粘着性であることを確認してください。相反する動きと重複パスを避けてください。
- 奥行きストーリーを考えてみます。何が何のために下に移動するのはなぜか？ 全ての可動要素が画面上にそのパスをトレースしている場合、それは美しく整理さに見えるか？それが見える場所を明確に把握を作成していますか？
- 着信と発信の要素のための一貫性のある動きを介して支持空間的関係。
