monisuo/flutter_monisuo/specs/theme-design.md

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

设计原则

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

---

间距系统

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;

圆角系统

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

---

响应式断点

// 手机竖屏
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 主题配置