Day 110
Day 110：衍生品交易产品UX设计
渐进式披露(简单/标准/专业模式)、风险可视化(清算仪表盘+盈亏模拟器)、期权策略构建器、移动端交易UX、最佳实践(Hyperliquid/GMX/dYdX)
2026-04-27
交易UX设计衍生品风险可视化交易界面HyperliquidDay110
核心概念
衍生品 UX 的核心矛盾
一句话总结：衍生品交易 UX 的核心矛盾是功能复杂性与用户认知负荷之间的平衡——专业交易者需要深度功能，新手需要简单引导，而同一个产品必须同时服务两类用户。
衍生品 UX 的困境金字塔：
专业交易者
/ \
/ 需要所有功能 \
/ 高级订单类型 \
/ 自定义图表 \
/ 组合策略 \
/ 快捷键 \
/──────────────────── \
/ 中级交易者 \
/ 需要核心功能+教育 \
/ 理解杠杆和保证金 \
/ 需要风险提示 \
/────────────────────────── \
/ 新手用户 \
/ 被杠杆/保证金/清算吓跑 \
/ 需要极简界面+引导式体验 \
/ 可能连什么是永续合约都不知道 \
/──────────────────────────────\
挑战：同一产品，三类用户，如何设计？
答案：渐进式披露（Progressive Disclosure）
知识点详解
知识点 1：渐进式披露 — 三层界面架构
三层界面设计方案：
═══════════════════════════════════════
Layer 1: 简单模式 (Simple Mode)
═══════════════════════════════════════
目标用户：新手、偶尔交易的用户
设计原则：一屏完成交易，最少决策点
┌─────────────────────────────────┐
│ ┌───────────┐ ┌───────────┐ │
│ │ 做多 ▲ │ │ 做空 ▼ │ │
│ │ (绿色) │ │ (红色) │ │
│ └───────────┘ └───────────┘ │
│ │
│ 金额: [______] USDC │
│ │
│ 杠杆: ○ 2x ● 5x ○ 10x │
│ (滑块或预设按钮) │
│ │
│ ┌──────────────────────────┐ │
│ │ 预估盈亏 │ │
│ │ ETH +10% → 你赚 $250 │ │
│ │ ETH -10% → 你亏 $250 │ │
│ │ 清算价: $2,400 (-20%) │ │
│ └──────────────────────────┘ │
│ │
│ [═══════ 确认交易 ═══════] │
│ │
│ ℹ️ 什么是永续合约？ > │
└─────────────────────────────────┘
隐藏的功能：
├── 订单类型（默认市价单）
├── 保证金模式（默认逐仓）
├── 止盈止损（开仓后提示设置）
├── 高级图表
└── 资金费率详情
═══════════════════════════════════════
Layer 2: 标准模式 (Standard Mode)
═══════════════════════════════════════
目标用户：有基础知识的交易者
新增元素：
┌─────────────────────────────────────────┐
│ ETH/USDC 永续 价格: $3,000.50 │
│ [图表区域 - TradingView 集成] │
│ │
│ ┌──────────┬──────────┬──────────┐ │
│ │ 限价单 │ 市价单 │ 止损单 │ │
│ └──────────┴──────────┴──────────┘ │
│ │
│ 方向: [做多] [做空] │
│ 金额: [______] USDC │
│ 杠杆: [滑块 1x ————— 50x] │
│ 保证金: ○ 逐仓 ○ 全仓 │
│ │
│ ┌────── 风险面板 ──────┐ │
│ │ 开仓均价: $3,000.50 │ │
│ │ 清算价: $2,400.00 │ │
│ │ 保证金率: 5.0% │ │
│ │ 预估手续费: $1.80 │ │
│ │ 资金费率: +0.01%/8h │ │
│ └──────────────────────┘ │
│ │
│ 止盈: [______] 止损: [______] │
│ [══════ 开多 ETH ══════] │
└─────────────────────────────────────────┘
═══════════════════════════════════════
Layer 3: 专业模式 (Pro Mode)
═══════════════════════════════════════
目标用户：专业交易者、做市商
新增元素：
┌──────────────────────────────────────────────┐
│ [自定义多面板布局] │
│ │
│ ┌─────────────────┐ ┌────────────────────┐ │
│ │ 图表面板 │ │ 订单簿深度 │ │
│ │ (多指标叠加) │ │ (逐档显示) │ │
│ │ 自定义指标 │ │ 大单标记 │ │
│ └─────────────────┘ └────────────────────┘ │
│ │
│ ┌─────────────────┐ ┌────────────────────┐ │
│ │ 交易面板 │ │ 持仓/订单管理 │ │
│ │ 条件单/TWAP │ │ 批量操作 │ │
│ │ 追踪止损 │ │ 未实现盈亏 │ │
│ │ 冰山单 │ │ 资金费率累积 │ │
│ │ Post-Only │ │ 历史交易分析 │ │
│ └─────────────────┘ └────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────┐ │
│ │ 快捷键: B=买入 S=卖出 X=平仓 Q=取消全部 │ │
│ └──────────────────────────────────────────┘ │
│ │
│ [API 文档] [WebSocket 流] [FIX协议] │
└──────────────────────────────────────────────┘
知识点 2：风险可视化设计
风险可视化的核心组件：
组件 1：清算仪表盘 (Liquidation Dashboard)
═══════════════════════════════════════════
┌───────────────────────────────────────────┐
│ ETH 多头 10x 入场: $3,000 │
│ │
│ 健康度指示器： │
│ ██████████████████░░░░░ 75% 安全 │
│ [安全] ←────────────→ [危险] → [清算] │
│ │
│ 价格标尺： │
│ $3,300 ┤ ............ +10% (止盈) │
│ $3,000 ┤ ▶ 当前价格 │
│ $2,700 ┤ ............ -10% (止损) │
│ $2,400 ┤ ✕✕✕✕✕✕✕✕✕✕ 清算价格 ⚠️ │
│ │ │
│ 距离清算: $600 (20%) │
│ 追加保证金价格: $2,550 (-15%) │
│ │
│ ⚠️ 清算预警: 价格跌至 $2,550 时通知 │
│ [设置预警] │
└───────────────────────────────────────────┘
组件 2：盈亏模拟器 (P&L Simulator)
═══════════════════════════════════════════
用户输入目标价格，实时计算盈亏：
┌───────────────────────────────────────────┐
│ 盈亏模拟器 │
│ │
│ 如果 ETH 价格变为: [$3,200] │
│ │
│ ┌──────────────────────────────────┐ │
│ │ 盈利: +$666.67 (+6.67%) │ │
│ │ 包含: │ │
│ │ ├── 价格变动盈利: +$700.00 │ │
│ │ ├── 资金费率支出: -$18.00 │ │
│ │ ├── 开仓手续费: -$9.00 │ │
│ │ └── 平仓手续费: -$6.33 │ │
│ │ │ │
│ │ ROE (Return on Equity): +66.7% │ │
│ └──────────────────────────────────┘ │
│ │
│ 盈亏曲线: │
│ $1000 ┤ / │
│ $500 ┤ __/ │
│ $0 ┤──────────/──────────── │
│ -$500 ┤ / │
│ -$1000 ┤ ✕ 清算 │
│ └──┬────┬────┬────┬──── │
│ $2.4K $2.7K $3.0K $3.3K │
└───────────────────────────────────────────┘
组件 3：实时风险指标面板
═══════════════════════════════════════════
┌───────────────────────────────────────────┐
│ 账户风险概览 │
│ │
│ 总保证金: $10,000 │
│ 已用保证金: $3,000 (30%) │
│ 可用保证金: $7,000 (70%) │
│ 未实现盈亏: +$456 │
│ 账户净值: $10,456 │
│ │
│ 持仓风险分布: │
│ ETH 多头 ████████░░ 80% 仓位 │
│ BTC 空头 ██░░░░░░░░ 20% 仓位 │
│ │
│ 最大回撤: -$2,500 (若ETH跌15%+BTC涨10%) │
│ VaR(95%): -$1,200 (24小时) │
│ │
│ ⚠️ 风险警告: │
│ • ETH 仓位集中度过高（建议分散） │
│ • 资金费率为正，多头持仓成本增加 │
└───────────────────────────────────────────┘
知识点 3：期权策略构建器 UX
期权策略构建器设计：
方案 A: 模板式（零售用户友好）
═══════════════════════════════════════
┌───────────────────────────────────────────┐
│ 我想要... │
│ │
│ ┌─────────────┐ ┌──────────────┐ │
│ │ 📈 看涨 │ │ 📉 看跌 │ │
│ │ ETH 会涨 │ │ ETH 会跌 │ │
│ └─────────────┘ └──────────────┘ │
│ │
│ ┌─────────────┐ ┌──────────────┐ │
│ │ 🔄 横盘 │ │ 💥 大波动 │ │
│ │ 价格不动 │ │ 会大涨或大跌 │ │
│ └─────────────┘ └──────────────┘ │
│ │
│ 选择"看涨"后： │
│ │
│ 确信程度: │
│ ○ 略微看涨 → Bull Put Spread (低风险) │
│ ○ 中度看涨 → Bull Call Spread (中风险) │
│ ● 强烈看涨 → Long Call (高风险) │
│ │
│ 预算: [______] USDC │
│ │
│ 系统推荐： │
│ ┌──────────────────────────────────┐ │
│ │ ETH $3,200 Call │ │
│ │ 到期: 2周 │ │
│ │ 最大收益: 无限 │ │
│ │ 最大亏损: $150 (权利金) │ │
│ │ 盈亏平衡: $3,350 │ │
│ └──────────────────────────────────┘ │
└───────────────────────────────────────────┘
方案 B: 可视化构建（中级用户）
═══════════════════════════════════════
┌───────────────────────────────────────────┐
│ 策略构建器 │
│ │
│ 收益曲线（实时更新）: │
│ │
│ +$500 ┤ ╱ │
│ +$250 ┤ ╱╱╱ │
│ $0 ┤─────────╱╱─────────── │
│ -$150 ┤ - - - ╱╱ - - - - - - │
│ └──┬────┬────┬────┬──── │
│ $2.8K $3.0K $3.2K $3.4K │
│ │
│ 当前腿: │
│ ┌──┐ Leg 1: Buy Call $3,200 -$150 │
│ ├──┤ Leg 2: [添加一腿 +] │
│ └──┘ │
│ │
│ Greeks: │
│ Delta: +0.45 Gamma: +0.03 │
│ Theta: -$8.5/天 Vega: +$15.2 │
│ │
│ [══════ 执行策略 ══════] │
└───────────────────────────────────────────┘
知识点 4：移动端交易 UX
移动端衍生品交易的特殊挑战：
挑战 1：屏幕空间有限
├── 桌面版：同时显示图表 + 订单簿 + 交易面板 + 持仓
├── 移动端：一次只能聚焦一个区域
└── 方案：Tab 切换 + 关键信息常驻底部
挑战 2：操作精度要求
├── 滑块设置杠杆 → 手指粗大不精确
├── 价格输入 → 小屏幕键盘容易误触
└── 方案：预设按钮 + 大触控区域 + 确认弹窗
挑战 3：紧急操作需求
├── 市场暴动时需要快速平仓
├── 网络延迟 + 加载时间 = 致命
└── 方案：一键全部平仓按钮 + 滑动平仓手势
移动端布局建议：
┌────────────────────┐
│ ETH $3,000 ▲1.5% │ ← 价格常驻顶部
├────────────────────┤
│ │
│ [迷你图表] │ ← 可展开为全屏
│ │
├────────────────────┤
│ ┌──────┐┌──────┐ │
│ │ 做多 ││ 做空 │ │ ← 大按钮
│ └──────┘└──────┘ │
│ │
│ 金额 [_____] │
│ 杠杆 [5x] ← 弹窗 │
│ │
│ 盈亏预估: │
│ +10% → +$500 │
│ 清算: $2,400 │
├────────────────────┤
│ [持仓] [订单] [历史]│ ← 底部 Tab
│ │
│ ETH Long 10x │
│ +$123 (+4.1%) │
│ [平仓] [止盈止损] │
└────────────────────┘
知识点 5：最佳实践 — 头部协议 UX 分析
| 协议 | UX 亮点 | UX 不足 | 适合用户 |
|---|---|---|---|
| Hyperliquid | 极速交易体验、类CEX丝滑度、HLP金库一键做市 | 功能较少、无期权支持 | 追求速度的交易者 |
| GMX | 简洁直观、一页完成交易、GLP收益展示清晰 | 图表功能弱、高级订单少 | DeFi原生用户 |
| dYdX V4 | 完整订单簿、专业图表、Cosmos链定制体验 | 上手门槛高、界面略复杂 | 专业交易者 |
| Aevo | 期权+永续一体化、结构化产品入口明确 | 期权界面仍复杂 | 期权交易者 |
| Vertex | 统一保证金、跨保证金、快速交易 | 品牌知名度低 | 资本效率追求者 |
Hyperliquid UX 成功要素分析：
1. 性能即体验
├── 200ms 出块 → 订单确认几乎无延迟
├── 自有 L1 → 无 Gas 费（协议内化）
├── 感觉像使用 Binance → 降低 CEX 用户迁移门槛
└── 教训：在 DeFi 中，性能本身就是最大的 UX 提升
2. 信息密度恰好
├── 桌面：关键信息一屏展示
├── 不堆砌无用数据
├── 资金费率/OI/清算价 在需要时显示
└── 教训：不是信息越多越好，而是"在对的时间展示对的信息"
3. 交易确认极简
├── 点击交易 → 立即执行（无钱包弹窗）
├── Session Key 机制 → 预授权一段时间
├── 降低每次交易的"摩擦"
└── 教训：减少每次交易的点击次数 = 增加交易频率
GMX 的 UX 教训：
1. 简洁的力量
├── 只展示核心信息：价格、仓位、盈亏
├── "一页完成交易"理念
└── 教训：对于 DeFi 新手，Less is More
2. 但过于简洁的代价
├── 缺少高级订单类型 → 专业用户流失
├── 图表功能弱 → 交易者不够用
└── 教训：简洁不等于功能缺失，需要"隐藏的深度"
面试题精选
为新手设计永续合约交易引导流程？
30秒回答：
设计分三阶段：第一阶段"观察学习"——用模拟交易让用户无风险体验完整流程；第二阶段"安全尝试"——限制最高2-3x杠杆和最大$50投入的受保护模式；第三阶段"逐步解锁"——完成安全测验后逐步开放更高杠杆。核心原则是让用户在亏得起的范围内建立正确的认知模型。
2分钟详答：
新手引导流程设计：
Phase 1: 认知建立（开户后第一屏）
├── 30秒动画：什么是永续合约
│ └── 用"预测涨跌赚差价"而非"衍生品"来解释
├── 关键概念卡片（3张，可滑动）：
│ ├── "杠杆 = 放大盈亏"（用$100对比$1000的盈亏）
│ ├── "清算 = 输光保证金"（用保护价格解释）
│ └── "资金费率 = 持仓成本"（用租金类比）
└── [开始模拟交易] 按钮
Phase 2: 模拟交易（无风险体验）
├── 给 $10,000 模拟资金
├── 只开放 ETH/USDC 交易对
├── 固定 5x 杠杆（不可调）
├── 引导式操作：
│ ├── Step 1: "点击做多——你认为 ETH 会涨"
│ ├── Step 2: "输入 $100——这是你愿意冒险的金额"
│ ├── Step 3: "确认交易——观察你的持仓"
│ ├── Step 4: 等待 1 分钟 → "看到盈亏变化了吗？"
│ └── Step 5: "点击平仓——锁定盈亏"
├── 完成后显示总结：
│ └── "你用 $100 在 5 分钟内赚了/亏了 $X"
└── [我准备好了，开始真实交易] / [再练习一次]
Phase 3: 受保护的真实交易
├── 限制：
│ ├── 最高杠杆: 3x
│ ├── 最大仓位: $50
│ ├── 只能 ETH/BTC（流动性最好的币对）
│ └── 强制设置止损（必须在开仓前设定）
├── 增强的风险提示：
│ ├── 每次开仓前：显示"最大可能亏损 = $X"
│ ├── 清算警告：提前 20% 发送 Push 通知
│ └── 首次亏损时：弹出"这是正常的"安慰卡片
└── 完成 5 笔交易 + 通过安全测验 → 解锁完整功能
安全测验（解锁高级功能）：
├── Q1: 10x 杠杆意味着什么？
├── Q2: 什么情况下会被清算？
├── Q3: 资金费率为正时，多头需要付费吗？
├── Q4: 为什么需要设置止损？
└── 4/4 正确 → 解锁 20x 杠杆 + 全部交易对
PM 设计原则：
├── 不要阻止用户交易（会流失）→ 限制风险敞口
├── 让用户在"安全的失败"中学习
├── 每个新概念在用户需要时才引入
├── 成就系统："完成首笔盈利交易" "存活 7 天" 等
└── 数据驱动：追踪每步流失率，持续优化
追问准备：
- 如何平衡安全和自由？→ 渐进式限制 + 用户可跳过（签署风险确认）
- 这个引导的关键指标是什么？→ 引导完成率、首笔交易转化率、7日留存率
- 竞品都没做这么复杂的引导，有必要吗？→ DeFi 用户获取成本极高，留住一个用户比获取十个新用户有价值
明日预告
Day 111：MEV 2026 全景 — 从 Flashbots 到 ePBS
- 5 个 Builder 构建 80% 区块的现状
- BuilderNet 去中心化构建
- Shutter 加密 Mempool 方案
- Ethereum Glamsterdam ePBS（EIP-7732）
- MEV 对 Perp 交易的影响及学术研究