# ShowenV2 客户端设计规范

## 设计理念

### 核心价值
- **简洁直观**: 界面简洁，操作直观，用户一看就懂
- **响应迅速**: 操作反馈及时，状态更新实时
- **一致体验**: 跨平台体验一致，学习成本低
- **科技感**: 体现数字生命窗口的科技属性

### 设计原则
1. **移动优先**: 优先考虑移动端体验
2. **触控友好**: 按钮大小适合手指点击
3. **暗色主题**: 默认暗色，适合夜间使用
4. **动效流畅**: 过渡动画自然流畅

---

## 视觉设计

### 配色方案

#### 主色调
- **主色**: `#6366F1` (Indigo 500) - 科技感蓝紫色
- **辅助色**: `#8B5CF6` (Violet 500) - 渐变辅助
- **强调色**: `#EC4899` (Pink 500) - 重要操作

#### 功能色
- **成功**: `#10B981` (Green 500)
- **警告**: `#F59E0B` (Amber 500)
- **错误**: `#EF4444` (Red 500)
- **信息**: `#3B82F6` (Blue 500)

#### 中性色（暗色主题）
- **背景**: `#0F172A` (Slate 900)
- **卡片**: `#1E293B` (Slate 800)
- **边框**: `#334155` (Slate 700)
- **文字主**: `#F1F5F9` (Slate 100)
- **文字次**: `#94A3B8` (Slate 400)

### 字体

#### 中文
- **主字体**: 苹方 / 思源黑体 / Noto Sans SC
- **等宽**: Fira Code / JetBrains Mono

#### 英文
- **主字体**: Inter / SF Pro / Roboto
- **等宽**: Fira Code / JetBrains Mono

#### 字号
- **标题 H1**: 32px / 2rem
- **标题 H2**: 24px / 1.5rem
- **标题 H3**: 20px / 1.25rem
- **正文**: 16px / 1rem
- **辅助**: 14px / 0.875rem
- **说明**: 12px / 0.75rem

### 圆角
- **小**: 4px
- **中**: 8px
- **大**: 16px
- **圆形**: 50%

### 阴影
- **浅**: `0 1px 3px rgba(0, 0, 0, 0.12)`
- **中**: `0 4px 6px rgba(0, 0, 0, 0.16)`
- **深**: `0 10px 15px rgba(0, 0, 0, 0.20)`

### 间距
- **xs**: 4px
- **sm**: 8px
- **md**: 16px
- **lg**: 24px
- **xl**: 32px
- **2xl**: 48px

---

## 组件设计

### 按钮

#### 主按钮
```
背景: 主色渐变
文字: 白色
圆角: 8px
高度: 48px (移动端) / 40px (桌面端)
```

#### 次按钮
```
背景: 透明
边框: 1px 主色
文字: 主色
圆角: 8px
```

#### 图标按钮
```
大小: 48x48px (移动端) / 40x40px (桌面端)
圆角: 50%
背景: 半透明
```

### 卡片
```
背景: 卡片色
圆角: 16px
内边距: 16px
阴影: 中
```

### 输入框
```
背景: 背景色
边框: 1px 边框色
圆角: 8px
高度: 48px (移动端) / 40px (桌面端)
内边距: 12px
```

### 开关
```
宽度: 48px
高度: 28px
圆角: 14px
动画: 0.2s ease
```

### 滑块
```
轨道高度: 4px
滑块大小: 20x20px
颜色: 主色
```

---

## 界面布局

### 移动端

#### 底部导航
```
位置: 固定底部
高度: 64px
项目: 3-5个
图标: 24x24px
文字: 12px
```

#### 顶部栏
```
高度: 56px
标题: 居中 / 居左
操作: 右侧图标按钮
```

#### 内容区
```
内边距: 16px
卡片间距: 16px
```

### 桌面端

#### 侧边栏
```
宽度: 240px
位置: 固定左侧
可折叠
```

#### 主内容区
```
最大宽度: 1200px
居中显示
内边距: 24px
```

---

## 交互设计

### 点击反馈
- **按钮**: 按下缩小 0.95，松开恢复
- **卡片**: 悬停提升阴影
- **列表项**: 悬停背景变亮

### 加载状态
- **全局加载**: 顶部进度条
- **局部加载**: 骨架屏 / 加载动画
- **按钮加载**: 禁用 + 加载图标

### 错误提示
- **Toast**: 3秒自动消失
- **Modal**: 需要用户确认
- **Inline**: 表单验证错误

### 动画时长
- **快速**: 0.15s - 小元素出现/消失
- **标准**: 0.3s - 页面切换、弹窗
- **慢速**: 0.5s - 大型动画

---

## 页面设计

### 首页
- 设备状态卡片
- 快捷操作按钮
- 当前播放信息

### 播放控制
- 大型播放/暂停按钮
- 进度条
- 上一个/下一个
- 播放列表

### 状态机
- 当前状态显示
- 触发器列表
- 场景切换

### 设置
- WiFi 配置
- 设备信息
- 关于

---

## 图标设计

### 图标库
推荐使用：
- **Heroicons** - 简洁现代
- **Lucide** - 一致性好
- **Material Icons** - 丰富全面

### 图标规范
- **大小**: 24x24px (默认)
- **线宽**: 2px
- **风格**: 线性 / 填充
- **颜色**: 继承文字颜色

---

## 响应式设计

### 断点
- **xs**: < 640px (手机)
- **sm**: 640px - 768px (大屏手机)
- **md**: 768px - 1024px (平板)
- **lg**: 1024px - 1280px (小屏电脑)
- **xl**: > 1280px (大屏电脑)

### 适配策略
- **移动端**: 单列布局，底部导航
- **平板**: 双列布局，侧边栏可选
- **桌面**: 多列布局，固定侧边栏

---

## 无障碍设计

### 对比度
- **正常文字**: 至少 4.5:1
- **大文字**: 至少 3:1
- **图标**: 至少 3:1

### 触控目标
- **最小尺寸**: 44x44px (iOS) / 48x48px (Android)
- **间距**: 至少 8px

### 键盘导航
- 支持 Tab 键切换
- 支持 Enter/Space 激活
- 焦点状态明显

### 屏幕阅读器
- 图片添加 alt 文本
- 按钮添加 aria-label
- 状态变化通知

---

## 设计资源

### Figma 文件
- 组件库
- 页面模板
- 图标集

### 设计规范
- 颜色变量
- 字体样式
- 组件样式

---

**文档版本**: v1.0  
**最后更新**: 2026-03-12  
**设计负责人**: 赵雨薇 (前端 & 屏幕工程师)