117 lines
3.7 KiB
Markdown
117 lines
3.7 KiB
Markdown
# 危化品车辆管理应用 - 设计风格指南
|
||
|
||
## 设计理念
|
||
|
||
### 核心设计原则
|
||
**专业可靠**：体现工业级安全管理的专业性，建立用户信任感
|
||
**清晰高效**：信息层次清晰，操作流程简洁，适合移动端快速操作
|
||
**安全警示**：通过颜色和视觉元素强调安全重要性，突出关键信息
|
||
**现代简洁**：采用现代化设计语言，避免过度装饰，专注功能性
|
||
|
||
### 色彩系统
|
||
**主色调**：深海蓝 (#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动画
|
||
- 分页加载时的无限滚动效果
|
||
- 数据为空时的友好提示插图 |