社区编辑申请
注册/登录
研究微软 Fluent 图标规范后,我总结了这九个知识点!
移动开发 移动应用
最近我在学习使用 Figma,会在社区查找一些大厂的设计系统文件学习,看到一篇微软 Fluent 系统图标规范文档,还挺详细的。所以结合个人图标经验挑选部分内容来翻译成一篇文章,便于扩展自己的图标思维。

最近我在学习使用 Figma,会在社区查找一些大厂的设计系统文件学习,看到一篇微软 Fluent 系统图标规范文档,还挺详细的。其中,我发现有些小点自己平时很少注意到,并且感觉对设计师定义图标规范也有一定的帮助,所以结合个人图标经验挑选部分内容来翻译成一篇文章,便于扩展自己的图标思维。(备注:以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标)

概述

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

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

网格和基础形状

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

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

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

线条

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

对齐网格

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

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

圆角

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

断口

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

修饰符

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

关闭状态

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

视觉平衡

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

命名

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

总结

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

责任编辑:未丽燕 来源: 优设
相关推荐

2022-06-16 17:02:49

微软智能云混合云Azure

2022-05-10 14:11:05

网络安全网络犯罪

2022-05-27 10:00:06

C++游戏引擎

2022-05-11 09:18:04

微软PowerShell降级

2022-06-09 06:57:53

Windows 10Windows 11微软

2022-06-16 07:32:38

VSCodePython插件

2022-06-22 10:23:42

互联网用户IE浏览器退休

2022-05-26 11:01:24

2022-05-10 06:01:17

Windows 11微软操作系统

2022-05-24 15:22:09

网络安全企业风险

2022-06-16 14:07:26

Java代码代码review

2022-06-16 09:22:28

图数据库图数据数据库

2022-06-06 10:20:59

CPUCPU 使用率CPU 负载

2022-06-27 09:54:38

编程语言JavaC++

2022-06-16 11:33:57

物联网区块链科技

2022-05-16 07:35:21

Windows远程桌面远程服务器

2022-05-26 07:18:54

Windows 11RTM22H2

2022-06-06 12:53:17

吴恩达AI机器学习

2022-06-15 17:55:43

IE浏览器Windows微软

2022-05-19 19:11:07

微软Windows 11

同话题下的热门内容

就因为QQ登录二维码,全网发生了大规模的社死京东618广告精排百分位AUC提升技术方案QQ又出新BUG,你的密码变成“123456789”了?实测避坑!十个B端组件红黑榜揭秘百度直播iOS SDK平台化输出改造微信这个限制,终于被两个软件打破了!B端产品如何做好移动化设计?我总结了这篇实战经验!

编辑推荐

Safari不是唯一选择:8款优秀iPhone Web浏览器应用!从安卓智能手机控制PC的五款最佳应用软件谁说苹果手机不能截长屏?教你3种方法,别再说不知道了推荐两款iOS端磁力下载工具后悔药来了!iOS 15刷机降级iOS 14.6详细图文教程
我收藏的内容
点赞
收藏

51CTO技术栈公众号