设计师必看！超全面的图标基础知识
日常生活和工作中，我们与各种各样的界面打交道。作为设计师，图标是界面视觉组成的关键元素之一。了解图标相关的知识，以及正确规范的绘制方法，是入门设计的必备条件之一。本文将对图标进行系统的介绍，希望我的这篇文章可以给大家带来一些帮助。
一、什么是图标
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，这次的更新把图标采用了“新拟物”。“新拟物”的前身就是拟物图标，这是最早被Apple提出的设计概念，就是在界面中模仿现实物体纹理材质，在特定光照下的效果设计；目的是让人们在使用界面时习惯性地联想到现实物体的使用方式。而“新拟物”是将真实光线用于虚拟对象。
三、产品应用图标
产品应用图标，也叫启动图标，是品牌和产品的核心元素。图标以简单、大胆、友好的方式传达产品的核心理念和意图。因为产品应用图标的设计师不同，设计无法得到统一，所以苹果官方在ios系统中统一了圆角矩形的大小，在有限的区域内进行设计。而安卓就没有那么规范，处于百家齐放的现象。
1. 中文文字图标
常见中文图标又分为单字、多字和字加图形的几种类型。提取产品名称中最具代表性的独立文字，进行字体设计，通过对笔画及整体骨架进行设计调整，以达到符合产品特性和视觉差异化的目的。作为国人对汉字的敏感度，这样的设计形式大大降低了用户对品牌的认知成本。
2. 英文字母图标
英文字母图标通常是提取产品名称首字母进行设计，由于英文字母本身造型简洁，结合产品特点进行创意加工，很容易达到美感和识别性兼备。
3. 数字图标
数字对于我们来说是非常敏感的，利用数字进行设计能给人亲和力。由于数字的识别性很强，易于品牌传播与用户记忆。
4. 特殊符号图标
特殊符号图标在应用图标的设计案例中相对较少，由于符号本身的含义会对产品属性有一定限制，所以针对性比较强。
5. 几何图形图标
几何图形的运用设计给人简约、现代、个性、富有空间感等视觉感觉，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。
6. 动物/单双行剪影图标
动物剪影通常是提取动物整体形象或者局部特征部位作为设计元素，这类应用图标背景为单色或者渐变色，少量的会辅助一些图形作为背景元素，动物采用单色填充，以白色填充居多。
单双形是指应用图标只展示单个或两个的剪影图形，生活中可以作为剪影设计的元素很多。如食物、工具、生活用品、学习用品、娱乐道具等等。可以独立形成剪影图形，也可以根据产品特点进行创意加工，最终形成应用图标独有的造型图案。
7. 图形重复图标
将相同的图形进行有序的排列，排列形式有梯度变化、等大均排、规律性重复、配色差异、大小错落等。这样的设计方式可以给单调的图形增加层次感和构图饱满，有一定梯度变化和规律性重复的图形组合可以传递一定的韵律感和动感。
8. 正负形图标
正负形的设计在LOGO图形设计中是比较常见的表现手法，运用在图标设计中，以正形为底突出负形特征，以负形表达产品属性。利用正负形进行设计，图形设计感较强，正形与负形可以更加充分地表达产品特征与服务。
9. 线形图标
线性图标风格给人简洁轻快的感觉，线性设计的方式分闭合式和开放式，可以是一条连续的线条或者几条线段组成。在有色背景上面线条通常反白处理，背景设计可以是单色、渐变色、其他辅助图形设计等。
10. 白色渐变图标
白色渐变图标是利用白色渐变填充，不透明度 100%到X%之间设置完成。白色渐变图形具有空间感、质感，视觉效果较好，被广泛运用在应用图标设计中。
11. 彩色渐变图形
彩色渐变图标是利用多种颜色进行渐变，比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。
12. 动物局部图标
利用动物局部进行图形设计，可以让元素特征更加明显。比起展示整个动物形象，局部特征展示视觉表现力更强。
13. 人体局部图形
利用人体局部作为图形设计元素，比较常用的有眼、嘴巴、手掌、头部等。利用人体的元素进行设计，用户对图形的敏感度更强，易于传播和记忆。
14. 卡通形象图标
卡通形象与动物形象容易混淆，因为很多卡通形象都是基于动物设计演变而来。这里单独提取出来是为了归类一些单纯以动物外形为设计元素的表现手法。卡通形象设计在应用图标的设计中是非常常见的，很容易对用户形成记忆。
15. 拟人化图形图标
通过对接近圆形或者构图饱满的图形添加眼睛等元素，可以使整个图形拟人化。给原本冰冷的图形赋予其生命，拥有一定的情感表达，让产品更加亲民，更容易被用户所接受和记忆。
16. 从功能服务提炼图形
为了更加清晰的传递产品的某项功能与服务，根据产品的功能服务提取元素进行图形设计也是比较常用的表现手法，如计算器、日历、导航等直接提取相关联的图形元素进行设计，一目了然地传递出产品信息。也可以从产品服务内容入手进行提炼，如教育类产品，提取学士帽为元素进行设计。
17. 渐变色背景图标
渐变色背景的运用越来越受到设计师青睐，相对于单色的背景视觉表现力更加丰富，整体色彩给人通透的感觉。渐变色可以是双色渐变，也可以是多色渐变，根据产品的气质灵活地运用。
18. 文艺风格图标
文艺风格图标设计配色清新、复古、简约，适合带有文艺风格类的产品。设计方向为简约的图形组合或者文艺风格的字体设计为主，图标整体留白较多，配色简约，白色背景居多。如果是深色背景则采用黑色、复古色为主。
19. 活动氛围图标
对应用图标进行特定的活动氛围包装。会保留原本的图形面貌，进行整体的氛围营造，以突出购物火爆的场景感。
20. 游戏角色图标
游戏类应用图标设计需要设计师具备较强的写实图标设计功底，设计方向主要有：游戏角色、纯文字、道具或标识、明星头像、辅助图形或元素等。设计表现力需要颜色鲜艳、角色表情和动作夸张、设计精美有质感等。
IOS启动图标keyline线规范：
苹果官方会给 Production Templates 文件，我们只需要使用1024px*1024px这个尺寸进行启动图标的设计，把设计好的的启动图标放在文件里的智能对象的图层里，这个时候你会发现所有的尺寸的图标都会换成我们做好的启动图标。
这里提醒一下，虽然我们看见的iOS的图标是个圆角矩形，但是机上它并不是标准的圆角矩形，而是某种连续曲线。但我们很难肉眼地看出区别，因此并不用纠结它的圆角，按照直角矩形的尺寸进行绘制就好。
Android启动图标keyline线规范：
创安卓 Material Design 要求的基本尺寸说 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. 写实图标
零几年一几年的时候，直接反映现实、投射现实，方便用户看一眼就知道设个功能或者这个按钮是干嘛的，后来因为显示器的分辨率跟不上，慢慢风格变为扁平化，最近几年又逐渐兴起，最典型的就是Apple的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模块
六、图标设计的评判标准
我们已经了解了图标的基本理论，那我们如何设计出一个好的图标呢？怎么看我们设计的图标是否符合产品呢？下面我们将从4个方面进行了解，什么才是一个好的图标。
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
本文作者 @明非 。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
