simon/wecom_it_smart_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
35c5580c3d9634b63c22f48ad80f1b9bd55a2ca3
wecom_it_smart_desk/docs/01-产品文档/IT智能服务台-前端评价与推广方案-v2.md
T
Simon facc04aa65 chore: docs 结构整改 + compose 双目录对齐（合并重建提交） 
本提交为 .git 对象库损坏后的重建提交，内容等价于原先三个本地提交
（5e2fd4c2 / 57a53c98 / 5d7e1873）的累积结果，未做任何额外改动。

一、docs 结构整改（整改 #14）
根因：重构时新结构为 untracked 文件，执行 git stash（未带 -u）未纳入，
随后 git reset 拉回 HEAD 旧 tracked 树，导致旧树复活、新旧两棵目录
树并存于 docs/，共 791 文件、双分类体系冲突。

修复动作：
- b2 同名异主题文件改名迁移保全 9 个
- C 类 39 个孤立文件按主题正确归类
- A/B1 类 222 个重复文件删除（新结构已有内容副本）
- 9 个旧独有空目录删除
- 270 处内部引用按 verified 映射改写
- 整改记录 #14 登记于 04-运维文档/部署运维

结果：docs 791 → 569 文件，顶层仅规范 8 类 + 治理文件，单树恢复。
残留：约 20 处指向从未存在文件的陈旧死链，归入独立文档卫生任务。

二、compose 双目录对齐（消除踩坑 A）
- docker-compose.yml：nginx 前端挂载全部由根目录 frontend-*/dist
  改为 src/frontend-*/dist（h5 / agent / admin / terminal）
- docker-compose.dev.yml：dev 服务 build context 与卷同步改 src/
- 效果：本地 docker compose up 不再把根目录 stale dist 挂回，
  与线上一致，分叉隐患消除（已 docker compose config 校验通过）

防复发铁律：
- 重构须提交；仓库修复须 git stash -u 或先 commit
- 新结构须 git add 并提交，避免再次 untracked 复活
- H5 改动只动 src/frontend-h5/，禁改根目录遗留 frontend-*/
2026-08-07 22:31:32 +08:00

315 lines
14 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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*
Reference in New Issue View Git Blame Copy Permalink