UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions
Post on:2013年5月30日
デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。
ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053001-01.png)
アニメーションは、目的ごとに6つのカテゴリに分けられています。
下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。
Orientation
オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、スライドなど、方向を伴うアニメーションです。このエフェクトは現在の場所と情報の構造を印象づけることができます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-01.png)
Slide
スライドして、別のオブジェクトを表示します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-02.png)
Popup
ポップアップで別のオブジェクトを開きます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-03.png)
Fan of Stack
複数のオブジェクトを重ねたり、並べてたりします。
Spatial Extension
Spatial Extension(空間拡張)はバーチャルなスペースを拡張することで、ユーザインターフェイスの複雑さを軽減するものです。アコーディオン、ズームなど、ユーザーに重要な要素にフォーカスを合わせるために一定の時間スペースを開いたり閉じたりし、情報を表示します。これは特に、より小さいスクリーンに有効なアニメーションです。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-04.png)
Accordion
複数のアイテムを伸び縮みさせるアコーディオン。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-05.png)
Flip
パネルの表と裏をひっくり返すフリップ。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-06.png)
Zoom
複数のアイテムの一つを拡大表示するズーム。
Awaking Controls
Awaking Controlsはユーザーの注意を制御するもので、文脈上のコントロールにフォーカスを合わせることを可能にします。代表的なのは、スマフォのスワイプすると削除ボタンが表示されるアニメーションです。これは必要とされる時だけ現れて、必要とされない時にはすぐに姿を消します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-07.png)
Swipe to Delete
スマフォのスワイプすると表示される削除ボタン。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-08.png)
Mode Switch
これもスマフォ、ボタンをタップすると編集ボタンが表示。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-09.png)
Spring Refresh
コンテンツのリフレッシュやアップデート時に下にスワイプ。
Highlight
ハイライトは、アニメーションによってユーザーの注意を引かせ、ユーザインターフェイスのステータスの変更を明確にします。また、特定のオブジェクトにユーザーの注意を向けさせます。これは単にカラーや濃淡だけでなく、サイズや形状を変更させるパターンもあります。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-10.png)
Scale to Highlight
大きさを変更して、ハイライトさせます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-11.png)
Color to Highlight
カラーを変更して、ハイライトさせます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-12.png)
Fade to Highlight
フェードを使って、ハイライトさせます。
Feedback
フィードバックはユーザーのインタラクションの結果が何であったかを包括的に表示します。モーダルウインドウの閉じる、リロード時のプログレスバーやリフレッシュインジケーターなどが代表的なアニメーションです。ユーザーが要求したプロセスに対して、実行中・成功・不成功などを説明します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-13.png)
Position Accepted
移動先の位置を明確にします。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-14.png)
Heal
短冊状のパネルのアイテムを移動するとどうなるか明示します。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-15.png)
Close
閉じるとどうなるかを明示します。
Feedforward
フィードフォワードはインタラクションが可能であることをユーザーに伝え、そのアクションの結果を準備させるために使われます。アクションの結果を思い描くことで、そのイベントが予測可能になり、安心してユーザーはアクションを実行できます。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-16.png)
Explaining Direction
右方向にスワイプできることを知らせるアニメーション、iPhoneなどのロック画面。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-17.png)
Affordance
コンテンツが終わりですよと知らせるアニメーション。
![サイトのキャプチャ](/wp-content/uploads-201301/2013053002-18.png)
Hidden Feature
アニメーションは組み合わせることも可能で、Spring Refreshと併用すると更にユーザーに伝わりやすくなります。
sponsors