图标，是一种图形化的标识，它有广义和狭义两种概念，广义指的是所有现实中有明确指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号。对于UI而言，主要针对的就是狭义的概念，它是UI界面视觉组成的关键元素之一。我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。
色彩color、文字Font、图标icon、图形shape、图片image、空间space，是我们做平面设计中非常重要的6个元素，而对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。
二、图标的历史
从历史上看，施乐公司在20世纪70年代初的时候，在功劳中提到了第一个图形化用户界面的图标：图标是在一台名为XeroxAlto的机器上实现的，这台机器非常昂贵，并没有真正普及到广大的用户。然而，这只是一个漫长的故事的开始：1981年，XeroxStar（施乐之星）发布了，它被称为第一台将图标作为界面的一部分的消费类计算机。特别是，它应用了至今为止的文件夹和垃圾箱的图标。下面是图标从80年代。
三、图标的分类1.图标基于功能类型的分类
（1）表意图标（又称解释性图标）
表意符号是指原本不存在实物的符号，是在发展过程中创造的一种符号，用于表达某些特定的含义或操作行为。而且在发展过程中，这些符号逐渐继承了一些象形符号的特性，将符号本身作为「实物」并且不断演化。例如「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号。
（2）交互图标
（3）装饰和娱乐用图标
通常是用来提升整个界面的美感，加深个性化设计风格，并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备有特定的风格的外观，提升用户线上体验感，迎合受众群的偏好，提升设计亲和度。装饰性图标通常呈现出季节性和周期性的特征。例如线上活动、用户等级、空页面等
（4）应用图标
不同数字产品在各个操作系统平台上的入口和品牌展示用的标识，它是这个数字产品的身份象征。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。
2.基于表现形式分类
（1）象形图标
一个比较有意思的日本图标网站
（2）隐喻图标
icon中的隐喻元素很重要，它可以让我们一看到这个icon就知道是什么意思。比如，一个房子代表首页，一个叉叉代表出错或关闭。当我缩小一个icon时，我都会保留隐喻元素，来保证icon仍然可以准确传达信息。
（3）工具图标
主要以行业类别为分类，使用范围广泛，大众或行内人士识别度高，且被长期使用。比如：建筑行业，医疗行业，化工行业等等。
（4）混合图标
3.基于视觉特性的分类
（1）字符图标
字符图标“Glyph”一词是源自于排版领域，现在已经随着数字设计而逐步在数字设计领域扎根了，它源自于希腊语，含义为“雕刻”。在排版领域当中，符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的时候甚至是两者的组合。
在这类图标设计中，比较典型的当属天气类图标了。从单个图标到组合图标，都能充分体现出来。
（2）扁平图标
扁平图标包含线性、面型、线+面，面+面，变现方式多样，拓展性强，更个性化，年轻化一些，相同，同样设计风格的icon，在更换颜色后就能体现和传达不一样的信息。
（3）拟物化图标
拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。2.5D图标和桌面应用图标。
四、图标的优势
1.全球通用
Windows,iOS,etc.,中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样。很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标。例如WindowsUI
2.节约空间
一个图标能够表述清楚含义的时候，只需占用一个字符的位置就可以传递给用户操作信息。例如扫一扫、邮件发送成功，用文案表示需要3-4个字，英文或其它语言可能更长，而用图标代替只需要一个字符位置
3.快速定位
TikTok和ins没有任何文字说明情况下，我们就知道第5个标签就是个人中心
4.可识别，易记忆
五、图标的绘制流程
图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分，而当我们设计图标时候需要思考：
先看一组不用风格的图标，由上面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达方式是不一样的，所以设计前需要思考，你需要表达的设计思路和产品的定位。
1.设计执行
（1）拆解关键词及关键词联想
例如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩做为产品图标的主要造型
（2）根据关键词联想输出图形
根据上一步拆解的词语或物体，通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具（sketch贝塞尔工具）或者布尔运算进行绘制
（3）根据场景输出
这里的场景可能是实际应用的场景，比如大众点评tab标签栏、功能区（品类区）、运营类图标等这些图标需要引导用户去点击，所以在视觉上更加丰富一些；而个人中心、分类区、详情页更多侧重功能上的引导，相对来说较简洁，属于二级使用场景，线型图标居多。
六、绘制中需要注意的点
1.端点统一
图标端点分为直角和圆角，我们在设计过程中要统一图标端点，保持一致的设计语言
2.角度统一
（1）拐角
相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹(foveacentralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。
圆角自身的圆形属性会给人圆润、可爱，更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标。
直角则会给人一种尖锐、具有攻击性的感觉，图标整体细节更多，通常出现在金融等商务属性比较强的产品。比如：36氪、金融类产品等。
（2）倾斜角度统一
3.内部空间比例统一
内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下，第四个图标重心偏上，右边是早期PP助手的标签栏图标，图标内部挖空面积占比率相同，整体视觉和谐统一。
4.描边风格统一
在绘制描边图标时，要时刻注意图标的描边粗细是否统一。在@1x一倍图设计模式下，以24px为网格基准的话，常使用的图标粗细有：1px、1.5px、2px、3px，1.5的粗细对显示屏要求比较高（半个单位的路径会导致图标在最终显示时边缘模糊，不清晰）
细描边给人视觉感更加精致，粗描边相对更加粗犷，由于目前流行趋势的发展，常常也有粗描边和细描边结合的设计风格
5.内边距
除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一。元素之间的最小间距，应该大于或等于描边的宽度。
6.安全边距
（1）对齐像素点
清晰度（像素完美对齐）为了避免使图标失真，可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用软件AI或者sketch的时候绘制基础图形不要出现小数点和奇数，多用偶数
七、图标验证
我们了解了icon的基本知识，怎样评判我们的icon是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的icon。检验标准也是基于我们绘制的标准，分别是：识别性，规范性、整体风格与品牌感。
1.识别性（表意准确）
判断事物的价值在于它的用途是什么，图标的用途是帮助用户理解信息，所以表意准确（清晰准确的传达信息）就是图标最重要、最底层的价值，如果你设计的图标用户看不懂，即使视觉再美观也没有任何价值可言。
含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。常见的就标签栏指南针表示发现，房子表示首页等
视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。
花瓣和VLIVE标签栏没有文字说明，这时候其含义识别非常重要
2.规范性
我们要保证图标在视觉大小的一致性，图标饱满度（正负形）、遵循同一种规律，细节统一性。这里的4点在前面绘制过程中已经写的非常详细了。
3.整体风格
4.品牌感
品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。下面几款产品从产品名到启动图标设计高度融合。
八、图标可用性测试
图标可用性测试是基本规则是根据图标验证推导的
1.识别度2.设计是否统一3.品牌信息九、图标的交付
一般情况下有JPG、PNG、GIF、SVG四种交付格式（jpg比较少用），其中JPG、PNG、GIF为位图，受图片本身的分辨率大小限制，无法灵活的修改尺寸。而SVG为矢量格式，支撑无损缩放。
在没有SVG前因为要考虑到适配高清设备，需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能，比如蓝湖。另外交付方式是将SVG格式时，图标上传至类似iconfont的网站后，完成图标的交付。需要注意的是：
而iconfont对于图标制作要求严格，上传时需要注意查看自己的图标是否符合要求。
本文由@见贤原创发布于人人都是产品经理，未经许可，禁止转载。