文章目录 / 点击展开
AI 可以快速探索图标隐喻和视觉方向，但直接生成整套图标通常会出现线宽、透视、细节密度和留白不一致。可靠流程是先定义图标系统，再用 AI 做草图，最后统一矢量重绘。
第一步：建立图标规格
至少定义画板、内容安全区、基准线宽、端点、连接方式、圆角、透视、主次层级和默认颜色。还要规定小尺寸下允许删除哪些细节。
画板：24 × 24
内容区域：2–22
风格：2px 线性图标，圆端点与圆连接
视角：正视，不使用透视
细节：每个图标最多两个主要形体
颜色：默认单色，状态色由产品系统控制
禁止：文字、渐变、阴影、装饰性小点具体数值应与现有设计系统一致。不要为了适配 AI 输出重新定义一套与产品冲突的规则。
第二步：先定义语义和隐喻
为每个功能写一句用户能理解的动作，再列出首选隐喻、备选隐喻和需要避免的混淆。例如“导出”与“分享”经常被画得过于相似，应提前区分方向和容器。
让 AI 先输出文字方案比直接出图更容易评审。一个隐喻在当前产品、地区或行业中是否成立，仍需用户测试和团队判断。
第三步：用模板生成方向稿
为“{{功能}}”设计单个线性 UI 图标方向稿。
画布 24×24，2px 统一线宽，圆端点，正视，单一视觉中心，最多两个主要形体，黑色线条白色背景。
隐喻：{{隐喻说明}}。
禁止文字、渐变、阴影、透视和装饰元素。一次生成同一功能的少量候选，先选择隐喻和轮廓，不追求像素级准确。确认三到五个代表性图标后，再验证这种规则能否扩展到整套功能。
第四步：矢量重绘和光学校正
在 Figma 或矢量工具中按网格重绘，统一线宽、圆角和节点。不要直接把生成图片自动描摹后交付，描摹结果通常包含多余节点和不稳定曲线。
几何居中不一定视觉居中。播放、箭头、圆形和不对称轮廓需要微调位置与留白。把图标放在真实按钮、导航和列表中检查，而不是只看放大画板。
第五步：整套并排检查
使用同一尺寸和颜色排列全部图标，比较视觉重量、细节密度、留白和方向。相似功能应清楚区分，同一功能在不同状态下不应改变核心隐喻。
最后导出 SVG，并检查 viewBox、描边属性、路径数量和无障碍名称。颜色最好继承产品令牌，而不是写死在每个文件中。
一致性检查清单
- 所有图标是否使用同一画板和安全区。
- 线宽、端点、圆角和连接方式是否一致。
- 视觉重量和细节密度是否接近。
- 相似功能是否容易区分。
- 16px、20px 和 24px 下是否仍清楚。
- 是否在真实按钮和导航环境中检查。
- SVG 是否干净、可继承颜色且没有多余节点。
常见问题
可以让 AI 一次生成 50 个图标吗
可以得到灵感，但很难保证每个图标遵守同一几何规则。先生成代表性方向，再分组制作和人工统一更可靠。
为什么自动描摹后线条看起来不齐
位图边缘和抗锯齿会生成大量不规则节点。UI 图标应按网格和线宽重新绘制，而不是依赖自动描摹。
图标是否必须完全几何对称
不必。视觉平衡比数学对称更重要，但所有光学校正应遵循一致原则并记录在规范中。
完整界面流程可参考 Figma + AI 线框到高保真，提示词可在 设计视觉 Prompt 中查找。