Animation - Meaningful Transitions
本ドキュメントは学習のため、Material Design Specificationを独自に翻訳したものです。本家ではないことが分かるように白黒反転をしています。

意味のあるトランジション

いくつかのアプリケーションにおいて、どこを注視すべきなのか分からなかったり、ある要素が地点AからBに移動する場合にそれがどうなるのか理解しづらい場合があります。 注意深く設計されたモーションデザインでは、あるモーション内における複数のステップや手順において、ユーザーがどこを見るべきかが明らかにされています。 レイアウトが変わったり要素を再構成する場合にユーザーを混乱させてはいけません。一連のトランジションを通して素晴らしい体験をユーザーに提供すべきです。 モーションデザインはただ美しいだけではなく機能性も提供するべきです。

見た目の連続性

ある状態から別の状態に変化する動きはスムーズでさりげなく、ユーザーにとって明快であるべきです。 良くデザインされたトランジションは分かりやすく変化し、ユーザーがどこに注目すべきなのか明らかです。 トランジションには3つの要素が存在します。
  • 追加される要素:新しく要素が生成されたり画面内に要素が入ってくる場合、それらの要素は取込まれたり再構成される必要があります。
  • 削除される要素:不要になった要素は、適切な方法で画面から削除されなければいけません。
  • 共有される要素:トランジションの最初から最後まで存在する要素です。これらは小さなアイコンのようにひっそりとしているか、画面全体まで広がるギャラリーイメージのようにユーザーの注目を独占します。

考慮すべき点

アニメーションをデザインする場合、以下のことを考慮しましょう。
  • ユーザーの注意をどのように扱うかを考えましょう。どの要素や動きがユーザーの注意を惹きますか。 トランジションの中で追加/削除/共有される要素をどのように強調する(または強調しない)べきでしょうか。
  • 画面デザインを行うときにトランジションも考慮しましょう。 また色を用いた状態の変化とアニメーション中に存在し続ける要素との間で、見た目のつながりをどのように作ることができるかを考慮しましょう。
  • モーションを追加する場合には熟考が必要です。トランジションにおいてある要素が動く場合に、その動きがなぜ明快さや快適さを与えるのかを考慮しましょう。

Example

Do.
適切にレイヤーが重なっています。 一般的にペーパー要素が挿入される場合にはスライドインを用いますが、インク要素の場合にはスライドインではなくフェードインを用います。 画面全体でのクロスフェード(フェードインとフェードアウトを同時に行うこと)は望まれるものではなく、それよりもカットインが好まれます。
Don't.
突然表示することは避けるべきです。急な表示は不快を与え、トランジション中に何が起きているのかを分かりづらくします。

タイミングの階層構造

トランジションを作成する時には要素の動く順序とタイミングの2点を考慮しましょう。 モーションは階層構造の概念を持つべきです。 つまりモーションの階層構造を用いてユーザーの視点を導くことで、どのコンテンツが最も重要なのかをユーザーに伝えます。

しかし、最も重要な要素を最初に動かし最も優先度の低い要素を最後に動かすという具合に単純ではありません。 要素を動かすタイミングはスムーズに、そしてユーザーを不快にしないように心がけるべきです。

Example

Do.
ユーザーの注意をコントロールするために、オーバーラップを用いましょう。
Don't.
全てを同時に動かしてしまうと、どの要素が重要なのかを示すことができません。 もし全ての要素が等しく重要なのであれば、それらを1つのグループとして扱い、それに大きなモーションを与えることを考えましょう。

矛盾のない飾り付け

画面上で複数の要素が動く場合に、それらはお互いに協調して振る舞う必要があります。 各要素の動く動線にはそれぞれ意味があり、それらの動きは順序立てて行われるべきです。 でたらめなモーションはユーザーの気を散らしてしまいます。 良く考えられて飾り付けされているアプリケーションは、ユーザーにその意図を伝えることができます。 要素の動きに協調性があれば、アプリケーションをユーザーはより良く理解することができ、アニメーションのために混乱することはありません。

ベストプラクティス

  • 直線的な動線は避けましょう。ただし軸に沿って動く場合や、他の要素と一緒にある地点から動く(またはある地点へ移動する)場合はその限りではありません。
  • トランジションにおいて、要素の動く方向にまとまりがあることを確認しましょう。矛盾する動きや動線が重なり合うことは避けましょう。
  • 要素の重なり順を考慮しましょう。どの要素が下で、それはなぜでしょうか。
  • もしすべての要素がそれぞれの動線に沿って動く場合、それは美しく系統立てられているかを確認しましょう。それはどこを見るべきかを明確に示していますか。
  • 入ってくる要素と出て行く要素の動きに一貫性があるように、空間的な関係性をサポートしましょう。

Do.
協調性があり順序立られたモーションを用いて、ユーザーの注意をコントロールしましょう。
Don't.
動く順や動く方向に一貫性のないアニメーションによって、ユーザーを混乱させてはいけません。