15 KiB
15 KiB
四端可执行设计规范
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 设计优先级原则
优先优化以下内容：
- 页面基础布局
- 统一主题色与状态色
- 常用组件样式
- 列表、表单、详情页模板
- 首页与核心业务页面
- 辅助页面与异常态页面
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 业务员端任务清单
- 统一登录页风格
- 统一订单列表页卡片/表格样式
- 拆分新建订单页为分区表单
- 统一订单状态标签样式
- 优化提醒中心阅读与处理体验
- 统一按钮与表单基础样式
- 补齐空状态、加载状态、错误状态
- 适配手机端页面密度与首屏可达性
5.5 业务员端进度更新
- 登录页统一改造：已完成，企业登录卡片与移动端密度优化已落地
- 订单列表页统一改造：已完成，筛选区、标签样式与移动端卡片化已落地
- 新建订单页分区表单：已完成，四个信息分区与手机端压缩布局已落地
- 订单详情页信息分区：已完成，摘要、明细、审批记录与手机端压缩已落地
- 提醒中心阅读体验优化：已完成，分类展示与手机端压缩已落地
- 基础按钮/表单/状态标签统一：已完成基础统一
- 空状态 / 加载态 / 错误态补齐：已完成基础补齐
- 手机端整体 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 管理后台进度更新
- 后台首页结构统一：已完成基础壳与概览布局
- 列表页模板统一：已覆盖审批、报表、系统管理等核心列表
- 编辑页模板统一：已覆盖系统管理、基础资料等核心编辑页
- 报表页视觉样式统一：已完成基础报表卡片与表格风格
- 配置页组件风格统一：已完成系统管理页风格统一
- 空状态与错误态优化：已补齐多数核心页面
- 表格、表单、弹窗组件统一：已完成基础样式统一
9. 分阶段实施计划
9.1 第一阶段：建立统一基础规范
先完成全系统基础视觉规范，包括：
- 主色与状态色
- 按钮规范
- 卡片规范
- 表格规范
- 表单规范
- 标签规范
9.2 第二阶段：优先改造 PC 端
优先处理：
web-adminweb-sales
原因：
- 更容易形成统一视觉
- 对业务效率提升明显
- 便于快速建立系统品牌感
9.3 第三阶段：改造管理层端
重点提升审批与决策体验：
- 首页看板
- 审批列表
- 审批详情
- AI 识别页
9.4 第四阶段：改造司机端
重点提升移动端任务执行体验：
- 任务列表
- 任务详情
- 拍照上传
- 送达确认
10. 验收标准
以下内容可作为 UI 改造后的验收依据：
- 四个端在视觉上统一但不混乱
- 状态标签在全系统中颜色一致
- 主要页面布局清晰、可读性强
- 表单录入效率提升
- 列表信息更容易扫描
- 审批、提醒、任务流转更直观
- 移动端操作更适合单手使用
- 管理后台更标准、更易维护
11. 最终建议
建议按照“先统一规范，再分端落地”的方式推进，不要直接零散改页面。这样可以保证：
- 风格统一
- 改造可控
- 后续页面扩展更容易
- 多端体验一致且有差异化
如果后续需要继续推进，可以进一步拆成：
- 组件级设计规范
- 页面级设计稿任务清单
- 前端实现改造任务清单
- 每个页面的重构优先级列表