4、标注规范与标准：尺寸、间距、颜色、字体、圆角、阴影等标注规范详解
UI 视觉稿的标注交付，是连接设计与开发的桥梁。如果标注缺乏统一规范，开发还原时就会产生大量“凭感觉”的偏差，导致返工和沟通成本激增。本章将系统拆解尺寸、间距、颜色、字体、圆角、阴影六大核心标注要素的规范标准，帮助你建立一套可复用、可检查、可追溯的标注交付体系。
4.1 尺寸标注：从数值到弹性规则
核心原理
尺寸标注不只是告诉开发“这个按钮是 120×48px”，而是要明确组件在何种布局环境下如何表现。现代 UI 开发中，尺寸标注需要区分固定尺寸、弹性尺寸和自适应尺寸三种类型。固定尺寸用于图标、头像、开关等不可变元素；弹性尺寸用于可拉伸的容器、输入框、列表项；自适应尺寸则依赖内容或父容器动态计算。
判断方法与操作流程
- 识别元素类型：判断该元素是固定组件还是容器组件。
- 定义基准尺寸：以 4px 为基准单位（4/8/12/16/20/24...），保证视觉节奏统一。
- 标注边界约束：明确 min-width、max-width、min-height、max-height 的临界值。
- 标注自适应规则：说明元素在父容器变化时如何伸缩（拉伸、居中、左对齐等）。
| 尺寸类型 | 适用场景 | 标注示例 | 开发实现 |
|---|---|---|---|
| 固定尺寸 | 图标、头像、开关 | 24×24px | width/height 固定值 |
| 弹性尺寸 | 按钮、输入框、卡片 | 宽度 100%，最大 480px | flex/grid + max-width |
| 自适应尺寸 | 文本容器、标签 | 高度随内容，padding 12px | min-height + padding |
4.2 间距标注：建立间距系统
核心原理
间距是 UI 设计中影响视觉层次和信息密度的关键因素。没有间距系统的设计稿，开发还原时往往会出现“这里多 2px、那里少 3px”的琐碎偏差。间距标注的核心是建立一套可复用的间距梯度，通常以 4px 或 8px 为基数递增。
操作流程
- 定义间距梯度：推荐 4px 梯度（4/8/12/16/20/24/32/40/48/64），覆盖绝大多数场景。
- 区分内边距与外边距：内边距（padding）标注在组件内部，外边距（margin）标注在组件之间。
- 标注栅格系统：如果使用 12 栏栅格，需标注栏间距（gutter）和页边距（margin）。
- 使用间距变量：在标注文件中用 $space-sm、$space-md 等变量名代替具体数值，便于全局调整。
4.3 颜色标注：精确到通道的规范
核心原理
颜色标注最容易出现的问题是“看起来差不多，实际色值不同”。规范的颜色标注必须包含HEX 值、RGB 值、透明度（Alpha）三个维度，同时标注使用场景（如主色、辅助色、成功色、警告色、错误色、中性色）。
判断方法
- 主色：品牌色，用于主要操作按钮、选中状态、链接文字。
- 中性色：文字颜色（主标题、副标题、正文、辅助文字）、分割线、背景色。
- 功能色：成功（绿色）、警告（橙色）、错误（红色）、信息（蓝色）。
- 透明度：同一色值在不同透明度下呈现不同视觉效果，需单独标注。
| 颜色类型 | HEX | RGB | 透明度 | 使用场景 |
|---|---|---|---|---|
| 品牌主色 | #2B6CB0 | 43,108,176 | 100% | 主按钮、选中态 |
| 主文字 | #1A202C | 26,32,44 | 100% | 标题、正文 |
| 辅助文字 | #718096 | 113,128,150 | 100% | 次要信息 |
| 分割线 | #E2E8F0 | 226,232,240 | 100% | 列表分割 |
| 遮罩层 | #000000 | 0,0,0 | 40% | 弹窗背景 |
4.4 字体标注：完整排版参数
核心原理
字体标注需要覆盖字族（Font Family）、字号（Font Size）、字重（Font Weight）、行高（Line Height）、字间距（Letter Spacing）五个维度。其中行高和字间距最容易被忽略，却对排版质量影响最大。
操作流程
- 定义字体层级：H1/H2/H3/正文/辅助文字/小标签，每级设定固定参数。
- 标注行高：建议使用无单位行高（如 1.5），便于开发适配不同屏幕。
- 标注字间距：标题类文字通常需要收紧字间距（如 -0.5px），正文保持默认。
- 标注字重：明确 Regular（400）、Medium（500）、Semibold（600）、Bold（700）的具体使用场景。
4.5 圆角标注：统一视觉语言
核心原理
圆角大小直接影响 UI 的视觉风格——小圆角（2-4px）偏专业严谨，大圆角（12-16px）偏亲和活泼。圆角标注需要明确圆角值和圆角类型（全圆角、部分圆角、胶囊圆角）。
判断方法
- 全圆角：四个角统一圆角值，适用于按钮、卡片、输入框。
- 部分圆角：仅指定某几个角，如弹窗顶部圆角、底部直角。
- 胶囊圆角：圆角值等于高度的一半，适用于标签、开关、底部弹窗。
| 圆角类型 | 圆角值 | 适用场景 | 开发实现 |
|---|---|---|---|
| 小圆角 | 4px | 输入框、表格 | border-radius: 4px |
| 中圆角 | 8px | 卡片、弹窗 | border-radius: 8px |
| 大圆角 | 16px | 大卡片、图片容器 | border-radius: 16px |
| 胶囊圆角 | 999px | 标签、开关 | border-radius: 999px |
4.6 阴影标注：分层级的视觉深度
核心原理
阴影标注需要包含X 偏移、Y 偏移、模糊半径、扩散半径、颜色、透明度六个参数。缺少任何一个参数，开发都无法准确还原阴影效果。同时，阴影应有层级区分——悬浮卡片、弹窗、导航栏的阴影强度各不相同。
操作流程
- 定义阴影层级：L1（轻微悬浮）、L2（卡片提升）、L3（弹窗/抽屉）。
- 标注完整参数：每个层级给出完整的六参数值。
- 注意性能：过多的阴影层级或过大的模糊半径会影响渲染性能，建议控制在 3 层以内。
4.7 标注交付的完整流程与检查清单
核心原理
标注交付不是一次性动作，而是一个“标注 → 自检 → 交付 → 答疑”的闭环流程。建立检查清单可以大幅减少低级错误。
交付前检查清单
- 所有尺寸是否使用统一单位（px/pt/dp）？
- 间距是否全部落在间距梯度内？
- 颜色是否包含透明度信息？
- 字体是否包含行高和字间距？
- 圆角是否标注了类型（全圆角/部分圆角）？
- 阴影是否包含全部六个参数？
- 是否有标注说明文档（设计变量表）？
4.8 总结复盘
标注规范的核心价值在于消除歧义、提升效率、保证一致性。六大要素中，尺寸和间距是骨架，颜色和字体是血肉，圆角和阴影是气质。建立一套完整的标注规范，需要设计师与开发共同参与制定，并在实际项目中持续迭代优化。建议团队使用设计变量（Design Tokens）统一管理颜色、间距、字号等基础值，配合标注工具（如 Figma 的 Inspect、Zeplin、蓝湖）自动生成标注，将人工标注的工作量降到最低。