随着互联网近几年的高速发展，移动端产品APP已经成为我们日常生活的必需品，我们每天打开手机至少会使用到一款APP，这么广泛的受众人群，相信每个用户对APP产品中的图标并不陌生，图标作为视觉交流的对象，它能否准确的传递给用户正确的产品信息性和功能性，这取决于设计师对产品功能信息的理解与图形的视觉表现水平；图标作为APP产品中重要的一部分，也是最基础的一部分，作为设计师想做好这一基础部分，我们对其真正系统了解又有多少呢？

下面对于中级以下的设计师我想分享下自己对APP产品中图标的认识，欢迎感兴趣的小伙伴在文章下方留言探讨！

文章分为以下几部分内容

一 、计算机图标系统的进化史

ICON也就是咱们经常所说的图标，图标作为人机交流的基础对象，其历史悠久多样化，源于古代。在地图、标识、设计策划、手册和许多其他的信息源中都可以看到图标。不过我们看到的计算机图标最早出现在1970年的PARC实验室，当时的图标有“桌面比喻”的含义：计算机系统表现为一个虚拟桌面（desk），与办公桌、文件纸、文件夹、垃圾桶等办公用品联合使用，与人进行自然的交互。

1981年施乐公司首次创造平面交互图标：那是交互图标设计历史的开端：施乐之星被研制，并且被称为是第一个消费者电脑，它将图标作为交互界面的部分元素。特别要指出的是，施乐之星运用了文件夹和垃圾箱的图标被延用至今，如图下所示：

1984年麦金托什（Macintosh，Mac）系统图标是Apple公司继丽莎后第一个使用图形用户界面的计算机系统，其首次将图形用户界面广泛应用到个人计算机上，图标自此开始进入大众视野。

Macintosh系统的图标独特而有趣。如下图所示：

1985年之后~2001年，计算机系统图标不断推新，由黑白到彩色；由彩色到加入阴影、渐变等设计手法，让图标看起来更加写实；再由写实效果到模拟3D效果，总归是朝着让图标变的越来越细腻精致；直到2001年推出的Mac OS X系统中已经支持平滑的半透明图形接口，图标风格相应地也有了很大的改变。由于构成图标的所有要素都改变了，精致逼真的写实风格刷新了之前人们对图标细节的所有想象，这次图标风格的改变是一个挑战，但无疑此套图标向大众提交了令人满意的答卷，如下图所示：

2001年~2007年之间，主要是Mac OS X系统图标&Windows系统图标的不断更新迭代，图标设计对材质细节绘制更加细腻逼真，更加追求拟物风格；

2007年~2013年移动端操作系统开始陆续推出，2010年手机（iPhone 4）视网膜屏幕问世，此时的移动端系统的图标写实效果的展示也达到了顶级，在屏幕中观看的效果堪比印刷效果。

2010年~2013年现代用户界面图标的风格追求简洁明了，舍去质感、阴影、材质等细节刻画，仅使用简洁的单色色块和单型图标，图标造型变得更加锐利、平面化，与当时iOS和Android的拟物风格形成鲜明对照。如下图所示：

2012年在图标发展的短暂历史上极具纪念意义，此后扁平风格的图标设计开始大行其道，以往的拟物风格（skeuomorphism）不再出现。之后这种扁平风格一直被沿用，并在每次更新中做出细微调节和元素的提纯精简，使得该系统图标在屏幕中呈现的像素密度（ppi）又得到了进一步的提升。如图下图所示：

以上是桌面图标的发展经历，随着新技术和图形用户界面时代的到来，桌面图标直接影响着APP产品中的界面图标的设计，两者都具有明确指代含义，其中桌面图标是软件标识，界面中的图标是功能标识。当交互图标以吸引和谐的外观集合功能性和信息传达性为一体时，它们代表着另一种风格的形成。

以上内容来源查询相关资料后自行提炼概括总结

二、ICON的作用

在日常的UI设计中，一款好的APP设计是通过好多模块组合而成，而icon图标对于整个界面有着至关重要的作用，一些功能类的图标可以说占在页面的黄金位置；我们可以看下我们日常中常用的app，以下是支付宝、美团及京东的首页；

看到这里可能有的小伙伴会问，为什么图标这么重要呢？我们可以通过一个简单的例子来发现它的重要性，如下图：

通过上面的对比图片我们可以发现，没加图标的界面识别性及美感程度对比加图标界面差很多，由此可见icon图标在产品APP中对界面的识别性和美感程度起着至关重要的作用，其大致有如下作用：

定义平台设计风格

icon图标作为产品APP很重要的组成部分，在产品一、二级页面作为功能性入口的重点图标从某种角度可以定义平台页面整体的设计风格，精细的图标设计可以很好的提升整个页面的设计品质，同时能给用户带来舒适的视觉感受；

聚焦内容  提升用户点击率

对于产品一、二级页面中功能性图标，结合文字内容其表现形式能正确的传递文字信息的图标，不仅可以让用户快速获取文字信息，还可以结合微交互动效吸引用户的注意力，提升图标的点击率；

平衡润色  增加页面节奏感

• 如下图所示：没加图标的界面识别性及美感程度对比加图标界面差很多，由此可见icon图标不仅可以平衡润色整个页面视觉，还可以增加页面的节奏感；

三、图标的风格分类及其应用案例

轻拟物风格

• 风格概述：使用渐变、投影、明暗等绘制手法，绘制出具有立体感轻度写实的图标；
• 
  
• 特点：突出元素特征，层次明确，体量感识别性强；
• 应用：主要用于平台功能性入口   （ 如：大众点评，结合平台的风格调性整体考虑icon的应用与延展）

面性风格

• 风格概述：面性图标可以结合各种不同的表达方式，来提升图标的质感和创意，而不只是简单的填充颜色。常见的有如下几种结合形式：

        可结合半透明色块组合来增强层次感；

•       可结合微弱的渐变提升了图标的质感； 

•       可结合圆角变化表达出不同的气质； 

•       可通过图形来突出元素特征，造型丰富灵巧； 

•       可使用两种或以上的颜色设计出更多风格样式的面性图标；

•       可结合高斯模糊(如：玻璃质感效果)的设计手法增强图标的层次感和空间感，同时图标也具有较强的设计感；

• 特点：突出元素特征，色彩区分大，聚焦内容，识别性强；

• 应用：如：业务功能入口（如：京东金融、喜马拉雅：结合平台的风格调性整体考虑icon的应用与延展）

线面风格

• 风格概述：在线性图标的基础上结合图形的色块组合而成，线是高度概括的主要形式，块、面更多的是装饰辅助元素；

• 特点：风格更加个性活泼；也可以通过不同形式的面表达出更多的风格和情感。

• 应用：如：应用灵活，业务功能入口，工具类（闲鱼、嘀嗒：借助品牌本身元素，又结合其他色彩，形成了独特的视觉图标体系，也形成独特的品牌调性）

线性风格

• 风格概述：通过粗细不同的线绘制图形，图形精简概括；也可结合产品风格气质和品牌文化来控制线条的粗细变化达到线性风格设计的目的（如2px&3px粗线条绘制icon@1px)

• 特点：精炼简洁，通透感强，但与面性图标比体量感识别性弱

• 应用：如：基础功能icon（如tab bar 导航栏、个人中心等）（度小满金融、招商银行结合品牌典雅、精致的调性，图标系统以线性为主）

半/扁平风格

• 风格概述：在面性图形结构的基础上，结合几何图形底板来突出表达元素的特征，更关注简单易识别的视觉隐喻，能够快速转化成需要表达的含义

• 特点：简单易读，色彩运用和形象的表现力更加灵活

• 应用：如：业务功能入口、项目分类入口（如：链家APP）

光影风格

• 风格概述：在面性图形的基础上，结合三大面绘画原理，通过突出表达暗面来增强图形的块面感，或在图形的结构之上，在丰富多个画面来增强图形的灵动感，用作为几何图形底板来突出表达元素的特征。

• 特点：识别性、统一性更强

• 应用：如：业务功能入口、项目分类入口（58到家：结合应用图标的品牌风格调性，应用此类图使平台的图标形成了很好的视觉体系）

MBE风格

• 风格概述：使用有限的颜色和统一的线条、点等来添加更多风格细节，使图标具有品牌性；

• 特点：品牌风格更独特，色彩使用更加灵活

• 应用：如：业务功能入口、页面装饰元素、加载状态、空页面图标等

3D质感图标

风格概述：使用3D软件(C4D、blander等)制作，3D质感图标作为一个主流的设计趋势，在时间和能力允许的情况下可以做这方面的尝试。特点：表现材质较写实，三维立体空间感较强

应用：游戏、直播类礼物、某类活动专题应用较多

四、图标设计要点

可识别

icon是有明确含义的图形视觉语言，它的首要目标是通过图形的形式来传达信息，帮助用户理解文字信息，所以图标所表达的含义要与文字相契合，即不仅要提高图标的可识别性，其表现形式还要达义！   如下图所示，在设计icon图标的时候，我们要抓住图标的外形特征来设计；

一致性

APP产品中icon图标的风格要一致，要充分考虑用户对一致性审美的视觉感受，icon图标风格保持一致性可以提升产品整体页面的设计品质；

概括性

图标注意要简练达意，避免过度使用象征性或隐喻性符号，而是尽量采用人们熟知的图形或场景，尽量用对比较强的对比关系来提高图标的识别度。

五、图标绘制注意事项

视觉平衡

作为UI设计师画图标的时候一定遇到过明明几个图形长和高都一样,但在视觉上看起来,正方形要大的多为什么看着大小差距那么大呢？但当我们把圆形和三角形画得突出一点，就会不一样了，三个图形的在视觉感知上变得大小一样了。所以数学上的精确性并不能提供视觉或感知平衡。如下图所示：

以上问题使用图标栅格辅助画图标可以有效解决图标视觉平衡问题；当我们画图标的时候，可以先定义图标的主要形状，按照栅格中方形、圆形、三角形参考线的指导控制图标的实际视觉大小，让整个图标以饱满的形式填充在栅格中，另外图标边缘一般要有几像素的留白，以保证图标还有外延的空间；其次还有一点需要注意：细节的添加也会增加图标的视觉重量，记得在其他地方做一点平衡~

以下是使用图标栅格辅助画图标案例：

图形要简化，可读性强

希克定律告诉我们，icon图标在保留其基本特征元素的基础上，图形越简化，它的识别性越强，其特征线索也将越突出。即减少图标复杂性并增加可读性,可提高用户专注力，提升识别图标含义的效率，如下图所示：

统一性

同级别、同种类的icon在各方面的表达（风格，角度，圆角，线条宽度，文字和icon界面中的寓意等）要统一，整个APP图标的风格差别不可太大；

六、与技术对接输出格式

icon图标格式的输出主要分两大部分：1、是针对原生页面(原生页面的开发成本较高，迭代速度相对较慢，现在多数APP中只少部分页面使用原生开发)输出icon图标按照IOS和Android两个系统的规范要求，具体细节要求和开发共同，也可以查询相关资料(三五年前有很多相关的文章说明)详细了解；2、主要针对H5页面的icon图标输出具体如下：1）对于需要切图的图标，一般输出@2x.png格式；也可以按公司里开发的要求输出；

2）对于动效图标输出有：APNG、GIF、SVGA、Lottie；

它们的大小对比如下：

质量对比如下：

具体输出哪种格式，可根据设计和开发协商而定；

3）对于需要输出SVGA的普通图标，在阿里的iconfund(https://www.iconfont.cn)建立好项目图标的管理（如单色图标文件夹、双色图标文件夹和多色图标文件夹），这样不仅可以方便开发者编辑图标，提升页面加载速度，同时也为设计师减少很多重复的工作量；

—————————————————————————————————————————————

Powered by Froala Editor