UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions

デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。

ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。

Meaningful Transitions

アニメーションは、目的ごとに6つのカテゴリに分けられています。
下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。

• Orientation
• Spatial Extension
• Awaking Controls
• Highlight
• Feedback
• Feedforward

Orientation

オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、スライドなど、方向を伴うアニメーションです。このエフェクトは現在の場所と情報の構造を印象づけることができます。

Slide

スライドして、別のオブジェクトを表示します。

Popup

ポップアップで別のオブジェクトを開きます。

Fan of Stack

複数のオブジェクトを重ねたり、並べてたりします。

Spatial Extension

Spatial Extension（空間拡張）はバーチャルなスペースを拡張することで、ユーザインターフェイスの複雑さを軽減するものです。アコーディオン、ズームなど、ユーザーに重要な要素にフォーカスを合わせるために一定の時間スペースを開いたり閉じたりし、情報を表示します。これは特に、より小さいスクリーンに有効なアニメーションです。

Accordion

複数のアイテムを伸び縮みさせるアコーディオン。

Flip

パネルの表と裏をひっくり返すフリップ。

Zoom

複数のアイテムの一つを拡大表示するズーム。

Awaking Controls

Awaking Controlsはユーザーの注意を制御するもので、文脈上のコントロールにフォーカスを合わせることを可能にします。代表的なのは、スマフォのスワイプすると削除ボタンが表示されるアニメーションです。これは必要とされる時だけ現れて、必要とされない時にはすぐに姿を消します。

Swipe to Delete

スマフォのスワイプすると表示される削除ボタン。

Mode Switch

これもスマフォ、ボタンをタップすると編集ボタンが表示。

Spring Refresh

コンテンツのリフレッシュやアップデート時に下にスワイプ。

Highlight

ハイライトは、アニメーションによってユーザーの注意を引かせ、ユーザインターフェイスのステータスの変更を明確にします。また、特定のオブジェクトにユーザーの注意を向けさせます。これは単にカラーや濃淡だけでなく、サイズや形状を変更させるパターンもあります。

Scale to Highlight

大きさを変更して、ハイライトさせます。

Color to Highlight

カラーを変更して、ハイライトさせます。

Fade to Highlight

フェードを使って、ハイライトさせます。

Feedback

フィードバックはユーザーのインタラクションの結果が何であったかを包括的に表示します。モーダルウインドウの閉じる、リロード時のプログレスバーやリフレッシュインジケーターなどが代表的なアニメーションです。ユーザーが要求したプロセスに対して、実行中・成功・不成功などを説明します。

Position Accepted

移動先の位置を明確にします。

Heal

短冊状のパネルのアイテムを移動するとどうなるか明示します。

Close

閉じるとどうなるかを明示します。

Feedforward

フィードフォワードはインタラクションが可能であることをユーザーに伝え、そのアクションの結果を準備させるために使われます。アクションの結果を思い描くことで、そのイベントが予測可能になり、安心してユーザーはアクションを実行できます。

Explaining Direction

右方向にスワイプできることを知らせるアニメーション、iPhoneなどのロック画面。

Affordance

コンテンツが終わりですよと知らせるアニメーション。

Hidden Feature

アニメーションは組み合わせることも可能で、Spring Refreshと併用すると更にユーザーに伝わりやすくなります。