有招 - 你的生活妙招指南_妙招网

标题: 设计师必看！超全面 的图标底子知识 [打印本页]
作者: 婉清    时间: 2025-4-14 06:54
标题: 设计师必看！超全面 的图标底子知识
编辑导语：图标是界面视觉组成的症结要素之一，而了解这些图标的底子知识，也是入门设计的必备前提之一。本文作者总结了一些产品的图标，对图标的底子知识进行了分析，一起来看一下吧。
一般生活和工作中，我们与各类各样的界面打交道。作为设计师，图标是界面视觉组成的症结元素之一。了解图标相关的知识，以及正确规范的绘制方法，是入门设计的必备前提之一。本文将对图标进行体系的介绍，盼望我的这篇文章可以给大家带来一些资助。

一、什么是图标

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。
差别场景缩放比例利用：

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
本文由 @明非 原创发布于大家都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
作者: 孙金宽    时间: 2025-4-14 07:41
转发了
作者: 任赫文    时间: 2025-4-14 07:47
转发了
作者: 勤学浩问    时间: 2025-4-14 08:11
设计师必看！超全面的图标基础知识
作者: 枫仔    时间: 2025-4-14 08:35
转发了
作者: 和尚用飘柔    时间: 2025-4-14 09:09
总结的很完整，谢谢分享！[赞][赞]



欢迎光临 有招 - 你的生活妙招指南_妙招网 (https://www.yoozhao.com/) Powered by Discuz! X3.5