共用方式為


Windows 中的圖像設計

圖像是一組視覺影像和符號,可幫助使用者了解和在應用程式中移動。 圖示在整個使用者界面中被用作視覺隱喻,代表著概念、動作或狀態。

Windows 11 使用三種類型的圖示:應用程式、系統和檔案類型。 本文著重於前兩個類型。

提示

本文說明 Fluent Design 語言如何套用至 Windows 應用程式。 如需詳細資訊,請參閱 Fluent Design - Iconography

應用程式圖示

假設地圖應用程式的抽象應用程式圖示。

應用程式圖示代表 Windows 殼層中的應用程式。 它們主要用來開啟您的應用程式,但也代表您的應用程式出現在 Windows 殼層中的任何位置。

應用程式圖示應該透過隱喻來代表應用程式的核心功能。 如需設計和建構應用程式圖示的詳細資訊,請參閱應用程式圖示

系統圖示

來自 Segoe Fluent 圖標的購物車圖示。

針對命令行、瀏覽或狀態指標等專案,在應用程式 UI 內使用系統圖示。 Windows 11 引進了新的系統圖示字型 Segoe Fluent Icon。 這個新的字型可補充 Windows 11 中的幾何

Segoe Fluent Icons 中的所有字符都會以單行樣式繪製。 這表示它們是透過 1 個 epx 的單一筆劃建立的。

Segoe Fluent Icons 中的字符遵循三個美學原則:

  • 最低:字符只包含傳達概念所需的詳細資料。
  • 和諧:字符以簡單和幾何形式為基礎。
  • 進化:字符使用容易理解的新式隱喻。

如需在應用程式 UI 中使用圖示的詳細資訊,請參閱 Windows 應用程式中的圖示。

圖示大小

大小正確的印表機圖示。

Segoe Fluent Icons 的字型規格與設計人員和開發人員習慣使用 SVG 和點陣圖圖示的方式相符。

每個字型字符都設計成圖示區域的足跡是一個正方形的 em。 具有 16-epx 字型大小的圖示相當於 16x16-epx 圖示,讓調整大小和定位更容易預測。

修飾詞

您可以結合基底圖示與修飾詞圖示,以視覺化方式建構系統圖示字符。

基底圖示是視覺隱喻的主要元素。 基底元素應該佔據整個圖示的範圍。

修飾詞圖示會修改基底圖示的意義。 修飾詞元素應該放置在圖示範圍的其中一個底部象限。

檔案圖示。

僅限基底圖示
單獨來看,這個紙張圖示傳達了檔案的概念。

以向上箭號圖示重疊的檔案圖示。

基底圖示 + 修飾詞圖示
將向上箭號新增至檔案圖示會變更圖示的意義,以代表上傳的檔案

分層

圖示分層是用來重疊兩個字符的技術。 我們建議使用圖示分層來建立相同圖示的不同狀態 (例如:作用中或選取的狀態)。

黑白資料夾圖示加上沒有外框的米色資料夾圖示等於黑色外框的米色資料夾圖示。

當地語系化

了解符號的文化內涵。 雖然圖像在大部分情況下不需要當地語系化,但某些圖示在一個文化中可能是可接受的,而在另一個文化中則不是。 使用您將使用這些選項的內容來驗證您的圖像選項。

範例

WinUI 3 資源庫應用程式包含大多數 WinUI 3 控制項和功能的互動式範例。 從 Microsoft Store 取得應用程式,或在 GitHub 上取得原始程式碼