圖像是一組視覺影像和符號,可幫助使用者了解和在應用程式中移動。 圖示在整個使用者界面中被用作視覺隱喻,代表著概念、動作或狀態。
Windows 11 使用三種圖示:應用程式、系統和檔案類型。 本文著重於前兩個類型。
小提示
本文說明 Fluent Design 語言 如何應用於Windows應用程式。 如需詳細資訊,請參閱 Fluent Design - Iconography。
應用程式圖示
應用程式圖示代表你在 Windows shell 中的應用程式。 它們主要用來開啟你的應用程式,同時在 Windows 視窗介面中也代表應用程式的出現位置。
應用程式圖示應該透過隱喻來代表應用程式的核心功能。 如需設計和建構應用程式圖示的詳細資訊,請參閱應用程式圖示。
系統圖示
在應用程式 UI 中,使用系統圖示作為命令列、導覽或狀態指示器等項目。 Windows 11 引入了新的系統圖示字型 Segoe Fluent Icons。 這款新字型與Windows 11中的geometry相得益彰。
Segoe Fluent Icons 中的所有字符都會以單行樣式繪製。 這表示它們是透過單一筆劃(1 epx)建立的。
Segoe Fluent Icons 中的字符遵循三個美學原則:
- 最低:字符只包含傳達概念所需的詳細資料。
- 和諧:字符以簡單和幾何形式為基礎。
- 進化:字符使用容易理解的新式隱喻。
想了解更多關於在應用程式介面中使用圖示的資訊,請參考 Icons in Windows app。
圖示大小
Segoe Fluent Icons 的字型規格與設計人員和開發人員習慣使用 SVG 和點陣圖圖示的方式相符。
每個字型字符都設計成圖示區域的足跡是一個正方形的 em。 具有 16-epx 字型大小的圖示相當於 16x16-epx 圖示,讓調整大小和定位更容易預測。
修飾詞
您可以結合基底圖示與修飾詞圖示,以視覺化方式建構系統圖示字符。
基底圖示是視覺隱喻的主要元素。 基底元素應該佔據整個圖示的範圍。
修飾圖示用於更改基底圖示的意義。 修飾詞元素應該放置在圖示占用空間的底部象限之一。
僅限基底圖示
單獨來看,這個紙張圖示傳達了檔案的概念。
基底圖示 + 修飾詞圖示
將向上箭號新增至檔案圖示會變更圖示的意義,以代表上傳的檔案。
分層
圖示分層是用來重疊兩個字符的技術。 我們建議使用圖示分層來建立相同圖示的不同狀態 (例如:作用中或選取的狀態)。
本地化
了解符號的文化內涵。 雖然圖像在大部分情況下不需要當地語系化,但某些圖示在一個文化中可能是可接受的,而在另一個文化中則不是。 根據使用的情境來驗證您的圖示選擇。
Examples
![]()
WinUI 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。 你可以從 Microsoft Store下載 App,或在 GitHub 瀏覽原始碼。