Alice

对于一套图标来说,能让用户记得住,源于图标的与众不同;而能让用户觉得有专业感,其实是源于图标的整齐划一。图标设计本身也有自己一套规范,在设计图标的过程中遵循一定规范去工作,不仅可以使图标看起来更美观,而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释,欢迎大家讨论。

 

很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件,且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定:

图片

关于图标设计,你大概也有思考过这样的问题:

  • 为什么图标要使用 1024 X 1024px 的网格进行绘制?
  • 设计页面的时候,如果需要的图标大小是 16 X 16px,为什么不推荐直接使用 16 X 16px 的网格绘制图标呢?

对于这类问题,本文解答如下 ——

 

1 . 可以「精确」绘制细节

下面这张图你可以很清楚的看到网格的用法:图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px,也就是说,这个蓝色小方格里面还是一个 32 X 32 的格子盘:

图片

你可以想象,当你在绘制一个图标时,其实是在一个布满了小格子的纸上进行绘制,这样做我们在绘制图标的时候可以很精确,每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等,都有严格的数量规范,以确保图标造型的统一和精确

关于图标的精确规范,我们以 Ant Design 的图标系统中的部分细节规范为例:

 

(1)圆角:

圆角的规格采取 8 的倍数原则,最常用的尺寸是 3 种,分别是 8px、16px、32px,它们之间是两倍数的关系。而图标内部空间的圆角则保持直角(0px)的处理方式。

图片

 

(2)点的直径:

点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸,分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时,会按照 16 的倍数进行延展。

图片

 

(3)线宽:

Ant Design 的线条宽度之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56px、64px、72px、80px。

图片

你会发现,在 16 X 16px 的画板中肯定是可以画出来图标的,只是图标的形状并不是单一的圆形或是方形,一旦出现多种样式的线和点,你是无法精确控制绘制的规律的。

当然,1024px 也并不是绝对的数值,你也可以在 800 X 800px 或是 960 X 960px 的网格中进行绘制,网格数量越多,你的绘制就会越精确。

 

2 . 图标造型「灵活性」更高

使用 1024 X 1024px 的网格时,可以预留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的画板边缘预留了 64px 的出血位,也就是说,真正用来画图标的常用画板尺寸是:1024-64-64 = 896,即:896 x 896px。

图片

在图标的设计过程中预留出血位,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地,为图标赋予更多灵活性

图片

 

而如果你使用的是 16 X 16px 大小的网格绘制图标,则很难设置出有效的出血位。

 

3 . 「缩放」游刃有余

按照上文所述,当你在 1024 X 1024px 的网格中画好图标后,再将图标等比例缩小,就变成了我们通常看到的界面上的图标。通常情况下,界面上使用的图标的大小不会超过 1024 X 1024px,因此基本上都是对图标进行缩小变换,在缩小图像时可以保持锐利的边缘和正确的对齐方式。

图片

而如果你使用的是 16 X 16px 大小的网格画出来的图标,如果需要放大的场景,在图标放大之后会有很多细节无法处理和补充。

 

4 . iOS 平台标准

以苹果公司为例, iOS 7 及之后版本 iOS 的图标网格均采用 1024 X 1024px 的网格作为基准。向 App Store 应用商店提交的 iOS 应用图标必须使用 1024 X 1024 分辨率的高清图标。Retina 视网膜屏幕也为高清图标带来极佳的显示效果,更好的考虑到用户的体验感受。

图片

本文讲解的问题看上去很基础,但很多同学其实都是“揣着糊涂装明白”。绘制图标其实是一个“精致的体力活”,一套真正优秀的图标,在细节上是值得放大 10 倍来进行推敲的。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网 » 详解|图标设计,精致的体力活儿!

登录收藏
 
你可能喜欢的:
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
如何强化图标设计的细节?我总结了12个关键点!如何强化图标设计的细节?我总结了12个关键点!
前端保证一比一按源文件做,结果又是惨不忍睹…前端保证一比一按源文件做,结果又是惨不忍睹…
如何设计精美的应用图标?如何设计精美的应用图标?
出色的图标是如何一步步设计出来的?来学学这些实操方法!出色的图标是如何一步步设计出来的?来学学这些实操方法!
如何搭建 B 端设计规范如何搭建 B 端设计规范
图标中的辅助图形,如何设计才有亮点?我总结了这5条实用经验图标中的辅助图形,如何设计才有亮点?我总结了这5条实用经验
做好新手指引,把握黄金半分钟做好新手指引,把握黄金半分钟
掌握好品牌书的规范与价值,是设计师进阶高级的重要一步掌握好品牌书的规范与价值,是设计师进阶高级的重要一步
进大厂必须了解的栅格系统,该如何使用?进大厂必须了解的栅格系统,该如何使用?