给开发标注间距与层级
把间距、字号、层级写成开发不用猜的规格
把这份设计标注成开发能直接用的规格：[设计描述或截图]。要求：1）定义一套间距刻度（如 4/8/12/16/24/32），并说明本页只用了其中哪几档；2）按区块列出外边距、区块间距、元素内边距、文字与图标之间各是多少；3）标出字号、行高、字重的层级关系，以及哪些文案允许换行、换行后怎么对齐；4）指明哪几处必须精确、哪几处可以弹性；5）给出窄屏时的取值变化。不要只说「间距保持统一」。
使用建议
交付前跑一遍，能省掉开发反复来问你「这里到底该留多少间距」。
适合什么场景
- 设计稿要交给开发实现，过去总被问「这里到底留多少」——把间距刻度、字号层级、固定与弹性的边界一次写清。
- 要统一多页面或多端（Web 与小程序）——在同一套刻度下给窄屏取值，避免各端各写一套。
不适合的场景
- 设计还在改、结构没冻结——此时标注会随改稿全部作废，等结构定下来再做。
- 需要的是组件代码实现（Flex 参数、断点逻辑）——标注给的是数值，怎么写是开发的判断，别越界。
示例
输入
一个卡片列表页：顶部标题栏、筛选条、卡片列表（每张卡有缩略图、标题、两行描述、底部操作）
你会得到
先定义刻度 4/8/12/16/24/32 并说明本页只用到 4、8、16、24。分区块给值：页面左右 16、标题栏高 56、筛选条与列表间距 12、卡片内边距 16、缩略图与文字间距 12。字号层级写成标题 17 配行高 24、描述 14 配行高 22 且限两行省略。标出必须精确的（卡片内边距、点击区不小于 44）与可弹性的（卡片间距可取 8 到 12），再给窄屏取值。
常见误用
- 只写「间距保持统一」或「参考设计稿」——开发仍然要自己猜，等于没有标注。
- 把所有值都标成固定像素——响应式和长文案场景直接崩，该弹性的地方要留规则。
可以这样改
- 加一条「标出哪些值不在 8pt 网格上，以及为什么」——例外有了理由，后续维护不会误改成网格值。
- 把「给窄屏取值」换成「给三种屏宽下的断点表」——一次覆盖手机、平板、桌面，减少二次沟通。