Skip to content

CONSOLE_REDESIGN.md

Latest commit

 

History

History
348 lines (285 loc) · 11 KB

CONSOLE_REDESIGN.md

File metadata and controls

348 lines (285 loc) · 11 KB
Raw

控制台面板重构方案 - Apple TV 遥控器风格

设计理念

参考 Apple TV 遥控器的极简设计哲学：

  • 极简主义：去除冗余元素，聚焦核心功能
  • 大按钮设计：主要操作使用大尺寸、易点击的按钮
  • 清晰导航：方向性操作直观明了
  • 触感反馈：视觉反馈清晰，状态变化明显
  • 优雅布局：留白充足，层次分明

当前布局分析

现有结构

┌─────────────────────────────────┐
│ 控制台              0 条        │ ← Header
├─────────────────────────────────┤
│ ⚠️ 配置提示（如有）              │
├─────────────────────────────────┤
│ 😊 💼 ❓ 😄 🤔 ⚡ 🧐 💡          │ ← 情绪选择器
│ [▶ 开始] [定位下一个]            │ ← 主控制按钮
├─────────────────────────────────┤
│ - / -                           │ ← 已删除
├─────────────────────────────────┤
│ 待0 / 进行0 / 成功0 / 失败0 | 总计0 │ ← 状态栏
│ 设置                            │
└─────────────────────────────────┘

问题点

  1. ❌ 布局分散，视觉焦点不明确
  2. ❌ 按钮尺寸偏小，不够突出
  3. ❌ 状态信息冗长，占用空间
  4. ❌ 导航功能不够直观
  5. ❌ 缺少视觉层次感

重构方案

方案 A：极简中心布局（推荐）

┌─────────────────────────────────┐
│ 控制台                           │ ← Header（简化）
├─────────────────────────────────┤
│                                  │
│         😊 💼 ❓ 😄 🤔 ⚡ 🧐 💡   │ ← 情绪选择器（顶部居中）
│                                  │
│    ┌─────────────────────┐      │
│    │                     │      │
│    │    ⏸️ 暂停中        │      │ ← 中心大按钮（播放/暂停）
│    │                     │      │    动态显示状态
│    └─────────────────────┘      │
│                                  │
│    ◀ 上一个    ▶ 下一个          │ ← 方向导航（左右）
│                                  │
│    ┌─────────────────────┐      │
│    │ 待:0 进行:0 成功:0  │      │ ← 状态卡片（紧凑）
│    │ 总计:0              │      │
│    └─────────────────────┘      │
│                                  │
│    设置                          │ ← 底部链接
└─────────────────────────────────┘

特点：

  • ✅ 中心大按钮（80x80px），类似 Apple TV 中心按钮
  • ✅ 播放/暂停状态在按钮内显示，更直观
  • ✅ 方向导航使用左右箭头，符合直觉
  • ✅ 状态信息卡片化，更易读
  • ✅ 情绪选择器移至顶部，不干扰主操作

方案 B：触摸板风格

┌─────────────────────────────────┐
│ 控制台                           │
├─────────────────────────────────┤
│                                  │
│    😊 💼 ❓ 😄 🤔 ⚡ 🧐 💡        │
│                                  │
│  ┌───────────────────────────┐  │
│  │                           │  │
│  │        ⏸️ 暂停中          │  │ ← 大触摸区域
│  │                           │  │    点击任意位置播放/暂停
│  │                           │  │
│  └───────────────────────────┘  │
│                                  │
│    ◀ 上一个    ▶ 下一个          │
│                                  │
│  ┌───────────────────────────┐  │
│  │ 📊 待:0 进行:0 成功:0 总计:0│  │
│  └───────────────────────────┘  │
│                                  │
│    设置                          │
└─────────────────────────────────┘

特点：

  • ✅ 大触摸区域（类似 Apple TV 触摸板）
  • ✅ 支持手势操作（上滑/下滑切换情绪）
  • ✅ 更现代的交互方式

方案 C：紧凑型（适合小屏幕）

┌─────────────────────────────────┐
│ 控制台                           │
├─────────────────────────────────┤
│ 😊 💼 ❓ 😄 🤔 ⚡ 🧐 💡          │
│                                  │
│  ┌──────────┐  ┌──────────┐    │
│  │  ⏸️ 暂停  │  │  ▶ 下一个 │    │
│  └──────────┘  └──────────┘    │
│                                  │
│  ┌───────────────────────────┐  │
│  │ 待:0 进行:0 成功:0 总计:0  │  │
│  └───────────────────────────┘  │
│                                  │
│  设置                            │
└─────────────────────────────────┘

特点：

  • ✅ 更紧凑的布局
  • ✅ 按钮并排显示
  • ✅ 适合小屏幕或折叠状态

推荐方案：方案 A（极简中心布局）

详细设计规范

1. 中心播放按钮

  • 尺寸：80x80px（大按钮，易点击）
  • 形状：圆角矩形（border-radius: 20px）
  • 状态显示：
    • 待机：显示 "▶ 开始" + 绿色渐变背景
    • 运行中：显示 "⏸️ 暂停中" + 橙色渐变背景
    • 暂停：显示 "▶ 继续" + 蓝色渐变背景
  • 动画：点击时有缩放反馈（scale: 0.95）
  • 图标：使用 Unicode 符号或 SVG 图标

2. 方向导航

  • 布局：左右对称
  • 按钮样式：
    • 左侧：◀ 上一个（灰色，可选）
    • 右侧：▶ 下一个（蓝色，主要操作）
  • 尺寸：60x40px
  • 间距：与中心按钮保持 20px 间距

3. 情绪选择器

  • 位置：顶部居中
  • 样式：保持现有设计，但更紧凑
  • 交互：点击切换，当前选中状态更明显

4. 状态卡片

  • 样式：圆角卡片（border-radius: 12px）
  • 背景：半透明背景（dark mode 适配）
  • 布局：两行显示
    • 第一行：待:0 进行:0 成功:0
    • 第二行：总计:0（居中）
  • 字体：11px，等宽字体（数字对齐）

5. Header

  • 简化：只显示 "控制台"，移除计数
  • 高度：40px
  • 样式：保持现有设计

6. 设置链接

  • 位置：底部居中
  • 样式：蓝色链接，12px

交互优化

1. 按钮反馈

/* 中心按钮点击反馈 */
.center-play-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* 方向按钮悬停 */
.nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

2. 状态动画

  • 运行中：中心按钮轻微脉冲动画
  • 成功/失败：状态数字颜色变化（绿色/红色）
  • 切换状态：平滑过渡动画

3. 键盘快捷键

  • 空格 / K：播放/暂停（中心按钮）
  • → / L：下一个
  • ← / H：上一个（如果实现）
  • ESC：停止并重置

响应式设计

折叠状态

  • 只显示中心按钮和状态卡片
  • 情绪选择器和方向导航隐藏
  • 点击展开/折叠

小屏幕适配

  • 按钮尺寸自适应（最小 60x60px）
  • 状态卡片改为单行显示
  • 情绪选择器可横向滚动

实现优先级

Phase 1：核心重构

  1. ✅ 删除 "- / -" 元素（已完成）
  2. ⬜ 重构中心播放按钮（大尺寸，状态显示）
  3. ⬜ 重构方向导航（左右箭头）
  4. ⬜ 重构状态卡片（紧凑布局）

Phase 2：交互优化

  1. ⬜ 添加按钮动画反馈
  2. ⬜ 优化状态切换动画
  3. ⬜ 键盘快捷键优化

Phase 3：高级功能

  1. ⬜ 折叠/展开功能
  2. ⬜ 手势支持（如方案 B）
  3. ⬜ 响应式优化

视觉对比

Before（当前）

  • 按钮分散，视觉焦点不明确
  • 状态信息冗长
  • 布局较传统

After（重构后）

  • 中心大按钮，视觉焦点明确
  • 状态信息卡片化，更易读
  • 布局现代，符合 Apple TV 设计语言

技术实现要点

HTML 结构

<div class="console-panel">
  <header>控制台</header>
  
  <div class="emotion-selector">...</div>
  
  <div class="main-control-area">
    <button class="center-play-btn">
      <span class="play-icon">▶</span>
      <span class="play-text">开始</span>
    </button>
    
    <div class="nav-buttons">
      <button class="nav-prev">◀ 上一个</button>
      <button class="nav-next">▶ 下一个</button>
    </div>
  </div>
  
  <div class="status-card">
    <div class="status-row">待:0 进行:0 成功:0</div>
    <div class="status-total">总计:0</div>
  </div>
  
  <div class="footer">
    <a href="#" class="settings-link">设置</a>
  </div>
</div>

CSS 关键样式

.center-play-btn {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.center-play-btn:active {
  transform: scale(0.95);
}

.status-card {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}

总结

核心改进：

  1. ✅ 删除冗余元素（"- / -"）
  2. ✅ 中心大按钮设计（Apple TV 风格）
  3. ✅ 清晰的方向导航
  4. ✅ 紧凑的状态卡片
  5. ✅ 更好的视觉层次

设计原则：

  • 极简主义
  • 大按钮易点击
  • 清晰的状态反馈
  • 优雅的动画过渡

下一步： 等待确认方案后，开始 Phase 1 的实现。