UI设计规范
UI设计规范是什么？一文看懂 UI 设计规范
UI设计规范（UI Design Guidelines）是一套用于统一产品界面视觉、交互和组件使用方式的规则，可以帮助设计师和开发者保持产品界面的一致性、易用性和可维护性。
一句话理解：
UI设计规范就是给产品界面制定一套统一的“设计规则”，告诉设计师和开发者颜色怎么用、字体多大、按钮怎么设计、页面怎么布局以及不同组件应该如何交互。
基础信息
信息 | 内容 |
|---|---|
中文名称 | UI设计规范 |
英文名称 | UI Design Guidelines / UI Design System |
所属领域 | UI设计、产品设计、用户体验 |
知识类型 | 设计规范 / 方法论 |
学习难度 | ⭐⭐ |
适合人群 | UI设计师、产品经理、前端开发者、独立开发者 |
什么是 UI 设计规范？
UI 是 User Interface（用户界面） 的缩写。
UI设计主要关注用户看到和操作的界面，例如：
- 页面布局
- 颜色
- 字体
- 按钮
- 输入框
- 卡片
- 图标
- 导航
- 弹窗
- 表格
- 交互状态
随着产品页面越来越多，如果没有统一的设计规则，就很容易出现：
首页一个按钮是蓝色，详情页变成绿色；
一个页面标题是 20px，另一个页面变成 24px；
同样的弹窗，在不同页面有不同的样式。
UI设计规范就是用来解决这些问题的。
它通过建立统一的视觉和交互规则，让整个产品看起来像一个完整的系统。
为什么需要 UI 设计规范？
假设一个产品有：
50 个页面、100 个组件、5 名设计师、10 名开发人员。
如果每个人都按照自己的理解设计，那么随着项目发展，界面很容易出现大量不一致。
例如：
按钮
├── 蓝色按钮
├── 深蓝色按钮
├── 浅蓝色按钮
├── 圆角 4px
├── 圆角 6px
├── 圆角 8px
└── 圆角 12px
用户可能很难理解：
哪一个才是主要操作？
而设计规范可以规定：
Primary Button
背景：#1677FF
文字：白色
圆角：6px
高度：36px
字号：14px
所有页面按照同一套规则使用。
这样就可以提高产品的一致性。
UI 设计规范通常包含哪些内容？
一套完整的 UI 设计规范通常包含以下几个部分：
UI设计规范
│
├── 色彩规范
├── 字体规范
├── 间距规范
├── 栅格规范
├── 图标规范
├── 圆角规范
├── 阴影规范
├── 组件规范
├── 布局规范
├── 交互规范
├── 响应式规范
└── 无障碍规范
不同产品的规范内容可能有所不同。
一、色彩规范
色彩规范用于规定产品中不同颜色的使用方式。
通常可以分为：
品牌色
用于体现产品品牌特征。
例如：
主品牌色：蓝色
功能色
用于表达不同状态。
例如：
类型 | 用途 |
|---|---|
Primary | 主要操作 |
Success | 成功 |
Warning | 警告 |
Error | 错误 |
Info | 信息提示 |
中性色
用于：
- 页面背景
- 卡片背景
- 边框
- 正文
- 辅助文字
- 禁用状态
例如：
Text Primary
Text Secondary
Text Tertiary
Border
Background
Disabled
色彩规范的核心并不是“规定几个颜色”，而是：
规定每一种颜色应该在什么场景使用。
二、字体规范
字体规范主要用于统一文字的：
- 字体
- 字号
- 字重
- 行高
- 字间距
例如：
类型 | 字号 | 字重 |
|---|---|---|
页面标题 | 28px | 600 |
一级标题 | 24px | 600 |
二级标题 | 20px | 600 |
正文 | 14px | 400 |
辅助文字 | 13px | 400 |
Caption | 12px | 400 |
实际项目可以根据产品定位进行调整。
三、间距规范
间距规范用于统一页面元素之间的距离。
例如采用：
4
8
12
16
20
24
32
40
48
64
这样的间距体系。
例如：
标题
↓ 16px
正文
卡片
↓ 24px
下一张卡片
建立统一的间距体系，可以避免：
这个地方 13px，那个地方 17px，另一个地方 21px。
四、栅格规范
栅格用于控制页面布局。
例如一个桌面端网站可能采用：
┌──────────────────┐
│ Header │
├─────┬────────────┤
│ │ │
│ Sidebar │ Content │
│ │ │
│ │ │
└─────┴────────────┘
需要规定：
- 页面最大宽度
- 内容区域宽度
- 左右边距
- 栏目宽度
- 栅格数量
- 列间距
例如：
页面最大宽度：1200px
内容区域：960px
栅格：12 列
栏间距：24px
五、圆角规范
圆角也是现代 UI 中常见的视觉元素。
例如：
Small：4px
Medium：6px
Large：8px
Extra Large：12px
可以根据组件类型规定不同圆角。
例如：
组件 | 圆角 |
|---|---|
输入框 | 6px |
按钮 | 6px |
卡片 | 12px |
弹窗 | 12px |
图片 | 8px |
这样整个产品的视觉语言会更加统一。
六、阴影规范
阴影用于表达元素之间的层级关系。
例如：
无阴影
轻微阴影
普通阴影
强调阴影
常见使用场景：
- 卡片
- 下拉菜单
- 弹窗
- 悬浮面板
- Popover
需要避免大量使用强烈阴影，否则容易让界面显得复杂。
七、图标规范
图标规范主要规定：
- 图标风格
- 图标尺寸
- 描边粗细
- 对齐方式
- 图标颜色
- 使用场景
例如：
默认图标：16px
导航图标：18px
操作图标：16px
大型功能图标：24px
同一个产品尽量不要混用完全不同风格的图标。
八、组件规范
组件规范是 UI 设计规范中非常重要的一部分。
常见组件包括：
- Button
- Input
- Select
- Checkbox
- Radio
- Switch
- Tabs
- Table
- Card
- Modal
- Drawer
- Dropdown
- Tooltip
- Pagination
- Tag
- Badge
例如一个按钮可以规定：
Button
│
├── Primary
├── Secondary
├── Dashed
├── Text
└── Danger
同时规定：
- 高度
- 宽度
- 字体
- 圆角
- 内边距
- 图标
- Hover
- Active
- Disabled
- Loading
这样开发人员就不需要每次重新设计一个按钮。
九、交互状态规范
一个优秀的 UI 规范不仅规定“正常状态”，还应该规定组件在不同情况下的表现。
例如按钮：
Default
↓
Hover
↓
Active
↓
Disabled
↓
Loading
输入框也可能包含：
Default
Focus
Error
Success
Disabled
例如：
用户输入错误时，输入框显示错误状态，同时给出明确的错误提示。
这样能够保证整个产品的交互逻辑保持一致。
十、页面布局规范
页面布局规范用于定义页面整体结构。
例如后台管理系统：
┌──────────────────────────┐
│ Header │
├────┬─────────────────────┤
│ │ Breadcrumb │
│ ├─────────────────────┤
│Sidebar │ Page Header │
│ ├─────────────────────┤
│ │ Content │
│ │ │
│ └─────────────────────┤
└────┴─────────────────────┘
需要规定：
- Header 高度
- Sidebar 宽度
- 页面内边距
- 内容最大宽度
- 卡片间距
- 页面标题位置
- 操作区域位置
十一、响应式规范
如果产品需要适配不同设备，还需要规定响应式设计。
例如：
Desktop
↓
Tablet
↓
Mobile
不同屏幕尺寸下：
Sidebar 是否隐藏？
多列布局是否变成单列？
按钮是否需要变成全宽？
字体是否缩小？
卡片如何排列？
都应该提前定义。
十二、UI 设计规范和设计系统有什么区别？
这两个概念经常被混淆。
可以简单理解：
UI设计规范 = 规则
设计系统 = 规则 + 组件 + 资源 + 使用方法
例如：
UI设计规范
告诉你：
按钮应该长什么样。
设计系统
不仅告诉你按钮长什么样，还提供：
Button 组件、代码实现、设计文件、使用说明以及不同状态。
所以设计系统通常比单纯的 UI 设计规范更加完整。
UI 设计规范有什么作用？
一套好的 UI 设计规范通常可以带来几个好处。
1. 提高界面一致性
不同页面使用统一的视觉语言。
2. 提高设计效率
设计师不需要每次从零开始设计组件。
3. 提高开发效率
开发人员可以直接使用已经定义好的组件。
4. 降低沟通成本
设计师、产品经理和开发人员使用统一的设计语言。
5. 提高产品可维护性
当产品规模不断扩大时，统一的规范可以降低后期维护成本。
举个例子
假设我们正在设计一个 AI 学习平台。
如果没有 UI 规范：
首页按钮：蓝色 + 8px圆角
教程按钮：蓝色 + 6px圆角
资源按钮：紫色 + 10px圆角
知识百科按钮：深蓝色 + 4px圆角
整个网站会显得不统一。
如果建立 UI 规范：
Primary Button
颜色：品牌蓝
高度：36px
圆角：6px
字号：14px
字重：500
那么：
首页、教程、百科、资源、插件等页面都使用同一个按钮规范。
整个产品的视觉体验就会更加统一。
UI 设计规范的常见组成结构
一套完整的 UI 设计规范可以整理为：
设计基础
│
├── 色彩
├── 字体
├── 间距
├── 栅格
├── 圆角
├── 阴影
└── 图标
组件
│
├── Button
├── Input
├── Select
├── Card
├── Table
├── Modal
└── Navigation
交互
│
├── Hover
├── Active
├── Focus
├── Disabled
├── Loading
└── Error
页面
│
├── Header
├── Sidebar
├── Content
├── Footer
└── Responsive
UI 设计规范和前端开发有什么关系？
UI 设计规范和前端开发之间有非常直接的关系。
例如设计规范定义：
Primary Button 高度 36px，圆角 6px。
前端就可以将它实现成一个统一的：
<Button variant="primary">
组件。
以后整个项目都使用这个组件。
因此，一个成熟的项目通常会形成：
设计规范
↓
设计组件
↓
前端组件
↓
业务页面
这也是现代产品开发中设计系统的重要基础。
UI 设计规范适合哪些项目？
UI设计规范几乎适用于所有具有多个页面和组件的数字产品。
例如：
- 网站
- SaaS
- AI 产品
- 移动 App
- 管理后台
- 电商平台
- 教育平台
- 企业软件
- 数据可视化平台
尤其是：
页面多、组件多、多人协作的大型项目
更需要建立统一的设计规范。
常见问题
UI设计规范一定要做得很复杂吗？
不一定。
小型项目可能只需要规定：
颜色、字体、间距、按钮、输入框、卡片。
大型项目则可能需要建立完整的设计系统。
UI设计规范和设计稿有什么区别？
设计稿描述的是：
某一个具体页面应该长什么样。
UI设计规范描述的是：
整个产品应该遵循什么规则。
UI设计规范需要开发人员参与吗？
建议参与。
因为最终设计规范需要被实际开发实现。
设计师负责视觉和交互，开发人员则需要考虑组件实现、响应式、可维护性等问题。
UI设计规范可以直接变成前端组件吗？
可以。
成熟的设计系统通常会将设计规范和前端组件对应起来。
例如：
Design Token
↓
CSS Variables
↓
UI Components
↓
页面
一个项目什么时候应该建立 UI 设计规范？
如果项目已经出现：
- 页面数量不断增加
- 多名设计师共同设计
- 多名开发人员共同开发
- 同一个组件出现多个版本
- 页面视觉越来越不统一
那么就非常适合建立 UI 设计规范。
总结
UI设计规范可以理解为：
一套让整个产品“长得统一、用得一致、开发得高效”的设计规则。
它通常包含：
颜色、字体、间距、栅格、图标、圆角、阴影、组件、布局、交互和响应式等内容。
对于一个完整的数字产品来说，UI设计规范并不仅仅是“把颜色和字号规定下来”，更重要的是建立一套统一的视觉语言和交互语言。
当产品进一步发展时，这些规范还可以继续沉淀为完整的：
Design System（设计系统）
从而让设计、开发和产品团队能够围绕同一套规则持续构建产品。
相关知识
- UI设计
- UX设计
- 设计系统
- Design Token
- 原子设计
- 组件库
- 响应式设计
- 交互设计
- 用户体验
- 前端组件
延伸阅读
如果想进一步学习 UI 设计规范，可以按照：
UI基础
↓
色彩与字体
↓
布局与栅格
↓
组件设计
↓
交互设计
↓
Design Token
↓
设计系统
↓
前端组件库