下载掌阅APP，畅读海量书库
立即打开
本节介绍与UI图标设计相关的基础知识，主要包括图标的概念、图标设计的流程及图标设计的原则。
图标又称为“Icon”，是指具有明确指代含义的计算机图形。从广义上讲，图标是高度浓缩、能快捷传达信息、便于记忆的图形符号，其应用范围很广，包括软件界面、硬件设备及公共场所等，如图2-1所示；从狭义上讲，图标则多应用于计算机软件方面，其中桌面中的图标是软件标识，界面中的图标是功能标识，如图2-2所示。
图2-1 公共场所指示图标（左）和Windows 10桌面图标（右）
图2-2 界面中的图标
图标设计可以按照分析调研、寻找隐喻、设计图形、建立风格、细节润色、场景测试的流程来进行，如图2-3所示。
图2-3 图标设计流程
图标是根据品牌的调性、产品的功能进行设计的，不同场景的图标设计方法也会有区别。因此，设计图标之前要先分析需求，确定图标的功能，并进行相关竞品的调研，明确设计方向。图2-4所示为音乐类竞品图标。
图2-4 音乐类竞品图标
隐喻通常指从一种事物联想到另一种事物，如谈到歌曲，会联想到音符，如图2-5所示。寻找隐喻是图标设计的常用思路，在明确设计方向后，应根据产品功能，通过联想找到相关的物品，进行相关元素的收集。
图2-5 QQ音乐图标的联想过程
图形的设计非常考验设计师的基本功。通过联想收集相关的元素之后，设计师需要绘制一系列草图，提炼设计出成形的图形，如图2-6所示，并根据图标的规范在计算机上进行微调。
图2-6 图标设计草图
目前的图标设计风格还是以拟物化和扁平化两种为主，如图2-7所示，其中扁平化为当今流行的设计风格。因此，我们在设计图标时要结合前期的分析调研，建立符合需求的风格。
图2-7 拟物化（左）和扁平化（右）设计风格的音乐应用图标
细节往往是区别于竞品、建立产品气质的关键。细节润色一般会从颜色、质感、造型等方面入手，最终完成体现产品特点的图标设计，如图2-8所示。
图2-8 图标质感调整前后的对比效果
为了让图标适用于不同场景及不同分辨率的屏幕，还需要根据规范调整图标的分辨率，具体的规范会在第2.2节进行深入剖析。最后在产品上线前，还要将设计的图标在不同的应用场景中进行测试，以确保其可用性和识别度，如图2-9所示。
图2-9 不同应用场景中的图标
图标设计要遵循设计准确、视觉统一、简洁美观、愉悦友好四大原则。
图标的设计准确具体体现在表意准确和制作准确两个方面。
表意准确是指在使用时，图标能够快速传达准确的信息，用户理解时不会产生困惑，如图2-10所示。
图2-10 表意准确的音乐类图标
制作准确是指在绘图软件中，图标的X和Y值应设为整数，而不是小数，并且图标的W（宽度）和H（高度）应设为偶数，如图2-11所示，这样可以保证图标的清晰度。
图2-11 正确示例（左）和错误示例（右）
图标设计需要在基本造型、风格表现、节奏平衡上保持视觉统一。
在基本造型上，需要根据规范对图标各部分设计进行统一，如图2-12所示。具体的规范会在第2.2节进行深入剖析。
图2-12 形体的基本造型统一的图标（左）和基本造型未统一的图标（右）
得益于移动互联网的发展，图标的风格非常多样化。设计师可以根据应用场景和产品情况选择合适的风格。需要注意，在进行多色图标的设计时，用色尽量不要超过3种，否则会导致视觉混乱，如图2-13所示。具体的风格会在第2.3节进行深入剖析。
在节奏平衡上，可以根据模板对图标进行规范，达到节奏协调、视觉平衡的效果，如图2-14所示。具体的规范会在第2.2节进行深入剖析。
图2-13 App界面中风格统一的图标
图2-14 在模板的辅助下设计出节奏平衡的图标
图标的设计应尽量保持图形的简洁，去掉多余的装饰，如图2-15所示。将简洁的图形精细化设计，形成设计上的节奏感。
图2-15 去掉多余的装饰，保持图形的简洁
赋予图标适度的情感，不仅能令用户快速实现目标，更能使其体验交互的喜悦。其中，为图标添加交互动效就是一种能快速赋予图标情感的方法。图2-16所示的金融App界面中的图标被赋予了细腻的动效。
图2-16 App界面中的交互效果