零基础学图标设计
11文章数
8.9k总字数
2章节数
64配图数
22总分钟
知识库概述
从图标的基础知识拓展到不同风格演示，体系化提升UI设计图标能力。
本知识库搬运自 ：
仅做收藏学习使用，请支持 UX百科 原创
在 UI 的设计体系中，图标是最重要的组成部分之一，是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念，以及正确绘制的方法，是入门 UI 设计的必备条件。
本套知识库面向的是新手同学想要学习绘制图标，或者已经入行但是没有接触过图标绘制工作的设计师。
防止碎片化和太笼统的分享方式，使用更加全面、系统的知识库内容，让同学们学完本套知识库可以达到图标绘制入门的程度。
图标是什么
图标的基本介绍
图标，是一种图形化的标识，它有广义和狭义两种概念：
1.1
图标的使用场景
在现实生活中，图标有诸多应用场景以便利我们的生活。如1.1中所述，图标本身可以用更直接的视觉语言来抽象一段语义或一个概念，所以生活中存在大量需要语义和概念抽象的场景，会选择用图标来指称。
1.2
图标的基本分类
接下来，就要进一步了解在工作中我们要设计哪些图标。
1.3
图标设计的基础知识
矢量图和位图
矢量图和位图 (也称标量图)，是图片在计算机中的两种显示原理，依据原理的不同，这两种图片形式也会有各自不同的性质。
2.1
布尔运算和钢笔
布尔运算和钢笔是我们在完成图标的矢量绘制时最主要的两个工具，大多数图标可以仅通过布尔和钢笔完成轮廓的设计，所以本篇我们着重介绍这两个工具。
2.2
图标的设计工具
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软…
2.3
表意的准确
在上一部分中，我们知道图标的主要作用之一就是作为文字的替代品，具有明确的寓意。比如看见一个放大镜，我们会当成那是搜索，看见钥匙或者锁，我们就会理解成是密码，比如下面这些图标，每一个指代的功能和寓意都是非常直白…
2.4.1
图标的一致性
第二个规范，叫图标的一致性。即一个或一套图标中，应该保持一致的细节。首先看看下面的反面案例。
2.4.2
图形的视觉差
几何图形的视觉差，是对于工具图标来说最重要的细节，在上一节图标一致性中已经提及，它也是平面基础理论中不可忽视的内容，这个理论要解决一个核心的问题，即
2.4.3
图标的栅格
其实，针对图标的规范，新人第一个想到的应该就是参考线了，也就是所谓的栅格模版。但之所以放第二个，是因为工具图标的栅格规范，是根据几何的视觉差特性衍生出来的，而不像后面会提到的应用图标由官方提供出来。
2.4.4
像素对齐
在栅格的绘制中，细心的读者肯定发现了几个关键字，“对齐”、“偶数”，这就是在这一部分要提及的内容。关于显示器的倍率问题是 UI 基础知识点之一，可能有的同学不太了解，不过没关系，直接看下面的内容即可。
2.4.5