共用方式為


Windows 中的圖示

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

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

小提示

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

應用程式圖示

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

應用程式圖示代表你在 Windows shell 中的應用程式。 它們主要用來開啟你的應用程式,同時在 Windows 視窗介面中也代表應用程式的出現位置。

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

系統圖示

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

在應用程式 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 3 圖庫應用程式包含互動式的 WinUI 控制項與功能範例。 你可以從 Microsoft Store下載 App,或在 GitHub 瀏覽原始碼。