14 KiB

Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

期货智析 — UI 设计规范 v2.0 (Dark Terminal)

方案 A：专业交易终端风格 基于深色模式重新设计，参考 Bloomberg Terminal、TradingView Pro 等专业交易工具。核心目标：减少视觉疲劳、突出数据本身、增强专业感。

1. 设计原则

原则	说明
深色优先	全局深色背景，降低长时间盯盘的视觉疲劳
数据高亮	关键价格、涨跌幅使用高对比色，在深色背景上更醒目
硬朗专业	减小圆角（6px），减少柔和阴影，使用边框和分隔线划分区域
蓝色品牌	品牌色从紫色改为蓝色，更符合金融/科技专业工具的调性
信息分层	利用背景色阶（`#0D1117` → `#161B22` → `#21262D`）构建清晰的层级

2. 色彩系统

2.1 背景色阶（核心）

名称	HEX	用途
Page BG	`#0D1117`	页面最底层背景
Card BG	`#161B22`	卡片、面板背景
Hover BG	`#21262D`	卡片 Hover 态、次级区块
Input BG	`#010409`	输入框、深色嵌套区域
Border	`#30363D`	卡片边框、分割线
Border-Light	`#484F58`	次要边框、表格线

2.2 文字色阶

名称	HEX	用途
Text Primary	`#C9D1D9`	主标题、重要数值
Text Secondary	`#8B949E`	副标题、标签、辅助说明
Text Tertiary	`#6E7681`	禁用态、占位符、时间戳
Text Inverse	`#FFFFFF`	深色按钮上的文字

2.3 功能色（Dark Mode 适配）

相比浅色模式，深色模式下的功能色需要提高亮度以保证对比度。

名称	HEX	用途
上涨	`#F85149`	价格上涨、做多信号
上涨-淡	`rgba(248, 81, 73, 0.15)`	上涨背景遮罩
下跌	`#3FB950`	价格下跌、做空信号
下跌-淡	`rgba(63, 185, 80, 0.15)`	下跌背景遮罩
观望/中性	`#D29922`	观望信号、震荡状态
观望-淡	`rgba(210, 153, 34, 0.15)`	观望背景遮罩

2.4 品牌色（蓝色系）

名称	HEX	用途
Brand Primary	`#58A6FF`	导航高亮、主按钮、选中态、链接
Brand Secondary	`#1F6FEB`	按钮 Hover、强调
Brand Pale	`rgba(88, 166, 255, 0.15)`	选中背景、轻量强调
Brand Border	`#58A6FF`	选中边框

2.5 AI / 智能色系

保持紫色系以区分 AI 内容，但在深色模式下调整饱和度。

名称	HEX	用途
AI Primary	`#A371F7`	AI 模块标题、智能按钮
AI BG	`rgba(163, 113, 247, 0.1)`	AI 分析区域背景
AI Border	`#A371F7`	AI 模块边框

2.6 色调样例板

┌──────────────────────────────────────────────────────────────┐
│  背景色阶（深 → 浅）                                          │
│  ██████ #0D1117   ██████ #161B22   ██████ #21262D           │
│  ██████ #30363D   ██████ #484F58                              │
├──────────────────────────────────────────────────────────────┤
│  文字色阶（亮 → 暗）                                          │
│  ██████ #C9D1D9   ██████ #8B949E   ██████ #6E7681           │
│  ██████ #FFFFFF                                                │
├──────────────────────────────────────────────────────────────┤
│  功能色（高亮）                                                │
│  ██████ #F85149   ██████ #3FB950   ██████ #D29922           │
──────────────────────────────────────────────────────────────┤
│  品牌色（蓝） & AI色（紫）                                    │
│  ██████ #58A6FF   ██████ #1F6FEB   ██████ #A371F7           │
└──────────────────────────────────────────────────────────────┘

2.7 CSS 变量定义

:root {
  /* 背景 */
  --bg-page: #0D1117;
  --bg-card: #161B22;
  --bg-hover: #21262D;
  --bg-input: #010409;
  --border-default: #30363D;
  --border-light: #484F58;

  /* 文字 */
  --text-primary: #C9D1D9;
  --text-secondary: #8B949E;
  --text-tertiary: #6E7681;
  --text-inverse: #FFFFFF;

  /* 功能色 */
  --color-up: #F85149;
  --color-up-bg: rgba(248, 81, 73, 0.15);
  --color-down: #3FB950;
  --color-down-bg: rgba(63, 185, 80, 0.15);
  --color-neutral: #D29922;
  --color-neutral-bg: rgba(210, 153, 34, 0.15);

  /* 品牌色 */
  --color-brand: #58A6FF;
  --color-brand-hover: #1F6FEB;
  --color-brand-bg: rgba(88, 166, 255, 0.15);

  /* AI色 */
  --color-ai: #A371F7;
  --color-ai-bg: rgba(163, 113, 247, 0.1);
}

3. 字体系统

3.1 字体族

font-family:
  'SF Mono', 'Fira Code', 'Roboto Mono',
  'PingFang SC', 'Microsoft YaHei',
  monospace, sans-serif;

注：金融终端推荐使用等宽字体显示数字和代码，增强专业感。

3.2 字号阶梯

层级	字号	字重	行高	用途
H1	20px	600	28px	页面主标题（深色下不宜过大）
H2	16px	600	24px	模块标题
H3	14px	600	20px	卡片标题
Body	13px	400	20px	正文内容
Body-S	12px	400	18px	辅助说明
Caption	11px	400	16px	极小标注
Num-L	24px	700	—	卡片价格（改用 24px 更紧凑）
Num-M	18px	700	—	详情页价格
Num-S	12px	600	—	辅助数值

4. 间距与圆角

4.1 间距（紧凑化）

深色模式下，适当减小间距可以增加信息密度感。

Token	值	用途
`space-xs`	4px	图标与文字
`space-sm`	8px	卡片内元素
`space-md`	12px	卡片间距
`space-lg`	16px	区块间距
`space-xl`	24px	页面级间距

4.2 圆角（硬朗化）

Token	值	用途
`radius-sm`	4px	小按钮、标签
`radius-md`	6px	卡片、面板、输入框
`radius-lg`	8px	弹窗
`radius-full`	9999px	Pill 标签

5. 组件规范

5.1 顶部导航栏

┌────────────────────────────────────────────────────────────────────┐
│  期货智析    [品种分析]  自选  市场概览  风险预警          [●LIVE] │
└────────────────────────────────────────────────────────────────────┘

元素	规范
高度	48px（更紧凑）
背景	`#0D1117` + 底边框 `#30363D`
Logo	图标 + 文字"期货智析"，字号 14px，字重 600，颜色 `#C9D1D9`
导航项	选中态：蓝色文字 `#58A6FF` + 下划线；未选中：灰色 `#8B949E`
LIVE 徽章	绿色圆点 `#3FB950` + "LIVE"文字，字号 10px

5.2 搜索与筛选栏

┌────────────────────────────────────────────────────────────────────┐
│  🔍 搜索品种...           [●网格] [○列表]                          │
│  [●全部] [☆自选] [能源] [金属] [农产品]       [刷新] [分析] [▼]    │
└────────────────────────────────────────────────────────────────────┘

元素	规范
搜索框	高度 32px，圆角 6px，背景 `#010409`，边框 `#30363D`，文字 `#C9D1D9`
视图切换	图标按钮，选中态蓝色 `#58A6FF`
分类 Pill	高度 24px，圆角 4px，选中态蓝色背景 `rgba(88,166,255,0.15)` + 蓝色文字
操作按钮	"刷新"蓝色文字，"分析"蓝色实心按钮

5.3 统计概览卡片

┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ ≡  32    │ │ ↗  7     │ │ ↘  10    │ │ ↔  15    │
│ 监控品种  │ │ 上涨趋势  │ │ 下跌趋势  │ │ 震荡整理  │
└──────────┘ └──────────┘ └──────────┘ └──────────┘

元素	规范
背景	`#161B22`，边框 `#30363D`
数值	20px/700，`#C9D1D9`
标签	12px/400，`#8B949E`
图标	16×16px，颜色对应状态（涨红/跌绿/震荡橙）

5.4 品种卡片（核心组件 - Dark）

┌──────────────────────────────────────────────────────────┐
│ SC  原油                          ¥644.5                 │
│     SC2606                        ↓ -13.3 (-2.02%)       │
├──────────────────────────────────────────────────────────┤
│ [观望]                                                   │
│ 成功率 ━━━━━━ 60%      趋势评分 30                       │
│ [5M] [15M] [30M] [1H]                                    │
│ 压力 642.4   支撑 631.7      [↻] [🔔] [★] →             │
└──────────────────────────────────────────────────────────┘

元素	规范
卡片背景	`#161B22`，边框 `#30363D`，Hover 时边框变 `#58A6FF`
品种标识	32×32px，圆角 4px，背景 `#21262D`，文字 `#8B949E`
价格	24px/700，`#C9D1D9`（默认），涨跌时变红/绿
涨跌幅	12px/600，红 `#F85149` / 绿 `#3FB950`
操作建议	Pill 标签，高度 20px，圆角 4px，背景用半透明色（如 `rgba(210,153,34,0.15)`），文字用纯色
进度条	高度 2px（更细），颜色对应状态
周期 Pill	高度 20px，圆角 4px，选中态蓝色边框 + 文字
底部工具	图标颜色 `#8B949E`，Hover 变 `#C9D1D9`

5.5 K 线图表区（Dark）

元素	规范
图表背景	`#0D1117`（与页面背景一致，无边框感）
网格线	`#21262D`（极淡）
蜡烛图	阳线 `#F85149`（空心或实心），阴线 `#3FB950`
均线	MA5 `#D29922`，MA10 `#58A6FF`，MA20 `#A371F7`
成交量	阳线量柱 `#F85149` (40% 透明度)，阴线量柱 `#3FB950` (40% 透明度)
坐标轴	文字 `#6E7681`

5.6 右侧面板（Dark）

┌────────────────────────────────
│ 🔊 AI 思维分析      [智能分析]  │
├────────────────────────────────┤
│ SC2606 呈多周期空头排列...      │
├────────────────────────────────┤
│ 入场区间 640.5-642.5           │
│ 止损位   645.5                 │
└────────────────────────────────

元素	规范
面板背景	`#161B22`，边框 `#30363D`
标题	14px/600，`#C9D1D9`
AI 按钮	紫色渐变背景或紫色文字
数据行	标签 `#6E7681`，数值 `#C9D1D9`
分隔线	`#30363D`

5.7 弹窗（Dark）

元素	规范
遮罩	`rgba(0,0,0,0.7)`（更深）
弹窗背景	`#161B22`，边框 `#30363D`
标题栏	背景 `#0D1117`，底边框 `#30363D`
表格头	背景 `#0D1117`，文字 `#8B949E`
表格行	背景 `#161B22`，Hover `#21262D`
风险提示	左边框 `#D29922`，背景 `rgba(210,153,34,0.1)`

6. 交互规范

6.1 状态反馈

交互	反馈方式
卡片 Hover	背景变 `#21262D`，边框变 `#58A6FF`
按钮 Hover	背景亮度增加 10%
按钮 Active	背景亮度降低 10%
数据刷新	骨架屏（`#21262D` 脉冲动画）

6.2 滚动条

元素	规范
轨道	`#0D1117`
滑块	`#30363D`，圆角 4px
滑块 Hover	`#484F58`

7. 暗色模式专属优化

对比度检查：所有文字与背景对比度至少 4.5:1（WCAG AA）。
避免纯黑纯白：不使用 #000000 和 #FFFFFF 作为大面积背景/文字，减少眩光。
阴影替代：深色模式下阴影不可见，改用边框颜色变化来体现层级和选中态。
图片适配：如有图标/图片，增加 10% 亮度或添加半透明遮罩使其融入深色背景。

8. 开发资源清单

资源	说明
CSS 变量	已提供 `:root` 定义
字体	推荐 `SF Mono` / `Fira Code` 用于数字
图标	推荐 `Lucide` 或 `Phosphor Icons`（线性风格，适合深色）
图表	`Lightweight Charts`（原生支持深色主题）或 `ECharts`
组件库	建议基于 `Ant Design Dark Theme` 或 `Radix UI` 定制

文档版本: v2.0 (Dark Terminal) | 最后更新: 2026-05-23 基于方案 A：专业交易终端风格

14 KiB Raw Blame History Unescape Escape