图标设计有什么原则 ?9个微软 Fluent 图标规范

2026-08-02 01:27:03/综合/6 阅读

在前一个版本 ,图标t图Fluent 系统图标采用了 MDL2 和 Monoline 图标集合 ,设计比较大的有什原则特征是直角 、方方正正的个微形状。不过随着 Win 11 系统的标规发布 ,我们可以看到 Fluent 系统图标也进行了比较大版本的图标t图优化 ,感知最大的设计地方就是图标变圆润了。

图标设计有什么原则?有什原则9个微软 Fluent 图标规范

设计理念有三个准则  :熟悉的 、友好的个微、现代的标规。图标形状遵循了用户熟悉的图标t图基本原则 ,示意上识别清晰,设计尽量远离隐喻含义 。有什原则同时,个微细节处理更友好,标规采用了圆角和简洁的形状 ,并有两个主题:线性和填充。

网格和基础形状

规范化的网格 ,能促进图标的整体性和统一性,设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始 ,比较建议使用网格系统,内容安全区域是 20px,周围有 2px 的内边距 。(留内边距主要是考虑个别图标居中分布和体量问题,有些图标元素会超出安全区域,比如修饰符类型图形)

基础形状是网格的基础,正方形 、圆形、纵向矩形 、水平矩形采用定义好的模板尺寸 ,在相关图标体量上保持一致的视觉比例。

图标设计有什么原则?9个微软 Fluent 图标规范

圆形 、矩形 、正方形图标体量效果如下。(矩形体量看起来有点偏小 ,这种问题受限于图标尺寸空间小)

图标设计有什么原则�?9个微软 Fluent 图标规范

线条

图标线条应当采用一致的粗细,线条末端采用全圆角。

图标设计有什么原则�	?9个微软 Fluent 图标规范

对齐网格

像素对齐很重要 ,特别是低分屏设备,图标可以看起来很清晰 。由于线条粗细是 1.5px,需要保证 1px 是对齐像素的,避免内外都出现虚边  。

图标设计有什么原则	?9个微软 Fluent 图标规范

但在某些特殊场景 ,为了使图标体量居中分布,就会出现像素不对齐的情况 ,比如一条竖线 。

图标设计有什么原则
?9个微软 Fluent 图标规范

圆角

Fluent 图标改动点较大的可以说是圆角了 ,传递了更柔和 、更友好的体验感受 。因此 ,我们认真打磨圆角的细节 ,定义了三种圆角数值。大圆角使用在线条直角或钝角处;当使用大圆角感觉形状太圆难以辨别时,我们可以使用中圆角;小圆角用于很小的细节或锐角处。(确实挺细的,也影响了整体的风格。如果追求统一大圆角的话 ,可能太偏圆润风格 ,更适合娱乐类产品用户吧)

图标设计有什么原则
	?9个微软 Fluent 图标规范

断口

断口多存在复合图标上 ,断口间距是 1px  。当图形角度堆叠时,圆角中心点需要一致 ,即外层图形圆角会稍大一点,使线条平滑过渡。(看起来确实挺和谐的)

图标设计有什么原则
?9个微软 Fluent 图标规范

修饰符

修改符应当谨慎使用,因为它对于一部分用户来说很难阅读。由于尺寸较小,修饰符元素要尽可能地简洁 ,常放于图标的右下角。设计师在绘制过程中,修饰符图形可以超出安全区域 ,使图标视觉感官居中分布 。

图标设计有什么原则?9个微软 Fluent 图标规范

关闭状态

如果已经建立的图标需要关闭状态 ,应当遵循模板:斜杠从左上角到右下角 45 度 ,撑满图标的安全区域。

图标设计有什么原则?9个微软 Fluent 图标规范

视觉平衡

图标平衡很重要 ,我们也有测试的两种方法。第一种方法是画一个圆圈 ,帮助我们更好地感知平衡性  。第二种方法是视觉重量测试 ,通过模糊来感知图标的区域面积,从而达到平衡的目的。

图标设计有什么原则	?9个微软 Fluent 图标规范

命名

随着更多图标的创建 ,我们必须非常有意识地命名,并尽可能地具有前瞻性 ,后续才能更好地协作 。我们推荐图标命名使用形状的明喻 ,比如盾牌代替安全,星号代表收藏。

图标设计有什么原则?9个微软 Fluent 图标规范

总结

以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧,线条粗细、圆角、居中、体量 、平衡、命名等方面还挺多细节可以打磨细化的,希望各位设计师能够结合业务来仔细琢磨 ,提炼出属于自己产品的图标规范 。

作者 :ALEI的设计思考

#免责声明#

本站提供的一切资源、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。