F6.04.2optically sized icons设计研究

小尺寸需要独立绘制而非等比缩放

别名: 光学尺寸 · 多套主稿 · optical size · icon masters

概念解释

把 24 像素的稿等比缩到 16,得到的不是一枚 16 像素图标,而是一枚被压扁的 24。小尺寸要自己的主稿:加粗线、放大孔、删掉在这个像素网格上站不住的零件、把骨架重新锚到这个网格上。字体里的光学尺寸(optical size)做的是同一件事。缩放保留的是几何比例,丢掉的是在那个尺寸上还能被看见的结构。

机制

渲染按像素取整。大稿上宽 1.5、空隙 2 的结构,缩到三分之二之后两边都变成「一个像素左右再带灰边」,线与空隙不再能互相定义。更糟的是骨架的锚点:大稿里略偏的光学中心,缩完以后会明显歪出格子。独立绘制是在目标网格上重新决定「哪些线必须占满一个像素、哪些空隙必须让出两个像素」,而不是把同一条贝塞尔曲线乘一个系数。不另画的代价很具体:16 像素档看起来发灰、发飘、对不齐文字的中线,不是「分辨率不够」,是大稿的决策被错误地拿到了小网格上执行。

怎么研究

对照「同一路径缩放」与「按目标尺寸重绘」两套主稿,在相同边长上做匹配或命名,并收「发糊 / 发灰 / 对不齐」这类质量判断。自变量是主稿策略(缩放 vs 重绘)和目标边长;因变量是可辨率与主观清晰度。字体研究里 opsz 轴的证据可以类比,但不能直接搬分数——图标的零件比字形更不标准。逐像素对齐的位图稿和带微调的矢量稿要分开报,混在一起看不出是网格锚点还是线宽策略在起作用。

边界

  • 矢量在超高密度屏上「缩一点」往往还能看,不构成可以不为 16 像素另画的理由;低密度屏和带缩放的系统设置才是压力测试。
  • 只有两档尺寸且相差很小(例如 20 与 24)时,光学校正也许能共用一稿;跨到 16 以下通常不行。
  • 减零件是密度问题;这里要的是即便零件数已经合法,仍要按这个网格重锚。两件事常被一次做完,但失败模式不同:一是糊,一是歪和发灰。

怎么落地

  • 为每个真正会用到的尺寸准备主稿,至少把「工具栏小档」和「列表大档」拆开,禁止从大档直接导出小档。
  • 小档主稿允许更粗的线和更少的内角,不必与大档保持几何相似。
  • 验证办法:把缩放稿和重绘稿做成闪烁对照,叠在目标网格上看。缩放稿若有持续的灰边或中心偏离格子,就还没独立绘制。

延伸

  • 同组F6.04.1 细节数量决定可缩小的下限 · F6.04.3 图标尺寸与其命中区尺寸无关
  • 相邻F6.08 图标的视觉重量平衡 · F4.09 动态字体
  • 站内检索optical size · icon masters · optically sized icons

同组卡片

快捷操作

分享

分享当前页面

ios_share

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