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="&#xE102;" />

步驟 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：該圖示是以影像類別支援的影像檔案類型為基礎。

如需深入了解命令列，請參閱命令列一文。

相關文章

• 應用程式圖示及標誌
• AnimatedIcon