F2.16.1test layout with extreme content not typical copy设计
布局需要用极端长度的内容(超长标题、空值)测试而非典型样例
别名: 极端内容 · empty state layout · 超长标题
概念解释
设计稿上的名字是「Jane Doe」,标题两行刚好。上线是「María del Carmen Fernández-Villanueva」,或空字符串,或只有一个 emoji。行高被撑成三行、头像对不齐,或整行塌成一条缝。布局是内容尺寸的函数,只用典型样例验收,等于只给中位数发了合格证,尾巴上的失败从未被看见。
溢出时截还是折,是下一张要显式选定的政策。这一张只要求测试集里必须有极端。
机制
设计稿从「正常」的心理模型抽样:短名、有图、有值。布局在中位数上成立,不代表在空值和超长上成立。空会把高度压到零,依赖这块高度的对齐(头像垂直居中、底对齐的价格)跟着塌。超长在不断行的语言里(URL、德文复合词、无空格的中文长标题)变成一根撑开父级的棍子。emoji、组合字符、从右到左的标记还会在「按字符数截」时切在字形中间。
典型 lorem 和真实名字长度匹配时最危险:看起来测过了,测的仍是中位数。
边界
字符数被输入端死死卡住、且后端不会拼出更长串的字段(验证码、两位国家码),极端集可以很小。即使用户生成内容有上限,上限本身就应进测试集,而不是「接近上限的好看假数据」。图片缺失、加载失败也是极端,和字长同类。
怎么落地
- 给每个文本槽准备五份夹具:空、单字符、典型、两倍典型、无空格超长;再加缺图。评审不以「典型」那份过稿。
- 把夹具做进组件预览或测试,而不是设计师手里的一页隐藏稿。
- 验证:在真实组件上依次灌入这五份。记下第一处折行乱、对齐掉、高度塌零的槽。那一槽在典型数据上再看一遍——往往是好的。修好极端再宣称布局完成。德文或用户生成标题的环境,超长夹具必须来自那种语言,不要用英文短词加空格冒充。