Apple UIデザイナーはPixarで練習していますか?

Apple UIのスカッシュおよびストレッチアニメーション



Appleでユーザーインターフェイスを開発するデザイナーは、Squash and Stretch(文字通り「スクイーズアンドストレッチ」)と呼ばれる手法でユーザーの注意を引く方法を学びました。 漫画のように、キャラクターが壁にぶつかったときに鼻が平らになったときの効果は、突然元の状態に戻ります-これは押しつぶされて伸びます。 アニメーターは、ペイントされたキャラクターに深みを加えるために何十年もこの効果を使用してきました。 まあ、これに加えて、これはばかげています。



Tigerでは、iChatは同じ効果を使用して、誰かがちょうどあなたに挨拶したことを示します。 誰かがあなたとチャットしたい招待ウィンドウがiChatに表示されると、最初は小さくなり、それから大きなサイズに「膨らみ」、それから拍手します...そして通常のサイズになります。 この最後の「拍手」は、スカッシュとストレッチのアクションであり、すべてが非常に迅速に発生します。 疎遠の効果は、誰かがあなたに向かって傾いているという事実に似ており、彼の顔は大きく見えた後、再び突然減少します。



これが、Appleデザイナーがこのテクニックを使用して注目を集めた方法です。誰かがユーザーに直接動いているようです。



ヒョウのスカッシュとストレッチ効果



アニメーション化されたスカッシュおよびストレッチ効果は、Leopardのあらゆる場所に表示されます。 メールは、手紙を受け取ると自動的に日付、住所、電話番号を選択し、設定可能な小さなポップアップメニューで発行します。 「連絡先を追加」または「新規作成」を選択すると、iCalはiChatと同様の近似値を持つミニチュア編集ウィンドウを開きます。



「メールのTo Do」設定についても同様です。「To Do」要素の横にある矢印をクリックすると、設定ウィンドウにスカッシュとストレッチ効果が表示されます。



そして、Leopardの新しいStacks機能は同じ効果を使用しているようです。



iPhoneのスカッシュとストレッチ効果



iPhone / iPod touchでGoogleマップを表示すると、小さなピンが上部に表示され、マップ上に表示されます。 着陸時に、彼らはマップに少し「突っ込み」、その後再び全長まで伸びます。 テレインインジケータが表示されると、表示されるときに少し伸びてから、通常のサイズになります。 両方とも、運動中のスカッシュおよびストレッチ効果です。 どちらの場合も、非常に印象的で楽しいようです。







アニメーションはデザイナーに新しい可能性を開くようです。 [ログイン]ウィンドウは非常にエレガントなアニメーションを使用して、ログインまたはパスワードでエラーが発生したことを示します。 アニメーションは、Appleデザイナーの境界を広げ、非常に興味深い珍しいソリューションを探すことを可能にします。 まあ、 アニメーションがデザイン自体に活気と多様性を与えることを忘れないでください。



開発者が他に思い付くものを見てみましょう。 彼らがアニメーションなしでCoverFlowのようなことをなんとかできたら、それから彼らが何を思いつくことができるか想像してください。



All Articles