• 微表情尽显“内心戏”

• 赚了、亏了一目了然

• 戏剧化表达

 

 

 

一、图标是什么

图标在界面设计中，虽然很小，但是却是界面中重要组成部分之一。通过将显示物体图形化的形式，将功能本意高度浓缩成一个图标，再通过视觉隐喻更快地让用户理解功能，同时图形与文字相比，图形更加生动形象，视觉能力更强、更便于记忆，用户可以根据图形快速定位功能位置。而顺着时代的发展，图标不再仅仅以工具的形式出现，更多的起到装饰页面，也不断延伸出不同的图标类型与图标设计风格。

1. 工具层面

1.1 降低用户理解成本

图形与复杂的文字相比，更加简洁，相应的识别效率也会更高。图标可以将复杂的文字描述高度浓缩成一个图标，通过视觉隐喻的方式让用户联想到现实生活中的物体，更直观地呈现图标代表的功能，更快理解功能的意义

1.2 减轻页面负担

像一些通用常见的图标，如搜索、播放按钮、更多等，仅需要一个图标就能清晰地传递功能意义给用户，省文字的描述，节省更多的页面空间与阅读压力。

1.3 更快定位功能位置

图标与文字相比有更丰富的表现形式与颜色，所以视觉冲击也就更强，也能更快地被识别出来，当用户熟悉了产品后，只需要通过图标就能快速找到想要的功能，当功能位置发生变化时，不需再重新阅读枯燥的文字找到对应的功能，只需从图标形状、颜色上区别，找到对应的功能。

2.装饰层面

2.1 传递品牌调性

随着互联网的发展，同类型的产品越来越多，要在各个产品中突围，除好用的功能外还要有特色的外观。在图标中融入能代表产品品牌的符号，强化品牌调性，保持图标的独特性，给用户留下深刻的印象，一看图标就知道是哪个产品。

2.2 增强产品吸引力

如今用户对产品的要求除了要有好用、有用的功能外，还希望有更好的视觉享受。一组好看、有趣的图标可以带给用户更好的第一印象，增强产品对用户的吸引力。

2.3 渲染气氛

根据不同的节日或运营活动，设计相应氛围的图标，帮助产品渲染节日氛围或加强用户对产品主题运营活动的感知力度

二、图标绘制的基本原则

1.  可识别性

图标与文字在一定程度上起到相同的作用，都是通过特定的表现形式来传达某种信息给用户。顺着时代发展，图标的设计更精细化，产生了更多的设计风格，但图标的本质还是没变的，是用户进入功能的入口。因此，一个能被用户快速识别、快速理解的图标相当重要，是图标设计的基本要求。我们绘制图标时要尽量去掉辅助、无用的元素，保留最清晰、直接、有代表性的元素。

2. 风格统一

设计师在设计图标时，除了会根据产品类型、用户群体、品牌调性等因素决定使用哪种图标风格外，还要根据图标的具体使用位置，因此在一个产品中，常常会出现多种风格类型的图标，而风格统一指的是在某个特定功能模块内的图标风格要保持一致，是面性的图标就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小统一

圆形、正方形、三角形，在这三个图形虽然高度相同，但是整体上三个图形的视觉重量并不相同。在实际的操作中，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个方向缺得越多，就往那个方向移动一点。

4. 色彩统一

色彩的统一指的是图标色彩在饱和度与明度上保持特征统一，数值在一定的范围内发生改变；而在色相的选择上保持匹配度，像一些单色系的图标，通常使用的都是产品的主题色，而多彩图标，常会以主题色为主，拓展出临近色、相似色、对比色，目前市面上大多数的图标颜色会使用同类色与邻近色。对于饱和度与明度的调节，我通过利用灰度模式进行辅助，使图标视觉更统一柔和，不会出现其中一个亮眼或暗沉。

5. 占比统一

5.1 正负形占比统一

正负形的合理使用是图标能否传达准确意思的关键，因此也是常会出现的组成元素。在绘制图标的正负形，注意保持占比统一，其中某个图形正负形太大或太小，会显得突兀、别扭，失去统一性，界面整体质感会大大降低。

5.2 颜色占比统一

在绘制图标时，确定图标中的主色和辅色，绘制时尽量保证主色和辅色占比相同，保持图标的统一性。

6. 疏密统一

有规律地将线条组织在一起，利于形成统一的视觉风格。同时，线条间可以保持一定的留白，不需要太密集，太密集的线性图标，缩小后反而会影响识别。同时，给图标留出一些空间，使线与线之间不会太挤，增强图标的呼吸感。

安利一个国外的图标大神Myicons✨，简单的线性图标一样可以很精致。

三、不同风格的图标

目前市面上的图标主要有四种类型，分别是：线性图标、面性图标、写实拟物图标和三维立体图标。而不同的图标中组合的元素都会有一些差异，相同类型的图标中也会有不同的图标风格。

1. 线性图标

线性图标主要还是由线性组成，设计师可以通过改变线的粗细、线的端点、圆角大小或加入一些面性元素在里面来使线性图标更加丰富、有趣，但整体来说纯线性图标更纤细、简洁，使得视觉冲击力稍微弱了些。

1.1.1 单色

单色是线性最基础的表达方式，这种设计风格单调、视觉冲击较差，但是制作难度低，设计所耗费的时间页更断，因此常常会出现在个人中心页中，仅需要有图标显示功能入口，设计要求并不高的功能模块中。

1.1.2 双色

双色图标与单色图标相比，视觉冲击力更强，应用范围更广，通常会融入品牌主色，是除了线面图标外出现在首页中的线性图标。因为双色图标可以加入品牌色，增强品牌感的同时，使图标增加了设计感，不会像单色图标那么单调乏味，因此双色图标也会以“次要功能”的形式出现在首页当中。

像在“去哪儿旅行App”和“平安银行App”中，页面已经存在一组视觉冲击、视觉层级更高的一组面性图标，但是因为业务需求露出更多功能入口，因此就可以使用线性图标这种视觉冲击力弱一点的图标搭配，既不会抢走主视觉，也能满足业务需求。

1.1.3 断点图标

断点图标在目前的app图标设计上较少使用。虽然断点风格图标在表达上有一定的局限性，但是图标设计感更强，图标更有趣味性。

断点图标并不是随便删除某个描点，在断点的位置选择上和断点的大小都是要注意的地方。断点位置的选择要注意两点：

1 ) 保持相同角度，能更好地增强图标的协调性，避免造成图标的视觉混乱降低用户的视觉体验。

2 ) 选择在线的拐角处，利用连续性原理，在一定的路径下使这种线的断裂保持视觉连贯性，保持图形整体性。

1.1.4 线面结合

在原本的线性图标上加入色块，就会产生新的设计风格--线面图标。线面图标比较特殊，图标的视觉层级会随着图标中包含的色块大小而变化，色块越大，视觉冲击力也越强。因此在设计线面结合图标时，要先确定图标在该页面中的重要程度，如果是主要功能则将色块的占比加大。

1.2 线的影响

图标中的线主要由两个元素组成，一个是线的粗细，一个是线的端点，而这两个元素也是主要控制线性图标的性格。以常用的48px图标盒子为例，常用线的粗细有2px、3px、4px，图标的线越粗图标越有力量感反之图标越纤细；而图标的圆角越小时图标越稳重、专业，像一些办公软件、金融产品，图标的圆角就比较小。圆角越大图标越饱满亲和力更强，像一些儿童学习类软件就会使用大圆角的图标设计。

因此，图标的线粗细与圆角大小，都根据不同产品类型与目标用户确定。而大多数线性图标主要有四种基础造型：纤细+小圆角、纤细+大圆角、粗描边+小圆角/无圆角、粗描边+大圆角。

1.2.1 纤细+小圆角

精致、严谨，多用在银行、新闻类APP。没有圆角，会使图标更加尖锐，对于银行类APP会给人一种威胁，但是太大的圆角，显得有点轻浮、可爱，不符合银行庄严的感觉，所以稍微添加一些圆角，使图标更有亲和力的同时，也保留一些庄严的感觉。

1.2.2 纤细+大圆角

更加精致、有亲和力，这种风格是目前市面上软件使用得最多的一种线性图标风格。

1.2.3 粗描边+无圆角/小圆角

粗旷、个性、有很强的力量感。更多的用在运动、汽车这类主要用户倾向男性的软件，同时也会在一些潮流类电商软件中出现，凸显更有个性的设计风格。

1.2.4 粗描边+大圆角

圆润、可爱、亲和力强，常用在偏向儿童的产品

2. 面性图标

面性图标时软件使用的最多的一种图标类型，设计师通过改变色块、图形圆角、正负形和底托等元素，让面性图标呈现不同的设计风格，但无论是哪种设计风格，面性图标设计冲击力相比面性图标更强，因此市面上大多数核心功能都会用到面性图标来提高功能的设计层级，让功能在页面中更加突出。

2.1 扁平风格扁平风格的图标常为单色图标，图标整体没有渐变、高光、阴影等装饰性设计效果，因此更加简洁，更突出功能本身，图标功能性更强，图标制作成本低，曾经也是风靡一时。但扁平风格的图标缺少亮点与制作成本的原因，导致图标同质化严重，缺少特点，很难被人记住，因此现在很少被使用。

2.2 渐变色块

在扁平风的基础上，在色块上添加渐变色，在保留了扁平图标的功能性外，使图标色彩更加丰富，在不同类型的软件中都可以使用这种风格，算是一个比较百搭的图标风格。同时渐变色块也是很多面性图标的组合基础，在渐变色块这个基础上还可以添加不同的效果形成不同设计风格。

在设计渐变色块风格的图标时要注意两点：

1 ) 市面上的app都会选择同类色作为渐变色，然后通过改变颜色的饱和度，使渐变色的明亮对比更加明显的同时，颜色过渡也更加柔和舒服，使图标更有通透感，增加视觉冲击力。

2 ) 在设计这种有白色色块在顶部的图标时，可以给色块添加一个浅浅的透明渐变，让色块过渡自然一些，同时也可以添加一层浅浅的阴影，增加层次感。

2.3 图层叠加

图层叠加风格的图标看上去像两个透明图层叠加在一起的感觉，图标层次感强，细节也更加丰富，图标风格更新颖、更年轻化，因此如果在设计一个年轻人使用或者希望打造年轻化页面感受的时候，可以尝试使用图层叠加风格。

绘制图层叠加风格的图标时要注意：

1 ) 重叠在一起的那个色块是通过布尔运算得到的，并不是通过简单的透明图层得到的。而重叠在一起的那个色块也不宜过于显眼，毕竟看的是图标的整体。因此可以参考一下“智行火车票”，通过改变饱和度5%到10%和使用15%左右的同类色，就可以让用户看得清图标的变化，同时也不会是色块太突兀影响观感。

2 ) 尽量统一叠加部分图形与图标之间的占比。

2.4 毛玻璃

毛玻璃是近年最火的一种设计风格，不仅设计风格新颖、特别，而且还有很强的质感表现，因此不仅在金融产品，还是生鲜产品或票务产品，都有毛玻璃风格的图标。

而在设计毛玻璃图标时，里面也有很多细节需要注意：

1 ) 背景模糊效果不需要太大，有一种若隐若现的感觉就可以。如果调太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的图层不需要用纯白色。像百度这种同类色配色的毛玻璃图标，只需要将图标的主色调低饱和度后，就可以使用。这样的好处是不仅让图标颜色过渡更加自然，同时有更多的组合方式、更多的层次。

3 ) 使用边缘光。毛玻璃图标有很多相互重叠的图形，如果重叠的图形颜色相近的话，图形边缘就会被弱化，使用边缘光可以明确图形边界，增加层次感。同时使用边缘光，还可以为图形塑造类似玻璃的厚度，细节更加丰富。

2.5 晶白风格

晶白类图标利用圆角正方形或圆形作为底托再在上面添加一个主色为白色的图标，然后通过调节透明度、投影、渐变给图标添加一些质感，是常见的图标风格，也是使用了很久的一种设计风格。

后面也延伸出了另一种设计风格图标主题通常不会是统一的造型，像喜马拉雅这种图标，图标本身元素复杂、细节较多，形状也更加不可控，因此用一个浅色圆形底托，将他们统一起来。不仅可以将复杂的图形统一起来，还可以添加吸引人眼球的渐变色更好地增加图标的视觉占比，有更强的视觉冲击感。

在绘制晶白风格时，注意两点：

1 ) 可以适当改变底托图形的形状，增强差异化。

2 ) 统一光源，越白的地方越亮，注意控制好透明度的变化与角度。

2.6 实物展示

这类图标会出现在生鲜类、药品类、潮流电商类产品中，因为使用图标很难将这些类型概括起来，直接使用图片展示更加直观，但因为图片细节、元素更多更复杂，如果使用太多会使图标看起来很杂乱。

3. 写实向图标

写实向图标模拟现实中的物体，更贴近生活，用户对这类图标理解能力也更强，绘制难度也更高，绘制时间也更长。写实向图标除了基本的色块组合、颜色搭配外，还有更多的透视与光影来增强实感。常常用在运营设计上，或用在一些特殊界面模块从而增强视觉层级。

3.1 轻拟物图标

轻拟物图标是最近很好的的设计风格，但是轻拟物图标出现在界面设计上还是比较少的。因为轻拟物图标元素比较复杂，视觉冲击力强，放在界面上有可能抢走用户对核心内容的关注度，通常会运用在运营设计长图、弹窗、核心功能等。

而绘制轻拟物图标，主要注意的是光影的打造。光影主要由这几个元素组成：亮面、暗面、明暗交接线、反光。在绘制轻拟物图标时，主要注意以下几点：

1 ) 在绘制轻拟物图标时，不一定需要使用统一色相中的颜色，可以通过改变颜色的饱和度明度的对比和冷暖色的对比来营造光影，使图标色彩更丰富、对比更明显。

2 ) 反光可以使用图标主色的对比色，降低饱和度，提高明度，运用在轻拟物图标边缘，使边缘更更清晰，不会糊在一起，图标整体立体感更强。

3 ) 明暗对比越明显，轻拟物图标越显通透、立体。

3.2 2.5D图标

2.5D曾经是很火的一种设计风格，但是现在已经逐渐被轻拟物与建模替代。2.5D图标固定展示了三个面，有很强的立体感，常常运用在科技类的网站设计中。

在绘制2.5D风格图标时，要注意：

1)统一好图标的厚度。

3.3 3D图标

随着时代进步，3D逐渐成为一个主流的设计风格。通过专业软件给予了图形材质质感、真实的光影，更加贴近生活真实物件，同时还可以配合动效的设计，有很强的视觉冲击力和新鲜感。常常出现在网页设计中、运营设计中。目前绘制3D图标主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉满；Blender则是完全免费的软件，目前热度也是疯狂涨，在渲染方面虽然没有oc好，但是还是可以满足日常工作。

而在绘制3D图标需要注意以下几点：

1 ) 统一主光源方向。建模里面会出现很多打光类型，如主光、辅光（有时不止一个）、边缘光等。

2 ) 统一摄像机位置。摄像机与物体的距离、角度影响渲染的最终效果。

3 ) 用数值定义物体大小。建模软件不像绘图软件那样强调物体的数值大小，拉远看物体就是小，拉近看就是大，做一个物体时还好，但是要做一组3D图标时，就要定义好物体的大小，使图标更加统一。

四、如何确定使用哪种类型的图标

不同风格的图标有着不同的特点，设计师要根据图标放置位置和功能选择图标类型。其中最有决定性的因素就是图标的重量，而影响图标重量的因素有：占比、颜色、细节元素。线性图标在界面中占比较少，因此看起来会更加简洁，视觉冲击力弱，常用在重要程度低，不需要突出展示的功能上；面性图标占比更高，视觉上会更加饱满，同时颜色色块使图标更加显眼，视觉冲击力得到力增强，使用户对图标的感知力更高，是最常用的图标类型，用在各个重要功能入口上；轻拟物和3D图标除了占比高、颜色丰富，还有各种光影、材质的细节，图标元素更多，视觉冲击力也更强了，也因为图标复杂、视觉冲击力强，因此很少出现在界面上，通常运用在一些特殊运营入口或需要吸引用户的大模块中。

不同的类型在界面中也会搭配出现。

五、图标的绘制

1. 图标盒子

图标盒子是辅助绘制图标的一个工具，帮助设计师在设计图标时更好地规范好各个图标的尺寸大小。而图标盒子也有很多种，我最常用的是48*48px，这个尺寸对于线条的控制比较方便，通常用1px、2px、3px。

工具始终都是工具，界面图标不会由单一的形状组合，所以形状各异导致每一个图标的视觉体积都会有所区别，因此不能单纯地利用统一的宽高或线去界别图标的大小，要根据图标的的特征去判断。在平常的设计中，我通常会利用正方形来辅助图标绘制，在保持形状特征下，让正方形内的区域占满，哪个地方缺得越多，哪个地方就拉伸一点。

2. 图标的绘制方法

图标中会存在标准化图标，像删除就是一个垃圾桶、像首页通常是一个家的图标、还有搜索则是放大镜的图，照片是两个山一个太阳，这些图标都习惯以这种表达方式出现，用户已经习惯了这种表现形式，因此对于标准化图标，尽量维持以往的变现形式，让用户更好地理解图标意思。

非标准化图标可以细分为具象与抽象，对于具象类图标，现实中有实物可以参照。这类图标的设计较为简单，可以在某度上寻找相关照片，根据实物的造型进行提炼和简化。

抽象图标则较为复杂，通常是某些特定行为的名词，没有具体直接的参照物。因此在设计前，我们要先充分理解功能本身，这个功能是什么、用户怎么用，然后提炼关键词，接着根据关键词发散思维，寻找相关联的图形来表示含义。例如“社区”功能，功能目的是提供一个让用户互相交流的环境，同时吸引无目的的用户逛起来发现感兴趣的话题，让更多的信息流得到曝光从功能目的中提炼一下关键词：聚在一起、发现、交流。接着发散思维进行脑暴，聚在一起：一群人-圈子-同一个世界的人-星球，发现：看-眼睛；寻找-望远镜-雷达-指南针，交流：聊天-聊天气泡-声波。

六、图标的使用场景

图标运用在功能入口上是最基础的使用场景之一，如首页中的金刚区、个人中心都会用到很多图标作为功能入口。

1. 金刚区

目前国内的APP包含的功能有很多，而金刚区的作用就整合产品功能并放置在首页中，提高这些功能的曝光量，给其他功能引流，让更多用户知道或使用上产品功能，增强用户对产品的粘性。像美团，很多人对他的了解是一个外卖工具，但它里面还有很多其他功能，使用金刚区展示它多元化的服务。

金刚区图标通常会有1～3行，根据业务具体需求做调整，在每行中会有4～5个图标。尺寸范围一般在40px～48px左右（@1x），同时会根据具体的业务需求，调整大小，最终都是一预览效果为准。

2. 个人中心

个人中心是个人类型功能、运营活动入口和工具的集合地，是除了金刚区外，含图标最多的一个地方。个人中心中包含很多不同类型的功能，可以使用卡片式的设计，将功能图标更好地分类。在图标风格的选择上，个人类型功能是最重要的功能，通常会以面性风格放置在顶部，如果个人中心中需要展示运营入口时，需要减弱个人类型功能图标的视觉冲击，会使用线性风格图标。

3. 运营入口

运营入口主要作用是让用户点击后跳转到产品活动页，因此具有强视觉冲击力的图标，会更吸引用户眼球，从而提高点击运营入口的机会。

因此运营入口上，通常会使用面性图标、写实向图标或3d图标。因为写实向图标或3D图标可以提高视觉层级，因此经常运用在主要运营板块上，而面性图标相比下较弱，当页面已存在一个主视觉或主要功能时，运用在运营板块上。

4. 主题板块

在软件中会有很多不同主题的信息板块，同时信息板块间有较大的差异，如果全部展示出来会使页面样式不同统一、信息混乱导致降低用户的阅读体验。因此使用主题板块，将不同主题信息集中在一起，然后露出部分关键信息在页面中，保证视觉统一的同时，还可以起到流量分发的作用，让用户在茫茫信息流中快速找到自己感兴趣的方向，提供用户阅读体验。

纯文字的排版在信息流中略显枯燥，而图标在主题板块中起到润色主题的作用，渲染主题气氛，提高不同主题板块的识别度与差异化。对于一些长标题的主题板块，只需要记住图标就能快速定位主题板块位置。

5. 底部tab栏

底部tab栏功能数量通常在2～5个，在设计时，要设计点击前和点击后两个图标状态，同时帮助两个状态是有明显的变化。底部tab栏图标大小通常在22px（@1x）左右，而图标底下的文字时10px（@1x）。底部tab栏作为最常出现的区域，是传达产品品牌感、提升产品辨识度、记忆点的重要区域，很多产品都会在底部tab栏的图标设计上加入品牌元素，增强辨识度。

七、如何提高图标设计能力

1. 阶段一：临摹

临摹是人类学习一个新技能开始，就像婴儿学习父母说话一样。但是一开始很多都不会临摹，或者照着画也不会，那我们应该如何去做？

1.1 临摹效果不佳

1 ) 提高审美能力，多看一些主流的图标，可以上追波看看目前流行的设计风格，不行的话就去看看大厂都在画怎样的图标。

2 ) 明确自己的能力，对自己目前的设计水平有一个客观的评价，到一个怎样的水平。很多人都急于求成，最基础的线性图标都不会就上来搞轻拟物，画来画去都不好看，最后就放弃了。

3 ) 敢于支出自己的不足，许多人画了许多时间去画一组图标，就很容易被自己催眠，以为自己已经画得很好了，其实还会有很多不足。所以我们要敢于指出自己的不足，在前期临摹阶段，画完后多去对比原作，自 己有哪些地方没有原作做得好的

1.2 会了，但没完全会

什么是会了，指的是可以绘制出于优秀原作一样的图标；什么是没完全会，指的是不知道原作是怎么达到这个好看的效果的。而且很重要的一点是，你临摹的作品可能也有一些不好，需要改进的地方，以此在这个阶段我们要做的是：

1 ) 多看别人总结的知识点，知道如何去判断一个图标是否还有可以改进的地方，这样绘制是不是正确的

2 ) 懂得总结与思考，原作是用来什么样的手法让我觉得它是好看的，这些技法怎么用，还可以用在哪

2. 阶段二：半原创

临摹是一个提升自己的手法，但不代表可以直接用到自己的作品中，直接复制别人的设计，并不叫设计师，复制粘贴谁不会啊，所以在懂得如何临摹后，我们要敢于尝试半原创。这里说的半原创不是指在别人图标的基础上加上两笔就是半原创，而是要吸取了优秀图标的优点后，重新设计出一个有相同特点的图标。那我们应该如何半原创呢？

1 ) 还是多看，但是不同于临摹阶段，我们在临摹的时候还要多想，这个图标的特点是什么、怎么做、还能怎么用，积累图标不同的表现形式2 ) 多练，这个建立在多临摹上，目的知道别人的技法是什么做的，练习了不同的技法后，将它们再融合在一起

3. 阶段三：原创

第三个阶段，也是最难得阶段。目前很多情况都是只能成为融图设计师，将不同作品优秀的点组合起来。但如果要建立自己的风格也是要做融图设计师的基础上，多想、多尝试，敢于突破，在一次次的融图后，发现出自己的特点，为自己的作品打上自己标签，输出具有差异化特点的设计。最有印象的就是夸克的设计，品牌特色很明显，其实我们每个人也可以成为一个品牌，只要我们足够努力