来源:优设 作者:超人的电话亭
最后一种,就是将图标「拟真」化。比如眼睛图标,我们可以用接近真实眼睛的样式来创作,为它增加瞳孔、高光等细节,只要依旧使用纯色填充,且将细节数量保持在合理的范围内,就不会与其它图标产生冲突。
在面性图标的彩色渐变中,有多种更细致的设计类型,比如整个图标采用同一渐变,或者图标中不同的面采取不同的渐变方式。
整个图标使用同一渐变色的做法,和线性图标的渐变方法几乎一样,只要在开始填充渐变前将所有图层进行合并即可。我们来讲解一个比较特殊的基础渐变风格——不同透明度渐变。
比如心形图标,我们把它划分成了两个不同的面的组合,然后都使用了红色的渐变色,一强一弱。通常,我们只要先设定出较强的渐变,然后再复制这个渐变色到另一个面中,降低它的透明度即可。
在使用了透明度的图形中,要注意的是为了保证在实际使用中不让图形背面的元素影响到图标色彩本身,我们要将这些图形复制一层填充成白色并置于底部。
最后,就是这类透明叠加的设计风格了。和线性图标中的叠加设计方式一样,我们需要将图形拆分成若干面,才能创造出重叠的区域。
在这个方案中,图标尽可能使用纯色,会比使用渐变的效果更好,原因在于我们对重叠区域色彩的控制上。可能很多同学看到这个风格,会以为叠加的区域只要控制透明度就可以了,但这种效果通常很不理想,尤其在配色为撞色上,相交部分的色彩就会有「朦胧」感,缺少通透的舒适性,并且图形本身的饱和度也会受到影响,比如下面的演示:
通常,相交区域的色彩要另外配置。也就是在绘制好图形的所有轮廓以后,将它们一起选中,然后使用「图像生成工具」,再为相交的区域单独选择配色。下图就是单独挑选的两个配色和透明度的方式对比。
面性风格的设计到这里就讲解完毕了,相对于线性图标的设计而言,面性工具图标的设计就简单很多,虽然设计风格有非常多的延展性和可能性,但大家始终要记得它们依旧是「工具图标」,识别性是优先于视觉风格的,所以切勿过度强调视觉性而将它们做成了装饰性图标。