导读：图标是界面视觉构成的关键元素之一，了解这些图标的基本知识也是进行入口设计的必要条件之一。在本文中，作者总结了一些产品图标，并分析了图标的基本知识。让我们来看看。

在我们的日常生活和工作中，我们要处理各种各样的接口。作为设计师，图标是界面视觉构成的关键元素之一。了解图标的相关知识，以及正确的标准绘制方法，是进行入口设计的必要条件之一。本文将对图标进行系统的介绍，希望这篇文章能给大家带来一些帮助。

一、什么是图标

1. 概念

图标是一种图形标志，它有宽和窄两个概念。广义主要是指有参照的图形符号，高度集中，信息传递迅速，便于记忆。图标是代表文件、程序、网页或命令的小图片或对象。

图标帮助用户快速执行命令和打开程序文件。单击或双击图标执行命令。图标还用于在浏览器中快速显示内容，具有相同扩展名的所有文件都具有相同的图标。

随着计算机的出现，图标被赋予了新的含义和新的用途。在这里，图标成为具有明确意义的计算机图形，桌面图标是软件标识，界面图标是功能标识，在计算机软件中，它是程序标识、数据标识、命令选择、模式信号或开关开关、状态指示。

图标在计算机视觉操作系统中起着非常重要的作用。它们可以代表一个文档、一个程序、一个网页或一条命令。您还可以使用图标来执行命令或打开某种类型的文档。你所要做的就是点击或双击图标。

图标是具有象征意义的图形。它不仅是一个图形，也是一个标志。它具有高度集中，信息传递迅速，便于记忆的特点。

2. 范围

图标具有广泛的应用，软件、硬件、网页、社交场所、公共场所无处不在。例如：商场的引导系统，男女洗手间的标志和各种交通标志。狭义上主要指计算机软件的应用，包括：程序识别、数据识别、命令选择、模式信号或开关开关、状态指示等。

二、图标的发展史

1. 起源

图标不仅历史悠久，从古代的图腾到20世纪和21世纪具有更多意义和功能的各种图标，而且应用范围非常广泛，可以说是无处不在。它是1973年在施乐公司帕洛阿尔托研究中心发明的。桌面的比喻和鼠标驱动的图形用户界面(GUI)被第一次用于创建第一台具有图形界面的计算机，即著名的施乐Alto。

这一概念从未见过曙光，但它的继任者施乐之星(Xerox Star)于1981年问世，成为计算史上的一个里程碑。

1979年，乔布斯参观了施乐公司的帕洛阿尔托研究中心(PARC research Institute)，看到了施乐公司的Alto原型机，他决定开发一款具有图形用户界面的新电脑。1983年，苹果公司推出了第一台使用GUI的商用电脑Apple Lisa。1985年，微软也推出了使用GUI的Windows 1.0。

在80年代的时候，我想把图标具体化，但是因为当时电脑的性能不够，设计师只能在有限的空间里进行创作。对于一个好的标准，越具体越好。

微软和苹果公司在1995年推出了新的系统接口，随着计算机显卡的分辨率和色域的提高，设计师或艺术家有了更多的发挥空间，随之而来的是更多的颜色和更多的透视可能性。我从单一颜色的简单图标开始，然后我能够实现各种各样的想法和效果，直到现在。

2007年，苹果发布了第一代iPhone和iOS系统。主题图标与当时的mac OS系统保持一致，玻璃质感和拟物化风格引人注目，打破了人们对“传统手机”的定义。这种iPhone主题图标风格，一直稳定到iOS7发布，才有了颠覆性的变化。

2013年WWDC，苹果发布了iOS7系统，系统界面开始向扁平化风格转变。大会也使得模仿风格逐渐下坡，直到扁平化风格被广泛推广，模仿风格不再被广泛使用。

在2020年WWDC20上，苹果发布了mac OS Big Sur，这次更新采用了“新的模拟”图标。“new simulacre”的前身是simulacre图标，这是苹果公司提出的第一个设计概念。它是在界面中模拟真实物体的纹理和材质，设计特定光照下的效果。我们的目标是让人们习惯性地将使用界面与实际物体的使用方式联系起来。“新拟像”是将真实的光应用到虚拟物体上。

产品应用图标，又称发布图标，是品牌和产品的核心元素。图标以一种简单、大胆和友好的方式传达了产品的核心思想和意图。由于产品应用图标的设计者不同，设计无法统一，所以苹果在ios系统中正式统一了圆角矩形的大小，并在有限的区域内进行设计。另一方面，Android没有那么标准化。这是百家争鸣。

字体

2. 历程

常用的中文图标分为单字、多字和字加图形类型。提取产品名称中最具代表性的独立文字，进行字体设计，通过笔画和整体骨架设计进行调整，以满足产品特点和视觉差异化。由于中国人对汉字的敏感性，这样的设计形式大大降低了用户品牌认知的成本。

三、产品应用图标

英文字母图标通常是从产品名称的第一个字母中提取出来进行设计，由于英文字母本身形状简单，结合产品的特点进行创意处理，很容易做到既美观又有辨识度。

数字对我们来说是非常敏感的，用数字来设计可以给人以亲和力。因为数字的识别性很强，容易品牌传播和用户记忆。

在应用程序图标的设计案例中，特殊符号图标相对较少。因为符号的意义对产品属性有一定的限制，所以具有很强的针对性。

几何图形的应用设计给人以简洁、现代、个性化、丰富的空间感等视觉感受。从单一的具象图形到复杂的空间感，几何图形的表达非常丰富。

动物剪影通常是从整体图像中提取动物或局部特征部位作为设计元素，这类应用图标背景是单色或渐变的颜色，少量图形会辅助作为背景元素，动物都是单色填充，以白色填充为主。

单双是指应用程序图标只显示一个或两个剪影图形，生活中可以作为剪影设计的元素有很多。如食品、工具、生活用品、学习用品、娱乐道具等。可以独立形成廓形图形，也可以根据产品特点进行创意处理，最终形成应用图标独特的造型图案。

将相同图形按顺序排列，排列形式包括渐变变化、行均、规则重复、色差、错开大小等。这样的设计方法可以为单调的图形增添层次感和充分的构图。具有一定渐变变化和规律重复的图形组合可以传达一定的节奏感和运动感。

正反形设计是LOGO平面设计中常用的表现手法。在图标设计中，以正形为基础突出负形特征，以负形表达产品属性。采用正反形设计，平面设计感较强，正反形更能充分表达产品功能和服务。

线性图标风格给人一种简洁、通透的感觉。线性设计分为封闭和开放，可以由一条连续的线或几个线段组成。彩色背景上的线条通常是反白色的。背景设计可以是单色、渐变色、其他辅助平面设计等。

白色渐变图标用白色渐变填充，不透明度设置在100%到X%之间。白色渐变图形有空间感，质感好，视觉效果好，被广泛应用于图标设计中。

颜色渐变图标使用各种颜色的渐变。与白色渐变图形相比，彩色渐变图形具有更丰富的色彩表现力。当各种色彩逐渐连在一起时，要注意色相的对比来营造空间感。

使用动物部位进行平面设计，可以使元素特征更加明显。局部特征比整个动物形象更具视觉表现力。

利用人体部位作为平面设计元素，比较常用的有眼睛、嘴巴、手掌、头部等。采用人体元素进行设计，用户对图形更加敏感，便于传播和记忆。

卡通人物很容易与动物人物混淆，因为许多卡通人物是基于动物设计的。这里将其单独提取，目的是对一些简单以动物外观为设计元素的表现手法进行分类。卡通形象设计在应用程序图标的设计中非常常见，很容易为用户形成记忆。

通过在接近圆形或构图饱满的人物上添加眼睛等元素，可以使整个人物人格化。赋予原本冷冰冰的图形生命，有一定的情感表达，让产品更人性化，更容易被用户接受和记住。

为了更清晰地传递产品的功能和服务，基于产品功能和服务提取元素的图形设计也是一种比较常用的表达手法，如计算器、日历、导航等直接提取相关图形元素进行设计，传达产品信息一目了然。也可以从产品和服务的内容上进行提炼，如教育类产品，以帽子为元素进行设计。

1. 中文文字图标

渐变色背景的使用越来越受到设计师的青睐，相对于单色背景视觉表现力更丰富，整体色彩给人通透的感觉。渐变可以是双色渐变，也可以是多色渐变，根据产品的气质灵活使用。

艺术风格图标设计色彩搭配清新、复古、简洁，适合具有艺术风格的产品。设计方向主要是简单的图形组合或文艺风格的字体设计，整体图标留白较多，配色简单，白色背景居多。如果是深色背景，则使用黑色和复古色。

打包带有特定活动氛围的应用程序图标。保留原有的图形外观，营造整体氛围，突出人气购物场景。

游戏应用图标设计要求设计师具有较强的写实图标设计能力，设计方向主要包括：游戏人物、纯文字、道具或logo、明星头像、辅助图形或元素等。设计表达需要鲜艳的色彩，夸张的人物表情和动作，精美的设计和质感。

IOS启动图标关键字说明：

Apple将提供Production Templates文件，我们只需要用1024px*1024px的大小来设计启动图标，并将设计好的启动图标放入文件中的智能对象层。这时，你会发现所有图标的大小都会变成我们制作的启动图标。

提醒一下，虽然我们看到的iOS图标是一个圆角矩形，但它不是平面上的标准圆角矩形，而是某种连续的曲线。但是用肉眼很难看出区别，所以不要扭曲它的圆角，只要把它画成一个矩形的尺寸就行了。

Android启动图标关键行规范：

Tranadvanced Material Design要求的基本尺寸是48dp，但这是1:1的尺寸，也是原来的尺寸。绘图要求是基本尺寸的400%，即192dp，对应的网格参考从1px更改为4px。通过保持这一比例，对原始图像所做的任何更改都将按比例放大或缩小，从而在缩放值返回100% (48dp)时保持锐利的边缘并正确对齐。

图标网格为图形元素的一致而灵活的定位建立了明确的规则。关键线形状基于网格，通过使用这些核心形状作为基线，您可以在整个产品图标中保持一致的视觉比例。这些关键线形状使用预设标准：圆、正方形、矩形、正交线和对角线。它们统一了产品图标，并在网格上保持一致的位置。

2. 英文字母图标

3. 数字图标

风格简洁，外观简洁，具有较强的辨识度，视觉感受轻松干净。

4. 特殊符号图标

更具表现力，细节更丰富，结合色彩叠加、对比、互补增强图标的层次感和丰富性。

5. 几何图形图标

叠加和改变不透明度，增强图标的层次感和空间感，减少图标压迫感。

渐变线性带出图标的纹理，结合“不同深度”或“不同饱和度”的变化，使图标更加细致和有层次。

6. 动物/单双行剪影图标

外观使用统一的颜色，结合不同属性的图标感知使用不同的颜色进行点缀；或者用不同的颜色作为主色调，黑白作为点缀色。

通过对比色，相邻颜色的搭配来营造图标的整体氛围，提高图标的层次和丰富性，双色的表达也增加了图标的趣味性。

微弱的渐变增强了图标的纹理。渐变的方向会影响整个图标的视觉效果，所以可以根据不同设计的需要进行调整。

7. 图形重复图标

让单色图标变得更有层次和空间，设计细节更丰富，减少单色图标表面的厚度。

渐变设计改善了表面图标的纹理，在颜色上有一定的丰富度。在渐变设计的基础上，图标还可以在颜色上进行区分，使图标更具层次感。这些图标用于UI列表或条目的顶部。

字体透明叠加图标后，生成一个交错的负形状，并叠加第三个表面。整体设计仍然是平面的，但有层次感，增加了图标的细节。

整体效果接近不透明度的变化。通过深度的渐变，在形状的交界处有明暗的对比，所以图标也有厚重感和层次感。

8. 正负形图标

使用背景模糊效果，从视觉角度与透明度变化或颜色叠加相比更具空间感，图标具有较强的设计感。

9. 线形图标

类似于渐变层叠加，不同的是色彩更丰富，使用多个色块，多种颜色或多角度渐变和阴影，整体风格倾向于插画风格和渐变纹理，视觉上更接近三维图形，整体风格倾向于色彩风格丰富，纹理和细节丰富。大多数用于类别部分，需要比常规的单色图标更具吸引力。

核心基础与伪对象设计一致，更复杂的细节被省略。重点放在光影的表达上，高光和阴影都到位。

几年后，它直接反映现实，投射现实，用户一眼就能知道一个功能或按钮是什么。后来，由于显示器分辨率跟不上，风格逐渐趋于扁平。近年来逐渐兴起，最典型的就是苹果Mac系统上的图标。

10. 白色渐变图标

是建立在轴测的基础上，XYZ轴，具有立体感的透视。

11. 彩色渐变图形

比较适合固定功能区/品类区，一般用在操作位比较多。

12. 动物局部图标

常用于生鲜app，让食物看起来更真实、更新鲜。

13. 人体局部图形

黑白线+品牌色，或两种相似颜色。

14. 卡通形象图标

弱面强线形状识别度更高，更符合图标的表达。

在双色图标的基础上，将线条、平面按照统一的百分比进行缩放，或采用统一/规则的图案、透视和位移设计，整体呈现出一种交错叠加的视觉效果。

0

字体图标是任何设计系统或产品体验的重要组成部分。图标帮助我们快速导航，它们与语言无关，最重要的是：它们非常小，所以它们不会占用太多空间。图标是设计良好的系统的重要组成部分。因此，科学严谨的设计规范可以帮助我们设计出精致统一的图标。

ios是4的倍数，Android是8的倍数。如果你想让两端都适合，你必须选择一个8的倍数，因为ios的最小可点击区域是44px, 48px是一个很好的大小。不是硬性规定，但4或8的倍数是最好的。

图标绘制是在48x48px画布上绘制的线性图标。默认线宽为4px。

不同场景缩放用法：

当图标为64x64px时，线宽为6px(基线宽度)。当图标为32x32px时，线宽为3px(基线宽度)。图标为24x24px时，线宽为2px图标网格为图形元素的一致而灵活的定位建立了明确的规则，关键线形状是网格的基础。通过使用这些核心形状作为指导，您可以在系统图标之间保持一致的视觉比例。

图标光栅被用作绘制图标元素的参考，并有助于建立清晰的轮廓边界。关键线有助于促进图标的一致性，并简化设计过程中的缩放成本。若要绘制小图形，请参考小正方形的关键线。

1)直角角

当底图是一个完整的集装箱正方形时，建议使用3X圆角。当底图为全高(宽)矩形时，建议使用2X圆角。当底图为小矩形(宽度和高度均小于1/2)时，建议使用1X圆角。

2)非直角角

非直角根据图标场景，角度默认为1倍四舍五入。除了特殊弧度的曲线“角”外，图标的设计需要单独考虑。

15. 拟人化图形图标

禁区。封闭曲线形成的封闭区域可以用独立的颜色填充。

由非封闭曲线组成的非封闭区域，原则上不能用独立的颜色填充。

当封闭区域为曲线形状和相交线段时，原则上不能用独立的颜色填充。

为了保证样式的整体一致性，图标的所有线段端点默认为与线段宽度相同的圆角；通常，线段端点和可编辑节点坐标首选整数坐标。

默认情况下，在48dp画布上绘制的线性图标默认为4dp宽。线宽在任何时候都是一致的，不管直线和曲线如何。

当线段与曲线相交或与直线不垂直相交时，在线段的末端使用圆头；当一条线段与一条直线垂直相交时，线段的末端为方形；当一个点的直径与一条线的宽度相同时，用图形来绘制这个点，而不使用线段。

当圆和正方形小于16px时，建议用图形绘制，而不是直线。

:

16. 从功能服务提炼图形

图标的倾斜角度应该是45的倍数，保持与关键线的对角线或垂直交叉平行。

如果矩形加框，倾斜角度也可以平行于矩形的对角线或垂直交叉。

角度为45、30、60的对角线比角度不均匀(13.7、81)的对角线更清晰。

内部结构与外框之间的距离不得小于线宽；内部元素之间的间距不应小于线宽的2/1px。

轮廓帧的端口大小渐变为4px, 8px和12px。推荐的大小是4的倍数。

17. 渐变色背景图标

图标在一定规则下允许不同样式之间的转换，即线性样式(默认)、填充样式、混合样式、多色混合样式。

科学高效的命名规则可以帮助我们快速定位我们制作的图标，帮助开发者缩短命名时间，加快团队协作效率。剪切图像的命名格式为“服务_类型_功能_大小_状态”。推荐使用英语。

字体现在我们已经了解了图标的基本理论，那么我们如何设计一个好的图标呢？如何查看我们设计的图标和产品是否一致？这里有四种方法来看待一个好的图标。

设计师有时过于注重形式而忽视功能，使得图标难以识别，破坏了图标最重要的图形形象属性——传达意义的功能必须放在第一位。

图标是对象或动作的可视化表示。如果用户不清楚图标的含义，图标就会立即失去用处，成为视觉上的干扰。在图标设计中，一定要保证图形简洁、严谨、清晰、干净，这是提升产品界面质量的重要基础部分，而不是一味追求通俗的视觉风格和炫技。

在基础层面之外，我们还可以通过加入品牌信息和有趣的细节来让图标更具吸引力，增强用户对产品/品牌的印象。

图标设计理念的本质是简化到最简单的形式——图标的简化是由减少学习曲线的需要驱动的。设计应该确保即使是小尺寸的图标也更易于阅读和辨认，所以设计良好的图标应该一眼就能快速识别和清晰。

我们需要确保每个图标的视觉大小是一致的。图标网格用作绘制图标元素的参考，有助于建立清晰的轮廓边界。关键线有助于促进图标的一致性，并简化设计过程中的缩放成本。

18. 文艺风格图标

在绘制一整套图标时候，统一性就非常重要，不要在一整套图标中混入不同风格的样式，风格一致性将帮助用户识别图标并理解它们具有同等重要性或状态。

界面中的图标一般是成系列的设计，除了视觉风格和特征保持一致以外，在同一产品内，同样的功能和信息图标应也保持一致的形态，避免用户产生疑惑。图标的统一性上可以从线条的粗细、颜色、圆角、倾斜角度方面进行检查。

19. 活动氛围图标

呼吸感的意思就是适当留白。不管是在做图标还是做界面，适当的留白可以突出主体，让空间更有张力，更具备可看性。图标的相邻元素之间的空间不应太小或在整体中不一致。定义最小间隙并将其保留在任何地方以避免轮廓“粘连”。

20. 游戏角色图标

图标设计是设计师必备的能力，图标绘制看似简单，要做好却并不容易，好的图标设计不仅能帮助用户更高效地解决问题，还能帮助产品和品牌形成差异化，非常考验设计师们的细节，不过UI设计处处充满细节，想要自己的界面更加精致，就不要忽略每一个可以提升的点。

以上就是分享的图标基础知识的大部分内容了，图标本身是一个比较大的范围，文中难免有很多不深入的内容，欢迎各位总监们的指教。最后感谢大家阅读，希望今天的这篇文章能够帮到你。

四、功能图标

《Material Design》

《Apple Developer》

《History of icons》

《An oral history of the hamburger icon》

《Hopefully, the Ultimate Guide to an Interface Icon Set》

《设计师必看的图标设计指南》

本文由郝小七指导http://www.woshipm.com/u/917803

本文由@明非原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0 协议。