为什么我能画好一个icon,画不好几个相同类型的icon?
为什么别人总说我的icon风格不统一,到底哪里不统一了?
今天给大家讲讲,为什么我的icon为什么“不统一”。
关键字:风格、比例。
#风格
icon根据设计风格不同,分为:线性、剪影、写实、MBE等风格。
但其实一个风格也会演化出其他不同的样式:
所以把控风格的核心,首先要确定icon的设计要素,以线性图标为例,其中包括:线宽、圆角、是否有断点(断点方式)、是否有点缀、是否有背景、是否有填充;
所以很多时候,不是你画的icon不好看,而是你在细节上冲突了。
有一部分设计师会在iconfont.cn这样的网站直接下载一些icon进行使用,我个人不推荐这么做。
因为,你需要的icon经常无法在一个主题找到,然后退而求其次下载了几个不同人上传的几个图标。由于每个icon设计作图尺寸不一,你会发现,当icon缩小的一定尺寸的时候,经常差零点几个像素,如果你是矢量作图,就会不知觉忽略,然后发现实际导出使用,有的有虚边,有的没有。
以上是我在iconfont上下载的几个图标,强制调整到一样的大小后,显示的样式中,不仅线宽有差异,部分图标尺寸也出现小数点,有几个并未完整占位到像素网格上,以至于出现虚边等情况。
(虚边出现的情况很多:有的虚边因为在缩小时,线宽变为了1.2 3这样的数值,导致并非完整占位一个像素,不过,我个人设计上会允许0.5像素占位的存在。)
如果你确实没有灵感,你可以下载下来后,重新绘制。
#比例
有时候,即时我严格按照上诉的思路进行icon的绘制,还是会觉得,奇怪,但有说不出哪里奇怪。
往往这种情况都是由于比例失调导致的:
相机和放映机的icon,咋一看,都是线性的,圆角也一样的,但是就是不对劲,如果你感官敏感一点就能感觉,放映机的icon比相机的icon大一点。
右图是我用常规使用的icon制作背景板进行比较后的结果,放映机的占位比相机的占位高了几像素,所以需要针对这几像素进行调整。
我个人是比较推崇背景板的使用的,如果你也想要有一套自己的背景板,却无从下手,这里给你介绍捷径。
Material design设计规范中,有一章专门讲解了图标的设计方法,附带了一个标准的背景板,我自己这套就衍生之此,常规以48px*48px作图较多,这里就以这个尺寸还原一下:
注1:为什么矩形占位与圆形的占位不一样,主因是为了视觉修正,相同尺寸下,矩形看起来会比圆形大一些。
最后告诉大家一个网站,material design的icon库,目前收录了上百个icon,并且皆有符合上诉规范,在进行24px比例缩放时,不会出现尺寸问题。
网址:https://material.io/icons/
网址推荐:
material design规范中文站:http://wiki.jikexueyuan.com/project/material-design/style/icons.html (当前已定位图标章节)
iOS人机交互指南:http://www.uisdc.com/ios-10-gui-design-guideline-4