超长干货！图标设计零基础科普指南

借着疫情期在家休假时，将平时用到些零零散散图标绘方法与思路进行一次面的汇总与沉淀。从习期间画一组图标的无从下手，每一个图标看来像是散装的一样，到来慢慢学习与练习，到现在变得图标的绘流程，程也是比烦，因为很少有面的图标讲文章，是看一篇懂一点，在揉到练习当中。所以篇文章尽量将图标进行细致一的流程说明，有不之处还望指教。

图标的可用性

图标用，顾名思义就是图标绘出来是否能被用户所看懂并快速识别，是否以为业务赋能。为此我总结出四条图标绘的评判标准。

1. 凸显性

用户否能某页面迅速找到该图标，凸显性的目的可以速查找，帮用户选择。图标识别的速度远远于文字，所以一些页面中的重功能使用图标的目的了吸引用户的注意力，让重功能得到凸显，提高重功能的点击率。

2. 可识别性

图标的目的让用户猜出他看到的图标所表达的意义，什么作用，以及点击后会出什么样的场景，发什么样的事。所以一图标的好与坏重的因素就体这里：图标的可识别性与可预知性。

影响图标可识别性的三点因素

• 视觉复杂性：图标的细节与组合图形的元素
• 熟悉性：图标中图形所表达语义的熟悉程度
• 具体性：图标或者图标中的图形与实活中体的相似程度

3. 美观

图标是否美观，对户是否有足够的吸引。在《设计通法则》一书中有一条设计法则是：美即适效应。管任何事物，美的外表都会给人带来好感，人觉得这种事物在任何方面都非美好。作为设计师，把一件事物美观是一件终生的必修课，户对图标或者界面的第一印象就是始于颜值。

4. 务属性

图标是否符合务属性，是否可唤起户的使情绪，点击率，起到为务赋的作。在界面中，我们设计的图标最终目的只是户觉得它美观，而是要为我们的产赋，么是为产赋呢？通俗来说就是使图标够升点击率从而给公司创收益。

图标如何为产赋呢？

• 符合产品与业务属：比儿类产品，图标就要圆滑，彩，看来萌一点的感；果是金融类的产品就应该使用微圆角，直角，中，金来代表金融的严感与高级感。
• 唤起用户使用情绪：比如在大众评 app ，有关与品图标都使用橙色拟物，为暖色可以们带来欲感，微拟物配合暖色系可以唤起用户品情绪感。
• 引导户点击，升点击率：想要户点击一个容，那必须要有足够的吸引吸引户点击，一般来说美观越、趣味元素越多的图标可占据大分的吸引，一个图标在页面中占的例会影响对户的吸引，合的案搭配会吸引户点击，如优惠信息，功示等。

图标的类型

1. 线性图标

线性图标，顾思义，即图标由直线、曲线、点内元素组合的图标样式。线性图标具辨识度高，清晰唯，简约易看优点，线性图标不会对页面造太多的视觉扰。缺点：线性图标的创作空间较少，太复杂的线性图标看起会让人感觉到累。

2. 面性图标

面性图标，即使用对图形内行色彩填充的图标样式。面性图标实活中体的缩影，优点非常多，比如表意能力强，细节丰富，色彩丰富，绪感强，视觉突出，创作空间。面性图标可以让用户迅速图标置，速预知点击后的状态。但面性图标页面中不可过多出，否则会造页面臃肿，难分主次，用户视觉疲劳。

3. 混合型图标

设图标类型的时候，不一局限于单纯的线性与面性，也可以两者结合，让图标即线性描的轮廓，还色彩填充的区域，混合型图标可以让页面变得加活力，同时还可以吸引用户的注意力，观与创意性强。但混合型图标商业产品中谨慎使用，因使用不当会让页面变得杂乱不堪，用户无法识别图标表达的语义。

图标的色彩

1. 色彩情绪

色彩情绪即颜色心，指同波长色彩的光信息作于人的视觉器官，通过视觉神经传入大脑后，经过思维，与往的记忆及经验产生联想，从而形成一系列的色彩心反应。在任何场景合使色彩心可调起户情绪，还可户产生联想进而快速识别。

在计图标的候，理的运用色彩情绪，会使图标更有科学性，可以让用户在使用的过程中更加然、舒服，同也会增加用户的识别速度唤起用户的使用情绪。

色彩情绪表

2. 配色方法

在配色时，我们采用更具备学性、更符合类感官 HSB 系统进配。在根据主色配渐变色时，我们经常是在主色基础上加白或者加黑。是加入大量白或者黑会改变原本色明度与饱和度，从而使画显雾蒙蒙，不够晰透。正确做法是在主色变亮减暗时，改变主色饱和度。在 hsb 色相条，最亮三个颜色分是，蓝紫色，青绿色与黄色，如需要加亮主色在混白时将蓝色青色改变色相，如需要减暗则是相反，这样在调制渐变色变化过程不会出现太脏颜色。

3. 配色方案

常见的色彩搭配

中性色（黑白）+主色、主色+点缀色、主色+透明度、单渐变、渐变错层、撞色叠加穿透效果。一般常用的就中性色+主色、主色+点缀色。

点缀色配色

• 互补色：互补色就是在色环上距离 180° 的色彩，形成具有视觉冲击的色彩。
• 近似色：近似色是在色环上距离 45° 左右的色彩，形成的配色效果风格和谐统一。
• 对比色：对比色色环 120° 左右的色彩，可以产较强烈鲜明的视觉效果。

图标绘制技巧

1. 像素对齐

我们在绘图标的时，应该将图标的每个像素尽量对齐像素点，样导出图标时像素的边缘不出现锯齿，不出现模糊的情况。通常在绘时我们应该去除绘软件中 x 与 y 轴，宽（w）与高（h）的小数点，样就以避免无法对齐像素的情况。

2. 图标参考线

绘制两或者以的图标时，了避免多图标出小不一的况，我们应该使用由谷歌料设语言提供的图标参考线行绘制，使用图标盒子可以让一整套图标视觉效果加统一谐，不会出一一小一一短的况。

使用方法

先绘制一个 152*152px 的正方形，一个 176*176px 的正圆形，一个宽 176*128px 的水矩形和一个 128*176px 的垂直矩形，圆角为 4px，然后将这个四个形状进行水居中对齐，之后得出一个图标的参考线。

宽度相的况下，方形的面积于圆的面积，所以绘制圆形图标时应该将圆形的下左右四顶点顶齐与图标盒子方形区域的四条；绘制方形图标时应该将方形的四角点顶齐与圆形参考线的外围；绘制横向矩形与纵向矩形图标时，应该将图标的左右或者下控制方形的参考线之内，这样矩形图标绘制出会加的圆润，相对于其他的形状图标加匹配。

3. 可访问性

绘制的图标必须要保证清晰度，可辨别性。不管是在光下还是正常光下都需要良好的可读性。这就需要图标不论是身素之间的对比度还是和页面底板背景之间的对比度都需要好的可读性。检测图标的可读性通常要将图标的背景色底板在黑色和色之间进行切换对比，不论是黑色还是色的背景都可以清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿光下进行观察，在光下是否可以清图标的主题结构，图标是否有足够的辨识度。

绘制图标时，我们可以参考 WCAG 2.1：图形用户界面组件的对比度至少 3 : 1 的标准行相应配色，以达到良好的可视状态。

访问测试：https://webaim.org/resources/contrastchecker/

4. 统一性

绘制多类型相同的图标时，我们需注意这一套图标合集需视觉保持统一性。一整套产品中，会很多种图标，但图标的功能不一样，所表达的内也不同。这时，图标一致性的意义就体出了，根据格式原理中的相似性原则：人们会将如元素彼此相似的东感知一组。这也意如果具相同功能、含义层次结构级别的元素，则应视觉保持统一匹配。我们倾向于将彼此相似的元素视同一分组，相似性可以帮我们组织分类页面里的元素对象，并将它们与特的含义或功能相关联。不同的方法可以使元素被认相似的，这些方法包括颜色、小、形状、纹理、尺寸方向的相似性。

图标内容的统一让用户明白相似的图标所代表的的功能也相同，而且在视上也更加和谐美观。因此我们在绘标还需检查条的粗细比重，边角的大小，方案，细节次和设计元素在整个合集中是否是不变且一致的。

5. 图标呼吸感

呼吸感的意思就当留白。设中，当的留白可以突出主体内，让内具备易看性。不图标还界面，元素与元素之间都应该存一的间距。图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标一体的简略缩影，目的了表达内，让用户速理解，但限的空间中，太过复杂的细节会影响图标的识别速度。因此图标的绘制过程中应该删除所无法传达图标意义的元素，避免使图标变得太过复杂难以识别。

6. 合理运用布尔运算

布尔运算在计行业中被得广泛的运用，比如工业计，视后期，logo 计等，布尔运算有一致性规范性的优点。在计面性图标的候可以理使用布尔运算进行绘制，这绘制的图标有吸引力和说服力。

7. 页面层次感

在页面中，有需要吸引户点击的图标，有起到辅助作的指示图标，还有引导户操作的图标，这些图标在页面中占据着同的地位.在有图标中，有色图标强于无色图标，多色图标强于单色图标，面性图标强于线性图标，带背景图标强于无背景图标，在设计图标的时候应该根据务需要进行视觉强弱同的设计。

8. 业务属性

如文上所说，图标采用与业务相符合色搭配会让用户在使用过程更加自然、舒服，时也会增加用户识速度，唤起用户使用情绪。个图标绘制是否具备商业价值也恰恰体现在这里。

如图示，左图是斗鱼直播 APP 的截图，右图是京东金融的图标截图。这两款产的务及对应的户群体全一样，斗鱼是一款直播的产，直播面向的户群体是青年，整体的产调性是：萌、泼、多彩、绚、时尚等，斗鱼直播的图标绘制需要面向年轻人，色彩的饱和与有趣的元素来抓住户的眼球。但是京东金融是一款财的产，面向的户则是中老年，大多数都是有一些存款的人，这些人需要斗鱼那样里胡哨的元素，他们只在乎这个产是否全，利息是否，京东金融这个产的整体格就需要偏向于：全、端、大气，这样才给户从视觉上营信任感。我们设计图标时通使产的调性作为格，但是像美团淘宝这些务众多的产中，我们就需要根据产的细分务进行格定位，然后设计中相应融入产的牌元素，使合的色彩情绪等图标变得更符合务的格。

最终测试

我们图标绘制完成后需要测试这组图标心是否统，常用法是使用标准正圆形和正形来和所有绘制图标进比，保证所有图标心相近，视觉统。也可以采用不度观察法，可以从上下左右四个度去观察图标，看看图标在不度下心是否统。

一组图标的绘制流程

1. 情绪板

绪板执行一项设操作之非常重的一骤，绪板并不设平台展示作品集里那样几张图片，几关键词，一套对接下设的一风格走向。根据不同的用户人群，不同颜色的色彩绪，不同产品的业务，将用户调研的结果，产品的背景行总结与思考，接下的设风格。

2. 绘制流程

选取照片

观察生活，对想画的图标进行照片实物造型的提取。图标是对生活中事物的简概括。利用现实照片作为计参考可以让绘制出的图标更真实，辨识度更高，还可以做差异化计。

造型勾勒

使用矢量软件的基本图形钢笔工描着照片进行轮廓的绘制。

简化优化

简化草稿轮廓的结构，只保留一个物体的主要点素，删除多余素。优化图标细节，需要将图标线性转面性。

业属性

根据业需要，调整图标风格，添质感。

3. 制定规范

规矩不成圆，规矩出现可以让切杂乱东西变合理，统起来。在设计上也是如此，规范具有统输出，指引细节、便于查看好处，规范是组图标规矩，所有图标绘制都按照规矩来，最终成品会显井然有序。

在制定规范时，我们通先绘制一个符合务格的图标，然后根据这一个图标定制后续的图标规范，最基本的规范是描边宽，断点位置、圆角大小，色辅色，渐变角，点缀元素，光影角等，在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状一样但是在视觉上看起来是属于同一合集的。

制定规范一为三个过程：

• 拆分细节：将图标中的细节元素进行分解，在规范中制定细节元素的使法则。
• 风格定位：根据产品调性，业属性在规范中制定相应的色彩心理、质风格。
• 功能划分：功能相近的包括色彩、质感应该采取相近性。