アプリケーションでアニメーションをいつどのように使用する必要がありますか？
時々、アプリケーションはUIのアニメーションの恩恵を受けることができます。
- アニメーションを使用するタイミングを決定するためのヒントはありますか？
- アニメーションの有用性を最大化し、誤用を避けるにはどうすればよいですか？
原因と結果を考えてください。ボタンにカーソルを合わせると、何らかのフィードバックが欲しいのですが。ドラッグできる場合は、なんとかしてください。警告または通知がある場合は、控えめに注意を向けます。それ以外は、アニメーションに特別な理由がない限り、使用しないでください。それが続く場合、迷惑になる可能性があるものは避けてください。アニメーションが重要ではなく、ページの主な目的の邪魔になる場合は、削除します。
アニメーションが適切ないくつかの場所：
- パネルを特定の場所に最小化する-アニメーションは、最小化されたパネルがどこに移動したか、およびそれを復元する方法をユーザーに教えるのに役立ちます。
- ナビゲーションバーなどの自動非表示のもの-アニメーションは、何かが消えただけでなく、どこから取得できるかをユーザーにアピールします。
- 原因となった変更が発生したエリアのすぐ近くにないエリアを更新する。たとえば、リスト/グリッドのデータを編集して、別のパネルでそのデータの視覚的表現を変更します。
アニメーション（変更/モーション）は他のほとんどのものよりも目を引くので、ユーザーの注意をそらしたかもしれないアクションに注意を向けたい場合に最適です。
ただし、上記の項目についても、最初の数回だけ実行することは価値があるかもしれません-目は自動的にそれに引き寄せられるため、注意散漫として機能するため、最初の「ガイダンス」が完了した後は避ける必要があります。
ユーザーがアプリが機能しなくなったと考えないようにするには、常にある種の忙しい/機能しているアニメーションが必要です（特にajaxアプリでは重要です）。
単純なクイックトランジションは、全体的なユーザーエクスペリエンスに追加されれば問題ありませんが、あまり多く入れないでください。
「開発者がクールなUI効果を計画するのと同じくらい多くの時間をかけて実際の機能を計画してほしいと思った」というアプリを使用したことがありますか？アニメーションを追加するときは、このことを覚えておいてください。
素晴らしい質問です。いつものように、それはアプリに依存します（たとえば、ゲームはおそらく生産性アプリよりもはるかに多くのUIアニメーションを使用する必要があります）が、いくつかの一般原則があります。
IThingsが新しくて熱かった頃は、すべてをアニメーション化する必要がありましたが、VS2010とOffice 2010を見て、アニメーション化されているnotの量を確認するのは興味深いことです。特に、Office 2010では、フェードインのホバー/ボタンロールオーバー（Office 2007はそうでした）。 IMO、それはより敏感に感じます。メニューはまだフェードイン/フェードアウトします（ただし、メニューがフェードするのに約2倍の時間がかかることに注意してくださいoutフェードする場合に比べてin認識される応答性が向上する場合があります）。
一般に、アニメーションは、ユーザーが明示的にドラッグ/スクロールせずにUIのコンポーネントを移動する場合に使用する必要があります。ユーザーがアイコンを所定の位置にドラッグしている場合、他のアイコンを「スクート」すると、ユーザーアクションの効果がわかります（ただし、挿入ポイントの線で十分な場合もあります）。 IE/Firefoxの「情報バー」は、他のものを押し下げてジャンプを減らし、ユーザーの注意を引き付けます。アコーディオンとツリーのメニューは、ユーザーが他の要素がどこに移動するかを確認できるため、アニメーションを使用した方が適切にテストされています。
私はかつて、すべてのレベルのユーザーがアニメーションしているUI要素を操作する傾向がないことを示した調査を見ました（リンクを見つけたら、これを更新します）。したがって、ユーザーがボタンをホバーするときにボタンを2秒以上点灯させると、アニメーション中にボタンがworkになっても、ユーザーは無意識のうちにアニメーションが終了するのを待ちます。この感触を得るには、 WPFテーマ サンプルを確認してください。一部のテーマは、他のテーマよりもホバーアニメーションが長く、どのテーマが反応が遅いとすぐに判断できます。スローフェードエフェクトは、Vistaが遅いと感じたというユーザーの原因にもなっている可能性があります。Win7では、同じアニメーションがすべて存在します（したがって、プロセッサ/グラフィックカードでも同じくらい遅いです）が、多くは短いです。
OTOH、新しいgoogle.comはフェードイン機能を備え、google画像検索はライトボックスを備えています。したがって、傾向は両方の方向に進んでいます。
要約すると、アニメーションは脳に使用できる2つの強力な効果があります。
認知負荷の軽減：これらにより、ユーザーは2つの状態間で何が起こったかを確認できるため、頭脳が「ギャップを埋める」必要がありません。これにより、ユーザーはすべてがより明確で使いやすいと感じます->トランジションのアニメーションを幅広く使用します（cf Apple software）
ユーザーの注意を引く：人間は、直接見ない場所での動きを検出するのに非常に優れています。これは 私たちの桿体細胞 のおかげで行われます。これは、網膜の外縁で本当に密な動きを検出するために使用される細胞です（敵対的な環境での生存と関係がある必要があります）->離れた場所で本当に重要なことが起こった場合はアニメーションを使用します。
それらは私たちの爬虫類の脳に直接接続されているため、この効果は非常に強力です。同時に強力で危険です。
Web /ネイティブアプリのアニメーションを作成するときは、コンテンツの読み込み中に0.5秒間、ほぼ「ユーザーの注意をそらす」ようなgithubアプローチを常に採用します。アプリケーションの最も遅い部分（特に、ボタンを押してから0.5秒ほどかかる部分）は何も起こっていないように見え、アニメーションを実行する方法を見つけます。これは、ユーザーの不満を最小限に抑えるためです（ "ボタンを押したが何も起こらない」）、回転するローディングホイールや、ある種のローディングアニメーションではなく、スライディングのような錯覚を生み出すためのスライドアニメーションなどの意味ではないことに注意してください。 、高速UI（参照： https://github.com/github/linguist 何かをクリックするたびに、Githubを非常にすばやくスムーズに見せるためのこのスライドアニメーションがあります）。無理しないでください。これは（500ミリ秒以上かかるアプリの部分でこの手法を使用）私は500ミリ秒のように感じますが、それは魔法の数字ですが、実験して自分のものを見つけてください。
あなたは尋ねなければなりません：このアニメーションはユーザーが何が起こっているのかを理解するのに役立ちますか？私はすぐにOS Xのジニーエフェクトをオフにしましたが、シンプルでミニマム/復元のアニメーションは、高速で何が起こったのかを知る手掛かりになるため、ありがたいです。 Spaces /Exposéも同様です。あるいは、短くてシンプルなソフトフェードトランジションが原因で、突然ではなく、より人間味のあるものに見える場合があります。
繰り返しになりますが、スターウォーズの「ルーカスワイプ」のように、ちょっとしたセンスがあなたのトレードマークになる可能性があります。
アニメーションには目的があり、その目的は状態の変化を視覚化することです。
最近のCSSに存在するような、Webkitで発表されているような宣言型アニメーションについて考えると、簡単に理解できます。このコンテキストでは、特定の状態で要素がどのように表示されるかを指定してから、要素が別の状態でどのように表示されるかをCSSに伝えます。どのように状態を指定しますか？クラス名やIDなどのCSSルール。したがって、たとえば（ここでコードを使用することを許してください！）：
.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }
ここで説明するのは、開くボックスであり、2つのCSSルール間でアニメーション化する方法をコードに伝えています。これはそれらを状態にし、あなたがそれに気づいたとき、あなたのアプリにアニメーションを適用することは突然より論理的になります。どのアニメーションがどこに行くのかという観点から考えるのではなく、アニメーションを状態変化の副産物として見ています。何かが起こったことを示すインジケーター、または変更が行われていることをユーザーにフィードバックします。
純粋な「アニメーション」（プログラミングの観点から）と「状態変更」（宣言の観点から）を区別することを学んだとき、それによってすべてのUIデザインがはるかに堅固で論理的なものになりました。