关于图标删格,尺寸基准,命名规范,图标组件化流程的探索

北京/设计爱好者/4年前/2082浏览

版权

图标作为视觉符号，代表想法、对象或动作。可以一目了然地传达信息，提供交互性，并引起对重要信息的注意。

图标作为视觉符号，代表想法、对象或动作。可以一目了然地传达信息，提供交互性，并引起对重要信息的注意。作为UI设计师,少不了跟图标打交道, 当做的越来越多了之后, 会发现图标设计的奥妙也很大, 有着它自己的套路, 基于此, 我查阅很多文献资料, 同时结合自己的实际工作经验, 来分享一下关于图标删格,设计基准尺寸的定义,命名的规范以及搭建组件库的流程方面的经验. 供交流学习,共同进步~

(一) 图标栅格

一说到图标, 接到图标设计需求后,可能很多设计师三下五除二就画出一个扔给开发,但是涉及大批量的图标设计时, 我们要保证所有图标视觉风格的统一,以及展示的清晰度.这个时候,删格的作用就很大了.纵观当下各个设计系统,在定义图标规范的时候,都会基于删格来制作, 归根究底,到底是为什么,只是为了保证描边和体积的视觉统一吗? 我们可以先从图标删格开始说起。

我们知道在数字形态下，图像是用抽象化的像素点绘制成的。那么在图标设计的时候我们用栅格来模拟像素，一个格子就是一个像素，一个图标需要一定数量的像素组成。

举个例子：一个16X16图标，在16X16个像素中通过像素着色的方式把图形表达出来；

通过这样的栅格能达到什么样的优化效果呢？首先我们来了解一下文字的渲染策略，看组图：

（从左到右依次）理想的渲染状态、黑白渲染、灰度渲染、次像素渲染

上图左侧第一张是我们认为一种比较理想的渲染效果，但是通过刚才我们介绍栅格我们可以了解到这种状态是不可能的，因为第一代黑白渲染和第二代灰度渲染是不可能做到显示半格像素或一个像素中显示弧度的。

从上组图中我们可以看出左侧图形的边都刚好落在完成的像素中，未出现不足一个像素的现象（圆角除外），右侧则未考虑像素栅格的问题；图标在16X16像素大小的应用中很明显感觉到左侧的小图标比右侧的小图标要清晰很多；这是因为右侧的图标的边本来是需要2个像素显示的，但是却落在了3个像素上，渲染的时候出现了一个像素是未降级灰度显示，其他两个像素进行了不同级别的灰度降级。这样我们就会觉得右侧的小图标有点模糊且变粗了。所以在制作图标的时候我们需要引入栅格，去模拟像素点，然后避免图标的线或边不要出现落在半个像素上的情况；

了解到了栅格对于图标优化的重要性，那怎么制作一个能模拟真实像素环境下的栅格呢？

首先我们得了解一下基准框；基准框的作用是为字体矢量图标提供一个大小参考，如：在16px像素大小的一个逗号“，”和一个文字“图”的大小和所处的位子是不一样的，这就是因为他们都是在同一套基准框中绘制的图形，才得到相对大小的概念，不然大家同时矢量图标，怎么区别大小呢？

每套字体都有自己不同的基准框，要根据实际设计需要设定，没有严格规定；阿里巴巴矢量图标库在制定基准框的时候考虑到图标展现的标准尺寸：16X16、32X32、64X64、128X128；特设置了一个可以整除他们的尺寸：1024X1024,主体目的是适配web端最大图标的显示质量.