编辑导语:在界面设计中，图标设计是重要的模块之一。易于识别、清晰美观的图标更有助于用户操作，也有助于产品向用户传递信息，提升用户体验。在本文中，作者对图标设计进行了详细的梳理。让我们一起来看看吧。

图标设计是一个入门级UI设计师的必备技能之一，图标是界面非常重要的一部分。在实际工作中，即使是一些工作多年，有一定经验的设计师，也很难保证自己的图标有多完美。

不同位置的图标在界面中有不同的功能、风格和设计思路，比如金刚区、分类、标签栏、服务工具等等。

仅仅用图标来准确表达实际意义是不够的。需要对图标有一个全面系统的认识，了解图标的相关概念，正确的绘制方法，处理好一系列细节。本文将介绍图标设计的具体方法和要点，帮助你避免一些常见问题，让图标设计有据可循。

1.什么是图标？

图标是一种通用性很强的图形标识，在界面中支持和配合文案，含蓄或直接地表达特定的含义、属性特征、形象气质等丰富的视觉信息。

从概念上来说，图标可以分为广义和狭义。广义是指现实世界中有明确含义的图形符号，狭义是指设备界面中的符号，一般指承载互联网产品的载体，如手机、电脑、iPad……等。在UI设计中，概念主要是针对狭义的。

图标设计是一门科学。在我们的认知中，图标通常被理解为某种概念的抽象图形。通过设计清晰易懂的图形，我们可以传达比文字更高效的信息，同时提高界面的美观性。想要更好的设计图标，需要经常练习，不断试错，不断探索，尝试新的风格，所以值得花大量的时间去学习和练习。

2.图标的基本特征

界面由文字、图标、几何图形和图片(音频和视频)组成。相对来说，从UI设计师的角度来看，其他三个元素大多使用排版技巧，而图标是需要绘图和创作的元素。在没有图标的情况下，纯文字是可以替代的，但是为什么一定要在设计图标上浪费时间和精力呢？有两个主要原因:

首先，图标作为一种图形符号，相对于文字的复杂程度，在识别效率上具有先天优势。因为字符需要的语言和长度不同，所以接口空之间的资源也不同。在字符较多的情况下，用户的浏览速度和信息传递的效率大大降低，文字信息被固定的图标浓缩。

好的图标不仅容易识别，效率更高，还能让界面更简洁。所以我们常见的图文界面大多是图标在上，文字在下，或者图标在左，文字在右。这些设计足以说明图标的视觉传达优先级高于文字。

其次，不同风格和样式的图标可以让界面看起来更加美观，提高用户的视觉舒适度。

试想一下，如果界面没有任何图标的点缀，即使用户可以使用，看到多少也很无聊，用文字理解内容也容易造成视觉疲劳。

1.平面风格

扁平式图标主要由各种形状的笔画和填充的组合来表达不同的含义，通过不同的颜色来表现不同的视觉效果。最常见的颜色组合如下:

①单色:简洁明了的视觉效果，常见于基本功能图标。比如:B端功能入口、移动个人中心、2/3级页面的工具栏等。也有很多app的菱形区域用背景色块来衬托高亮图标。

②双色:是很常见的功能图标，至少由两种元素组成。它是在单一颜色的基础上用颜色来装饰，让不是很突出的元素不再单调。如果融入品牌色彩，可以提升整个界面的品牌调性，适用场景比单色图标更广。

③多色:至少由三种或三种以上的形状和颜色组成。常用于金刚区、产品分类列表、定制菜单等。

④渐变:渐变颜色的图标比较年轻化，可以是单一元素渐变，也可以是多元素渐变的组合，能体现出活泼热烈的气氛。比如:视频、直播等娱乐类型app，或者车载UI等。

⑤不透明度:调整图标中某个元素的不透明度，可以在不改变色系的情况下，丰富配色的细节，可以更细腻地与背景色融合，从而解决多色渐变视觉跳跃的问题。

此外，在UI界面中，扁平化风格的图标多采用三种类型:直线型、平面型和线面结合型。

1)线性的

线性图标主要是由线条勾勒出的图形。界面中的尺寸一般太小，线条不能太复杂，否则会影响识别度。看似简单的几条不同颜色的线之间有很大的调整空。

2)方面

表面图标主要是靠剪影做出抽象的形状。与线形图标相比，它们的面积更大，视觉层次更高，更有体量感。通过不同的色彩填充和裁剪手法，可以创造出不同的设计感，达到各种视觉效果。

3)线-面组合

线条和表面组合的图标既有线段或轮廓，也有填充色块。相比纯线/面单一风格的图标，细节更丰富。如果控制得当，会有更好的视觉效果和信息传递效率，而且不会失去趣味性。

2.拟物化风格

伪物风格的图标，主要是通过细节、光影，根据现实世界中物体的塑造，创造出图形立体效果，对设计师的造型绘制和技巧表达能力是一个极大的考验。这种风格的图标具有很强的代入感，可以让用户迅速理解图标所传达的意图和气质。

由于拟物化图标的信息元素复杂度高，视觉效果突出，在页面中频繁出现会干扰其他信息的存在，这在游戏应用中很常见(但不会太详细)。在其他类型的应用中，大多出现在营销类型的界面，如话题页面、成果列表、会员中心等。

3.浅色纹理风格

与准物化图标相比，光纹理不会有太多复杂的元素，主要通过颜色渐变、灯光、投影等各种图层样式。，呈现出非常柔和的立体感，整体风格比较年轻化，给人一种轻盈、简洁、精致的感觉。

在设计过程中，请使用干净和谐的配色，主要是在界面面积较大的位置。

4.磨砂玻璃风格

不仅仅是页面背景的毛玻璃风格，还有图标的毛玻璃风格，主要通过模糊背景、叠加、剪切图层(网上很多教程)来实现。磨砂玻璃朦胧感的轻盈渐变，更能体现图标的质感和神秘感。

除了上面提到的这些风格的图标，还有其他的如2.5D、3D、像素风、新拟态等图标。，但在UI设计中不常用，就不举例说明了。

1。字符趋势(笔画/边角)

2。动态效果

如果想在金刚区和工具列表中突出一个功能入口，图标设计成动态效果，既能保持整体图标风格的统一，又能单独突出功能的重要性，从而起到强调作用，吸引用户注意力，引导用户操作，提高用户点击率。

记住动画图标不要太多。当一切都突出显示时，什么都不突出显示。

其次，年轻化、娱乐化产品的Tab栏中的图标在切换时，加入动态效果可以起到画龙点睛的作用，通过动态效果表达不同的情绪，减少切换时的枯燥感，良好的Tab动态效果可以传达整个产品的气质。

最后，如果有类似的操作或者短期的活动需要吸引用户的注意力但不适合固定在界面的某个位置，那么可以设计一个动态图标悬浮在设备的某个位置(注意用户体验和交互原则)，这样既不会占用太多的页面资源，又可以同时显示在多个界面上，达到一物多用的目的。

(动作图标:@墨染艺术授权)

遵循图标设计规范，有利于设计师与下一个设计的配合，以及产品整体图标风格的统一，起到约束作用，即使在更换设计师的情况下，也不会出现大的问题。在制定合理的设计规范之前，我们需要知道图标有哪些规范，应该从哪些方面入手，这样接下来的图标设计才能顺利进行。

1.网格尺寸比

为了保持图标元素的平衡，大小需要一致。通常，我们会为绘制图标建立基本的网格大小。常见的网格尺寸有16、24、36、48、64、128、512和1024。这些网格尺寸不是固定的，会根据设计中的特殊尺寸而变化。

图标系统由两部分组成:网格大小和图标元素。设置好网格大小后，需要使用关键线来约束图标形状的长宽比。最终设计的图标尺寸并不遵循网格尺寸，而是根据不同形状的比例受制于图标关键线，最终形成统一的视觉尺寸。

从上图可以看出，同样大小的图标在真实视觉中差别很大，就像一个有100个像素的圆。与100个像素的正方形相比，从逻辑上看，大小是一样的，但从视觉上看，正方形肯定更大。所以我们常说图标一样大，不是真实大小，是视觉感受。

2.图标关键线

为了保持图标视觉上的一致性和平衡性，需要画出关键线来指导和规范图标设计。关键线由圆形、方形、横矩形、竖矩形、三角形和对角线组成。网格的大小需要保持在4的倍数，这样不同大小的图标都可以轻松适配。可以以24*24px的网格尺寸为基准，通过增加倍数来类比其他尺寸的图标，比如48*48px，72*72px……...

下图是尺寸为24px(出血为2px)的网格参照基准的示例:

3.确定图标样式

根据产品属性、目标用户和应用场景，找到最适合自己产品个性气质的图标设计风格，比如健身应用属于力量型，粗矿型，圆角和曲线适合女性产品等。，这些在之前的《性格与气质》中都有举例说明。

4.图标绘图

图标风格确定后，图标细节是接下来绘制过程的核心部分。对于线状图标，注意线条的粗枝大叶，对于面状图标，注意小图形之间的距离。所以在绘制时，需要保持线条和间距的统一，以方便后期的图标更新迭代。

1)线性笔画粗细

我们以iOS@2x为基准(避免@1x的3px笔画变成1.5px，小数点)，可以适应最常用的2px、3px、4px的笔画粗细。4px的视觉很重，更高优先级区域使用的功能图标会让2px看起来更精致。在设计中，笔画粗细要根据产品的行业属性和调性来确定和统一。

2)平面正负形状之间的间距

区域图标需要确保每个单独的形状之间有足够的空间。以24px大小的形状为例，空间不能小于1px，以此类推。虽然没有上限，但空间不能太大，否则无法相互结合，以实际视觉舒适度为准。

5.创造性提取

根据行业类型和风格，进行创意设计，如线性统一断点、品牌基因、单一元素倾斜、节日氛围、装饰元素等。，是塑造图标灵魂或传达更多信息的二次创作。

1.能识性

图标的意义主要是快速传达信息，不应该作为无用的装饰品。

随着互联网的普及和时间的积累，人们对一些网络图标信息的隐喻已经根深蒂固，长期以来形成了惯性思维。所以我们设计的图标必须符合用户的认知，能够让用户快速理解。即使有一些特殊情况，也一定要用文字明确标注和解释，否则一旦用户感到困惑，图标就会起到负面作用，极大影响使用体验。

认知图标可以让用户下意识地理解和接近心理预期，降低学习成本，提高使用效率。

2.简单又漂亮

图标用抽象的图形来表示现实世界中的事件/事务。如果因为追求完美而导致设计过于复杂，还不如直接上传图片来得快。所以不能过多展示实物的细节。最终设计出正确、不失真的图标显得尤为重要，既能用来传达信息，又能方便用户快速清晰的感知。

3.视觉对准

为了保证视觉平衡，异形元素经过系统自动对齐后会有一些偏差，需要手动微调进行视觉对齐。

保持一致

对于大型项目来说，如果整个家族的图标都比较和谐的话，保持相同的风格和设计原则并不容易，尤其是很多人完成设计的时候，提前有一个明确的设计原则和规范是必不可少的。

图标有相应的视觉权重，比如笔画粗细、填充图案、复杂程度等属性。需要做的是控制好这些关键因素，使整体在视觉重量上看起来一样，并且相互关联组合在一起，保持所有图标的一致性。

5.最小间隙

单个图标的元素之间要有气息感，需要适当留白。如果行程太大，整个酒吧看起来会像浆糊或臃肿。如果有类似的问题，可以通过降低笔画值或者图标的复杂度来解决。

6.使用2的倍数

偶数设计便于数据计算(2的倍数)，如正负间距、笔画值等。在iOS@2x设计下，@1x不会有小数点。在移动终端的设计中，最小的图标是24px，可以被2、3、4、6、8、12等分，也是最能被等分的数值，所以可以灵活的等比例缩放。

7.韧性

即使前面的工作都做了，图标设计工作也没有完成。需要做的是不断测试图标的可用性，做好后续的改进和优化。保证上线后的效果和后续的迭代，没有最好，只有更好。

阿里巴巴矢量图标库:https://www.iconfont.cn/, 90%以上的常用矢量图标都是下载的。

https://iconpark.oceanengine.com/official,海量资源可在线修改，调整笔画、填充、单/双/多色、端点后可下载SVG格式图标。

以上图标资源虽然基本可以满足我们日常设计的需求，但只能作为参考。一味的图方便，投机取巧，只会毁了我们的动手和创新能力。

图标设计是一个庞大的板块，分支很多，比如:金刚区、标签栏、应用图标等。每个分支都有自己的一套设计规则，我们需要通过不断的学习和创新来获得更多的经验。一篇文章不足以展现图标设计的精髓，但可以通过不断的沉淀，相互探讨，不断学习，共同进步。

下一篇“图片”文章再见。

#专栏作家#

沙漠之鹰；微信官方账号:能量眼，人人都是产品经理专栏作家。致力于产品需求的驱动，产品体验的挖掘，运用设计手段给受众用户带来更好的体验，即好看又好用。

本文由人人作为产品经理原创发布，未经允许禁止转载。

图片来自Unsplash，基于CC0协议。