更新时间： 2026年10月17日
UI间距规范的目标不是把所有间距都改成同一个数字，而是让布局有一套可解释、可复用的约束。可以在墨刀设计中先建立页面和组件样例，再用真实内容检查规则是否能覆盖不同状态。
一、先选基础单位，再建立间距阶梯
常见做法是以8为基础单位，允许4作为紧凑场景的补充，形成4、8、12、16、24、32、48等阶梯。阶梯不是硬性答案，关键是团队能说明每个值的使用场景。导航、表单、卡片和弹窗应优先使用阶梯值，特殊插图或品牌展示再单独记录例外。
| 场景 | 建议检查 | 常见问题 |
|---|---|---|
| 文字与图标 | 基线、图标盒和字重 | 图标垂直不齐，行高挤压 |
| 表单字段 | 标签、输入框、错误提示 | 错误提示出现后页面跳动 |
| 卡片内容 | 标题、正文、操作区 | 不同卡片底部不对齐 |
| 页面分区 | 容器内边距、区块间距 | 窄屏出现横向滚动 |
| 弹窗与抽屉 | 标题、内容、按钮区 | 按钮离边缘过近 |
二、用一个后台筛选页落地规范
- 先画出容器、筛选区、结果表格和分页四个区块，标记每一层的内外间距。
- 给输入、下拉、按钮和标签建立统一高度与左右内边距，检查长文本和错误状态。
- 将区块间距与组件内部间距分开记录，避免调整一个值时连锁影响。
- 在宽屏、窄屏和浏览器缩放场景分别检查，记录需要断点或换行的地方。
三、把间距写成组件约束
- 组件内部间距由组件负责，例如按钮文字与图标的间距不由页面单独调整。
- 组件之间的间距由布局容器负责，例如表单项间距不写在每个输入框里。
- 同一语义的状态保持同一尺寸，错误提示只能扩展内容区，不能压缩点击区域。
- 例外值写清用途和生效范围，避免“设计师习惯”成为无法复用的规则。
四、验收清单
- 随机抽三种页面，检查同一层级的区块是否使用同一间距阶梯。
- 填入最长字段、错误提示和空状态，确认没有溢出、重叠和异常跳动。
- 在手机宽度下检查左右内边距、点击区域和横向滚动。
- 将最终间距表、组件示例和例外说明交给研发，版本变更保留原因。
好的间距规范能减少逐像素争论，把评审转移到任务是否清晰、信息是否可读和状态是否可用上。
五、把间距规范变成可检查的设计令牌
在组件库中为间距命名比直接写数字更容易维护，例如 space-1=4、space-2=8、space-3=12、space-4=16、space-6=24。组件只引用令牌，页面布局再组合令牌；如果业务需要新增值，先说明场景和替代关系。研发实现时可把同名令牌映射到 CSS 变量或设计系统配置，减少手工换算。
六、长内容和状态变化的验收案例
以订单列表为例，分别填入短标题、长标题、无收货地址、接口报错和三行错误提示。检查卡片高度是否允许内容增长，按钮是否仍在可点击区域，列表间距是否保持一致；再把窗口缩到手机宽度，确认操作区不会被挤到屏幕外。若某个组件只能在特定宽度工作，应在组件说明中写出边界，而不是让每个页面自行修补。
- 同一页面的主区块使用同一外边距阶梯。
- 文字换行不改变相邻按钮的点击区域。
- 异常提示出现时，页面滚动位置和焦点仍然可预测。
- 设计、研发和测试使用同一份间距令牌表。
把主流程和异常路径跑通后，再把本页的复现记录与交付结果放在同一份版本记录中，后续评审可以直接追踪。
案例：为后台订单表建立间距规则
先选一个高频页面作为基准：页面左右内边距 24，卡片内边距 16，表格行高 40，字段间距 8。用 8 点栅格只是起点，遇到图标点击区域、长文案或无障碍要求时，要记录例外原因，而不是强行把所有值改成 8 的倍数。
- 盘点页面中的间距值，按页面、组件、状态和断点记录。
- 把重复出现的值整理成 token，命名包含用途，如 space-card-padding。
- 在桌面和窄屏分别检查表单、表格、弹窗和错误提示的拥挤程度。
- 用最长字段、两行错误提示和禁用状态测试组件高度。
- 将例外值写进组件说明，并让设计和研发共同确认。
| 检查对象 | 验证动作 | 交付记录 |
|---|---|---|
| 页面容器 | 检查左右边距与断点 | 布局 token |
| 组件内部 | 用长文案和错误态测试 | 组件状态截图 |
| 交互区域 | 确认按钮与图标可点击 | 可访问性备注 |
