グラフィック要素
手記
このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。
グラフィック要素 リレーションシップ、階層、強調を視覚的に表示します。 背景、バナー、ガラス、アグリゲーター、区切り記号、影、ハンドルが含まれます。
複数の種類のグラフィック要素を含む例。
通常、グラフィック要素は対話型ではありません。 ただし、区切り記号はサイズ変更可能なコンテンツに対して対話型であり、ハンドルは対話機能を示すグラフィックスです。
注:グループ ボックス、アニメーション、アイコン、および ブランド化 に関連するガイドラインは、別の記事で示されています。
これは適切なユーザー インターフェイスですか?
グラフィック要素はリレーションシップを示す強力な視覚的手段ですが、過剰に使用すると視覚的な混乱が増し、サーフェス上で使用可能な領域が減ります。 これらは控えめに使用する必要があります。
Microsoft Windows の設計傾向は、不要なグラフィックスと線を排除することで、よりシンプルでクリーンな外観です。
グラフィック要素が必要かどうかを判断するには、次の質問を検討してください。
- デザインのプレゼンテーションとコミュニケーションは、要素なしで明確かつ効果的ですか? その場合は、削除します。
- レイアウトだけを使用してリレーションシップを効果的に伝達できますか? その場合は、代わりにレイアウト 使用します。 関連するコントロールを互いに隣り合って配置し、関連のないコントロール間に余分な間隔を置くことができます。 インデントを使用して階層リレーションシップを表示することもできます。
4 アイコン レイアウトスクリーン ショット
この例では、レイアウトのみを使用してコントロールのリレーションシップを表示します。
使用パターン
グラフィック要素には、いくつかの使用パターンがあります。
| 要素 | 形容 |
|---|---|
|
グラフィックイラスト アイデアを視覚的に伝えるために使用します。 |
グラフィックイラストはアイコンに似ていますが、任意のサイズにすることができ、通常はインタラクティブではありません。 
この例では、グラフィック図を使用して、フィーチャの性質を提案します。 |
|
背景の さまざまな種類のコンテンツを強調または強調解除するために使用します。 |
背景は、重要なコンテンツを強調するために使用できます。 赤い背景スクリーン ショット この例では、背景を使用して重要なタスクを強調します。 背景を使用して、セカンダリ コンテンツの強調を解除することもできます。 コントロール パネル項目  のスクリーン ショットこの例では、セカンダリ タスクは作業ウィンドウ内に配置することで強調を解除します。 |
|
バナー 重要な状態を示すために使用されます。 |
背景とは対照的に、バナーは主に 1 つのテキスト文字列を強調します。 設定情報がスクリーン ショット この例では、バナーを使用して、ページの設定がグループ ポリシーによって制御されることを示します。 |
|
ガラス 戦略的に使用して、ウィンドウの視覚的な重みを減らします。 |
ガラスは、ウィンドウ自体の代わりにコンテンツに焦点を当てることによって、表面の重量を減らすことができます。 
この例では、コントロールではなくコンテンツにユーザーの注意を向けます。 |
|
アグリゲーター を使用して、強く関連するコントロール間に視覚的な関係を作成します。 |
この例では、アグリゲーターの背景を使用して、エクスプローラーの [戻る] ボタンと [進む] ボタンの関係を強調します。 windows フォト ギャラリー コントロールの この例では、境界アグリゲーターを使用してコントロール間の関係を強調し、8 つではなく単一のコントロールのように感じさせます。 |
|
区切り記号の 弱い関連または関連性のないコントロールを分離するために使用します。 |
区切り記号は、対話型でも非対話型でもかまいません。 サイズ変更可能なコンテンツ間の対話型の区切り記号は、スプリッターと呼ばれます。 名前ボタンする この例では、インタラクティブな区切り記号がサイズ変更可能なコンテンツに使用されます。 ブラウザー情報スクリーン ショット この例では、区切り記号は対話型ではありません。 |
|
シャドウ を使用して、コンテンツを背景に対して視覚的に目立たせるために使用します。 |
影がスクリーン ショット この例では、影によってアートワークが背景に対して目立つようにします。 |
|
ハンドル オブジェクトを移動またはサイズ変更できることを示すために使用します。 |
ハンドルは常に対話型であり、ホバー時のマウス ポインターによってその動作が提案されます。 サイズ変更ポインターする ポインターのサイズ変更スクリーン ショット これらの例では、ハンドルはオブジェクトのサイズを変更できることを示しています。 |
ガイドライン
全般
- グラフィック要素だけで重要な情報を伝えないでください。 これにより、視覚に障のあるユーザーや障のあるユーザーにアクセシビリティの問題が発生します。
グラフィック デザイン
グラフィックスは、単一の単純なアイデアを補強する場合に最も効果的です。 解釈する思考を必要とする複雑なグラフィックスはうまく機能しません。 イエログリフは洞窟の図面に最適です。
不正解:
複雑なグラフィックスクリーン ショット
この例では、Windows XP の複雑なグラフィックは、複雑な信頼の決定を説明しようと試みます。
矢印、シェブロン、ボタン フレーム、または対話型コントロールに関連付けられているその他のアフォーダンスは使用しないでください。 これにより、ユーザーがグラフィックスを操作するように招待されます。
あなたのデザインで純粋な赤、黄色、緑の群れを避けてください。 混乱を避けるために、状態を伝えるためにこれらの色を予約します。 これらの色をステータス以外の色に使用する必要がある場合は、純粋な色ではなくミュートトーンを使用します。
カルチャに依存しないデザインを使用します。 ある国、地域、または文化で特定の意味を持つことは、別の国では同じ意味を持たない場合があります。
人、顔、性別、身体の部分だけでなく、宗教的、政治的、国家的なシンボルも使用しないでください。 このような画像は、簡単に翻訳できないか、不快感を与える可能性があります。
ユーザーまたはユーザーを表す必要がある場合は、それらを一般的に表します。 現実的な描写は避けてください。
背景とバナー
コンテンツを強調するには、明るい背景に濃いテキストを使用します。 明るい灰色または黄色の背景の黒いテキストが適切に機能します。
黄色の背景スクリーン ショット
この例では、リンクは黄色の背景にあるため、ユーザーの注意を引きます。
コンテンツの強調を解除するには、暗い背景に淡色のテキストを使用します。 濃い灰色または青の背景の白いテキストが適切に機能します。
緑色の背景スクリーン ショット
この例では、暗い背景でコンテンツが強調されます。
グラデーションを使用する場合は、テキストの色がグラデーション全体で良好なコントラストを持っていることを確認します。
バナーに注意を引くには、常に 16 x 16 ピクセルのアイコンを使用します。 バナーは見過ごしにくすぎます。 その他のガイドラインと例については、「標準アイコンの をする」を参照してください。
背景やバナーは注意して使用してください。 背景やバナーの目的はコンテンツを強調することですが、多くの場合、結果は"バナー失明" と呼ばれる現象とは逆になります。
グラス
- テキストなしでウィンドウフレームに触れる小さな領域で戦略的にガラスを使用することを検討してください。 そうすることで、領域がフレームの一部のように見えるようにすることで、プログラムをよりシンプルで軽く、まとまりのある外観にすることができます。
- プレーンウィンドウの背景がより魅力的で使いやすい状況では、ガラスを使用しないでください。
区切り 記号
- 区切り記号には垂直線と水平線を使用します。 区切り記号と分離されるコンテンツの間に十分なスペースがあることを確認してください。
- 大きなコンテンツ (スプリッター) 間の区切り記号の場合は、ホバー時にサイズ変更ポインターを表示します。
サイズ変更ポインタースクリーン ショット
これらの例では、ポインターのサイズ変更はホバー時に表示されます。
影
- プログラムの最も重要なコンテンツまたはドラッグされているオブジェクトを背景に対して視覚的に目立たせるためにのみ使用します。 他の状況では、影が視覚的に乱雑であると考えてください。
高 dpi のサポート
- 96 および 120 ドット/インチ (dpi) のビデオ モードをサポートします。 起動時に dpi モードを検出し、dpi 変更イベントを処理します。 Windows は 96 および 120 dpi 用に最適化されており、既定では 96 dpi を使用します。
- グラフィックスのスケーリングに対して 96 dpi と 120 dpi 専用にレンダリングされる個別のビットマップを提供することを好みます。 最も重要で表示されるビットマップに対して 96 および 120 dpi バージョンを提供し、他のビットマップを中央に配置またはスケーリングします。 このようなアプリケーションは "高 dpi 対応" と見なされ、Windows によって自動的にスケーリングされるプログラムよりも全体的な視覚的エクスペリエンスが向上します。
- 開発者: プログラムのマニフェストで dpi 対応フラグを設定するか、プログラムの初期化中に SetProcessDPIAware() API を呼び出すことによって、プログラムの高 dpi 対応 (および自動スケーリングを回避) を宣言できます。 マクロを使用すると、適切なグラフィックスの選択を簡略化できます。 Win32 ビットマップの場合は、SS_CENTERIMAGEを使用して中央揃えまたはSS_REALSIZECONTROLしてスケーリングできます。
- 96 dpi と 120 dpi の両方でプログラムで次のことを確認します。
- グラフィックスが小さすぎるか、大きすぎる。
- グラフィックスがクリップされている、重なっている、または正しくフィットしない。
- 十分に引き伸ばされていないグラフィックス ("pixilated")。
- グラフィック背景でクリップされたテキストまたは適合しないテキスト。
テキスト
- アクセシビリティとローカライズの場合は、グラフィックスでテキストを使用しないでください。 ブランド化 とテキストを抽象的な概念として表す場合にのみ例外を作成します。