F6.03.1icon style system设计
线宽、圆角、填充需成体系
别名: 图标参数体系 · stroke weight · corner radius · icon family
概念解释
一套图标能被看成「一套」,靠的不是题材相近,而是同一组绘图参数被反复执行:线宽、端点、转角半径、内部留白、是否填充。参数散了,即使每枚单独都好看,并排时会像从不同字号、不同字体里拣出来的字。风格一致是生产约束,不是事后靠感觉「调到差不多」。
机制
人把并排的小图形当同一层级的同类项来扫。扫视不读每枚的题材,先读轮廓的统计特征:线是粗是细、角是方是圆、内部是空是实。这些特征若在组内抖动,视觉系统会把抖动登记成「不是同一类东西」——有的像标题,有的像注释,有的像坏掉的像素。参数成体系,等于把这组统计特征钉死,题材差异才被允许存在。不成体系时,设计师往往去改单一图标的「像不像」,而真正在打架的是那 1.5 像素和 2 像素的线、2 像素和 4 像素的角。
边界
- 有意做两套参数(导航一套、内容区一套)是合法的,前提是两套的使用场合被切开,不能在同一条工具栏里交替出现。
- 品牌插画可以不吃这套参数;一旦插画被缩成 24 像素当图标用,它就必须改吃参数,否则会在工具栏里变成一张缩坏的画。
- 深色底上的线宽往往要光学加粗,那是同一体系里的光学补偿,不是另起一套。
- 线性与面性混用造成的「选中误读」是另一类失败;这里管的是参数有没有被写成可执行的同一套。
怎么落地
- 在画第二枚之前先写下参数:线宽、端点、转角、网格、内部最小空隙、默认填充与否。后续每一枚只允许在这张表里取值。
- 新增图标时先把它放进现有的 24 像素条带里看,而不是在画板中央放大审稿。放大稿看不出 0.5 像素的线宽偏差。
- 验证办法:把全套导出为同一尺寸的精灵图,模糊到看不清题材。若仍能挑出「这几枚更粗 / 更圆 / 更实」,参数就没有成体系。