一、 UI 图标的分类与作用 #
UI 界面中常见的图标分为三大类：
1. 启动图标（App Icon） #
- 定义： 指 APP 在启动过程中使用的图像标识。
- 特性： 具有一定的唯一性，只能由该 APP 使用。
- 本质： 整体设计更偏向于 Logo 化的设计，代表品牌的独立身份标识。
- 规范： 苹果官方提供了模板。导出时，设计师只需提供一张 1024 x 1024 的正方形图片。最终的圆角效果由官方系统（苹果或安卓）说了算。
2. 工具图标（Tool Icon / Main Icon） #
- 定义： 即日常所说的主要图标类型（如线性图标、面性图标）。
- 作用： 带有一定的寓意，通过简单的图形符号（如播放、分享、暂停按钮）带来使用上的便利性。
- 规范： 与装饰图标使用同一套规范类型。
3. 装饰图标（Decoration Icon） #
- 定义： 在工具图标的基础上，增加了更多的装饰性。
- 价值： 存在的价值是为了让原有的设计风格更强，让设计质感更多。在我国应用中非常多，包括节假日的运营活动中都会反复替换。
二、 图标设计规范与视觉统一性 #
工具图标的设计规范遵循公约性，核心在于确保成套图标的视觉统一性。
1. 图标格线与参照系统 #
- 四种基本图形： 工具图标规范体系中有四个基本参照图形：中间的圆、正方形、数值矩形和横向矩形。
- 作用： 这些图形作为参照性元素，辅助设计师创建和确认图形的尺寸大小。
2. 视觉一致性原则（重点） #
- 视觉欺骗： 如果将正方形、三角形和圆形的长宽做成一致，矩形看上去一定比其他任意图形都大。
- 原因： 在一个空间中，矩形占据的几何面积最大，带来的视觉冲击率和尺寸感最强。
- 解决： 为了在视觉上保持一致，必须将圆形或三角形等元素进行放大或调整。这是一个应用于包括字体设计在内的平面设计过程中的广泛知识点。
3. 成套应用与设计标准 #
工具图标往往要成套去应用，不能将风格不一的图标混合使用（就像一篇文字中混合了手写体、楷体、宋体一样）。成套图标必须满足以下设计标准：
- 表义要准确： 图标代表的意义要一目了然。
- 细节要统一： 用到的大小尺寸和色彩要保持一致性。
- 风格要统一： 设计中使用的独特风格（如断点、圆角、弧线）要保持一致。
- 尺寸一致： 视觉大小需要调整，使尺寸保持一致性。
三、 外部资源获取与应用技巧 #
来源强烈建议设计师在前期的学习或设计环境中，应尽量从整套图标中去获取工具图标。
1. 推荐资源库 #
- 推荐使用 iconpark（iconpark.oceanengine.com），它是国内一个较好用的、专门做图标的开源项目，提供了大量的图标素材。
2. SVG 复制与定制（核心操作） #
- 复制方式： 使用 iconpk 时，重点是复制 SVG（Scalable Vector Graphics）。SVG 是一段代码，复制后粘贴到 Figma 中，Figma 会多出一个包含所有矢量信息的图层，等同于复制了源文件。
- 自定义设置： 在 iconpark 网站上，设计师应提前确定图标在设计中的尺寸、线段粗细（描边）、颜色和填充状态（填充、双色、多色）。
- 避免缩放： 千万不要将图标复制进来后，再对它进行放大和缩小。因为这种操作可能会导致圆角和描边尺寸出现不可控的问题。
- 描边和端点： 可以设置描边粗细（默认有 1, 1.25, 1.5, 1.75 等）和端点类型（圆角或直角）。
最后一次修改于 2025-11-18