# 数字货币应用主题设计规范

## 设计原则

1. **一致性** - 所有页面使用统一的设计语言
2. **可读性** - 确保文字与背景对比度充足 (WCAG AA 标准)
3. **响应式** - 适配不同屏幕尺寸
4. **专业性** - 符合金融/交易类应用的专业感
5. **无障碍** - 避免颜色冲突，支持色盲用户

---

## 颜色系统

### 主色调 (Primary)

```
主色:      #00D4AA (青绿色 - 代表增长、积极)
主色浅:    #00E6B8
主色深:    #00B894
```

### 涨跌色 (Trading Colors)

```
涨/买入:   #00C853 (标准绿 - 国际通用)
跌/卖出:   #FF5252 (标准红 - 国际通用)
```

### 背景色 (Dark Theme)

```
背景主色:      #0F0F1A (深蓝黑)
卡片背景:      #1A1A2E (深蓝紫)
输入框背景:    #16213E (深蓝)
模态框背景:    #1E1E32
```

### 文字颜色

```
主要文字:      #FFFFFF (白色)
次要文字:      #B0B0C0 (灰蓝)
提示文字:      #6B6B80 (暗灰)
禁用文字:      #4A4A5A
链接文字:      #00D4AA
```

### 边框与分割线

```
边框:          rgba(255, 255, 255, 0.08)
分割线:        rgba(255, 255, 255, 0.06)
聚焦边框:      #00D4AA
```

### 功能色

```
成功:      #00C853
警告:      #FF9800
错误:      #FF5252
信息:      #2196F3
充值:      #00C853
提现:      #FF9800
划转:      #2196F3
```

---

## 间距系统

```dart
static const double xs = 4.0;
static const double sm = 8.0;
static const double md = 16.0;
static const double lg = 24.0;
static const double xl = 32.0;
static const double xxl = 48.0;
```

## 圆角系统

```dart
static const double sm = 8.0;   // 小组件
static const double md = 12.0;  // 按钮、输入框
static const double lg = 16.0;  // 卡片
static const double xl = 24.0;  // 大卡片
static const double full = 999.0; // 圆形
```

---

## 文字排版

### 字号

```
h1: 28px - 页面大标题
h2: 24px - 区块标题
h3: 20px - 卡片标题
h4: 18px - 小标题
body1: 16px - 正文
body2: 14px - 次要正文
caption: 12px - 辅助文字
small: 11px - 极小文字
```

### 字重

```
bold: 700 (标题)
semibold: 600 (强调)
medium: 500 (正文)
regular: 400 (辅助)
```

---

## 组件规范

### 按钮

1. **主按钮**
   - 高度: 48px
   - 圆角: 12px
   - 背景: 主题色渐变
   - 文字: 白色, 16px, semibold

2. **买入按钮**
   - 背景: #00C853 渐变
   - 文字: 白色

3. **卖出按钮**
   - 背景: #FF5252 渐变
   - 文字: 白色

4. **轮廓按钮**
   - 边框: 1px solid border
   - 背景: 透明
   - 文字: 主题色

### 输入框

- 高度: 48px
- 圆角: 12px
- 背景: #16213E
- 边框: 1px solid rgba(255,255,255,0.1)
- 聚焦边框: #00D4AA
- 文字: 白色
- 提示: #6B6B80

### 卡片

- 圆角: 16px
- 背景: #1A1A2E
- 内边距: 16px-20px
- 阴影: 无 (扁平设计)

### 涨跌标签

- 圆角: 6px
- 内边距: 6px 10px
- 涨: 背景 rgba(0,200,83,0.15), 文字 #00C853
- 跌: 背景 rgba(255,82,82,0.15), 文字 #FF5252

### 底部导航

- 高度: 60px + safeArea
- 背景: #0F0F1A
- 边框: top 1px solid rgba(255,255,255,0.08)
- 选中色: #00D4AA
- 未选中色: #6B6B80

---

## 响应式断点

```dart
// 手机竖屏
const double mobile = 360;

// 手机横屏/小平板
const double tablet = 768;

// 平板/桌面
const double desktop = 1024;
```

---

## 动画规范

- 标准时长: 200ms-300ms
- 缓动曲线: easeOutCubic
- 页面转场: 300ms
- 按钮反馈: 150ms

---

## 无障碍设计

1. **对比度**: 所有文字与背景对比度 >= 4.5:1
2. **触摸目标**: 最小 44x44px
3. **状态反馈**: 不仅依赖颜色区分
4. **焦点指示**: 明显的焦点样式

---

## 禁止事项

1. ❌ 文字与背景颜色相同
2. ❌ 纯黑色背景 (#000000)
3. ❌ 纯白色文字在浅色背景
4. ❌ 低对比度组合 (对比度 < 4.5)
5. ❌ 仅用颜色区分状态
6. ❌ 过小的触摸目标 (< 44px)
7. ❌ 不一致的组件样式
8. ❌ 硬编码颜色值

---

## 实现清单

### 核心文件

1. `lib/core/theme/app_colors.dart` - 颜色定义
2. `lib/core/theme/app_theme.dart` - 主题配置
3. `lib/core/theme/app_text_styles.dart` - 文字样式
4. `lib/core/theme/app_spacing.dart` - 间距常量
5. `lib/ui/shared/ui_constants.dart` - 整合导出

### 需要优化的文件

- 所有 UI 页面文件
- 所有 UI 组件文件
- main.dart 主题配置