首页 
零基础学图标设计
知识点 0/8 · 4%
0. 概述
2. 图标设计的基础知识2.1 矢量图和位图
2.2 布尔运算和钢笔
2.3 图标的设计工具
2.4 图标的设计规范2.4.1 表意的准确
2.4.2 图标的一致性
2.4.3 图形的视觉差
2.4.4 图标的栅格
2.4.5 像素对齐
知识库概述
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
本套知识库面向的是新手同学想要学习绘制图标，或者已经入行但是没有接触过图标绘制工作的设计师。
防止碎片化和太笼统的分享方式，使用更加全面、系统的知识库内容，让同学们学完本套知识库可以达到图标绘制入门的程度。
图标是什么
已学会 0/3 · 知识点 0/1
图标的基本介绍
图标，是一种图形化的标识，它有广义和狭义两种概念： 广义，指的是所有现实中有明确指向含义的图形符号； 狭义。指的是在计算机设备界面中的图形符号，有非常大的覆盖范围。 对于 UI 设计师而言，我们主要针对的就是狭义的概念，它是 UI 界面视觉组成的关键元素之一。 在当下最常见的扁平化设计风格中，界面的...
图标的使用场景
在现实生活中，图标有诸多应用场景以便利我们的生活。如1.1中所述，图标本身可以用更直接的视觉语言来抽象一段语义或一个概念，所以生活中存在大量需要语义和概念抽象的场景，会选择用图标来指称。 例如，交通标志。交通规范在现代社会中是一个相对复杂的系统性规范，各种规范的概念都需要人们在社会生活中慢慢熟悉和掌...
图标的基本分类
接下来，就要进一步了解在工作中我们要设计哪些图标。 可以先划分成三种大类： 工具图标 装饰图标 启动图标 下面，我们将为对它们分别进行介绍，方便读者在开始学习具体设计前，对 UI 设计图标有更全面的认识。 工具图标 首先，我们要说的是工具图标。这是我们在日常讨论中提及最频繁的图标类型，即应用内有明确...
图标设计的基础知识
已学会 0/8 · 知识点 0/5
矢量图和位图
矢量图和位图 (也称标量图)，是图片在计算机中的两种显示原理，依据原理的不同，这两种图片形式也会有各自不同的性质。 矢量图 Vector 矢量图指的是由一连串向量点 (带有方向信息的点) 和曲线所形成的图像，计算机在获得一些点的位置、方向、曲率、曲线的描边和填充各项数据之后，可以自动计算得出一副图像...
布尔运算和钢笔
布尔运算和钢笔是我们在完成图标的矢量绘制时最主要的两个工具，大多数图标可以仅通过布尔和钢笔完成轮廓的设计，所以本篇我们着重介绍这两个工具。 布尔运算 图形绘制中的布尔运算指的是几种特定的，图形意义上的逻辑运算，例如：交集、并集、相减等等。只通过语言描述可能无法直观理解，但看一下图例就一眼便知。 并集...
图标的设计工具
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精...
表意的准确
在上一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白、清晰的。 表达的寓意清晰，是工具图标最基本的要求，否则它只会传递错误的信息，造成用户的困惑...
图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。 在上面的案例中，不同图标间有很大的割裂感，完全不像处于同一套设计体系之下，这就是缺乏一致性的表现。这也是新手在设计一整套图标最大的难点，要让所有图标保持视觉细节上的一致。 下面对工具图标要保持视觉一致性有哪...
图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即 怎么让不同的图形看上去一样大？ 可能有的读者看到这里会轻蔑一笑，这有什么难的，通过软件的参考线或者属性设置，把它们的长宽设置成一样不就完事了，比如下图...
图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。 我们先简单看看，常见的工具图标栅格是什么样的。 里面包含了正方形、长方形、圆形对不对，那我们把它们分...
像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。 我们都知道像素是屏幕显示中的最小单位，一个像素只能显示一种颜色。小时候玩过的 GBA、FC 游戏机...
图标设计实例
已学会 0/4 · 知识点 0/0
工具图标的设计实例
线性图标设计演示 前面啰嗦了那么多，到这篇开始就要进入到大家最喜欢的操作演示环节了！主要演示的是线性风格的设计，包含 8 个图标的绘制，如下图所示。 线性图标是所有图标中最基础的设计形式，也是最入门和最简单的。在我们设计后续的其它风格图标前，首先要通过线性图标的练习来打下坚实的基础！ 什么是图标的基...
操作总结和线面转换
线性图标操作总结 作为图文教程，没办法精细还原每一步操作，即使我们对第一部分的图标设计理论已经有了深刻的认识，但在实际操作阶段还是有很多小细节会阻挠我们设计的进度。下面，我们会列举一些具体的问题，帮助大家更好的认识和解决操作过程的难题。 栅格的使用 就是针对栅格的使用了，为了便于演示，我都给出了具体...
装饰图标的设计实例
在装饰图标中，就没有工具图标那么严谨的规范需要遵循，也就意味着自由度越高，可以任意发挥。显然，想要通过一篇文章掌握所有的装饰图标视觉设计方法，并不现实，这里只先解释最常见的装饰图标类型——几何背景，即在一个应用了渐变色的背景上帖了一个线性或面性的图标。 这类图标的绘制方法需要分成两个部分来说——背景...
启动图标的设计实例
本章我们开始讲解最后一种类型的图标——启动图标。在第一章我们已经对启动图标有了基础的认识，想要在启动图标设计上入门，就要先从规范开始学习，然后了解不同的风格以及对应风格的设计过程。如果没有比较明确的学习目标，就会和学习 LOGO 设计一样无从下手。 启动图标的设计规范 说到启动图标的规范，首先会想到...
工具图标的进阶
已学会 0/3 · 知识点 0/1
多种粗细风格
风格说明 多种粗细风格是基础线性的一种简单的变体，它通过调整线性图标内部一部分秒变的粗细来增加描边的层次感，从而让图标不会显得那么无聊。 设计要点 多粗细图标最关键的就是要挑选更改粗细的那条线，但每个图标的个体情况有差异，就无法一概而论，大致上可以有两种选择。 内部线段 在大多数基础线性图标中，都存...
多色描边风格
风格说明 多色描边风格和多种粗细非常相似，后者是在图标中选择一段线段，做出秒变粗细的变化，而前者则是做出色彩的变化，而色彩的醒目程度永远比粗细更加明显，所以多色描边是更常用的线性图标变体。 设计要点 线段选择 与多种粗细风格图标相同的是，在大部分图标中我们仍然可以选择其内部的独立结构进行变色，或添加...
描边缺口风格
风格说明 描边缺口风格，是在原有的线性图标基础上，刻意增加一个或两个缺口，让图形处于非闭合的状态，从而让图标的样式不那么呆板，更具个性。 设计要点 缺口的位置 对于外轮廓为矩形、圆形等规则图形的图标来说，因为这些图形的对称性，缺口位置的选择并没有什么讲究，只要别扣掉一个角，其他位置都可以。 对于大多...
装饰图标的进阶
已学会 0/3 · 知识点 0/1
轻拟物风格
风格说明 轻拟物是近几年兴起的一股复拟物化的古的风潮，这一股隐隐的风潮在 MacOS Big Sur 发布时被摆上了台前。轻拟物风格介于拟物和扁平之间，仅采取拟物中能够塑造立体感的高光和阴影部分，舍弃细节的结构和纹理，所以可以明显感觉到轻拟物没有拟物图标这么繁复复杂，观感上却有很强的立体感。 所以轻...
玻璃拟态风格
风格说明 玻璃拟态是近几年非常流行的图标风格，众所周知设计圈某一风格能流行起来并不代表它能受 App 产品的青睐从而真正落地，但玻璃拟态却是近几年鲜有的能落地的风格。因其恰到好处的质感、简洁不繁复的细节、较低的设计难度成为一种独特的图标、界面设计风潮。 那玻璃拟态是什么呢？简而言之，就是让设计元素中...
实物贴图风格
风格说明 实物贴图是在电商中比较常见的图表类型，尤其是数码类、鞋服类的电商。说它是图标，其实本质上也只是用「图片」来代行了图标的功能，所以此类图标是一种极致实用主义的图标。 设计要点 这类设计看起来很简单，只要画出一个几何的背景，并建立蒙版将实物图置入进去即可，但还是有不少新手会犯的错误，下面我们主...
推荐笔记
my
16小时前
C端：Consumer（也可理解为Customer），通常为消费者、个人终端用户使用的客户端。如：微信、淘宝、网易云音乐等。
B端：B端，代表企业用户商家，英文是Business，是互联网产品中的商家界面（即：管理平台）。用户通过它进行日常的商业活动，例如企业库存管理，销售统计，员工出勤考核等等。可以说，用来解决企业需求的产品，都是 B 端产品。
————————————————
版权声明：本文为CSDN博主「ABin-阿斌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Mango_Bin/article/details/131873231
B 端产品构建思路和 C 端有所不同
SL00000000
2025-08-12
矢量图特点：无论放大多少倍，都平滑无损
因为矢量图本身只储存构成图像的形状和颜色信息，所以矢量图有一个很关键的特性：无论图片放大多少倍，图像依然是平滑无损的。
SL00000000
2025-08-12
矢量图定义
矢量图指的是由一连串向量点 (带有方向信息的点) 和曲线所形成的图像，计算机在获得一些点的位置、方向、曲率、曲线的描边和填充各项数据之后，可以自动计算得出一副图像。
白猫
2025-08-01
这个确实没有想到
透视的表现不是绘制图标时必须使用的风格，但是如果我们在图标中应用了透视，就要确保我们使用的视角是一致的。要极力避免同一套图标中既用了正视图又包含了斜视图。
啦
2025-07-31
网站素材
我们可以挑选出某个合适的实物，以它作为原型开始绘制。如果对这些挑选出来的实物要以什么图形表现还是没概念，那就可以借助网上的图标素材网站，比如 iconfont、iconfinder 等，在搜索框中输入这些词语，通过别人的设计收获灵感。
星期五
2025-07-22
视觉感觉优先于规范
面性图标不代表完全不能出现 “线性” 元素，在一些特定的情况下，我们依旧要通过线条的形式展示图形轮廓，比如搜索图标的镜片，使用全填充的样式显然效果不理想，所以镂空镜片区域是不可避免的。
星期五
2025-07-22
用线作图可能会错误 线宽根据图形变化的意思？
有很多 1pt 宽的直线，可能我们会习惯于使用线条工具绘制，这是错误的做法，我们需要使用矩形工具画出一个完整的闭合图形，再样在使用路径查找器工具或者对图形进行批量操作时才能保证统一。
Leon
2025-06-16
改变粗细本身并不是什么很难的操作，在描边属性设置中直接修改数值便可，具体数值上可以选择粗边的一半或三分之二 (取约合后的整数)，过细和过粗都不太适合。
改变粗细本身并不是什么很难的操作，在描边属性设置中直接修改数值便可，具体数值上可以选择粗边的一半或三分之二 (取约合后的整数)，过细和过粗都不太适合。
UX小学生
2025-06-13
实物图标风格
物体的透视 和工具图标一样，我们要尽可能的保证整组图标中图形的形状和透视可以统一，如果实物图采用的透视不一致，那么空间的对立感就更强，也有更容易被用户觉察到的违和感。
UX小学生
2025-06-13
描边缺口风格
设计要点 缺口的位置 对于外轮廓为矩形、圆形等规则图形的图标来说，因为这些图形的对称性，缺口位置的选择并没有什么讲究，只要别扣掉一个角，其他位置都可以。
yyy
2025-05-13
图标和其他元素的区别
可以说，图片、文字、几何图形的运用，都只用到排版的技巧，而图标，是 UI 设计中除了插画元素以外唯一需要我们 “绘制”、“创作” 的元素，一涉及到这两件事，难度就直线上升了。
bibi
2024-12-22
出过这样的错。。。
需要注意的是，有很多 1pt 宽的直线，可能我们会习惯于使用线条工具绘制，这是错误的做法，我们需要使用矩形工具画出一个完整的闭合图形，再样在使用路径查找器工具或者对图形进行批量操作时才能保证统一。