Windows 應用程式的圖示
圖示提供了視覺化的簡略表達方式,適用於動作、概念或產品。 圖示會將其代表的意義濃縮為一個符號性的圖像,而能跨越語言障礙,有助於節省螢幕空間這個珍貴的資源。
理想的圖示達到印刷格式與其餘設計語言的平衡。 它們不會混合使用隱喻,而且只會盡可能快速並簡單地溝通所需的內容。
圖示在應用程式內外都可顯示:
應用程式內的圖示
在您的應用程式中,可以使用圖示來表示動作,例如複製文字,或前往設定頁面。
應用程式外的圖示
在應用程式之外,Windows 在 [開始] 功能表和工作列中,會以圖示來代表您的應用程式。 如果使用者選擇將應用程式釘選到 [開始] 功能表,應用程式的啟動圖標可能出現應用程式的圖示。 應用程式的圖示會出現在標題列,您可以選擇建立含有應用程式標誌的啟動顯示畫面。
本文章會介紹您應用程式中的圖示。 若要深入了解應用程式以外的圖示 (應用程式圖示),請參閱 Windows 中的圖像設計一文。
知道何時要使用圖示
圖示可以節省空間,但該在什麼情況下使用?
像是剪下、複製、貼上和儲存之類的動作,或是導覽功能表的項目,都可以使用圖示。
如果您想要表達的概念已經有圖示存在,請直接使用。 (若要查看圖示是否存在,請查看 Segoe 圖示清單)。
如果有個圖示的意義很容易就能讓使用者了解,而且小尺寸也清晰易讀,就可使用該圖示。
如果圖示的意義不明確,或是需要複雜的圖形才能清晰顯示圖示,則請勿使用。
使用正確的圖示類型
有許多方式可建立圖示。 您可以使用像是 Segoe MDL2 Assets 的符號字型。 您可以建立自己的向量影像。 甚至可以使用點陣圖影像,雖然我們並不推薦。 以下是您可以將圖示新增到應用程式的方式摘要。
預先定義的圖示
Microsoft 以 Segoe MDL2 Assets 字型的形式,提供了超過 1,000 個圖示。 用字型取得圖示,可能並不是很直覺的方式。但透過 Windows 的字型顯示技術,這些圖示在任何解析度、任何尺寸的顯示器上,都相當清晰銳利。 如需說明,請參閱 Segoe MDL2 Assets 圖示。
字型
您不需要使用 Segoe MDL2 Assets 字型。 使用者在其系統上安裝的任何字型,例如 Wingdings 或 Webdings,您都可使用。
SVG file
可縮放向量圖形 (SVG) 資源適用於圖示,因為任何大小或解析度上看起來都很銳利。 大部分的繪圖應用程式可以匯出為 SVG。 如需說明,請參閱 SVGImageSource。
幾何物件
就像 SVG 檔案,幾何是向量資源,因此看起來總是很銳利。 不過,因為需要個別指定每個點和曲線,建立幾何物件並不容易。 只有當您需要修改圖示,而您的應用程式正在執行 (例如動畫) 時,才是不錯的選擇。 如需說明,請參閱移動與繪製命令語法。
點陣圖影像
您也可以使用點陣圖影像 (例如 PNG、GIF 或 JPEG),雖然我們並不推薦。
點陣圖影像是以特定大小建立而成,因此需視圖示需要的大小和螢幕的解析度,來縮放影像的大小。 當圖像被縮小時,它可能會顯得模糊。 當它放大時,它可能會顯得塊狀和像素化。 如果一定要使用點陣圖影像,建議使用 PNG 或 JPEG,而非 GIF。
讓圖示發揮功能
在您擁有一個圖示後,下一個步驟便是讓它執行一些與命令或瀏覽動作相關的項目。 最佳方式是將圖示新增至按鈕或命令列。
您還可以透過動畫圖示來吸引注意力,例如在教學中的下一個按鈕,或以有趣的方式反映與圖示相關聯的動作。 如需詳細資訊,請參閱 AnimatedIcon。
建立圖示按鈕
您可以在標準按鈕上放置圖示。 因為可以使用按鈕的位置相當廣泛,透過這種方式使用圖示,可讓動作圖示出現的位置更有彈性。
以下是將圖示新增至按鈕的其中一種方式:
步驟 1
將按鈕的字型家族設定為 Segoe MDL2 Assets
,並其內容屬性設定為想使用的字符的 Unicode 值:
<Button FontFamily="Segoe MDL2 Assets" Content="" />
步驟 2
使用其中一個圖示元素物件:BitmapIcon、FontIcon、PathIcon、ImageIcon,或SymbolIcon。 這項技術可讓您選擇更多類型的圖示。 它也可讓您視需要合併圖示和其他內容類型,例如文字。
<Button>
<StackPanel>
<SymbolIcon Symbol="Play" />
<TextBlock>Play the movie</TextBlock>
</StackPanel>
</Button>
在命令列上建立一系列的圖示
當您有一系列結合的命令,例如剪下/複製/貼上或一組相片編輯程式的繪圖命令,請都放在同一個命令列上。 命令列需要一個或多個應用程式列按鈕或是應用程式列切換按鈕,每個按鈕皆代表一個動作。 每個按鈕都有一個用來控制要顯示哪個圖示的圖示屬性。 指定圖示有很多種方式。
最簡單的方式是使用預先定義的圖示清單。 只要指定圖示名稱,例如 [上一步] 或 [停止],系統就會繪製它:
<CommandBar>
<AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
<AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
<AppBarSeparator/>
<AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
<AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
<AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
<AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>
如需完整圖示名稱的清單,請參閱符號列舉參考。
還有其他方式能在命令列上提供按鈕圖示:
- FontIcon:該圖示依據的是指定字型系列的字符。
- BitmapIcon:該圖示依據的是具有指定 URI 的點陣圖影像。
- PathIcon:該圖示依據的是路徑資料。
- ImageIcon:該圖示是以影像類別支援的影像檔案類型為基礎。
如需深入了解命令列,請參閱命令列一文。
相關文章
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應