适用于 Windows 应用的图标

图标提供操作、概念或产品的视觉速记。 通过将含义压缩为符号图像，图标可以跨越语言障碍并帮助节省宝贵的资源：屏幕空间。

良好的图标会与版式和设计语言的其余部分相协调。 他们不混合隐喻，他们只传达所需的，尽可能快速和简单。

图标可以显示在应用内和应用外部：

应用中的图标

在应用中，可以使用图标来表示操作，例如复制文本或转到设置页面。

应用外的图标

在应用外部，Windows 使用图标在“开始”菜单和任务栏上表示应用。 如果用户选择将应用固定到“开始”菜单，则应用的“开始”磁贴可以显示应用的图标。 应用的图标显示在标题栏上，你可以选择使用应用的徽标创建初始屏幕。

本文介绍应用内的图标。 若要了解应用外部的图标 (应用图标) ，请参阅 Windows 中的图标一 文。

了解何时使用图标

图标可以节省空间，但应在何时使用？

将图标用于剪切、复制、粘贴和保存等操作，或用于导航菜单上的项。

如果要表示的概念，请使用图标（如果已存在）。 （若要查看图标是否存在，检查 Segoe 图标列表。）

如果用户可以轻松地理解图标的含义，且以小尺寸表达含义足够简单，则使用图标。

如果图标的含义不清晰，或者需要复杂的外形才能清晰表达，则不要使用图标。

使用正确类型的图标

可通过多种方式创建图标。 可以使用 Segoe MDL2 Assets 这样的符号字体。 可以创建自己的基于矢量的图像。 甚至可以使用位图，不过我们不建议这样做。 下面汇总了向应用添加图标的方法。

预定义图标

Microsoft 以 Segoe MDL2 Assets 字体的形式提供了 1，000 多个图标。 从字体获取图标可能并不直观，但 Windows 字体显示技术意味着这些图标在任何显示器、任何分辨率和任何大小上看起来都清晰而清晰。 有关说明，请参阅 Segoe MDL2 Assets 图标。

字体

无需使用 Segoe MDL2 Assets 字体。 可以使用用户在其系统上安装的任何字体，例如 Wingdings 或 Webding。

SVG 文件

可缩放的矢量图形 (SVG) 资源非常适合图标，因为它们在任何大小或分辨率下看起来总是清晰。 大多数绘图应用程序都可以导出为 SVG。 有关说明，请参阅 SVGImageSource。

Geometry 对象

与 SVG 文件一样，几何图形也是一种基于矢量的资源，所以看起来始终很清晰。 不过，创建几何图形比较复杂，因为必须单独指定每个点和曲线。 只有在应用运行时需要修改图标 (进行动画处理（例如) ）时，这是一个不错的选择。 有关说明，请参阅用于移动和绘制几何图形的命令。

位图图像

可以使用位图图像 (，例如 PNG、GIF 或 JPEG) ，但我们不建议使用。

位图以特定尺寸创建，因此它们必须根据你需要的图标大小和屏幕分辨率放大或缩小。 当图像缩小 (缩小) 时，它可能会显得模糊。 纵向扩展时，它可能会显示为块状和像素化。 如果必须使用位图图像，我们建议在 JPEG 上使用 PNG 或 GIF。

使图标执行某些操作

拥有图标后，下一步是通过将其与命令或导航操作相关联来使其执行某些操作。 最佳方法是将图标添加到按钮或命令栏。

还可以对图标进行动画处理，以吸引人们对 UI 组件的注意，例如教程中的下一个按钮，或者以有趣且有趣的方式反映与图标关联的操作。 有关详细信息，请参阅 AnimatedIcon。

创建图标按钮

可以在标准按钮上放置图标。 由于你可以在各种位置使用按钮，因此以这种方式使用图标可以更灵活地显示操作图标的位置。

下面是向按钮添加图标的一种方法：

步骤 1
将按钮的字体系列设置为 Segoe MDL2 Assets ，将其 content 属性设置为要使用的字形的 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>

在命令栏上创建一系列图标

当你有一系列命令（例如剪切/复制/粘贴）或照片编辑程序的一组绘图命令时，将它们放在 命令栏上。 命令栏采用一个或多个应用栏按钮或应用栏切换按钮，每个按钮表示一项操作。 每个按钮都有一个 Icon 属性，用于控制它显示的图标。 可以通过多种方式指定图标。

最简单的方法是使用预定义图标列表。 只需指定图标名称，例如 “后退” 或“ 停止”，系统就会绘制它：

<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>

有关图标名称的完整列表，请参阅 Symbol 枚举引用。

还有其他方法可为命令栏上的按钮提供图标：

• FontIcon：图标基于指定字体系列的字形。
• BitmapIcon：图标基于具有指定 URI 的位图图像文件。
• PathIcon：图标基于 路径 数据。
• ImageIcon：图标基于 Image 类支持的图像文件类型。

若要了解有关命令栏的详细信息，请参阅 命令栏 一文。

相关文章

• 应用图标和徽标
• AnimatedIcon