在我们的日常生活和工作中，我们会接触到各种各样的接口。 作为设计师，图标是界面视觉构成的关键元素之一。 了解图标相关知识以及正确规范的绘制方法是设计入门的前提之一。 本文将对图标进行系统的介绍。 希望我的文章能给大家带来一些帮助。
1. 什么是图标 1. 概念
图标是图形标志。 它有两个概念：广义和狭义。 广义的图形符号主要是指具有参考意义的图形符号，具有高度凝练、快速传达信息、易于记忆的特点。 图标是代表文件、程序、网页或命令的小图片或对象。
图标帮助用户快速执行命令和打开程序文件。 单击或双击图标以执行命令。 图标还用于在浏览器中快速显示内容，所有具有相同扩展名的文件都具有相同的图标。
随着计算机的出现，图标被赋予了新的含义和新的用途。 在这里，图标成为具有明确含义的计算机图形。 桌面图标是软件标识，界面中的图标是功能标识。 在计算机软件中，它们是程序标识符、数据标识符、命令选择、模式信号或开关、状态指示。
图标在计算机视觉操作系统中起着极其重要的作用。 它们可以代表文档、程序、网页或命令。 我们还可以通过图标来执行命令或者打开某种类型的文档。 您所要做的就是单击或双击该图标。
图标是具有象征意义的图形。 它不仅是一个图形，也是一个标志。 它具有高度凝练、快速传达信息、易于记忆的特点。
2. 面积
图标广泛应用于软件、硬件、网页、社交场所和公共场所。 例如：商场内的引导系统、男女厕所标志及各种交通标志等。狭义上主要指计算机软件中的应用，包括：程序识别、数据识别、命令选择、模式信号或开关、状态指示等
二、图标的发展历史 一、起源
图标不仅有着悠久的历史，从古代的图腾到20世纪、21世纪的各种具有更多意义和功能的图标，而且有着极其广泛的应用。 可以说，它们无处不在。 1973 年由施乐帕洛阿尔托研究中心发明。 这台计算机首次采用了桌面隐喻和鼠标驱动的图形用户界面（GUI）技术，诞生了最早具有图形界面的计算机，即著名的“Xerox Alto”。
但当时计算机性能不足，董事会也不看好，因此并未商业化。 因此，这款概念机并没有进入人们的视野。 然而，它的后续型号 Xerox Star 于 1981 年问世，成为计算机历史上的一个里程碑。 里程碑。
1979年，乔布斯参观了施乐的PARC研究所，看到了施乐的原型机Xerox Alto。 乔布斯决定开发一台具有图形用户界面的新计算机。 1983 年，Apple 推出了 Apple Lisa，这是第一台使用 GUI 的商用计算机。 1985年，微软也采用GUI推出了Windows 1.0。
2. 流程
在20世纪80年代，我想让图标更加具体，但由于当时计算机性能的缺乏，我无法做到，所以设计师只能在有限的空间内进行创作。 越具体越好，越好。
微软和苹果相继推出了新的系统界面。 1995年随着电脑显卡分辨率和色域的提高，设计师或者艺术家有了更大的发挥空间，随之而来的是使用更多的颜色和更多的多透视效果的可能性。 一开始我只能设计简单的单色图标，但后来我能够实现各种创意，实现各种效果，直到现在。
2007年，苹果发布了第一代iPhone和iOS系统。 主题图标与当时的mac OS系统一致。 玻璃质感和拟物风格非常出色。 它的出现打破了人们对“传统手机”的定义。 这款iPhone的主题图标风格一直稳定图标栅格线模板，直到iOS7发布，随后出现了颠覆性的变化。
2013年WWDC大会上，苹果发布了iOS7系统，系统界面开始转变为扁平化风格。 这次发布会也导致拟物风格逐渐衰落。 直到扁平化风格完全普及后，拟物化风格才不再被广泛使用。
2020 年 WWDC20 上，苹果发布了 mac OS Big Sur。 本次更新采用了“新准物体”图标。 “新拟物化”的前身是拟物化图标，这是苹果公司最早提出的设计理念。 就是在界面中模仿真实物体的质感和材质以及特定灯光下的效果设计； 目的是让人们习惯使用界面。 让人想起真实物体的使用方式。 “新拟物主义”将真实的光线用于虚拟物体。
3. 产品应用图标
产品应用程序图标，也称为启动图标，是品牌和产品的核心元素。 图标以简单、大胆、友好的方式传达了产品的核心理念和意图。 由于产品应用图标的设计者不同，设计无法统一，因此苹果官方统一了iOS系统中圆角矩形的尺寸，并在有限的区域内进行设计。 Android还没有那么规范，是百家齐放的现象。
1.中文文字图标
常见的中文图标分为单字、多字、字加图等类型。 提取产品名称中最具代表性的独立字符，进行字体设计，调整笔画和整体骨架，以达到符合产品特性和视觉差异化的目的。 由于中国人对汉字比较敏感，这种设计形式大大降低了用户对品牌的认知成本。
2.英文字母图标
英文字母图标通常是通过提取产品名称的首字母来设计的。 由于英文字母本身形状简单，并根据产品特性进行创意加工，很容易实现美观与辨识度的兼具。
3. 数字图标
数字对我们来说非常敏感，用数字进行设计可以让人变得更平易近人。 由于数字具有高度可识别性，因此易于品牌传播和用户记忆。
4.特殊符号图标
特殊符号图标在应用图标设计案例中比较少见。 由于符号本身的含义会对产品属性产生一定的限制，因此相对具有针对性。
5.几何图标
几何图形在设计中的运用，给人以简洁、现代、个性、空间感的视觉感受。 从单一的具体图形到复杂的空间感，几何图形的表现形式非常丰富。
6.动物/单双线剪影图标
动物剪影通常提取动物的整体形象或局部特征部分作为设计元素。 这类应用程序图标的背景为单色或渐变色，并有少量辅助图形作为背景元素。 动物被填充为单一颜色，并且大多数被填充为白色。
单形和双形是指仅显示单个或两个轮廓图形的应用程序图标。 生活中有很多元素可以用作剪影设计。 如食物、工具、生活用品、学习用品、娱乐道具等。剪影图形可以独立形成，也可以根据产品特性进行创意加工，最终形成应用图标的独特形状图案。
7.图形重复图标
将相同的图形有序排列，有渐变变化、等大小均等排列、规律重复、色差、大小交错等。这种设计方法可以给单调的图形增添层次感、构图饱满。 具有一定渐变变化和规律重复的图形组合可以传达一定的节奏感和动感。
8. 积极和消极的图标
正反造型设计是LOGO图形设计中比较常见的表现手法。 用于图标设计时，以正形为基底，突出负形的特点，用负形来表达产品属性。 利用正反形状进行设计，具有很强的平面设计感。 正反形状可以更充分地表达产品特征和服务。
9. 线条图标
线性的图标风格给人一种简洁、轻盈的感觉。 线性设计方法分为封闭式和开放式两种，可以由一条连续的线或几条线段组成。 彩色背景上的线条通常是反转的，背景设计可以是单色、渐变或其他辅助图形设计。
10.白色渐变图标
白色渐变图标填充白色渐变，不透明度设置在100%到X%之间。 白色渐变图形具有空间感、质感，具有良好的视觉效果，广泛应用于应用程序图标设计中。
11.颜色渐变图形
颜色渐变图标使用多种颜色来执行渐变。 与白色渐变图形相比，彩色渐变图形具有更丰富的色彩表现力。 渐变组合多种颜色时，要注意色调的对比，营造空间感。
12.动物部分图标
利用动物部位进行平面设计可以使元素的特征更加明显。 局部特征不是展示整个动物形象，而是更具视觉表现力。
13、人体局部图形
利用人体的部位作为图形设计元素，常用的有眼睛、嘴巴、手掌、头部等。利用人体的元素进行设计，使用户对图形更加敏感，更容易传播和记忆。
14.卡通形象图标
卡通形象和动物形象很容易混淆，因为许多卡通形象都是以动物图案为基础的。 这里单独摘录，对一些单纯以动物造型作为设计元素的表现手法进行分类。 卡通形象设计在应用图标的设计中非常常见，很容易让用户形成记忆。
15.拟人化的图形图标
通过在接近圆形或具有完整构图的形状中添加眼睛等元素，可以将整个形状拟人化。 赋予原本冰冷的图形生命，并具有一定的情感表达，使产品更加亲民，更容易被用户接受和记住。
16.从功能服务中提取图形
为了更清晰地传达产品的某种功能和服务，根据产品的功能和服务提取元素进行平面设计也是一种常见的表达方式。 例如计算器、日历、导航等可以直接提取相关图形元素进行设计，一目了然。 传递产品信息。 您还可以从产品和服务内容（例如教育产品）开始，提取学士帽作为设计元素。
17.渐变背景图标
渐变背景的使用越来越受到设计师的青睐。 与单色背景相比，视觉表现力更加丰富，整体色彩给人一种透明的感觉。 渐变色可以是二色渐变，也可以是多色渐变，可以根据产品的气质灵活运用。
18.文学风格图标
文艺风格的图标设计，配色清新、复古、简约，适合文艺风格的产品。 设计方向主要是简单的图形组合或者文艺风格的字体设计。 整体图标有大量的空白，颜色简单，背景大多为白色。 如果是深色背景，则以黑色、复古色为主。
19. 活动气氛图标
将应用程序图标与特定的事件氛围打包在一起。 原有的图形外观将被保留，并营造整体氛围，突出流行的购物场景。
20.游戏角色图标
游戏应用图标设计要求设计者具有较强的写实图标设计能力。 设计方向主要包括：游戏角色、纯文字、道具或标志、名人头像、辅助图形或元素等。设计表现力要求色彩鲜艳、夸张的人物表情和动作、精致而有质感的设计等。
iOS启动图标键线规范：
苹果将正式提供生产模板文件。 我们只需要使用1024px*1024px的尺寸来设计启动图标即可。 将设计好的启动图标放入文件中的智能对象层中。 这时候你会发现所有的尺寸。 这些图标将替换为我们制作的启动图标。
提醒一下，虽然我们看到的iOS图标是圆角矩形，但它并不是机器上标准的圆角矩形，而是某种连续的曲线。 但我们用肉眼很难看出区别，所以我们不用担心它的圆角，按照右边矩形的大小来画就可以了。
Android启动图标keyline线规范：
Chuang Android Material Design 要求的基本尺寸是 48dp，但这是 1:1 的尺寸，也是原始尺寸。 绘制时要求是基本尺寸的400%，即192dp。 相应的网格基准从 1px 开始变化。 到 4 像素。 通过保持此比例，对原始图像所做的任何更改都将按比例放大或缩小，从而在比例值返回到 100% (48dp) 时保留锐利边缘和正确对齐。
图标网格为图形元素的一致而灵活的定位建立了清晰的规则。 关键线形状基于网格，通过使用这些核心形状作为基线，您可以在整个产品图标中保持一致的视觉比例。 这些关键线形状使用预设标准：圆形、正方形、矩形、正交和对角线。 它们统一了产品图标并在网格上保持一致的位置。
4. 功能图标 1. 单色线性图标
风格简约，外观简洁，辨识度强图标栅格线模板，视觉感受轻松干净。
2. 二色线性图标
它的表现力更强，细节更丰富。 色彩的叠加、对比、互补，增强了图标的层次感和丰富度。
3.不透明度线性图标
不透明度的叠加和变化，提高了图标的层次感和空间感，减少了图标的压迫感。
4.渐变线性图标
渐变的线性带出了图标的质感，结合“不同深度”或“不同饱和度”的变化，让图标更加细致、有层次。
5.单色表面+虚线彩色图标
外观采用统一的颜色，根据图标的不同属性感知，使用不同的颜色进行点缀； 或以不同颜色为主色，黑白为点缀色。
6.双色图标
通过对比色和相邻色的组合营造出整体的图标氛围，增强了图标的层次感和丰富度。 双色表达也增加了图标的趣味性。
7.渐变图标
弱渐变可以改善图标的纹理。 渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。
8. 不透明度/灰度/饱和度变化
使单色图标更具层次感和空间感，设计细节更丰富，同时减轻了单色图标的沉重感。
9.不透明度/弧度/饱和度变化+渐变
渐变设计提高了脸型图标的质感，颜色也有一定的丰富度。 在渐变的基础上，还可以对图标进行颜色区分，让图标更有层次感。 此类图标用在UI界面的列表或顶部条目中。
10.颜色叠加渗透
图标透明叠加后，产生交错的负形，叠加第三条边。 整体设计依然扁平化，但很有层次感，并增加了图标的细节。
11.渐变图层叠加
整体效果更接近不透明度的变化。 通过渐变深浅的变化，在形状的交接处出现明暗对比，因此图标也具有厚度感和层次感。
12.磨砂玻璃图标
利用背景模糊的效果，相比透明度变化或者颜色叠加，图标在视觉上更具空间感，设计感很强。
13. 浅色纹理图标
与渐变图层叠加类似，不同的是颜色更加丰富。 使用多种色块、多种颜色或多角度渐变和阴影。 整体风格偏向插画风格和渐变质感。 视觉上更接近三维图形，整体风格更偏向。 华丽的色彩风格、丰富的纹理和细节。 大多数用于类别区域，需要比常规单色图标更具吸引力。
14. 浅拟物化图标
核心基础与拟物化设计一致，省略了较为复杂的细节，注重光影的表达，高光和阴影到位。
15.现实的图标
在00年代初和2000年代初，它直接反映现实和投影现实，让用户一眼就知道某个功能或按钮的用途。 后来因为显示器的分辨率跟不上，样式逐渐改为平面样式。 ，近年来逐渐兴起，最典型的就是苹果Mac系统上的图标。
16. 2.5D图标
根据轴测图，XYZ轴有三维透视的感觉。
17.卡通图标
比较适合固定功能区域/品类区域，一般用于操作岗位。
18.照片处理图标
常见于生鲜应用程序中，它使食物看起来更加真实和新鲜。
19.装饰图案填充图标
黑白线+品牌色，或者两种相近的颜色。
20.整体填充图标
弱面强线的造型辨识度更高，更符合图标的表达。
21. 线与面错位图标
在双色图标的基础上，将线条和面按照统一的比例进行缩放，或者采用统一/规则的图案来设计透视和位移，整体视觉效果呈现出交错叠加的效果。
22.卡通插图图标
整体感觉卡通、可爱、二次元。
5、设计规范
图标是任何设计系统或产品体验的重要组成部分。 图标可以帮助我们快速导航，它们与语言无关，而且最重要的是：它们非常小，因此不会占用太多空间。 图标是良好设计系统的重要组成部分。 因此，科学严谨的设计规范可以帮助我们设计出精美统一的图标。
1. 尺寸
对于ios，删除4的倍数的格式，对于Android，删除8的倍数的格式。如果要两端适配，就得选择8的倍数。而且因为最小可点击区域iOS是44px，48px是比较合适的尺寸。 这不是一个硬性规定，最好遵循 4 或 8 的倍数。
图标绘制基于在 48x48px 画布上绘制的线性图标，线宽默认为 4px。
使用不同的场景缩放比例：
2. 图标的主线
图标网格为图形元素的一致但灵活的定位建立了明确的规则，而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. 命名规则
科学高效的命名规则可以帮助我们快速定位自己制作的图标，帮助开发缩短命名时间，加快团队协作效率。 切割图命名可以遵循“Business_Type_Function_Size_Status”的格式，最好使用英文。
12. 页面或功能中英文对照表
13.用户界面模块
6. 图标设计的判断标准
我们已经了解了图标的基本理论，那么我们如何设计一个好的图标呢？ 如何检查我们设计的图标是否与产品相符？ 下面我们将从4个方面来了解什么是一个好的图标。
1. 鉴定
设计者有时过于注重形式而忽视功能本身，使图标难以识别，这就打破了其最重要的图形形象属性——图标传达意义的功能必须优先考虑。
图标是对象或动作的视觉表示。 如果用户不清楚图标的含义，则该图标立即失去实用价值并成为视觉干扰。 在图标设计中，必须保证图形简洁、严谨、清晰、边缘干净。 这是提升产品界面质量的重要且基础的一环，而不是一味追求流行的视觉风格和炫目的技巧。
除了达到基础层面，我们还可以将品牌信息和有趣的细节融入到图标中，让图标更具吸引力，提高用户对产品/品牌的好感度。
图标设计理念的本质是将其简化为最简单的形式——简化图标是出于减少学习曲线的需要。 设计应确保图标即使在小尺寸下也更具可读性和清晰性，因此设计良好的图标应该能够快速识别且一目了然。
2. 规范性
我们需要确保每个图标的视觉尺寸的一致性。 图标网格用作绘制图标元素的参考，有助于建立清晰的内容轮廓边界。 键线有助于提高图标的一致性并简化设计过程中的缩放成本。
3. 均匀性
在绘制一组图标时，一致性非常重要。 不要将不同的样式混合到一组图标中。 风格一致性将帮助用户识别图标并了解它们具有相同的重要性或地位。
界面中的图标一般都是串联设计的。 除了保持视觉风格和特征一致外，同一产品内，相同的功能和信息图标也应保持一致的形状，以避免用户混淆。 图标的统一性可以从线条的粗细、颜色、圆角、倾斜角度来检查。
4.呼吸感觉
呼吸意味着留有适当的空间。 无论是制作图标还是界面，适当的留白都可以突出主题，让空间更有张力和可读性。 图标的相邻元素之间的间距不应太小或在整体中不一致。 定义最小间隙并将其保留在各处以避免轮廓“粘连”。
七、总结
图标设计是设计师必备的能力。 图标绘制看似简单，但做好却并不容易。 Good icon design can not only help users solve problems more efficiently, but also help products and brands form differentiation, which is very Details are a test for designers, but UI design is full of details. If you want your interface to be more refined, don't ignore every point that can be improved.
The above is most of the basic knowledge about icons shared. Icons themselves are a relatively large scope. There will inevitably be a lot of in-depth content in the article. We welcome the advice of directors. Finally, thank you all for reading. I hope today's article can help you.
Appendix·References
《Material Design》
《Apple Developer》
"History of icons"
"An oral history of the hamburger icon"
"Hopefully, the Ultimate Guide to an Interface Icon Set"
"Designers' Must-Read Icon Design Guide"
This article was directed by Hao Xiaoqi
