设计师必看超全面的图标基础知识，零基础手把手教你做图标设计

编辑指南：图标是界面视觉构成的重要因素之一，了解这些图标的基础知识也是入门设计的必备条件之一。本文作者总结了几个产品的图标，分析了图标的基础知识，一起来看看吧。

在日常生活和工作中，我们与各种界面打交道。作为设计师，图标是界面视觉构成的重要因素之一。了解图标相关知识和如何绘制正确的规范是入门设计的必备条件之一。本文系统地介绍了图标。希望这篇文章对大家有帮助。

一、何谓图标1 .概念图标是一种图形化的标识，有广义和狭义两个概念，广义主要指语义图形符号，具有高度浓缩、便于快速传递信息和记忆的特性。图标是表示文件、程序、网页或命令的小图像或对象。

图标使您可以快速运行命令、打开程序文件以及单击或双击图标以运行命令。图标还用于在浏览器中快速查看内容，所有使用相同扩展名的文件都有相同的图标。

随着计算机的出现，图标被赋予了新的含义，产生了新的用途。在这里，图标成为具有明确意义的计算机图形，桌面图标是软件标识，界面图标是功能标识，在计算机软件中，程序标识、数据标识、命令选择、命令选择

图标在计算机的可视操作系统中起着非常重要的作用，它可以表示文档、程序、网页或命令。您也可以通过图标执行命令或打开特定类型的文档，方法是单击或双击图标。

图标是具有语义标志性质的图形，不仅是图形，也是标志，具有高度浓缩、快速传递信息、便于记忆的特性。

2 .范围图标应用范围广，软硬件网页社交平台在公共场合无处不在。例如，商业街的引导系统、男女厕所的标识、各种交通标识等。狭义主要指应用于计算机软件的方面，包括程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。

二、图标发展史1 .起源图标不仅历史悠久，从古代的图腾，到20、21世纪更多意义和功能的各种图标，而且应用范围极其广泛，可以说无处不在。 1973年，由施乐公司帕洛阿尔托研究中心发明。该电脑首次使用桌面隐喻( Desktop metaphor )和鼠标驱动的图形用户界面( GUI )技术，是第一台拥有图形界面的电脑，也是著名的“Xerox Alto”

但由于当时计算机性能不足，董事会也可望而不可及，没有实现商品化，这一概念机并没有进入人们的视野。但是，随后的机型施乐之星于1981年问世，成为了计算机史上的一个里程碑。

1979年，乔布斯参观了施乐的PARC研究所，看到了施乐的原型机Xerox Alto，乔布斯决定开发一台图形用户界面的新计算机。 1983年苹果公司发售了Apple Lisa，发布了第一台采用GUI的商品化电脑。 1985年微软公司也应用GUI推出了Windows 1.0。

2 .历史80年代，自己一直想用头像，但由于当时电脑性能不够，做不到，设计师只能在有限的空间里创作，好的标准越具象越好。

微软和苹果相继发布了新的系统接口。 1995年随着计算机图形分辨率和色域的提高，设计师和艺术家有了更大的发挥空间，随之而来的是更多的颜色运用和更多的透视效果的可能性。最初只能设计单色的简单图标，后来可以执行各种想法，实现各种效果，一直延续到现在。

2007年，苹果发布了第一代iPhone和iOS系统。主题图标与当时的mac OS系统相一致，玻璃质感和物化风格显著，它的出现打破了人们对“传统手机”的定义。这款iPhone的主题图标风格一直保持到iOS7的发布，出现了划时代的变化。

在2013年的WWDC大会上，苹果公司发布的iOS7系统，系统界面开始转向扁平化风格。本届大赛也逐渐使仿人风格走下坡路，在扁人风格全面普及之前，仿人风格不再广泛应用。

2020年WWDC20苹果发布了mac OS Big Sur，此次更新的图标采用了“新的疑似物”。 “新实物”的前身是实物图标，这是苹果首先提出的设计概念，在界面中模仿现实物体纹理材质，是特定光线下的效果设计；目的是在使用界面时习惯性地联想到现实中物体的使用方法。 “新头像”是指将现实的光用于虚拟对象。

三.产品应用图标。又称产品应用图标、启动图标，是品牌和产品的核心要素。图标简单、大胆、友好地传达产品的核心理念和意图。由于产品APP图标的设计者不一致，苹果在ios系统中统一了圆角矩形的大小，在有限的区域进行设计。安卓并不那么规范，百家齐放。

1 .中文图标常见的中文图标又分为单词、多字和字加图形几种类型。抽取产品名称中最具代表性的独立字符，进行字体设计，设计调整笔画和整体骨架，达到产品特性和视觉差异化的目的。作为国人对汉字的敏感度，这种设计形式大大降低了用户对品牌的认知成本。

2 .英文字母图标英文字母图标通常提取产品名称的首字母进行设计。英文字母本身造型简洁，根据产品特点进行创造性加工，容易兼具美感和识别性。

3 .数字图标上的数字对我们来说非常敏感，利用数字进行设计可以给人以亲和力。由于数字识别性高，品牌传播和用户记忆很容易。

4 .特殊符号图标特殊符号图标在应用图标设计案例中相对较少，符号本身的含义对产品属性有一定的局限性，针对性较强。

5 .图形图标几何的运用设计给人一种简约、现代、个性化、富于空间感等视觉感受，从单个具体图形到复杂的空间感营造，图形的表现形式非常丰富。

6 .动物/单层双剪影图标动物剪影通常提取动物整体或局部特征部位作为设计要素。这种APP图标的背景是单色或渐变，少量的作为背景元素辅助一些图形。动物采用单色填充，多为白色填充。

单形是指用图标只展示一个或两个剪影，意味着生活中可以作为剪影设计的要素很多。食物、道具、生活用品、学习用品、娱乐道具等。既可以独立剪影图案，也可以根据产品特点创意加工。最终可以形成APP图标独特的造型图案。

7 .图形重复图标是将同一个图形有序排列，排列形式有梯度变化、均匀分布、规则性重复、配色不同、大小不一等。这种设计方式可以在单调的图形中加入层次感和构图的完善，具有一定梯度变化和规律性重复的图形组合可以传递一定的节奏感和动感。

8 .正负符号正负符号设计是标志图形设计中比较常见的表达方式，在图标设计中，以正形为底，突出负形特征，用负形表达产品属性。利用正方形进行设计，平面设计感强，正形和负形可以更充分地体现产品的特征和服务。

9 .线状图标的线状图标样式给人一种简洁轻快的感觉。线状设计的方式分为封闭线和开放线，可以由连续的线或几条线构成。一般是在彩色背景上突出显示线条，背景设计可以是单色、渐变、其他辅助图形设计等。

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

11 .颜色渐变的颜色渐变图标是用多种颜色渐变的图标，与白色渐变相比，颜色渐变的色彩表现更丰富。用渐变连接多种颜色时，请注意色调的对比度，营造空间感。

12 .动物局部图标可利用动物局部进行图形设计，使元素特征更加明显。与展示动物整体的形象相比，展示局部特征的视觉表现力更高。

13 .人体局部图形利用人体局部作为图形设计要素，比较常用的有眼、口、手掌、头部等。利用人体元素进行设计，用户对图形的灵敏度更高，更容易传播和记忆。

14 .角色图标的角色和动物的形象很容易混淆。因为很多角色是基于动物的设计而进化的。这里单独提取只是为了分类以动物形状为设计要素的表现手法。角色设计常见于APP图标设计，容易在用户中形成记忆。

15 .拟人化通过在接近圆形或构图完善的图形中添加眼睛等要素，可以拟人化整个图形。赋予原本冰冷的图形生命，具有一定的情感表达，使产品更可亲，更容易被用户接受和记忆。

16 .为了更好地表达从功能服务器中提取图形的产品的某种功能和服务，基于产品的功能服务提取元素设计图形也是比较常用的表达方式。例如，计算器、日历、导航等直接提取相关图形要素进行设计，一目了然地传达产品信息。也可以从教育类产品等产品的服务内容中提取学士帽，作为要素进行设计。

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

18 .文艺风格图标文艺风格图标适用于配色清新、复古、简约、具有文艺风格类的产品。设计方向以简单的图形组合和文艺风格的字体设计为主，头像整体多为空白，配色简单，白色背景多。如果是黑暗背景，则以黑色、复古色为主。

19 .活动气氛图标为APP图标包装特定的活动气氛。保留原有的图形外观，营造整体氛围，凸显购物火爆的场景感。

20 .游戏人物头像游戏类APP图标设计，设计师需要具备较强的写实图标设计基础，设计方向主要有游戏人物、纯文字、道具、标识、星象、辅助图形、元素等设计的表现力需要色彩鲜艳、角色表情和动作夸张、设计的美感和质感等。

IOS启动图标keyline线路规格：

苹果官方传递Production Templates文件。使用1024px*1024px大小设计启动图标，然后将设计好的启动图标放入文件中的智能对象图层即可。此时，您会发现所有大小的图标都将替换为我们制作的启动图标。

在这里请注意。 iOS图标是圆角矩形，但桌面上的曲线不是标准圆角矩形，而是连续曲线。但是，用肉眼很难看出区别，所以不用在意角的圆度，用直角矩形的尺寸画就可以了。

安卓启动图标keyline线规格：

创Androidmaterialdesign要求的基本尺寸说是48dp，这是1:1的尺寸，也是原始尺寸。另一方面，绘制时要求基本大小的400%，也就是192dp，与之对应的网格基准为1px到4px。通过保持该比例，对原始图像所做的任何更改都将按比例放大或缩小，并在比例值恢复为100%(48dp )时保留锐边，以便正确对齐。

图标网格虽然具有图形要素的一贯性，但确立了灵活定位的明确规则。关键线样式基于网格，使用这些核心形状作为基线可以在整个产品图标上保持一致的显示比例。这些关键线造型使用圆、正方形、矩形、正交线和对角线的默认原点。它们统一了产品图标，并在网格上保持了一致的位置。

四.功能图标1 .单色线性图标款式简约，外形简单，有较强的识别性，视觉上轻松、干净。

2 .双色直线图标更具表现力，细节更丰富，结合颜色的叠加、对比、互补提高了图标的层次感和丰富度。

3 .不透明度线形图标不透明度的叠加和变化，提高图标的层次感和空间感，降低图标的压迫感。

4 .渐变线形图标将图标质感带入渐变线形，配合“不同深度”和“不同饱和度”的变化，赋予图标细节和渐变。

5 .单色面装饰颜色图标外形使用统一颜色，根据图标不同属性的感知用不同颜色装饰；或者，使用不同的颜色作为主色，使用黑白作为装饰色。

6 .双色图标通过对比度、邻近颜色的组合营造整体的图标氛围，增加图标的层次和丰富度，双色的表现也增加图标的趣味性。

7 .渐变图标较弱的渐变会增强图标的质感，渐变的方向会影响图标的整体视觉效果，因此可以根据设计需求进行调整。

8 .不透明度/灰度/饱和度的变化，让单色头像更有层次感和空间感，设计细节更加丰富，降低了单色头像的厚重感。

9 .不透明度/弧度/饱和度变化的渐变设计，提高了面型图标的质感，从颜色上有一定的丰富性。除了渐变外，还可以对图标进行颜色差异化，使图标具有渐变感。这些图标应用于UI界面列表或顶部条目的位置。

10 .颜色重叠，透过图标透明重叠后，交替形成了负的形状。如果重叠制作第三个面，虽然整体设计保持扁平化，但渐变感增加，图标的细节增加。

11 .渐变的整体效果接近不透明度的变化，由于渐变深浅的变化，形状的线条会出现明暗对比，图标也有厚度和层次感。

12 .磨砂玻璃图标利用背景虚化效果，与视觉透明度变化和色彩叠加相比更具空间感，图标设计感更强。

13 .轻微质感的图标类似于渐变灰度的叠加。不同的是颜色更丰富。使用多种颜色、多种颜色或多种角度的渐变和阴影时，整体样式偏向插图风格和渐变质感，在视觉上接近立体图形，整体样式偏向华丽多彩的颜色样式，质感和细节丰富。在很多情况下，它用于类别区域，应该比普通的单色图标更有吸引力。

14 .轻实物图标的核心基础与实物设计相一致，省略了更复杂的细节，重点关注光影表现，亮点和阴影非常齐全。

15 .写实图标从零几年到几年，直接反映现实，投影现实，方便用户一眼就能设置功能，知道这个按钮在做什么。后来，由于显示器的分辨率跟不上，慢慢地风格扁平化，近年来盛行起来。最典型的是苹果的Mac系统上的图标。

16. 2.5D图标基于透视图创建，在XYZ轴上具有立体透视效果。

17 .卡通图标适用于固定的功能区/类别区域，一般多用于运营位。

18 .图片处理图标常见于生鲜类APP，让食物看起来更真实、更生动。

19 .装饰图案填充图标黑白线品牌颜色，或两种相近的颜色。

20 .头像弱面强线整体外形识别度高，更符合头像表现。

21 .线面定位图标双色图标的基础上，线条与平面还可以按一定的比例进行缩放，使用统一/规整的图案，进行透视与定位设计，呈现整体交替叠加的视觉效果。

22 .动漫插画头像整体上很卡通、可爱，给人一种二次元的感觉。

五、设计规范图标是任何设计系统或产品体验的重要组成部分。无论使用什么语言，图标都有助于快速导航。最重要的是，它非常小，所以不占用很多地方。图标是优秀设计系统的基本组成部分。因此，科学严谨的设计规范有助于设计出风格精致、统一的图标。

1 .大小ios删除格式4的倍数，安卓删除格式8的倍数。两端加起来需要选择8的倍数。此外，由于ios的最小可点击区域为44px，因此48px是合适的大小。最好执行以下4或8的倍数，而不是硬性规定。

图标绘制基于48x48px画布绘制的线性图标。线宽默认为4px。

在不同的场景比例中使用：

图标为64x64px时线宽为6px (基准线宽度)图标为32x32px时线宽为3px )基准线宽度)图标为24x24px时线宽为2px )基准线宽度)图标为16x16px时线宽为2px )基准线宽度)

2 .图标keyline线图标网格为图形元素的一致灵活定位建立了明确的规则，keyline形状是网格的基础。使用这些核心形状作为参考线，可以在系统图标之间保持一致的视觉比例。

3 .图标关键图形图标网格用于浏览图标元素的绘制，以帮助您明确内容的轮廓边界。有助于促进关键线图标的统一性，简化设计中缩放的成本。绘制小图形需要参考小正方形的Keyline。

4 .图标角1 )直角角

如果基础形状是充满容器的正方形，建议使用3X圆角。对于基础形状为高度较高(宽度较大)的矩形，建议使用2X圆角。如果基础形状是小于宽度1/2的矩形，建议使用1X圆角。

2 )非直角角

直角以外根据图标场景而不同。无论角度如何，默认值通常为1X圆角。根据图标设计的需要单独考虑，特殊弧度曲线“角”除外。

5 .图标区域封闭和非封闭区域。由封闭曲线构成的是封闭区域，可以用独立的颜色填充。

非封闭区域、非封闭曲线构成的是非封闭区域，原则上不能独立上色。

如果封闭区域有以曲线形状交叉的线段，原则上就不能独立上色。

6 .图标配置为了保证线条和端点在样式上的整体一致性，图标中的所有线条的端点默认必须为与线条相同宽度的圆角端点；通常，线段端点和可编辑节点的坐标最好是整数坐标。

基于默认48dp画布绘制的线性图标，默认线宽为4dp；直线和曲线随时保持线宽恒定。

7 .图标绘制规则线段与曲线相交或与直线不垂直时，线段末端使用圆头；线段与直线垂直相交时，线段末端用方头；如果点的直径与线宽相同，则用图形绘制点，而不使用线段。

如果圆和方块小于16px，建议不要用线条而是用图形绘制。

8 .图标倾角图标的倾角应为45的倍数，并与Keyline对角线或十字垂直相交线保持平行。

对于矩形轮廓，倾斜角度还可以与矩形对角线或十字垂直相交线保持平行。

角度为45、30和60的对角线看起来比不均匀角度的对角线(如13.7或81)更锐利。

9 .图标接口与间距内部结构与边框间距不得小于线宽；内部元素之间的间距不应小于线宽的2/1px。

外形端口大小梯度： 4px、8px、12px，建议大小为4的倍数。

10 .图标样式转换允许图标在特定规则下在不同样式之间进行转换。它们分别是线性样式(缺省)、填充样式、混合样式和多色混合样式。

11 .命名规则科学和高效的命名规则有助于我们快速找到自己制作的图标，并且可以协助开发缩短命名时间，提高团队合作效率。剪切的命名可以遵循“业务_类型_功能_大小_状态”的格式，优选使用英语。

12 .页面或功能英文对照表13. UI模块6、图标设计评测标准已经了解图标的基本理论，如何设计好的图标呢？我们设计的图标符合产品吗？在这里，我们将从四个方面来理解什么是好图标。

1 .识别性设计师们可能过于注重形式，忽略了自己的功能，导致图标难以识别。这打破了最重要的图形图像属性。传达图标意思的功能必须放在第一位。

图标是对象或动作的视觉表示形式。对用户来说，如果不知道此图标的含义，图标将立即失去实用价值，并造成视觉干扰。在图标设计中，要保证图形简单、严密、清晰、边缘干净。这是提高产品界面质量感的重要而基础性的部分，而不是盲目追求流行的视觉风格和炫耀。

除了达到基础水平外，还可以在图标中融入品牌信息，用有趣的细节吸引图标，提高用户对产品/品牌的好感度。

图标设计理念的本质是减少到最简单的形式。之所以要简化图标，是因为需要降低学习曲线。图标即使尺寸很小，也需要设计得容易阅读和清晰。因此，精心设计的图标必须能够快速识别，以便一目了然。

2 .归一化需要保证每个图标视觉大小的一致性。图标网格用于浏览图标元素的绘制，以帮助创建清晰的内容轮廓边界。有助于促进关键线图标的统一性，简化设计中缩放的成本。

3 .统一性在绘制一系列图标时，统一性非常重要。请勿在一系列图标中混合不同的样式。样式一致性有助于用户识别图标，并了解它们具有同等的重要性或状态。

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

4 .呼吸感呼吸感是指适当地保留空白。无论是制作图标还是界面，适当保留空白的话，主体会被强调，空间会有张力，容易看到。图标的相邻元素之间的空间不应太小或整体不均匀。定义最小间隙，使轮廓“不粘”，并将其保留在某个地方。

七、总结图标设计是设计师必备的能力。图标设计看起来很简单，但做好并不容易。好的图标设计不仅能帮助用户更有效地解决问题，也有助于产品和品牌的差异化。虽然对设计师们的细节非常考验，但如果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协议。