UIアニメーションの原理:ディズニーは死んでいます

写真は絵画の死であると予測されていた(初期のダゲレオタイプ)

(UIアニメーションに関する私の記事をメールで受け取り、ニュースレターに追加したい場合は、ここをクリックしてください。)

新しい媒体

ポール・ドラロッシュが1839年頃にダゲレオタイプに出会ったとき、彼は有名に「今日から絵は死んだ!」と宣言した。

その時まで、外界を視覚的に文書化する唯一の方法は、手で表面に適用された媒体を使用することでした。何世紀にもわたるさまざまな分野の職人技が、さまざまなメディアでの数多くの原則と技術の発見をもたらしました。文化を超えて、時代が進むにつれて、視覚表現が「見えるはず」のスタイルと視覚言語が進化しました-オリジナルのデザインパターン。

初期の写真家は、その画像をその日の人気のある絵画に似せようとして、しばしば照明と印刷技術の組み合わせを使用して画像を柔らかくし、絵画のような外観を作成しました。写真の媒体が何をすることができるかについての彼らの理解は、絵画の世界の理解によって密接にリンクされ、影響を受け、制限されました。

アンセル・アダムス、イモジェン・カニンガム、エドワード・ウェストンなどの「グループf / 64」の写真家が、写真を絵画とは別に独自の視覚言語とする視覚言語に大きく浸透するまでに、ほぼ100年かかりました。言語と原則、そしてそうすることで、彼らは写真の領域に革命をもたらしました。

エドワード・ウェストン、イモジェン・カニンガム、アンセル・アダムス

ディズニーは別の問題を解決しました

幸いなことに、UIアニメーションにこのような革命が起きています。

1981年、Ollie JohnstonとFrank ThomasはDisney Animation:the Illusion of Lifeをリリースし、現在「12のアニメーションの基本原則」として知られているものを紹介しました。これらの原則は、有機体の場合に発生する「リアルなモーション」を作成する方法の問題を解決しました物理的な空間で動き、反応します(感情のタイミングやキャラクターの魅力なども原則に含まれます)。

ユーザーエクスペリエンスの一部としてのUIアニメーションは、わずか20年前であり、まだ初期段階にあります。 UIアニメーションの領域が出現したとき、ユーザーインターフェイスが時間内にどのように動作するかを説明するために使用できるツールは、12のアニメーションの原則だけでした。初期の写真家が絵画のルールを通して写真を理解しようとしたのと同じように、デザイナーはディズニーのアニメーションのルールを通してUIアニメーションを理解しようとしました。

表面的には、ある程度のオーバーラップがあるため、これは理解できます。アニメーションの12の原則の1つであるイージングモーションは、ユーザーエクスペリエンスに不可欠なモーションを通じて「正しさ」の感覚を強化します。緩和せずに、UIアニメーションは不格好で奇妙に感じます。

ユーザーインターフェイスのコンテキストで12の原則を詳しく見ると、完全な内訳が明らかです。

Squash and Stretchは、オブジェクトに重みと柔軟性を与えます。これは、ユーザーインターフェイスのルールではなく、例外です。

予測は、何かが起きようとしているという感覚を生み出し、ユーザーエクスペリエンスに関してはほとんど役に立ちません。マイクロインタラクションとボタンの状態を選択する場合に限られた方法でのみ機能します。

ステージングとは、アニメーションのレイアウトを指します。これは、キャラクターが常に動いているため、ディズニーの漫画にとって意味がありますが、ユーザーエクスペリエンスでは、これは単に「デザイン」と見なされます。

ストレートアヘッドアクションとポーズツーポーズは、実際の描画/アニメーションプロセスへのアプローチよりも原理が劣ります。連続フレームを描画するか、ポーズを使用していくつかのキーフレームを設定し、ギャップを埋めると、より滑らかなアニメーションを作成できます。ユーザーエクスペリエンスでは、実際のフレームごとのアニメーションが発生しない限り、このプロセスはほとんど変換されません。デフォルトでは、使用しているツールに関係なく、ほぼすべてのUIアニメーションはキーフレームを使用して作成されます。

フォロースルーとオーバーラップアクションは、物理学と慣性の法則に従うこと、および身体がどのように反応するかと関係しています。どちらもユーザーインターフェイスとはほとんど関係ありません。 。

スローインとスローアウトは、オブジェクトの速度を上げたり下げたりする時間が必要だと言います。 UIアニメーションの100%がこの原則を採用する必要があるため、これは非常に重要です。これは一般に「緩和」と呼ばれ、非常に重要です。

Arc(物理的な動きを再現するために必要)は、UIアニメーションにはほとんど役に立たず、ルールではなく例外でもあります。

セカンダリアクションは便利で、画面の遷移や視覚的な階層の設定に最適です。

キャラクターを描くときはタイミングが関係しますが、応答性を感じるためにモーションを鮮明にする必要があるユーザーインターフェイスでは、継続時間ではなく、相互作用の感触を設計するのを容易にすることに頼る方が良いと思います。

誇張は、デザインが事前に決定されているため、UIアニメーションにはほとんど関係のないリアリズムまたは似顔絵の程度に関連しています。

UIアニメーションは、オブジェクト自体の実際の設計ではなく、インターフェースオブジェクトの動作を長期間にわたって処理するため、ソリッド描画も同様にほとんど意味がありません。

また、アピールは視覚的な処理にも影響を与えますが、これもインターフェースの経時的な動作とは関係ありません。

結論として

そこで、疑問が残ります。アニメーションの12の基本原則がUIアニメーションを正確に説明しないのはなぜですか。

内訳は、単純な観察で最もよく理解できます。UIアニメーションは、物理空間を移動する有機体と同じ規則に従わず、同じ原理も持ちません。 UIアニメーションは、写真が絵画とは異なる別個の媒体であり、重複する特性(写真と絵画の両方が光と構成に依存する静的な視覚的構成)を備えていますが、根本的に異なる媒体です。

簡単に言うと、アニメーションの12の基本原則はUIアニメーションには適用されません。UIアニメーションは別の問題を解決しているためです。

次のいくつかの記事では、これらのUIアニメーションの原則、UIアニメーションの原則が解決する問題、原則とテクニックの違い、現在および将来のプロジェクトでUIアニメーションを設計および使用してユーザビリティとより魅力的で効果的なユーザーエクスペリエンスを作成します。