在前一个版本 ，图标t图Fluent 系统图标采用了 MDL2 和 Monoline 图标集合 ，设计比较大的有什原则特征是直角 、方方正正的个微形状 。不过随着 Win 11 系统的标规发布，我们可以看到 Fluent 系统图标也进行了比较大版本的图标t图优化 ，感知最大的设计地方就是图标变圆润了 。
设计理念有三个准则 ：熟悉的 、友好的个微、现代的标规 。图标形状遵循了用户熟悉的图标t图基本原则 ，示意上识别清晰 ，设计尽量远离隐喻含义 。有什原则同时，个微细节处理更友好 ，标规采用了圆角和简洁的形状 ，并有两个主题 ：线性和填充。
规范化的网格 ，能促进图标的整体性和统一性 ，设计师绘制图形元素时也更有条理性 。从 24px 图标尺寸开始 ，比较建议使用网格系统 ，内容安全区域是 20px ，周围有 2px 的内边距 。（留内边距主要是考虑个别图标居中分布和体量问题 ，有些图标元素会超出安全区域 ，比如修饰符类型图形）
基础形状是网格的基础 ，正方形 、圆形 、纵向矩形 、水平矩形采用定义好的模板尺寸 ，在相关图标体量上保持一致的视觉比例 。
圆形 、矩形 、正方形图标体量效果如下 。（矩形体量看起来有点偏小，这种问题受限于图标尺寸空间小）
图标线条应当采用一致的粗细，线条末端采用全圆角 。
像素对齐很重要 ，特别是低分屏设备 ，图标可以看起来很清晰 。由于线条粗细是 1.5px ，需要保证 1px 是对齐像素的 ，避免内外都出现虚边 。
但在某些特殊场景 ，为了使图标体量居中分布 ，就会出现像素不对齐的情况 ，比如一条竖线 。
Fluent 图标改动点较大的可以说是圆角了 ，传递了更柔和 、更友好的体验感受 。因此 ，我们认真打磨圆角的细节 ，定义了三种圆角数值。大圆角使用在线条直角或钝角处；当使用大圆角感觉形状太圆难以辨别时 ，我们可以使用中圆角；小圆角用于很小的细节或锐角处 。（确实挺细的，也影响了整体的风格。如果追求统一大圆角的话 ，可能太偏圆润风格 ，更适合娱乐类产品用户吧）
断口多存在复合图标上 ，断口间距是 1px。当图形角度堆叠时 ，圆角中心点需要一致 ，即外层图形圆角会稍大一点，使线条平滑过渡。（看起来确实挺和谐的）
修改符应当谨慎使用 ，因为它对于一部分用户来说很难阅读。由于尺寸较小 ，修饰符元素要尽可能地简洁 ，常放于图标的右下角 。设计师在绘制过程中 ，修饰符图形可以超出安全区域，使图标视觉感官居中分布 。
如果已经建立的图标需要关闭状态 ，应当遵循模板 ：斜杠从左上角到右下角 45 度 ，撑满图标的安全区域 。
图标平衡很重要 ，我们也有测试的两种方法。第一种方法是画一个圆圈 ，帮助我们更好地感知平衡性 。第二种方法是视觉重量测试 ，通过模糊来感知图标的区域面积 ，从而达到平衡的目的 。
随着更多图标的创建 ，我们必须非常有意识地命名 ，并尽可能地具有前瞻性，后续才能更好地协作 。我们推荐图标命名使用形状的明喻 ，比如盾牌代替安全，星号代表收藏 。
以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧，线条粗细 、圆角 、居中、体量 、平衡 、命名等方面还挺多细节可以打磨细化的，希望各位设计师能够结合业务来仔细琢磨，提炼出属于自己产品的图标规范 。
作者：ALEI的设计思考
关注微信
