圖形元素
注意
此設計指南是針對 Windows 7 所建立，尚未針對較新版本的 Windows 進行更新。 大部分的指導方針仍以原則方式套用，但簡報和範例不會反映 我們目前的設計指導方針。
圖形元素 會以視覺化方式顯示關聯性、階層和強調。 其中包括背景、橫幅、玻璃、匯總工具、分隔符號、陰影和控制碼。
具有數種圖形元素類型的範例。
圖形元素通常不是互動式專案。 不過，分隔符號是可調整大小的內容的互動式，而控點則是顯示互動性的圖形。
注意：與群組方塊、動畫、圖示和商標相關的指導方針會分別顯示在不同的文章中。
這是正確的使用者介面嗎？
雖然圖形元素是指出關聯性的強視覺方式，但過度使用它們會增加視覺雜亂，並減少介面上可用的空間。 應該謹慎使用它們。
Microsoft Windows 中的設計趨勢是一種更簡單、更簡潔的外觀，可排除不必要的圖形和線條。
若要決定是否需要圖形元素，請考慮下列問題：
- 設計的設計呈現和通訊是否與專案一樣清楚且有效？ 如果是，請將其移除。
- 您可以單獨使用版面配置來傳達關聯性嗎？ 如果是，請改用 版面配置 。 您可以將相關的控制項放在彼此旁邊，並在不相關的控制項之間放置額外的間距。 您也可以使用縮排來顯示階層式關聯性。
在此範例中，單獨使用配置來顯示控制項關聯性。
使用模式
圖形元素有數種使用模式：
| 元素 | Description |
|---|---|
|
圖形圖例 使用 以視覺化方式傳達想法。 |
圖形圖例與圖示類似，不同之處在于它們可以是任何大小，而且通常不是互動式的。 
在此範例中，會使用圖形圖例來建議特徵的本質。 |
|
背景 用來強調或取消強調不同類型的內容。 |
背景可用來強調重要內容。 
在此範例中，背景是用來強調重要工作。 背景也可以用來取消強調次要內容。 
在此範例中，次要工作會藉由在工作窗格中尋找它們來取消強調。 |
|
橫幅 用來指出重要狀態。 |
相較于背景，橫幅主要強調單一文字字串。 
在此範例中，會使用橫幅來指出頁面的設定是由群組原則所控制。 |
|
玻璃 策略性地使用 來減少視窗的視覺權數。 |
玻璃可以藉由將焦點放在內容而非視窗本身，以減少表面的重量。 
在此範例中，玻璃會將使用者的注意力放在內容上，而不是控制項。 |
|
彙總工具 用來建立強式相關控制項之間的視覺關聯性。 |
在此範例中，匯總工具背景是用來強調總管中 [上一頁] 和 [向前] 按鈕之間的關聯性。
在此範例中，界限匯總工具是用來強調控制項之間的關聯性，並讓控制項感覺就像是單一控制項，而不是八個控制項。 |
|
分隔符號 用來分隔弱式相關或不相關的控制項。 |
分隔符號可以是互動式或非互動式。 可調整大小的內容之間的互動式分隔符號稱為分割器。 
在此範例中，互動式分隔符號用於可調整大小的內容。 
在此範例中，分隔符號不是互動式的。 |
|
陰影 用來讓內容以視覺化方式根據其背景來醒目提示。 |
在此範例中，陰影會讓圖稿在背景中脫穎而出。 |
|
處理 使用 表示物件可以移動或調整大小。 |
控制碼一律是互動式的，而且滑鼠指標會在暫留時建議其行為。 
在這些範例中，控制碼表示物件可以調整大小。 |
指導方針
一般
- 不要單獨透過圖形元素傳達基本資訊。 這麼做會針對具有視覺障礙或障礙的使用者顯示協助工具問題。
圖形設計
圖形在強化單一簡單概念時最有效。 需要思考解譯的複雜圖形無法正常運作。 平假名詞最適合用於洞形繪圖。
不正確：
在此範例中，來自 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」) 。
- 裁剪或不適合圖形背景的文字。
Text
- 對於協助工具和當地語系化，請勿在圖形中使用任何文字。 僅將 商標 和文字表示為抽象概念的例外狀況。