F3.02.2hierarchy compression设计研究

层级数量增加会压缩每级的差异

别名: 层级挤压 · scale crowding · 多级字号压缩

概念解释

一份移动端设计系统列出 Display、H1 到 H6、Title、Body、Caption 共九档字号,全部要在 375 宽的屏幕里同时露面。上限受屏高和一行能装下的字数卡住,下限受可读字号卡住。九档去分这一段固定的物理区间,每一级分到的尺寸差被挤薄。不是某一档画错了,是档位数量本身在吞掉级差。结果是 H3 和 H4 在真机上先糊成一档,然后 Title 和 Body 也开始分不清。

机制

显示面的可用尺寸是一段有上下界的区间,不是可以任意拉长的尺子。可读下限大约停在目标视距下的最小可辨字号,上限停在标题还不至于两三个字就折行、或把首屏其余内容挤走。n 个等级意味着要把这段区间切成 n−1 个台阶。n 增大时,若仍坚持几何等比,公比会掉到可辨阈附近;若坚持某些关键档(正文、主标题)够远,被挤压的就是中间那些「也想当一级」的档。无论哪种切法,多出来的等级都不是免费的,它们从已有台阶上偷宽度。屏幕越小,同一套九档压缩得越狠——桌面上看得出的 H2/H3,到手机上可能只剩「大字 / 小字」。

怎么研究

在固定最小字号与最大字号的约束下,改变等级数量,测量相邻档在真机上的迫选正确率。自变量是档位数与分配方式(等比、线性、抽掉中间档),因变量是每对相邻档的辨别率和「分成几堆」的自由分类数。界面审计更轻量:把一屏上实际出现的字号做成有序列表,算相邻比,标出所有低于可辨阈的台阶。不必先争论「几档才科学」,先数清这一屏已经切了几刀。

边界

压缩是尺寸这条轴上的账。如果相邻档靠字重、颜色或位置已经分得很开,尺寸台阶薄一点仍可能被当成不同级——但那已经不是尺寸层级在工作。桌面超宽屏把上限抬高,同样九档可以重新拉开;把桌面阶梯原样塞进手表或小组件,压缩会提前到来。动态字号把下限和上限一起平移,档位数不变时相对压缩结构还在,但某些档会撞上系统最大字号而被裁掉,等于在运行时又少了几级可用差。

怎么落地

  • 先写下这一类屏幕能同时出现的最大档位数,再设计字号表。移动阅读界面把同时在场的尺寸级控制在少数几档,其余名义上的 H4、H5 只存在于文档结构,不占用独立像素台阶。
  • 保护两段不可压缩的距离:正文与主标题、正文与辅助说明。被牺牲的只能是中间那些很少单独承担「先看这里」任务的档。
  • 发现 H3/H4 在真机上分不出时,删档,而不是把每一档都微调 1 像素——微调解决不了区间被切碎的问题。
  • 验证:挑一页实际会同时出现最多字号的页面,列出每个字号的像素值,计算相邻比。任何一对在真机迫选中低于全员立即分出的,合并或删掉其中一档,改完再测一次相邻比,直到列表里不再有「名义上级、知觉上同级」的邻居。

延伸

  • 同组F3.02.1 尺寸差异需超过可辨阈才形成层级 · F3.02.3 三级以内的层级最稳定
  • 相邻F3.01.3 权重是相对量,脱离上下文无意义 · F4.01.2 相邻档位差异需可辨 · F5.08.3 层级数量受可辨明度差限制
  • 站内检索hierarchy compression · type scale · dynamic range · size contrast

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.02.2