这是一个图标知识的整理。
尽量在日常工作中梳理细节，总结经验。
走出自己的舒适区，更深入地理解每一个设计。
欢迎加入UI设计群：587751709
写在前面
图标在设计中看似只占很小的面积，却是考验设计师基本功的重要一环。在我们的工作中，我们经常会收到关于图标的需求设计。我们在设计过程中有没有完全考虑过，了解多少？怎样才能设计出符合产品定位的有特色的图标？今天我们就来说说关于“图标”的知识。
ICON的定义
参照图标的明确定义，搜索结果告诉我们，图标是指含义明确的图形视觉语言。这告诉我们，它的首要目标是用图形语言而不是文字来传达信息。但是这个定义会让我们很容易和LOGO混淆，那么如何区分LOGO和ICON呢？虽然都是图形语言，但ICON侧重于显示功能，是功能识别图标，LOGO主要传达身份信息属于身份图标。
应用场景
在日常生活中，ICON的应用应该非常广泛。我们总能在各个地方看到ICON的存在，比如我们熟悉的界面设计，日常生活中的标志等等。我们可以把这些场景分为三类：图形界面、产品表面和日常交通指令。
图形界面就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等.产品表面，常见的电器开关按钮，易碎logo，USB接口图标等等。日常交通标志包括：地铁交通标志、厕所图标、紧急出口……我想这些大家应该都不陌生，我们日常生活中接触到的图标无处不在。
界面图标
界面的发展风格可以概括为从拟像图标到2.5D图标，再到平面图标，再到现在的微平面、微拟像的发展过程。
拟物图标
因为人们总是通过过去的认知来理解新事物，基于这一点，当时的应用界面必须采用拟像风格，便于人们理解和操作。
然而，随着图标的发展，拟像图标也带来了一些问题，因为用户注意力的核心始终是信息本身。华丽的视觉元素在用户使用初期可能会起到赏心悦目的作用，但久而久之，这就会成为对用户获取信息的一种干扰。再者，大家熟悉的东西其实很有限，而APP的创新却在不断进行。很多创新产品本身在现实世界中没有参照物，这也决定了仿像图标必然会被取代。2.5D图标是拟像图标和平面图标之间的过渡风格。
扁平图标
2013年，苹果推出了iOS7，开启了仿品向平板转型的潮流。扁平化概念的核心是去除多余的装饰效果，也就是去除多余的透视、纹理、渐变等可以做出3D效果的元素，让“信息”本身重新凸显为核心。并在设计元素中强调抽象、极简和象征的概念。
后期，扁平化的图标风格也带来了一些问题。由于它们的表达方式过于抽象，缺乏情感传递，不被大众所青睐，这也说明UI的新趋势再次接近了“突出内容”的本质，即“认知简约”。
微扁平、轻拟物
从扁平化风格到现在，图标逐渐向略扁、轻拟像的方向发展。相对于拟像风格，没有太多复杂的视觉元素，扁平化风格有更丰富的情感内容，所以现在在界面中，我们在相对较小的区域使用扁平图标或者线形图标；在较大的区域，我们会使用带有渐变甚至浅色纹理的图标。
界面中的图标分类
界面中的图标可以分为功能图标和产品图标。产品图标可以体现整个产品的特点和风格，有时候我们可以通过产品图标直观的感受到这个产品的主要功能。功能图标向我们传达了某种
含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。
功能图标风格
在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。
线性图标
面性图标
线性图标
线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。
在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。
线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。
面性图标
面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。
功能性图标位置
功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。
1.标签栏
标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。
2.导航栏
导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。
3.金刚区
金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。
icon中的品牌感传递
当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。
1.吸取品牌色
每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色――黄色和黑色。Keep 应用的图标也提取了品牌色――蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。
2.提取品牌元素
除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。
3.运用吉祥物
现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。
4.品牌图形
品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。
icon 的评判标准
我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。
我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。
1.识别性
图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。
含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。
视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。
2.规范性
规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。
a.视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。
b.饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。
c.同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。
d.细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。
3.整体风格
整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。
4.品牌感
品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。
总结
在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。
