ICON｜设计指南

ICON 在设计中看似只占一个很小的区域，但是它却是考验设计师基本功能力的重要一项，在工作中我们经常会接到关于 ICON 的需求设计，那我们在设计的过程中是否经过了完整的思考，我们对于它的了解有多少呢？怎样才能设计符合产品定位的有特色的 ICON 呢，今天我们就来聊聊“关于 ICON ”的那些知识。

ICON的定义

提到 ICON 明确的定义，搜索结果告诉我们，ICON 指有明确含义的图形视觉语言。这告诉我们它的首要目标就是代替文字，用图形化的语言来传达信息。但是这个定义会让我们容易与 LOGO 相混淆，那如何区分 LOGO 和 ICON 呢？他们虽然都是图形化的语言，但是 ICON 重在展示功能，它是功能识别图标，而 LOGO 主要传达的是身份信息属于身份识别图标。

应用场景

在日常生活中 ICON 的应用应该是非常广泛的，我们随时可以在各个地方看到 ICON 的存在，例如我们熟知的界面设计中，还有日常生活的指示牌上等等，我们可以把这些场景归为三类，图形界面，产品表面和日常交通指示。

ICON｜设计指南

图形界面，就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等...产品表面，常见的电器开关按钮、易碎品标识、USB接口图标等。日常交通指示图标包括：地铁交通指示标、卫生间图标、安全出口…想必这些大家应该都很熟悉，在日常生活中我们接触到的 ICON 比比皆是。

界面图标

界面图标的发展风格可以归纳为从拟物图标过渡到2.5D图标再到扁平图标，到现在的微扁平，微拟物的发展过程。

ICON｜设计指南

拟物图标

由于人们都是通过以往的认知来理解新事物，所以基于这一点，当时应用界面必然要采用拟物风格，以便于人们的理解和操作。

ICON｜设计指南

但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代，2.5D 图标就是在拟物图标和扁平图标中的一个过渡风格。

扁平图标

ICON｜设计指南

2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。

ICON｜设计指南

扁平图标风格发展到后期也随之带来了一些问题，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。

微扁平、轻拟物

从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

界面中的图标分类

界面中的图标可以分为功能性图标和产品图标两类。产品图标可以体现整个产品的特性和风格，有时通过产品图标我们可以直观的感受到这个产品的主要功能。功能性图标则向我们传达了一定的含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。

ICON｜设计指南

功能图标风格

在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。

ICON｜设计指南

线性图标

ICON｜设计指南

面性图标

ICON｜设计指南

线性图标

线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。

在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。

线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。

ICON｜设计指南

面性图标

面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。

功能性图标位置

功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。

ICON｜设计指南

1.标签栏

标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。

ICON｜设计指南

2.导航栏

导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。

ICON｜设计指南

3.金刚区

金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。

ICON｜设计指南

icon中的品牌感传递

当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。

ICON｜设计指南

1.吸取品牌色

每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色——黄色和黑色。Keep 应用的图标也提取了品牌色——蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。

ICON｜设计指南

2.提取品牌元素

除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。

ICON｜设计指南 ICON｜设计指南

3.运用吉祥物

现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。

ICON｜设计指南

4.品牌图形

品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。

ICON｜设计指南 ICON｜设计指南

icon 的评判标准

我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。

我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。

ICON｜设计指南

1.识别性

图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。

ICON｜设计指南

含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。

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

2.规范性

规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。

ICON｜设计指南

a.视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。

b.饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。

c.同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。

d.细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。

3.整体风格

整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。

4.品牌感

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

ICON｜设计指南

总结

在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。