首页 
从零开始学图标
知识点 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 像素对齐
4
%
从零开始学图标
最后更新于 2024-06-12
#知识库#设计知识
图标指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。
开始学习22
文章数
24.1K
总字数
8
知识点数
23.3K
学习人数
577
学完次数
30
精选笔记
知识库概述
在 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 产品的青睐从而真正落地，但玻璃拟态却是近几年鲜有的能落地的风格。因其恰到好处的质感、简洁不繁复的细节、较低的设计难度成为一种独特的图标、界面设计风潮。 那玻璃拟态是什么呢？简而言之，就是让设计元素中...
实物贴图风格
风格说明 实物贴图是在电商中比较常见的图表类型，尤其是数码类、鞋服类的电商。说它是图标，其实本质上也只是用「图片」来代行了图标的功能，所以此类图标是一种极致实用主义的图标。 设计要点 这类设计看起来很简单，只要画出一个几何的背景，并建立蒙版将实物图置入进去即可，但还是有不少新手会犯的错误，下面我们主...
推荐笔记
用户名长的话就这样
2024-08-16
而在一些本身只有一个结构的图标 (如爱心)，或两个结构无法分出内外 (如搜索) 时，就得想办法强行再在内部加出一个结构来改变粗细。例如下图中的案例，在搜索中选择增加一条弧线段来改变粗细；在爱心中增加一条心电图线段来改变粗细。
改变粗细本身并不是什么很难的操作，在描边属性设置中直接修改数值便可，具体数值上可以选择粗边的一半或三分之二 (取约合后的整数)，过细和过粗都不太适合。
用户名长的话就这样
2024-08-16
例如设置图标中间总是有一个圆形的独立结构，那么可以选择中间的圆形改变粗细；优惠券图标内部总是有一条虚线段来表示其虚接线，那么我们可以选择这条虚线变粗细；查看图标中间也总有一个圆形的独立结构代表眼球，那么可以选择它来改变粗细。
例如设置图标中间总是有一个圆形的独立结构，那么可以选择中间的圆形改变粗细；优惠券图标内部总是有一条虚线段来表示其虚接线，那么我们可以选择这条虚线变粗细；查看图标中间也总有一个圆形的独立结构代表眼球，那么可以选择它来改变粗细。
UX小学生
2024-08-01
位图图像想要在 App 中显示出最佳状态，需要考虑像素对齐的问题。
由于每一像素能且只能表现为一种色彩，所以在放大后的位图中我们可以清楚看到弧形边缘的一个个像素锯齿，故而位图图像想要在 App 中显示出最佳状态，需要考虑像素对齐的问题。
上课困难户
2024-06-26
图标栅格系统
如果我们定义一套 28pt（如果看不懂可以当成 28px） 的图标，那么我们首先要画一个 28pt 的正方形，然后确定一个 2-4pt 的内边距，正所谓四边留一线，日后好相见。
上课困难户
2024-06-26
手柄
方向线，就是我们常在矢量图中看到的，锚点两侧那个像手柄一样的东西，每个锚点最多可以有两条方向线，代表着它某一侧曲线的方向和趋势，方向线越长，它的趋势越明显。
UX小学生
2024-06-19
学好PS，AI，走遍天下都不怕，哈哈哈。figma确实是实现简单的功能的比较好的工具
了解了图标的类型，就要开始了解做出这些图标应该使用哪些软件了！通常，UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款，理论上，它们都包含了图标绘制的功能，如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了，这是非常不负责任的，所以为了对新人更友好一点（如果已经全部精通了，就直接略过），我会分析一遍这四款软件对于图标设计的优劣，以及需要掌握的部分
UX小学生
2024-06-19
矢量图即使放大很多倍，也不会失真。但是很多网页场景在，为了加载速度或者跨平台效果，更多的会使用位图。
从设计师的角度来说，在图标的设计之初基本都采用矢量软件（见图标的设计工具）或软件中的矢量工具（见布尔运算和钢笔）来绘制，可以充分发挥矢量图的优势，精细地控制图形的每一条边。
UX小学生
2024-06-18
图片和文字是同时出现，相辅相成的。
对于C端而言，图标更多的需要普适性，和通用型。
对于B端而言，更多的是服务于业务场景，或者是B端使用场景。
C端的APP图标比较特殊，它更多的是脱离于图标的意义，更多的需要表达品牌的log和solgan
更贴近图标原本的工具属
Yogurt_G
2024-04-02
更应景 沉浸式体验 引导消费
还有，就是国内的界面设计环境，会根据运动需求设计进行特殊化处理，尤其在电商领域，首屏的图标都会改成首页风格的样式，增加活动氛围。
