尺度类令牌成阶取值,避免任意数值破坏节奏
别名: 间距阶 · 字号阶 · type scale · spacing scale
概念解释
间距和字号不是无穷连续轴上的任意毫米,而是一组可点名的台阶:4、8、12、16,或一条模块化字号阶。台阶重复,页面才读得出节奏——这块空白和那块空白是「同一级」,不是「差不多」。在 12 与 16 之间插入 13,局部只是「再松一点」,全局却多了一个没有名字的台阶;一处被允许,下一处就会出现 13.5。成阶取值(stepped scale tokens)把尺度类令牌做成闭集:要更大,跳到下一阶,而不是发明一个新数。任意数值看起来像微调,作用是把节奏拆成不可教、不可检的私有尺子。
机制
节奏靠区间重复被知觉:同样的空白再次出现,布局才像「有意的」。闭集让重复成为默认——作者只能从台阶里挑,挑到的值一定在别人用过的集合里。开集把每一次「看起来差一点」写成新原语,集合膨胀,重复概率下降,页面开始像许多尺子叠在一起。13px 相对 12 与 16 没有台阶身份,审查无法问「你为什么不用上一阶或下一阶」,因为 13 不在对话里。字号阶还绑着行高、字重和栏宽;任意字号会连带逼出任意行高,竖向节奏一起塌。间距阶若只在令牌文件里存在、业务里仍写裸数字,闭集从未进入生产,文件是展览。成阶不是审美偏好,是把「差一点」从无限集合收束到可争论的两三个邻居。
边界
图标栅格、1px 分隔线、hairline 属于设备像素约束,不必强行跳进间距阶;它们是描边类,不是尺度台阶。用户放大文字时,台阶应整体缩放或改用相对单位,而不是为了「看起来还是 13」再开裸像素。数据可视化的轴刻度、地图标注,数值来自数据域,不是界面尺度;套用间距阶会说谎。印刷与界面共用字号阶时,印刷的点数和屏幕的 CSS 像素不是同一单位,阶可以同构、值不能直接贴。动画过程中的插值会经过非台阶值,那是过渡,不是静态布局的许可;过渡结束必须落回台阶。极窄容器里「再少 1px 才能不换行」是溢出策略问题,应改文案、改换行或改容器,而不是为这一处开 13。
怎么落地
- 公布间距阶与字号阶的闭集,组件和页面对齐只引用阶名(
space.200、type.size.sm),不引用裸像素。 - 构建或检查脚本在样式里抓未登记的 px/rem;命中则失败。例外名单只收描边、hairline、媒体查询,并写原因。
- 设计工具的间距和字号控件绑到同一闭集,去掉自由输入,或把自由输入标成「将无法进入生产」。
- 验证:抽一条主路径截图,量所有垂直间距和字号,看是否落在闭集上。13、15、17 这类邻居一旦出现,节奏已破。再跑一次全库裸数值扫描,按文件列出;业务路径上的新裸数值应趋于零。把字号整体上移一阶:布局应仍保持相对节奏。若上移后到处出现「再微调 1px」的补丁,那些补丁就是闭集从未真正约束过的证据。