F2.01.3grid as constraint not occupancy设计

栅格是约束工具而非必须填满

别名: 空列 · 不满栅格 · occupancy

概念解释

栅格告诉你边可以落在哪,不命令每个格子都住进东西。两列表单占 12 列里的 6 列、两侧各空 3 列,是栅格在工作:字段行长仍可读,左右缘仍在线上。把字段拉满 12 列,只因为空着「浪费」,行长会涨到扫读崩溃。

空列不是没做完。该空的时候空,约束才还是约束。

机制

约束和占有是两件事。列线限制「对齐点的合法集合」,占有率决定「信息密度和行长」。人读一段文字有舒适行长;控件也有舒适工作宽度。两者都由内容决定,不由「还剩几列没收拾」决定。

把空列填满,通常是把一个局部问题(这页看起来空)用错误的变量去修:本该用更大的字号阶梯、多一档内容、或承认这页就是短,却去改宽度。宽度一改,对齐基准还在,但阅读和操作的尺度坏了。满栅格的仪表盘有时成立,是因为模块本身需要那些列来并排比较,不是因为空列非法。

边界

数据密集的工作台、多指标看板,空列会迫使本该并排比较的卡片折行,这时占满是任务需要。全宽媒体(地图、画布、视频)本来就该吃掉可用列。失败集中在短内容被拉宽:设置项、登录框、文章正文、确认对话框。

「留白太多」若来自组与组之间没有对比,那是分组间距的问题,用填列去补只会制造超长行,组还是糊的。

怎么落地

  • 每个模块先问「内容的舒适宽度是多少」,再在栅格上取最近的整数列;剩下的列可以空,或并给真正需要并排的邻居。
  • 禁止把「看起来空」当作加宽的理由;空的话就加内容、加层级,或接受短页。
  • 验证:找出所有被拉到满宽的表单、正文、对话框。量一量行长(汉字约 35–45 字、英文约 60–75 字符)或一行表单控件的跨度。超标且该模块没有并排比较任务,就是占有率被栅格绑架了。把宽度收回最近的舒适列,确认左缘仍在原基准上。

延伸

  • 同组F2.01.1 栅格提供跨页面一致的对齐基准 · F2.01.2 列数选择决定可表达的比例关系
  • 相邻F2.04 留白 · F2.07 信息密度 · F4.03 行长
  • 站内检索grid occupancy · empty columns · measure · line length

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.01.3