图标风格不统一是最影响视觉质量的问题之一。7 条原则帮你对齐👇
① 统一风格:线性 or 面性选一种 同一个 Tab Bar、同一组功能入口的图标,必须是同一种风格。选中态可以从线性变面性,但未选中态要一致
② 统一笔画粗细 线性图标的描边粗细一旦定了(比如 1.5px),所有图标都必须遵守。忌有的 1px 有的 2px
③ 统一圆角 圆角 2px 就全 2px。角的处理方式(圆角/直角/圆头/平头)也要统一
④ 统一画布尺寸和安全区域 所有图标放在同样大小的画布里(如 24×24),实际图形控制在 20×20 的安全区域内。这样排列在一起大小视觉一致
⑤ 统一视觉重量 圆形、三角形、正方形在同样的画布里,视觉大小是不一样的。圆形要稍微大一点才能和方形"看起来一样大"
⑥ 统一细节复杂度 同一套里不要有的图标 3 根线条,有的图标 20 个细节。复杂度差太多放在一起不协调
⑦ 统一输出规格 线性图标用 SVG 输出,保证缩放不模糊。确定好命名规范,和开发约定好尺寸和颜色控制方式
图标不大,但它是用户接触最频繁的视觉元素。这 7 条对了,产品的精致感立刻上来✨






