F6.08.2optical size correction设计研究
图标的视觉大小需按视错觉校正而非几何尺寸对齐
别名: 光学大小 · 视觉对齐 · optical sizing · bounding box
概念解释
圆形、方形、三角形套进同一个 24 像素格子,几何上边长相等,看起来却不一般大:圆会缩一圈,尖角会戳出来显得更大。要对齐的是看起来的大小,不是边界框。字体排版里把字面相对于字身做光学调整,图标并排时做的是同一件事。按格子贴齐,是在对齐一个用户看不见的矩形。
机制
人估计大小时用的是形状的外接印象,不是轴对齐包围盒。圆的轮廓离盒子四边都有一段空,空被读成「这枚更小」;菱形和尖三角把角顶到盒子边缘,角成为大小的证据,显得更大。再加上视错觉里面积相等的圆往往看起来小于正方形。几何对齐因此系统性地偏待某些轮廓。校正是把圆略放大、把尖角略收回,让一排看起来坐在同一条视觉中线上、占同一份面积。这与「为 16 像素另画一稿以免糊掉」不是一笔账:那笔账救的是可辨,这笔账救的是并排时的等大感。一枚完全清晰的圆,仍可以在工具栏里显得像小号字。
怎么研究
把不同轮廓放进同一格子,做「哪一枚更大」的成对比较,或调缩放直到被试报告等大,记录每类轮廓需要的光学系数。自变量是轮廓家族(圆、方、三角、宽扁),因变量是等大所需的缩放。不要用像素边长当因变量——那正是被质疑的尺子。模糊到看不清题材再比大小,可以去掉「题材更重要所以显得更大」的干扰。
边界
- 单枚独用、旁边没有其他图标时,光学大小几乎无意义,格子贴齐即可。
- 超粗填色会改变外接印象,系数不能从线框直接搬到面性。
- 校正过猛会让圆溢出格子碰到邻项,光学对齐的上限是仍能与邻项脱开。
- 零件多导致发黑、线面混用导致偏重,都会干扰「等大」判断,要先控制那些变量再调大小。
怎么落地
- 按轮廓家族做一套光学系数:圆放大、尖角内收、宽扁形按短边补。同一家族共用,不要每枚手调到「看起来顺眼」。
- 评审时看整条,不要看单枚是否贴满格子。贴满格子的三角往往已经偏大。
- 验证办法:把一排图标做成剪影,问哪一枚更大。稳定把圆判小、把三角判大,就还在用边界框当尺子。