いくつかのアプリケーションにおいて、どこを注視すべきなのか分からなかったり、ある要素が地点AからBに移動する場合にそれがどうなるのか理解しづらい場合があります。
注意深く設計されたモーションデザインでは、あるモーション内における複数のステップや手順において、ユーザーがどこを見るべきかが明らかにされています。
レイアウトが変わったり要素を再構成する場合にユーザーを混乱させてはいけません。一連のトランジションを通して素晴らしい体験をユーザーに提供すべきです。
モーションデザインはただ美しいだけではなく機能性も提供するべきです。
ある状態から別の状態に変化する動きはスムーズでさりげなく、ユーザーにとって明快であるべきです。
良くデザインされたトランジションは分かりやすく変化し、ユーザーがどこに注目すべきなのか明らかです。
トランジションには3つの要素が存在します。
-
追加される要素：新しく要素が生成されたり画面内に要素が入ってくる場合、それらの要素は取込まれたり再構成される必要があります。
-
削除される要素：不要になった要素は、適切な方法で画面から削除されなければいけません。
-
共有される要素：トランジションの最初から最後まで存在する要素です。これらは小さなアイコンのようにひっそりとしているか、画面全体まで広がるギャラリーイメージのようにユーザーの注目を独占します。
アニメーションをデザインする場合、以下のことを考慮しましょう。
-
ユーザーの注意をどのように扱うかを考えましょう。どの要素や動きがユーザーの注意を惹きますか。
トランジションの中で追加/削除/共有される要素をどのように強調する（または強調しない）べきでしょうか。
-
画面デザインを行うときにトランジションも考慮しましょう。
また色を用いた状態の変化とアニメーション中に存在し続ける要素との間で、見た目のつながりをどのように作ることができるかを考慮しましょう。
-
モーションを追加する場合には熟考が必要です。トランジションにおいてある要素が動く場合に、その動きがなぜ明快さや快適さを与えるのかを考慮しましょう。
トランジションを作成する時には要素の動く順序とタイミングの2点を考慮しましょう。
モーションは階層構造の概念を持つべきです。
つまりモーションの階層構造を用いてユーザーの視点を導くことで、どのコンテンツが最も重要なのかをユーザーに伝えます。
しかし、最も重要な要素を最初に動かし最も優先度の低い要素を最後に動かすという具合に単純ではありません。
要素を動かすタイミングはスムーズに、そしてユーザーを不快にしないように心がけるべきです。
画面上で複数の要素が動く場合に、それらはお互いに協調して振る舞う必要があります。
各要素の動く動線にはそれぞれ意味があり、それらの動きは順序立てて行われるべきです。
でたらめなモーションはユーザーの気を散らしてしまいます。
良く考えられて飾り付けされているアプリケーションは、ユーザーにその意図を伝えることができます。
要素の動きに協調性があれば、アプリケーションをユーザーはより良く理解することができ、アニメーションのために混乱することはありません。