F6.08.2optical size correction设计研究

图标的视觉大小需按视错觉校正而非几何尺寸对齐

别名: 光学大小 · 视觉对齐 · optical sizing · bounding box

概念解释

圆形、方形、三角形套进同一个 24 像素格子,几何上边长相等,看起来却不一般大:圆会缩一圈,尖角会戳出来显得更大。要对齐的是看起来的大小,不是边界框。字体排版里把字面相对于字身做光学调整,图标并排时做的是同一件事。按格子贴齐,是在对齐一个用户看不见的矩形。

机制

人估计大小时用的是形状的外接印象,不是轴对齐包围盒。圆的轮廓离盒子四边都有一段空,空被读成「这枚更小」;菱形和尖三角把角顶到盒子边缘,角成为大小的证据,显得更大。再加上视错觉里面积相等的圆往往看起来小于正方形。几何对齐因此系统性地偏待某些轮廓。校正是把圆略放大、把尖角略收回,让一排看起来坐在同一条视觉中线上、占同一份面积。这与「为 16 像素另画一稿以免糊掉」不是一笔账:那笔账救的是可辨,这笔账救的是并排时的等大感。一枚完全清晰的圆,仍可以在工具栏里显得像小号字。

怎么研究

把不同轮廓放进同一格子,做「哪一枚更大」的成对比较,或调缩放直到被试报告等大,记录每类轮廓需要的光学系数。自变量是轮廓家族(圆、方、三角、宽扁),因变量是等大所需的缩放。不要用像素边长当因变量——那正是被质疑的尺子。模糊到看不清题材再比大小,可以去掉「题材更重要所以显得更大」的干扰。

边界

  • 单枚独用、旁边没有其他图标时,光学大小几乎无意义,格子贴齐即可。
  • 超粗填色会改变外接印象,系数不能从线框直接搬到面性。
  • 校正过猛会让圆溢出格子碰到邻项,光学对齐的上限是仍能与邻项脱开。
  • 零件多导致发黑、线面混用导致偏重,都会干扰「等大」判断,要先控制那些变量再调大小。

怎么落地

  • 按轮廓家族做一套光学系数:圆放大、尖角内收、宽扁形按短边补。同一家族共用,不要每枚手调到「看起来顺眼」。
  • 评审时看整条,不要看单枚是否贴满格子。贴满格子的三角往往已经偏大。
  • 验证办法:把一排图标做成剪影,问哪一枚更大。稳定把圆判小、把三角判大,就还在用边界框当尺子。

延伸

  • 同组F6.08.1 填充与线性图标在同一排列中视觉重量不均会造成层级错觉 · F6.08.3 高信息密度图标在小尺寸下会显得比简单图标更重 · F6.08.4 图标组内粗细、留白需统一才能形成均匀的视觉节奏
  • 相邻F6.04 图标的最小尺寸 · F3.02 尺寸对比
  • 站内检索optical size · optical correction · bounding box

同组卡片

快捷操作

分享

分享当前页面

ios_share

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