Windows 中的圖像設計
圖像是一組視覺影像和符號,可幫助使用者了解和在應用程式中移動。 圖示在整個使用者界面中被用作視覺隱喻,代表著概念、動作或狀態。
Windows 11 使用三種類型的圖示:應用程式、系統和檔案類型。 本文著重於前兩個類型。
提示
本文說明 Fluent Design 語言如何套用至 Windows 應用程式。 如需詳細資訊,請參閱 Fluent Design - Iconography。
應用程式圖示
應用程式圖示代表 Windows 殼層中的應用程式。 它們主要用來開啟您的應用程式,但也代表您的應用程式出現在 Windows 殼層中的任何位置。
應用程式圖示應該透過隱喻來代表應用程式的核心功能。 如需設計和建構應用程式圖示的詳細資訊,請參閱應用程式圖示。
系統圖示
針對命令行、瀏覽或狀態指標等專案,在應用程式 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 上取得原始程式碼