图标是界面中最小的视觉单元，但它的设计难度并不低。一套图标看起来是否专业，关键不在单个图标有多精致，而在于整组图标是否统一——笔画粗细一致、圆角半径一致、视觉重量一致。
一、网格系统是基础
专业图标设计通常从网格开始。常见做法是在一个方形画布中划分参考线。
画布尺寸。常见尺寸是 24×24 或 32×32 像素。所有图标在同一尺寸的画布上绘制，保证导出后大小一致。
关键线框。在画布中绘制正方形、圆形、竖长方形、横长方形四种关键形状。正方形代表标准尺寸，圆形代表最宽的圆形图标，竖长方形和横长方形代表高瘦或扁宽的图标。
为什么需要这四种框。因为视觉重量不同。同样占满画布，圆形看起来会比正方形小，高瘦的图标看起来会比正方形窄。通过这四个框，可以保证不同形状的图标在视觉上大小接近。
二、视觉统一的三个关键参数
线条粗细。一套图标中所有描边的粗细应保持一致。常见的做法是主体线条用 2 像素，细节线条用 1.5 或 2 像素，但同一层级的线条必须统一。
圆角半径。所有转角的圆角半径应一致。如果一部分用直角、一部分用圆角，整组会显得不协调。圆角半径的选择也影响风格——半径小显得硬朗，半径大显得柔和。
端点与转角处理。线条端点是平头、圆头还是方头，转角是尖角、圆角还是斜切，这些都要在全套图标中统一。
三、图标设计的常见问题
问题一：视觉重量不均。有的图标看起来比别的重，通常是因为图形填充面积不同。实心图标比线性图标重，密集的图形比稀疏的图形重。需要通过调整尺寸或简化细节来平衡。
问题二：细节过多。小尺寸图标中，过多细节会糊成一团。建议在 24 像素的图标中，细节控制在最必要的程度，宁可简化也不要堆砌。
问题三：不统一的光源方向。如果图标带阴影或高光，光源方向必须统一。有的从左上打光、有的从右上，会让整组看起来混乱。
问题四：隐喻不一致。同一个概念用不同的图形表达，或者同一个图形在不同位置表示不同概念，都会造成理解障碍。需要建立图标与含义的对应表。
四、图标的尺寸版本
同一个图标在不同场景下需要不同尺寸。常见做法是准备三种版本。
小尺寸版本（16 像素）。需要极致简化，去除不影响识别的细节。很多在小尺寸下看不清的细节，应该直接删除。
标准版本（24 像素）。最常用的版本，用于界面主要位置。
大尺寸版本（48 像素及以上）。可以保留更多细节，用于引导页、空状态插图等场景。
注意，小尺寸版本不是把大尺寸版本直接缩小，而是需要单独调整——线条需要加粗，细节需要删减，否则缩小后会显得模糊。
五、命名与交付
命名规则。图标文件命名建议采用「类别_名称_尺寸_状态」的格式，例如「action_search_24_normal」。统一的命名规则便于检索和调用。
交付格式。界面开发通常使用 SVG 格式，因为它是矢量、体积小、可调整颜色。如果需要生成图标字体，则需要导出为字体格式。
输出规范文档。记录网格尺寸、线条粗细、圆角半径、色彩值等参数，方便后续新增图标时保持一致。
四、图标视觉统一的检查清单
图标是否统一，可以用一份清单来检查。尺寸统一：所有图标应基于同一画板尺寸与安全边距设计，视觉大小一致。线条统一：描边图标的线宽、圆角、端点处理应遵循同一规则。风格统一：实心、描边、双色等风格不能混用于同一套图标中。视觉重量统一：细致的图标与粗重的图标放在一起会显得失衡，需通过微调让它们的”分量”接近。语义统一：同一概念在不同位置应使用同一图标，避免用户产生困惑。
除了单个图标的统一，还要看图标与文字、界面的关系。图标与相邻文字的字号、颜色、基线对齐要协调；图标在按钮、列表、导航中的使用位置与大小应保持规律。统一的图标系统能让界面显得专业、克制，而杂乱的图标则会立刻暴露出设计的不成熟。
五、图标系统的维护
图标系统建成后，维护同样重要。建议把图标统一存放在共享的图标库中，标注每个图标的名称、用途与使用场景，方便团队检索调用。新增图标时，应严格遵循既有的网格、线宽与风格规范，并检查它与现有图标的协调性，避免”越加越乱”。定期盘点图标库，合并重复、淘汰过时、修正不规范的条目，让系统始终保持整洁。
对于有一定规模的产品，还可以把常用图标打包成字体图标或组件，让开发与设计共享同一套资源，减少交付中的偏差。图标虽小，却是界面中重复出现频率最高的元素之一，把它管理好，对产品视觉品质的提升是持续而显著的。
