视觉隐喻研究如何设计出好图标的设计指南，一起来看一下

在产品页面中，图标也是一个相对较小的设计元素，但是其重要性不可忽视，好的图标设计有助于在使用流程中从感受、美感等方面提高用户的好感度。本篇文章里，作者总结了怎样设计出好图标的设计指南，一出来看一下。

一、图标的基本认识

图标，是一种图形化的标志，它有广义和狭义两种概念，广义指的是所有现实中有确立指向含义的图形符号，狭义主要指在计算机设备界面中的图形符号。对于UI而言，主要针对的就是狭义的概念，它是UI界面视觉组成的关键元素之一。我们借助图标看到的不仅仅是图标本身，而是它所代表的内在意义。

色彩color、文字Font、图标icon、图形shape、图片image、空间space，是我们做平面设计中十分重要的6个元素，而针对UI设计而言，图标可以说是整个产品的点睛之笔，它并且可以直接影响着一款产品的形象和时尚。

二、图标的历史

虽然，图标不是由界面设计师发明的。作为一种交流的对象，它们有着古老而多样的历史，根植于古人。它们发生在地图、标志、方案、手册和许多其它信息来源中。然而，随着新科技和图形化用户界面的出现，图标经历了新的转折进步。

从历史上看，施乐公司在20世纪70年代初的之后，在功劳中提及了第一个图形化用户界面的字体：图标是在一台名为XeroxAlto的机器上实现的，这台机器相当廉价，并没有真正普及到广大的用户。然而，这也是一个艰难的故事的起初：1981年，XeroxStar（施乐之星）公布了，它被称为第一台将按钮作为图标的一个别的消费类计算机。特别是，它应用了目前为止的文件夹和垃圾箱的图标。下面是图标从80年代。

三、图标的分类1.图标基于功能类别的分类

（1）表意图标（又称解释性图标）

表意符号是指当时不存在实物的符号，是在演进过程中成就的一种符号，用于表达这些特定的意义或操作行为。而且在演进过程中，这些符号逐渐继承了一些象形符号的特点，将符号原本成为「实物」并且不断演变。例如「箭头」从最初的「弓箭」已经逐渐衍生为一种特定的表意符号。

（2）交互图标

具备双向信息传递能力，不仅可以向用户传递某些信息，引导帮助客户执行特定操作，同时也允许客户向程序释放控制信息，从功用重要程度来讲，它的重要性是最高的。比如：登陆注册按钮，开关按钮，数量按钮，点赞，转发分享等都属于交互性界面。

（3）装饰和娱乐用图标

一般是用来提高整个界面的美感，加深个性化设计样式，并不具有显著的功用性。这类图标迎合了目标受众的喜好与希望，具备有特定的样式的外形，提升用户线上感受感，迎合受众群的喜好，提升设计亲和度。装饰性图标常常展现出季节性和周期性的特点。例如线上活动、用户等级、空页面等

（4）应用图标

不同数字产品在各个操作系统平台上的入口和品类展示用的标志，它是这个数字产品的身份象征。在绝大多数的状况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采取吉祥物和企业视觉辨识色的组合。真正优秀的应用图标设计，其实是结合行业调研和品类设计的组合，它的目标在于创造一个不会让顾客无法在屏幕上迅速找到的醒目设计。

2.基于体现方式分类

（1）象形图标

ios相当长一段时间流行“Skeumorphic设计模式”，属于超写实设计。并且觉得即使有也许，在应用上提高现实的、物理的纬度，与现实越相似，操作越相近，就越容易使用户理解运作方式，接受度就越高。例如中国鼎鼎有名的富士山图标，由此表明好的设计虽然简洁度高，功能性相同十分重要视觉隐喻研究，特别是与旅游相关的设计，需要让人跨越语言的障碍。

一个非常有意思的国外图标网站

（2）隐喻图标

icon中的语境元素很重要，它可以让我们一发现这个icon就明白是哪个意思。比如，一个房子代表首页，一个叉叉代表错误或关闭。当我缩小一个icon时，我就会保留隐喻元素，来确保icon仍然可以精确传达信息。

（3）工具图标

主要以市场类型为分类，使用范围广泛，大众或行内专家识别度高，且被大量使用。比如：建筑市场，医疗产业，化工市场等等。

（4）混合图标

也就是前三种的结合，目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物，多表达设计师个人设计样式或适用某类设计感较强的软件。

3.基于视觉特征的分类

（1）字符图标

字符界面“Glyph”一词是源自于排版领域，现在早已随着数字设计而逐渐在数字设计领域深耕了，它源自于希腊语，含义为“雕刻”。在排版领域当中，符号图标常常是包括特定的意义、特定用途、可表意也可书写的类文字系统，它可以是字母，也可以是图形，有的之后反而是它们的组合。

在这类图标设计中，比较典型的当属天气类图标了。从单个图标到组合图标，都能充分展现出来。

（2）扁平图标

扁平图标包含线性、面型、线+面，面+面，变现形式多样，拓展性强，更个性化，年轻化一些，相同，同样设计样式的icon，在更改颜色后才能表现和传达不一样的信息。

（3）拟物化图标

拟物化界面是扁平化字体的对细部，正就像当时拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的颜色、纹理、光影都融入到整个图标的设计，拟真是它的特征。拟物化界面这一设计趋势几乎是跟随着Macintosh的问世和演化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所取代。不过，拟物化图标现在仍然广泛地利用在不同领域，尤其是游戏设计和游戏类产品的界面设计当中。2.5D界面和桌面应用图标。

四、图标的优势

1.全球通用

Windows,iOS,etc.,中文版和英语版或者各种语言版本，在不开启菜单之前，基本上都长一样。很多图标已经无法被大多数用户迅速识别，甚至变成国际通用的图标。例如WindowsUI

2.节约空间

一个图标就能描述清楚含义的之后，只需占用一个字符的位置就可以释放给客户操作信息。例如扫一扫、邮件群发成功，用文案表示应该3-4个字，英文或其他语言也许更长，而用图标代替只应该一个字符位置

支付宝右上角+表示更多功能，此时一个字符位置解释明白其意义；微信下一个类似声波图标表示语音，直观易理解

3.快速定位

进入碎片化时代和处于读图时代，几乎是同样的节奏。图片内容能在短时间内形成更大的制约力，研究证实，大脑处理照片内容的速率比文字内容快60000倍，人类脑部对图形图像的记忆也远胜于对文字的记忆。所以，在推广品牌时，图片内容可以说是一图胜千言。使用界面通过视觉引导帮助用户迅速识别信息。

TikTok和ins没有任何文字表明情况下，我们就明白第5个标签就是个人中心

4.可识别，易记忆

科学证明，在头脑中相对于其它感觉来说与触觉信息处理相关的脑区占统治地位，人脑对于图像的记忆远远超过文字。图标多采取几何图形，并以对称、一致的设计目标来进行设计，由于其高度浓缩的特点，图标具有非常简单的特点，更加方便记忆。

五、图标的绘制流程

图标最底层逻辑：线性图标、面型图标、线+面型图标、面+面型图标、2.5D界面、拟物图标。网上五花八门的图标是在这种基础上进行视觉区分，而当我们设计图标时候应该反思：

先看一组不用色调的字体，由前面不同APP图标可以看出不同行业、不同场景、不同用户，图标的设计和表达形式是不一样的，所以设计前必须探讨，你还要表达的设计模式和产品的定位。

1.设计执行

（1）拆解关键词及关键词联想

将需求信息中的关键词进行拆解及发散，转化为生活中常用的事物，释放它所代表的内在涵义。关键词的同义词、近义词、形状相关或相关联想的物体

比如说到荣誉，马上就能想到奖杯、奖状、金牌、皇冠等。然后借助这种词联想，去找一些个性相符的照片制作情绪版，通过心情版可以感得到产品的调性，然后从中提取一些颜色和色调做为产品界面的主要造型

（2）按照关键词联想输出图形

根据上一步拆解的短语或物体，通过简洁基本颜色转为生活中常见图形。常用的2中技巧是用AI钢笔工具（sketch贝塞尔工具）以及布尔运算进行绘制

（3）按照场景输出

此处的画面也许是实际应用的画面，比如大众点评tab标签栏、功能区（品牌区）、运营类图标等很多按钮需要鼓励客户去点击，所以在视觉上非常丰富一些；而个人中心、分类区、详情页更多注重功能上的鼓励，相对来说较简单，属于二级使用画面，线型图标居多。

六、绘制中必须注意的点

我们常用各个按钮文章探讨应当留意十几点，而这种没有规律和逻辑无法记忆，一时记住了也容易忘掉。这些总结虽然是从MaterialDesign或者iOS规范中得来的。认真探究这种细节，图标制作就不难了

1.端点统一

图标端点分为直角和弧形，我们在设计过程中要统一图标端点，保持一致的设计语言

2.角度统一

（1）拐角

相对于其它图形，人类的脸部更易于辨识圆角方形而不是钝角矩形，因为人在眼球的生理构造上中央凹(foveacentralis），是视网膜中视觉最敏锐的区域)在处理圆形时最快，而处理矩形边缘则必须涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为他们看上去比普通矩形更接近于圆。

圆角自身的方形属性会给人细腻、可爱，更加安全、亲密的觉得。因此社交、娱乐、直播、美食等界面多会使用圆角图标。

直角则会给人一种尖锐、具有伤害性的觉得，图标整体细节更多，通常出现在金融等商务属性相当强的产品。比如：36氪、金融类产品等。

（2）倾斜角度统一

3.内部空间比例统一

内部空间比例的不一致易造成界面视觉重点不统一。如右图左第二个图标重偏下，第四个图标重心偏上，右边是初期PP助手的标签栏界面，图标内部挖空面积占比例相近，整体视觉和谐统一。

4.描边风格统一

在绘制描边图标时，要时刻留意图标的描边粗细是否统一。在@1x一倍图设计方式下，以24px为网格基准的话，常使用的字体粗细有：1px、1.5px、2px、3px，1.5的粗细对显示屏要求非常高（半个单位的模式会造成界面在最后显示时边缘模糊，不清晰）

细描边给人触觉感非常精美，粗描边相对更加粗犷，由于现在流行趋势的演进，常常也是粗描边和细描边结合的设计样式

5.内边距

比如保持同样的视觉权重，图标的描线长度也需要维持一致，达到像素级统一。元素之间的最小长度，应该小于或等于描边的长度。

6.安全边距

苹果、谷歌、IBM，国内的阿里AntDesign都出过相关的图标网格规范，这里以谷歌的MaterialSystem图标网格来进行说明。在24*24px图标尺寸，上下左右安全间距是2px，关键形状的四个基本颜色为矩形20*20px、正方形18*18px、纵向矩形和竖向矩形20*16px。通过关键形状的规则统一图标大小及位置，达到视觉的平衡

（1）对齐像素点

清晰度（像素完美对齐）为了防止使图标失真，可以借助将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用工具AI以及sketch的之后描绘基础图形不要出现整数点和质数，多用偶数

七、图标验证

我们知道了icon的基本常识，怎样评价我们的icon是否适合，是否贴合整个产品呢？我们必须认识什么才是一个好的icon。检验标准也有基于我们绘制的标准，分别是：识别性，规范性、整体色调与品牌感。

1.识别性（表意准确）

判断事物的价值在于它的功能是哪个，图标的功能是帮助客户理解信息，所以表意精确（清晰确切的传达信息）就是界面最重要、最底层的价值，如果你设计的界面用户看不懂，即使视觉再美观也没有任何价值可言。

意思识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被客户理解，不会让顾客产生歧义。常见的就标签栏指南针表示看到，房子表示首页等

视觉识别：是字体的大小，颜色，线条的厚薄，这些制约影响视觉辨别的诱因，在详细样式中增加视觉辨识性。

花瓣和VLIVE标签栏没有文字表明，这之后其意义识别更加重要

2.规范性

我们要确保图标在视觉大小的一致性，图标饱满度（正负形）、遵循同一种规律，细节统一性。这里的4点在上面描绘过程中早已写的十分具体了。

3.整体风格

整体样式是要留意图标传达的性格与app的基调是否一致，每个产品由于定位，针对人群不同视觉隐喻研究，整个app的基调也不一样，例如腾讯动漫，它的性格就是偏卡通可爱的类别，那么的界面设计上也要表现这个性格特点，尽量使用卡通圆润的方式去设计。一个广告语：复杂世界里，一个就够了，整个APP从开启图标到整体调性都是简单干净，克制的色调采用传达产品调性。

4.品牌感

品牌感就是我们里面提到的要与品牌观念相符，传达给客户的体会一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方式来提取品牌基因。我们要试着从品牌设计的视角去理解，寻找自己产品独特的品类气质，挑选适合的技巧。然后把这种元素抽象化，融入在图标设计中。下面几款产品从产品名到推进图标设计高度整合。

八、图标可用性测试

图标可用性检测是基本规则是按照界面验证计算的

1.识别度2.设计能否统一3.品牌信息九、图标的交付

通常状况下有JPG、PNG、GIF、SVG四种交付格式（jpg比较少用），其中JPG、PNG、GIF为位图，受图片原本的分辨率大小限制，无法灵活的更改型号。而SVG为矢量格式，支撑无损缩放。

在没有SVG前由于要考量到适配高清器材，需要切各种倍数的界面进行适配。不过目前的研发工具及软件都自带切多倍图的功能，比如蓝湖。另外交付模式是将SVG格式时，图标上传至类似iconfont的网页后，完成界面的交付。需要切记的是：

而iconfont对于界面制作要求苛刻，上传时必须留意查看自己的按钮是否依照规定。