アニメーションと切り替え

アニメーションと画面切り替えを戦略的に使用すると、プログラムの理解が容易になり、スムーズで自然で、より高品質に感じられ、より魅力的になります。 しかし、アニメーションと切り替えを無償で使用すると、プログラムが気を散らし、迷惑になる可能性があります。

アニメーションは、時間の経過と同時に動きや変化の外観を与えます。 アニメーションを使用して、フィードバックを提供したり、アクションの効果をプレビューしたり、オブジェクト間の関係を表示したり、変更に注意を向けたり、タスクを視覚的に説明したりできます。

Microsoft Windows では、バックグラウンド フラッシュ アニメーションを使用して、オブジェクトがクリックされたことをフィードバックします。

画面切り替えは、ユーザー インターフェイス (UI) の状態の変更やオブジェクトの操作中にユーザーの方向を維持し、それらの変更をジャラリングではなくスムーズに感じさせるために使用されるアニメーションです。 適切な遷移は自然に感じ、多くの場合、ユーザーが現実世界のオブジェクトと対話しているという錯覚を与えます。

Windows デスクトップ ガジェットでは、簡潔な状態と詳細状態の間のスムーズな切り替えが使用されます。

一般に、最適なアニメーションと切り替えは、ユーザーと非口頭で通信し、状態の変更をより自然で目立たなくするために使用されます。 対照的に、最も効果的でないのは、何も伝えたり、不必要な注意を引いたりしないという点で無償です。 アニメーションは、コミュニケーションの二次的な形式として最適に使用されます。 ユーザーは、有用だが重要ではない情報を伝え、アクセス可能にするには、他の方法で同等の情報を決定できる必要があります。

メモ：ソフトウェアのブランド化、サウンド、アクセシビリティに関連するガイドラインは、別の記事で示されています。

これは適切なユーザー インターフェイスですか?

決定するには、次の質問を検討してください。

アニメーション

次の条件が適用されますか?

• アニメーションは、フィードバックの提供、関係の表示、原因と効果の表示、重要な変更への注意の引き出しなど、役立つ何かを視覚的に伝えます。
• アニメーションを表示することは重要ではありません。 同等の情報は別の方法で取得できます。 次の場合、ユーザーはアニメーションの恩恵を受けられません。
  • アニメーションがオフになっています。
  • 彼らの注意は他の場所にあります。
  • 彼らは視覚障害を受ける。
  • アニメーションは別のウィンドウで隠されています。
  • システムパフォーマンスが不十分なため、アニメーションは再生されません。
• アニメーションは、ユーザーの生産性には影響しません。 次のいずれか:
  • これは迅速に行われます (200 ミリ秒以下)。
  • 操作に干渉しないか、中断される可能性があります。
  • ユーザーは、とにかく待機する必要があります。
• アニメーションはユーザーのフローには影響しません。
  • これは、ユーザーの注意の中心にあるか、タスクを完了する際に重要または役立つ、注目の中心外の何かに注意を引きます。
  • それは簡単に無視可能であり、気を散らしたり迷惑にしたりしません。
  • 面倒になることはありません。 ユーザーは、繰り返し表示した後でも、適切で楽しいと見つけます。

その場合は、アニメーションの使用を検討してください。

Transitions

オブジェクトまたはシーンは状態を変更しており、アニメーションを使用するための上記のすべての条件と、次のいずれかの条件が適用されますか?

• 状態の変更は、概念的に見当違い、混乱を招く、または理解しにくいものです。
• 状態の変化は視覚的に厄除であり、継続性や滑らかさが欠けているか、点滅しています。または、特に大きな画面領域が含まれている場合は、不自然、研磨されていない、または品質が低いように見えます。
• 遷移を使用すると、状態の変更が速く表示されます。
• 状態の変更は、特別なユーザーの注意を払う価値があります。

その場合は、遷移の使用を検討してください。

設計概念

アニメーションと切り替えは、情報を視覚的に伝える効果的な方法です。そうしないと、説明するテキストが必要になるか、ユーザーに見逃される可能性があります。

正しくない:

正確:

アニメーションを使用すると、同じ情報が伝達されますが、自然で目立たない方法で伝達されます。 1000 回表示されるのはどれですか?

アニメーションと画面切り替えは、成功するために注意を必要とする必要はありません。 実際には、多くの場合、ユーザーが認識する必要のないプログラムメカニズムに注意を引かないようにするために使用されます。 多くの成功したアニメーションは非常に自然であるため、ユーザーはそれらを認識していません。むしろ、ユーザーは自分の不在に気付くだけです。 出現頻度は微妙な必要性を高めるので、注意に値する頻度の低いイベントに注意を払う効果を節約します。

注意を引かないようにする [スタート] メニューの切り替え。

プログラムの理解を容易にし、スムーズに感じるだけでなく、 適切に設計されたアニメーションと切り替えは、プログラムに個性、キャラクター、スタイルを追加するための優れた方法です。 自然で現実世界の感覚を与えることで、ユーザー エクスペリエンスをよりイマーシブで魅力的にすることができます。

Windows 7 では、現在のマウス位置とプログラム アイコンの色に基づいて、ポイント時にタスク バー ボタンが強調表示されます。 このアプローチは視覚的に魅力的ですが、微妙で、謙虚な性格を伝えます。

ただし、アニメーションと画面切り替えは、明確な目的を果たすときに最も効果的で歓迎されます。 パフォーマンスを大幅に損なうことなく、使いやすさ、滑らかさと流れ、品質の認識を向上させるために使用する必要があります。

一部の種類のアニメーションはユーザーの注意を引くために使用されますが、注意が適切であり、ユーザーの思考のトレーニングを中断する価値があることを確認してください。 人間の目は動き、特に末梢運動に敏感です。 点滅するタスク バー ボタンや回転する通知領域アイコンがある場合、ユーザーが集中するのが難しい場合があります。 アニメーションを使用してユーザーを中断または気を散らしたり、ユーザーの注意を引かないものに注意を引いたりしないようにします。

正しくない:

ユーザーが重要な操作をすぐに行う必要がない限り、プログラムはタスク バー ボタンを点滅させるべきではありません。 この場合、ユーザーが行う必要があるのは、プログラムをアクティブ化することだけです。

アニメーションと画面切り替えは、プログラムで必要になるため、単なる理由ではなく使用できます。 また、アクセシビリティのために、重要な情報を伝える唯一の方法としてアニメーションを使用しないでください。 ユーザーが別の方法で同等の情報を取得できることを確認します。

適切なアニメーションと画面切り替えの属性

適切なアニメーションと切り替えは、これらの属性のバランスを取ります。

• 明確に意図的です。 適切なアニメーションは、情報を伝えるか、相互作用をリアルに感じるか、注目に値するものに注意を引く必要があるためです。 そして、意図的なアニメーションは正確です。アニメーションにタスクが実行されていることが示されている場合は、タスクが実際に実行されているためです。

正しくない:

この例では、完全に充電されたバッテリーが充電されていることをアニメーションで示しています。

• 滑らかで連続して見てください。 適切なアニメーションでは、リレーションシップを示し、場所とコンテキストの感覚を提供することで、シーンまたは要素の状態の変化の間の継ぎ目がスムーズに削除されます。 継続性は、ユーザーが自分がどこにいるかを理解し、どこから来たのかを理解するのに役立ちます。

Windows 7 タスク バー ウィンドウプレビューは、ユーザーがプログラム間を移動すると、継続性のために変形します。

• 現実的です。 適切なアニメーションは、オブジェクトの実際の物理的なプロパティと動作をシミュレートします。 これは、ユーザーが対話の結果を予測して理解するのに役立ちます。 現実世界を正確にモデル化する必要はありませんが、現実的なアニメーションを使用する場合は、現実世界との一貫性を保つ必要があります。 ユーザーは、特に直接操作に使用されるアニメーションで、結果に驚いたり混乱したりすることはありません。

この例では、Windows 7 タスク バーで使用される "移動" アニメーションは、静的な挿入ポイントよりも現実的です。

• 本物です。 現実世界に見つからないオブジェクトであっても、別の、しかし関連するオブジェクトの実際の動作に基づいて自然に見えることがあります。 このメタファーは、リレーションシップが意図した目的と動作を明確に伝える場合にのみ機能します。

この例では、Windows 7 で使用されるウィンドウ "スキージ" アニメーションは、実際の世界でのガラス ウィンドウの動作と一致しているため、本物と感じています。

• 自然なマッピングを使用します。 自然なマッピングは、物理的または文化的です。 たとえば、文化的に基づく自然なマッピングは、西洋の文化では、人々が左から右に読み取るという事実から始まるかもしれません。 したがって、オブジェクトの時間シーケンスを表すために、中央のオブジェクトは現在、左側のオブジェクトは過去から、右側のオブジェクトは将来です。 今後の時間は、左から右への移動によって示されます。

この例では、再生すると位置が左から右に移動するため、Windows メディア プレーヤー コントロールには自然なマッピングがあります。

• 個性を持つ。 適切に選択されたアニメーションは、パーソナリティ、キャラクター、スタイルをプログラムに追加するための優れた方法です。 ユーザー エクスペリエンスをよりイマーシブで魅力的なものにすることができます。 アニメーションの種類によって通信内容が決まりますが、アニメーションを実行する具体的な方法は、プログラムの個性を示します。 良いアニメーションは、深刻か気まぐれか、またはその中間のどこかに関係なく、プログラムに適した個性を投影します。

この例では、Zune のアニメーションテキストと動的なパースペクティブの使用は、その個性を形作るのに役立ちます。

• 外観と応答性。 適切なアニメーションは、他の操作からユーザーをブロックしたり、ユーザーにwatchを強制したりすることで、ユーザーの生産性を低下させません。 どんなに自然で魅力的なプログラムのアニメーションであっても、誰もそれらを排他的に待ちたくありません。 優れたアニメーションは、ソフトランディングで速いスタートを切ることで、耳障りになることなく応答性が高く見えます。 応答性の高いアニメーションでは、目的をすばやく伝えることもメリットがあります。 ユーザーは、アニメーションが何を行っているか、いつ実行されるかを把握するために、長い間アニメーションをwatchする必要はありません。 直接操作の場合、応答性の高いアニメーションは、直接的で魅力的な現実世界の感覚を維持するために不可欠です。 直接感じるには、オブジェクトの接触ポイントは、操作全体を通してスムーズにポインターの下に留まる必要があります。 ラグ、途切れた応答、または接触の損失は、直接操作の認識を破壊します。

この例では、操作全体を通してユーザーの指の下に接触点を維持することで、タッチ パンの切り替えが応答性を感じます。

• 適切なレベルの注意を引きます。 良いアニメーションは通常、微妙であり、その目的を果たすために必要な注意のみを引きます。 その結果、彼らは気を散らす、迷惑な、過度に複雑、過度に長い、または反復的ではない。 繰り返し視聴しても面倒になることはありません。

この例では、Windows 検索は一致する検索単語に一時的に注意を引き、その後フェードダウンします。

• 真に特別な場合にのみ特別に見てください。 頻度は微妙な必要性を高めるので、一般的な相互作用には単純なアイデアを簡単な方法で伝える単純なアニメーションが必要です。 特別でまれなエクスペリエンスのために、特別で複雑なアニメーションを予約します。

この例では、Windows は起動時に注意を引くアニメーションを使用してエクスペリエンスを特別なものにしますが、このようなアニメーションは他の場所では不適切です。

これらの属性のいずれかが削除された場合に全体的なエクスペリエンスが損なわれると、適切なバランスを達成したことがわかります。

アニメーション ボキャブラリの作成

優れたアニメーションは効果的な視覚的なコミュニケーションに関するものであり、一貫性はその有効性にとって非常に重要です。 シーンを右から次のシーンに進めるなど、特定の画面切り替えを使用する場合は、その目的に使用される唯一の遷移である必要があり、その切り替えは他の目的には使用しないでください。 同じアニメーションに異なる意味を割り当てると、コミュニケーション能力が低下します。 特定のアニメーションと遷移を特定の意味に割り当てることで、アニメーション ボキャブラリを作成します。

この問題は、ユーザーが意味を割り当てる可能性が高くない一般的なアニメーションや切り替えに適用されます。また、その目的が認識できない場合には適用されません。 たとえば、フェードなどのアニメーションやディゾルブなどの特殊効果は特に意味がないため、自由に使用できます。

適切なボキャブラリは、オブジェクトの現実世界の物理的な動作をモデル化するアニメーションを割り当てます。 現実の世界に対応しないオブジェクトまたはアクションにアニメーションを割り当てる必要がある場合は、オブジェクトが実際にどのように動作するかを示すアニメーションを選択します。

[スタート] メニューは現実世界のオブジェクトではありませんが、ホバー効果は、アクティブ化されると現実世界のオブジェクトのように点灯します。

ボキャブラリ内の各アニメーションは明確に区別する必要があります。 アニメーションは、関連付けられているアクションが同様に関連している場合にのみ、同様の動作を持つ必要があります。 たとえば、移動遷移ではナビゲーションが提案されるため、さまざまな方向からの移動遷移を使用して、さまざまな種類のナビゲーションを示すことができます。

ユーザーが混乱、驚き、または予期しない結果を見つけた場合、アニメーションと切り替えがうまく伝わっていないことがわかります。 一般に、1 つの目的を達成する方が、複数の目的がそれほどうまくいかない場合よりも適切です。

理想的には、アニメーションボキャブラリは、それらを必要とするプログラムのすべての領域で包括的である必要があります。 少数の相互作用に自然なアニメーションしかない場合は、そうでないものに注意を引きます。

Windows アニメーションボキャブラリの詳細については、この記事の 「使用法パターン 」セクションを参照してください。

適切なパーソナリティの設計

アニメーションの種類によって通信内容が決まりますが、アニメーションを実行する具体的な方法は、プログラムの性格を表し、ブランドを強化します。

プログラムのパーソナリティは、そのタスクの性質とそのユーザーの個性を反映する必要があるため、任意の選択ではありません。 むしろ、適切に設計されたパーソナリティは本物のように感じるべきです。それを強制しようとしないでください。 パーソナリティは、ユーザーに感情的なつながりを作る必要があります。 考慮すべきいくつかの要因:

• タスク： 深刻または楽しい;省略可能または必須。
• 結果： 深刻または未成年。
• コスト： 無料または購入;購入した場合は、中程度の価格または高価です。
• ユーザーフォーカス: ターゲット ユーザーのグループが比較的狭い、または一般的な対象ユーザーが広い。
• ユーザー環境: プロフェッショナル、カジュアル、または自宅。
• ユーザーの年齢: 若いまたは古い。
• 使用頻度: 頻繁または頻度が低い。

これらの要因の組み合わせは、プログラムの適切な性格を決定するのに役立ちます。 一般的な種類のプログラムに適した組み合わせをいくつか次に示します。

生産性アプリケーション

当然ながら、生産性アプリケーションは生産性に重点を置く必要があります。 いくつかの特別なエクスペリエンスが目立つことはできますが、他のほとんどのアニメーションには次の特性が必要です。

• Small
• 自然でリアル
• 微妙で落ち着いた
• 高速で効率的
• 緩和

ユーティリティ

ユーティリティは一般的に簡単に使用されるため、アニメーションの使用はより積極的になる可能性があります。

• 現実的、説明的、自明
• Safe
• 従事

エンターテイメント,ゲーム

これらのプログラムの目的はユーザーを引き付け、喜ばせるため、アニメーションと切り替えは、次の特性を持つことによって、より積極的になる可能性があります。

• 大規模 (エクスペリエンスの不可欠な部分になる可能性があります)
• 人工、シュール
• インパクトのある、活気に満ちた
• 感情、遊び心、気まぐれ
• エネルギッシュ

感情的なつながりを作ることは、エンターテイメントプログラムにとって非常に重要なので、そうすることで、ユーザーがプログラムに恋をするのに役立つ場合は、いくつかのルールを曲げるのが許容されます。 たとえば、ほとんどのユーザーが頻繁にプログラムを使用する可能性が低い場合、アニメーションや遷移が 100 回目以降に面倒になる場合は許容されます。

一般に、小さくて自然で、落ち着いて効率的で、リラックスしたアニメーションや画面切り替えが最も安全なベットです。 これらの特性を持つ遷移は、通常、最初から最後まで最短のパスを取り、迅速に開始し、ソフトに終了し、オーバーシュートを行いません。 また、適切に設計された遷移は、それらが使用される距離の全範囲にわたってうまく動作するように設計されています。

アニメーションのパフォーマンス

アニメーションを設計するときは、プログラムを効率的に使用するユーザーの能力に影響を与えないことを確認します。 一般的に、アニメーションは目的を達成するのに十分な速度を発揮しますが、応答性を妨げたり、注意を必要としたり、疲れ果てないように十分に速くします。

正しくない:

このページの回転アニメーションは魅力的で現実世界の感覚を持つ一方で、ページの回転に時間がかかるため、ユーザーの生産性が低下します。

短い切り替え (200 ミリ秒以下) は特殊なケースです (特に、遅延が発生する場合は特に)。ユーザーは、1 秒待つ必要があることを認識するためです。 ユーザーは、次の場合にこのようなアニメーションを待つ必要があります。

• 認識される待機は非常に短い (200 ミリ秒以下)。
• この切り替えにより、相互作用がより滑らかで自然に感じます。
• 切り替えにより、相互作用の応答性が向上します。
• 遅延は、ユーザーが対話を制御し続けるのに役立ちます。

タスク バー ボタンの並べ替えアニメーションは非常に短く、操作がより自然に感じるため、ユーザーは短い遅延を受け入れます。

アニメーションがパフォーマンスに悪影響を与える可能性がある方法は、速度、応答性、認識の 3 つです。

速度の場合、一部のアニメーションは CPU を集中的に使用するタスクよりも視覚的な突き板であるため、最後に行う必要があるのは、CPU を集中的に使用するアニメーションを使用してこれらのタスクを遅くすることです。 CPU 負荷の高いアニメーション ("重い" アニメーション) は、次の傾向があります。

• 多数の要素を個別に移動する必要があります。
• 長い期間または距離で再生します。
• 大量の画面領域を含めます。
• 数学的に集中的です。

パフォーマンスへの影響が少ないアニメーション:

• 1 つのオブジェクトを含む。
• 短い期間または短い距離で再生します。
• 少量の画面領域を含めます。
• 数学的に集中的ではありません。

優れたパフォーマンスを確保するには、負荷の高いアニメーションは CPU 負荷の高いタスクにのみ使用する必要があります。一方、ライト アニメーションはどこでも使用できます。

応答性を高めるには、アニメーションの実行中にユーザーが対話できるように、ほとんどのアニメーションと切り替えを設計する必要があります。 アニメーションがプロセスの一部でない限り、ユーザーの主要な操作から独立させ、ユーザーが中断できるようにします。

アニメーションは、実際にはタスクのパフォーマンスに悪影響を及ぼさない可能性があります。ただし、ユーザーは、タスクのパフォーマンスに悪影響を与える可能性があります。 たとえば、パフォーマンスが低下しない場合でも、CPU を集中的に消費する低速なタスクでは重く見えるアニメーションを使用しないでください。これは、ユーザーがアニメーションがタスクが遅い理由であると結論付ける可能性があるためです。 何かが遅く見える場合は、遅く感じるので、シンプル、軽量、高速を感じるアニメーションを使用することをお勧めします。 CPU を集中的に使用するタスクにアニメーションを使い始めるのに役立ちます。

危険：

Windows ファイル コピー ダイアログのアニメーションはファイル コピーのパフォーマンスを損ないませんが、ユーザーにそう思われるリスクがあります。

また、危険:

この例では、Windows エクスプローラー アドレス バーの見栄えの遅い進行状況アニメーションを使用すると、一部のタスクは痛みを伴うほど遅く見えます。

アニメーションと画面切り替えの品質が非常に低いため、エクスペリエンスの滑らかさが低下し、エンゲージメントが低下する場合、価値はありません。 品質を維持するには、十分なシステム リソースが使用できない場合に、適切に低下するようにアニメーションを設計する必要があります。 アニメーションは、必要なリソースが少ない (短い長さやフレーム レートが低いなど) バリエーションがある場合や、まったく実行されていないことによって低下する可能性があります。 使用可能なリソースに関係なく、アニメーションの品質が高く、ソフトウェアのバグではなくアニメーションのように見えるようにします。

最後に、ユーザーがプログラムのアニメーションや切り替えが生産性を損なうと信じている場合は、一部のユーザーがオフにしたい可能性が高くなります。 この機能をサポートするには、Windows Ease of Access Center で見つかった 不要なアニメーションをすべてオフにする オプションを考慮してください。

適切なレベルの注目を集める

一部の種類のアニメーションと画面切り替えは、ユーザーの注意を引くために特別に設計されていますが、目的を十分に果たすために適切なレベルの注意を引くように設計する必要があります。 注目を集めるさまざまな方法と、適切なものを選ぶ方法は何ですか?

アニメーション効果

アニメーション効果が異なると、さまざまなレベルの注目が集まる。 次の一覧は、最も注意を引く方法から始まる、最も一般的な方法をまとめたものです。

• 急速な点滅。 すぐに注意を払う必要があります。 フラッシュが発生している場所に関係なく、ユーザーの集中力を損なうことができます。
• 中程度の点滅。 同じですが、頻度が低いほど注意が必要ありません。
• バウンス。 周辺視力で顕著で、本質的に比較的要求が厳しい。 ユーザーは気付く可能性がありますが、期間が短い場合にのみ他の場所に集中し続けることができます。
• モーション。 周辺機器の視覚では顕著ですが、要求は厳しくありません。 ただし、複雑または 3-D モーションは、単純なモーションや 2-D モーションよりも注目を集めます。 ユーザーは気づく可能性がありますが、他の場所に集中し続けることができます。
• 中程度のパルス。 目に見えますが、周辺視力に気が散りません。 ユーザーは引き続き他の場所に集中できます。 明るさ、色、サイズをパルスできます。
• 遅いパルス/光る。 目立ちますが、微妙です。 静的効果よりも注目を集めますが、ユーザーが既に見ている場合を除き、アニメーションに気付かない場合があります。
• フェード。 目立たなくなります。 静的効果よりも注目を集めますが、ユーザーが既に見ている場合を除き、アニメーションに気付かない場合があります。
• 静的な強調表示/輝き。 ユーザーが見た目を選択したが、他の場所にある場合は注意を必要としない場合は顕著です。
• アンビエント/ナチュラル。 自然で現実世界の外観を持つことで意図的に目立ちません。

プログラムまたは機能に適したアプローチを決定するには、これらの要因が機能のシナリオとどのように関連しているかを検討します。

たとえば、インスタント メッセージ プログラムを設計していて、誰かがユーザーにメッセージを送信したとします。 このシナリオでは、ユーザーの注意が必要です。どこでも目立つ必要があり、通常、ユーザーは迅速に応答する必要があります。 このシナリオは、中程度の点滅アニメーションが適していることを示唆しています。 これに対し、印刷ジョブが完了したことをユーザーに通知するとします。 ユーザーは、他の場所で引き続き集中して生産的に作業できる必要があります。ユーザーが気付かない場合は許容されます。 このシナリオは、中程度から低速のパルスまたは光彩が適切な選択であることを示唆しています。

Duration

注意を引くアニメーションの適切な期間は、シナリオと使用されるアニメーションの特定の種類によって異なります。 アニメーション効果に必要な注意が高いほど、期間は短くなります。 少し注意を必要とする非常に微妙な効果(遅い脈動など)は無期限に再生できますが、注意を要求する効果は1秒から3秒の間でのみ再生する必要があります。 長い何でも、アニメーションが圧倒的で迷惑になるリスクがあります。

Windows 7 では、タスク バーが 1 秒間だけ注目を集めて点滅します。 もはや迷惑でしょう。

効果の減衰

ユーザーがすぐに応答しない場合は、他の操作を行うのに忙しく、中断したくないという前提に基づいて、注意を払うアニメーションを設計する必要があります。 したがって、あなたの目標は、それを要求せずに注目を集めるべきです。

それを要求せずに注目を集めるの適切なバランスを取得するには、時間の経過と同時に効果の強度を減衰させます。 たとえば、注意を引くために、最初は効果を強くし、その後効果を迅速に遅くすることができます。 そうすることで、魅力的な力は主に初期効果によって決まりますが、ユーザーの全体的な印象は主にその仕上げによって決まります。

Windows 7 では、タスク バーのフラッシュ効果が最後に遅くなります。

PowerPoint はどうですか?

Microsoft PowerPoint の切り替えは、多くの場合、これらのガイドラインに意図的に違反します。これは、スライドの切り替えに注意を向け、ユーザーが切り替えるのを待つ必要があるためです。 さらに、特に意味がないため、スライドが変化しているという事実を超えて何も伝えません。

PowerPoint スタイルの画面切り替えは、適切に使用する場合、次の目的があります。

• 発表者に一時停止を強制することで、長いプレゼンテーションをより小さなチャンクに分割します。
• 彼らは、プレゼンテーションの変化に対する観客の注意を引き、人々が自分の心が疑問に思った場合に再び焦点を当てるのを助けます。
• 単調な感じや圧倒されないように、プレゼンテーションにリズムを与えます。
• 彼らのスタイルは、発表者または資料の個性を反映しています。

これらはプレゼンテーションの重要な目標ですが、このような切り替えはほとんどの種類のプログラムの UI で不要な注意を引き、すぐに面倒になります。

要するに： PowerPoint スタイルの切り替えをプログラムのモデルとして使用しないでください。

6 つの操作のみを行う場合...

1. アニメーションと切り替えを使用して、プログラムの理解を容易にし、スムーズで魅力的な感じにします。 明確な目的を持っている必要があります。 アニメーションは、プログラムに不要な注意を引くことができるという理由だけで使用しないでください。
2. アニメーションボキャブラリを定義し、プログラム全体で一貫して使用します。 必要に応じて、Windows 7 アニメーション ボキャブラリを使用します。
3. アニメーションの特性を使用して、プログラムの個性を与え、そのブランドを強化します。
4. ほとんどのアニメーションをシンプル、簡潔、微妙にします。 アニメーションでは、成功するために注意を払う必要はありません。 アニメーションが適切で自然な場合、ユーザーは存在しないことに気付くだけです。
5. アニメーションを高速かつ応答性に優れ、軽量な操作性を実現します。 どんなに魅力的なアニメーションであっても、誰も彼らが彼らを待っているように感じるつもりはありません。 重いアニメーションを適切に劣化するように設計します。
6. 長期的に向けて設計します。 アニメーションが煩わしい、気が散る、面倒な場合は、再設計するか削除します。

使用パターン

アニメーションには、いくつかの使用パターンがあります。

使用法	説明
ホバー フィードバック を使用して、相互作用ポイントの場所を示します。	相互作用ポイントがアクティブであることを示します。 ホバーは静的効果でも表示できます。 windows ボキャブラリ: ホバー効果 (外接する四角形、強調表示、拡大) を表示し、フェードイン/フェードアウト効果を使用して滑らかにします。 Zune デジタル メディア プレーヤーでは、アルバムが強調表示され、ホバー時に再生コントロールが追加されます。
フィードバックをクリックする クリック可能なオブジェクトが応答し、クリックを受信したことを示す場合。	オブジェクトがクリックされたことを示します。 Windowsボキャブラリ:クリックダウンイベントのフラッシュオブジェクトの背景。 タッチ接触を表示するには、波及効果を使用します。 タッチは、ユーザーが操作が認識されたことを認識できるように、リップル アニメーションを表示します。
選択に関するフィードバック オブジェクトが選択されていることを示します。	オブジェクトが選択されていることを示します。 の選択は、静的効果を通じて表示することもできます。 windows ボキャブラリ: 選択した四角形を描画し、フェードイン/フェードアウト効果で滑らかにします。 Zune では、アルバムカバーはクリックすると点滅し、選択範囲に選択四角形が表示されます。
進行状況のフィードバック タスクが実行されていることを示します。	進行状況のフィードバックは、タスクが進行していることを示します。通常は、タスクを示すアクティビティ インジケーター、進行状況バー、またはアニメーションを使用します。 進捗状況の決定に関するフィードバックは、タスクの実行の程度と残りの量を大まかに示しますが、不確定な進行状況はタスクが実行されていることを示すだけです。 Windows ボキャブラリ: 回転アクティビティ インジケーター、進行状況バー、進行状況の背景、図のアニメーション。 この例では、Windows Live Messengerサインイン中に不確定な進行状況のフィードバックを表示します。
アトラクター 何かがユーザーの注意を必要としていることを示すために。	重要なオブジェクトが作成されたり、注意が必要になったり (多くの場合、変更が原因で)、重要または緊急のイベントが発生した場合に、適切なレベルの注意を引きます。 設計手法 に関する適切なレベルの注目を集める 方法に関するページを参照してください。 ウィンドウボキャブラリ:点滅、動く、脈動する、光る、輝く。 Windows Live ツール バーは、最初の外観でアニメーション化され、それがどこにあるかを明確にします。
Relationship オブジェクト間の関係や効果の因果関係を示す場合は 。	リレーションシップを表示します。特に、リレーションシップが理解されていない場合や予想されない場合は、混乱や混乱を招かない方法で表示します。 windows ボキャブラリ: モーフィング、輸送、反転、ポイント ソースからの拡大、ポイントの目的地への縮小などの物理的な変化。 この例では、アニメーションはガンマ設定とディスプレイへの影響の関係を示しています。
図/プレビュー を使用して、コマンドの概念、タスク、または効果を視覚的に説明します。	テキストの説明を補足または置き換えるために、概念や何かが視覚的にどのように機能するかを説明するアニメーションまたはビデオ。 これにより、ユーザーはタスクを実行したり、コマンドを効率的かつ自信を持って選択したりできます。 この例では、タブレット PC 入力パネルの "show me" コマンドを使用して、修正、削除、分割、結合の方法を示します。

画面切り替えには、いくつかの使用パターンがあります。

使用法	説明
オブジェクトの拡大/縮小/表示 オブジェクトのサイズまたは状態をスムーズに変更する場合は 。	オブジェクトは状態間で変化します。場合によっては移動中です。 切り替えにより、変更時にユーザーの方向が維持されます。 windows ボキャブラリ: 変形、サイズの変更、オブジェクトのスライドインまたはアウト。 この例では、Weather Gadget は簡潔な状態から変形し、[オプション] ダイアログ ボックスを表示します。
コンテンツの表示/非表示/変更 コンテンツの表示、非表示、または変更をスムーズに行う場合は 、通常は段階的な開示を行います。	ウィンドウの内部の形状が変更され、より多くのコンテンツ、小さいコンテンツ、または異なるコンテンツが表示されます。 切り替えにより、変更時にユーザーの方向が維持されます。 windows ボキャブラリ: ウィンドウスライドのインまたはアウト。ポップアップ ウィンドウのフェードインとフェードアウト。異なるコンテンツがフェードインまたはロールインします。 Windows 電卓には、ビュー モード間のスムーズな切り替えがあります。
コントロールまたはアフォーダンスの表示/非表示 通常の視覚的な外観を簡略化するために、ホバーまたはマウスの移動時にコントロールやアフォーダンスをスムーズに表示または非表示にする場合。	ユーザーがコマンド領域の上にポインターを置いているときにコントロールを表示するか、ユーザーがコントロールの上にマウス ポインターを置いているときにアフォーダンスを表示します。 これらの領域をポイントすると、ユーザーが対話することを示します。 アフォーダンスは、ポインターが静止した場合に非表示になることがあります。 この例では、全画面表示モードの場合、Windows メディア プレーヤー コントロールはホバー時にフェードインします。
シーンの切り替え 注意を避けるために、シーンの切り替えをスムーズかつシームレスにします。	特に大画面領域では、突然のシーンの変更が気に障睡する可能性があるため、シーンの切り替えを使用して滑らかさと継続性を作成し、コンテキストを提供します。 シーンの切り替えは、遷移自体のプロセスに注意を向けないように、自然で低いキーに設計されています。 Windowsボキャブラリ:フェードイン/アウト。クロスフェード;スライドイン/左、アウト/右、アップ、ダウン。プッシュとカバー。 この例では、Windows デスクトップの壁紙がイメージ間を緩やかにクロスフェードして、画面切り替えがスムーズで制御されたようにします。
特殊なシーンの切り替え シーンの変更に注意を引いて特別なものにしたり、ユーザーの注意を再び焦点を当てる場合は 。	ほとんどのシーンの切り替えでは切り替えのプロセスに注意を向けてはなりませんが、一部のシーンはフローを中断し、別のことが起こっていることを強調するために注意を引くように設計されています。 注意を引くために、特別なシーンの切り替えは不自然であり、視覚的な影響が大きいために設計されています。 この例では、PowerPoint は注目度の高い画面切り替えを使用して、対象ユーザーを変更に引き込みます。
直接操作 直接操作の効果 (移動、スクロール/パン、回転、ズームなど) を表示する場合は 。	遷移は、操作の効果をリアルタイムで示します。 効果は滑らかで、連続的で、現実世界と一致している必要があります。 移動と回転は、制限や推奨される選択肢を示すために、一部の場所で連続していない可能性があります。 ズームすると、コンテンツが大きくまたは小さくなり、必要に応じて詳細レベルが変更される可能性があります。 この例では、拡大鏡はレベル間を滑らかにズームします。
不正な直接操作 直接操作 (移動、スクロール/パンなど) が試行されたが実行できなかったことを示す場合。	画面切り替えは試行中の操作を示しますが、元の状態に戻ります。 多くの場合、実際の物理的な制限のために操作を実行できないように見えます。 これらのアニメーションは、テキストベースのエラー メッセージの代わりに使用されます。これにより、操作の実際の感覚が損なわれます。 Windows ボキャブラリ: バウンス この例では、ドキュメントがバウンスして、ユーザーが最後に達したことを示します。
画面切り替えの並べ替え、フィルター処理、並べ替え 項目のコレクションのプレゼンテーションまたはコンテンツが変更されたことを示す 。	遷移は、変更の効果を示しています (または複雑な変更の場合は提案されます)。 この例では、bing ビジュアル検索ではフィルター切り替えを使用します。 この例では、Windows Media Center は、曲の再生中に並べ替え切り替えを特別なエクスペリエンスとして使用します。
パフォーマンスの遷移 アクションをより速く実行するように見せるために。	移行にはアクションをより速く行えるように見える可能性があります。これらの移行の主な目的は、パフォーマンスと応答性の認識を向上することです。 適切な手法は、タスクが意図的な手順で実行されていることを示す方法です。 これに対し、アクションを遅延させたり、結果を計画的にレンダリングしたり、アクティビティ インジケーターを使用したりすると、遅い感じがします。 Windows ボキャブラリ: ステージ間のスムーズな切り替えを使用して、段階的にアクションを実行します。 この例では、タスク バーのジャンプ リストに標準項目がすぐに表示され、リストの準備ができたらスライドアウトして移動先を表示します。 これにより、リストの作成に必要な時間が変装されます。 これに対し、最初の表示を遅らせると応答しなくなると感じられ、不完全なリストや進行状況のフィードバックを表示すると、はるかに遅く感じるでしょう。
特別なエクスペリエンス プログラムにとって重要であり、ユーザーの注意を引く、まれで 特別なエクスペリエンス の間にユーザーを引き付け、喜ばせる。	移行には特別なエクスペリエンスになる可能性はありますが、これらの移行は、プログラムにとって本当に特別なまれなエクスペリエンスに最適です。 カスタム画面切り替えは、特別な感覚を与えるために使用されます。 ブランド化とパーソナリティは、多くの場合、重要な設計要素です。 他のパターンとは異なり、特別なエクスペリエンスでは注意が必要になり、負荷が高く、ユーザーはしばらく待つ必要があります。 その結果、エクスペリエンスが特別ではなくなったため、過剰に使用された場合、これらの遷移はすぐに摩耗します。 この例では、Windows Media Center では、読み込み中にアニメーションが表示され、すぐにユーザーを引き付けます。

ガイドライン

効果的なコミュニケーション

• アニメーションボキャブラリを定義して使用 して、アニメーションと切り替えが一貫した意味を持ち、プログラム全体で一貫して使用されるようにします。 ほとんどのボキャブラリには、シーンとオブジェクトの外観と消失、ナビゲーション、基本的な操作 (ホバー、選択、クリック)、オブジェクト操作と操作 (移動、ドロップ、サイズ変更、スクロール、パン、ズーム、回転、フィルター処理)、注目を集めるエントリが含まれている必要があります。 一貫した意味は、効果的なコミュニケーションに不可欠です。

• 実用的な場合は常に、Windows アニメーションボキャブラリを使用します。 プログラムの対象ユーザーやニーズが異なる場合はありますが、多くの場合、一貫性と親しみやすさの利点は、異なる利点を上回ります。 プログラムのボキャブラリが異なる必要がある場合は、Windows と同じ基本的なアニメーションの種類を使用しますが、プログラムに適した個性を与えます。

• 一般的なアニメーションやアニメーション ボキャブラリの切り替えに特定の意味を割り当てないでください。 フェードなどの一般的な画面切り替えやディゾルブなどの特殊効果は、特に意味を持たないため (表示または非表示を超えて)、自由に使用できます。

  正しくない:

  

  この例では、クロスフェードを使用して次の項目に移動します。 クロスフェードには特に意味がないため、この遷移ではコンテキストは提供されません。

• ボキャブラリエントリを明確に区別します。 関連するアクションにも同様の効果が含まれる場合があります (たとえば、ズームインやズームアウトには逆の切り替えが必要です)、関連のないアクションには明確に異なる効果が必要です (たとえば、ズームと回転を混同しないでください)。

• 現実世界の効果を現実的かつ一貫した状態に保ちます。 現実的なアニメーションと画面切り替えを使用する場合は、エクスペリエンスを現実世界と一貫性を保ちます。 ユーザーは、その結果に驚いたり、混乱したり、誤解されたりすることはありません。 また、一貫性を保つには、メタファーを混在させないでください。

• 逆アクションの逆アニメーションを指定します。 これにより、ユーザーの期待に応え、ボキャブラリが簡略化されます。 たとえば、ウィンドウがスライドインして表示される場合は、他の効果を使用せず、スライドアウトしてウィンドウを削除します。

• アニメーションを理解しやすくします。 ユーザーはアニメーションの目的をすばやく理解できる必要があります。 アニメーションを小さすぎたり、短すぎたり (50 ミリ秒未満)、ユーザーが目的を理解できないほど微妙にしたりできます。 このような場合は、意味を明確にするために再設計するか、削除します。

  正しくない:

  

  この例では、効果は非常に小さく、微妙であるため、その目的を理解できるユーザーは少なくなります。 再設計または削除する方が適しています。

パターン

ホバー フィードバック

• 応答性を高めるために、ホバー状態の開始または終了から 50 ミリ秒以内にアニメーションを再生するように努めます。
• 高速に表示するには、ホバー アニメーションの継続時間を 50 ミリ秒未満にします。
• ホバー効果のフェードイン/フェードアウトを使用します。 これにより、ホバー効果はクリックや選択のフィードバックとは明確に異なります。

フィードバックをクリックする

• 応答性を高めるために、クリックダウン イベントから 50 ミリ秒以内にアニメーションを再生するように努めます。 クリックアップ イベントはクリック フィードバックを必要としません。
• 高速に表示するには、クリック アニメーションの継続時間を 50 ミリ秒未満にします。
• 背景のフラッシュまたは点滅効果を使用します。 これにより、クリック効果はホバーや選択のフィードバックとは明確に区別されます。 クリックにはホバーが必要なので、クリック フィードバックをホバー フィードバックにスムーズに追加します。

選択に関するフィードバック

• 応答性を高めるために、選択または選択解除から 50 ミリ秒以内にアニメーションを再生するように努めます。
• 高速に表示するには、選択アニメーションの継続時間を 50 ミリ秒未満にします。
• フェードイン/フェードアウト選択四角形効果を使用します。 そうすることで、選択はホバーとクリックのフィードバックとは明確に区別されます。

進行状況のフィードバック

• 1 秒以内にアクションを実行できない場合は、アクティビティ インジケーターを使用します。 そうすることで、コマンドが受信されたことを示します。
• タスクに 5 秒以上かかる場合は、進行状況バーを使用します。 その他のガイドラインについては、「 進行状況バー」を参照してください。
• ユーザーが実行時間の長いタスクの効果を視覚化するのに役立つ進行状況フィードバック アニメーションを使用します。 アニメーションが役に立たない場合は、不要な進行状況フィードバック アニメーションを避け、代わりに進行状況バーを使用します。
• 明確に識別可能な完了状態とエラー状態があります。 ユーザーは、これらの最終的な状態をすばやく決定できる必要があります。
• 基になるタスクが進行していない場合は、進行状況の表示を停止します。 ユーザーは、進行状況が行われていないかどうかを判断し、それに応じて対応できる必要があります。

アトラクター

• 拘束付き引き付け器を使用します。 情報が緊急、重大、またはユーザーの即時の動作に影響する可能性がある場合を除き、通常は、状態を目立たないように変更し、ユーザーが自分で変更を検出できるようにする方が適切です。 見つけやすさではなく、気を散らす問題を解決します。

  

  この例では、ワイヤレス ネットワーク通知領域アイコンは重大な問題にアニメーションを使用しますが、ユーザーは自分で弱い信号を検出できます。

• 適切なレベルの注意を引くアニメーションを選択します。 アトラクターアニメーションは、目的を達成するために自分自身に十分な注意を引く必要がありますが、それ以上は必要ありません。 ユーザーが直ちに行動する必要がある場合は、ユーザーが探している場所に関係なく注意を必要とする効果を選択します。 その他の状況については、「注意の 適切なレベルを引き付ける 」セクションを参照して、注意、注意可能性、緊急度の適切な組み合わせを取得します。

  正しくない:

  

  Microsoft Office Assistants は、自分自身に不要な注意を引き付けています。

• ユーザーが応答しない場合は、アニメーションを繰り返したり、連続アニメーションを使用したりしないでください。 代わりに、ユーザーが今は行動しないことを選択したが、後で動作する可能性があるとします。 連続アニメーションを使用すると、ユーザーが他のものに集中することが困難になります。

リレーションシップ アニメーション

• リレーションシップ アニメーションを使用して、オブジェクトがどこから来たのか、どこに行ったかを示します。
• リレーションシップ アニメーションは、選択したオブジェクトで開始または終了する必要があります。 ユーザーが現在対話していないオブジェクト間のリレーションシップを表示しないでください。 ユーザーがまったく気付いた場合、気が付くのは気を散らすものです。

図/プレビュー

• プレビューを使用して、ユーザーが最初にコマンドを実行しなくてもコマンドの効果を表示します。 役立つプレビューを使用すると、プログラムの効率と学習の容易さを向上させ、試行錯誤の必要性を軽減できます。
• 明確な解釈を持つ図とプレビューを使用します。 混乱を招く場合は、ほとんど価値がありません。
• ユーザーを圧倒しないように、一度に 1 つのイラストのみを再生します。 複数の同時イラストが可能な場合は、マウスホバーまたは再生ボタンを使用して、ユーザーが興味を示すようにします。
• ウィンドウまたはページのメイン目的である場合は、図を自動的に再生します。 それ以外の場合は、オプションの場合は、ユーザーが準備ができたら再生できます。
• アニメーションを最適な速度で再生する:理解するのが難しいほど速くはありませんが、遅くはありませんが、watchするのは面倒です。

オブジェクトの拡大/縮小

• サイズ変更中にコンテンツをクリップしないでください。 コンテンツを追加する前にコンテナーを展開します。 コンテナーを減らす前にコンテンツを削除します。

  正しくない:

  

  この例では、サイズ変更中にコンテンツがクリップされます。

コンテンツの表示/非表示/変更

• 重要な情報を静的に表示します。 ユーザーは、段階的な開示を通じて重要な情報にアクセスする必要はありません。

コントロールまたはアフォーダンスの表示/非表示

• ユーザーがウィンドウまたはウィンドウ内の任意の場所にポインターを配置するとき、または全画面表示の場合はマウスの移動時に重要なコントロールを表示します。 ユーザーはこれらのコントロールを探す必要がないため、検出を確実にします。

  

  この例では、ポインターがウィンドウの上にあるたびに、Windows Media Center によってコントロールが表示されます。

• ユーザーがコマンドの上または近くにポインターを置いたときに、セカンダリ コントロールまたはコントロール アフォーダンスを表示します。 簡単に検出できるように、場所を明確にし、ターゲットを大きくします。

  

  この例では、Windows Live Messengerポインターが右上隅付近にあるときにセカンダリ コマンドを表示します。

シーンの切り替え

• 物理シーンの切り替えを自然なマッピングと一致させます。 People西洋文化では左から右に読み取られ、階層図は上から下に流れる。 したがって、今後の時間は左から右への動きによって示されます。 次の物理シーンの切り替えには、自然なマッピングがあります。

  切り替え効果	説明
  左から	タスク フローに戻る
  右から	タスク フローを進める
  上から	タスク階層を上へ移動する
  下から	タスク階層を下へ移動する

• プログラムがサウンドを再生する場合は、デザイン シーンの切り替えとオーディオの切り替えが一緒に行われます。 たとえば、シーンが徐々にフェードアウトする場合、サウンドも徐々にフェードアウトします。 突然のサウンド遷移を行うことで、シームレスなビジュアル遷移を損なわない。 サウンドのガイドラインについては、「 サウンド」を参照してください。

直接操作

• 操作で物理的なジェスチャ (トシングなど) を使用する場合は、ジェスチャに対する自然な応答のようにアニメーションを設計します。 相互作用の原因を切り替え効果とリンクします。 加速、減速、運動量、抵抗、重量、バウンス、回転などの実際の物理的特性をアニメーションに与えます。
• 直接的な操作性を維持するには、オブジェクトの接触点をポインターの下に保持し、操作全体を通してスムーズに行います。 ラグ、途切れた応答、または接触の損失は、直接操作の認識を破壊します。 操作中にオブジェクトが消えることはありません。

画面切り替えの並べ替え、フィルター処理、または並べ替え

• 単純な変更の場合は、画面切り替え全体を表示します。 ユーザーは、画面切り替え全体に簡単に従うことができます。 単純な変更には、4 つ以下の項目が含まれます。
• 複雑な変更の場合は、モーションの速度が低下するにつれてモーションの終了を強調し、残りの部分に目を塗りつぶします。 これにより、モーションの応答性が大幅に向上し、順序が整ったように感じます。

パフォーマンスの切り替え

• 2 つまたは 3 つのステージで低速の切り替えを実行して、高速かつすぐに対話形式で表示することを検討してください。 必要に応じて、次の構成順序を使用します。
  • 外部フレーム
  • 背景
  • 初期コンテンツ (必要に応じて一時的な表現を使用)
  • プライマリ コントロール (ユーザーがすぐに操作できるように)
  • セカンダリ コントロールと残りの UI 要素
  • 最終的なコンテンツ (一時的な表現が使用された場合) フェードやスライドなどの画面切り替えを使用して、コンポジションを滑らかに整え、洗練した外観にします。

"鳥の目" ビューでスクロールすると、Bingマップに一時的なグリッドの背景が表示されます。 これにより、ユーザーは、最終的なコンテンツがレンダリングされる前に、すぐにスクロールし続けられます。

特別なエクスペリエンス アニメーション

• アニメーション化されたスプラッシュスクリーン(静的スプラッシュスクリーン)を再考します。 多くの場合、スプラッシュスクリーンはプログラムの読み込みに要する時間に注意を引くだけで、彼らはすぐに歓迎を損ないます。 スプラッシュスクリーンは、ユーザーの操作が不可能な場合にのみ表示される場合は許容されますが、実用的な場合は常に、読み込み中でもすぐにプログラムを操作できるようにプログラムを設計することをお勧めします。
• アニメーション化されたスプラッシュ スクリーンに 3 秒以上かかる場合は、[概要のスキップ] コマンドを指定します。 スプラッシュスクリーン上の任意の場所をクリックすると、それを閉じる必要もあります。 または、最初の期間の後に短いバージョンのアニメーションを使用します。

パフォーマンス

• ユーザーがプログラムのアニメーションと切り替えを待たないようにします。 実用的な場合は常に、簡単なアニメーションと画面切り替え (200 ミリ秒未満) を使用します。 より頻繁な操作には、より高速なアニメーション (100 ミリ秒) を使用します。 ユーザーが実行中に引き続き作業できるように、長いアニメーション (通常は進行状況のフィードバック、イラスト、特別なエクスペリエンス パターン) を 1 秒以上設計します。

• 実行時間の長いアニメーションを設計して、アニメーションの実行中に操作できることをユーザーに明確にします。 視覚的な手がかりができないことを示唆している場合、ユーザーは引き続き作業を試みることはありません。

  

  Windows インターネット エクスプローラーのこの例では、ステータス バーのキーが低い進行状況バーは、ユーザーが操作する前に完了を待つ必要がないことを示しています。

• CPU 負荷の高いタスクには軽量のアニメーションを使用します。 これにより、タスクに完全な処理能力が与えます。 さらに、ユーザーは、軽量のアニメーションがタスクの CPU 負荷が高い理由であると認識しません。

• アニメーションまたは切り替え中にアクティビティ インジケーターを表示しないでください。 これにより、効果が破棄されます。 アニメーションと画面切り替えをデザインして、すぐに開始できるようにします。

• システム リソースが不十分な場合は常に適切に低下するようにアニメーションを設計します。 アニメーションは、必要なリソースの数が少ない (長さが短い、フレーム レートが低いなど) バリエーションがある場合や、まったく実行されていないことによって低下する可能性があります。 使用可能なリソースに関係なく、アニメーションの品質が高く、ソフトウェアのバグではなくアニメーションのように見えるようにします。

  正しくない:

  

  この例では、適切に再生するのに十分なシステム リソースがない場合でも、ウィンドウの復元切り替えが使用されます。 その結果、固定されたフレームはバグのように見えます。 リソースが使用できない場合は、画面切り替えなしでウィンドウを表示することをお勧めします。

アニメーションの特性

適切に設計されたアニメーションと切り替えには、通常、次の特性があります。

• 短い期間。 ほとんどのアニメーションは 100 ミリ秒から 300 ミリ秒の間である必要があります。できれば、1/6 秒 (167 ミリ秒) または 1/4 秒 (250 ミリ秒) のいずれかです。 (特別なエクスペリエンスと進行状況のフィードバックが長くなる可能性があります)。より頻繁な操作には、より高速なアニメーション時間を使用します。 一般に、長いアニメーションの完了には時間がかかり、理解に時間がかかり、遅い感じになります。

• 応答性。 アニメーションは、開始イベントまたはユーザー アクションから 50 ミリ秒以内に開始する必要があります。 開始時間が長いほど、応答しないと感じます。

• 加速/減速。 自然に見える場合、ほとんどのアニメーション効果は開始時に加速し、停止時に減速する必要があります。 応答性を高めるために、アニメーションを迅速に開始するように設計します。 コントロールを表示するには、最後にソフト ランディングを設定するようにアニメーションを設計します。 これはモーション効果に適用されますが、ズームやフェードなど、動きを示唆する効果にも適用されます。

  

  ほとんどのアニメーションは、応答性が高く、制御された感覚を持つには、高速開始とソフト終了を持つ必要があります。

• モーション。 特にモーションを表現するアニメーションは加速と減速が必要であるため、アニメーションの継続時間が非常に短い場合を除き、線形モーションを使用しないでください。 モーションは、オーバーシュートを行わずに、最初から最後までショート パスを使用する必要があります。 完全なモーション パスが必ずしも必要であるとは限りません。 必要に応じて、動きの終わりを強調し、遅くして、残りの部分に目を塗りつぶします。 これにより、モーションの応答性が大幅に向上し、順序が整ったように感じます。 複数のオブジェクトのモーションを同時にアニメーション化する場合は、少し異なるタイミングで少し異なるパスを与えて、より自然に感じます。

• フレーム レート。 ほとんどのアニメーションでは、1 秒あたり 20 フレームのフレーム レートを使用する必要があります。 アニメーションが特別なエクスペリエンスを目的としているか、プログラムのメイン目的に関連している場合は、滑らかさとリアリズムを向上させるために、1 秒あたり 24 30 フレームの高いレートを使用することを検討してください。

• スケーリング。 アニメーションを設計して、意図した用途の範囲全体で適切に動作するようにします。 たとえば、ページ切り替えは、すべてのページ サイズで機能するように設計する必要があります。

• 人格。 人工、気まぐれ、低速ではなく、自然で落ち着いた効率的なアニメーションをデザインします。

アニメーションテキスト

• 画面切り替えを使用してテキストを表示できますが、 テキストを継続的にアニメーション化しないでください。 アニメーション化されたテキストは、多くの場合、静的テキストよりも気が散り、読みにくくなります。 例外:
  • 従来はアニメーション化されている状況でテキストをアニメーション化し、アクセシビリティの高い代替手段を提供できます。
  • テキストの目的が主に装飾的な場合は、テキストをアニメーション化できます。

この例では、Zune はテキストをアニメーション化しますが、その目的は主に装飾です。 ユーザーがテキストを慎重に読まない場合は、問題はありません。

消費電力の削減

• 電力消費量を減らすためにアニメーションを設計します。 適切に設計されている場合、アニメーションは電力消費量を大幅に増加させるべきではありません。 電力消費量を削減するには:
  • ディスプレイがオフのときにアニメーション化を停止します。 電力を節約する目的でディスプレイがオフになっている場合があります。
  • ユーザーが開始していない実行時間の長いアニメーションは使用しないでください。 高解像度の定期的なタイマーを使用するアニメーションは、プロセッサの電源管理の効率を低下させます。 また、アニメーションが完了したら、高解像度の定期的なタイマーを必ず無効にしてください。
  • システムがアイドル状態になったときに、すべてのアニメーションを中断します。 ユーザーがアイドル状態になるまでの非アクティブ期間は、コントロール パネルの Power Options によって決まります。

ユーザー補助

• 重要な情報を伝える唯一の方法としてアニメーションを使用しないでください。 アニメーションは、視覚障问のあるユーザーがアクセスできないため、有用だが重要ではない情報を伝える必要があります。

• 次のような他の方法で同等の情報を使用できることを確認します 。

  • 検査による。 ユーザーは、アニメーションに関連する画面またはオブジェクトを見て、同等の情報を決定できます。
  • 単純な操作による。 ユーザーは、ホバー、クリック、またはダブルクリックを使用して、同等の情報を決定できます。

  

  Bingホーム ページには、いくつかのホット スポットを表示する初期アニメーションがあります。 ユーザーは、カーソルを近くに移動してホット スポットを表示することもできます。

  「同等の情報」は同一の情報を意味するわけではないことに注意してください。 情報の形式が異なる場合や、単純な推論が必要な場合があります。

• 必要に応じて、遷移中に変更されたオブジェクトに入力フォーカスを設定します。 これにより、支援テクノロジは変更が発生した場所を検出できます。 ただし、ユーザーがキーボードを使用している場合は、入力フォーカスを変更しないでください。

• オブジェクトをすばやくフラッシュまたはサイズ変更するアニメーションや画面切り替えを使用しないでください。 点滅と急速な画面の変化は、発作障害やその他の神経障害を持つ人々の問題を引き起こす可能性があります。

• ユーザーがプログラムのアニメーションと画面切り替えをオフにできるようにします。 この機能をサポートするには、Windows の [簡単操作センター] の [不要なアニメーションをすべてオフにする] オプションを考慮します。

  開発者： アニメーションが有効になっているかどうかは、SystemParametersInfo API を使用して判断できます。

• ユーザーがプログラムのアニメーションをオフにすることを想定してタスクを設計します。 そうしても、タスク フローが大幅に中断されないようにしてください。

アクセシビリティのガイドラインの詳細については、「 アクセシビリティ」を参照してください。

ドキュメント

• 可能な限りアニメーションを参照しないでください。 代わりに、アニメーション化されているオブジェクトと、必要に応じてアニメーションの種類を参照します。
• 技術的なドキュメントを除き、移行については参照しないでください。 代わりに、オブジェクトの最終状態または初期状態を参照してください。
• ユーザーがアニメーションを明示的に開始する場合は、動詞 play を使用します。それ以外の場合は、技術ドキュメントに動詞の使用を使用します。

例 :

• アイコンが跳ね返り始めると、アイテムに注意が必要になることがわかります。
• まず、印刷する写真を選択します (写真は選択時に拡大されます)。
• クロスフェード遷移を使用して、オブジェクトの状態をシームレスに変更します。