# 无人自动洗宠机 - 视觉设计规范 ## 设计理念 本界面采用**深蓝科技风**设计，融合现代工业美学与高可用性，确保在各种光线条件下清晰可读，同时传达专业和可靠的品牌形象。 ## 色彩系统 ### 主色调 ``` 背景色 (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 ``` ### 阴影效果 (Shadow) ```xaml ``` ### 圆角 (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