Icon的隐喻元素很重要，看这个icon就知道是什么意思了。例如，房子代表主页，叉子代表失误或关闭。当我缩小icon时，我会保留隐喻元素，以便icon仍然能够准确地传达信息。

(3)工具图标

主要对行业类别进行分类，使用范围广，公众或行内人士的识别度高，长期使用。比如建筑业、医疗业、化学产业等。

(4)混合图标

这是前三者的结合，以获得不同的视觉效果和应用结构。MBE粗线风格icon一直流行追波，是综合图标的产物，多表现设计师的个人设计风格或某种设计感强的软件。

3. 基于视觉特性的分类

(1)文字图标

文字图标“Glyph”一词源于排版领域，目前随着数字设计逐渐扎根于数字设计领域，源于希腊语，意思是“雕塑”。在排版领域，符号图标通常包含特定含义、特定功能、可表达性和可写文字系统(文字、图形，有时是两者的组合)。

这种图标设计中比较典型的是天气图标。从单个图标到组合图标都可以充分表达。

(2)平面图标

平面图标包含线性、面、线面、面、变现方式多种多样、扩展性强、个性化、年轻化、相同设计风格的icon，改变颜色后可以反映和传达不同的信息。

(3)具体化图标

拟人化图标与展平图标相反。正如当初义和画图标设计师常说的那样，它是“必死现实”，将现实世界的形状、纹理、光影尽可能融入整个图标的设计中，其特点是。拟画图标这一设计趋势随着Macintosh的诞生和演变，一步一步接近极致，上升到极致后，将从UI设计领域开始被扁平化设计所取代。但是物化图标仍然广泛应用于各种领域，特别是游戏设计和游戏产品的图标设计。2.5D图标和桌面应用程序图标。

4，图标优势

1. 全球通用

windows、IOs、etc。中英文版本，甚至各种语言版本在不打开菜单之前基本上是一样的。很多图标被大多数用户快速识别，甚至成为国际通用的图标。例如，Windows UI

2. 节约空间

当一个图标能清楚表达意思时，只需占用一个即可

个字符的位置就可以传递给用户操作信息。例如扫一扫、邮件发送成功，用文案表示需要3-4个字，英文或其它语言可能更长，而用图标代替只需要一个字符位置

支付宝右上角 + 表示更多功能，此时一个字符位置解释清楚其含义；微信下一个类似声波图标表示语音，直观易理解

3. 快速定位

进入碎片化时代和进入读图时代，几乎是相同的节奏。图片内容能在短时间内产生更大的影响力，研究表明，大脑处理图片内容的速度比文字内容快60000倍，人类大脑对图形图像的记忆也远胜于对文字的记忆。所以，在推广品牌时，图片内容可以说是一图胜千言。使用图标通过视觉引导帮助用户快速识别信息。

Tik Tok和ins没有任何文字说明情况下，我们就知道第5个标签就是个人中心

4. 可识别，易记忆

科学证明，在大脑中相对于其他感觉来说与视觉信息处理相关的脑区占统治地位，人脑对于图像的记忆远远高于文字。图标多采用几何图形，并以对称、一致的设计目标来进行设计，由于其高度浓缩的特性，图标具有更加简洁的特性，更加便于记忆。

五、图标的绘制流程

图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分，而当我们设计图标时候需要思考：

• 产品视觉风格定位（行业领域）
• 图标具体应用的界面
• 产品面相的用户人群是怎样的？

先看一组不用风格的图标，由上面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达方式是不一样的，所以设计前需要思考，你需要表达的设计思路和产品的定位。

1. 设计执行

（1）拆解关键词及关键词联想

将需求信息中的关键词进行拆解及发散，转化为生活中常见的事物，释放它所代表的内在含义。关键词的同义词、近义词、形状相关或相关联想的物体

例如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩做为产品图标的主要造型

（2）根据关键词联想输出图形

根据上一步拆解的词语或物体，通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具（sketch贝塞尔工具）或者布尔运算进行绘制

（3）根据场景输出

这里的场景可能是实际应用的场景，比如大众点评tab标签栏、功能区（品类区）、运营类图标等这些图标需要引导用户去点击，所以在视觉上更加丰富一些；而个人中心、分类区、详情页更多侧重功能上的引导，相对来说较简洁，属于二级使用场景，线型图标居多。

六、绘制中需要注意的点

我们常见各个图标文章分析应该注意十几点，而这些没有规律和逻辑难以记忆，一时记住了也容易忘记。这些总结其实是从Material Design或者iOS规范中得来的。认真研究这些细节，图标制作就不难了

1. 端点统一

图标端点分为直角和圆角，我们在设计过程中要统一图标端点，保持一致的设计语言

2. 角度统一

（1）拐角

相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹(fovea centralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。

圆角自身的圆形属性会给人圆润、可爱，更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标。

直角则会给人一种尖锐、具有攻击性的感觉，图标整体细节更多，通常出现在金融等商务属性比较强的产品。比如：36氪、金融类产品等。

（2）倾斜角度统一

3. 内部空间比例统一

内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下，第四个图标重心偏上，右边是早期PP助手的标签栏图标，图标内部挖空面积占比率相同，整体视觉和谐统一。

4. 描边风格统一

在绘制描边图标时，要时刻注意图标的描边粗细是否统一。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px、1.5px、2px、3px，1.5的粗细对显示屏要求比较高（半个单位的路径会导致图标在最终显示时边缘模糊，不清晰）

细描边给人视觉感更加精致，粗描边相对更加粗犷，由于目前流行趋势的发展，常常也有粗描边和细描边结合的设计风格

5. 内边距

除了保持相同的视觉权重，图标的描线宽度也应该保持一致，达到像素级统一。元素之间的最小间距，应该大于或等于描边的宽度。

6. 安全边距

苹果、谷歌、IBM，国内的阿里Ant Design都出过相关的图标网格规范，这里以谷歌的Material System 图标网格来进行说明。在24*24px图标尺寸，上下左右安全边距是2px，关键形状的四个基本形状为圆形20*20px、正方形18*18px、纵向矩形和横向矩形20*16px。通过关键形状的规则统一图标大小及位置，达到视觉的平衡

（1）对齐像素点

清晰度（像素完美对齐）为了避免使图标失真，可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用软件AI或者sketch的时候绘制基础图形不要出现小数点和奇数，多用偶数

七、图标验证

我们了解了 icon 的基本知识，怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。检验标准也是基于我们绘制的标准，分别是：识别性，规范性、整体风格与品牌感。

1. 识别性（表意准确）

判断事物的价值在于它的用途是什么，图标的用途是帮助用户理解信息，所以表意准确（清晰准确的传达信息）就是图标最重要、最底层的价值，如果你设计的图标用户看不懂，即使视觉再美观也没有任何价值可言。

含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。常见的就标签栏指南针表示发现，房子表示首页等

视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。

花瓣和 V LIVE 标签栏没有文字说明，这时候其含义识别非常重要

2. 规范性

我们要保证图标在视觉大小的一致性，图标饱满度（正负形）、遵循同一种规律，细节统一性。这里的4点在前面绘制过程中已经写的非常详细了。

3. 整体风格

整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如腾讯动漫，它的性格就是偏卡通可爱的类型，那么的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。一个广告语：复杂世界里，一个就够了，整个APP从启动图标到整体调性都是简洁干净，克制的色彩运用传达产品调性。

4. 品牌感

品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。下面几款产品从产品名到启动图标设计高度融合。

八、图标可用性测试

图标可用性测试是基本规则是根据图标验证推导的

1. 识别度

• 用户是否能够理解图标的含义？
• 是否是用户熟悉的图标？
• 是否与其他图标含义冲突？
• 是否能通过5秒原则？
• 图标的可扩展性怎么样？
• 是否需要增加文字标签？

2. 设计是否统一

• 视觉语言是否统一？
• 图标的设计复杂程度是否统一？
• 整体设计是否协调、统一、视觉体系高度集中？
• 图标整体配色是否统一？

3. 品牌信息

九、图标的交付

一般情况下有JPG、PNG、GIF、SVG四种交付格式（jpg比较少用），其中JPG、PNG、GIF为位图，受图片本身的分辨率大小限制，无法灵活的修改尺寸。而SVG为矢量格式，支撑无损缩放。

在没有SVG前因为要考虑到适配高清设备，需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能，比如蓝湖。另外交付方式是将SVG格式时，图标上传至类似iconfont的网站后，完成图标的交付。需要注意的是：

• SVG不支持渐变颜色填充
• SVG不支持描边，需要将描边转化为闭合图像
• 图标的大小相同时，需要在图标下方增加一个相同尺寸的透明方形，同图标一起导出上传

而iconfont对于图标制作要求严格，上传时需要注意查看自己的图标是否符合要求。

资料来源：

• 图像学的简要历史
• 主流界面设计语言的变革
• 《Icon Design Guide》
• 《Icon Utopia》
• 《the Ultimate Guide to an Interface Icon Set》
• 《svg图标库以及与icon font对比》
• Icon Grids Keylines Demystified

本文由 @见贤 原创发布于人人都是产品经理，未经许可，禁止转载。

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