最开始在接触到Vibe Coding 进行前端页面设计时，我经常遇到一些看起来不算严重，却会不断重复出现的问题：按钮中的文字溢出、同类卡片风格不同、相邻输入框的高度不一致，所以导致每个页面像是由不同的设计，然后拼凑在一起。
为了找到解决办法，我开始研究 Material Design、Ant Design 等设计体系，希望找到一套能够直接套用的"行业标准"。但在不断设计和调整页面后，我逐渐意识到：UI 规范并不是所有产品共同遵守的一组固定数值，而是同一个产品内部长期保持一致的视觉与交互约定。
因此，本文不会给出一套适用于所有产品的标准答案，而是结合桌面端 B 端产品与 Vibe Coding 实践，从视觉基础、布局间距、组件、交互反馈和页面状态五个维度，梳理如何建立一套能够被设计者、开发者和 AI 共同执行的 UI 规范。
一、UI规范真正解决的问题是什么？
UI 规范最直接的作用是保持界面视觉一致，但并不只是让所有页面长得完全一样，它至少解决五类问题。
| 维度 | 主要解决的问题 |
|---|---|
| 视觉基础 | 信息如何通过颜色、字体、圆角、边框和阴影形成统一层级 |
| 布局间距 | 页面如何分区，相关信息如何靠近，不同内容如何拉开距离 |
| 组件 | 高频界面元素如何组合并复用既有规则 |
| 交互反馈 | 用户操作后，系统如何以一致、可预期的方式回应 |
| 页面状态 | 加载、空数据、失败、无权限等非默认情况如何完整呈现 |
其中，视觉基础和布局间距决定了页面元素的整体分布；组件作为一个样式组合体决定了规则如何被复用；而交互反馈和页面状态决定了用户怎么用和系统如何回应。
对 Vibe Coding 来说，这套约束尤其重要。AI 能快速生成页面，但如果没有明确规则，它也会在每次生成时重新决定颜色、字号、圆角和组件样式，最终形成多套风格拼接的产品。
二、基础视觉规范
视觉基础不是先决定页面好不好看，而是先规定不同信息应该如何被区分，让不同类型的信息在用户的视觉中形成一种稳定的视觉语言。它通常包括颜色、字体、字号、行高、圆角、边框和阴影。
2.1 颜色是语义的表达
在没有规范的页面中，颜色经常被随意用于强调：一个模块用蓝色，一个模块用紫色，另一个模块又用绿色。每个区域单独看都很醒目，但放在同一页面中，用户反而无法判断谁最重要。
建立颜色规范时，可以先按照作用划分，而不是先挑选大量色值。
|------|---------------------------|------------|
| 颜色类型 | 作用 | 示例 |
| 空间色 | 区分页面背景、卡片和浮层 | 页面浅灰、卡片白色 |
| 文字色 | 区分主要 、常规、次要和弱提示信息 | 标题深、说明浅 |
| 结构色 | 表达边框、分割线和输入框轮廓 | 中性灰色 |
| 品牌色 | 表达产品识别和主要操作 | 主按钮、链接、选中态 |
| 语义色 | 表达成功、警告、错误和处理中 | 绿、橙、红、紫等 |
**重点不在于某一种颜色只能如何使用，而在于同一种颜色在同一产品中应承担稳定含义。**如果绿色表示成功，也不应随意用于普通取消按钮。以及下划线蓝字已经变成了大家共识的超链接含义的样式，那就不应当将该下滑蓝字样式作为确认按钮的样式。
文字颜色同样需要建立层级，例如：
|-------|-----------|------------|
| 语义角色 | 示例色值 | 使用场景 |
| 主要文字 | #18181B | 页面标题、重要数据 |
| 常规文字 | #3F3F46 | 正文、表单内容 |
| 次要文字 | #71717A | 描述、补充信息 |
| 弱提示文字 | #A1A1AA | 占位符、低优先级提示 |
色值只是示例，实际使用时还应检查文字与背景的对比度。弱化信息不等于让信息难以阅读，而是为了在突出核心内容的前提下，为用户补充辅助信息。
2.2 字体规范的核心是层级稳定
字体来说：
相信有一个误区会有很多朋友和我有一样的认识，认为浏览器中网页中所展现的文字，中英文、数字都是使用相同的字体的。实际上在浏览器在渲染页面时，有一个**"字体回退栈"，**能够在绘制每一个字节时，按照字体顺序从左到有依次查找。比如：
当你设置了
font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
- 处理英文与数字（例如
"Hello 123"）：· 引擎先看第 1 个字体 Inter。
**·**发现 Inter 包含这些英文字母和数字的字形（Glyph），直接使用 Inter 渲染。
2. 处理中文（例如
"你好"）：· 引擎先看第 1 个字体 Inter。
· 检测发现 Inter 根本没有汉字"你"和"好"的字形。
· 引擎不会 直接报错或显示乱码，而是自动回退（Fallback） 到下一个字体 "PingFang SC"（苹方）。
后续字体匹配也是如此，系统会自动检测内容的，然后再按照你设定的字体进行自动渲染。
不单独使用某个字体，混合排版，就能更好实现跨平台兼容： 覆盖了 Apple 生态（苹方）、Windows 生态（微软雅黑）和 Linux/Android 生态（思源黑体），确保在任何设备上都有优秀的渲染效果。
就字号来说 ：
产品界面要让用户快速捕捉到核心的信息，信息内容的字体大小、层级性发挥巨大作用。
我最初开始进行页面设计时，为了突出和区分模块中的内容。主要是通过将文字加减一档字号来进行突出的，但是后来发现，其实可以通过调整同一档内字重和颜色来加以区别，页面会更协调。
我们先来看看这四个层级是如何区分的：
| 层级 | 语义角色 | 承担什么 | 普适规则 |
|---|---|---|---|
| L1 · Display | 页面 / 场景标题 | 「我在哪」 | 全页最大；一屏通常 1 处；可略紧字距 |
| L2 · Section | 区块 / 卡片标题 | 「这一块叫什么」 | 比正文大一档，或同字号 + 更重字重 |
| L3 · Body | 正文 / 控件内容 | 真正要读的字 | 全站基准字号；输入、表格、段落对齐它 |
| L4 · Meta | 辅助 / 元信息 | 描述、hint、表头、badge | 比正文小一档；不靠缩到极小来降级，配合更浅颜色 |
我们拿一个具体的来说，假设我们所定好的基础字号为12-14px，字号比例设为 1.25。
按照下面的关系计算：
- L1 = 基础字号 × 1.25²
- L2 = 基础字号 × 1.25
- L3 = 基础字号
- L4 = 基础字号 ÷ 1.25
那么我们的字号阶梯的结果如下：
| 层级 | 计算方式 | 理论字号区间 | 取整后建议 |
|---|---|---|---|
| L1 页面标题 | 12--14 × 1.25² | 18.75--21.88px | 19--22px |
| L2 区块标题 | 12--14 × 1.25 | 15--17.5px | 15--18px |
| L3 正文 | 基础字号 | 12--14px | 12--14px |
| L4 辅助文字 | 12--14 ÷ 1.25 | 9.6--11.2px | 10--11px |
注意： 但要我们可以看到按照理论计算得到的L4层级的文字字号为10-11px，在中文界面中文字肯偏小，我们可以适当将该字号调大些，比如调整到12px，然后通过降低色重来与其他层级的文字加以区别。
看到这里，你肯定会怀疑结论会不会是我自己单方面的认知，可能并不具有实际的可行性。实际上我常使用到的ChatGPT web界面中的设计，也是如此。
我们来看这个界面，具体使用了什么字号固然难以断定，但我们可以看到的特点是：
- 顶栏标题稍大；
- 侧边栏菜单、正文、列表、AI 回复属于常规字号；
- 「思考了 3m 42s」、「文档」、部分辅助信息略小。
整个界面中**「已置顶」「项目」「聊天」→ 加粗**，字号与下方菜单项相同。次要信息用灰色，而不是再缩小很多字号。
所以不难看出ChatGPT 网页版也正是我们刚才提及到的**"字号差不大，靠字重和颜色分层次"**的典型做法。
再来看看我以前的卡片设计，就是一个很好的反例（如下），给大家加深印象：
【说明】：
方式A是通过拉大文字的字号来进行区别内容的，虽然界面色彩不多，但是会让人有一种杂乱、阻塞、文字之间跳跃的感觉，但一下子说不上是哪里不对劲。其实是在这个界面中存在这个七种字号，我们来看到下面这张针对方式A的批注版，来进一步说明这个界面的问题所在。
核心问题： 中间的这个表头字段 和所填信息就包含5种字号（9px、10px、11px、14px、22px）。同一个列表中也存在着不同大小的文字，所以才显得卡片内容看着不流畅的错觉。
相比之下，方式B的中间内容 "申请人：李晓明、工号......请确认与HR系统登记地址一致。"，只使用了两档字号，但是通过改变字重和颜色细分，就很巧妙的实现了界面的一致性也使得重点得以强调。
核心要点 : 4档 字号（4档 字号指的是4个字号区间）
先确定基础字号（正文字号），然后再选比例r：
L4 = base ÷ r
L3 = base
L2 = base × r
L1 = base × r² （或 r^1.5）
来确定其他三个层次的字号。
2.3 圆角、边框与阴影负责表达层级
对于界面中的圆角来说，不是越大越好，随心所欲进行设定其数值的。按组件元素类型（按钮、输入框、聊天气泡等）进行划分，确保同一个类型的元素的圆角是一致的。
| 元素 | 圆角数值 |
|---|---|
| 按钮 | 8px（胶囊/标签用 999px） |
| 输入框 | 12px（大表单 16px） |
| 聊天气泡 | 12--14px |
| 标准卡片 | 18px |
| 邮件/案例/弹窗内容 | 14--22px |
在大多数情况下，阴影的作用是为了分层，普通内容优先通过背景色和边框建立层级，而弹窗、侧边栏等独立卡片，适当增加些阴影是为了更好区别可交互区域，体现出更强的层级高低感。
| 用途 | 程度 |
|---|---|
| 普通卡片 | 透明度为4% ，呈现轻轻托起，分层即可 |
| 大卡 / 侧栏进度卡 | 扩散稍大，透明度仍 4% |
| 弹窗 | 最重一层，仍 ≤ 18% |
三、布局与间距规范
用户不会去量像素，但是视觉上，根据卡片之间的间距就能直观知道二者的相关性。靠得近则是相关，离得远则是无关。
3.1 建立基础网格
间距本质上表达的是，这两块东西有多相关。在谈论具体的间距逻辑之前，我们首先要明确，屏幕界面其实是使用栅格进行划分的，间距通常使用4的倍数 （4 / 8 / 12 / 16 / 24 / 32...）**，**好处是：
- 多元素并排时更容易对齐
- 设计稿和代码都好记、好对
- 缩放（125%、150%）时更少出现【半像素糊边】。
当然也会有例外，但得先定一套间距阶梯，再谈具体组件数值，才能保证整体协调性。
不同的间距档位的使用，所表示的内容元素之间的关系也有所不同。
| 档位 | 大致量级 | 心理含义 | 典型关系 |
|---|---|---|---|
| 小 | 4--8px | 同一组、贴在一起 | 标签与输入、图标与文字、标题与一行描述 |
| 中 | 12--16px | 同卡内的不同块 | 字段与字段、段落与按钮区、列表行与行 |
| 大 | 24--40px | 换区域、换章节 | 页面四边、大区块之间、主内容与侧栏节奏 |
3.2 内边距和外边距
边距分为内边距还有外边距。
-
padding决定内容与容器边缘的距离，影响卡片内部的密度。 -
margin或gap决定元素与相邻元素的距离，影响内容之间的关系。
以常见的 B 端信息卡和表单为例，两者的空间逻辑并不完全相同：
信息卡 （摘要、状态、说明）以扫读为主，可以稍紧。
表单要：读标签 → 找控件 → 点选/输入 → 改错，触控与视线往返更多，所以：
- 标签到输入：要近（小间距），保证视觉上【这是一对】。
- 字段与字段：要中等，避免串行看错。
- 整卡 padding：往往比纯展示卡多一圈。（下图就是一个信息卡片和表单的对比）
【注意】：
我们在设计前端页面时，很常见会出现按钮中文字溢出的情况，表面上看是按钮的问题，本质上往往是容器宽度、内边距、换行规则或 Flex 收缩设置不合理。
处理文字溢出时，应优先检查：
-
按钮是否被设置了不必要的固定宽度。
-
左右内边距是否给文字留出足够空间。
四、交互反馈：让同类操作得到同类回应
产品中的交互方式进行统一，实际上是为了降低用户学习使用产品的成本，用户只要靠经验就能够使用软件。
如果有的弹窗点击空白处可以关闭，有的不能；有的提交成功后页面会更新，有的只弹出一句 Toast；有的按钮点击一次进入加载，有的可以连续提交，这就会让用户觉得失去控制感，从而降低对于产品的好感。
所以交互规范 统一实质上是：同类操作 → 同类反馈。不同结果，清楚区分状态。
对于产品人员来说，必须要在原型上就做到设计的一致性，在交互规范把状态机写清楚：默认 / hover / focus / loading / success / error / empty / disabled 各怎么表现。将原型交给开发时，才能减少 bug 和返工，更有效的推进工作进度。
常见的类别主要有七大类，每一个类别都可以进行细化出众多的交互形式。
| 类别 | 例子 |
|---|---|
| 反馈 | Toast / inline error / 成功态如何出现、停留多久 |
| 导航 | 返回、面包屑、侧栏选中、深链 |
| 表单 | 校验时机、错误展示位置、提交中防重复 |
| 浮层 | Modal / Drawer 打开关闭、遮罩、滚动锁定 |
| 列表 | 空态、加载、分页 vs 无限滚动 |
| 动效 | 时长区间、哪些态不动画 |
| 输入 | 快捷键、拖拽、批量操作确认 |
以"反馈"类别来说，并结合电商平台场景，可以使用规则编号持续维护：
| ID | 规则 | 必须 / 应当 / 禁止 | 样式 | 购物平台示例 | 验收 |
|---|---|---|---|---|---|
| F-01 | 区分四类反馈：即时 / 进程 / 结果 / 持久 | 必须 | --- | 选规格=即时；支付中=进程；支付成/败=结果；购物车空=持久 | 同类事件全站同一种反馈 |
| F-02 | 成功须有可见 UI 变化，不只 Toast | 必须 | --- | 下单成功→成功页+订单号+角标状态；加购→购物车数量+1 | 成功后有页面/列表/角标变化 |
| F-03 | 成功告知下一步 | 应当 | --- | 成功页提供「查看订单」「继续购物」 | 至少 1 个明确下一步 |
| F-04 | 禁止假成功 | 禁止 | --- | 支付处理中不得先显示「支付成功」 | 仅终态才展示成功 |
| F-05 | 失败默认 inline，贴近问题 | 必须 | 错误色 #B91C1C |
电话格式错→输入框下；库存不足→SKU 行；券无效→券输入框下 | 字段/商品行旁有错误文案 |
| F-06 | 全页级失败才用顶部/卡片 error 条 | 应当 | --- | 结算接口整体失败→结算页顶部「提交失败，请重试」 | 非字段问题才用顶栏 |
当然我们在最开始肯定做不到穷举所有的交互形式，所以当有新的需求，还未确定交互形式时，可以按照以下方式来帮助到交互规范中查找对应的交互形式：
交互事件（新需求）
↓
1、 属于哪一类？（7 大类）
↓
2、 该类里已有哪条？（F-01... / N-01...）
↓
3、 能覆盖 → 直接引用 ID
不能覆盖 → 在该类下新增 ID，写进规范
五、实操：从反例中学习
下面以一个没有统一规范的"快递寄出"表单为例。页面使用黄、蓝、粉三种高饱和区域区分寄件人、收件人和包裹信息，输入框、分区和按钮又分别使用不同的边框、圆角和填色。
如果它只是一张线下创意表单，也许会显得新奇，但如果同一产品中的每个菜单页面都如此个性鲜明，用户就很难建立稳定的使用经验。
5.1 视觉基础问题
所以我就从上文中我们所掌握的四大方面入手，来先看看这个界面中存在着哪些不太合理的搭配。
- 三个分区都使用高饱和填色，页面中缺少视觉主次，看起来所有内容都是重点。
- 提交按钮使用蓝青渐变，取消按钮使用绿底黄边，两个操作都过于抢眼，无法区分主次。
- 同级分区标题字号不一致，字段标签在 11px 到 16px 之间跳变。
- 输入框说明文字反而大于字段标签，信息层级颠倒。
- 卡片、输入框和按钮的圆角缺少统一规律，整体像是东拼西凑出的页面。
5.2 布局间距问题
- 标签和对应输入框的距离不稳定，部分字段难以判断归属；
- 字段之间没有统一间距，页面阅读节奏忽紧忽松；
- 三个分区中的输入框没有对齐，用户需要不断移动视线寻找输入位置；
- 按钮中文字与边框的距离不一致，部分文案显得拥挤；
- 分区内边距和区块间距没有明显差异，不能通过距离判断信息关系。
总结一下这个反例表单存在的问题：
| 维度 | 反例自身的不协调 |
|---|---|
| 颜色 | 色相多、语义乱，装饰与强调不分。 |
| 字体 | 字体混用、同级字号不一、主次颠倒。 |
| 间距布局 | padding/gap/圆角无统一节奏。 |
| 组件 | 同类输入、分区、按钮像多套 UI 拼凑。 |
| 交互 | 不涉及多界面，交互较少，暂时不讨论。 |
针对以上问题，可以采用以下方案：
- 页面只保留一套中性色、一个品牌主色和必要的语义色。
- 文字统一使用 12、14、16、20px 四档层级。
- 输入框统一高度、边框和 8px 圆角。
- 标签与输入框使用 8px 间距，字段之间使用 16px 间距，区块之间使用 24px 或 32px 间距。
- 三个信息分区使用同一种卡片结构，通过标题和留白区分，不再使用三套高饱和背景。
我们看到按照以上的方案调整之后的快递单号界面（如下）：
相比之下，整体页面更简洁，让同级信息保持一致、主次关系更加清楚。所以我们在使用Vibe Coding进行前端设计时，需要先规定好产品前端界面的设计规范，再开始设计，才能在不突兀的视觉上，实现产品功能，逐渐形成产品的特色。
综上所述，相信你也更理解UI规范存在的意义，不是去限制创意，而是防止每一个模块各自发挥，导致整个页面失去协调感。如果你觉得这篇文章对你有所帮助的话，欢迎点赞、收藏加关注，谢谢！