圖形元素
圖形元素 以可視化方式顯示關聯性、階層和強調。 其中包括背景、橫幅、玻璃、匯總工具、分隔符、陰影和控點。
使用陰影等 
具有數種圖形元素類型的範例。
圖形元素通常不是互動式專案。 不過，分隔符對於可重設大小的內容而言是互動式的，而控點則是顯示互動性的圖形。
注意： 與 組框、動畫、圖示和 商標 相關的指導方針會在個別的文章中呈現。
這是正確的使用者介面嗎？
雖然圖形元素是指出關聯性的強視覺方式，但過度使用它們會新增視覺雜亂，並減少表面上可用的空間。 它們應該謹慎使用。
Microsoft Windows 的設計趨勢是一種更簡單、更簡潔的外觀，可消除不必要的圖形和線條。
若要決定是否需要圖形元素，請考慮下列問題：
- 設計的設計呈現和通訊是否與項目一樣清晰且有效？ 如果是，請將其移除。
- 您可以單獨使用版面配置來有效地傳達關聯性嗎？ 如果是，請改用 版面配置。 您可以將相關控件放在彼此旁邊，並在不相關的控件之間放置額外的間距。 您也可以使用縮排來顯示階層式關聯性。
四個圖示版面配置螢幕快照
在此範例中，單獨使用版面配置來顯示控件關聯性。
使用模式
圖形元素有數種使用模式：
| 元素 | 描述 |
|---|---|
|
圖形圖例 用來以視覺化方式傳達想法。 |
圖形圖例與圖示類似，不同之處在於圖示可以是任何大小，而且通常不是互動式的。 
在此範例中，使用圖形圖例來建議特徵的性質。 |
|
背景 用來強調或取消強調不同類型的內容。 |
背景可用來強調重要內容。 紅色背景上的病毒訊息  在此範例中，背景用來強調重要工作。 背景也可以用來取消強調次要內容。 
在此範例中，次要工作會藉由在工作窗格中尋找它們來取消強調。 |
|
橫幅 用來指出重要狀態。 |
相對於背景，橫幅主要強調單一文字字串。 
在此範例中，橫幅用來指出頁面的設定是由組策略所控制。 |
|
玻璃 以策略方式使用 來減少視窗的視覺權數。 |
玻璃可以藉由專注於內容而不是視窗本身來減少表面的重量。 windows 照片庫中鳥的  在此範例中，玻璃會將使用者的注意力放在內容上，而不是控件。 |
|
匯總工具 用來建立強式相關控件之間的視覺關聯性。 |
在此範例中，匯總工具背景是用來強調總管中 [上一頁] 和 [向前] 按鈕之間的關聯性。 windows 相片庫控件的 在此範例中，界限匯總工具用來強調控件之間的關聯性，並讓控件感覺就像是單一控件，而不是 8 個。 |
|
分隔符 用來分隔弱式相關或不相關的控件。 |
分隔符可以是互動式或非互動式。 可重設大小的內容之間的互動式分隔符稱為分割器。 
在此範例中，互動式分隔符用於可重設大小的內容。 
在此範例中，分隔符不是互動式的。 |
|
陰影 用來讓內容以可視化方式在其背景中脫穎而出。 |
在此範例中，陰影會讓藝術品在背景上脫穎而出。 |
|
句柄 使用 表示物件可以移動或重設大小。 |
句柄一律為互動式，且滑鼠指標會在暫留時建議其行為。 使用重設大小指標 使用重設大小指標的選取方塊  在這些範例中，句柄表示物件可以重設大小。 |
指引
常規
- 不要單獨透過圖形元素傳達重要資訊。 這樣做會針對視覺障礙或障礙的使用者提供輔助功能問題。
圖形設計
圖形在強化單一簡單概念時最為有效。 需要考慮解譯的複雜圖形無法正常運作。 山體圖案最好留給洞穴繪圖。
不正確：
使用複雜圖形警告的螢幕快照
在此範例中，來自 Windows XP 的複雜圖形會無效地嘗試解釋複雜的信任決策。
請勿使用箭號、箭號、按鈕框架或其他與互動式控件相關聯的能供性。 這麼做會邀請使用者與您的圖形互動。
避免在設計中大量純紅色、黃色和綠色。 若要避免混淆，請保留這些色彩以傳達狀態。 如果您必須將這些色彩用於狀態以外的其他色彩，請使用靜音色調，而不是純色。
使用文化中性設計。 某個國家/地區或文化中可能有某種意義，在另一個國家/地區或文化中可能沒有相同的意義。
避免使用人員、臉部、性別或身體部位，以及宗教、政治和國家符號。 這類影像可能不容易翻譯或可能具有冒犯性。
當您必須代表人員或使用者時，請以一般方式加以描述： 避免實際描述。
背景和橫幅
若要強調內容，請在淺色背景上使用深色文字。 淺灰色或黃色背景上的黑色文字效果良好。
黃色背景上藍色連結文字的
在此範例中，連結會取得使用者的注意，因為它位於黃色背景。
若要取消強調內容，請在深色背景上使用淺色文字。 深灰色或藍色背景上的白色文字效果良好。
綠色背景上白色說明連結的
在此範例中，深色背景會取消強調內容。
如果使用漸層，請確定整個漸層的文字色彩具有良好的對比。
一律使用 16x16 像素圖示來吸引人們對橫幅的注意。 橫幅太容易忽略，否則。 如需更多指導方針和範例，請參閱 標準圖示。
請謹慎使用背景和橫幅。 雖然背景或橫幅的意圖可能是強調內容，但結果往往與所謂的「橫幅盲目」現象相反。
玻璃
- 請考慮在小型區域中以策略方式使用玻璃，以觸控視窗框架而不使用文字。 這樣做可以讓程式成為框架的一部分，讓程式看起來更簡單、更輕、更連貫的外觀。
- 在純視窗背景更具吸引力或更容易使用的情況下，請勿使用玻璃。
分隔符
- 針對分隔符使用垂直和水平線。 請務必在分隔符與分隔內容之間有足夠的空間。
- 針對可重設大小的內容之間的分隔符（分隔器），在暫留時顯示重設大小指標。
使用重設大小指標螢幕快照
在這些範例中，滑鼠停留時會顯示重設大小指標。
陰影
- 使用 只讓您的程式最重要的內容或物件在其背景上以視覺方式顯示出來。 請考慮在其他情況下將陰影視為視覺雜亂。
高 DPI 支援
- 支援每英吋 96 和 120 個點（dpi） 視訊模式。 在啟動時偵測 dpi 模式，並處理 dpi 變更事件。 Windows 已針對 96 和 120 dpi 優化，預設會使用 96 dpi。
- 偏好提供專為 96 和 120 dpi 轉譯的個別點陣圖，而不是縮放圖形。 至少為最重要的可見位圖提供 96 和 120 dpi 版本，以及置中或縮放其他點陣圖。 這類應用程式會被視為「高 DPI 感知」，並提供比 Windows 自動調整的程式更好的整體視覺體驗。
- 開發人員：您可以在程式初始化期間宣告程式高 DPI 感知（並防止自動縮放）設定程式指令清單中的 dpi 感知旗標，或在程式初始化期間呼叫 SetProcessDPIAware（） API。 您可以使用巨集來簡化選取正確的圖形。 針對 Win32 位陣圖，您可以使用SS_CENTERIMAGE置中或SS_REALSIZECONTROL來縮放。
- 在 96 和 120 dpi 中檢查您的程式，以取得：
- 太小或太大的圖形。
- 正在裁剪、重疊或無法正確調整的圖形。
- 伸展不力的圖形（“Pixilated”）。
- 裁剪或不適合圖形背景的文字。
發簡訊
- 針對輔助功能和當地語系化，請勿在圖形中使用任何文字。 只將 商標 和文字表示為抽象概念，才進行例外狀況。