238 lines
4.2 KiB
Markdown
238 lines
4.2 KiB
Markdown
# 数字货币应用主题设计规范
|
|
|
|
## 设计原则
|
|
|
|
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 主题配置
|