85 lines
3.3 KiB
Markdown
85 lines
3.3 KiB
Markdown
|
# IT智能服务台 — 现有前端视觉评价
|
|||
|
|
|
|||
|
|
> **版本**: v1.0
|
|||
|
|
> **日期**: 2026-07-10
|
|||
|
|
> **作者**: 宋献
|
|||
|
|
> **类型**: 技术 - 前端改造
|
|||
|
|
> **源自**: 方案-前端评价与推广-v1.0.md
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 一、整体品牌一致性：60/100
|
|||
|
|
|
|||
|
|
| 维度 | 现状 | 问题 |
|
|||
|
|
|------|------|------|
|
|||
|
|
| 色彩体系 | H5 端用「企微绿 + 浅灰」；坐席端用「绿 + 白」；管理后台用「深色卡片 + 高饱和点缀」 | 三端像三套系统，没有统一的品牌记忆点 |
|
|||
|
|
| 字体层级 | 标题/正文/辅助文字差异不够大，靠颜色而不是字号/字重区分 | 信息密度高时容易"糊成一团" |
|
|||
|
|
| 圆角与按钮 | 基本使用 Element Plus / Vant 4 默认圆角，没有定制 | 品牌感弱，像"通用后台" |
|
|||
|
|
| 图标语言 | 混用 emoji、线框图标、填充图标 | 视觉语言不统一 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 二、分端评价
|
|||
|
|
|
|||
|
|
### 2.1 H5 员工端（浅色）
|
|||
|
|
|
|||
|
|
**优点：**
|
|||
|
|
- 入口清晰：呼叫、主题切换、帮助都在顶部
|
|||
|
|
- 右侧辅助信息丰富：处理指南、申请流程、常用资源
|
|||
|
|
- 底部输入区功能完整：表情、附件、语音、发送
|
|||
|
|
|
|||
|
|
**问题：**
|
|||
|
|
- 右侧边栏占据约 40% 宽度，导致主聊天区显得拥挤
|
|||
|
|
- "正在获取身份信息…" 这种空白状态太赤裸，像系统卡住了
|
|||
|
|
- 输入框 placeholder 文案重复：底部同时出现"请输入消息…"和"请描述你遇到的问题，AI 助手会帮你分析"
|
|||
|
|
- 头像/状态图标偏小，点击目标不够大
|
|||
|
|
- 趣味问答模块在当前场景下与主任务无关，容易干扰
|
|||
|
|
|
|||
|
|
**建议总分：62/100**
|
|||
|
|
|
|||
|
|
### 2.2 坐席端工作台
|
|||
|
|
|
|||
|
|
**优点：**
|
|||
|
|
- 三栏结构符合工单类产品直觉
|
|||
|
|
- 顶部快捷操作（置顶、待办、转接、结束）便于一线操作
|
|||
|
|
- 右侧 AI 推荐提供了坐席需要的辅助能力
|
|||
|
|
|
|||
|
|
**问题：**
|
|||
|
|
- 信息密度过高，三栏都塞满内容，坐席视觉压力大
|
|||
|
|
- 右侧三个面板（生成回复、知识库、排查流程）各占一列，但每个面板内容很少，空间利用率低
|
|||
|
|
- 聊天区绿色气泡与 AI 回答的绿底色混在一起，没有区分"用户/AI/坐席"三种消息来源
|
|||
|
|
- 标签、按钮、状态徽标太多，没有视觉降噪
|
|||
|
|
- 左侧会话列表中，用户头像、星级、消息预览、未读数、标签挤在一起
|
|||
|
|
|
|||
|
|
**建议总分：58/100**
|
|||
|
|
|
|||
|
|
### 2.3 管理后台（深色）
|
|||
|
|
|
|||
|
|
**优点：**
|
|||
|
|
- 深色主题适合长时间监控场景
|
|||
|
|
- 运营总览数据卡片清晰，核心指标突出
|
|||
|
|
- 系统健康状态一目了然
|
|||
|
|
|
|||
|
|
**问题：**
|
|||
|
|
- 深色模式对比度需要校验（部分文字可能低于 WCAG 4.5:1）
|
|||
|
|
- 卡片边框/阴影弱，层次靠颜色区分，夜间长时间观看易疲劳
|
|||
|
|
- 导航图标与文字对齐有轻微偏差（如"会话监控""坐席绩效"）
|
|||
|
|
- 顶部报错提示"提示的资源不存在"破坏整体专业感（需后端配合修复）
|
|||
|
|
|
|||
|
|
**建议总分：70/100**
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 三、核心设计问题总结
|
|||
|
|
|
|||
|
|
1. **三端风格割裂**：H5、坐席、后台像三个团队做的
|
|||
|
|
2. **信息密度失控**：坐席端尤其严重，一次看 5 个以上信息源
|
|||
|
|
3. **品牌感弱**：除绿色外，没有独特的视觉符号
|
|||
|
|
4. **空状态/负面状态处理差**："正在获取身份信息…"这类状态没有引导感
|
|||
|
|
5. **深色模式未深度定制**：H5 深色只是反色，绿色气泡在深色上可能刺眼
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
> **关联文档**：
|
|||
|
|
> - 前端改造建议: `02-技术文档/前端改造/前端改造建议-v1.0.md`
|