图标是行为或概念的可视化表示形式。 它们通常用于为控件和命令添加含义。 实际或符号化的视觉对象使用户能够以与标记帮助用户浏览其环境的相同方式浏览 UI。 这些视觉对象应简单明了，并且只包含所需的详细信息，以使客户能够快速分析他们在选择控件时将会发生的操作。
注意
本文介绍如何设计功能区按钮的图标。 有关在 Microsoft 365 应用程序的应用购置和管理 UI 中表示加载项的图标的指导，请参阅 外接程序购置和管理的设计图标。
Office 应用功能区界面具有标准的视觉样式。 这可以确保一致性并熟悉各个 Office 应用程序。 本文中的指南可帮助你为适合 Office 自然组成部分的解决方案设计一组 PNG 资产。
Monoline 样式
Monoline 样式的目标是具有一致、清晰且易于访问的图标，以便通过简单的视觉对象传达作和功能，确保所有用户都能访问这些图标，并且具有与 Windows 中其他位置使用的图标一致的样式。
以下指南适用于想要为与 Office 产品中已有的图标一致的功能创建图标的第三方开发人员。
设计原则
- 简单、干净、清晰。
- 仅包含必需的元素。
- 灵感来自 Windows 图标样式。
- 可供所有用户访问。
传达含义
- 使用描述性元素（如页面）表示文档或信封来表示邮件。
- 使用相同的元素来表示相同的概念。 例如，邮件始终由信封表示，而不是邮票。
- 在概念开发过程中使用核心隐喻。
减少元素
- 将图标缩小到其核心含义，仅使用对隐喻至关重要的元素。
- 无论图标大小如何，将图标中的元素数限制为 2 个。
一致性
图标的大小、排列和颜色应一致。
造型
Perspective
默认情况下，单行图标是向前的。 某些需要透视或旋转的元素（如多维数据集）是允许的，但应将异常保持在最低限度。
点缀
单线是一种干净的最小样式。 所有内容都使用平面颜色，这意味着没有渐变、纹理或光源。
设计
大小
建议以所有这些大小生成每个图标，以支持高 DPI 设备。 绝对 需要 的大小为 16 像素、20 像素和 32 像素，因为这些是 100% 的大小。
16 像素、20 像素、24 像素、32 像素、40 像素、48 像素、64 像素、80 像素、96 像素
重要
有关如何为外接程序创建符合特定格式要求的图标的指导，请参阅 在 Microsoft 市场中和 Office 中创建有效列表。
布局
下面是带有修饰符的图标布局示例。
元素
Base：图标表示的主要概念。 这通常是图标所需的唯一视觉对象，但有时可以使用辅助元素修饰符来增强主要概念。
修饰符：任何覆盖基的元素;即通常表示作或状态的修饰符。 它通过充当加法、更改或描述符来修改基元素。
建造
元素放置
基本元素放置在填充内的图标中心。 如果不能完全居中放置，则底应位于右上角。 在以下示例中，图标完全居中。
在以下示例中，图标在左侧显示有问题。
修饰符几乎始终放置在图标画布的右下角。 在一些极少数情况下，修饰符放置在不同的角落。 例如，如果基元素无法使用右下角的修饰符识别，请考虑将其置于左上角。
填充
每个大小图标在图标周围都有指定的填充量。 基元素保留在填充内，但修饰符应与画布的边缘对齐，从填充扩展到图标边框的边缘。 下图显示了建议用于每个图标大小的填充。
| 16px | 20px | 24px | 32px | 40px | 48px | 64px | 80px | 96px |
|---|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
线条粗细
单线是一种以线条和轮廓形状为主的样式。 根据生成的大小，图标应使用以下行粗细。
| 图标大小： | 16px | 20px | 24px | 32px | 40px | 48px | 64px | 80px | 96px |
|---|---|---|---|---|---|---|---|---|---|
| 线条粗细： | 1px | 1px | 1px | 1px | 2px | 2px | 2px | 2px | 3px |
| 示例图标： |
|
|
|
|
|
|
|
|
|
剪切
当图标元素放置在另一个元素的顶部时，底部元素的剪切 () 用于在两个元素之间提供空间，主要用于提高可读性。 当修饰符放置在基元素的顶部时，通常会发生这种情况，但在某些情况下，这两个元素都不是修饰符。 这两个元素之间的这些切口有时称为“间隙”。
间隙的大小应与在该大小上使用的线条粗细相同。 如果创建 16 像素图标，则间隙宽度为 1px;如果是 48 像素图标，则间距应为 2px。 以下示例显示了一个 32 px 图标，修饰符和基础基之间的间距为 1px。
在某些情况下，如果修饰符具有对角线或弯曲边缘，并且标准间隙不能提供足够的分离，则间距可以增加 1/2 像素。 这很可能只会影响行长为 1px 的图标：16 像素、20 像素、24 像素和 32 像素。
背景填充
“单线”图标集中的大多数图标都需要背景填充。 但是，在某些情况下，对象不会自然具有填充，因此不应应用任何填充。 以下图标具有白色填充。
以下图标没有填充。 (包含齿轮图标以显示中心孔未填充。)
填充的最佳做法
允许事项
- 填充具有定义边界的任何元素，并且自然会有填充。
- 使用单独的形状创建背景填充。
- 使用调色板中的“背景填充”。
- 保持重叠元素之间的像素分隔。
- 在多个对象之间填充。
禁止事项
- 不要填充不会自然填充的对象;例如，回形针。
- 不要填充方括号。
- 不要在数字或字母字符后面填充。
颜色
调色板旨在实现简单性和可访问性。 它包含 4 种中性颜色和蓝色、绿色、黄色、红色和紫色的两种变体。 橙色有意不包含在单线图标调色板中。 每种颜色旨在以特定方式使用，如本节中所述。
调色板
如何使用颜色
在单线调色板中，所有颜色都有独立、大纲和填充变体。 通常，元素使用填充和边框构造。 颜色按以下模式之一应用。
- 对于没有填充的对象，单独使用独立颜色。
- 边框使用“轮廓”颜色，填充使用“填充”颜色。
- 边框使用独立颜色，填充使用背景填充颜色。
下面是使用颜色的示例。
最常见的情况是元素使用带背景填充的深灰色独立元素。
使用彩色填充时，应始终具有相应的轮廓颜色。 例如，蓝色填充应仅与蓝色轮廓一起使用。 但此一般规则有两个例外。
- 背景填充可与任何颜色独立使用。
- 浅灰色填充可以与两种不同的轮廓颜色一起使用：深灰色或中等灰色。
何时使用颜色
颜色应用于传达图标的含义，而不是用于装饰。 它应 向用户突出显示作 。 将修饰符添加到具有颜色的基元素时，基元素通常会转换为深灰色和背景填充，以便修饰符可以是颜色元素，例如，以下情况将“X”修饰符添加到以下集最左侧图标的图片基。
应将图标限制为除上述“轮廓”和“填充”以外的其他 一种 颜色。 但是，如果它对于其隐喻至关重要，则可以使用更多颜色，但限制为灰色以外的其他两种颜色。 在极少数情况下，存在需要更多颜色的例外情况。 下面是仅使用一种颜色的图标的不错示例。
但以下图标使用太多颜色。
对内部“内容”使用 “中等灰色 ”，例如电子表格图标中的网格线。 当内容需要显示控件的行为时，将使用其他内部颜色。
文本行
当文本行位于“容器” (例如文档) 上的文本时，请使用中等灰色。 不在容器中的文本行应为 深灰色。
Text
避免在图标中使用文本字符。 由于 Office 产品在世界各地使用，我们希望尽可能保持图标语言中性。
生产
图标文件格式
最终图标应另存为 .png 图像文件。 使用具有透明背景且深度为 32 位的 PNG 格式。
在加载项中使用图标
外接程序命令添加按钮、文本和 Office UI 图标。 外接程序命令按钮应提供有意义的图标和标签，以便清楚地标识用户在使用命令时执行的操作。 遵循本文中的风格和生产指南，帮助你设计与 Office 无缝集成的图标。
许多 HTML 容器包含带有插图的控件。 使用 Fabric Core 的自定义字体在外接程序中呈现 Office 样式图标。 Fabric Core 提供的图标字体包含许多常见 Office 隐喻的字形，你可以根据自己的需求缩放、颜色和样式。 如果你有带自己图标集的现有视觉语言，则可在 HTML 画布中随意使用。 构建自己带标准图标集的品牌的连续性是任何设计语言的重要组成部分。 请注意避免与 Office 隐喻产生冲突导致客户混淆。