不要先把每个图标都放大到满框
一套图标文件像素完全相同,放进导航栏却有的大、有的小,先区分画布边界和真正可见的主体边界。Flux Art 可制作与编辑图标草案;精确校齐应在设计文件和实际界面里完成。盲目把每个主体拉到一样宽,会让圆形、细长箭头与厚重实心块失去比例,也可能挤掉原本需要的安全留白。
固定外框,单独记录可见范围
保留项目规定的图标槽位、对齐参考线和安全边距,不能为了让某一个图标更大就改组件外框。另记可见主体的左、右、上、下边界,把透明边、投影和装饰分开标注。若导出文件含大片透明空白,先回设计文件检查对象位置与导出范围,而不是通过页面样式强行拉伸整个组件。外框一致是排版条件,不是视觉大小一致的证明。
用假设对照看出问题在哪层
假设两枚图标都放在二十四单位的方框内,一个可见主体只有十二单位宽,另一个占十八单位宽,看起来不同大就有了可以检查的原因。这个假设尺寸不是实测,也不是适用所有产品的推荐规格。即使两者可见宽度相等,实心方块仍可能比空心圆显得重。下表先分清差异所在,再决定应调整主体、线条还是导出边界。
| 观察到的差异 | 应检查的层 | 本轮可验证的调整 |
|---|---|---|
| 文件同宽但主体明显小 | 透明边与可见边界 | 保持槽位,修正导出范围或主体占比 |
| 同宽图标一枚特别重 | 填充量、内留白和细节 | 同色对照并简化冗余,不只缩宽 |
| 几何居中却像向右偏 | 形状重心与突出部件 | 固定槽位内记录光学位移 |
| 缩小后线条粗细不一 | 缩放时的描边行为 | 复核描边规范与小尺寸清晰度 |
| 选中状态比普通态显大 | 不同状态的可见边界 | 成对比较状态而非只审一枚 |
| 预览整齐,界面却不齐 | 真实显示比例与组件对齐 | 同一界面尺寸一排一列复看 |
| 细节糊成一团 | 目标尺寸与图形复杂度 | 简化细节并保持功能可识别 |
形状面积与视觉重量不能只看宽高
把同组图标暂时放在同色同底的对照页,观察轮廓、填充量和内部留白。密集齿轮、稀疏加号、圆形人像与长箭头,即使包围盒相同,也不会自动拥有相同的视觉重量。可以制作黑白剪影辅助看大形,但不要把剪影面积作为唯一评分;识别意义、内部空间和与邻近图标的关系也要一起检查。没有统一公式能替代项目里的实际尺寸复看。
几何居中之后再看视觉中心
先按栅格做到可复查的几何对齐,再观察主体是否仍像偏向一边。带尖角、尾部或一侧细节较多的形状,有时需要小幅光学调整。调整应在固定槽位内记录方向与原因,不随意改变按钮的点击区域。不要把某个图标的偏移直接复制到全套;相同偏移值不代表各自视觉中心相同,下一位维护者也需要知道这是有意校正。
描边粗细不要跟着主体无意变化
缩放线性图标时,要查看工具是否同时缩放描边,细节是否因缩小变成灰糊一团。若项目采用统一描边规范,主体比例与描边粗细分开复核。实心与线性是不同表达方式,不能靠给某个线性图标加厚到近乎实心来弥补大小问题。反复调整后仍显沉重时,考虑简化不必要细节,而不是继续缩小到无法辨认。
在真实界面尺寸做一排一列对照
把图标放回实际导航、按钮或列表,分别看正常、选中和禁用等项目已有状态。高倍放大看得清,不代表小尺寸也看得清;单独看居中,也不代表和文字同行时稳定。对照时保持同一缩放比例、背景和槽位,不让浏览器或预览软件分别自动适配每一张。请另一人先辨认功能,再指出最突兀的图标,避免只盯着像素值而忘了用途。
每轮只改一类变量并保存前后样
先排除错误透明边和错位导出,再调整主体占比,之后才处理细节与线条,最后检查光学位置。每轮保留原版和修改版,标明变动字段;不同时改颜色、阴影、线宽和主体尺寸,否则无法判断改善来自哪里。未知或未确定的图标状态或使用尺寸记录待确认,不用一张最大尺寸图通过代替所有场景。交付时保留设计源文件、导出规格和真实界面对照。
参考规范用于方法,不照搬数值
IBM 的图标设计说明把栅格与一致视觉重量作为整套设计检查内容,2026年10月14日核验:https://www.ibm.com/design/language/iconography/ui-icons/design/ 。这里只参考检查思路,不把其具体尺寸强加给你的设计系统。Flux Art 由 MORNING STAR INDUSTRY LIMITED 运营,是多模型 AI 视觉创作与生产平台,图标候选可从 https://flux-art.net/zh/ai-image 制作;最终矢量、像素对齐和组件验收在相应专业工具中完成。