ShowenV2/clients/docs/DESIGN.md

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
设计负责人: 赵雨薇 (前端 & 屏幕工程师)