UIアニメーションは装飾ではなく「機能」である

Source

Pasquale D’Silva アニメーター&ソフトウェア開発者
http://pasquale.cool/

アニメーションを用いたインターフェースは多々あるが、追求されるべきは「楽しさ」や「カッコよさ」ではなく、「機能」である。インターフェースを時間軸の点から考えたアニメーションとして捉えることによって、より伝えられる情報量を増やすことができるのだ。

トランジショナルインターフェース

デザイナーは細部にこだわるのが好きである。ボタン、フォームスタイル、フォントのすみずみまで気を配り、あらゆるアイコンを合理的に整えるべく膨大な時間をかける。

しかし、静的なカンプの次の段階で、全てをどのように統合するかは別の問題だ。ボタンをタップした時、フォームがただ現れるのだろうか? アイテムを削除しようとスワイプしたら、それは単に消えてゆくのか? それではぎこちなく、不自然である。しかし現実の世界では、状態がガタガタと差し代わるのがせいぜいなのだ。エラーだと思ってしまう人もいるだろう。

なるほど、それで「スライドインにすること」と書かれていたりするのか。

どのように? 速く? はね返りの動作はつけるのか? クッションインは? 静的デザインでは状態と状態の間のコンテキストが分からない。 

アニメーションやかわいらしいインタラクションに言及する際、「楽しさ」を主張するデザイナーがいる。彼らにとって、それらの動作はクールでカッコイイのだろう。でも知っているだろうか、アニメーションは機能でもあるのだ。ただの装飾ではない。

アニメーションは、見過ごしていた次元に大きく影響する。時間だ。スペースをつなぎ合わせる目に見えない布である。数学オタクでなくとも理解できることだ。

いくつかシンプルなアイデアを見てみよう。

イージング/クッショニング

伝統的なアニメーションでは、あるまとまりがA地点からB地点へどう動くかを決めるのはブレイクダウンである。ブレイクダウンは動きに偏りを付与し、残りのフレームがはまっていく位置を決める。25の補間フレームがあるとして、13番目のフレーム(ほぼ中間点)の位置を変えると次のようになる。

どうだろう、これでクッショニング/イージングについて知ることができた。コンピュータはたいてい気が利かず、仕事の遅い配線でしかなく、直線的にギャップを埋めることだけが得意だ。優れたアニメーターやモーションデザイナーは、この動きをコントロールすべく、コンピュータと闘うことに日々大半の時間を費やしている。

アニメーションはタイミングが全てである。様々なスペーシングを駆使すれば、様々な効果が得られる。しかし今回はここまでにしておく。本稿はアニメーションチュートリアルではないし、タイミングとスペーシングの言語について考えてもらうのが重要だからだ。

インターフェースのコンテキストにおけるアニメーションの概念

先にも述べたように、アニメーションはコンテキストを提供する助けになる。情報がどう流れているのかを脳に理解させてくれる。

リストにアイテムを挿入する

何かの稼働中のリストがあり、同じく稼働中のデータを投入したいと考えたとしよう。コンピュータに任せると、このようになる。


これはひどい、大雑把だ…。

数フレームのアニメーションさえあれば、スムーズな動きが作れる。あなたの脳に、このリストに何が起こっているのか、手がかりを与えたらどうだろうか。



新規アイテムを追加するには、リストがそのアイテムのためのスペースを空け、それから新規アイテムがそのスペースを埋める必要がある。動きがはるかに滑らかだ。イーズインとイーズアウトで変化が和らげられている。スペースに文脈に即したフックがあるだけで、まるで現実に何かの束に別のものを加える様子そのままの、より自然な動きに感じられるのだ。

他にもある。

リストアイテムのドリルダウン

あるアイテムへとスライドしていく動きの典型的な初期値パターンだ。一般的によく使われているが、空間全体の把握がしにくい。


スライドする方向性は、ビューの直線的な連なりから外れた場合、ほとんど有用な手がかりではない。

アイテムをコンテナにし、インラインに詳細やサブの情報を格納してクリックで現れるようにしてはどうだろうか。


ドリルダウンした先で、リストアイテムにフルに焦点を当てることが目的なら、それ以外のアイテムを同じビューの中で隠してしまうこともできる。


リスト>全アイテム>ビュー、というような導線ではすぐに迷ってしまう。

インラインを維持する利点は、ユーザにどれだけ下層のサブビューにいるのかを説明しなくてよいことである。ユーザにとって現在地が一目瞭然なので、階層ナビゲーションの表示を破棄できるのある。

もちろん、このアイデアがあらゆるケースに適用できるわけではない。しかし、その視点があれば、はるかにエレガントに流れをつなぐ方法を選べるだろう。

トランジショナルインターフェースの実装例

Thinglistは、Elepathのプロダクトで、私がKyle Bragger氏と一緒に開発している。それにはいくつか非常に面白いトランジショナルインターフェースが織り込まれている。上の例は新しいフィルタリング機能を提示した際のデモだ。

チェックすべきトランジショナルインターフェースの実例

多くは挙げられないが、一方には、美しいが極度に静的なインターフェースがたくさんあり、その対極では、技巧をこらしたアニメーションで装飾したインターフェースがある。

今、私が注目に値すると思うものは3つだ。

  • Clear: 非常に明瞭な、ジェスチャー駆動のアニメーション
  • Willcall: 一貫して動的なリズムを持っている。状態間がガタガタしない。楽しい遊び心がある。
  • Facebook.app: やや一貫性に欠けるが、ドローイングフォーカスの処理に見るべきものがある。具体的には、写真をフルサイズで表示する際にライトボックスのようなビューにドリルダウンする、コメント入力パネルがリスト表示でポップアップする、など。

インターフェースを時間軸の点から考えようとしない人がまだまだ多いのは、理解に苦しむ。モーションによって膨大な情報を与えられるというのに。ほとんどのデザイナーにとって、プロトタイプ作成ツールは複雑過ぎるのだろうか。

この記事は元々、Elepathスタッフに、自分のモーションへの執着を説明しようとして書いた社内資料だった。結局、私はアニメーターなのである。


この記事のトーク版動画(50分)


コメントは是非twitter(@pasql)まで!