A2.15.5Reflow breaking proportional spacing cues设计
纯视觉分组在缩放或改变字号后可能因间距比例改变而失效
别名: reflow · 文本缩放 · 响应式断裂
概念解释
靠间距实现分组，靠的从来不是某个间距的绝对数值，而是"组内间距"和"组间间距"这两个数值之间的相对比例——组内更紧、组间更松，用户才能看出分界在哪。很多低视力用户依赖放大页面或调大系统字号来阅读界面，这个操作如果只是把文字变大、而组内和组间的间距是用固定的像素值写死的，两者的相对比例就会被打乱：字号涨上去之后，原来紧凑的组内间距占比相对变小，原来的组间间距在视觉上不再显得比组内间距宽出多少，分组线索随着这个比例被压平而跟着失效。
机制
接近性线索起作用，依赖的是视觉系统对"哪个间距更小"这个相对关系的判断，而不是对间距绝对值的判断。如果版式里字号和间距是两套独立的数值，字号跟着放大或缩放需求变化，间距却原地不动，那么原本"组内间距明显小于组间间距"这个关系会被字号的膨胀不成比例地压缩——极端情况下，字号涨到足够大时，组内间距和组间间距在视觉上会变得几乎无法区分，这时候即使内容本身还在，用户也没有办法再单靠间距看出谁和谁是一组。这个问题只有在文字被放大之后才会暴露，常规大小下间距设计得再考究，也测不出这个隐患。
边界
如果间距是用相对单位设置、并且和字号按同一比例联动缩放（字号变大间距也按比例变大），组内组间的相对关系能够维持住，缩放不会破坏分组；只有当间距使用固定不变的绝对值、且不随字号缩放联动时，才会出现比例被压平的问题。判断某个具体设计是否存在这个风险，要看间距的实现方式而不是看间距的视觉设计本身是否"看起来合理"——正常字号下无可挑剔的间距设计，缩放实现方式不对，照样会在放大后垮掉。
怎么落地
- 用来传达组内组间关系的间距，尽量用相对于字号的单位来设置，让间距随字号缩放做同比例变化，而不是写死成不随字号变化的固定数值。
- 把"文字放大后分组关系是否还成立"作为一项独立的检查项，不要假设常规大小下测试通过的间距方案在放大后依然有效。
- 验证办法：把页面字号调到系统支持的较大甚至最大档位，或者把浏览器缩放调到较高倍数，检查原本靠间距分组的内容在放大后是否依然能看出组内组间的界限；如果放大后组内组间的间距在视觉上已经很难分辨，说明间距的实现方式需要改成跟字号联动，而不是保持固定数值。