A2.04.2Whitespace as an implicit boundary设计
留白可以替代实线边框界定区域
别名: 无边框容器 · borderless region · 隐性边界
概念解释
一块区域只要四周被一圈明显宽于内部间距的空白包围,即使没有画出边框,也会被看成一个独立、有边界的区域,里面的内容被当成一组,外面的内容被当成另一组。这是把闭合性用在没有实际轮廓线的场景:足够的留白本身撑起了一个"隐性容器",起到和实线边框类似的分区作用。
机制
闭合性起作用不要求边界是一条连续画出的线,只要求剩余的线索(这里是内部与外部间距的明显差异)能让视觉系统把某片区域读成"封闭在一起的一块"。当内部间距明显小于这片区域与外部内容的间距时,这圈更大的空白就充当了原本该由边框线承担的角色——它标出了"到这里为止是一块"的位置,视觉系统据此把这片区域补成一个有边界的整体,即使物理上什么都没画。
边界
这种隐性边界依赖留白的宽度差异足够大、足够稳定;如果周围空白和其他区域的空白宽度相近,或者页面里同时存在多种留白宽度、彼此没有明显区分,隐性容器就会变得含糊,不同用户可能读出不同的分区结果。
它对视觉能力和查看条件的依赖比实线边框更高,这一层限制单独展开,不在这里重复。
怎么落地
- 需要划分区域但不想增加视觉噪音(更多线条)时,优先加大该区域内外的留白差异,而不是默认加一条边框——差异做得够大时,留白本身就能完成分区。
- 留白宽度要有明确的层级:区域内部的间距、区域之间的间距、页面级留白三者要能彼此区分,不能用同一套间距数值应付所有层级,否则隐性边界会和普通的内容间距混在一起。
- 版式改动(响应式收窄、字号变化)时要重新检查留白差异是否还保持,缩小屏幕后如果内外间距被压缩到接近,隐性边界会先于其他内容失效。
- 验证办法:去掉页面里所有的实际边框和背景色,只保留留白,请人指出"这块区域到哪里为止",和设计意图对照,看隐性边界是否被正确感知。