10 KiB
10 KiB
无人自动洗宠机 - 视觉设计规范
设计理念
本界面采用深蓝科技风设计，融合现代工业美学与高可用性，确保在各种光线条件下清晰可读，同时传达专业和可靠的品牌形象。
色彩系统
主色调
背景色 (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)
<!-- 青蓝色发光 -->
<DropShadowEffect Color="#00D4FF"
BlurRadius="10"
ShadowDepth="0"
Opacity="0.8"/>
<!-- 绿色发光（LED指示灯）-->
<DropShadowEffect Color="#00FF88"
BlurRadius="8"
ShadowDepth="0"
Opacity="0.8"/>
阴影效果 (Shadow)
<!-- 面板阴影 -->
<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"
颜色: 强调色
状态消息
位置: 底部左侧
字体: 正文
颜色: 次要文字色
实现清单
- 深蓝科技风配色方案
- 发光效果（按钮、LED、数字）
- 三个主要界面（待机、支付、洗护）
- LED指示灯样式
- 科技感按钮
- 进度条样式
- 数字显示样式
- 面板样式
- 触摸优化
- 页面切换动画
- 进度条动画
- 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