一、 图标设计与整体界面排版的关系 #
1. 设计流程的优先级 #
- 图标的设计不是随着界面排版过程零散进行的。
- 正确流程： 一般来说，设计师应先在设计界面中完成排版和布局，确定好元素的尺寸和内容概念。
- 统一设计： 在界面排版完成后，再统一花时间将所有图标一次性绘制完成。最后，将设计好的图标重新置入（替换）到原界面中。
2. 设计尺寸的设定 #
- 设计师可以随时对尺寸进行调整（有反悔药可吃），这也是效率的来源之一。
二、 建立图标格线系统（Grid System） #
为了保证图标的视觉统一性，建立格线系统是关键。
1. 绘制基准画板与留白 #
- 创建画板： 创建一个 20 x 20 像素的画板。
- 留白原则： 正常情况下，四周需要预留流白（留边）。就像写田字格一样，不能将字顶到边缘。
- 尺寸计算： 如果画板是 20x20，四周都留 1 像素，则实际绘制的图形尺寸应为 18 x 18 像素。
2. 可视化工具 #
- 用户可以打开左上角 View 中的 Pixel Grid（像素网格）。
- 作用： 开启后，每一格代表一个像素，使设计工作更加直观。
3. 辅助图形（参照物）的创建 #
为了确保不同形状图标的视觉大小统一，需要创建参照物：
- 主要形状： 图标绘制主要以圆形和矩形为主。正常情况下，不会画三角形之类的元素，因此不需要为其创建格线系统。
- 创建内容： 绘制一个 18 x 18 的圆（假设四周留 1 像素），然后复制并缩小不同的正方形作为参照。
- 视觉差异： 同样大小（例如 18x18）的圆和正方形，在视觉上看起来并不是等大的。因此，这些辅助图形有助于设计师在绘制时平衡不同形状的视觉重量。
三、 提升绘制效率的技巧：等比例放大 #
在 20x20 这样非常小的尺寸上直接绘制图标，细节难以处理。
- 放大操作： 建议先将设计尺寸进行等倍放大。
- 放大倍数： 放大倍数推荐选择偶数倍，例如 两倍（40 x 40）或四倍。千万不要选择三倍，因为数值不好换算。
- 操作步骤： 选中画板后，按住
K键（Scale 工具）进行缩放，一定要按住 Scale 缩放。 - 底板管理： 放大后的格线底板，应编组并锁定（Lock），作为设计的基础底板。
四、 线性图标绘制与细节控制 #
1. 绘制第一个图标（星形） #
- 形状调节： 以星形为例，星形上下高度不一样，需要手动调节，因为下方尖角比上方尖角重，需要上移进行重心处理。
- 核心属性： 需要控制星形的角度、胖瘦以及描边。
- 描边设置（Stroke）： 描边设置必须放在 Inside（内部）模式，这样描边才会受到边缘的控制。如果使用 Center 或 Outside，图形本身就不受边缘控制。
- 圆角与参照： 添加圆角后，可以进行缩放，并以第一个图标作为后续图标的参照物。第一个图标的尺寸往往是靠平感觉画出来的，需要等待其他图标画完后才能进行调整。
2. 异形和复杂形状的绘制 #
- 矩形圆角： 对于矩形（如眼睛或通知图标），可以通过绘制矩形，然后将两侧的圆角拉到满来实现特殊形状。
- 布尔运算的应用： 绘制复杂的图形（如两个矩形交叉的图标），可以通过**合并（Union）**两个图层。在合并后，可以双击进入编辑模式，单独控制圆角。
- 倾斜线段： 绘制 45 度延长线时，要确保上下左右的间距保持一致，45 度角才能成立。
3. 绘制中的精细调节技巧 #
- 位移与吸附： 在绘制很小的图标、调整细节时，可能会遇到图形吸附到像素点边缘的问题，导致难以进行微调。
- 关闭吸附： 在 Figma 的
Preferences中，有一个Snap to（吸附到）选项。在进行非常小的图标细节调整时，如果默认做法不行，可以选择关闭吸附功能，图形就可以更自由地拖拽和微调。 - 重心平衡： 在绘制完一个图标后（如带把手的购物图标），需要通过调整位移来确保图标的左右重心是平稳的。
五、 图标的最终置入与校对 #
1. 缩放与描边调整 #
- 绘制完成后，需要将放大的图标缩放回设计所需的尺寸（如 20x20）。
- 缩放时，描边尺寸也会等比缩放。等比放大再缩放的优势在于，即使不同图标之间使用了不同的尺寸（如 20x20 和 16x16），只要比例关系正确，描边尺寸也是合理的。
2. 替换原有图标 #
- 准备工作： 在置入前，必须将图标的背景色关掉，并删除多余的编组。
- 替换操作： 选中设计界面中需要替换的元素（原图标），右键选择 “Paste to Replace”（粘贴并替换）。
- 校对重要性： 替换完成后，需要将图标丢到正式的界面环境中进行感受。在界面环境中，设计师才能发现各种“小毛病”，例如尺寸不严谨、重心下压或需要上移对齐等问题。
3. 最终要求 #
图标设计不是与界面完全隔离的，它要求图标与图标之间具有视觉上的对齐和统一性。设计师必须反复调节这些元素，才能得到最终想要的结果。建议用户自己完成剩下的图标绘制，替换到原界面中，做出一套风格完全一致的图标，以体会图标绘制的重点和挑战。
#Figma学习指南 #学习笔记最后一次修改于 2025-11-18