403 lines
10 KiB
Markdown
403 lines
10 KiB
Markdown
# 无人自动洗宠机 - 视觉设计规范
|
||
|
||
## 设计理念
|
||
|
||
本界面采用**深蓝科技风**设计，融合现代工业美学与高可用性，确保在各种光线条件下清晰可读，同时传达专业和可靠的品牌形象。
|
||
|
||
## 色彩系统
|
||
|
||
### 主色调
|
||
```
|
||
背景色 (Background)
|
||
- 主背景: #0F3A7D (深蓝色)
|
||
- 渐变背景: #1A4A8D (中蓝色)
|
||
- 面板背景: #0D2F5F (深蓝色)
|
||
```
|
||
|
||
### 文字色
|
||
```
|
||
文字 (Text)
|
||
- 主文字: #E8F0FF (浅灰白色) - 高对比度
|
||
- 次要文字: #B0C4DE (淡蓝灰色)
|
||
```
|
||
|
||
### 强调色
|
||
```
|
||
交互元素 (Interactive)
|
||
- 强调色: #00D4FF (青蓝色) - 按钮、数据显示
|
||
- 成功色: #00FF88 (绿色) - 正常状态、完成
|
||
- 警告色: #FFB800 (橙色) - 警告、需要注意
|
||
- 错误色: #FF4444 (红色) - 故障、错误
|
||
- 边框色: #2A6BC0 (中蓝色)
|
||
```
|
||
|
||
### 色彩对比度
|
||
- 背景与文字对比度: 7.5:1 (WCAG AAA级)
|
||
- 确保在强光和弱光环境下都清晰可读
|
||
|
||
## 字体系统
|
||
|
||
### 字体族
|
||
```
|
||
主字体: Roboto / Microsoft YaHei (微软雅黑)
|
||
- 现代感、清晰、易读
|
||
|
||
数据字体: Consolas / Courier New
|
||
- 等宽字体，用于数字显示
|
||
- 传达精确感和专业性
|
||
```
|
||
|
||
### 字体大小
|
||
```
|
||
标题 (Title): 36pt - 粗体 - 带发光效果
|
||
副标题 (Subtitle): 22pt - 半粗体
|
||
正文 (Body): 16pt - 常规
|
||
数据显示 (Data): 28pt - 粗体 - 等宽字体
|
||
数字显示 (Digital): 48pt - 粗体 - 等宽字体 - 带发光效果
|
||
```
|
||
|
||
### 字重
|
||
```
|
||
Bold (700): 标题、重要数据
|
||
SemiBold (600): 副标题、强调文本
|
||
Regular (400): 正文、说明文字
|
||
```
|
||
|
||
## 视觉效果
|
||
|
||
### 发光效果 (Glow)
|
||
```xaml
|
||
<!-- 青蓝色发光 -->
|
||
<DropShadowEffect Color="#00D4FF"
|
||
BlurRadius="10"
|
||
ShadowDepth="0"
|
||
Opacity="0.8"/>
|
||
|
||
<!-- 绿色发光（LED指示灯）-->
|
||
<DropShadowEffect Color="#00FF88"
|
||
BlurRadius="8"
|
||
ShadowDepth="0"
|
||
Opacity="0.8"/>
|
||
```
|
||
|
||
### 阴影效果 (Shadow)
|
||
```xaml
|
||
<!-- 面板阴影 -->
|
||
<DropShadowEffect Color="#00D4FF"
|
||
BlurRadius="10"
|
||
ShadowDepth="0"
|
||
Opacity="0.3"/>
|
||
```
|
||
|
||
### 圆角 (Corner Radius)
|
||
```
|
||
按钮: 8px
|
||
面板: 10px
|
||
进度条: 5px
|
||
```
|
||
|
||
## 组件样式
|
||
|
||
### 1. 按钮 (TechButton)
|
||
|
||
#### 主要按钮
|
||
```
|
||
背景: #00D4FF (青蓝色)
|
||
文字: #0F3A7D (深蓝色)
|
||
边框: 2px #00D4FF
|
||
圆角: 8px
|
||
内边距: 30px 15px
|
||
发光: 青蓝色光晕
|
||
|
||
悬停状态:
|
||
- 背景变亮: #00E8FF
|
||
- 发光增强: BlurRadius 20
|
||
|
||
按下状态:
|
||
- 背景变暗: #00B8E6
|
||
|
||
禁用状态:
|
||
- 背景: #2A6BC0
|
||
- 文字: #5A7FA0
|
||
- 无发光效果
|
||
```
|
||
|
||
#### 次要按钮
|
||
```
|
||
背景: 透明
|
||
文字: #00D4FF
|
||
边框: 2px #00D4FF
|
||
其他同主要按钮
|
||
```
|
||
|
||
### 2. 面板 (TechPanel)
|
||
```
|
||
背景: #0D2F5F
|
||
边框: 2px #2A6BC0
|
||
圆角: 10px
|
||
内边距: 20px
|
||
阴影: 青蓝色微光
|
||
```
|
||
|
||
### 3. LED指示灯 (LEDIndicator)
|
||
```
|
||
尺寸: 16x16px
|
||
形状: 圆形
|
||
颜色: #00FF88 (绿色)
|
||
发光: 绿色光晕
|
||
|
||
状态:
|
||
- 正常: 绿色 #00FF88
|
||
- 警告: 橙色 #FFB800
|
||
- 错误: 红色 #FF4444
|
||
- 离线: 灰色 #5A7FA0
|
||
```
|
||
|
||
### 4. 进度条 (TechProgressBar)
|
||
```
|
||
高度: 30px
|
||
背景: #0D2F5F
|
||
边框: 2px #2A6BC0
|
||
圆角: 5px
|
||
|
||
进度条:
|
||
- 颜色: #00D4FF
|
||
- 圆角: 3px
|
||
- 内边距: 2px
|
||
- 发光: 青蓝色光晕
|
||
```
|
||
|
||
### 5. 数字显示 (DigitalDisplay)
|
||
```
|
||
字体: Consolas 48pt 粗体
|
||
颜色: #00D4FF
|
||
发光: 青蓝色光晕
|
||
用途: 价格、倒计时、大数据
|
||
```
|
||
|
||
## 布局规范
|
||
|
||
### 间距系统
|
||
```
|
||
超小间距: 5px
|
||
小间距: 10px
|
||
中间距: 15px
|
||
大间距: 20px
|
||
超大间距: 30px
|
||
巨大间距: 40px
|
||
```
|
||
|
||
### 网格系统
|
||
```
|
||
容器边距: 40px
|
||
组件间距: 20px
|
||
内容内边距: 20px
|
||
```
|
||
|
||
### 触摸目标
|
||
```
|
||
最小触摸区域: 60x60px
|
||
推荐触摸区域: 80x80px
|
||
按钮高度: 50-80px
|
||
```
|
||
|
||
## 界面布局
|
||
|
||
### 1. 待机界面 (IdleView)
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 无人自动洗宠机 │ 标题 (36pt)
|
||
├─────────────────────────────────────┤
|
||
│ ┌───────────────┬───────────────┐ │
|
||
│ │ 硬件状态 │ 实时数据 │ │ 状态面板
|
||
│ │ ● 水泵系统 │ 水温: 40.0°C │ │
|
||
│ │ ● 加热系统 │ 水位: 85% │ │
|
||
│ │ ● 风干系统 │ 运行: 1250h │ │
|
||
│ │ ● 门锁系统 │ │ │
|
||
│ └───────────────┴───────────────┘ │
|
||
│ │
|
||
│ ┌─────────────┐ │
|
||
│ │ 点击开始 │ │ 大按钮
|
||
│ └─────────────┘ │
|
||
│ │
|
||
├─────────────────────────────────────┤
|
||
│ 系统就绪，请点击开始 │ v1.0.0 │ 状态栏
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 2. 支付界面 (PaymentView)
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 选择套餐 │ 标题
|
||
│ 请扫描二维码完成支付 │ 副标题
|
||
├─────────────────────────────────────┤
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 基础清洗 ¥68 │ │ 套餐卡片
|
||
│ │ 基础清洗服务 │ │
|
||
│ │ 时长: 15 分钟 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 标准套餐 ¥98 │ │
|
||
│ │ 标准清洗+护理 │ │
|
||
│ │ 时长: 20 分钟 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ │
|
||
├─────────────────────────────────────┤
|
||
│ ┌─────────┐ │
|
||
│ │ 返回 │ │ 按钮
|
||
│ └─────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 3. 洗护界面 (WashingView)
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ 洗护进行中 │ 标题
|
||
├─────────────────────────────────────┤
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 当前步骤 │ │
|
||
│ │ 第一次冲水 │ │ 当前步骤
|
||
│ │ 剩余时间: 01:45 │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 总体进度 25% │ │
|
||
│ │ ████████░░░░░░░░░░░░░░░░ │ │ 进度条
|
||
│ └─────────────────────────────┘ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 洗护流程 │ │
|
||
│ │ ● 第一次冲水 [进行中] │ │
|
||
│ │ ○ 沐浴露喷洒 [等待中] │ │ 流程列表
|
||
│ │ ○ 第二次冲水 [等待中] │ │
|
||
│ │ ○ 热风吹毛 [等待中] │ │
|
||
│ └─────────────────────────────┘ │
|
||
├─────────────────────────────────────┤
|
||
│ 水温:40°C 水位:85% 门:锁定│紧急停止│ 状态栏
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
## 动画效果（建议）
|
||
|
||
### 页面切换
|
||
```
|
||
淡入淡出: 300ms
|
||
缓动函数: EaseInOut
|
||
```
|
||
|
||
### 进度条
|
||
```
|
||
平滑过渡: 500ms
|
||
缓动函数: Linear
|
||
```
|
||
|
||
### 按钮交互
|
||
```
|
||
悬停: 200ms
|
||
按下: 100ms
|
||
发光: 300ms
|
||
```
|
||
|
||
### LED闪烁
|
||
```
|
||
周期: 1000ms
|
||
淡入淡出: 500ms
|
||
```
|
||
|
||
## 响应式设计
|
||
|
||
### 屏幕尺寸适配
|
||
```
|
||
7寸屏 (1024x600):
|
||
- 标题: 32pt
|
||
- 按钮: 60px高
|
||
- 间距: 15px
|
||
|
||
10寸屏 (1280x800):
|
||
- 标题: 36pt
|
||
- 按钮: 80px高
|
||
- 间距: 20px
|
||
```
|
||
|
||
### 触摸优化
|
||
```
|
||
所有交互元素 ≥ 60x60px
|
||
按钮间距 ≥ 10px
|
||
支持手套操作
|
||
明确的视觉反馈
|
||
```
|
||
|
||
## 可访问性
|
||
|
||
### 对比度
|
||
```
|
||
文字与背景: 7.5:1 (AAA级)
|
||
交互元素: 4.5:1 (AA级)
|
||
```
|
||
|
||
### 触摸目标
|
||
```
|
||
最小尺寸: 60x60px
|
||
推荐尺寸: 80x80px
|
||
```
|
||
|
||
### 视觉反馈
|
||
```
|
||
悬停: 颜色变化 + 发光增强
|
||
按下: 颜色变暗
|
||
禁用: 灰色 + 无发光
|
||
```
|
||
|
||
## 品牌一致性
|
||
|
||
### Logo位置
|
||
```
|
||
待机界面: 顶部居中
|
||
其他界面: 左上角（可选）
|
||
```
|
||
|
||
### 版本信息
|
||
```
|
||
位置: 底部右侧
|
||
格式: "v1.0.0"
|
||
颜色: 强调色
|
||
```
|
||
|
||
### 状态消息
|
||
```
|
||
位置: 底部左侧
|
||
字体: 正文
|
||
颜色: 次要文字色
|
||
```
|
||
|
||
## 实现清单
|
||
|
||
- [x] 深蓝科技风配色方案
|
||
- [x] 发光效果（按钮、LED、数字）
|
||
- [x] 三个主要界面（待机、支付、洗护）
|
||
- [x] LED指示灯样式
|
||
- [x] 科技感按钮
|
||
- [x] 进度条样式
|
||
- [x] 数字显示样式
|
||
- [x] 面板样式
|
||
- [x] 触摸优化
|
||
- [ ] 页面切换动画
|
||
- [ ] 进度条动画
|
||
- [ ] LED闪烁动画
|
||
- [ ] 声音提示
|
||
- [ ] 参数设置界面
|
||
- [ ] 故障诊断界面
|
||
|
||
## 设计工具
|
||
|
||
推荐使用以下工具进行设计和原型制作：
|
||
- Figma - UI设计
|
||
- Adobe XD - 原型设计
|
||
- Blend for Visual Studio - XAML设计
|
||
- Visual Studio Designer - WPF设计
|
||
|
||
## 参考资料
|
||
|
||
- Material Design Guidelines
|
||
- Microsoft Fluent Design System
|
||
- Industrial HMI Design Best Practices
|
||
- WCAG 2.1 Accessibility Guidelines
|