图标在生活中是随处可见的，如交通标志中的下坡提示标（左图），或者是公共场合禁止抽烟的提示标（中图），又或者是停车提示标（右图）等，如图所示。
相比文字来说，这些图标可以让人在更短的时间内认知并了解信息，并且可以大大提升信息的视觉美观性。
从人机交互的角度来说，使用图标比使用文本更具有优势。因为图标简单、醒目且友好，同时在界面的一些空间较小的位置，图标可以代替一段冗长枯燥的文字描述，并增加设计的艺术感染力；在用户界面中使用图标，是一种用户熟知的设计模式。
尽管图标有这些优点，但如果不考虑其一些负面影响，可能会导致出现一些不可用的问题。
例如，在一些敏感位置使用识别度不高的图标，可能会造成用户的误操作。同时，图标放置位置不合适，或者风格不统一，也会给用户造成一些不良感受。
下面数艺君将较为系统地讲解一下各种图标的绘制方式与应用场景。
1
App图标
应用图标带给用户对产品的第一印象。从某种程度上来说，用户可以通过应用图标判断出一款产品的好坏。一个好的应用图标应该能清晰地传递出产品的内涵。
应用图标的常见设计形式：
应用图标的设计形式较多样，包括抽象图形、文字、卡通形象和功能图形的运用。
（1）抽象图形的运用
随着设计行业的不断发展，拟物化图标逐渐消失，取而代之的是扁平化图标。扁平化图标通常由抽象元素制作而成，虽然看起来简单了，但其实对设计提出了更高的要求。
例如，“QQ音乐”与“网易云音乐”的音符图形（左一图和左二图），“微信”的聊天气泡图形（左三图），以及“墨迹天气”的云朵图形（左四图）等，如图所示。
在应用图标设计中，运用抽象图形的优点是可以让用户第一眼看到图标时就知道这大概是一个什么产品，并且使得品牌具有独特性；
运用抽象图形的缺点是对设计要求较高且设计难度较大，一旦图形被设计得太过抽象，就会降低产品的识别度，并且无法使其很好地与其他图标区分开来，质感较差。
（2）文字的运用
用户对汉字的敏感程度远远高于图形。因此，如今越来越多的产品开始使用文字来设计应用图标了。在使用文字设计应用图标时，一般会选择产品名称中具有代表性的文字，并且会通过对字体笔画做出一些变化，使得图标能够与产品的属性相融合。
一般来说，品牌名称不超过3个字的产品，都适合采用此类设计形式进行图标设计，如“淘宝”图标（左一图）、“知乎”图标（左二图）及“闲鱼”图标（左三图）等；而针对品牌名称超过3个字的产品，最好筛选具有代表性的文字作为图标，如“字里行间”图标（左四图）等。如图所示。
在应用图标设计中，文字运用的优点是可以让用户更好地记住产品；文字运用的缺点是品牌延展性较差。在营造产品格调时，文字图标相比图形图标来说难度要大一些，并且对于一些较为小众的产品来说，仅通过文字是很难清晰地传递出产品的属性的。
（3）卡通形象的运用
随着各大主流产品吉祥物的出现，很多品牌商索性把吉祥物的卡通形象融入应用图标的设计中，如“京东商城”的卡通小狗形象（左一图）、“转转”的卡通小熊形象（左二图）、“美团外卖”的卡通袋鼠形象（左三图），以及“斗鱼直播”的卡通鲨鱼形象（左四图）等，如图所示。
在应用图标设计中，卡通形象运用的优点是可以让产品更具情感，相比抽象的图形和纯粹的文字运用与表达来说，会显得更亲切一些。卡通形象运用的缺点是视觉上较容易与其他同类图标产生雷同的情况。
（4）功能图形的运用
针对一些体量较小且功能性较单一的产品，为了更清晰地传递产品属性，设计师可能会直接根据功能需求来设计出相应的功能图形并运用到图标中。例如，iOS 系统自带的计算器应用图标（左一图）、“秒拍”的相机图标（左二图）、“高德地图”的图标（左三图），以及“360 日历”图标（左四图）等，如图所示。
在应用图标设计中，功能图形运用的优点是可以强调工具属性，减少用户认知成本；功能图形运用的缺点是针对一些功能体量较大的产品，很难通过一个功能图形将产品属性信息传递清楚，而且不容易表现出与同类产品图标的差异化。
应用图标的设计技巧及注意事项：
（1）简洁的设计元素
应用图标在手机屏幕中的显示尺寸仅为120px×20px，甚至有的情况下图标显示的尺寸还会比这个尺寸更小。因此，在设计应用图标时要做到尽量简洁，避免小尺寸展示时出现不清晰甚至无法识别的情况。同时，简洁的效果也能从一定程度上提升图标的质感。
如图所示，“QQ音乐”图标（左图）与“饿了么”图标（右图）设计元素都非常简洁，即使缩小也可以看得清结构。
（2）设计语言符合产品性格
应用图标能带给用户对产品的第一印象，所以应用图标的设计语言一定要符合产品的性格。
如图所示，“抖音”的图标（左图）可以体现出产品青春、动感的性格，“ONE”的图标（右图）可以体现出产品安静、文艺的性格。
（3）不宜使用照片
在应用图标设计中，应尽量避免直接使用照片。因为图片缩小后很多细节都不容易看清，如此会影响图标的识别性。同时，由于图标缩小后图片质量也可能会降低，因此对图标的质感体现也会有影响。
（4）明亮鲜活的色彩
iOS10系统人机界面指南中阐明了其色彩搭配的一些规范，其内置的应用程序选择使用了一些更具个性的、纯粹的且干净的颜色。
例如，iOS系统内置的“图书”应用图标使用的是橙色，“天气”和“视频”应用图标使用的是蓝色，“健康”应用图标使用的是粉红色等，都从一定程度上体现了产品的功能应用属性，更方便用户区分，如图所示。
2
APP功能图标
功能图标的样式有很多，作用也各不相同，在具体设计时要基于不同的应用场景选择不同属性的图标。
同时，由于不同图标所表达的意义不同，其样式、复杂程度及大小也有所不同。功能图标可以让界面充满设计感，且通过图形化的设计让用户浏览界面时效率更高。
功能图标的设计原则：
（1）预见性
功能图标存在的最大意义是提高用户获取信息的效率，因此功能图标要做到即便是脱离文字，也可以让用户通过图标了解入口的属性。如果制作的图标只是好看而失去了识别性，就有些本末倒置了。
一些比较抽象的图标很难让用户一眼就识别清楚，在优化过程中，设计师可以进行相关元素的联想，然后将它处理得尽量贴合表意。
当然，针对有些以文字为主的装饰性图标，就不需要这么强的识别性了，但也要贴合文字内容主题去进行设计。如图所示，以图标为主的功能入口一般设计得较为清晰和直观，而以文字为主的功能入口则会设计得较为简单、抽象一些。
（2）美观性
针对功能图标的制作，在保证识别性的前提下，要尽量做到美观。单个图标的美观呈现除了靠造型与配色，更多地体现在细节处理上。这里讲几个比较重要的细节。
如果将一些复杂的图标放在不重要且面积较小的位置，会很难被识别，也就无法达到美观的效果了；如果将一些太过简单的图标放在主要功能入口，会显得粗糙。因此，将不同样式的图标放置在合适的位置，才能达到美观的目的。
以“虾米音乐”为例，其主要功能入口的图标稍显复杂，而个人中心页的图标则较为简单，如此既表意明确，又使得界面整体看起来美观，如图所示。
这里还需要注意的一点是，在设计线性功能图标时，注意切忌用反白的方式。因为线条无法压住大面积的色块，同时在有底色的背景上放置线性图标，也可能会使图标看起来粗糙。线性图标和面性图标使用反白效果对比如图所示。
（3）统一性
在一个产品中，功能图标的数量往往较多，因此图标的统一性就显得尤为重要。统一的图标可以提升产品的品质感，并且同一属性的图标如果保持样式上的统一，可以降低用户认知成本，提升用户的使用效率。
在功能图标设计中，要先保证同一属性的图标从风格、视觉大小、粗细、端点、圆角、复杂程度及特殊元素上实现统一。
风格上的统一很好理解，因此不做过多描述。对于视觉大小的统一而言，人的视觉是有误差的，因此有时完全保证两个图标的统一，在视觉上却并不一定协调。下图所示为两个高度相等的图形，我们看上去却会明显感觉到左边的正方形要大一些，而右边的圆形要小一些。
基于以上分析，在进行系列图标设计时，可以考虑将矩形稍微调小一些，或者将圆形稍微调大一些，使两者在视觉上看起来大小统一，如图所示。
粗细统一、端点统一和圆角统一是细节上要留意的点，基本上没有难度。例如，针对同一表意目的的两个线性图标，如果一个图标的描边粗细是1pt，那么另外一个也要保持1pt才行。
端点统一与圆角统一也是同理，针对同一表意目的的两个线性图标，如果一个图标的端点采用了圆角样式，那么另外一个也需要采用圆角样式，如图所示。
复杂程度的统一指同一组图标内细节程度的统一。针对同一表意目的的功能图标，如果其中一个图标细节丰富，并且轮廓清晰，那么整组图标都要保持这样的细节程度才行，如图所示。
很多设计师在设计图标时，喜欢加入一些特殊元素，以此达到塑造产品性格并烘托产品气氛的目的。针对同一表意目的的功能图标，如果其中一个图标添加了这种特殊元素，其他图标都要添加才行，如图所示。
以上讲述的是同一表意目的的图标设计需要注意的原则。针对不同表意目的的图标，就不需要过多地强调细节上的统一了，迎合整个产品的性格即可，如“唱吧”等偏娱乐化并且目标用户多为年轻人的产品，如图所示。
功能图标的表现形式及适用场景:
（1）线性图标
线性图标是通过提炼图形的轮廓，然后简单勾勒而成的图标，线条描边多为1pt。线条描边越粗，视觉层级越高。由于线性图标视觉层级较低，因此多在同一产品内且功能入口较多的情况（如在未点击状态下的底部导航按钮和辅助功能按钮等）下使用，而很少在主要功能入口使用。下图所示为线性图标的使用情况。
线性功能图标不宜过于复杂，图标在界面中越小就越要简单，如图所示。一些功能入口图标在界面中所占面积可能较大，需要多一些细节才行，防止视觉上的单调。这种细节主要体现在端点、粗细线条结合及图形点缀等多种方式的结合处理上。
另外要注意的一点是，纯色线性图标适用于大部分常规的产品界面中，而多色线性图标更显活泼、年轻化，视觉层级较高，需要谨慎使用。多色线性图标如图所示。
（2）面性图标
在界面设计中，面性图标更容易吸引用户的视觉，一般常用于一些重要的快捷入口处。面性图标又分为反白图标和形状图标两种类型。
反白图标是指底部由图形背景托起的图标。一般这种图标层级较高，常用于首页界面中，并且一屏的图标数量不超过10个，如图所示。
形状图标是指没有底部背景，由纯粹的形状图形组成的图标，如图所示。这种图标应用较广泛，设计方式也相对固定。在设计过程中尤其要注意的是图形风格与设计语言的统一。
（3）线面结合性图标
线面结合性图标比线性图标和面性图标多了一些细节，视觉层级也更高，常用在功能入口、空状态及标签栏等位置，如图所示。线面结合性图标能突显年轻、文艺的视觉效果，对于属性较为稳重的产品界面设计来说不太适用。
3
常用的图标库
目前，由于互联网产品迭代较快，很多基础的图标并不需要设计师手动绘制，而是直接在网上的图标库*载下**调用即可。
如此可以为设计节省很多时间，让设计师有更多的精力去思考用户体验方面的优化。而其中使用最多的是“iconfont”（阿里巴巴矢量图标库），如图所示。
