# UI设计规范文档

## 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 桌面端优化
- 合理利用空间
- 支持快捷键操作
- 提供高级功能入口