F6.03.1icon style system设计

线宽、圆角、填充需成体系

别名: 图标参数体系 · stroke weight · corner radius · icon family

概念解释

一套图标能被看成「一套」,靠的不是题材相近,而是同一组绘图参数被反复执行:线宽、端点、转角半径、内部留白、是否填充。参数散了,即使每枚单独都好看,并排时会像从不同字号、不同字体里拣出来的字。风格一致是生产约束,不是事后靠感觉「调到差不多」。

机制

人把并排的小图形当同一层级的同类项来扫。扫视不读每枚的题材,先读轮廓的统计特征:线是粗是细、角是方是圆、内部是空是实。这些特征若在组内抖动,视觉系统会把抖动登记成「不是同一类东西」——有的像标题,有的像注释,有的像坏掉的像素。参数成体系,等于把这组统计特征钉死,题材差异才被允许存在。不成体系时,设计师往往去改单一图标的「像不像」,而真正在打架的是那 1.5 像素和 2 像素的线、2 像素和 4 像素的角。

边界

  • 有意做两套参数(导航一套、内容区一套)是合法的,前提是两套的使用场合被切开,不能在同一条工具栏里交替出现。
  • 品牌插画可以不吃这套参数;一旦插画被缩成 24 像素当图标用,它就必须改吃参数,否则会在工具栏里变成一张缩坏的画。
  • 深色底上的线宽往往要光学加粗,那是同一体系里的光学补偿,不是另起一套。
  • 线性与面性混用造成的「选中误读」是另一类失败;这里管的是参数有没有被写成可执行的同一套

怎么落地

  • 在画第二枚之前先写下参数:线宽、端点、转角、网格、内部最小空隙、默认填充与否。后续每一枚只允许在这张表里取值。
  • 新增图标时先把它放进现有的 24 像素条带里看,而不是在画板中央放大审稿。放大稿看不出 0.5 像素的线宽偏差。
  • 验证办法:把全套导出为同一尺寸的精灵图,模糊到看不清题材。若仍能挑出「这几枚更粗 / 更圆 / 更实」,参数就没有成体系。

延伸

  • 同组F6.03.2 混用线性与面性会造成层级误读 · F6.03.3 第三方图标混入会破坏体系
  • 相邻F6.08 图标的视觉重量平衡 · F6.04 图标的最小尺寸
  • 站内检索icon style system · stroke weight · icon family

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F6.03.1