适用于 Windows 应用的图标

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

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

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

应用中的图标

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

应用外的图标

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

本文介绍应用内的图标。 若要了解应用外部的图标（应用图标），请参阅 Windows 文章中的图标。

了解何时使用图标

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

对操作（如剪切、复制、粘贴和保存）或导航菜单上的项目使用图标。

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

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

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

使用正确的图标类型

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

预定义图标

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

字体

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

SVG 文件

可缩放矢量图形（SVG）资源非常适合图标，因为它们始终以任何大小或分辨率清晰显示。 大多数绘图应用程序都可以导出为 SVG。 有关说明，请参阅 SVGImageSource。

Geometry 对象

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

位图图像

虽然不建议使用位图图像（如 PNG、GIF 或 JPEG）。

位图以特定尺寸创建，因此它们必须根据你需要的图标大小和屏幕分辨率放大或缩小。 当图像缩小（收缩）时，它可能会出现模糊。 纵向扩展时，它可能会出现块状和像素化。 如果必须使用位图图像，建议通过 JPEG 使用 PNG 或 GIF。

使图标执行某些操作

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

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

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

如果具有一系列一起的命令，例如剪切/复制/粘贴或一组用于照片编辑程序的绘图命令，将它们放在命令栏上。 命令栏采用一个或多个应用栏按钮或应用栏切换按钮，每个按钮表示一项操作。 每个按钮都有一个 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>

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

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

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

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

相关文章

• 应用图标和徽标
• AnimatedIcon