2.1 图标的基础知识

本节介绍UI图标设计相关的基础知识，包括图标的概念、图标设计的流程以及图标设计的原则。

2.1.1 图标的概念

图标（Icon）是具有明确指代含义的图形。通过将某个词语或概念设计成形象易辨的图标，进而降低用户的理解成本、提高设计的整体美观度，图标在UI设计中的使用如图2-1所示。图标通常和文本相互搭配使用，两者相互支撑，共同起到传递其中所要表达的内容、信息以及意义的作用。

2.1.2 图标设计的流程

图标设计的流程包括分析调研、寻找隐喻、设计图形、建立风格、细节润色、场景测试等环节，图标设计的流程如图2-2所示。

1. 分析调研

图标设计是根据品牌的调性、产品的功能而进行的，不同场景的图标设计方法会有所区别。因此，设计图标之前要先分析需求，确定图标的功能，并进行相关竞品的调研，竞品UI如图2-3所示，清楚设计方向。

2. 寻找隐喻

隐喻通常表示从一种事物能联想到另一种事物，如谈到家具，会联想到床、衣柜，元素收集如图2-4所示。寻找隐喻是图标设计的常用思路，在明确设计方向后，应根据功能，通过头脑风暴找到相关的物品，进行相关元素的收集。

3. 设计图形

图形的设计非常考验图标设计师的基本功。通过隐喻收集相关元素之后，设计师需要绘制一系列草图，提炼并设计出成型的图形，图标草图如图2-5所示，并根据图标的规范在计算机上对图形进行微调。

4. 建立风格

目前的图标设计风格还是以拟物化和扁平化两种为主，其中扁平化为当今的流行趋势，如图2-6所示。因此我们要结合前期的分析调研，建立符合需求的风格。

5. 细节润色

细节往往是使产品区别于竞品、建立产品气质的关键。细节润色一般会从颜色、质感甚至造型等方面入手，最终完成体现产品特点的图标设计，图标的细节润色如图2-7所示。

6. 场景测试

为了让图标适用于不同场景及不同分辨率的终端，还需要根据规范调整图标的分辨率，具体的规范会在2.2节“图标的设计规范”进行深入剖析。在上线前，还要将设计稿在不同的应用场景中进行测试，确保图标的可用性和高识别度，图标场景测试如图2-8所示。

2.1.3 图标设计的原则

图标设计要遵循可识别性、视觉统一、简洁美观、愉悦友好四大原则。

1. 可识别性

（1）造型准。设计图标时通过对信息与图形的理解，进行准确的图标造型，以保证用户理解图标需要传达出来的含义。比如图标在使用从真实世界简化而来的造型时更具有识别度，都表达点赞，左边的图标比右边的图标更具有识别度，如图2-9所示。

（2）颜色对。设计图标时通过调整色相、明度、饱和度，使用准确的颜色，以保证图标和背景形成对比。比如图标本身使用黄色，背景通常采用较深的颜色才能使人看得更清楚，同样的图标，黄色与黑色搭配使人更容易识别，如图2-10所示，相比于黄色图标搭配白色背景，黄色图标搭配黑色背景更易看清。

（3）够清晰。设计图标时通过设置坐标位置及尺寸，使用正确的数值，可以保证像素准确以及图标的清晰度。比如图标的坐标位置为整数、尺寸为偶数时图标会更加清晰，如图2-11所示，左边图标像素比右边图标像素清晰。

2. 视觉统一

（1）造型统一。图标造型必须要统一，造型统一包括描边一致、倒角一致、留白一致、角度一致以及透视一致等。造型统一会使图标更加精致，如图2-12所示，左边图标描边粗细均匀，看起来比右边图标更加精致。

（2）风格统一。图标风格必须要统一，在进行设计时，我们通常会先将其中一个图标的风格确立，然后将该风格延续到其他图标，以保证图标风格一致。风格统一会使图标更加整齐，如图2-13所示。

3. 简洁美观

（1）造型简洁。进行图标设计时应减少不必要的细节，降低复杂度，这样设计出的图标才会整体简洁，帮助用户快速识别，如图2-14所示。

（2）比例协调。设计图标时根据特定的规则进行设计，以保证协调性，这样设计出的图标才会呈现最佳状态。比如当内部图形与外部图形的轮廓比为1:2时，图标的整体视觉效果最为平衡，内部图形与外部图形不同比例的图标，如图2-15所示。

（3）风格合理。图标设计使用合理的风格，这样设计出的图标才会更加符合产品需求并提高产品美观度。比如进行旅游出行行业的图标设计时，通常会在扁平化基础面性图标之上再添加其他效果，以此打造出丰富绚丽的图标效果。如图2-16所示，使用渐变层次叠加面性图标较单色面性图标更加契合旅游出行产品的特点。

（4）配色科学。图标设计一定要使用科学的配色，这样设计出的图标才会更加符合其含义并加强整体美观性。比如进行“美妆护肤”的图标设计时，通常会选择甜美、温柔的粉色以强调优美感；进行“电脑数码”的图标设计时，通常会选择冷静、中性的蓝色以强调科技感。然后通过明度与纯度的变化，使用独特的颜色打造出精致的图标，如图2-17所示。

4. 愉悦友好

（1）品牌感。有时由于表达的意义相同，会导致不同产品中的图标设计显得普通甚至出现雷同，如图2-18所示。将品牌融入图标的设计中，可以巧妙地让图标具备差异性，拥有独特的产品气质，避免抄袭情况出现，将品牌融入图标设计的闲鱼App，如图2-19所示。

（2）生命力。在设计图标时注入拟人化的元素，同样会令图标具备差异性。这种充满生命力的设计，会带给用户亲近友好的体验，如图2-20所示。

（3）微交互。在视觉设计的基础之上，为图标添加小动画，形成交互，会令用户感到更加愉悦，如图2-21所示。