3.7 KiB
3.7 KiB
危化品车辆管理应用 - 设计风格指南
设计理念
核心设计原则
专业可靠：体现工业级安全管理的专业性，建立用户信任感 清晰高效：信息层次清晰，操作流程简洁，适合移动端快速操作 安全警示：通过颜色和视觉元素强调安全重要性，突出关键信息 现代简洁：采用现代化设计语言，避免过度装饰，专注功能性
色彩系统
主色调：深海蓝 (#1e3a8a) - 体现专业性和信任感 辅助色：
- 安全绿 (#10b981) - 正常状态、成功操作
- 警告橙 (#f59e0b) - 注意事项、中等风险
- 危险红 (#ef4444) - 报警状态、高风险
- 中性灰 (#6b7280) - 辅助信息、禁用状态
背景色系：
- 主背景：浅灰白 (#f9fafb)
- 卡片背景：纯白 (#ffffff)
- 分割线：浅灰 (#e5e7eb)
字体系统
标题字体：Noto Sans SC Bold - 用于页面标题和重要信息 正文字体：Noto Sans SC Regular - 用于一般内容和描述文字 数字字体：等宽字体用于数据显示，确保对齐和易读性
字体大小规范：
- 大标题：24px (1.5rem)
- 中标题：18px (1.125rem)
- 正文：14px (0.875rem)
- 小字：12px (0.75rem)
视觉语言
图标风格：线性图标，2px描边，圆角处理，保持简洁现代感 卡片设计：轻微圆角 (8px)，微妙阴影，突出层次感 按钮设计：圆角按钮，明确的视觉反馈，适合触摸操作 状态指示：使用颜色、图标和文字组合，确保信息传达清晰
视觉效果
动画效果库选择
Anime.js：用于页面切换和元素动画
- 卡片进入动画：淡入 + 上移效果
- 状态切换动画：颜色渐变和尺寸变化
- 加载动画：脉冲效果和进度指示
ECharts.js：用于数据可视化
- 车辆状态分布饼图
- 报警趋势折线图
- 实时数据仪表盘
背景效果
主背景：纯色背景配合微妙的几何图案
- 使用CSS生成的点阵网格作为装饰背景
- 保持低对比度，不影响内容可读性
卡片效果：
- 轻微阴影：box-shadow: 0 1px 3px rgba(0,0,0,0.1)
- 悬浮状态：轻微上浮效果（仅桌面端）
交互反馈
触摸反馈：
- 按钮按下时轻微缩放效果 (scale: 0.95)
- 列表项点击时背景色变化
- 开关组件的平滑过渡动画
状态动画：
- 实时数据更新时的脉冲效果
- 报警状态的闪烁提醒
- 加载状态的旋转动画
图标和图形元素
功能图标：
- 车辆监控：卡车图标
- 报警管理：警告三角形图标
- 轨迹回放：路径箭头图标
- 系统设置：齿轮图标
状态图标：
- 在线状态：绿色圆点
- 离线状态：灰色圆点
- 报警状态：红色感叹号
- 警告状态：黄色三角形
布局设计原则
信息层次：
- 重要信息使用大字体和醒目颜色
- 次要信息使用小字体和中性色
- 相关信息分组展示，使用卡片容器
空间利用：
- 移动端优先，确保内容在小屏幕上清晰可读
- 合理的留白，避免信息过于密集
- 关键操作按钮放置在拇指易触及区域
响应式设计：
- 适配不同屏幕尺寸
- 横竖屏切换时的布局调整
- 考虑刘海屏和导航栏的适配
特殊视觉元素
报警通知：
- 顶部横幅通知，使用渐变背景
- 紧急报警使用全屏遮罩和震动效果
- 声音提醒配合视觉闪烁
数据展示：
- 使用进度条和仪表盘展示关键指标
- 数字数据使用等宽字体，便于对比
- 趋势图使用品牌色彩，突出变化
加载状态：
- 骨架屏替代传统loading动画
- 分页加载时的无限滚动效果
- 数据为空时的友好提示插图