如何画好一组线性图标？来看这份新手科普总结！

画不少图标，也总结很大神的方法，在此归纳一下简单的图标画法，希望对大家有帮助。为一名 UI 设计师，必须要重视 icon 的用，首先是需要大量地练习，其次是尽量不要一遇到画图标的时就随便在网上下载，而是结合产品创造属套产品的图标。

一、图标在 UI 中的应用

在文中所说的图标，是指界面中的 icon。icon 增加界面的趣味，也提高识别，是界面中不或缺的部分。

1. icon 在界面中的分类

icon 在功能上来说，分为不点击的展示图标和点击的按钮图标：

• 不可击展示图标，是为了辅助后文内容，侧在于文，常尺寸为24×24、28×28、32×32。在小尺寸内为了便于辨认图像，也不要在界太抢眼，议可以使用简单线性或者性图标。
• 点击的按钮图标，常用导航栏、操栏、标签栏，通常尺寸为44×44、48×48、56×56、64×64，类图标以结合产品进行富有趣味的设计。

详见图1.1.1以及1.1.2红框部分：

△ 好享瘦 app 界

2. icon 的尺寸

icon 尺寸般选择4倍数，这样有利于在成倍缩放时候，不会造成半像素情况。例如48×48 icon，缩小2倍时候是24×24；而34×34 icon，缩小2倍时候是17×17。在图标应尽量避免出现单数。

3. icon 的风格

时下流图标可以归纳为：线性图标、面性图标、线面结合图标。至于 mbe 格、断线格、色格、渐变格、半透明格、双色搭配格等等，都是基于上种来进行格设计。图1.3.1为在 dribbble上看到一些较好看的 icon 设计，作者 ID 均备注在右角，在此仅供参考。除了在 dribbble、酷、瓣、优设、iconfont 等好看的图标外，还可参考面上流 app 中的图标。

二、如何画图标

1. 画图标的软件

常用的画图标软件三：AI、PS、sketch。

AI 的好是矢量，网格比较规范，容易理图标的线面转换，其中直角一键转圆角功能非常好用，缺点就是调色非常的难用，操作不便，只能理普通色块，复杂的色彩会耗费多间。

PS 的好处是调色功强大，形状剪切中规中矩，缺点是做线性图标的时候需要布算，描边功操作起来没有 AI 方。

Sketch 好处是矢量，调色十分智能，并现在做界多数用 sketch，应用起来十分便捷，缺是它造型没有 AI 和 PS 严谨，些转位不够流畅，小图时候不易察觉，放大后能看到不流畅线条。

我通常是三者结合来画图标：首先用 AI 构造基的形状。果是要品做展示，就拉到 ps 里面进行和展示；果是放在界面中使用，就拉到 sketch 使用。

2. 参数设置与参考线的绘制

在里演示的是用 AI 画图标的方法。参数设置方面：首先在首选项 – 参考和网，网间隔10px，次分隔10，勾选显示像素网；在画框内点击鼠标右键，显示网；最在视图中打开「对齐网」「对齐像素」「对齐点」。图2.2.1为参数设置步骤。

参数设置完毕，新建画，我一般新建800×600（dribbble 的展示尺寸），图标应小而精致，不宜建大的画。

参考线了规范图标存，一般两种参考线画法（复杂规范与简单规范），它们原理都一样的，习惯哪种就用哪种。不纠结参考线的小应该多少，根据图标使用的置确图标小（也就参考线的范围），的朋友知道了 46px 的参考线怎么画之后，又纠结 88px 应该怎么画，其实就一样的原理。可以根据自己的感觉微调，稍微点小点无所谓，重的不出单数的素小就可以。此以44px小的图标例子。

复杂规范

画一44×44的方形，颜色调灰色，描选择0.25pt（此补充一知识点，72ppi下的1pt于1px的，具体请自行度），然后画一42×42的方形居于其中。这42×42的界线安全界线，图标不画超过这界线，避免给发切图的时候贴切，导致图标出不自然的界。图2.2.2详细展示画参考线的骤。

那么，以的参考线应该怎么使用？我们画图标的时候，体会扁，圆方，统一体感的时候，就需用到里面的一些参考线。但记住，参考线死的，人眼活的，画完以后，靠感觉微调，直至视觉体感达到一致。请看下图2.2.3分析：

△ 图标 iconfont 比赛里第二的商务划书图标，我临摹了一遍，此用以示范，原作者 回忆的沙漏2003

简单规范

用复杂规范的参考线画到熟练的时候，就可以用比较简单的参考线去限制图标范围，因已十分熟悉体感的控制了。

简的画法是只需要画三个正方形，同线性选择颜色是灰色，描边选择0.25pt。这有个诀：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体。下图2.2.4详细展示画简参考线的方法。

3. 如何在 AI 建立参考线来复用？

画布中用描 0.25pt 画好参考线，然后选中参考线，右键 – 建立参考线。详细请看图2.3.1。

4. 各种形状的图标如何在参考线中统一

前面说到，参考是为定图标的大小，从而达到整的美观与规范。在画很图标之，我总结出两个小诀窍：

• 你结出你要画物体形状时，要不影响辨识度，可以适改变下形状，把高或者扁物品，画成比较饱满样子（图2.4.1铅笔为例）；
• 当物形状不适合画得饱满时，以尽量上下或者左右撑满，旋转45度，以增加画面的饱满感（图2.4.2的刀为例）。

5. 绘制过程中要注意的点

画图标的候要对齐网格，改变图标大的候，注是不是边同缩放，有没有造成半像素，有的话就动拖动图标对齐网格。

可使描边来进行线性图标的绘制，这样更容易对齐格，但是描边只要使笔点来断点的话，就会自变成中描边。那么使描边的时候怎么进行断点？可把描边进行对象 – 扩展，转为形状，然后布算来剪切。由于太麻烦，我一般使中描边（推荐中描边是因为在手机界面中的线性图标一般是3像素，中描边怕现半像素，影响清晰），但经过检验，只要注意把线拖对齐格，会影响清晰。

补充一个知识点：手机界面中的图标，线性一般是3像素，因为2像素太细，4像素又显得太笨重；当2倍图的时候3像素，3倍图的时候就会变成4.5像素，3倍图的时候要手把4.5调成4或者5像素。

6. 什么是图标的统一性和差异性

在这的统一性不是指所有的图标面都要用一模一的素，而是图标的线粗细、断点的距离、素的大、切割的距离、同的色调、风格的一致。当所有的图标在面都使用一的素，会造成辨认困难。下图2.6.1，一眼过去，一模一的笑脸降低了识别率。

差异性是指在统一的格，通过，进行图标的区别，增辨识。

三、线性图标画完后如何创造风格

1. 多彩底色线性图标风格

2. 同色调线面结合风格

图标的塑都是一样的原，键是格的形成，需要断的尝试。前期可在 dribbble、酷、瓣、各位大神的作展示平台多看看，习一些优秀的图标塑方法、格、配色，通过大量练习和尝试，慢慢就可到属于自己的那套画法。

四、图标的导出及展示

上面说过，我在 AI 中毕，会拉到 sketch 或者 PS 里面修。

• 导 sketch 面的方法（即导 svg 方法）：把独的图标扩展，然后编组，每个图标是独立的一个编组，拉「资源导出」那，选择导出 svg 格式，直就可以拖 sketch 面用。
• 导到 PS 里面的方法：择单独图标，复制粘贴到 PS 里面，再进行美。

常用的图标展示方式之一：

五、创建属于你的个人图标库

阿里的图库 iconfont 是国内非常强大的图标库，不仅图标风众，还有代码以用，分方便。个人还以上传到图标库里给别人使用，并且现在 sketch、axure 里面有 iconfont 的插件，以随时用。

iconfront 网站链接：http://www.iconfont.cn

的个人图标库：http://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.9&manage_type=myicons&icontype=collections&keyword=

六、总结

只有少数人是才，大多数情况下都要通过大量的练习，才能促成质变。一开始画不好不要气馁，只要勤奋，的你远会比今的你要进步得多。不要偷懒套用别人的图标，计最不应该丢的是的创造能力。如果的文章能给你提供一点帮助，是的荣幸。

注作者微信公众号：「牙线小」