アニメーションと画面切り替え
手記
このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。
アニメーションと切り替えを戦略的に使用すると、プログラムの理解が容易になり、スムーズで自然な感じになり、より高品質になり、より魅力的になります。 しかし、アニメーションや遷移の無償の使用は、あなたのプログラムが気を散らし、さらには迷惑にすることができます。
アニメーションは、時間の経過に伴って動きや変化の外観を与えます。 アニメーションを使用して、フィードバックを提供したり、アクションの効果をプレビューしたり、オブジェクト間の関係を表示したり、変更に注意を向けたり、タスクを視覚的に説明したりできます。
キーが強調表示されたテンキーの 
Microsoft Windows では、バックグラウンド フラッシュ アニメーションを使用して、オブジェクトがクリックされたことをフィードバックします。
画面切り替えは、ユーザー インターフェイス (UI) の状態の変更やオブジェクト操作中にユーザーの方向を維持し、それらの変更をジャラリングではなくスムーズに感じさせるために使用されるアニメーションです。 適切な遷移は自然に感じ、多くの場合、ユーザーが実際のオブジェクトと対話しているという錯覚を与えます。
Windows デスクトップ ガジェットでは、簡潔な状態と詳細状態の間のスムーズな遷移が使用されます。
一般に、最適なアニメーションと切り替えは、ユーザーと非言語で通信し、状態の変更をより自然で目立たないものにするために使用されます。 対照的に、最も効果的でないのは、何も伝えたり、不必要な注意を引いたりしないという点で無償です。 アニメーションは、コミュニケーションの第 2 の形式として最適に使用されます。 役に立つが重要ではない情報を伝え、アクセス可能であるためには、ユーザーは他の方法で同等の情報を決定できる必要があります。
注:ソフトウェアブランド化、サウンド、および アクセシビリティ に関連するガイドラインについては、別の記事で説明します。
これは適切なユーザー インターフェイスですか?
決定するには、次の質問を検討してください。
アニメーション
次の条件が適用されますか?
- アニメーションは、フィードバックの提供、リレーションシップの表示、原因と効果の表示、重要な変更への注意の引き出しなど、役に立つ情報を視覚的に伝達します。
- アニメーションを見ることは必須ではありません。 同等の情報は別の方法で取得できます。 次の場合、ユーザーはアニメーションのメリットを得られない可能性があります。
- アニメーションがオフになっています。
- 彼らの注意は他の場所にあります。
- 視覚に障害が発生しています。
- アニメーションは別のウィンドウで隠されています。
- システム パフォーマンスが不十分なため、アニメーションは再生されません。
- アニメーションはユーザーの生産性には影響しません。 いずれも：
- これはすぐに発生します (200 ミリ秒以下)。
- 操作に干渉しないか、中断される可能性があります。
- ユーザーは、とにかく待機する必要があります。
- アニメーションはユーザーのフローには影響しません。
- これは、ユーザーの注意の中心にあるか、タスクを完了する際に重要または役に立つ、注目の中心外の何かに注意を引きます。
- それは簡単に無視できます, 気を散らしたり、迷惑ではありません.
- 面倒になることはありません。 ユーザーは、繰り返し視聴した後も、適切で楽しいと思います。
その場合は、アニメーションの使用を検討してください。
遷移
オブジェクトまたはシーンの状態は変化していますか。アニメーションを使用するための上記のすべての条件と、次のいずれかの条件が適用されますか?
- 状態の変化は、概念的に見当が乱れたり、混乱を招いたり、理解するのが難しい場合があります。
- 状態の変化は視覚的に不十分であり、連続性や平滑性を欠いている、または点滅する。または、特に大きな画面領域を含む場合は、不自然、未研磨、または品質の悪いように見えます。
- 遷移を使用すると、状態の変化が速く表示されます。
- 状態の変更は、特別なユーザーの注意を払う価値があります。
その場合は、遷移の使用を検討してください。
設計の概念
アニメーションと切り替えは、テキストを説明する必要がある、またはユーザーが見逃す可能性がある情報を視覚的に伝える効果的な方法です。
不正解:
メッセージする
正解:
視覚的に図
アニメーションを使用すると、同じ情報が自然で目立たない方法で伝達されます。 1,000 回表示されるのはどれですか?
アニメーションと切り替えは、成功するために注意を必要とする必要はありません。 実際には、多くの場合、ユーザーが認識する必要のないプログラムの仕組みに注意を引かないようにするために使用されます。 多くの成功したアニメーションは自然なので、ユーザーはそのことを認識していません。むしろ、ユーザーは自分の不在に気付くだけです。 出現頻度は微妙な必要性を高めるので、注意に値する頻度の低いイベントに注意を必要とする効果を節約します。
戻る矢印スクリーン ショット
注意を引かないようにするスタート メニューの切り替え。
プログラムの理解を容易にし、スムーズに感じるだけでなく、適切に設計されたアニメーションと切り替えを することは、プログラムに個性、キャラクター、スタイルを追加するための優れた方法です。 自然で現実世界の感覚を与えることで、ユーザー エクスペリエンスをよりイマーシブで魅力的なものにすることができます。
ホバーがボタンの色に与える影響を示す図 
Windows 7 では、現在のマウス位置とプログラム アイコンの色に基づいて、ホバー時にタスク バー ボタンが強調表示されます。 このアプローチは視覚的に魅力的ですが、微妙で、謙虚な性格を伝えます。
ただし、アニメーションと切り替えは、明確な目的を果たすときに最も効果的で歓迎されます。 これらは、パフォーマンスを大幅に損なうことなく、使いやすさ、滑らかで流れ、品質の認識を向上させるために使用する必要があります。
一部の種類のアニメーションはユーザーの注意を引くために使用されますが、注意が適切であり、ユーザーの思考のトレーニングを中断する価値があることを確認してください。 人間の目は動き、特に周辺運動に敏感です。 点滅するタスク バー ボタンや回転する通知領域アイコンがある場合、ユーザーが集中するのが難しい場合があります。 アニメーションを使用してユーザーを中断または注意を散らしたり、ユーザーの注意を引いたりしないようにします。
不正解:
ユーザーが重要なことをすぐに行う必要がない限り、プログラムはタスク バー ボタンを点滅させないでください。 この場合、ユーザーが行う必要があるのは、プログラムのアクティブ化だけです。
アニメーションと画面切り替えは、プログラムで必要とされるため、単なる理由ではなく使用します。 また、アクセシビリティのために、重要な情報を伝える唯一の方法としてアニメーションを使用しないでください。 ユーザーが別の方法で同等の情報を取得できることを確認します。
適切なアニメーションと画面切り替えの属性
適切なアニメーションと切り替えは、次の属性の間で適切なバランスを取ります。
- 明確に意図的です。 適切なアニメーションは、情報を伝えるか、相互作用をリアルに感じるか、注目すべきものに注意を引く必要があるためです。 そして、意図的なアニメーションは正確です。アニメーションにタスクが実行されていることが示されている場合は、タスクが実際に実行されているためです。
不正解:
のスクリーン ショット
この例では、完全に充電されたバッテリーが充電されていることをアニメーションで示しています。
- 滑らかで連続して見てください。 適切なアニメーションでは、リレーションシップを表示し、場所とコンテキストの感覚を提供することで、シーンまたは要素の状態の変化の間の継ぎ目をスムーズに削除します。 継続性は、ユーザーが自分がどこにいるかを理解し、どこから来たのかを理解するのに役立ちます。
Windows 7 タスク バー ウィンドウのプレビューは、ユーザーがプログラム間を移動すると、継続性のために変形します。
- リアルです。 適切なアニメーションは、オブジェクトの実際の物理的なプロパティと動作をシミュレートします。 これにより、ユーザーは対話の結果を予測して理解できます。 現実の世界を正確にモデル化する必要はありませんが、現実的なアニメーションを使用する場合は、現実の世界と一貫性を保つ必要があります。 ユーザーは、特に直接操作に使用されるアニメーションを使用して、結果に驚いたり混乱したりしないでください。
タスク バー ボタンを新しい位置にドラッグした 
この例では、Windows 7 タスク バーで使用される "移動" アニメーションは、静的な挿入ポイントよりも現実的に感じます。
- 本物です。 現実世界に見つからないオブジェクトであっても、別のオブジェクトが関連する実際の動作に基づいて自然に見える可能性があります。 このメタファーは、リレーションシップが意図した目的と動作を明確に伝える場合にのみ機能します。
移動したウィンドウ
この例では、Windows 7 で使用されるウィンドウ "スキージー" アニメーションは、実際の環境でのガラス ウィンドウの動作と一致しているため、本物であると感じています。
- 自然なマッピングを使用します。 自然なマッピングは、物理的または文化的なマッピングです。 たとえば、文化的に基づく自然なマッピングは、西洋の文化では、人々が左から右に読むという事実から始まるかもしれません。 したがって、オブジェクトの時間シーケンスを表すために、中央のオブジェクトは現在、左側のオブジェクトは過去から、右側のオブジェクトは将来です。 今後の時間は、左から右への動きによって示されます。
メディア プレーヤーの進行状況バーのスクリーン ショット
この例では、再生すると位置が左から右に移動するため、Windows Media Player コントロールには自然なマッピングがあります。
- 個性を持つ。 適切に選択されたアニメーションは、プログラムに個性、キャラクター、スタイルを追加するための優れた方法です。 ユーザー エクスペリエンスをよりイマーシブで魅力的なものにすることができます。 アニメーションの種類によって通信内容が決まりますが、アニメーションを実行する具体的な方法はプログラムの個性を示します。 優れたアニメーションは、真面目でも気まぐれでも、その間のどこかに、プログラムに適したパーソナリティを投影します。
創造的に設計された zune インターフェイススクリーン ショット
この例では、Zune によるアニメーションテキストと動的なパースペクティブの使用は、その個性を形成するのに役立ちます。
- 外観と応答性。 適切なアニメーションは、ユーザーが他の操作からブロックしたり、ユーザーに視聴を強制したりすることで、ユーザーの生産性を損ないません。 どんなに自然で魅力的なプログラムのアニメーションであっても、誰もそれらを排他的に待ち望んでいません。 優れたアニメーションも、ソフトランディングで速いスタートを切ることで、ジャラリングすることなく応答性に優れています。 応答性の高いアニメーションは、目的を迅速に伝えることでメリットを得ることもできます。 ユーザーは、何が行われているか、いつ実行されるかを把握するために、アニメーションを長時間視聴する必要はありません。 直接操作では、応答性の高いアニメーションは、直接的で魅力的な現実世界の操作性を維持するために不可欠です。 直接感じるには、オブジェクトの接触ポイントは、操作全体を通してスムーズにポインターの下に留まる必要があります。 ラグ、途切れ、または接触の損失は、直接操作の認識を破壊します。
タッチ スクリーン図
この例では、タッチ パンの切り替えは、操作全体を通してユーザーの指の下に接触ポイントを維持することで応答性を感じます。
- 適切なレベルの注目を集める。 通常、適切なアニメーションは微妙であり、目的を果たすために必要な注意のみを引きます。 その結果、彼らは気を散らす、迷惑な、過度に複雑、過度に長い、または繰り返しではありません。 繰り返し視聴しても面倒になることはありません。
ファイル名 
のフェード強調表示のスクリーン ショット
この例では、Windows 検索は一致する検索単語に一時的に注意を引き、その後フェードダウンします。
- 純粋に特別な場合にのみ特別に見てください。 頻度は微妙な操作の必要性を高めるので、一般的な相互作用には単純なアイデアを簡単な方法で伝える単純なアニメーションが必要です。 特別な、まれな経験のための特別な、複雑なアニメーションを予約します。
になる
この例では、Windows は起動時に注意を引くアニメーションを使用してエクスペリエンスを特別なものにしますが、このようなアニメーションは他の場所では不適切です。
これらの属性のいずれかが削除された場合に全体的なエクスペリエンスが損なわれると、適切なバランスが得られたことがわかります。
アニメーションボキャブラリの作成
優れたアニメーションは効果的な視覚的なコミュニケーションに関するものであり、一貫性は効果にとって非常に重要です。 シーンを右から次のシーンに進めるなど、特定の遷移を使用する場合は、その目的に使用される唯一の遷移にする必要があり、その切り替えは他の目的には使用しないでください。 同じアニメーションに異なる意味を割り当てると、コミュニケーション能力が低下します。 特定のアニメーションと遷移を特定の意味に割り当てることで、アニメーションボキャブラリを作成します。
この問題は、ユーザーが意味を割り当てる可能性が高くない一般的なアニメーションや切り替えではなく、意味を持つアニメーションや遷移に適用されます。 たとえば、フェードなどのアニメーションやディゾルブなどの特殊効果は特に意味がないため、自由に使用できます。
適切なボキャブラリは、オブジェクトの現実世界の物理的な動作をモデル化するアニメーションを割り当てます。 対応する現実世界がないオブジェクトまたはアクションにアニメーションを割り当てる必要がある場合は、オブジェクトが実際にどのように動作するかを示すアニメーションを選択します。
ホバーによって Windows ロゴが光る方法を 
[スタート] メニューは実際のオブジェクトではありませんが、アクティブ化すると、実際のオブジェクトのようにホバー効果が点灯します。
ボキャブラリ内の各アニメーションは、明確に区別する必要があります。 アニメーションの動作は、関連付けられているアクションが同様に関連付けられている場合にのみ行う必要があります。 たとえば、移動切り替えではナビゲーションが提案されるため、さまざまな方向からの移動遷移を使用して、さまざまな種類のナビゲーションを示すことができます。
結果がわかりにくい、驚く、または予期しない結果が見つかると、アニメーションと切り替えがうまく伝わっていないことがわかります。 一般に、1 つの目的を達成する方が、複数の目的よりもうまく達成することをお勧めします。
理想的には、アニメーションボキャブラリは、それらを必要とするプログラムのすべての領域で包括的である必要があります。 自然なアニメーションを持つ操作が少数しかない場合は、そうでないものに注意を引きます。
Windows アニメーションボキャブラリの詳細については、この記事の「の使用パターン」セクションを参照してください。
適切なパーソナリティの設計
アニメーションの種類によって通信内容が決まりますが、アニメーションを実行する具体的な方法は、プログラムの個性を語り、そのブランドを強化します。
プログラムのパーソナリティは、タスクの性質とそのユーザーの個性を反映している必要があるため、任意の選択ではありません。 むしろ、適切に設計されたパーソナリティは本物を感じるべきです。それを強制しようとしないでください。 パーソナリティは、ユーザーに感情的なつながりを作る必要があります。 考慮すべきいくつかの要因:
- タスク: 深刻または楽しい;省略可能または必須。
- 結果: 重大または未成年。
- コスト: 無料または購入;購入した場合、中程度の価格または高価な場合。
- ユーザーフォーカス: 対象ユーザーのグループが比較的狭い、または広い一般ユーザーです。
- ユーザー環境: プロフェッショナル、カジュアル、または自宅。
- ユーザーの年齢: 年下以上。
- 使用頻度: 頻度または頻度が低い。
これらの要因の組み合わせは、プログラムの適切な性格を決定するのに役立ちます。 一般的な種類のプログラムに適した組み合わせをいくつか次に示します。
Productivity アプリケーションの
当然ながら、生産性アプリケーションは生産性に重点を置く必要があります。 いくつかの特別なエクスペリエンスが目立つことはできますが、他のほとんどのアニメーションには次の特性が必要です。
- 小さい
- 自然でリアル
- 微妙で落ち着いた
- 高速で効率的
- くつろいだ
ユーティリティ
ユーティリティは一般的に簡単に使用されるため、アニメーションの使用はより積極的になる可能性があります。
- 現実的、説明的、自明
- 金庫
- 従事
エンターテイメント, ゲーム
これらのプログラムの目的は、ユーザーの関心を引き付け、ユーザーを喜ばせるため、アニメーションと切り替えは、次の特性を持つことによって、はるかに積極的になる可能性があります。
- 大規模 (エクスペリエンスの不可欠な部分になる可能性があります)
- 人工、シュール
- インパクトのある、活気に満ちた
- 感情、遊び心、気まぐれ
- エネルギッシュ
感情的なつながりを作ることは、エンターテイメントプログラムにとって非常に重要なので、そうすることで、ユーザーがプログラムに恋をするのに役立つ場合は、いくつかのルールを曲げることができます。 たとえば、ほとんどのユーザーが頻繁にプログラムを使用する可能性が低い場合、アニメーションや遷移が 100 回目以降に面倒になる場合は許容されます。
一般に、小さく、自然で、落ち着きがあり、効率的で、リラックスしているアニメーションと遷移が最も安全な賭けです。 これらの特性を持つ遷移は、通常、最初から最後まで最短のパスを取り、すばやく開始し、ソフトに終了し、オーバーシュートを行いません。 また、適切に設計された遷移は、使用される距離の範囲全体で適切に動作するように設計されています。
アニメーションのパフォーマンス
アニメーションを設計するときは、プログラムを効率的に使用するユーザーの機能に影響を与えないことを確認します。 一般的に、アニメーションは目的を達成するのに十分な速度を発揮しますが、応答性を妨げたり、注意を払いすぎなかったり、面倒になったりしないように十分に速くします。
不正解:
このページの回転アニメーションは魅力的で現実世界の感覚を持つ一方で、ページのターンに時間がかかるため、ユーザーの生産性が低下します。
簡単な切り替え (200 ミリ秒以下) は特殊なケースです (特に、遅延が発生する場合は特に)。 ユーザーは、次の場合にこのようなアニメーションを待つ必要があります。
- 認識される待機は非常に短い (200 ミリ秒以下)。
- この切り替えにより、対話がより滑らかで自然に感じさせます。
- この切り替えにより、相互作用の応答性が向上します。
- 遅延は、ユーザーが対話を制御し続けるのに役立ちます。
タスク バー ボタンを新しい位置にドラッグした 
タスク バー ボタンの並べ替えアニメーションは非常に短く、操作がより自然に感じることができるため、ユーザーは短い遅延を受け入れます。
アニメーションがパフォーマンスに悪影響を与える可能性がある方法は、速度、応答性、知覚の 3 つです。
速度の場合、一部のアニメーションは CPU 集中型のタスクよりも視覚的な突き板であるため、最後に行う必要があるのは、CPU を集中的に使用するアニメーションを使用してこれらのタスクを遅くすることです。 CPU 負荷の高いアニメーション ("重い" アニメーション) は、次の傾向があります。
- 多数の要素を独立して移動させる。
- 長い継続時間または距離で再生します。
- 大量の画面領域を含めます。
- 数学的に集中的です。
パフォーマンスへの影響が少ないアニメーション:
- 1 つのオブジェクトを含めます。
- 短い継続時間または距離で再生します。
- 少量の画面領域を含めます。
- 数学的に集中的ではありません。
パフォーマンスを高めるには、負荷の高いアニメーションは CPU 負荷の高いタスクにのみ使用する必要があります。一方、ライト アニメーションはどこでも使用できます。
応答性のために、ほとんどのアニメーションと切り替えは、アニメーションの実行中にユーザーが対話できるように設計する必要があります。 アニメーションがプロセスの一部でない限り、ユーザーの主要な対話とは無関係にし、ユーザーが中断できるようにします。
アニメーションは、実際にはタスクのパフォーマンスに悪影響を与えない場合もありますが、ユーザーはタスクのパフォーマンスに悪影響を与える可能性があります。 たとえば、パフォーマンスが低下しない場合でも、CPU 負荷の高い低速なタスクでは重く表示されるアニメーションを使用しないでください。これは、ユーザーがアニメーションがタスクが遅い理由であると結論付ける可能性があるためです。 何かが遅く見える場合は、遅く感じるので、シンプルで軽量で高速なアニメーションを使用することをお勧めします。 CPU を集中的に使用するタスクに、アニメーションを使い始めるのに役立ちます。
リスク:
進行状況バーがする
Windows ファイル コピー ダイアログのアニメーションはファイル コピーのパフォーマンスを損ないませんが、ユーザーにファイル コピーのパフォーマンスを損なわないと思われるリスクがあります。
また危険:
に表示される進行状況のスクリーン ショット
この例では、Windows エクスプローラーのアドレス バーの見栄えの遅い進行状況アニメーションを使用すると、一部のタスクは痛みを伴うほど遅く見えます。
アニメーションと画面切り替えの品質が非常に低いため、エクスペリエンスのスムーズさと魅力が低下する場合、アニメーションと遷移には価値はありません。 品質を維持するには、十分なシステム リソースが利用できない場合に常に適切に低下するようにアニメーションを設計する必要があります。 アニメーションは、必要なリソースの数が少ない (長さが短い、フレーム レートが低いなど) バリエーションがある場合や、まったく実行されていないことによって、低下する可能性があります。 使用可能なリソースに関係なく、アニメーションの品質が高く、ソフトウェアのバグではなくアニメーションのように見えるようにします。
最後に、ユーザーがプログラムのアニメーションや切り替えが生産性を損なうと考えている場合は、一部のユーザーがオフにしたい可能性が高くなります。 この機能をサポートするには、Windows の簡単操作センターで見つかったすべての不要なアニメーション をオフにするオプションを尊重します。
適切なレベルの注目を集める
一部の種類のアニメーションと切り替えは、ユーザーの注意を引くために特別に設計されていますが、目的を十分に果たすために適切なレベルの注意を引くように設計する必要があります。 注目を集めるさまざまな方法と、適切な方法を選ぶ方法は何ですか?
アニメーション効果 を する
異なるアニメーション効果は、異なるレベルの注目を集めます。 次の一覧は、最も注意を引く方法から始まる、最も一般的な方法をまとめたものです。
- 急速な点滅。 すぐに注意を払う必要があります。 点滅が発生している場所に関係なく、ユーザーの濃度を損なうことができます。
- 中程度の点滅。 同じですが、より低い周波数ではあまり注意が必要ではありません。
- バウンス。 周辺視力で顕著で、本質的に比較的要求が厳しい。 ユーザーは気付く可能性が高いですが、継続時間が短い場合にのみ、他の場所に集中し続けることができます。
- 動議。 周辺機器の視覚では顕著ですが、要求は必要ありません。 ただし、複雑な 3-D モーションは、単純なモーションや 2-D モーションよりも注目を集めます。 ユーザーは気付く可能性が高いですが、引き続き他の場所に集中できます。
- 中程度の脈動。 目立ちますが、末梢視力に気を取りません。 ユーザーは引き続き他の場所に集中できます。 明るさ、色、サイズをパルスできます。
- 遅い脈動/光る。 目立ちますが、微妙です。 静的効果よりも注目を集めますが、ユーザーが既に見ている場合を除き、アニメーションに気付かない場合があります。
- 剥げる。 目立ちにくい。 静的効果よりも注目を集めますが、ユーザーが既に見ている場合を除き、アニメーションに気付かない場合があります。
- 静的な強調表示/輝き。 ユーザーが検索を選択したが、他の場所にある場合は注意を必要としない場合は顕著です。
- アンビエント/ナチュラル。 自然で現実世界の外観を持つことによって意図的に目立たない。
プログラムまたは機能に適したアプローチを決定するには、これらの要因が機能のシナリオにどのように関連しているかを検討します。
たとえば、インスタント メッセージ プログラムを設計していて、誰かがユーザーにメッセージを送信したとします。 このシナリオでは、ユーザーの注意が必要です。どこでも目立つ必要があり、通常、ユーザーはすぐに応答する必要があります。 このシナリオは、中程度の点滅アニメーションが適切な選択肢であることを示唆しています。 これに対し、印刷ジョブが完了したことをユーザーに通知するとします。 ユーザーは引き続き他の場所に集中して生産的に作業できる必要があり、ユーザーが気付かない場合は許容されます。 このシナリオでは、中程度から低速のパルスまたは光彩が適していることを示しています。
期間の
アニメーションの注意を引く適切な期間は、シナリオと使用される特定の種類のアニメーションによって異なります。 アニメーション効果の需要が高いほど、継続時間は短くなります。 少し注意を必要とする非常に微妙な効果(遅い脈動など)は無期限に再生できますが、注意を必要とする効果は1秒から3秒の間でのみ再生する必要があります。 何か長いリスクは、アニメーションを圧倒的で迷惑にしています。
強調表示されたタスク バー ボタンのする
Windows 7 では、タスク バーが 1 秒間だけ点滅して注意を引きます。 これ以上迷惑になります。
効果の減衰
ユーザーがすぐに応答しない場合は、他の操作を行うのに忙しく、中断したくないという前提に基づいて、注意を引くアニメーションを設計する必要があります。 したがって、あなたの目標は、それを要求することなく、注意を引くべきです。
それを要求することなく注目を集めるの正しいバランスを得るために、時間の経過と同時に効果の強度を減衰させます。 たとえば、注目を集めるために、効果を最初は強くし、その後すぐに効果を遅くすることができます。 そうすることで、魅力的な力は主に初期効果によって決まりますが、ユーザーの全体的な印象は、主にその仕上げによって決定されます。
フラッシュ レートスクリーン ショット
Windows 7 では、タスク バーのフラッシュ効果が最後に遅くなります。
PowerPointについて
Microsoft PowerPoint切り替えは、多くの場合、これらのガイドラインに意図的に違反します。これは、スライドの切り替えに注意を向け、ユーザーが切り替えるのを待つ必要があるためです。 さらに、特に意味がないため、スライドが変わっていることを超えて何も伝えません。
PowerPointスタイルの切り替えは、適切に使用する場合、次の目的があります。
- 発表者に一時停止を強制することで、長いプレゼンテーションをより小さなチャンクに分割します。
- プレゼンテーションの変化に視聴者の注意を引き、心が疑問に思った場合に焦点を合わせるのに役立ちます。
- 彼らは、単調または圧倒的な感じがしないように、プレゼンテーションにリズムを与えます。
- そのスタイルは、発表者または素材の個性を反映しています。
これらはプレゼンテーションの重要な目標ですが、このような切り替えは、ほとんどの種類のプログラムの UI で不要な注意を引き、すぐに面倒になります。
一番下の行: プログラムのモデルとしてPowerPointスタイルの切り替えを使用しないでください。
6 つの操作のみを行う場合...
- アニメーションと切り替えを使用して、プログラムの理解を容易にし、スムーズで魅力的な感じにします。 明確な目的を持つ必要があります。 アニメーションは、プログラムに不要な注意を引くことができるという理由だけで使用しないでください。
- アニメーションボキャブラリを定義し、プログラム全体で一貫して使用します。 必要に応じて、Windows 7 アニメーションボキャブラリを使用します。
- アニメーションの特性を使用して、プログラムの個性を与え、そのブランドを強化します。
- ほとんどのアニメーションをシンプル、簡潔、繊細にします。 アニメーションは、成功するために注意を必要としないことを覚えておいてください。 アニメーションが適切で自然な場合、ユーザーはその存在しないことに気付くだけです。
- アニメーションを高速かつ応答性に優れ、軽量な操作性を実現します。 どんなに魅力的なアニメーションであっても、誰も彼らが彼らを待っているように感じるつもりはありません。 重いアニメーションを適切に低下するように設計します。
- 長期的な設計。 アニメーションが煩わしい、気が散る、面倒な場合は、再設計するか、削除します。
使用パターン
アニメーションには、いくつかの使用パターンがあります。
| 使い | 形容 |
|---|---|
|
ホバー フィードバック を選択すると、対話ポイントの場所が表示されます。 |
相互作用ポイントがアクティブであることを示します。 ホバーは静的効果でも表示できます。 Windows ボキャブラリ: ホバー効果 (外接する四角形、強調表示、拡大) とフェードイン/フェードアウト効果を表示して滑らかにします。 
Zuneデジタルメディアプレーヤーでは、アルバムはハイライトをカバーし、ホバー時に再生コントロールを追加します。 |
|
フィードバック をクリックする クリック可能なオブジェクトが応答し、クリックを受け取っていることを示します。 |
オブジェクトがクリックされたことを示します。 ウィンドウボキャブラリ:クリックダウンイベントのフラッシュオブジェクトの背景。 タッチ接触を表示するには、波及効果を使用します。 タッチ スクリーン上の指の  を示す)タッチでは、相互作用が認識されたことをユーザーが認識できるように、波紋アニメーションが表示されます。 |
|
選択フィードバックの オブジェクトが選択されていることを示します。 |
オブジェクトが選択されていることを示します。 の選択は、静的効果によっても表示できます。 ウィンドウボキャブラリ: 選択した四角形をフェードイン/フェードアウト効果で描画して滑らかにします。 
Zune では、アルバムはクリックすると点滅し、選択範囲に選択四角形が表示されます。 |
|
Progress フィードバックの タスクが実行されていることを示します。 |
進行状況フィードバックは、タスクが進行していることを示します。通常は、タスクを示すアクティビティ インジケーター、進行状況バー、またはアニメーションを使用します。 進行状況を決定するフィードバックは、タスクの大部分と残りの量を大まかに示しますが、不確定な進行状況はタスクが実行されていることを示すだけです。 Windows ボキャブラリ: 回転アクティビティ インジケーター、進行状況バー、進行状況の背景、図のアニメーション。 [サインイン] テキストスクリーン ショット この例では、Windows Live Messenger では、サインイン中に不確定な進行状況のフィードバックが表示されます。 |
|
アトラクター 何かがユーザーの注意を必要としていることを示すために。 |
重要なオブジェクトが作成された場合や注意が必要な場合 (多くの場合は変更が原因)、重要または緊急のイベントが発生した場合は、適切なレベルの注意を引きます。 設計手法 適切なレベルの注目 を引き付ける方法を参照してください。 ウィンドウボキャブラリ:点滅、移動、脈動、光る、輝く。 ツールバーのアニメーションスクリーン ショット Windows Live ツール バーは、最初の外観でアニメーション化され、それがどこにあるかを明らかにします。 |
| リレーションシップ オブジェクト間の関係や効果の因果関係を示す場合は ゚。 |
リレーションシップを表示します。特に、関係が理解されていない場合や予想されない場合は、気を散らしたり混乱させたりしない方法で表示します。 Windows ボキャブラリ: モーフィング、輸送、反転などの物理的な変化、ポイント ソースからの成長、ポイントの目的地への縮小。 [カラー調整] ダイアログ ボックスのする この例では、アニメーションはガンマ設定とディスプレイへの影響との関係を示しています。 |
|
図/プレビュー を使用して、コマンドの概念、タスク、または効果を視覚的に説明します。 |
テキストの説明を補足または置き換えるために、概念や視覚的な動作を説明するアニメーションまたはビデオ。 これにより、ユーザーはタスクを実行したり、効率的かつ自信を持ってコマンドを選択したりできます。 スペル ミススクリーン ショット この例では、タブレット PC 入力パネルの "show me" コマンドで図を使用して、修正、削除、分割、結合の方法を示します。 |
遷移には、いくつかの使用パターンがあります。
| 使い | 形容 |
|---|---|
|
オブジェクトの拡大/縮小/表示 オブジェクトのサイズまたは状態をスムーズに変更します。 |
オブジェクトは状態間で変化します。場合によっては移動中です。 切り替えにより、変更時にユーザーの方向が維持されます。 Windows ボキャブラリ: 変形、サイズの変更、オブジェクトのスライドインまたはアウト。 
のスクリーン ショットこの例では、Weather ガジェットは簡潔な状態から変形し、[オプション] ダイアログ ボックスを表示します。 |
|
コンテンツの表示/非表示/変更 コンテンツをスムーズに表示、非表示、または変更する場合は通常、段階的な開示を行います。 |
ウィンドウ内部の形状が変更され、より多くのコンテンツ、小さいコンテンツ、または異なるコンテンツが表示されます。 切り替えにより、変更時にユーザーの方向が維持されます。 ウィンドウボキャブラリ: ウィンドウスライドのスライドインまたはアウト。ポップアップ ウィンドウのフェードインとフェードアウト。異なるコンテンツがフェードインまたはロールインします。 
のスクリーン ショットWindows 電卓には、ビュー モード間のスムーズな切り替えがあります。 |
|
コントロールまたはアフォーダンスの表示/非表示 通常の視覚的な外観を簡略化するために、ホバーまたはマウスの移動時にコントロールやアフォーダンスをスムーズに表示または非表示にします。 |
ユーザーがコマンド領域の上にポインターを置いたときにコントロールを表示するか、ユーザーがコントロールの上にマウス ポインターを置いたときにアフォーダンスを表示します。 これらの領域をポイントすると、ユーザーが対話することを示します。 ポインターが固定状態になると、アフォーダンスが非表示になる場合があります。 する この例では、全画面表示モードの場合、Windows Media Player コントロールはホバー時にフェードインします。 |
|
シーンの切り替え 注意を避けるために、シーンの遷移をスムーズかつシームレスにします。 |
急激なシーンの変更は、特に大きな画面領域では厄介な場合があるため、シーンの切り替えを使用して滑らかで連続性を作成し、コンテキストを提供します。 シーンの切り替えは、遷移自体のプロセスに注意を向けないように、自然で低いキーに設計されています。 ウィンドウボキャブラリ: フェードイン/アウト;クロスフェード;スライドイン/左、アウト/右、アップ、ダウン;を押してカバーします。 別のスクリーン ショット この例では、Windows デスクトップの壁紙がイメージ間を優しくクロスフェードして、画面切り替えがスムーズで制御されたようにします。 |
|
特殊なシーンの切り替え を使用して、シーンの変更に注意を引いて特別なものにしたり、ユーザーの注意を再び焦点を当て直したりします。 |
ほとんどのシーン遷移は遷移のプロセスに注意を向けるべきではありませんが、一部のシーンは、フローを中断し、別の何かが起こっていることを強調するために注意を引くように設計されています。 注目を集めるために、特別なシーンの切り替えは不自然であり、視覚的な影響が大きいために設計されています。 注目を集める切り替えスライドスクリーン ショット この例では、PowerPointは注目を集める切り替えを使用して、対象ユーザーを変化に導きます。 |
| 直接操作 を する をクリックすると、直接操作の効果 (移動、スクロール/パン、回転、ズームなど) が表示されます。 |
遷移は、操作の効果をリアルタイムで示します。 効果は滑らかで連続的で、現実世界と一貫性を感じるはずです。 一部の場所では、制限や推奨される選択肢を示すために、移動と回転が連続していない可能性があります。 ズームするとコンテンツが大きくなったり小さくなったりし、それに応じて詳細レベルが変更される可能性があります。 3 サイズの拡大鏡スクリーン ショット この例では、拡大鏡はレベル間を滑らかにズームします。 |
|
不正な直接操作 直接操作 (移動、スクロール/パンなど) が試行されたが実行できなかったことを示す場合。 |
遷移では、試行中の操作が表示されますが、元の状態に戻ります。 多くの場合、実際の物理的な制限のために操作を実行できないようです。 これらのアニメーションは、テキスト ベースのエラー メッセージの代わりに使用されます。これにより、操作の実際の操作性が損なわれます。 Windows ボキャブラリ: バウンス 視覚的に図 この例では、ドキュメントがバウンスして、ユーザーが最後に達したことを示します。 |
|
画面切り替えの並べ替え、フィルター処理、並べ替え 項目のコレクションのプレゼンテーションまたはコンテンツが変更されたことを示す場合。 |
遷移は、変更の効果を示しています (または複雑な変更の場合は提案します)。 
が削除された行のカメラのスクリーン ショット
この例では、bing ビジュアル検索ではフィルター切り替えを使用します。 
この例では、Windows Media Center では、曲の再生中に並べ替え切り替えを特別なエクスペリエンスとして使用します。 |
|
パフォーマンスの切り替え アクションが速く発生するように見える場合は〘。 |
移行にはアクションをより迅速に行えるように見える可能性があります。これらの移行の主な目的は、パフォーマンスと応答性の認識を向上することです。 適切な手法は、タスクが意図的な手順で実行されていることを示す方法です。 これに対し、アクションの遅延、結果の無計画なレンダリング、またはアクティビティ インジケーターの使用は遅い感じになります。 Windows ボキャブラリ: ステージ間のスムーズな遷移を使用して、段階的にアクションを実行します。 ジャンプ リスト  のスクリーン ショットこの例では、タスク バーのジャンプ リストに標準項目がすぐに表示され、リストの準備ができたらスライドアウトして移動先を表示します。 そうすることで、リストの作成に必要な時間が変装されます。 これに対し、最初の表示を遅らせると応答しなくなり、不完全なリストや進行状況のフィードバックを表示すると、はるかに遅く感じます。 |
|
特別体験 プログラムにとって重要であり、ユーザーの注意を引く特別なエクスペリエンス 、まれな の間にユーザーの関心を引き付け、楽しませる。 |
移行には特別なエクスペリエンスになる可能性はありますが、これらの移行は、プログラムにとって本当に特別な頻度の低いエクスペリエンスに最適です。 カスタム画面切り替えは、特別な操作性を提供するために使用されます。 ブランド化とパーソナリティは、多くの場合、重要なデザイン要素です。 他のパターンとは異なり、特別なエクスペリエンスでは注意が必要になり、負荷が高く、ユーザーはしばらく待つ必要があります。 その結果、これらの遷移は、エクスペリエンスが特別ではなくなったため、過度に使用するとすぐに摩耗します。 
に変更された Windows ロゴのスクリーン ショットこの例では、Windows Media Center では、読み込み中にアニメーションが表示され、ユーザーがすぐに参加できるようになります。 |
ガイドライン
効果的なコミュニケーション
アニメーションボキャブラリ を定義して使用して、アニメーションと遷移が一貫した意味を持ち、プログラム全体で一貫して使用されるようにします。 ほとんどのボキャブラリには、シーンとオブジェクトの外観と消失、ナビゲーション、基本的な操作 (ホバー、選択、クリック)、オブジェクト操作と操作 (移動、ドロップ、サイズ変更、スクロール、パン、ズーム、回転、フィルター処理)、注目を集めるエントリを含める必要があります。 効果的なコミュニケーションを行うためには、一貫した意味が不可欠です。
実用的な場合は常に、Windows アニメーションボキャブラリを使用します。 プログラムの対象ユーザーやニーズが異なる場合はありますが、一貫性と使い慣れ性の利点は、多くの場合、異なる利点を上回ります。 プログラムのボキャブラリが異なる必要がある場合は、Windows と同じ基本的なアニメーションの種類を使用しますが、プログラムに適した個性を与えます。
アニメーションボキャブラリの一般的なアニメーションや遷移に特定の意味を割り当てないでください。 フェードやディゾルブなどの特殊効果などの一般的な遷移は、特に意味を持たないため (表示または消える以外に)、自由に使用できます。
不正解:
別のする
この例では、クロスフェードを使用して次の項目に移動します。 クロスフェードには特に意味がないため、この切り替えはコンテキストを提供しません。
ボキャブラリエントリを明確に区別します。 関連するアクションは同様の効果を持つ場合があります (たとえば、ズームインやズームアウトには逆の切り替えが必要です)、関連のないアクションには明確に異なる効果が必要です (たとえば、ズームと回転を混同しないでください)。
現実の効果を現実的かつ一貫した状態に保ちます。 現実的なアニメーションと画面切り替えを使用する場合は、エクスペリエンスと現実世界の一貫性を保ちます。 ユーザーは、結果に驚いたり、混乱したり、誤解したりしてはなりません。 一貫性を保つため、メタファーを混在させないでください。
逆アクションの逆アニメーションを指定します。 これにより、ユーザーの期待を満たし、ボキャブラリが簡略化されます。 たとえば、ウィンドウがスライドインして表示される場合は、他の効果を使用せず、スライドしてウィンドウを削除します。
アニメーションを理解しやすくします。 ユーザーはアニメーションの目的をすばやく理解できる必要があります。 アニメーションを小さすぎる、短すぎる (50 ミリ秒未満)、またはユーザーが目的を理解できないほど微妙なアニメーションを作成できます。 このような場合は、意味を明確にするように再設計するか、削除します。
不正解:
ダイアログ ボックスする
この例では、効果は非常に小さく、微妙であるため、その目的を理解できるユーザーはほとんどありません。 再設計または削除する方が適しています。
パターン
ホバー フィードバック
- 応答性を高めるために、ホバー状態の開始または終了から 50 ミリ秒以内にアニメーションを再生するように努めます。
- すばやく表示するには、ホバー アニメーションの継続時間を 50 ミリ秒未満にします。
- ホバー効果のフェードイン/フェードアウトを使用します。 これにより、ホバー効果がクリックや選択のフィードバックとは明確に区別されます。
フィードバック をクリックする
- 応答を表示するには、クリックダウン イベントの 50 ミリ秒以内にアニメーションを再生するように努めます。 イベントをクリックしても、クリック フィードバックは必要ありません。
- すばやく表示するには、クリック アニメーションの継続時間を 50 ミリ秒未満にします。
- バックグラウンド フラッシュまたは点滅効果を使用します。 これにより、クリック効果がホバーや選択のフィードバックとは明確に区別されます。 クリックにはホバーが必要であるため、クリック フィードバックをスムーズに追加して、ホバー フィードバックを作成します。
選択フィードバックの
- 応答性を高めるために、選択または選択解除から 50 ミリ秒以内にアニメーションを再生するように努めます。
- すばやく表示するには、選択アニメーションの継続時間を 50 ミリ秒未満にします。
- フェードイン/フェードアウト選択四角形効果を使用します。 そうすることで、選択内容がホバーやクリックフィードバックとは明確に区別されます。
Progress フィードバックの
- 1 秒以内にアクションを実行できない場合は、アクティビティ インジケーターを使用します。 これを行うと、コマンドが受信されたことを示します。
- タスクに 5 秒以上かかる場合は、進行状況バーを使用します。 その他のガイドラインについては、「進行状況バーの」を参照してください。
- ユーザーが実行時間の長いタスクの効果を視覚化するのに役立つ進行状況フィードバック アニメーションを使用します。 アニメーションが役に立たない場合は、不要な進行状況フィードバック アニメーションを回避し、代わりに進行状況バーを使用します。
- 完了状態と障害状態が明確に特定できます。 ユーザーは、これらの最終的な状態をすばやく特定できる必要があります。
- 基になるタスクが進行していない場合は、進行状況の表示を停止します。 ユーザーは、進行状況が行われていないかどうかを判断し、それに応じて対応できる必要があります。
Attractors
拘束付き引き付け器を使用します。 情報が緊急、重大、またはユーザーの即時の動作に影響する可能性がある場合を除き、通常は状態を目立たずに変更し、ユーザーが自分で変更を検出できるようにする方が良いでしょう。 発見可能性ではなく、気が散る問題を解決します。
ワイヤレスステータスアイコンの
この例では、ワイヤレス ネットワーク通知領域アイコンは重大な問題にアニメーションを使用しますが、ユーザーは自分で弱い信号を検出できます。
適切なレベルの注意を引くアニメーションを選択します。 アトラクター アニメーションは、目的を達成するために十分な注意を払う必要がありますが、それ以上は必要ありません。 ユーザーが直ちに行動する必要がある場合は、ユーザーが探している場所に関係なく注意が必要な効果を選択します。 その他の状況については、「注意の適切なレベルを引き付ける」セクションを参照して、注意、注意可能性、緊急性の適切な組み合わせを取得します。
不正解:
ペーパークリップオフィスアシスタントスクリーンショット
Microsoft Office アシスタントは、自分自身に不必要な注意を引き付けた。
ユーザーが応答しない場合は、アニメーションを繰り返したり、連続アニメーションを使用したりしないでください。 代わりに、ユーザーが今すぐ行動しないことを選択したが、後で動作する可能性があるとします。 連続アニメーションを使用すると、ユーザーが他のものに集中することが困難になります。
リレーションシップ アニメーション を する
- リレーションシップ アニメーションを使用して、オブジェクトがどこから来たのか、どこに行ったかを表示します。
- リレーションシップ アニメーションは、選択したオブジェクトで開始または終了する必要があります。 ユーザーが現在対話していないオブジェクト間のリレーションシップは表示しないでください。 ユーザーがまったく気付いた場合、気が付くのは気が散ります。
イラスト/プレビュー
- プレビューを使用すると、ユーザーが最初にコマンドを実行しなくてもコマンドの効果を表示できます。 役に立つプレビューを使用することで、プログラムの効率と学習の容易さを向上させ、試用版とエラーの必要性を減らすことができます。
- 明確な解釈を持つ図とプレビューを使用します。 混乱を招く場合は、ほとんど価値がありません。
- ユーザーを圧倒しないように、一度に 1 つのイラストのみを再生。 複数の同時イラストが可能な場合は、マウスホバーまたは再生ボタンを使用して、ユーザーが興味を示すようにします。
- ウィンドウまたはページの主な目的である場合は、イラストを自動的に再生します。 それ以外の場合は、オプションの場合は、準備ができたらユーザーが再生できるようにします。
- 最適な速度でアニメーションを再生:彼らは理解するのが難しいほど速くはありませんが、彼らは見て面倒です。
オブジェクトの拡大/縮小
サイズ変更中にコンテンツをクリップしないでください。 コンテンツを追加する前にコンテナーを展開します。 コンテナーを減らす前にコンテンツを削除します。
不正解:
切り捨てられた電卓スクリーン ショット
この例では、コンテンツはサイズ変更中にクリップされます。
コンテンツの表示/非表示/変更
- 重要な情報を静的に表示します。 ユーザーは、段階的な開示を通じて重要な情報にアクセスする必要はありません。
コントロールまたはアフォーダンスの表示/非表示
ユーザーがウィンドウまたはウィンドウ内の任意の場所にポインターを置くとき、または全画面表示の場合はマウスの移動時に重要なコントロールを表示します。 ユーザーはこれらのコントロールを検索する必要がないため、検出を確実にします。
ホバー
を表示する方法を示す図この例では、ポインターがウィンドウの上にあるたびに、Windows Media Center によってコントロールが表示されます。
ユーザーがコマンドの上または近くにポインターを置いたときに、セカンダリ コントロールまたはコントロール アフォーダンスを表示します。 見つけやすくするために、場所を明確にし、ターゲットを大きくします。
セカンダリ コマンドスクリーン ショット
この例では、ポインターが右上隅付近にあるときに、Windows Live Messenger にセカンダリ コマンドが表示されます。
シーンの切り替え
物理シーンの切り替えを自然なマッピングと一致させる。 西洋の文化では左から右に読み、階層図は上から下に流れる。 したがって、今後の時間は左から右への移動で示されます。 次の物理シーンの遷移には、自然なマッピングがあります。
遷移 意味 左から タスク フローに戻る 右から タスク フローを進める 上から タスク階層を上に移動する 下から タスク階層を下へ移動する プログラムがサウンドを再生する場合は、シーンの切り替えとオーディオの切り替えを一緒に設計します。 たとえば、シーンが徐々にフェードアウトする場合、サウンドも徐々にフェードアウトします。 突然の音の遷移を持つことによってシームレスな視覚的な遷移を破壊しないでください。 その他のサウンドガイドラインについては、「サウンド を参照してください。
直接操作 を する
- 操作で物理的なジェスチャ (トシングなど) を使用する場合は、ジェスチャに対する自然な応答のようにアニメーションを設計します。 相互作用の原因を遷移効果とリンクします。 加速、減速、運動量、抵抗、重量、バウンス、回転などの現実の物理的特性をアニメーションに与えます。
- 直接的な操作性を維持するには、オブジェクトの接触点をポインターの下に滑らかに維持します。 ラグ、途切れ、または接触の損失は、直接操作の認識を破壊します。 操作中にオブジェクトが消えることはありません。
切り替え の並べ替え、フィルター処理、または並べ替え
- 単純な変更の場合は、画面切り替え全体を表示します。 ユーザーは、移行全体に簡単に従うことができるようになります。 単純な変更には、4 つの項目以下が含まれます。
- 複雑な変更を加える場合は、動きの終わりを強調して、動きを遅くし、残りの部分に目を塗りつぶします。 そうすることで、動きがはるかに応答性が高く、順序が整った感じになります。
パフォーマンスの切り替え
- 2 つまたは 3 つのステージで低速な切り替えを実行して、より速く、すぐにインタラクティブに表示されるようにすることを検討してください。 必要に応じて、次の構成順序を使用します。
- 外部フレーム
- バックグラウンド
- 初期コンテンツ (必要に応じて一時的な表現を使用)
- プライマリ コントロール (ユーザーがすぐに対話できるように)
- セカンダリ コントロールとその他の UI 要素
- 最終的なコンテンツ (一時的な表現が使用された場合) フェードやスライドなどの画面切り替えを使用して、コンポジションを滑らかに、順序を整え、洗練して表示します。
衛星写真とグリッドスクリーン ショット
"鳥の目" ビューでスクロールすると、Bingマップに一時的なグリッドの背景が表示されます。 これにより、ユーザーは最終的なコンテンツがレンダリングされる前に、すぐにスクロールし続けられます。
特別なエクスペリエンスアニメーション
- アニメーション化されたスプラッシュ 画面 (および静的スプラッシュ画面) を再考します。 多くの場合、スプラッシュスクリーンはプログラムの読み込みに要する時間に注意を引くだけで、彼らはすぐに歓迎を損ないます。 スプラッシュ画面は、ユーザーの操作が不可能な場合にのみ表示される場合は許容されますが、実用的な代替手段として、読み込み中でもユーザーがすぐに操作できるようにプログラムを設計することをお勧めします。
- アニメーション化されたスプラッシュ画面に 3 秒以上かかる場合は、[Skip Introduction]\(概要のスキップ\) コマンドを指定します。 スプラッシュスクリーン上の任意の場所をクリックすると、それを閉じる必要もあります。 または、最初の期間の後に短いバージョンのアニメーションを使用します。
パフォーマンス
ユーザーがプログラムのアニメーションや切り替えを待たないようにします。 実用的な場合は、短いアニメーションと切り替え (200 ミリ秒未満) を使用します。 より頻繁な操作には、より高速なアニメーション (100 ミリ秒) を使用します。 ユーザーが実行中に作業を続けることができるように、長いアニメーション (通常は進行状況のフィードバック、イラスト、特別なエクスペリエンス パターン) を 1 秒以上設計します。
実行時間の長いアニメーションを設計して、ユーザーがアニメーションの実行中に対話できることを明確にします。 視覚的な手がかりからできないと示唆された場合、ユーザーは引き続き作業を試みることはありません。
ステータス バーの進行状況バーのスクリーン ショットを
Windows Internet Explorer のこの例では、ステータス バーのキーが低い進行状況バーは、ユーザーが操作する前に完了を待つ必要がないことを示しています。
CPU 負荷の高いタスクには軽量アニメーションを使用します。 これにより、タスクに完全な処理能力が与えます。 さらに、ユーザーは、軽量アニメーションがタスクの CPU 負荷が高い理由であるとは認識しません。
アニメーションまたは切り替え中にアクティビティ インジケーターを表示しないでください。 これを行うと、効果が破棄されます。 アニメーションと画面切り替えをすぐに開始できるように設計します。
十分なシステム リソースがない場合は常に、適切に低下するようにアニメーションを設計します。 アニメーションは、必要なリソースの数が少ない (長さが短い、フレーム レートが低いなど) バリエーションがある場合や、まったく実行されていないことによって、低下する可能性があります。 使用可能なリソースに関係なく、アニメーションの品質が高く、ソフトウェアのバグではなくアニメーションのように見えるようにします。
不正解:
デスクトップスクリーンショット
この例では、十分なシステム リソースがない場合でも、ウィンドウの復元の切り替えが使用されます。 その結果、固定されたフレームはバグのように見えます。 リソースが使用できない場合は、切り替えなしでウィンドウを表示することをお勧めします。
アニメーションの特性
適切に設計されたアニメーションと遷移には、通常、次の特性があります。
短い期間。 ほとんどのアニメーションは、100 ~ 300 ミリ秒 (1/6 秒 (167 ミリ秒) または 1/4 秒 (250 ミリ秒) のいずれかである必要があります。 (特別なエクスペリエンスと進行状況のフィードバックは長くなる可能性があります)。より頻繁に操作するには、アニメーション時間を短縮します。 一般に、アニメーションの完了には時間がかかり、理解に時間がかかり、遅い感じがします。
応答。 アニメーションは、開始イベントまたはユーザー アクションから 50 ミリ秒以内に開始する必要があります。 開始時間が長いと、応答しなくなると感じます。
加速/減速。 自然に見える場合、ほとんどのアニメーション効果は開始時に加速し、停止時に減速する必要があります。 応答性を高めるために、アニメーションを迅速に開始するように設計します。 コントロールされたアニメーションを表示するには、最後にソフト ランディングを設定するようにアニメーションを設計します。 これはモーション エフェクトにも適用されますが、ズームやフェードなど、動きを示唆する効果にも適用されます。
ほとんどのアニメーションは、応答性が高く、制御された感覚を持つには、速い開始とソフトな終わりを持つ必要があります。
動議。 特にモーションを表現するアニメーションは加速および減速する必要があるため、アニメーションの継続時間が非常に短い場合を除き、線形モーションを使用しないでください。 モーションは、オーバーシュートを行わずに、最初から最後までショート パスを取る必要があります。 完全なモーション パスは必ずしも必要であるとは限りません。 必要に応じて、動きの終わりを強調し、遅くしながら、残りの部分に目を埋めます。 そうすることで、動きがはるかに応答性が高く、順序が整った感じになります。 複数のオブジェクトのモーションを同時にアニメーション化する場合は、少し異なるタイミングで少し異なるパスを与えて、より自然に感じることができます。
フレーム レート。 ほとんどのアニメーションでは、1 秒あたり 20 フレームのフレーム レートを使用する必要があります。 アニメーションが特別なエクスペリエンスを目的としているか、プログラムの主な目的に関連している場合は、スムーズさとリアリズムを向上させるために、1 秒あたり 24 30 フレームの高いレートを使用することを検討してください。
規模。 アニメーションを設計して、意図した用途の範囲全体で適切に動作するようにします。 たとえば、ページ切り替えは、すべてのページ サイズで機能するように設計する必要があります。
人格。 アニメーションは、人工、気まぐれ、または低速ではなく、自然で落ち着いた効率的なアニメーションを設計します。
アニメーションテキスト
- 切り替えを使用してテキストを表示できますが、はテキストを継続的にアニメーション化しません。 アニメーション化されたテキストは、多くの場合、静的テキストよりも気が散り、読みにくいです。
例外:
- 従来はアニメーション化されている状況でテキストをアニメーション化し、アクセシビリティ対応の代替手段を提供することもできます。
- テキストの目的が主に装飾的な場合は、テキストをアニメーション化できます。
創造的に設計された zune インターフェイススクリーン ショット
この例では、Zune はテキストをアニメーション化しますが、その目的は主に装飾です。 ユーザーがテキストを慎重に読まない場合、問題はありません。
消費電力の削減
- 電力消費量を減らすためにアニメーションを設計します。 アニメーションが適切に設計されている場合、電力消費量を大幅に増加させるべきではありません。 電力消費量を削減するには:
- 表示がオフのときにアニメーション化を停止します。 電力を節約する目的でディスプレイがオフになっている場合があります。
- ユーザーが開始しない実行時間の長いアニメーションは使用しないでください。 高解像度の定期的なタイマーを使用するアニメーションでは、プロセッサの電源管理の効率が低下します。 また、アニメーションが完了したら、高解像度の定期的なタイマーを必ず無効にしてください。
- システムがアイドル状態になったら、すべてのアニメーションを中断します。 ユーザーがアイドル状態になるまでの非アクティブな期間は、コントロール パネルの電源オプションによって決まります。
アクセシビリティ
重要な情報を伝える唯一の方法としてアニメーションを使用しないでください。 アニメーションは、視覚障害のあるユーザーがアクセスできないため、役に立つが重要ではない情報を伝える必要があります。
次のような、同等の情報が他の方法で利用できることを確認します。
- 検査による。 ユーザーは、アニメーションに関係する画面またはオブジェクトを見て、同等の情報を特定できます。
- 単純な操作による。 ユーザーは、ホバー、クリック、またはダブルクリックによって同等の情報を決定できます。
ホット スポットがスクリーン ショット
Bingホーム ページには、いくつかのホット スポットを表示する初期アニメーションがあります。 ユーザーは、カーソルを近くに移動してホット スポットを表示することもできます。
"同等の情報" は同一の情報を意味するわけではないことに注意してください。 情報の形式が異なる場合や、単純な推論が必要な場合があります。
必要に応じて、遷移中に変更されたオブジェクトに入力フォーカスを設定します。 これにより、支援技術は変更が発生した場所を検出できます。 ただし、ユーザーがキーボードを使用している場合は、入力フォーカスを変更しないでください。
オブジェクトをすばやくフラッシュまたはサイズ変更するアニメーションや画面切り替えを使用しないでください。 点滅や画面の急激な変化は、発作障害やその他の神経障害を持つ人々の問題を引き起こす可能性があります。
ユーザーがプログラムのアニメーションと切り替えをオフにすることを許可します。 この機能をサポートするには、Windows の [簡単操作センター] の [不要なアニメーションをすべてオフにする] オプションを考慮してください。
開発者: SystemParametersInfo API を使用してアニメーションが有効になっているかどうかを判断できます。
ユーザーがプログラムのアニメーションをオフにすることを想定してタスクを設計します。 そうしても、タスク フローが大幅に中断されないようにします。
アクセシビリティガイドラインの詳細については、「アクセシビリティ を参照してください。
ドキュメンテーション
- 可能な限りアニメーションを参照しないでください。 代わりに、アニメーション化されているオブジェクトと、必要に応じてアニメーションの種類を参照します。
- 技術的なドキュメントを除き、移行を参照しないでください。 代わりに、最終的または初期状態のオブジェクトを参照してください。
- ユーザーがアニメーションを明示的に開始する場合は、動詞の再生を使用します。それ以外の場合は、技術ドキュメントに動詞の使用を使用します。
例：
- アイコンが跳ね返り始めると、アイテムに注意が必要になることがわかります。
- まず、印刷する写真を選択します (選択時に写真が拡大されることに注意してください)。
- クロスフェード遷移を使用して、オブジェクトの状態をシームレスに変更します。