前面用了比较长的篇幅讲了线性风格的图标要如何设计,再讲解面性风格的图标时,就不用这么长篇大论了。只要熟悉了线性图标的绘制方式,那么面性图标的操作就没有难点了,并且面性风格的实际操作难度比线性图标更低,所以我们用一篇文章来讲完图标的设计。

面性图标在操作中和线性图标的最大差别就在于描边和填充模式,我们知道为了满足像素对齐的要求,线性描边会在操作中产生很多不可控的因素,要用很多额外的操作步骤去弥补。在面形图标中,就不需要使用描边,并且应用相同的图标模版即可。

下面就进入本篇的具体案例演示吧。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/285f0c9e-ac98-442d-a2ec-0832ea9022c4/0.png

2.13 基本的面性风格

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/73ecedde-af7b-4d14-8981-8fe4b43c175d/1.png

如图所示,我们采用线性图标中使用的样式,设计成面性效果。具体的操作步骤就不需要再完整演示一次了,只需要将所有线性风格演示中的描边替换成填充,再使用对应的路径查找器功能即可。

需要注意的是,有很多 1pt 宽的直线,可能我们会习惯于使用线条工具绘制,这是错误的做法,我们需要使用矩形工具画出一个完整的闭合图形,再样在使用路径查找器工具或者对图形进行批量操作时才能保证统一。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0079037f-5fbe-4844-b495-f807ae80aa7f/2.png

还有,面性图标不代表完全不能出现 “线性” 元素,在一些特定的情况下,我们依旧要通过线条的形式展示图形轮廓,比如搜索图标的镜片,使用全填充的样式显然效果不理想,所以镂空镜片区域是不可避免的。