---
description: UI 设计规范文档
---

# UI Design

## 1. 设计原则

### 1.1 一致性

- 保持界面元素的一致性
- 使用统一的颜色方案
- 保持字体和图标风格统一
- 统一的交互模式

### 1.2 简洁性

- 避免界面元素过度拥挤
- 使用清晰的视觉层次
- 突出重要信息
- 减少不必要的装饰元素

### 1.3 可用性

- 确保所有功能易于访问
- 提供清晰的反馈
- 保持操作流程简单直观
- 提供必要的帮助信息

## 2. 颜色规范

### 2.1 主色调

- 主色：#1890FF（蓝色）
- 辅助色：#52C41A（绿色）
- 警告色：#FAAD14（橙色）
- 错误色：#F5222D（红色）

### 2.2 中性色

- 标题文字：#262626
- 正文文字：#595959
- 次要文字：#8C8C8C
- 禁用文字：#BFBFBF
- 边框颜色：#D9D9D9
- 背景色：#F0F2F5

## 3. 字体规范

### 3.1 字体家族

- 中文：PingFang SC
- 英文：Helvetica Neue

### 3.2 字号规范

- 主标题：24px
- 次标题：20px
- 小标题：16px
- 正文：14px
- 辅助文字：12px

## 4. 布局规范

### 4.1 间距

- 页面边距：24px
- 组件间距：16px
- 内部间距：8px

### 4.2 栅格系统

- 使用 24 栅格系统
- 响应式断点：
  - xs: `< 576px`
  - sm: `≥ 576px`
  - md: `≥ 768px`
  - lg: `≥ 992px`
  - xl: `≥ 1200px`

## 5. 组件规范

### 5.1 按钮

- 主要按钮：实心背景
- 次要按钮：描边样式
- 文字按钮：纯文字样式
- 按钮高度：32px/40px

### 5.2 表单

- 输入框高度：32px
- 标签对齐：右对齐
- 必填项标记：红色星号

### 5.3 表格

- 表头背景色：#FAFAFA
- 行高：48px
- 斑马纹：隔行变色

## 6. 交互规范

### 6.1 状态反馈

- 加载状态：使用加载动画
- 成功提示：绿色对勾图标
- 错误提示：红色错误图标
- 警告提示：黄色警告图标

### 6.2 动画效果

- 过渡时间：0.3s
- 缓动函数：ease-in-out
- 弹窗动画：fade + slide

## 7. 响应式设计

### 7.1 移动端适配

- 优先考虑移动端体验
- 使用弹性布局
- 关键信息优先展示
- 触控区域最小44x44px

### 7.2 桌面端优化

- 合理利用空间
- 支持快捷键操作
- 提供高级功能入口
