Icon绘制尺寸规范的具体算法

一直在各种文章中能看到图标的尺寸规范,但是每个人都有自己的规范尺寸,或者说基础尺寸,你可能知道了44PX的网格规范,但不知道30PX又应该怎么画,而且这些具体这个尺寸到底是怎么来的也不知道,所以花了几天的时间,看了站酷、人人都是产品经理、简书的一些文章,然后总结出来了这些尺寸的算法以及他们的来源,如有错误,欢迎指出。

一、为什么要制定图标网格

图标设计有效的三个属性(样式、美学统一以及可识别性),其中美学统一就是说:线宽是不是一致(2px?4px?)、是圆角还是方角?圆角的大小是不是一致?有没有断点?断点的规律是什么?配色是不是统一?有没有点缀?有没有背影?风格构成什么(面,线,填充线,或者字形)。元素的统一会让你的图标看上去整体风格是统一的。而我们要探讨的就是元素的视觉统一……

如下图所示,我们画图标的时候,物体会有长有扁,有圆有方,在统一体量感的时候,就需要用到里面的一些参考线。保证正方形、圆形、纵向矩形、水平矩形视觉保持一致大小。

avatar

二、定义网格系统

产品图标网格被用来促进图标的一致性,以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统。使用这些核心形状作为准则,你可以在相关产品图标的设计中保持一致的视觉比例。

如下图所示,我们用A、B、C、D四个尺寸来表示

avatar

然后看一些我在文章中看到的几种设计网格尺寸:(为方便计算,我把MD网格除以4)

avatar

看到这些尺寸的时候,我脑海中有几个问题:

问题1:为什么这些尺寸没有统一?

问题2:A是44×44的时候是这个设计规范,那么A是34×34的时候,B和C又应该怎么设置?

问题3:这几种尺寸中的B和C到底是怎么来的?

三、网格规范算法

带着那3个问题,开始查阅资料、文章,然后就发现这个B和C其实是有章可循的。算法是基于面积。

相信大家都知道,44×44的矩形比44×44的圆从视觉上来说要大一些,这是为什么呢?这里就牵扯出来一个面积算法。可看下图

avatar

从视觉上看,矩形要比圆开大,但我们拉根参考线,发现二者其中一样高

avatar

把这2个图形放在一起,发现明显矩形的面积要比圆的面积大,算法相当简单了

矩形面积S=边长×边长=44×44=1936

圆的面积S=π×R2=π×(D÷2)2=3.14×(44÷2)2=3.14×22×22=1519.76

很明显1936>1519.76

我们用这套面积算法试一下iOS中的B和C

A是圆形,面积SA=π×R2=π×(A/2)2 R为半径,A是直径,所以R=A/2

B是正方形,面积SB=边长×边长=B×B

C是长方形,面积SC=边长×边长=C×D

要想视觉大小统一,则 SA=SB=SC

avatar

对于iOS:已知A=44

avatar

所以iOS中的A=D=44,B=38,C=34 对应表2,是不是刚刚好呢

avatar

在已经A的情况下,我们用这种方法算一下其它四种网络的B和C

avatar

对比表2和表3中的B和C,我们不难发现,只有MD和尺寸2中的C有很小的区别。你可以根据自己的感觉来微调,稍微大点小点无所谓

由此得知,无论你的A的尺寸是多少,都可以根据公式计算出B和C。参考线是死的,人眼是活的,画完以后,要靠感觉微调,直至视觉上体量感达到一致。摆脱死记硬背,妈妈再也不用担心我的学习了。

四、小tips

1、icon尺寸

icon的尺寸一般选择4的倍数,这样有利于在成倍缩放的时候,不会造成半像素的情况。例如48x48的icon,缩小2倍的时候是24x24;而34x34的icon,缩小2倍的时候是17x17。在图标中应尽量避免出现单数。

2、安全边界

为避免给开发切图时贴边节,导致图标出现不自然的边界,我们需要上面的规范外添加一个外框,图标不要画超过这个界线。如红色外框为48×48,黄色内框也就是安全边界为:44×44

avatar

3、参数设置与参考线的绘制

我平时是用AI画图标,所以这里仅演示的是用AI画图标的方法。第一步:在首选项-参考线和网格,网格线间隔10px,次分隔线10,勾选显示像素网格;

avatar

第二步:画布框内点击鼠标右键,显示网格;

avatar

第三步:在视图中打开“对齐网格”“对齐像素”“对齐点”。

avatar

4、关于图标不模糊的方法

我们在@2x,icon内部的横向方向和竖向方向的所有元素的像素值必须是偶数,同时他们的间隔也是偶数倍,也就是2px的整数倍。也就是构成图标的所有元素之间关系必须偶数倍(包括正形空间和负型空间)才能避免在导出多倍图的情况下出现虚边。

5、角度

在大多数情况下,保持45度角或其倍数。在45度角上的锯齿步进是均匀分布的(源于像素端对端对齐),因此消除锯齿后结果会很清晰,并且该角度在对角线上,让图案容易识别,这也让人眼看起来非常舒服。这种可识别的模式在一套图标中建立了一致性,并在单个图标中建立了统一性。 如果设计要求您必须违反这个规则,您可以请尝试以一半(22.5度,11.25等)或15度的倍数。 每种情况都不同,因此都试一试。 使用45度的一半的好处是,锯齿的步进仍然分布相当均匀。

6、插件

inkscribe和VectorScribe,具体用法和下载可自行百度。

本教程采编于站酷,版权归属原作者。