最近在学习使用Figma，会在社区里搜索一些大厂的设计系统文件进行学习。看了一个微软Fluent系统图标规范文档，写的还是比较详细的。其中，我发现有一些我很少注意的小点，感觉对设计师定义图标规范也有帮助，所以结合我个人的图标经验，挑选了一些内容翻译成一篇文章，所以以扩展我的图标思维。（注：以下规格为图标尺寸为24px，线宽为1.5px）概述上一版本Fluent系统图标使用的是MDL2和Monoline图标合集，比较大的特点是矩形和方形.不过随着Win11系统的发布，我们可以看到Fluent系统的图标也进行了更大版本的优化，最大的感受就是图标变圆了。设计理念具有三个标准：熟悉、友好和现代。图标的造型遵循用户熟悉的基本原则，并在示意图中明确标识，尽可能远离隐喻意义。同时，细节也更加友好，采用了圆角和简单的形状，有线性和填充两种主题。网格和基本形状归一化的网格可以促进图标的完整性和统一性，设计者可以更有条理地绘制图形元素。从24px图标大小开始，建议使用网格系统，内容安全区域为20px，周围有2px填充。（内边距主要是考虑单个图标的居中分布和体积，有些图标元素会超出安全区域，比如修改器类型的图形。）基本形状是网格的基础，正方形、圆形、垂直矩形和水平矩形采用定义明确的模板尺寸，在相关图标体积上保持一致的视觉比??例。圆形、矩形、方形图标的体积效果如下。（矩形的体积看起来有点小，这个问题是受限于iconsize空间小。）lineicon线条要使用一致的粗细，线条的末端要全圆角。对齐网格像素对齐很重要，尤其是在图标看起来很清晰的低分辨率设备上。由于线宽为1.5px，需要保证1px与像素对齐，避免内外虚边。但是在一些特殊场景下，为了让图标体积居中，会出现像素不对齐的情况，比如一条竖线。圆角Fluent的图标变化较大，可以说是圆角化，传达出更柔和、更友好的体验。因此，我们仔细打磨了圆角的细节，定义了三个圆角值。直线的直角或钝角使用大圆角；使用大圆角时，形状太圆难以区分，可以使用中等圆角；小圆角用于小细节或锐角。（真的很显瘦，也很影响整体风格。如果追求统一的大圆角，可能会太圆，比较适合娱乐类产品的用户。）断口和断口多出现在复合图标上，断口之间的距离为1px。图形角度叠放时，圆角中心点需要一致，即外侧图形圆角稍大，使线条过渡平滑。（看起来确实很和谐）Modifier修饰符应该谨慎使用，因为对于某些用户来说可能难以阅读。由于体积小，修饰元素要尽量简洁，一般放置在图标的右下角。在设计者的绘制过程中，修饰图形可以超出安全区域，使图标的视觉感居中。关闭状态如果一个已经建立的图标需要关闭，应该遵循模板：斜线从左上角到右下角成45度角，填满图标的安全区域。视觉平衡图标平衡很重要，我们也有两种测试方法。第一种方法是画一个圆圈，这有助于我们更好地感知平衡。第二种方法是视觉权重测试，利用模糊来感知图标的面积，从而达到平衡的目的。命名随着更多图标的创建，我们必须非常注意命名，并尽可能具有前瞻性，以便以后更好地协作。我们建议使用形状明喻来命名图标，例如用盾牌表示保险箱，用星号表示收藏品。总结以上是微软Fluent图标规范的一些小翻译的总结。线条粗细、圆角、居中、体积、平衡、命名等方面都有不少细节可以打磨细化。希望设计师能够结合自己的业务慎重考虑。,提取自己产品的图标规范。
