共用方式為


圖形元素

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們目前的設計指導方針

圖形元素 以可視化方式顯示關聯性、階層和強調。 其中包括背景、橫幅、玻璃、匯總工具、分隔符、陰影和控點。

使用陰影等 視窗總管的螢幕快照等

具有數種圖形元素類型的範例。

圖形元素通常不是互動式專案。 不過,分隔符對於可重設大小的內容而言是互動式的,而控點則是顯示互動性的圖形。

注意:組框動畫圖示商標 相關的指導方針會在個別的文章中呈現。

這是正確的使用者介面嗎?

雖然圖形元素是指出關聯性的強視覺方式,但過度使用它們會新增視覺雜亂,並減少表面上可用的空間。 它們應該謹慎使用。

Microsoft Windows 的設計趨勢是一種更簡單、更簡潔的外觀,可消除不必要的圖形和線條。

若要決定是否需要圖形元素,請考慮下列問題:

  • 設計的設計呈現和通訊是否與項目一樣清晰且有效? 如果是,請將其移除。
  • 您可以單獨使用版面配置來有效地傳達關聯性嗎? 如果是,請改用 版面配置。 您可以將相關控件放在彼此旁邊,並在不相關的控件之間放置額外的間距。 您也可以使用縮排來顯示階層式關聯性。

四個圖示版面配置螢幕快照

在此範例中,單獨使用版面配置來顯示控件關聯性。

  • 通訊是否有效,沒有文字? 如果沒有,請使用 群組方塊、標示分隔符或其他 標籤

使用模式

圖形元素有數種使用模式:

元素 描述
圖形圖例
用來以視覺化方式傳達想法。
圖形圖例與圖示類似,不同之處在於圖示可以是任何大小,而且通常不是互動式的。
螢幕快照 cpu 使用量歷程記錄圖表
在此範例中,使用圖形圖例來建議特徵的性質。
背景
用來強調或取消強調不同類型的內容。
背景可用來強調重要內容。
紅色背景上的病毒訊息 螢幕快照
在此範例中,背景用來強調重要工作。
背景也可以用來取消強調次要內容。
控制面板項目的螢幕快照
在此範例中,次要工作會藉由在工作窗格中尋找它們來取消強調。
橫幅
用來指出重要狀態。
相對於背景,橫幅主要強調單一文字字串。
橫幅的螢幕快照,其中包含設定資訊
在此範例中,橫幅用來指出頁面的設定是由組策略所控制。
玻璃
以策略方式使用 來減少視窗的視覺權數。
玻璃可以藉由專注於內容而不是視窗本身來減少表面的重量。
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”)。
    • 裁剪或不適合圖形背景的文字。

發簡訊

  • 針對輔助功能和當地語系化,請勿在圖形中使用任何文字。 只將 商標 和文字表示為抽象概念,才進行例外狀況。