图标设计详解

北京/UI设计师/4年前/907浏览

版权

图标设计详解

图标一直是UI设计中很重要的部分，一篇文章带你了解所有关于图标的问题！文中还有图标冷知识，带你了解图标的各种番外故事。

图标一直是UI设计中很重要的部分，工作中我们经常需要思考怎么做出好看、差异化的图标。图标为什么这么重要？图标怎么做的好看？怎么针对不同的产品做出图标的差异性？将最近自己研究的关于图标的理解以及工作中遇到的问题思考，梳理输出分享给大家，希望能对大家在工作中遇到的关于图标的问题有所帮助。

图标作为一种视觉语言，广义上指具有指代意义的图形符号，具有高浓度并快捷传达信息、便于记忆的特性。常见的如，交通标志、男女卫生间的标志等等。

而UI图标大致可以分成两大类：标志性图标及功能性图标。标志性图标，即手机桌面应用图标的启动入口，这里是用户接触到产品的第一印象，决定了用户的去留，同时也是品牌传播的重要渠道；另一个是功能图标，出现在app或网站中，用于功能性性引导用户进行各种操作的图像。

相对说明的长文字来说，图标只需占用一个字符的位置就可以传递给用户操作信息。比如在个人中心页，我们经常看到的客服功能，用文案表示需要“联系客服”四个字（当然英文或其他语言可能更长），而用可以传达信息的图标代替只需要占据一个字符的位置。

各个国家和地区都有自己的语言和文字，因此当某一应用在其他地区使用时需要进行本地适配。图标却不同，经过不同平台应用长时间的培养，很多图标已经能够被大多数用户快速识别，甚至成为国际通用的图标，比如放大镜图标意味着搜索，齿轮图标意味设置。图标的使用打破了语言的地域限制，在完全不用懂应用文字意思的前提下，也不妨碍图标意思的理解，以及应用的相应功能操作。

比如，instagram上tab bar及主要操作都是直接使用图标表示并且没有文字备注，并不影响用户理解及操作。

人类的左右脑分工是不同的，左脑主要从事逻辑思维，比如语言、数据、逻辑推理等；右脑主要从事形象思维，比如音乐、绘画、空间几何、想象等；而右脑处理图形图像的速度是左脑处理文字速度的60万倍。

根据美国国家生物技术信息中心（National Center for Biotechnology Information）的数据显示，人类的平均注意力跨度已经从2000年的12秒下降到2013年的8秒。人类大脑对图形图像的记忆也远胜于对文字的记忆，人类会记住80%看过的东西，20%阅读过的内容和10%听过的东西。文字图像化，引导用户快速接收信息进行操作，减少用户的思考时间。

好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心，从而激发人们点击欲望。同时，图标集的统一性，一致性也会使的整个应用给用户传递视觉感受是统一、愉悦的，提升整个应用的视觉体验。下图为马蜂窝推出V9改版视觉升级中的品类图标优化方案。

如果要追溯图标的历史，可以追溯到史前时代。在当代由于图标高度浓缩信息、快速传达信息、便于记忆等优势，在其他方面的应用范围也极为广泛，比如国家的图标国徽，商品的品牌注册商标，app饮用的启动图标等等。关于GUI的图标史要从80年代第一台桌面比拟电脑施乐奥托（Xerox Alto）开始。

1973年，Xerox的帕罗奥多研究中心（Xerox PARC）为了方便新用户快速理解与掌握，首度公开了第一台使用桌面比拟的电脑施乐奥托（Xerox Alto），它是最早使用图形用户界面（GUI）的电脑之一。后来安迪·贝托尔斯海姆设计出的SUN工作站；苹果公司的麦金塔电脑，最初都是参考了Xerox Alto的设计。可以看到当时的用户界面只有应用程序本身的显示图标及数据程序的启动图标。

直到1981年数学家戴维·史密斯（David Smith）博士和艺术家诺尔姆·考克斯（Nor Cox）结合艺术和技术，由考克斯设计、史密斯发明了一套图标用于Alto的继承者Star的图形用户界面。此时对图标的定义是“计算机系统中数据或进程的象形表示，用来取代命令和菜单，作为计算机支持与最终用户对话的手段”。可以看到这套图标都是方形的线性图标，具备简单的外观和一致的设计风格。

1983年史蒂夫·乔布斯推出了一款面向广泛商业用户的个人计算机，并以自己的女儿“Lisa”命名。当时的Lisa系统界面十分简陋，并没有给大众留下太深刻的印象。次年乔布斯雇佣了Susan Kare为苹果设计一套特有的图标和字体，应用在1984年发布的麦金塔电脑中。麦金塔的图形界面虽然不是第一个界面设计，但却定义了之后绝大多数图标的外形，比如用来放置删除文件的废纸篓，表示保存的磁盘，以及苹果键盘上的功能键「command」，这套图标不但个性而且经典，这也Susan Kare为什么会被称为图标设计之母。（没有物理感知的同学，建议配合B站up主“老师好我叫何同学”2020年11月发布的《80年代的电脑能做什么？》一起服用）。

在这之后的图标演化，经历了微软的第一套电脑系统界面Windows 1.0的多色显示；走极简风格的ATARI TOS折叠式图标，这套图标的等距特点也成为电脑系统的标准之一；有四种颜色的AMIGA WORKBENCH用户定制化图标；GEOS的轮廓着色图标；APPLE GS/OS的“文件夹绘画“图标。这个阶段的图标外型没有太大，只是由于技术的不断更新使图标开始出现颜色。

直到1989年，当时的史蒂夫·乔布斯已经离开了苹果并创立了NeXTSTEP，这时的NeXTSTEP图标开始出现阴影和高度，向我们展示了一种全新的图标设计方法。NeXTSTEP的图标也是第一个被认为拟态的图标，图标开始进入拟态时代。

80年代末，图标已经由最初简单的线性图标演变出颜色，以及3个基本尺寸。基本的常用图标外形也被确定，比如文件、计算机、铅笔和垃圾桶。此时图标也开始进入拟物时代。

WINDOWS 3.0时，微软请来了Susan Kare为他设计桌面图标，我们可以看到和之前的图标有很多相似之处。苹果的MACINTOSH SYSTEM 7.0也开始出现了灰色的阴影，这个时候的图标基本趋向雷同。Geoworks在相同中采用靛蓝色的边缘以区分。BeOS则使用出现与现在2.5d类似的设计风格。IRIX使用阴影将图标漂浮起来。

苹果在RHAPSODY DR2的应用界面中使用等轴测图结合透明遮罩，以及新技术的支持，这版图标设计更加细腻、细节更加丰富。

AMIGA OS 3.5则还是保持粗的像素颗粒感。

90年代时期的图标都是现实主义的等轴测拟物化图标，但受限于技术此时的图标像素的质感还很强，图标使用投影增加空间感。

到了2000年，技术的革新带来新的图标设计风格，这时的图标开始具有超高的抛光度、层次感、透明光泽、多阴影、模糊、柔化等等。这时候的苹果和Windows界面出现了我们熟悉的样子，图标类似照片的质感，使得图标不再只是单纯的符号。

07年Windows的Windows AERO「Authentic（真实）、Energetic（动感）、Reflective（反射）及Open（开阔）」透明玻璃质感是这种轻快、精致、细腻“图标洛可可风格”的重要代表。现在依然有很多人喜欢这套闪闪发光的界面。到这时，图标还是指计算机数据或进程的象形表示。

2007年，苹果发布第一代iPhone以及iOS系统，在iPhone 1代前，人们与手机的交互方式主要是键盘和手写笔，电容屏支持多点触控技术使用iPhone用户可以用手指直接与屏幕进行交互。iOS的操作界空间也相对更大，因此系统桌面依然延续了写实的图标风格，甚至可以更精致。（2009年，从iOS 3版本开始，苹果开始采用拟物化设计风格）。

Google在2007年年底才与HTC、LG、摩托罗拉和三星一同推出以Android为主要操作系统的手持设备联盟。为了协调不同厂商Google一开始采用开放的组件系统，使得各家厂商可以修改底层文件，应用各放异彩的同时也是使得Android手机应用界面设计也越来越碎片化，使得后期Google为了统一设计风格不得不推出基于物理世界的Material Design设计风格，当然这是后话。这时的Android手机界面也在追求极致的拟物化。

2001年乔布斯提出电脑是数码生活的中枢，但从2007年苹果推出一代iPhone开始，由于手机的便携、快速、方便，手机的使用场景不断占据人类生活场景，从这个时候开始图标更多指的是移动端手机应用的启动图标和应用内部的功能性图标。

这个时候界面都使用极致拟物化图标，此时的用户经过多年的使用，已经不需要通过与现实同样的物理视觉来解决所谓“学习成本”的问题。2010年微软为了打通多设备的联通，保证手机、电脑、平板多设备有一致的体验，发布了带有明显磁贴风格（又称Metro风格）的windows phone 7系统，图标开始变得扁平统一的白色面性图标，也就是扁平风格的开端。（没错扁平设计风格并不是苹果提出的）磁贴设计最适合的是触摸的交互方式，微软桌面系统也采用了移动端的设计语言，完全有悖于之前用户的操作习惯，Win8口碑大滑坡加上微软系统升级的骚操作，导致微软的Metro风格犹如昙花一现，并没有成为真正的流行。

苹果紧接着发布的iOS7，与iOS6相比一改之前的极度拟物化，也并没有像windows phone 7绝对的白色和面性图标，而是在之前图标的基础上减少了底纹与质感，苹果尝试在拟物和扁平之间找到了平衡，这样的结果少不了Jonathan Ive的设计加持以及推动。因为风格的差异化太大，直到现在还有很多人在争论拟物风和扁平风的苹果那个更好看。

由于扁平风格的持续流行，图标也延续着扁平风格，中间也偶尔有出现类似锤子手机的拟物风图标，引起整个设计圈一阵关于拟物即将回归的讨论，但整体趋势还是扁平风大行其道。

2020年WWDC20苹果发布macOS Big Sur，这次苹果对设计进行了大幅度的修改，相较于之前的扁平风格以及不规则的外形，这次更新所有图标外形统一为圆角方形，靠近iOS系统。而整体质感则是在扁平的基础上增加些许质感。macOS Big Sur不止图标更新外形与iOS相似，很多交互方式也与iPad端靠近，比如三端都有的组件话系统。前面我们说到windows phone 7系统的目标是打通多设备的联通，保证手机端、电脑端、平板多设备的一致体验，而当时面对刚迁移手机端的用户来说，有点过于操之过急，但这一想法并不是天方夜谭。这次macOS Big Sur的视觉更新更像是为打通iPhone、ipad与MAC的整个苹果内部系统的基础设施建设。

当时很多设计师觉得有点不伦不类，外形虽然统一，但很多图标却也丑的很别致，比如被吐槽最多的QuickTime Player。并纷纷晒出自己对苹果的Big Sur图标的Redesign。

GUI的图标历史算来也有40多年。80年代以施乐奥托为开始，Susan Kare第一次明确经过设计的麦金塔电脑界面图标，明确了基础图标外形样式和简单的线性样式。90年代图标开始变成立体图标增加纹理、描边、模糊、层次越来越写实，但远远没有达到拟物的状态。2000年后，屏幕技术的发展，同时随着photoshop修图软件的出现，图标设计可以添加越来越多质感的，Windows、苹果图标拟物化出现，这时图标还是指的计算机数据或进程的象形。07年电容屏支持多点触控技术被乔布斯使用在iPhone一代，移动端开始越来越多占据我们的生活，iOS 3开始图标越来越拟物化。2010年人们身边充斥着各种电子设备，不再需要通过与物理感知一样的图标来理解背后的意义及交互方式，微软为了实现多设备一致的体验，推出Metro风格。iOS 7苹果设计师Jonathan Ive极力推动扁平图标的应用，当时充满争议。但之后极简、扁平、去除视觉噪音成为主流，扁平风格火了十年。而当时提出扁平风格的微软Windows 10 mobile 因为多端适配、7.5无法升级等问题，被用户诟病，2019年已经停止更新。2020年苹果Big Sur图标之前，扁平的图标减少视觉噪音方便用户快速识别等优点外，也限制着设计师的发挥，可以看到Dribbble上众多设计对于图标设计都有自己的尝试。图标的发展一直是技术、承载设备、设计师共同推动的结果，图标的发明是为了降低电子设备用户的理解成本，快速的传递信息，到现在无论如何发展信息传递依然是图标的核心。

关于图标的历史终于写完了，找资料找的头秃，尽～力～了～。如有出入，欢迎指正。

图标绘制是将语义元素转变为视觉元素的过程，以达到传递信息的目的。所以图标的建立，首先应该确定图标的隐喻，也就是型的确定。（因为所有图标都是在功能型图标基础上进行的设计变形或设计细节添加，因此之后文章除非特别说明，举例都会以功能型图标为主）

图标按图像隐喻分类可分为实物图标、象形图标、表意图标、文字图标、创造图标、组合图标。

实物性图标就是将真实的物品作为符号引导用户点击，一般用在表示新鲜的生鲜类应用，比如：如盒马生鲜，叮咚买菜。或具有品牌效应的电商类应用，比如：得物、识货。还有些没有办法符号化的物品，比如美团买药、聚美。

象形图标是最常见的图标绘制方式，即通过对一个物理物体的再现或参照来表达意义，表示单词或短语的图像符号。GUI刚出现时，用户并不知道怎么进行操作，因此对绝大需要传递的信息，都尽量模范现实生活中的实际物体，比如：代表删除的垃圾桶，以及当时电子软盘表示保存。

这类图标由于长时间的使用，如果改变外形可能误导用户，外形无法做过多的变化。

表意图标是将没有具象物体、比较抽象的概念，在发展的过程中创作并成为一种约定俗成的图标用来表达某些含义或操作，比如点赞图标，设置图标，音符图标代表音乐，+号代表增加。

有些词或操作没办法用任何图形进行表现，这时会使用相关的文字进行表现。文字本身就是一种演化而来的符号，比如返利。返利是最近才出现的名词，没有更好的图形可以进行表现，一般会使用“返”字作为视觉表现。另一种情况是在某些特定节日会使用文字宣传作为图标，比如双十一、618各大电商运营活动。

创造类图标的设计和功能并没有直接关联，本身是不具备传递功能的含义，一般是伴随着业务的出现，用户在长时间使用过程中习惯熟悉图标传递的含义，有时会伴随文字一起出现，经典的比如苹果的command键、蓝牙图标，最近的小程序图标。

组合图标指将前面几类任意组合后产出的新图标，用来表达更为复杂的意思或操作行为，比如添加新用户、微博的找人等等。

我们经常看到图标有很多种设计风格，比如：单色图标、断点图标、双色图标、等轴测图标，或者最近流行的毛玻璃质感图标以及新拟态。

但将所有图标进行拆解后，会发现图标的设计过程为定型—颜色—质感—阴影，图标最终的表现形式是线性图标、面性图标或线面结合图标，再赋予不同的设计细节，形成了不同风格的图标样式。

线性图标，图形是通过线条进行视觉表现，线性图标可以通过线条的粗细、线条的颜色、险段是否缺口等创造出多种设计风格。现在很多产品图标还是扁平设计风格居多，底部导航的未选中状态，个人中心图标以及页面中的功能性图标都会使用线性风格图标。

线条粗细

线性图标由于线条的粗细不同会使图标产生不同的力度和重量感。粗线条由于视觉面积大，会显的图标厚重、粗糙，也更吸引用户的注意力。细线条则会显的优美、精致。

有些应用也会使用图标线条的粗细对比来显示选中与未选中状态。

甚至会采用粗细结合的手法来增加图标的设计细节，一般采用外粗内细的双线条设计表现形式。但当图标本身线条就比较多时，再增加线条的粗细对比设计手法，会使的原本就复杂的图标显得冗余。

线条连接

常见的线条图标是连续、封闭的线条，但为了追求不同的设计形式，设计师会有意识的将图标连接的某部分进行断开连接，由于视觉惯性，用户会自行脑补断开的部分，形成另一种美感。在应用中除了应用在底部导航栏以外，功能性图标也经常使用这种风格的线型图标，比如瓜子二手车。

颜色模式

线条的颜色方式一般有单色、双色、渐变3种形式。单色以及双色图标比较常见在底部导航或个人中心功能入口图标，其中一些应用会将品牌色作为强调色在双色图标中使用来强调品牌感。

渐变色当线条过细时，视觉变化不太明显。因此线性图标中不太常见，面性图标中会经常使用渐变色的设计风格。

面性图标相对线性图标有更大的视觉面积，更能吸引用户的注意力，因此设经常出现在首页第一屏功能入口的区域，或是底部导航的选中状态。

另一方面面性图标相对线性图标可以通过色彩的填充、多种形状组合、图标质感的刻画、阴影等来增加图标的视觉效果，面性图标的视觉表现形式也更多样。

面性图标

单色面性图标常见于底部导航栏、个人中心页、详情页等，颜色会使用的品牌色来增加品牌归属感。

渐变图标

渐变图标相对单色图标有更多变化，设计中会使用同色系渐变或撞色渐变。

元素叠加

将两个元素进行叠加设计，如下图中淘票票应用提取未选中状态下的某个元素与图标的外形形状进行叠加，或者类似看理想app应用的底部图标，使用圆形、三角、方形等无意义形状进行叠加设计。

统一外型

我们常会看到将不同外形的面性图标放在统一形状内的设计方式，这类设计除了可以统一所有图标的外形，另一方面相对其他图标，完整大面积的颜色区域也更能吸引用户的注意力，视觉感知也更重。常见于应用首页上部的功能入口图标。但也有类似品玩应用，在底部导航图标使用这种设计形式。

质感图标

随着现在手机屏幕分辨率越来越高，以及每年设计趋势的改变，各家应用为了做出设计差异性，其中图标是重点优化部分。比如喜马拉雅的功能图标使用了从去年年底就讨论度极高的玻璃质感表现形式。京东的功能图标则使用轻质感图标形式，而类似蚂蚁庄园签到游戏的界面，为了迎合运营游戏话的使用场景，图标的质感会更精致、偏游戏化。

设计师在进行图标设计时都希望能够做出更多的设计感及差异性，每年流行的设计风格就是设计师们会争相尝试的风格，比如新拟物设计风格、MBE设计风格、等轴测风格等。但设计细节越多，也就意味着会有更多的视觉信息干扰，一定要牢记图标的最终目的是为了清晰的传递信息不要本末倒置。

基于线性图标的线条粗细、颜色模式等等，面性图标的面积大小、颜色变化，设计出相互结合的线面图标，线条勾勒外型，内部进行形状填充或在线条外增加底部形状等设计方式，设计师在设计的过程中，根据不同的产品特征、及使用场景，产生更多的设计变化。

当设计师拿到图标的设计需求时，首先会思考到底使用「线性图标」还是「面性图标」？

图标最重要的作用是快速传递信息，即图标的识别效率。2014年《填充图标与轮廓图标：图标样式对可用性的影响》论文中指出，在用户对于图标的识别很大程度是对图标的某个明显特征的辨识，比如对话图标的尾巴、设置图标的齿轮、钥匙的齿轮等。当图标为线性时，这些特征更容易被识别到，而面性时这些特征则会被忽略掉。因此当图标的特征线条比较微妙且出现在形状边缘时，线性图标比面性图标更容易识别。

图形的识别性是由形状、颜色或其他元素决定的，因此在外形一样的情况下，线性图标要比面性图标更吸引眼球，而面性图标其实是通过填充颜色吸引用户的注意力。比如浅灰的面性图标并没有比线性图标更吸引用户。

面性图标通过面积、色彩、质感等相对于线性图标具备更强的视觉信息层级，更具引导性。因此应用图标的第一层级的使用场景，标签栏、导航栏、品类区会使用面性图标；第二层级使用场景，个人中心、分类、详情页则多为线性图标。当然这也不是绝对的，比如很多导航栏的未选中状态也有使用线性图标的情况。

而线性图标也由于看起来更加精致、细腻，适合使用在精致简洁的应用或产品。

圆角自身的圆形属性会给人柔和、舒适，更加安全、亲密的感觉。同时由于人眼睛的生理构造上的中央凹（视网膜中视觉最敏锐的区域）在处理其他形状时需要涉及大脑中更多的“神经影像工具”，圆形则不需要，因此相较于其他形状人类的眼睛在识别圆角弧形的时候更容易。因此社交、娱乐、直播、美食等图标多会使用圆角图标。（面性图标讲解里面已经放了很多圆角图标，这里放一套我最近比较喜欢的一套图标）

尖角则会给人一种尖锐、具有攻击性的感觉，直角图标整体气质会比较硬朗、商务、个性，比如：得物、爱范儿。

我们在设计图标前需要找很多图标的设计风格做为风格参考，下面推荐几个dribbble上很有名的图标师及团队。

1.smartisan（团队）

锤子图标设计图标大部分都是轻质感风格的图标，细节一如既往的让人惊艳，第一篇图标的历史中展示了很多锤子的图标，强烈建议自己查看网站原图。

2.Anton Kuryatnikov

立体风格图标，适合有特殊风格需求的设计。

3.MVBen

质感风，好像好久没上传作品了，但之前的图标设计依然很厉害的设计师。

4.Nucleo（团队）

是个专门做线性图标的团队，团队内有3名成员，上传的作品全是一整套的线形图标。

5.Prakhar Neel Sharma

设计的图标个人风格很强烈，都是比较有个性图标设计，我个人最近很喜欢图中那套黑红的图标设计。

6.Yoga Perdana

有段时间国内特别风靡这种层叠式的启动图标设计风格。

7.OnionMath（团队）

国内洋葱数学的设计团队，设计风格比较可爱都，K12教育可以参考

8.Vitality Studio（团队）

Vitality Studio团队作品都是3D立体质感的设计。在去年Big sur图标更新，Vitality Studio也跟着发布了一套苹果桌面图标，但相对苹果图标更立体与质感。

在实际工作中，图标的设计其实是多种手法结合使用的，复杂程度越多，图标就会越繁复，视觉信息也越多，而当图标缩小时，这些视觉信息反而会成为干扰，那么图标在实际设计中的尺寸应该是多大？传说中的keyline线怎么使用？为什么明明我的图标大小一样，但总感觉视觉上却不统一？下面我们来讲讲图标的尺寸。

图标的绘制过程中首先我们要确定所有图标绘制完成后在相应的界面大小是合适的，相同使用场景下图标的视觉大小是一致的。

图标有16x16pt，24x24pt，32x32pt，48x48pt，64x64pt，128x128pt，512x512pt，1024x1024pt几个尺寸，其中app store上架图图标最大为1024，b端比较小的图标为16，其他根据对应的平台规范来就好。

这里建议以48pt为常规设计尺寸。iOS的网格大小要求是4的倍数，最小点击区域是44pt。安卓要求网格是8的倍数，最小操作热区为48dp。同时要考虑不同倍图下的适配问题（@2x要求4的倍数，被2整除，用来适配@1x；@3x要求12的倍数，分别被2、3、4整除，适配@1x、@2x）。

同时也要注意，当图标中的小元素越多，越难理解它所传达的含义。

为了保证图标能够看清，图标的粗细也有相应的要求，太细会存在看不清的情况，无论画线形图标或面性图标最好越小越好，这样的话会更加精准。

在@1x一倍图设计模式下，以48px为网格基准，常用的图标粗细有：1.5px，2px，3px，4px。

需要注意在48X48px画布上绘制线性图标，线宽为4px时，当不同场景缩放，需要按比例进行使用调整：图标为32X32px时线宽为3px（基准线宽）；图标为24X24px时线宽为2px（基准线宽）；图标为16X16px时线宽为2px（基准线宽）。

当绘制单个图标时，我们只需要关注单个图标规范与美观。当需要绘制一整套图标时，却总会被说视觉不统一、大小不一样，度量数据却是一样的，这是为什么？

从几何学上来说，两个形状的宽度和高度相同，即物理大小相同。但上图中的实际情况却是，方形明显大于圆形，也就是视觉重量中，相同大小的正方形要大于圆形（视觉重量是指人眼如何感知物体的大小和比例，并不一定等于其像素大小或面积）。实际上物理平衡和视觉平衡是相互矛盾的关系，相同大小区域内绘制正方形、圆形和三角形时，虽然在物理上关系一致，但在视觉上给人的感觉是大小不一样。

菱形、三角形与相同大小的方形对比也具有相同的视觉效果。为了视觉上的保持重量相同，菱形与三角形也应该更宽或更高。

在界面中我们可以将图标近似地看作是一些基本形状的组合：横向矩形、纵向矩形、倾斜矩形、圆、三角形、正方形。当物理大小一样时，方形图标的视觉重量要大于圆形，大于多边形。

当我们要创建一整套的图标时，最重要的规制就是必须保证所有图标的大小是一样的，这里指的不是物理大小而是视觉大小。因此我们需要借助一套规则来帮助我们统一图标的视觉大小，这就是图标网格（keyline线）。

图标网格是为了图形元素的一致性以及灵活的定位而建立的明确规则，通过核心形状为指导，保证跨系统图标一致的视觉比例。苹果、谷歌、IBM，国内的阿里Ant Design都出过相关的图标网格规范，链接我会放在文章的参考来源里，这里以谷歌的Material System 图标网格来进行说明。大部分人看到图标网格，都知道关键形状的用法，那么像素网格、交叉线、遮罩、安全区域/裁剪区域到底怎么使用？

像素网格

像素网格是用来帮助用户在绘制过程中可以控制每个线位置、粗细，保障在低分辨率的屏幕上呈现出清晰的图标，当绘制线条没有完全绘制像素对齐时，尤其是小尺寸的图标，最终导出的显示效果会出现模糊、边界不清晰等情况。但随着硬件呈现的改进，以及使用矢量工具绘制图标等原因，现在对像素网格方面要求已经没有之前那么高了。

关键形状

关键形状的四个基本形状为圆形、正方形纵向矩形和横向矩形。通过关键形状的规则统一图标大小及位置，达到视觉的平衡。

阿里的图标规范Ant Design的关键形状除了基本的圆形、正方形纵向矩形、横向矩形外，增加了两个等边三角形，并进行了宽高比调整，感兴趣的可以点击链接查看。（链接中大三角的尺寸不知道是标错还是什么原因，按原尺寸是对不上的，可以以下图中我梳理的数据作为参考。）

交叉线

交叉线是指与图标中心点相交并创建额外定点供使用的关键线，这些线条通常将画布以90度或45度进行切割。需要注意角度的倾斜也会影响图标的清晰度，出现锯齿问题。因此图标中出现斜线以45度为标准，出现其他角度时，应该以15度的角度进行增量。

遮罩

遮罩是默认的方形画布自定义图标的容器，常用于应用商店的启动图标。苹果App Store在所有图标上都应用了圆角矩形的遮罩。

启动程序图标（位于主屏幕和应用程序抽屉中），不同的Android原始设备制造商在其图标上应用不同的形状。常见的有圆、方形、超椭圆、圆角等。

安全区域/裁剪区域

安全区域是Google的Material System提出的，显示图标的重要内容应该处于安全区的区间内，防止遮挡或被裁剪。但iOS系统中并没有关于桌面图标过多关于这方面的限制，比如618活动、周年活动、版本号等关于启动图标的运营设计。

遮罩以及安全区域/裁剪区域仅在启动图标中需要注意，其他主要以像素网格、关键形状、交叉线为图标规范进行使用。

需要注意的是很多同学在画图标时，会以keyline线作为图标绘制的绝对标准，沉迷于各种规则，但实际画图标时还是以实际视觉感受、图标的清晰度及信息传达为主，网格的作用只是辅助，并不一定适用所有图标。

了解完图标的相关知识，接下来我们来聊绘制图标的细节流程。

图标是将词意图形化过程的结果，存在的目的在于向用户传达信息的隐喻，帮助用户快速理解及操作。当我们接到需求时，先不要着急着手绘制图标。先要经过以下步骤，才能绘制出符合要求的图标。

当接到图标的需求时，需要将信息中的关键词进行提取并发散出相关的词语，这个过程我们可以借助搜索引擎或词集来获取相关的同一词、定义、临近词等。如下图对关键词“信息”的发散。

根据信息关键词脑暴出符合的符号及形象，可以根据图标的隐喻分类方式：实物图标、象形图标、表意图标、文字图标、创造图标、组合图标，在第四章图标语音分类中有详细介绍请自行查阅。这个过程可以用纸笔进行粗略的绘制，确定出最贴合要传达信息的图标外形。

不同的图标使用场景，决定了图标的不同视觉表现形式。比如标签栏、导航栏、品类区属于一级使用场景，因此多使用视觉重量更大的面性图标；个人中心、分类、详情页属于二级使用场景，相对来说以线性图标居多。在绘制中需要先了解图标的使用场景会是什么样的，具体参考可以看下第五章图标属性关于图标不同场景下的图标梳理。

在确定好图标传递的视觉阴喻后，需要确定图标是线性图标、面性图标、毛玻璃质感等设计风格，如果有相关VI系统，则需要尽量靠近整体的设计风格。

第二阶段图标的符号及形象化过程中，我们可以借助现在层出不穷的图标网站对第一阶段提取的关键词或临近词进行搜索，来获取信息图形化的创作灵感。下面是一些我常用的图标网站：

1.iconfont

阿里妈妈MUX打造的矢量图标管理、交流平台。设计师可以将图标上传到iconfont平台，其他用户可以自定义下载AI、SVG、PNG多种格式的图标，平台也可以将图标转为字体，便于前端工程师自由调整与调用。

除800多万矢量图标外，还有适应不同场景的插画库，满足不同场景的需求。我自己会比较常用的图标网站。

2.IconPark

IconPark是字节跳动旗下的图标平台，提供2000+预设图标及分类。提供复制SVG code、复制React 组件、复制Vue组件、下载PNG、下载SVG。个人感觉没有iconfont的图标多，可以作为备用。

3.Radix Icons

由Modulz团队设计的一组清晰的15X15的图标。所有的图标都可以作为单独的React组件使用。

4.Flump

色彩缤纷的3D图标，让你的macOS更酷，不是免费的。

5.Streamline

100，000个图标、插画和表情符号，适用所有项目。帮助在几秒内根据您的品牌定制他们。前5天免费试用访问所有媒体。

6.Iconduck

118,894个免费的开源图标和插图，可直接下载试用

7.Ikonate

可直接调节图标的大小、线条粗细、节点、颜色等

8.Shorticons

188单色的iOS桌面图标，可选择面性图标或线性图标，可调节大小、图标及背景的颜色，售价9美元。附有网页底部操作说明。

9.Line Awesome

点击图标，会出现一行代码，复制图标、代码就可以直接使用。里面有很多特殊图标，比如无障碍、助听系统，手语翻译等不常见图标，以及各种品牌图标。

10.lineicons

为设计师和开发人员提供5000+个线条图标，并提供免费的CDN、常规变体、图标编辑器和许多手工制作的免费线条图标，适用于web、移动端和桌面应用程序设计和开发项目的现代用户界面。

当然还有很多有趣，高效的图标库，由于篇幅原因，剩下的就不一一列举了。

上面说完图标的绘制流程，接着我们来聊下图标的绘制方式。图标的绘制方式有两种：布尔运算（Boolean algebra）和贝塞尔曲线(Bézier curve)。

布尔运算（Boolean algebra）又称逻辑运算，是英国数学家布尔在1847年发明用于处理二值之间关系的逻辑数学计算法，包括联合、相交、相减。

在三维图形方面，布尔运算则是通过两个以上的物体进行并集、差集、交集的运算，从而得到新的物体形态。软件系统提供了4种布尔运算方式：并集、交集、差集、减去顶层。

并集：将两个形状合并成为一个形状，取全部形状。
减去顶层：用底层图形减去顶层图形，剩下的部分为最终图形。
交集：两个图形重叠、相交的部分。
差集：相当于「并集」减去「交集」之后剩下的部分。

需要注意的是，布尔运算的建立需要满足两个条件：

1.必须是两个以上的图形有相交的区域；

2.所有图形都是在同一个图层中才可以进行布尔运算。

图形进行布尔运算后，随时可以对两个运算图形进行修改操作，包括布尔运算的方式、效果也可以进行编辑修改。通过布尔运算，我们能绘制出绝大多数的图标，但有些结构线条复杂的图标无法使用相加、相减、相切进行完成，这个时候就需要使用贝塞尔曲线刻画图标。

贝塞尔曲线(Bézier curve)又称贝兹曲线，是由法国数学家Pierre Bézier发明的，它的主要意义在于无论是直线或是曲线都能在数学上使用参数予以描述，因此当我们拖拽某个控制点时，其实是在用鼠标调整某个参数数据，方便计算机可以计算及录入相关信息。一般的矢量图形软件都是通过贝塞尔曲线画出曲线的，我们总说的钢笔工具就是用来画这种矢量曲线的。

贝塞尔曲线包括：节点、控制点、控制线、曲线四个组成部分。在绘制的过程中，节点作为支撑构成可拖动的支点，控制点和节点之间的线段称为控制线，调节控制点的位置，拉扯控制线来改变曲线的形状。

节点的类型包括了4中类型：直线节点、镜像关联节点、无关联节点、不对称关联节点。

直线节点：没有控制点及控制线，只有节点的线段；
镜像关联节点：拖拽其中一侧的控制点，另一侧的控制点会发生镜像变化，多用与绘制对称结构的曲线；
无关联节点：选中节点两侧的控制点可以各自控制相对应那侧的曲线而不互相影响；
不对称关联节点：选中节点两侧的控制点会永远保持在同一条直线上，但却不会对称的控制线的长度。

在使用贝塞尔曲线绘制图标的过程中，常用钢笔工具进行绘制，很多刚接触贝塞尔曲线的设计师对他的使用感到很困难，大家可以通过【The Bézier Game】网站进行练习，达到熟能生巧的使用贝塞尔曲线。

这两种图标的绘制方法都是可行的，在考虑到图标的规范性及后期修改等问题，建议在绘制图标时尽量使用布尔运算进行绘制。

我们在绘制图标的过程中会将注意力集中在图标的构成、颜色、粗细等图标属性上，但绘制完成以后，却还不是一个合格的图标。特别是绘制一整套图标时，图标的视觉统一、传达性以及图标对于品牌调性的传达都会是图标绘制过程被设计师所忽视的问题。

图标的建立最基本的原则是务必清晰准确的传达信息，即图标是否可读。当图标失去传递信息的作用时，就失去了图标的意义。很多初级设计师在开始设计时过于追求图标视觉的独特化，却忽视图标传递信息的意义，繁复的图标谁反而会成为页面中的视觉噪音，影响用户完成操作任务。

1.使用用户熟悉的图标

在确定图标的符号、形象化过程中，有些设计师会为了突出设计感而使用特殊的图标表现形式，但实际上对于不同文化和背景的人来说，不同的图标代表了不同的含义，好的图标应该是通用的，大家通过相同的图形认知语言，获取、理解以及操作相同的信息。因此图标的形象最好是基于用户经验、熟悉且具有辨识度的图标。

首先，在设计初期考虑使用通用图标，比如播放、搜索图标等，对于这类通用的常见图标设计师不需要添加过多的文字解释说明，节省空间的同时，并不会降低用户的识别及操作速度。另一种情况例如象征保存的软盘图标，虽然现在的大多数年轻人并没有见过也没有使用过软盘，但方形的软盘图标作为存储已经成为一种得到广泛认可的图标。

其次，如果实在不知道该使用何种图标图形时，可以参考相关竞品，使用与竞品类似的图标，不要忽视了竞品对于用户理解的养成。

2.不要使用含义冲突的图标

避免使用可能会代表多个含义的图标，例如“心”型图标在在小红书、抖音等应用中则是喜欢、点赞，在自如、Airbnb应用中“心”型图标则代表了收藏。在豆瓣中心型图标代表了想看，一颗星星代表了看过，多颗星星代表了评分。因此在绘制使用图标的过程中要注意结合图标的使用场景，及操作，不要使用含义冲突的图标，如果出现与用户预测有模糊的情况，建议还是需要加上文字说明。

3.不要重新定义图标的含义

在绘制图标的过程中，不要赋予用户已经熟悉默认的图标新的意义，但用户看到某个图形时，心里会有对应的预期隐喻，但图标的意义与用户的认知形成冲突时，用户会对图标的意义产生怀疑，影响使用。

4.5秒原则测试图标含义

当我们绘制了新的图标时，建议使用5秒原则测试图标是否可行。5秒测试是一种用户研究的方法，用户打开一个页面后，在决定留下还是离开前，会花大约10秒的时间来评估一个网站，而会有50毫秒的时间用户会留下对整个页面的视觉印象。也就是说5秒测试是捕捉人机交互的最初时刻，而颜色、图标等设计元素会影响用户形成的第一印象，并伴随影响用户与界面交互的整个过程。

5秒测试可以帮助衡量用户在查看图标的前5秒内获取了哪些信息以及他们获得的印象。当一个图标需要用户花费5秒以上的时间思考其含义的时候，则表示这个图标在传达信息速度方面存在问题。要避免在绘制图标过程中出现“用户每天使用我的应用，一定能够明白图标的含义”这类的想法。大家可以通过Five Second Test网站可以帮助大家自行建立5秒测试。

5.图标的可扩展性

图标在不同的使用场景中，大小需求也会不一样，当在最小尺寸15X15像素的条件下，如果图标的内容细节过多，反而会影响图标的识别度。因此当绘制图标时，一定要注意图标在不同场场景中的尺寸大小。

6.是否需要文字标签

图标的目的是为了使用户快速识别信息并引导用户进行操作，当单独出现的图标不能让用户快速的明白背后的隐喻时，或者在用户理解时存在争议时，就需要使用图标+文字的形式。比如小黑盒的底部图标没有办法使用图标传达信息，这个时候就需要文字说明，来传递信息。或者京东金融中的「分期」以及「花生社区」中的图标容易混淆传达意义时，也需要添加相关的文案说明。而小黑盒以及京东金融两个应用头部的信息、搜索、扩展应用的图标已经是大众熟悉的通用图标，并不会造成干扰，特别是不同图形的信息图标。而MOO音乐的整个底部导航都没有使用文字说明的情况下，并不影响用户的使用。

绘制完成一个完美的图标很容易，但如果要绘制一组图标时，困难程度却会几何递增。只有图标是统一且美观的，一套图标才能成为一种语言，传达设计的内核。

1.视觉大小统一

本文第六章图标的尺寸大小中提到由于人眼感知物体的大小和比例与物体的像素大小和面积是不一样的，一般来说相同大小的正方形从视觉上来看要大于圆形，菱形、三角形与相同大小的方形对比，从视觉上也明显小于同样大小的方形。因此为了保证视觉上的重量相同，菱形、三角形、圆形相对于方形应该更宽、更高，在绘制图标过程中我们可以借助图标网格保证图标视觉大小上的统一。

下图中Before的首页图标视觉大小小于其他几个图标，但物理大小确实是一样的，修改后的首页图标视觉大小方面更加统一。

2.视觉语言统一

一致的设计语言可以使用户明白这些图标具有同样的重要性及状态。设计语言包括了线面类型、描边粗细、圆角大小、角度、负空间比例。关于图标视觉语言设计属性在第五章图标的设计属性中有详细说明，本章会以案例为主进行主题讲解。

线面风格统一

在绘制图标过程中会出现如下图中一组线性图标中突然出现某个面性图标的情况，这种除了视觉语言不一样以外，从视觉重量来说也是不统一的。在绘制的过程中一定要注意线面属性的统一，如果出现线面结合的设计，也需要所有图标统一为线面结合的设计风格。

另一种情况是面对画面中有「…」元素时，在变成面性与线性设计时会出现下图中的情况，但实际面对这样的情况，不需要将「…」变为描边的情况。

描边粗细

在绘制描边图标时，要时刻注意图标的描边粗细是否统一。如下图中的左边图标，当描边粗细不一致时，会很明显感觉图标视觉重量的不统一以及视觉风格的差异化。

圆角的统一

很多在画图标时除了没有注意到图标外部的圆角，也会忽略图标拐角处的圆角大小，以及图标内容拐角的直角。如下图中的第二个图标中代表山的折角，以及第四个图标。

角度的统一

我们在说角度统一时，除了倾斜角度的统一外，还有另一个容易被忽视的角度问题，即视觉角度。常见的角度问题一种是二维与三维角度图标混用如下图的第四个图标；以及正视图标与侧视图标混用如下图的第一个图标。

内部空间比例统一

图标的绘制过程中，往往会忽略图标内部空间的统一，绘制完成的图标会因为内部结构的大小不同，导致视觉重量以及图标的内部结构不统一。

3.复杂程度统一

设计过程确定图标风格一致的基础上，注意保证图标内部细节的一致性，从视觉复杂程度保证视觉重量以及设计细节的统一。

4.设计风格统一

确保图标使用的图标样式统一或至少相似。常用的设计手法有透明度、投影、渐变样式等等，设计的过程中设计师需要一直谨记这些规则保证一套图标的统一性。比如断点样式图标是我们常见的图标风格样式，在设计时如果确定要使用断点样式，则要保证所有图标的某一处都是要有断点。

5.颜色统一

在绘制图标时需要注意所有图标的色调保持统一，包括色相、明度、饱和度等，如果使用纯色渐变或撞色渐变则应该都使用同样的色调形式。如果你没有办法控制很好的对多种颜色进行搭配则建议使用两到五种颜色。

同时也要注意用户对某一含义的图标预设的颜色预期，比如蓝色象征了安静，另一方面也代表了安全、专业、稳定；红色代表了斗志，也象征了激情、热闹、喜爱；黄色代表向上的精神，温暖的感觉。当然如果有品牌vi，尽量使用品牌色进行整个图标颜色的延展。

使用正确的颜色会使图标看起来更有凝聚力和时尚感，并且能使用户在图标的颜色方面读取图标要传递的信息。

在满足了图标的识别性与统一性后，为了能与其他图标区分开，我们需要从视觉上增加图标的独特性以及表现力。但图标的独特并不意味着要牺牲图标的表现隐喻，使得图标难易理解。品牌元素的使用，会使图标具备视觉独特性的同时增加整个界面的品牌辨识度。另一方面品牌传播需要不断对品牌特点进行重复使用才能让用户熟悉品牌调性，UI界面的tabber作为主要来区分不同产品层级及框架的存在，很多应用都选择在tabber的图标中着重品牌元素的使用。

1.提取品牌颜色

颜色感受是用户在使用过程中对应用最直观的感受，甚至在没有看清文字或者内容时，品牌色已经在用户心中留下对产品的第一影响。图标品牌化时，可以直接使用品牌色使图标选中状态突出，比如Reads中的选中状态；也可以类似叮咚买菜中的使用方式，加入品牌渐变色的背景来突出图标的选中状态；也可以使用类似京东的方式，将选中状态下的图标改为面性图标，并使用品牌色进行填充。

2.提取品牌图形

品牌logo作为品牌最初的基本形象，是最被用户熟悉及记忆点的图形，在绘制一整套的图标时可以在图标中加入logo的元素增加图标的特殊性及品牌识别度。首页作为整个应用的功能集合展示页同时也是用户进入应用后看到的第一个页面，面对很多应用同质化严重的小房子图标设计，可以采用提取logo形状，放置于小房子的组合方式，比如多点app；另一方面也可以将logo直接作为首页图标使用，比如淘宝、nice等应用的设计方式。

个人中心作为应用中的常见功能，图标表现也面临同质化严重的问题，常见的比如淘宝或nice的设计表现形式。多点app的个人中心则使用与自己logo类似的水滴形的表现形式与其他图标区分；盒马与易车因为logo中使用了自己的IP形象，则使用IP形象作为首页及个人中心的图标形式。

首页、个人中心图标在设计过程中可以考虑直接使用logo作为图标表现，如果产品有IP形象的话也可以考虑IP形象作为图标的使用，不仅增加的图标的特殊性与品牌感，同时也增加了品牌的亲和力。

3.提取设计语言

除了对logo的使用外，需要对logo的设计细节进行观察及整理，提取可以使用的设计语言复用在图标的设计中，比如logo相对圆润的粗线条，图标的角度倾斜、多色的使用等等。

贝壳找房应用的logo中象征屋顶及屋身的半圆形并没有形成闭合，因此在贝壳找房的图标中全部采用断点的设计方式，而线条方面也采用较粗的线条；盯潮的tabber图标在选中状态沿用了logo的机械故障风格，与logo呼应；陌陌应用的tabber图标在使用圆形时，都采用了与logo的圆形相同的倾斜角度；马蜂窝除了使用logo作为首页图标，同时logo的圆弧组成部分一直贯穿所有图标的设计细节中。

4.提取产品气质

在进行设计前，我们可以对整个品牌进行风格特征及气质形象的提炼，转化为某种视觉语言，吸引产品的目标用户。比如腾讯动漫的内容及用户人群都是可爱、时尚的动漫爱好者，他的启动图标也是可爱的萝莉形象，因此在图标的整个设计属性使用了圆润的拐角、线条也是使用比较钝感的粗线条，另一方面所有图标都增加了可爱的表情元素，使图标整体都非常可爱、亲人，符合产品整体俏皮的气质；东家作为一款文玩、家具等国风类商品的销售平台，为了符合自己售卖商品的风格，图标是用拆解后的宋体汉字的笔画构成，极具东方古风气质；看理想作为一款艺术、文学类博客，不同于小宇宙更娱乐化的内容，在定位上更偏艺术性，因此在图标的形式及配色上也更艺术性，比如首页使用类似穹顶的外形，所有图标使用尽量贴近方形、圆形组合的形式。

5.拆分品牌名称

有些应用直接拆解自己的品牌名作为tabber的图标使用，比如MONO就是将他的产品名字作为对应产品模块的图标使用，可能你会疑惑这样的图标其实并没有起到图标传达信息的作用，是的因为在MONO的tabber图标采用的图文结合的形式，因此这里的品牌名形式的图标更多的是作为一种品牌传播去使用，而真正作为tabber分类说明的则是底部的文字，没有任何图标说明的准确性能高于文字。MONO是一款针对年轻人的内容类产品，这款应用的这一设计方式对于追求特色的年轻人，不但不会觉得奇怪，反而会对这样的设计津津乐道。

6.对品牌展开联想

由于各大产品同类产品功能同质化，图标的隐喻表现也同质化严重，但还是不乏设计师新奇的思维设计出有趣且具有品牌性的图标，比如多抓鱼的卖东西图标，多抓鱼的IP形象是条鱼，而卖东西则使用猫抓递钱的形象，与其他商城等图标不同的同时也与多抓鱼的IP产生联想，增加了趣味；之前的马蜂窝的首页虽然也是房子的概念，但基于马蜂窝的品牌名，使用的是代表蜜蜂蜂巢的六边形，准确传递信息的同时，与品牌产生间接联想，别具设计感。

在设计图标的过程中想要与其他产品的同样功能图标拉开差距，需要我们不断深入研究品牌的视觉规范，赋予图标品牌基因，才能做到图标的独特性与设计感。

当所有的图标完成设计后，需要最后放在一起进行整体话的调整及优化，这时候我们需要观察是否所有的图标都足够的清晰、简洁与美观。如果其中的某一个图标不符合时，需要根据实际情况进行调整或重新设计。

1960年美国海军提出“大多数系统如果保持简单而不是复杂，则效果最佳”，这就是传说中的kiss原则。设计的简洁应该是设计的主要目标，并且应该避免不必要的复杂性。同样的极简主义中也一直强调的“达到完美的目标不是没有剩余可添加的东西，而是没有剩余可去的东西”。在图标完成最终前，需要对照以下两个原则，确保当前图标已经没有可以删减的部分。

1.图标的颜色数量；图标使用的颜色不超过3-5种，保证图标颜色的干净简洁。

2.图标的细节数量；图标设计细节只需要保留关键的设计特征，其他装饰性的细节则应尽可能的去除。

3.避免细节重复；如下图中当某个元素出现在一个图标上似乎没有什么问题，但当这个元素出现在一套图标的绝大部分图标上时，这一元素就会成为重复细节，对用户的注意力造成干扰，删掉他们，减少对用户视觉的干扰。

最后一定要确认所有的图标都是简洁、美观的，才是完成了对图标的绘制。

图标绘制完成后为了确认用户在使用过程中能够快速的理解图标的含义及目的，我们需要在产品开发期间的各个阶段对图标进行多种类型的测试。

参考图标的设计原则我们得到图标可用性测试的原则标准：

1.识别度：用户是否能够理解图标的含义？是否是用户熟悉的图标？是否与其他图标含义冲突？是否能通过5秒原则？图标的可扩展性怎么样？是否需要增加文字标签？
2.设计是否统一：视觉大小是否统一？视觉语言是否统一？图标的设计复杂程度是否统一？整体设计是否协调、统一、视觉体系高度集中？图标整体配色是否统一？
3.品牌信息：图标是否独特性、能否传递品牌信息？
4.简洁：图标是否简洁、美观，没有多余的细节？

对照图标设计原则进行测试，当符合这些标准时，才能成为一个合格的图标。如果出现不符合要求的图标，需要考虑怎样进行设计完善及修改。

图标可用性测试的主要有两种：独立于页面之外进行测试以及放置页面中进行整体页面的测试。

当需要测试图标的识别性时，需要将图标放置在页面之外，看在没有页面信息及文本标签时，用户能否理解图标的意思及背后代表的交互意义。如果用户猜测与图标要表达的内容无关，则需要考虑重新进行设计。

你可能认为有文本标签的图标，文本标签可以引导用户图标的操作，虽然会有类似MONO应用标签的情况，但这种情况并不提倡，因为用户在实际使用时会忽略文本标签而只看到图标。因此还是建议，在图标的识别性测试方面使用不带文本标签的测试环境。

设计统一性则建议放置在页面中进行测试，图标显示在他的使用环境——完整界面。可以确定整个图标的设计是否与整个页面的设计和谐、统一。另一方面放置完整页面也可以观察图标在整个页面中时能否容易被用户找到的，或某个特定功能对应的图标能否被用户找到。

A/B测试也是不错的测试图标可用性的方式。通过图标的A/B测试，一定比例的用户可以看到页面上的一个版本的图标，而另外一定比例的用户可以看到另一个版本。可以通过衡量两个图标版本之间的交互率差异性，或者用户是否由于点击图标后失望、困惑点击返回原始页面来测试图标传递的信息是否精确、符合用户的心里预期。A/B测试时，请确保两版图标的位置、大小及标签相同，保证没有其他的变量影响用户发生行为变化。

图标绘制完成测试过程中或完成测试后，需要交付给前端或其他同事。一般情况下有JPG、PNG、GIF、SVG四种交付格式。其中JPG、PNG、GIF为位图，受图片本身的分辨率大小限制，无法灵活的修改尺寸。而SVG为矢量格式，支撑无损缩放。在没有SVG前因为要考虑到适配高清设备，需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能，比如蓝湖。