# 可信碳信息网 UI/UX 设计规范手册 V1.0
**生效日期**：202X年X月X日
**适用范围**：可信碳信息网全平台（Web端、响应式移动端）所有页面、组件、交互设计
**核心目标**：统一设计语言、提升专业质感、优化用户体验、强化品牌认知，解决原界面“粗糙、混乱、无层级”问题

---

## 一、设计总则
### 1.1 产品定位与核心调性
- **产品定位**：面向政企、双碳领域企业的国家级可信碳信息服务平台，核心提供碳数字身份证、碳链上链、绿色服务等专业服务
- **核心调性**：**专业可信、科技感、绿色低碳、严谨权威**，拒绝花哨、廉价、违和的视觉元素
- **用户群体**：政企管理人员、企业碳管理专员、双碳领域从业者，核心需求是高效、清晰、可信的服务体验

### 1.2 核心设计原则
1.  **一致性原则**：全平台色彩、字体、组件、交互100%统一，杜绝样式混用
2.  **层级清晰原则**：通过字号、字重、色彩、间距明确信息主次，核心操作一眼可见
3.  **状态可见原则**：所有交互元素必须有完整的状态反馈（默认/hover/点击/禁用）
4.  **极简专业原则**：用最少的元素传递最清晰的信息，拒绝冗余装饰、违和背景
5.  **无障碍原则**：符合WCAG 2.1 AA标准，色彩对比度≥4.5:1，支持键盘导航

### 1.3 规范落地要求
- 所有设计师必须严格遵循本规范，禁止私自修改样式、色值、组件逻辑
- 新增组件/样式必须提交规范评审，更新后同步全团队
- 开发必须1:1还原设计规范，禁止前端私自调整样式

---

## 二、色彩系统规范
### 2.1 主色系统（品牌色，双碳主题）
| 色号 | HEX | RGB | 使用场景 |
|------|-----|-----|----------|
| 主色-深绿（品牌主色） | `#00A870` | `rgb(0, 168, 112)` | 主按钮、核心图标、标题强调、品牌LOGO、分割线、选中态 |
| 主色-浅绿（辅助主色） | `#81C784` | `rgb(129, 199, 132)` | 标签、次要按钮、背景高亮、卡片标题栏 |

### 2.2 辅助色系统（科技感补充）
| 色号 | HEX | RGB | 使用场景 |
|------|-----|-----|----------|
| 辅助色-科技蓝 | `#2196F3` | `rgb(33, 150, 243)` | 次要操作按钮、信息提示、链接、图表强调 |
| 辅助色-浅蓝 | `#BBDEFB` | `rgb(187, 222, 251)` | 背景、标签、hover态高亮 |

### 2.3 中性色系统（全平台通用，保证可读性）
| 阶数 | HEX | RGB | 使用场景 |
|------|-----|-----|----------|
| 01（纯白） | `#FFFFFF` | `rgb(255, 255, 255)` | 页面背景、卡片背景 |
| 02（浅灰1） | `#F5F7FA` | `rgb(245, 247, 250)` | 页面次级背景、列表hover态 |
| 03（浅灰2） | `#E5E6EB` | `rgb(229, 230, 235)` | 分割线、输入框边框、禁用态背景 |
| 04（中灰1） | `#C9CDD4` | `rgb(201, 205, 212)` | 次要文字、图标、占位符 |
| 05（中灰2） | `#86909C` | `rgb(134, 144, 156)` | 辅助文字、说明文字 |
| 06（深灰1） | `#4E5969` | `rgb(78, 89, 105)` | 正文文字 |
| 07（深灰2） | `#1D2129` | `rgb(29, 33, 41)` | 标题文字、重点内容 |
| 08（纯黑） | `#000000` | `rgb(0, 0, 0)` | 仅用于特殊强调，禁止大面积使用 |

### 2.4 功能色系统（状态提示，B端必备）
| 状态 | HEX | RGB | 使用场景 |
|------|-----|-----|----------|
| 成功色 | `#00B42A` | `rgb(0, 180, 42)` | 成功提示、完成状态、正向操作 |
| 警告色 | `#FF7D00` | `rgb(255, 125, 0)` | 警告提示、待处理状态 |
| 错误色 | `#F53F3F` | `rgb(245, 63, 63)` | 错误提示、删除操作、异常状态 |
| 信息色 | `#168CFF` | `rgb(22, 140, 255)` | 信息提示、通知、帮助 |

### 2.5 色彩使用禁忌
- ❌ 禁止在主按钮中混用蓝色、其他绿色，主操作必须使用主色深绿
- ❌ 禁止使用超过规范外的自定义色值，全平台仅可使用本规范定义的颜色
- ❌ 禁止使用高饱和度、刺眼的颜色，保证视觉舒适度
- ❌ 禁止在文字与背景间使用低对比度配色，必须符合WCAG对比度要求

---

## 三、字体系统规范
### 3.1 字体选型（跨平台一致，Web安全）
- **中文首选**：思源黑体 (Source Han Sans SC)
- **系统 fallback 字体栈**：
  ```css
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  ```
- **字重规范**：仅使用 400(Regular)、500(Medium)、700(Bold) 三个字重，禁止使用其他字重

### 3.2 字体层级规范（桌面端Web）
| 层级 | 字号(px) | 字重 | 行高(px/倍数) | 字间距(px) | 颜色 | 使用场景 |
|------|----------|------|---------------|------------|------|----------|
| H1 一级标题 | 36 | 700 | 44 / 1.2 | 0 | `#1D2129` | 页面大标题（如「可信碳信息网」） |
| H2 二级标题 | 28 | 700 | 36 / 1.3 | 0 | `#1D2129` | 模块大标题（如「核心驱动」「共性能力」） |
| H3 三级标题 | 20 | 500 | 28 / 1.4 | 0 | `#4E5969` | 卡片标题、功能入口标题 |
| 正文 | 16 | 400 | 24 / 1.5 | 0 | `#4E5969` | 描述文字、政策列表、说明内容 |
| 辅助文字 | 14 | 400 | 22 / 1.5 | 0 | `#86909C` | 小字说明、标签、版权信息 |
| 迷你文字 | 12 | 400 | 18 / 1.5 | 0 | `#86909C` | 角标、提示、次要信息 |

### 3.3 移动端字体层级（响应式适配）
| 层级 | 字号(px) | 字重 | 行高(倍数) | 使用场景 |
|------|----------|------|------------|----------|
| H1 | 28 | 700 | 1.2 | 页面大标题 |
| H2 | 24 | 700 | 1.3 | 模块标题 |
| H3 | 18 | 500 | 1.4 | 卡片标题 |
| 正文 | 14 | 400 | 1.5 | 正文内容 |
| 辅助文字 | 12 | 400 | 1.5 | 辅助说明 |

### 3.4 行高、字间距规范
- 行高计算：标题行高=字号×1.2-1.3，正文行高=字号×1.5，辅助文字行高=字号×1.5
- 字间距：仅标题可使用0-0.5px字间距，正文/辅助文字字间距为0，禁止自定义字间距
- 中英文混排：英文/数字使用同一款无衬线字体，字号与中文一致，行高统一

### 3.5 字体使用禁忌
- ❌ 禁止使用宋体、楷体等非无衬线字体，保证科技感与可读性
- ❌ 禁止随意调整字号、字重，必须严格遵循层级规范
- ❌ 禁止在正文中使用700字重，仅标题可使用粗体
- ❌ 禁止使用小于12px的字号，保证移动端可读性

---

## 四、图标系统规范
### 4.1 图标风格定义（统一线性风格，解决原界面割裂问题）
- **风格**：线性轻量图标，2px统一描边，圆角端点，圆角转角，视觉重量完全一致
- **造型**：简约、识别性强，符合B端专业感，禁止使用2.5D、面性、卡通风格图标
- **色彩**：默认使用中性色`#86909C`，hover/选中态使用主色`#00A870`

### 4.2 图标尺寸规范（全平台统一）
| 尺寸(px) | 使用场景 |
|----------|----------|
| 16×16 | 按钮内图标、列表内图标、标签内图标 |
| 20×20 | 导航图标、功能入口图标 |
| 24×24 | 核心模块图标、首页核心驱动图标 |
| 32×32 | 大功能入口、banner图标 |

### 4.3 图标分类与使用场景
1.  **功能图标**：用于操作、导航（如搜索、返回、提交），统一线性风格
2.  **业务图标**：用于碳核算、碳交易、碳金融等业务模块，统一线性风格，与功能图标视觉一致
3.  **装饰图标**：仅用于页面点缀，禁止干扰核心操作，使用低透明度主色/辅助色

### 4.4 图标交付规范
- 格式：SVG矢量格式，保证无限放大不失真
- 命名规范：`icon_功能_场景.svg`（如`icon_search_nav.svg`）
- 交付要求：图标必须居中对齐，描边统一2px，无多余路径，可直接用于前端开发

### 4.5 图标使用禁忌
- ❌ 禁止混用线性、面性、2.5D等不同风格图标
- ❌ 禁止私自修改图标描边粗细、造型，必须使用统一规范的图标库
- ❌ 禁止使用与业务无关、辨识度低的图标
- ❌ 禁止在图标中使用多种颜色，仅可使用单色（默认灰/选中主色）

---

## 五、布局与栅格系统规范
### 5.1 栅格系统定义（12列栅格，Web端标准）
- **最大内容宽度**：1200px（桌面端）
- **列数**：12列
- **水槽(Gutter)**：24px（列与列之间的间距）
- **边距(Margin)**：左右各24px（页面安全区，适配不同屏幕）
- **计算公式**：列宽 = (1200 - 24×2 - 24×11) / 12 = 72px

### 5.2 响应式断点规范
| 断点 | 屏幕宽度 | 布局模式 | 栅格列数 |
|------|----------|----------|----------|
| 桌面端 | ≥1200px | 三列/两列布局 | 12列 |
| 平板端 | 768px - 1199px | 两列布局 | 12列，水槽16px |
| 移动端 | <768px | 单列布局 | 4列，水槽12px，边距16px |

### 5.3 留白与间距规范（解决原界面拥挤问题）
| 间距类型 | 数值(px) | 使用场景 |
|----------|----------|----------|
| 模块间距 | 48 | 页面大模块之间的间距（如首屏与核心驱动、核心驱动与共性能力） |
| 卡片内边距 | 24 | 卡片内部内容与卡片边框的间距 |
| 组件间距 | 16 | 卡片内按钮、输入框、列表项之间的间距 |
| 文字行间距 | 遵循字体层级规范 | 文字行与行之间的间距 |
| 按钮内边距 | 上下12px，左右24px | 按钮内部文字与按钮边框的间距 |

### 5.4 页面布局模板（首页专属，解决原界面层级混乱）
| 页面区域 | 布局要求 | 核心内容 |
|----------|----------|----------|
| 首屏（首屏黄金区） | 全屏宽度，突出核心价值 | 导航栏+搜索栏+核心服务入口（碳数字身份证、国家可信碳链、绿色服务）+「建立您的碳数字身份」核心banner |
| 第二屏 | 12列栅格，4列等分 | 核心驱动模块（4个能力，统一卡片样式） |
| 第三屏 | 12列栅格，4+4+4等分 | 共性能力（4列）+企业出海（4列）+行业动态（4列），突出共性能力 |
| 页脚 | 全屏宽度，纯色背景 | 指导单位、运营单位、联系我们、版权信息 |

### 5.5 对齐规范
- 所有内容**左对齐**（标题可居中，正文/列表必须左对齐）
- 所有元素必须像素级对齐，禁止出现偏移、不对齐的情况
- 卡片、按钮、输入框必须居中对齐栅格线

---

## 六、核心组件规范（1:1落地，解决原界面组件混乱）
### 6.1 按钮组件（Button，全平台统一）
#### 按钮类型与样式
| 按钮类型 | 背景色 | 文字色 | 边框 | 圆角 | 阴影 | 使用场景 |
|----------|--------|--------|------|------|------|----------|
| 主按钮（Primary） | `#00A870` | `#FFFFFF` | 无 | 8px | `0 2px 8px rgba(0,0,0,0.1)` | 核心操作（如「申请服务」「搜索」「提交」） |
| 次按钮（Secondary） | `#FFFFFF` | `#00A870` | 1px `#00A870` | 8px | 无 | 次要操作（如「办证指南」「查证查询」） |
| 文字按钮（Text） | 透明 | `#00A870` | 无 | 0 | 无 | 链接、次要操作、弹窗按钮 |
| 图标按钮（Icon） | 透明 | `#86909C` | 无 | 8px | 无 | 导航、操作栏图标 |

#### 按钮状态规范（必须完整实现）
| 状态 | 样式变化 |
|------|----------|
| 默认态 | 遵循基础样式 |
| Hover态 | 主按钮：背景色`#00905F`，阴影加深；次按钮：背景色`#F5F7FA` |
| 点击态 | 主按钮：背景色`#007A4D`；次按钮：背景色`#E5E6EB` |
| 禁用态 | 主按钮：背景色`#C9CDD4`，文字色`#86909C`，不可点击 |

#### 按钮尺寸规范
| 尺寸 | 高度(px) | 字号(px) | 内边距 | 使用场景 |
|------|----------|----------|--------|----------|
| 大按钮 | 48 | 16 | 上下12px，左右32px | 核心操作、banner按钮 |
| 中按钮 | 40 | 14 | 上下10px，左右24px | 卡片内操作、列表操作 |
| 小按钮 | 32 | 12 | 上下8px，左右16px | 标签、迷你操作 |

#### 按钮使用禁忌
- ❌ 禁止在主操作中使用次按钮、文字按钮，核心操作必须用主按钮
- ❌ 禁止混用圆角，所有按钮统一8px圆角
- ❌ 禁止自定义按钮样式，必须严格遵循规范

---

### 6.2 卡片组件（Card，全平台统一，解决原界面卡片粗糙问题）
#### 卡片样式规范
| 属性 | 规范值 |
|------|--------|
| 背景色 | `#FFFFFF` |
| 圆角 | 12px（大卡片）/8px（小卡片） |
| 阴影 | `0 2px 8px rgba(0,0,0,0.08)` |
| 内边距 | 24px |
| 边框 | 无（仅特殊场景可加1px `#E5E6EB`边框） |

#### 卡片状态规范
| 状态 | 样式变化 |
|------|----------|
| 默认态 | 基础样式 |
| Hover态 | 阴影`0 4px 16px rgba(0,0,0,0.12)`，卡片上浮2px |
| 选中态 | 边框1px `#00A870`，阴影`0 4px 16px rgba(0,168,112,0.15)` |

#### 卡片使用场景
- 大卡片：模块容器（如碳数字身份证、核心驱动、共性能力）
- 小卡片：列表项、功能入口、政策条目

---

### 6.3 输入框组件（Input，含搜索框）
#### 样式规范
| 属性 | 规范值 |
|------|--------|
| 高度 | 40px（中）/48px（大，搜索框） |
| 圆角 | 8px |
| 边框 | 1px `#E5E6EB` |
| 背景色 | `#FFFFFF` |
| 内边距 | 左右16px |
| 字体 | 16px（大）/14px（中），字重400，颜色`#1D2129` |

#### 状态规范
| 状态 | 样式变化 |
|------|----------|
| 默认态 | 基础样式 |
| Focus态 | 边框1px `#00A870`，阴影`0 0 0 2px rgba(0,168,112,0.2)` |
| Hover态 | 边框1px `#C9CDD4` |
| 禁用态 | 背景`#F5F7FA`，边框`#E5E6EB`，文字`#86909C` |
| 错误态 | 边框1px `#F53F3F`，阴影`0 0 0 2px rgba(245,63,63,0.2)` |

#### 搜索框专属规范
- 高度48px，圆角8px，左侧加搜索图标（16×16，`#86909C`）
- 右侧主按钮（大按钮样式），与输入框组合，圆角统一8px

---

### 6.4 其他核心组件规范（精简版，完整规范可补充）
#### 导航组件
- 顶部导航栏高度：64px，背景`#FFFFFF`，阴影`0 2px 8px rgba(0,0,0,0.08)`
- 导航项字号16px，字重500，默认`#4E5969`，hover/选中`#00A870`
- 移动端导航折叠为汉堡菜单，点击展开

#### 列表组件
- 列表项高度：48px，内边距左右24px
- 背景`#FFFFFF`，hover态`#F5F7FA`
- 分割线：1px `#E5E6EB`，仅列表项之间添加

#### 标签组件（Tag）
- 高度：32px，圆角16px
- 背景`#E8F5E9`，文字`#00A870`，字号14px
- 内边距：左右12px，上下6px

---

## 七、交互体验规范
### 7.1 页面交互规范
- **页面滚动**：平滑滚动，模块进入视口时添加淡入动效（时长300ms，缓动函数ease-out）
- **页面加载**：首屏加载骨架屏，数据加载完成后淡入内容
- **页面跳转**：淡入淡出过渡，时长200ms，避免生硬跳转

### 7.2 组件交互状态规范
- 所有可点击元素（按钮、卡片、链接、列表项）必须有完整的4种状态：默认/hover/点击/禁用
- 所有表单元素必须有focus状态反馈
- 所有操作必须有加载状态（按钮loading、骨架屏、进度条）

### 7.3 反馈机制规范
- **操作反馈**：点击按钮后100ms内给出视觉反馈（按钮变色、loading）
- **结果反馈**：操作成功/失败后弹出Toast提示（时长3s，自动消失）
- **错误反馈**：表单错误时实时提示，红色文字+错误态输入框
- **加载反馈**：所有异步操作必须显示加载状态，禁止空白等待

### 7.4 无障碍设计规范
- 色彩对比度≥4.5:1（文字与背景）
- 支持键盘导航（Tab切换、Enter确认、Esc关闭）
- 所有图标、图片必须添加alt文本
- 所有交互元素可被屏幕阅读器识别

---

## 八、品牌与视觉规范（解决原界面违和问题）
### 8.1 LOGO规范
- **LOGO设计建议**：以「碳」「链」「可信」为核心元素，主色`#00A870`，简约线性风格
- **最小尺寸**：24px（移动端）/32px（桌面端）
- **安全区**：LOGO周围必须保留≥LOGO宽度1/4的空白，禁止其他元素侵入
- **使用场景**：页面左上角、导航栏、页脚、物料设计

### 8.2 页面背景规范（核心优化，解决原界面粗糙问题）
- **禁止使用**：山水、风车、螺旋、渐变炫彩等违和、廉价的背景素材
- **规范背景**：
  1.  页面主背景：`#F5F7FA`（浅灰1），纯色，无装饰
  2.  首屏背景：低透明度抽象区块链/碳元素纹理（主色`#00A870`，透明度5%），不抢内容
  3.  卡片背景：纯白`#FFFFFF`，禁止添加背景图
- **Banner背景**：简约渐变（主色浅绿到浅蓝，透明度10%），无多余装饰

### 8.3 内容与图片规范
- **图片风格**：专业、简约、科技感，禁止使用卡通、花哨的图片
- **图片格式**：WebP格式，压缩后体积≤200KB，保证加载速度
- **图片尺寸**：首页banner 1920×500px，卡片配图 80×80px（方形）
- **数据可视化**：图表使用主色+辅助色，统一字体、线条样式，背景纯白，无多余装饰

---

## 九、响应式适配规范
### 9.1 断点适配规则
| 断点 | 布局调整 |
|------|----------|
| 桌面端(≥1200px) | 12列栅格，三列布局，完整展示所有模块 |
| 平板端(768-1199px) | 12列栅格，两列布局，合并次要模块，突出核心操作 |
| 移动端(<768px) | 4列栅格，单列布局，折叠导航，模块垂直排列，按钮放大至48px |

### 9.2 组件适配规范
- 按钮：移动端统一使用大按钮（48px高），点击区域≥48×48px
- 卡片：移动端内边距调整为16px，圆角8px
- 字体：遵循移动端字体层级规范，缩小字号，保证可读性
- 导航：移动端折叠为汉堡菜单，点击展开全屏导航

### 9.3 移动端交互优化
- 所有可点击元素点击区域≥48×48px，避免误触
- 表单输入框高度≥48px，适配移动端输入
- 禁止使用hover态，仅保留点击态反馈
- 页面滚动流畅，无卡顿、错位

---

## 十、落地验收检查清单（设计师/开发必查）
### 10.1 设计验收清单
- [ ] 所有色值严格遵循色彩规范，无自定义颜色
- [ ] 所有字体、字号、字重、行高符合字体规范
- [ ] 所有图标风格统一，尺寸规范，无混用
- [ ] 所有组件样式、状态完整，符合组件规范
- [ ] 页面布局、间距、留白符合栅格与间距规范
- [ ] 无违和背景、冗余装饰，符合品牌调性
- [ ] 响应式适配完整，移动端布局正常
- [ ] 色彩对比度符合WCAG 2.1 AA标准
- [ ] 交互状态完整，所有可点击元素有反馈

### 10.2 开发验收清单
- [ ] 1:1还原设计样式，无私自调整
- [ ] 所有组件状态完整实现
- [ ] 响应式适配正常，无错位、样式错乱
- [ ] 页面加载速度符合要求，无卡顿
- [ ] 无障碍功能正常实现

---

## 十一、规范版本管理
- **当前版本**：V1.0（202X年X月X日生效）
- **迭代规则**：每3个月迭代一次，根据用户反馈、业务需求更新规范
- **变更流程**：所有变更必须提交评审，通过后同步全团队，更新版本号
- **文档管理**：规范文档统一存储在团队知识库，设计师/开发必须使用最新版本

---

## 附：原界面问题针对性优化对照表
| 原界面问题 | 规范解决方案 |
|------------|--------------|
| 按钮混用绿/蓝，样式混乱 | 明确主/次按钮样式，主操作用主色绿，禁止混用 |
| 图标风格割裂，造型粗糙 | 统一线性2px描边图标，规范尺寸与使用场景 |
| 背景违和（山水、螺旋），廉价感 | 禁止使用此类背景，规范为简约科技感纯色/低透明度纹理 |
| 信息层级混乱，无主次 | 建立字体层级、栅格布局，明确页面视觉流，突出核心操作 |
| 卡片样式不统一，无质感 | 统一卡片圆角、阴影、内边距，添加hover态 |
| 留白不足，页面拥挤 | 规范模块间距、内边距，增加呼吸感 |
| 交互状态缺失，体验生硬 | 补全所有组件的4种状态，添加反馈机制 |

---

### 📌 设计师落地说明
1.  本规范为**强制落地标准**，所有设计必须严格遵循，禁止私自修改
2.  如需新增组件/样式，必须提交规范评审，更新后再落地
3.  交付设计稿时，必须标注所有色值、字号、间距，方便开发还原
4.  可基于本规范生成组件库（如Figma组件库），提升设计效率