635 lines
15 KiB
Markdown
635 lines
15 KiB
Markdown
# 四端可执行设计规范
|
|
|
|
## 1. 文档目标
|
|
|
|
本文档将系统的 UI 优化建议进一步拆解为可直接执行的设计规范与实施任务，覆盖以下四个端：
|
|
|
|
- `web-sales` 业务员端
|
|
- `mini-manager` 管理层端
|
|
- `mini-driver` 司机端
|
|
- `web-admin` 管理后台
|
|
|
|
目标是让前端改造不再停留在“风格建议”，而是能够直接按任务推进，逐步完成统一视觉体系与各端差异化体验。
|
|
|
|
---
|
|
|
|
## 2. 设计总原则
|
|
|
|
### 2.1 全系统统一原则
|
|
|
|
四个端必须保持统一的基础设计语言，包括：
|
|
|
|
- 统一的主色与状态色体系
|
|
- 统一的圆角、阴影、边框、间距规范
|
|
- 统一的按钮层级和交互反馈
|
|
- 统一的字体与排版规则
|
|
- 统一的卡片、表格、表单基础样式
|
|
- 统一的图标风格
|
|
|
|
### 2.2 分端差异原则
|
|
|
|
不同端根据使用场景做差异化设计：
|
|
|
|
- `web-sales` 侧重录入效率与订单跟踪
|
|
- `mini-manager` 侧重审批决策与数据判断
|
|
- `mini-driver` 侧重移动任务执行与快速操作
|
|
- `web-admin` 侧重系统管理与结构化配置
|
|
|
|
### 2.3 设计优先级原则
|
|
|
|
优先优化以下内容：
|
|
|
|
1. 页面基础布局
|
|
2. 统一主题色与状态色
|
|
3. 常用组件样式
|
|
4. 列表、表单、详情页模板
|
|
5. 首页与核心业务页面
|
|
6. 辅助页面与异常态页面
|
|
|
|
---
|
|
|
|
## 3. 全局设计规范
|
|
|
|
## 3.1 颜色规范
|
|
|
|
### 主色
|
|
- 主色建议使用蓝色系
|
|
- 用于主按钮、链接、重点标签、主导航高亮
|
|
|
|
### 辅助色
|
|
- 青绿色：用于成功、完成、通过类状态
|
|
- 橙色：用于待处理、提醒、预警类状态
|
|
- 红色：用于取消、失败、异常、危险操作
|
|
- 灰色：用于禁用、次要信息、已结束状态
|
|
|
|
### 状态色建议
|
|
- `待审核 / 待处理`：橙色
|
|
- `进行中`：蓝色
|
|
- `已通过 / 已完成`：绿色
|
|
- `已取消 / 已退回 / 异常`：红色
|
|
- `已归档 / 已关闭`：灰色
|
|
|
|
## 3.2 字体规范
|
|
|
|
- 正文使用现代无衬线字体
|
|
- 标题字重略高，增强层级感
|
|
- 数字类内容适当增大字号，用于金额、利润、状态统计等
|
|
- 长文本区域控制行高，保证可读性
|
|
|
|
## 3.3 间距与圆角
|
|
|
|
- 页面整体采用统一栅格间距
|
|
- 卡片、按钮、输入框保持一致圆角
|
|
- 重要信息区块之间保持明确分隔
|
|
- 视觉上要留白充足，但不能空洞
|
|
|
|
## 3.4 阴影与边框
|
|
|
|
- 阴影只用于提升层次，不做重装饰
|
|
- 边框采用浅灰色，避免视觉压迫
|
|
- 高亮状态可通过边框色与背景色共同表达
|
|
|
|
## 3.5 图标与标签
|
|
|
|
- 图标统一采用线性风格
|
|
- 标签颜色必须和业务状态保持一致
|
|
- 所有状态标签需有固定含义，避免同色多义
|
|
|
|
---
|
|
|
|
## 4. 统一组件规范
|
|
|
|
### 4.1 按钮
|
|
|
|
按钮分为以下层级：
|
|
|
|
- **主按钮**：用于提交、保存、确认、通过
|
|
- **次按钮**：用于返回、取消、关闭
|
|
- **危险按钮**：用于删除、驳回、取消订单
|
|
- **文字按钮**：用于查看详情、复制文本、更多操作
|
|
|
|
执行要求：
|
|
|
|
- 主按钮全系统统一颜色
|
|
- 危险按钮全系统统一红色系
|
|
- 同一页面按钮层级不超过 3 种
|
|
- 重要操作必须有二次确认
|
|
|
|
### 4.2 卡片
|
|
|
|
卡片用于承载：
|
|
|
|
- 订单概览
|
|
- 任务信息
|
|
- 审批信息
|
|
- 统计指标
|
|
- 提醒信息
|
|
|
|
执行要求：
|
|
|
|
- 卡片顶部标题清晰
|
|
- 卡片内容按重要程度分层
|
|
- 卡片之间保持统一间距
|
|
- 高优先级信息放在卡片首屏
|
|
|
|
### 4.3 表格
|
|
|
|
表格适用于：
|
|
|
|
- 订单列表
|
|
- 客户列表
|
|
- 产品列表
|
|
- 工厂列表
|
|
- 用户列表
|
|
- 报表列表
|
|
|
|
执行要求：
|
|
|
|
- 表头固定风格
|
|
- 行高统一
|
|
- 状态列必须使用标签
|
|
- 操作列尽量精简
|
|
- 复杂字段支持悬浮查看或展开查看
|
|
|
|
### 4.4 表单
|
|
|
|
表单适用于：
|
|
|
|
- 订单录入
|
|
- 客户编辑
|
|
- 产品维护
|
|
- 配置维护
|
|
- 审批意见填写
|
|
|
|
执行要求：
|
|
|
|
- 表单必须分组
|
|
- 高频字段放在前面
|
|
- 长表单建议分区或分步骤
|
|
- 必填项统一标记
|
|
- 错误提示统一样式
|
|
|
|
### 4.5 状态标签
|
|
|
|
所有状态类字段统一使用标签化展示：
|
|
|
|
- `待审核`
|
|
- `已通过`
|
|
- `已退回`
|
|
- `待下发工厂`
|
|
- `待司机接单`
|
|
- `已接单`
|
|
- `已揽货`
|
|
- `已送达`
|
|
- `已取消`
|
|
- `生产中`
|
|
- `已发货`
|
|
- `已完成`
|
|
- `已结算`
|
|
|
|
执行要求：
|
|
|
|
- 标签颜色必须固定
|
|
- 同一状态在全系统中颜色一致
|
|
- 标签文字不要出现同义混用
|
|
|
|
---
|
|
|
|
## 5. `web-sales` 业务员端可执行设计规范
|
|
|
|
## 5.1 端定位
|
|
|
|
该端是高频录单与跟踪端，重点是效率、清晰、快速操作。
|
|
|
|
## 5.2 视觉风格
|
|
|
|
建议采用：
|
|
|
|
- 浅色极简风
|
|
- 白底 + 浅灰底为主
|
|
- 蓝色作为主操作色
|
|
- 提醒和异常使用橙红色强调
|
|
- 页面减少复杂装饰，突出业务动作
|
|
|
|
## 5.3 页面改造任务
|
|
|
|
### 任务 1 登录页统一改造
|
|
|
|
**目标：** 提升可信度与专业感。
|
|
|
|
**执行项：**
|
|
- 使用简洁企业登录卡片
|
|
- 优化标题、说明文案和按钮层级
|
|
- 减少背景干扰元素
|
|
- 增强登录态视觉反馈
|
|
|
|
### 任务 2 订单列表页改造
|
|
|
|
**目标：** 提升查单效率。
|
|
|
|
**执行项：**
|
|
- 顶部增加筛选区层级
|
|
- 订单状态使用统一标签
|
|
- 订单金额、客户、时间、状态形成清晰信息层级
|
|
- 操作区精简为“查看 / 编辑 / 取消 / 提醒”
|
|
- 提升空状态、加载状态、无结果状态体验
|
|
|
|
### 任务 3 新建订单页改造
|
|
|
|
**目标：** 降低录单认知成本。
|
|
|
|
**执行项：**
|
|
- 将页面拆成客户信息、订单信息、物流信息、回扣信息四个区块
|
|
- 常用字段前置
|
|
- 底部固定提交区
|
|
- 自动填充与联想输入视觉更明显
|
|
- 强化必填项提示与校验结果
|
|
|
|
### 任务 4 订单详情页改造
|
|
|
|
**目标：** 提升查看与追踪体验。
|
|
|
|
**执行项：**
|
|
- 顶部展示订单状态与核心摘要
|
|
- 中部展示订单明细与物流信息
|
|
- 底部展示操作按钮
|
|
- 审批记录、物流节点、提醒记录分区展示
|
|
|
|
### 任务 5 提醒中心改造
|
|
|
|
**目标：** 提醒更清楚、更可执行。
|
|
|
|
**执行项：**
|
|
- 按提醒类型分类展示
|
|
- 每条提醒增加下一步动作
|
|
- 使用橙色/红色强调超时和异常
|
|
- 已处理提醒与未处理提醒视觉区分明显
|
|
|
|
## 5.4 业务员端任务清单
|
|
|
|
- [x] 统一登录页风格
|
|
- [x] 统一订单列表页卡片/表格样式
|
|
- [x] 拆分新建订单页为分区表单
|
|
- [x] 统一订单状态标签样式
|
|
- [x] 优化提醒中心阅读与处理体验
|
|
- [x] 统一按钮与表单基础样式
|
|
- [x] 补齐空状态、加载状态、错误状态
|
|
- [x] 适配手机端页面密度与首屏可达性
|
|
|
|
## 5.5 业务员端进度更新
|
|
|
|
- [x] 登录页统一改造：已完成，企业登录卡片与移动端密度优化已落地
|
|
- [x] 订单列表页统一改造：已完成，筛选区、标签样式与移动端卡片化已落地
|
|
- [x] 新建订单页分区表单：已完成，四个信息分区与手机端压缩布局已落地
|
|
- [x] 订单详情页信息分区：已完成，摘要、明细、审批记录与手机端压缩已落地
|
|
- [x] 提醒中心阅读体验优化：已完成，分类展示与手机端压缩已落地
|
|
- [x] 基础按钮/表单/状态标签统一：已完成基础统一
|
|
- [x] 空状态 / 加载态 / 错误态补齐：已完成基础补齐
|
|
- [x] 手机端整体 UI 密度优化：已完成，统一收紧字号、间距与组件高度
|
|
|
|
---
|
|
|
|
## 6. `mini-manager` 管理层端可执行设计规范
|
|
|
|
## 6.1 端定位
|
|
|
|
该端面向审批、利润判断、取消审批和数据查看，必须体现决策感与稳重感。
|
|
|
|
## 6.2 视觉风格
|
|
|
|
建议采用：
|
|
|
|
- 轻商务审批中台风
|
|
- 更突出数据和结果
|
|
- 利润、利润率、审批结论要醒目
|
|
- 风险提示采用高对比颜色
|
|
- 页面布局更稳重，减少花哨装饰
|
|
|
|
## 6.3 页面改造任务
|
|
|
|
### 任务 1 首页看板改造
|
|
|
|
**目标：** 让管理层快速掌握关键经营信息。
|
|
|
|
**执行项：**
|
|
- 增加待审批、异常、利润、提醒等核心指标卡
|
|
- 指标卡统一数字样式
|
|
- 图表区域保持简洁商务风
|
|
- 重要数据优先显示
|
|
|
|
### 任务 2 审批列表页改造
|
|
|
|
**目标：** 提升快速判断效率。
|
|
|
|
**执行项：**
|
|
- 重点显示客户、金额、利润、状态
|
|
- 审批列表按风险和待办优先排序
|
|
- 高风险订单增加明显标识
|
|
- 列表操作压缩到最少
|
|
|
|
### 任务 3 审批详情页改造
|
|
|
|
**目标：** 让审批链路更清晰。
|
|
|
|
**执行项：**
|
|
- 顶部固定订单概览
|
|
- 中部展示利润计算过程、订单明细、物流信息
|
|
- 底部固定审批操作区
|
|
- 通过、退回、取消确认的视觉权重要分明
|
|
|
|
### 任务 4 AI 识别页改造
|
|
|
|
**目标：** 让识别结果更容易人工确认。
|
|
|
|
**执行项：**
|
|
- 左右或上下分栏展示图片与识别结果
|
|
- 原始识别结果与人工修正结果并列
|
|
- 置信度使用颜色和数值共同展示
|
|
- 识别不清晰时给出明显提示
|
|
|
|
### 任务 5 取消审批页改造
|
|
|
|
**目标：** 让取消流程更明确。
|
|
|
|
**执行项：**
|
|
- 取消原因与审批意见分区展示
|
|
- 高风险取消给出提醒
|
|
- 审批结果按钮样式与一般审批区分
|
|
|
|
## 6.4 管理层端任务清单
|
|
|
|
- [ ] 统一首页指标卡样式
|
|
- [ ] 统一审批列表的风险标记
|
|
- [ ] 统一审批详情页利润展示方式
|
|
- [ ] 增强审批按钮层级感
|
|
- [ ] 改造 AI 识别结果展示区
|
|
- [ ] 优化取消审批流程页面
|
|
- [ ] 补齐图表、空状态、异常状态样式
|
|
|
|
## 6.5 管理层端进度更新
|
|
|
|
- [ ] 首页看板改造：待开始
|
|
- [ ] 审批列表页改造：待开始
|
|
- [ ] 审批详情页改造：待开始
|
|
- [ ] AI 识别页改造：待开始
|
|
- [ ] 取消审批页改造：待开始
|
|
- [ ] 图表/空状态/异常状态样式统一：待开始
|
|
|
|
---
|
|
|
|
## 7. `mini-driver` 司机端可执行设计规范
|
|
|
|
## 7.1 端定位
|
|
|
|
该端面向移动任务执行，必须强调快速、易用、少干扰。
|
|
|
|
## 7.2 视觉风格
|
|
|
|
建议采用：
|
|
|
|
- 移动任务流风
|
|
- 单列卡片布局
|
|
- 大按钮、大字号、少文字
|
|
- 状态颜色强烈直观
|
|
- 适合户外、弱网络、单手操作
|
|
|
|
## 7.3 页面改造任务
|
|
|
|
### 任务 1 登录页改造
|
|
|
|
**目标：** 降低登录门槛。
|
|
|
|
**执行项：**
|
|
- 输入项精简
|
|
- 按钮放大
|
|
- 视觉更轻
|
|
- 登录错误提示更直接
|
|
|
|
### 任务 2 任务列表页改造
|
|
|
|
**目标：** 让司机一眼找到可执行任务。
|
|
|
|
**执行项：**
|
|
- 每个任务使用独立卡片
|
|
- 状态、地址、数量、工厂信息优先展示
|
|
- 可执行动作在卡片内明显呈现
|
|
- 支持快速筛选或状态切换
|
|
|
|
### 任务 3 任务详情页改造
|
|
|
|
**目标：** 让任务信息更完整但不过载。
|
|
|
|
**执行项：**
|
|
- 顶部显示任务状态
|
|
- 中部展示取货地址、送达地址、内容、数量
|
|
- 底部固定操作按钮
|
|
- 关键动作如“接单 / 揽货 / 送达”采用大按钮
|
|
|
|
### 任务 4 揽货上传页改造
|
|
|
|
**目标：** 让拍照上传更顺手。
|
|
|
|
**执行项：**
|
|
- 上传区域加大
|
|
- 默认支持拍照优先
|
|
- 上传后即时预览
|
|
- 提交按钮固定底部
|
|
- 提交前状态确认更清楚
|
|
|
|
### 任务 5 送达确认页改造
|
|
|
|
**目标：** 让送达确认操作更明确。
|
|
|
|
**执行项：**
|
|
- 展示送达目标与关键备注
|
|
- 一键确认按钮突出
|
|
- 操作成功反馈明确
|
|
|
|
## 7.4 司机端任务清单
|
|
|
|
- [ ] 统一登录页移动端样式
|
|
- [ ] 统一任务卡片信息层级
|
|
- [ ] 放大核心操作按钮
|
|
- [ ] 优化任务详情页布局
|
|
- [ ] 改造拍照上传交互
|
|
- [ ] 优化送达确认反馈
|
|
- [ ] 统一移动端状态标签
|
|
|
|
## 7.5 司机端进度更新
|
|
|
|
- [ ] 登录页移动端样式：待开始
|
|
- [ ] 任务列表页改造：待开始
|
|
- [ ] 任务详情页改造：待开始
|
|
- [ ] 揽货上传页改造：待开始
|
|
- [ ] 送达确认页改造：待开始
|
|
- [ ] 状态标签与大按钮统一：待开始
|
|
|
|
---
|
|
|
|
## 8. `web-admin` 管理后台可执行设计规范
|
|
|
|
## 8.1 端定位
|
|
|
|
该端面向系统维护、基础资料管理、权限配置和报表查看，必须标准化、结构化、可扩展。
|
|
|
|
## 8.2 视觉风格
|
|
|
|
建议采用：
|
|
|
|
- 标准企业管理后台风
|
|
- 左侧导航清晰
|
|
- 主内容区白底卡片化
|
|
- 表格、表单、弹窗统一
|
|
- 整体更偏“系统工具感”而不是“营销感”
|
|
|
|
## 8.3 页面改造任务
|
|
|
|
### 任务 1 后台首页改造
|
|
|
|
**目标：** 让管理员快速进入核心管理动作。
|
|
|
|
**执行项：**
|
|
- 增加系统概览卡片
|
|
- 提供快捷入口
|
|
- 展示基础统计数据和待处理事项
|
|
- 视觉层级清晰
|
|
|
|
### 任务 2 列表页模板统一
|
|
|
|
**目标：** 保证所有管理模块风格一致。
|
|
|
|
**执行项：**
|
|
- 筛选区统一样式
|
|
- 表格统一表头、行高、操作列宽度
|
|
- 分页统一样式
|
|
- 空状态统一样式
|
|
|
|
### 任务 3 编辑页模板统一
|
|
|
|
**目标：** 降低维护成本。
|
|
|
|
**执行项：**
|
|
- 表单按基础信息、业务信息、状态信息分区
|
|
- 使用统一表单布局规则
|
|
- 长表单支持分组或折叠面板
|
|
- 提交区样式统一
|
|
|
|
### 任务 4 报表页改造
|
|
|
|
**目标：** 强化数据读取效率。
|
|
|
|
**执行项：**
|
|
- 指标卡、图表、筛选区分层清晰
|
|
- 导出按钮位置固定
|
|
- 时间维度切换统一
|
|
- 图表风格简洁、强调趋势
|
|
|
|
### 任务 5 系统配置页改造
|
|
|
|
**目标：** 提升配置管理体验。
|
|
|
|
**执行项：**
|
|
- 配置项分组展示
|
|
- 输入框、开关、下拉框风格统一
|
|
- 高风险配置项增加提示说明
|
|
- 保存成功反馈明显
|
|
|
|
## 8.4 管理后台任务清单
|
|
|
|
- [ ] 统一后台首页结构
|
|
- [ ] 统一所有列表页模板
|
|
- [ ] 统一所有编辑页模板
|
|
- [ ] 统一报表页视觉样式
|
|
- [ ] 统一配置页组件风格
|
|
- [ ] 优化系统管理模块的空状态与错误态
|
|
- [ ] 统一后台表格、表单、弹窗组件
|
|
|
|
## 8.5 管理后台进度更新
|
|
|
|
- [x] 后台首页结构统一：已完成基础壳与概览布局
|
|
- [x] 列表页模板统一：已覆盖审批、报表、系统管理等核心列表
|
|
- [x] 编辑页模板统一：已覆盖系统管理、基础资料等核心编辑页
|
|
- [x] 报表页视觉样式统一：已完成基础报表卡片与表格风格
|
|
- [x] 配置页组件风格统一：已完成系统管理页风格统一
|
|
- [x] 空状态与错误态优化：已补齐多数核心页面
|
|
- [x] 表格、表单、弹窗组件统一：已完成基础样式统一
|
|
|
|
---
|
|
|
|
## 9. 分阶段实施计划
|
|
|
|
## 9.1 第一阶段：建立统一基础规范
|
|
|
|
先完成全系统基础视觉规范，包括：
|
|
|
|
- 主色与状态色
|
|
- 按钮规范
|
|
- 卡片规范
|
|
- 表格规范
|
|
- 表单规范
|
|
- 标签规范
|
|
|
|
## 9.2 第二阶段：优先改造 PC 端
|
|
|
|
优先处理：
|
|
|
|
- `web-admin`
|
|
- `web-sales`
|
|
|
|
原因：
|
|
|
|
- 更容易形成统一视觉
|
|
- 对业务效率提升明显
|
|
- 便于快速建立系统品牌感
|
|
|
|
## 9.3 第三阶段：改造管理层端
|
|
|
|
重点提升审批与决策体验：
|
|
|
|
- 首页看板
|
|
- 审批列表
|
|
- 审批详情
|
|
- AI 识别页
|
|
|
|
## 9.4 第四阶段：改造司机端
|
|
|
|
重点提升移动端任务执行体验：
|
|
|
|
- 任务列表
|
|
- 任务详情
|
|
- 拍照上传
|
|
- 送达确认
|
|
|
|
---
|
|
|
|
## 10. 验收标准
|
|
|
|
以下内容可作为 UI 改造后的验收依据：
|
|
|
|
- 四个端在视觉上统一但不混乱
|
|
- 状态标签在全系统中颜色一致
|
|
- 主要页面布局清晰、可读性强
|
|
- 表单录入效率提升
|
|
- 列表信息更容易扫描
|
|
- 审批、提醒、任务流转更直观
|
|
- 移动端操作更适合单手使用
|
|
- 管理后台更标准、更易维护
|
|
|
|
---
|
|
|
|
## 11. 最终建议
|
|
|
|
建议按照“**先统一规范，再分端落地**”的方式推进，不要直接零散改页面。这样可以保证：
|
|
|
|
- 风格统一
|
|
- 改造可控
|
|
- 后续页面扩展更容易
|
|
- 多端体验一致且有差异化
|
|
|
|
如果后续需要继续推进，可以进一步拆成：
|
|
|
|
- 组件级设计规范
|
|
- 页面级设计稿任务清单
|
|
- 前端实现改造任务清单
|
|
- 每个页面的重构优先级列表
|