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

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

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

サイトのキャプチャ

Meaningful Transitions

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

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と併用すると更にユーザーに伝わりやすくなります。

top of page

©2017 coliss