カテゴリ別に見る、スマフォのアプリに使用されている気持ちのいいアニメーションのまとめ

気持ちのいいアニメーションは、スマフォのアプリには欠かせないと言ってもよいでしょう。
アニメーションはインターフェイスを設計する上で非常に重要で、4つのカテゴリに分けてユーザエクスペリエンスに欠かせないアニメーションを紹介します。

サイトのキャプチャ

Great Animations Make Great Apps

下記は各ポイントを意訳したものです。

1. 知らせるアニメーション

最も単純なアニメーションの使い方で、ユーザーに知らせることを目的としたアニメーションです。これは多くのアプリケーションで使用されています。

サイトのキャプチャ

Tweetbot

左側からパネルがアニメーションでスライドし、より深いコンテンツを提供します。

サイトのキャプチャ

Facebook

左側からパネルがアニメーションでスライドし、隠されていた機能が表示されます。

サイトのキャプチャ

Mail

ごみ箱のアニメーションも一般的でしょう。
メールを削除する際、ごみ箱にアニメーションで吸い込まれます。このアニメーションをじっくり見ると、削除されるメールは折りたたまれ、ごみ箱に入ると少しだけ振動します。

2. 可能であることを伝えるアニメーション

アニメーションが伝えることは、単に知らせることだけではありません。多くのスペースを利用して、隠された機能を見つけ出し、現在のコンテクストで可能ではないタスクを行なえるようにします。

サイトのキャプチャ

Sermo

キーボードの利用が可能であることを伝えるために、アニメーションを使用します。

サイトのキャプチャ

Apple Folders

ホームスクリーンに戻るためにフォルダ以外をタップすることは直感的なジェスチャーです。

サイトのキャプチャ

Maps

マップのピンは地図上にうつことが可能で、ピンにその場所の情報が表示されるインタラクション型のオブジェクトです。

3. あなたを歓迎するアニメーション

アプリを起動するランチャーのアニメーションはおろそかにされがちですが、全てのアプリケーションにとって重要なものです。それはユーザーがあなたのアプリケーションを使う時の最初のインタラクションとなります。

サイトのキャプチャ

SolidWorks

ローディングの時間はユーザーにとって苦痛なものです。SolidWorksではアプリケーションを構築している間、歓迎するだけでなく、アプリケーションのあまり目立たないけど便利な機能をハイライトさせる面白いアニメーションを実装しています。

4. 楽しませるアニメーション

最後のカテゴリですが、決して軽く扱ってはいけないアニメーションがユーザーを楽しませ喜ばせるアニメーションです。これは歓迎するアニメーションほど明確なものではありません。

サイトのキャプチャ

RunKeeper

繊細なものですが、アプリの中でインフォメーションをリフレッシュした時にスピナーの代わりにスクリーンの上部でランナーが走るアニメーションをします。

サイトのキャプチャ

Just Landed

中央のタービンがデータのローディング中にアニメーションします。

top of page

©2017 coliss