4
%
从零开始学图标
最后更新于 2024-06-12
#知识库#设计知识
图标指具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。
开始学习
知识库概述

在 UI 的设计体系中,图标是最重要的组成部分之一,是任何 UI 界面中都不可或缺的视觉元素。了解图标相关的概念,以及正确绘制的方法,是入门 UI 设计的必备条件。

本套知识库面向的是新手同学想要学习绘制图标,或者已经入行但是没有接触过图标绘制工作的设计师。

防止碎片化和太笼统的分享方式,使用更加全面、系统的知识库内容,让同学们学完本套知识库可以达到图标绘制入门的程度。

图标是什么
已学会 0/3 · 知识点 0/1
图标设计的基础知识
已学会 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
推荐笔记
用户名长的话就这样
2024-08-16
而在一些本身只有一个结构的图标 (如爱心),或两个结构无法分出内外 (如搜索) 时,就得想办法强行再在内部加出一个结构来改变粗细。例如下图中的案例,在搜索中选择增加一条弧线段来改变粗细;在爱心中增加一条心电图线段来改变粗细。
改变粗细本身并不是什么很难的操作,在描边属性设置中直接修改数值便可,具体数值上可以选择粗边的一半或三分之二 (取约合后的整数),过细和过粗都不太适合。
用户名长的话就这样
2024-08-16
例如设置图标中间总是有一个圆形的独立结构,那么可以选择中间的圆形改变粗细;优惠券图标内部总是有一条虚线段来表示其虚接线,那么我们可以选择这条虚线变粗细;查看图标中间也总有一个圆形的独立结构代表眼球,那么可以选择它来改变粗细。
例如设置图标中间总是有一个圆形的独立结构,那么可以选择中间的圆形改变粗细;优惠券图标内部总是有一条虚线段来表示其虚接线,那么我们可以选择这条虚线变粗细;查看图标中间也总有一个圆形的独立结构代表眼球,那么可以选择它来改变粗细。
UX小学生
2024-08-01
位图图像想要在 App 中显示出最佳状态,需要考虑像素对齐的问题。
由于每一像素能且只能表现为一种色彩,所以在放大后的位图中我们可以清楚看到弧形边缘的一个个像素锯齿,故而位图图像想要在 App 中显示出最佳状态,需要考虑像素对齐的问题。
Qer
2024-06-29
超妈 最下面案例演示的第一句话 有错别字 描边的技巧下面第二个逗号后 语句不通应该是把“的”打成“着”了
上课困难户
2024-06-26
图标栅格系统
如果我们定义一套 28pt(如果看不懂可以当成 28px) 的图标,那么我们首先要画一个 28pt 的正方形,然后确定一个 2-4pt 的内边距,正所谓四边留一线,日后好相见。
上课困难户
2024-06-26
图形的尺寸
如果图形的重心有偏移,那就要往重心偏移的反方向移动
上课困难户
2024-06-26
重心平衡
如果一个图形其中一部分面积远大于另一部分,那么就会让这个图形的重心产生偏移,必须要往较小的部分的方向移动才能产生平衡。
上课困难户
2024-06-26
手柄
方向线,就是我们常在矢量图中看到的,锚点两侧那个像手柄一样的东西,每个锚点最多可以有两条方向线,代表着它某一侧曲线的方向和趋势,方向线越长,它的趋势越明显。
UX小学生
2024-06-19
学好PS,AI,走遍天下都不怕,哈哈哈。figma确实是实现简单的功能的比较好的工具
了解了图标的类型,就要开始了解做出这些图标应该使用哪些软件了!通常,UI 主要使用的设计软件包含 PS、AI、Sketch、XD 四款,理论上,它们都包含了图标绘制的功能,如果我直接告诉大家去精通这 4 款软件那么画图标就一点难度都没有了,这是非常不负责任的,所以为了对新人更友好一点(如果已经全部精通了,就直接略过),我会分析一遍这四款软件对于图标设计的优劣,以及需要掌握的部分
UX小学生
2024-06-19
布尔运算和钢笔两个功能就能构建基本的图标,图片或者logo也应该简洁,易构建,个人感觉会更好,容易被大众接受。
并集:又称联集、相加,指将两个形状拼合;
UX小学生
2024-06-19
矢量图即使放大很多倍,也不会失真。但是很多网页场景在,为了加载速度或者跨平台效果,更多的会使用位图。
从设计师的角度来说,在图标的设计之初基本都采用矢量软件(见图标的设计工具)或软件中的矢量工具(见布尔运算和钢笔)来绘制,可以充分发挥矢量图的优势,精细地控制图形的每一条边。
UX小学生
2024-06-19
页面上不一定都是图标加上文字就效率最好,可能有的时候一个图标加上很多纯文字或许效率更高
UX小学生
2024-06-18
图片和文字是同时出现,相辅相成的。 对于C端而言,图标更多的需要普适性,和通用型。 对于B端而言,更多的是服务于业务场景,或者是B端使用场景。 C端的APP图标比较特殊,它更多的是脱离于图标的意义,更多的需要表达品牌的log和solgan
更贴近图标原本的工具属
UX小学生
2024-06-18
1,图标比文字的表现能力更强,并且占比页面的空间更小,效率更高。并且可以跨越语言的限制 2,图标可以让app的页面更加活泼
但没有图标,缺少这些点缀
今晚也没早睡
2024-05-10
AI软件学习要点
AI 设计图标中有三个特殊的功能是需要重点掌握和学习的: 形状生成器 轮廓化描边 路径查找器
Yogurt_G
2024-04-02
更应景 沉浸式体验 引导消费
还有,就是国内的界面设计环境,会根据运动需求设计进行特殊化处理,尤其在电商领域,首屏的图标都会改成首页风格的样式,增加活动氛围。
Yogurt_G
2024-04-02
特点之一
关于视觉的观赏性上
Carmen
2024-03-15
图标存在的意义
图标可以以一种更高效的方式,将我们想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。
Carmen
2024-03-15
界面设计元素:文字、icon、图片、几何
图片、文字、几何图形、图标
王桐学
2024-01-19
关于像素对齐这个说法,研究了一下阿里的图标系统,他们1024的尺寸换算为16pt图标,是会出现如0.875pt、1.125pt此类数值,感觉上也并不绝对
刘波
2024-01-15
非对称图形使用重心对齐
重心对齐
王桐学
2024-01-15
B 端场景下组件控件会使用通用图标,额外的业务场景或组件自定设计