# IT智能服务台：前端视觉评价、改造建议与推广方案

> 基于四张现有截图（H5员工端浅色/深色、坐席端工作台、管理后台运营总览）及两份PRD分析。
> Slogan 核心：在知识图谱上，最多经过 7 次选择，找到答案或真相。

---

## 一、现有前端视觉评价

### 1.1 整体品牌一致性：60/100

| 维度 | 现状 | 问题 |
|------|------|------|
| 色彩体系 | H5 端用「企微绿 + 浅灰」；坐席端用「绿 + 白」；管理后台用「深色卡片 + 高饱和点缀」 | 三端像三套系统，没有统一的品牌记忆点 |
| 字体层级 | 标题/正文/辅助文字差异不够大，靠颜色而不是字号/字重区分 | 信息密度高时容易"糊成一团" |
| 圆角与按钮 | 基本使用 Element Plus / Vant 4 默认圆角，没有定制 | 品牌感弱，像"通用后台" |
| 图标语言 | 混用 emoji、线框图标、填充图标 | 视觉语言不统一 |

### 1.2 分端评价

#### H5 员工端（浅色）

**优点：**
- 入口清晰：呼叫、主题切换、帮助都在顶部
- 右侧辅助信息丰富：处理指南、申请流程、常用资源
- 底部输入区功能完整：表情、附件、语音、发送

**问题：**
- 右侧边栏占据约 40% 宽度，导致主聊天区显得拥挤
- "正在获取身份信息…" 这种空白状态太赤裸，像系统卡住了
- 输入框 placeholder 文案重复：底部同时出现"请输入消息…"和"请描述你遇到的问题，AI 助手会帮你分析"
- 头像/状态图标偏小，点击目标不够大
- 趣味问答模块在当前场景下与主任务无关，容易干扰

**建议总分：62/100**

#### 坐席端工作台

**优点：**
- 三栏结构符合工单类产品直觉
- 顶部快捷操作（置顶、待办、转接、结束）便于一线操作
- 右侧 AI 推荐提供了坐席需要的辅助能力

**问题：**
- 信息密度过高，三栏都塞满内容，坐席视觉压力大
- 右侧三个面板（生成回复、知识库、排查流程）各占一列，但每个面板内容很少，空间利用率低
- 聊天区绿色气泡与 AI 回答的绿底色混在一起，没有区分"用户/AI/坐席"三种消息来源
- 标签、按钮、状态徽标太多，没有视觉降噪
- 左侧会话列表中，用户头像、星级、消息预览、未读数、标签挤在一起

**建议总分：58/100**

#### 管理后台（深色）

**优点：**
- 深色主题适合长时间监控场景
- 运营总览数据卡片清晰，核心指标突出
- 系统健康状态一目了然

**问题：**
- 深色模式对比度需要校验（部分文字可能低于 WCAG 4.5:1）
- 卡片边框/阴影弱，层次靠颜色区分，夜间长时间观看易疲劳
- 导航图标与文字对齐有轻微偏差（如"会话监控""坐席绩效"）
- 顶部报错提示"提示的资源不存在"破坏整体专业感（需后端配合修复）

**建议总分：70/100**

### 1.3 核心设计问题总结

1. **三端风格割裂**：H5、坐席、后台像三个团队做的
2. **信息密度失控**：坐席端尤其严重，一次看 5 个以上信息源
3. **品牌感弱**：除绿色外，没有独特的视觉符号
4. **空状态/负面状态处理差**："正在获取身份信息…"这类状态没有引导感
5. **深色模式未深度定制**：H5 深色只是反色，绿色气泡在深色上可能刺眼

---

## 二、前端改造建议

### 2.1 设计系统统一（最优先）

建议制定一套《IT智能服务台设计系统 v1.0》，三端统一使用：

| 元素 | 当前 | 建议 |
|------|------|------|
| 主色 | 企微绿 #07C160 | 保留，但增加 50-950 色阶，用于不同层级 |
| 辅助色 | 无 | 增加知识蓝 #2563EB、警报橙 #F59E0B、解决青 #06B6D4 |
| 中性色 | 默认灰 | 定义 5 级灰阶：标题/正文/辅助/禁用/背景 |
| 字体 | 系统默认 | 统一使用 Inter/PingFang SC，定义 H1-H6、正文、辅助、标签 |
| 圆角 | 默认 | 大组件 12px，卡片 8px，标签 4px，按钮 6px |
| 阴影 | 默认 | 定义 3 级投影：静止/悬浮/弹窗 |
| 图标 | 混用 | 统一使用 Lucide 图标库，线框风格，尺寸 16/20/24 |

### 2.2 H5 员工端改造

#### 结构改造
- 采用"底部导航 + 浮层"模式替代右侧常驻边栏
- 主界面只保留聊天，辅助能力通过底部按钮或顶部操作唤起
- 右滑/点击按钮可展开「知识卡片」浮层

#### 关键交互
- **空状态升级**：把"正在获取身份信息…"改成：
  - 骨架屏 + 品牌吉祥物（如果有）
  - 或三段式引导："1. 描述问题 → 2. AI 分析 → 3. 获取解答"
- **输入区降噪**：只保留一个 placeholder，底部提示精简为一句话
- **AI 推荐卡片**：在聊天中以内联卡片出现，而不是常驻侧边栏
- **主题切换**：深色模式重新调绿色饱和度，避免刺眼

### 2.3 坐席端工作台改造

#### 三栏结构优化
- 左侧会话列表：只保留头像、姓名、最后消息、时间、状态标签；未读数用红点，不显示数字
- 中间聊天区：
  - 用户消息：白色/浅灰气泡
  - AI 消息：带"AI"标识的浅色品牌绿气泡
  - 坐席消息：品牌绿气泡
  - 系统消息：居中线框文字，不带气泡
- 右侧辅助面板：合并为一个可切换的「AI 助手」面板，分 Tab：回复建议 / 知识库 / 排查流程 / 智能标注

#### 信息降噪
- 顶部操作按钮从 5 个减到 3 个（置顶、转接、结束），其他收进「更多」
- 消息中的排查步骤用折叠卡片呈现，默认只展开第一步
- 给坐席提供「专注模式」：隐藏右侧面板，只留聊天

### 2.4 管理后台改造

#### 深色模式精调
- 校验所有文字对比度 ≥ 4.5:1
- 背景色用深蓝灰（#0F172A）而非纯黑，降低眼部疲劳
- 卡片用轻微边框 + 半透明背景，提升层次

#### 数据可视化
- 运营总览卡片增加微型趋势图（Sparkline）
- 待处理事项按优先级着色：高优先级红、中优先级黄、低优先级绿
- 系统健康从文字列表改为状态板，异常项用脉冲动画吸引注意

### 2.5 知识图谱可视化（配合 Slogan）

为了让"7 次选择找到答案"有直观表达，建议新增：

- **H5 端**：当 AI 给出答案时，在答案顶部显示一条「知识路径」：
  - 例如：问题 → 网络 → VPN → 零信任 → 密码 → 账户锁定 → 解锁步骤
  - 用横向节点图表示，最多 7 个节点，当前节点高亮
- **坐席端**：知识库引用面板增加「知识图谱」Tab，展示问题关联的知识点网络
- **管理后台**：增加「知识图谱健康度」看板，展示知识节点覆盖率、关联度、7跳可达率

### 2.6 改造优先级

| 阶段 | 时间 | 内容 | 影响 |
|------|------|------|------|
| 近期（1-2 周） | 设计系统 v1.0 | 统一色彩、字体、圆角、图标 | 三端开始像一套产品 |
| 近期（3-4 周） | H5 结构优化 | 底部导航、浮层、空状态 | 员工体验提升最明显 |
| 中期（5-8 周） | 坐席端重构 | 三栏降噪、AI 面板合并、专注模式 | 坐席效率提升 |
| 中期（9-12 周） | 管理后台精调 | 深色模式对比度、数据可视化 | 运维体验提升 |
| 远期 | 知识图谱可视化 | H5/坐席/后台三端知识路径展示 | 支撑 Slogan 心智 |

---

## 三、品牌 Slogan 与文案体系

### 3.1 Slogan 核心概念

> 在 IT 智能服务台，通过知识图谱，最多经过 7 次选择，找到答案或真相。

### 3.2 三层 Slogan 体系

| 层级 | 文案 | 使用场景 |
|------|------|----------|
| 品牌口号 | **七选达解** | LOGO 旁、标题栏、视频结尾 |
| 主传播语 | **7 次选择，找到答案** | 海报、企微群发、培训 PPT |
| 完整版 | 世界上，7 个人能连接任何两个人；在 IT 智能服务台，7 次选择能连接你和答案 | 长文、视频旁白、官网 |
| 悬念版 | 你的问题，离答案最多 7 步 | 预热海报、朋友圈 |

### 3.3 企微群发文案

**版本 A：简洁版**

> IT 智能服务台升级了。
>
> 现在，AI 不是给你一堆链接，而是沿着知识图谱，一步步定位问题根因。复杂问题，最多 7 次选择，就能找到答案。
>
> 遇到 IT 问题，先问服务台。👉 [打开 IT 智能服务台]

**版本 B：场景版**

> 周一早上，VPN 连不上，邮件发不了，系统登不进。
>
> 以前：翻 3 个文档，打 2 个电话，等 1 小时。
> 现在：打开 IT 智能服务台，AI 沿着知识图谱排查，最多 7 次选择，定位根因。
>
> 有人工兜底，也有 AI 先跑。先试试 AI，省时省力。👉 [立即体验]

### 3.4 海报文案

**主标题：7 次选择，找到答案**

**副标题：**
- AI 懂你的问题，更懂问题的关联
- 知识图谱 + 人工坐席，双引擎 IT 服务
- 复杂问题不再绕路，答案最多 7 步可达

**行动按钮：**
- 立即体验 / 打开 IT 智能服务台

### 3.5 产品长文标题备选

1. 《7 次选择，找到答案：我们如何在 IT 服务台里建了一张知识图谱》
2. 《从"搜文档"到"找答案"：IT 服务台的 7 步进化》
3. 《你的 IT 问题，离答案最多 7 步》

### 3.6 培训 PPT 用文案

**封面：** 7 次选择，找到答案

**内容页：**
- 第 1 步：描述你的问题
- 第 2 步：AI 识别问题类型
- 第 3 步：推荐最可能的知识节点
- 第 4 步：追问或确认关键信息
- 第 5 步：定位根因或关联场景
- 第 6 步：给出可执行方案
- 第 7 步：一键提交审批或转人工

> 不是每次都需要 7 步，但最多只要 7 步。

---

## 四、CG 宣传视频建议

### 4.1 视频定位

- 时长：60-90 秒（适合企微内传播、会议室播放）
- 风格：扁平 MG 动画 + 轻 3D 元素，科技感但不冰冷
- 色调：品牌绿 + 知识蓝 + 浅灰
- 音乐：轻快、有节奏感，结尾上扬

### 4.2 分镜脚本

| 时间 | 画面 | 旁白/字幕 | 音效 |
|------|------|-----------|------|
| 0-5s | 黑色屏幕，一个绿色光点出现，逐渐扩散成网络节点 | 世界上，任何两个人之间，最多只隔 6 个人 | 轻电子音 |
| 5-10s | 网络节点继续延伸，出现 IT 相关图标（电脑、VPN、锁、邮件） | 而在 IT 智能服务台，任何问题与答案之间，最多只隔 7 次选择 | 节点连接声 |
| 10-20s | 一个员工头像发出问题气泡，气泡沿着知识图谱网络跳动，每跳到一个节点就高亮 | 第 1 次：描述问题<br>第 2 次：AI 识别<br>第 3 次：推荐知识节点<br>第 4 次：确认关键信息 | 轻快的"咚"声每步一次 |
| 20-30s | 节点继续跳动，最终落到一个答案卡片上，卡片展开为解决方案 | 第 5 次：定位根因<br>第 6 次：给出方案<br>第 7 次：一键解决或转人工 | 渐强的电子乐 |
| 30-40s | 画面切换到三端界面：H5 员工端、坐席端、管理后台，三个界面快速展示 | H5 员工随时问，坐席 AI 协同，管理后台实时掌控 | 界面切换音效 |
| 40-50s | 展示数据：AI 解决率、平均响应时间、用户满意度 | 更快响应，更少等待，更多问题被一次解决 | 数字跳动声 |
| 50-60s | 画面回到知识网络，所有节点汇聚成品牌 Logo | 7 次选择，找到答案 | 品牌音效 |
| 60-65s | 黑屏，Slogan + 二维码/入口链接 | IT 智能服务台，你的 IT 问题，最多 7 步找到答案 | 结束音上扬 |

### 4.3 制作建议

| 项目 | 建议 |
|------|------|
| 工具 | After Effects / Premiere + Lottie 导出；或直接用 Sora / Pika / Runway 等 AI 视频工具生成初稿 |
| 素材 | 可用 Dify 工作流生成 AI 配音；背景音乐用 AIVA / Uppbeat |
| 版本 | 至少做 3 个版本：完整版 90s、企微版 30s、朋友圈竖版 15s |
| 落地 | 视频结尾必须带二维码或直达链接，降低转化门槛 |
| 数据埋点 | 统计视频播放完成率、扫码转化率，用于评估推广效果 |

### 4.4 15 秒企微版脚本

- 0-3s：一个员工遇到问题，屏幕弹出"VPN 连不上"
- 3-8s：打开 IT 智能服务台，AI 沿着知识图谱 7 步定位答案
- 8-12s：问题解决了，屏幕显示"已解决"动画
- 12-15s：品牌 Logo + Slogan"7 次选择，找到答案"

---

## 五、其他建议

### 5.1 品牌吉祥物/视觉符号

建议设计一个简洁的视觉符号：一个由 7 个节点组成的知识网络图标，作为品牌辅助图形。可以：
- 放在 H5 启动页
- 作为 AI 思考时的 loading 动画
- 作为管理后台「知识图谱」模块的入口图标

### 5.2 推广节奏

| 阶段 | 动作 | 目标 |
|------|------|------|
| 第 1 周 | 设计系统统一、H5 体验优化 | 内部体验改善 |
| 第 2 周 | 发布 15 秒预热视频 + 海报 | 建立"7 次选择"认知 |
| 第 3 周 | 完整版视频 + 培训 PPT | 推动部门培训 |
| 第 4 周 | 种子用户访谈、数据复盘 | 收集反馈，迭代文案 |

### 5.3 关键数据指标

推广前建议先定基线：
- H5 首次提问转化率
- AI 首次解决率
- 平均会话轮数（验证"7 次选择"是否成立）
- 转人工率
- 用户满意度

### 5.4 风险提醒

- 如果知识图谱实际效果不支持"7 次选择达解"，推广时会透支信任
- 建议先做数据验证：随机抽取 100 个真实问题，统计 AI 解决问题所需轮数分布
- 如果多数问题在 3-5 轮内解决，可放心宣传；如果超过 7 轮，需先优化知识图谱

---

## 六、总结

1. **视觉层面**：三端风格需要统一，核心问题是信息密度失控和品牌符号缺失
2. **改造层面**：先制定设计系统，再优化 H5 结构，再重构坐席端，最后做知识图谱可视化
3. **文案层面**："7 次选择，找到答案"是强记忆点，但需要配套数据验证
4. **视频层面**：建议 60-90 秒 MG 动画为主，配合 15/30 秒短版本多渠道分发
5. **推广前提**：先确保知识图谱真的能支撑"7 次选择达解"，否则推广会反噬

---

*文档生成时间：2026-07-10*