diff --git a/docs/H5_REDESIGN.md b/docs/H5_REDESIGN.md index d3d975d8..f8e53c22 100644 --- a/docs/H5_REDESIGN.md +++ b/docs/H5_REDESIGN.md @@ -1,8 +1,9 @@ -# H5 前端重构设计蓝本(v1.0 · 2026-07-05) +# H5 前端重构设计蓝本(v1.1 · 2026-07-05) > 依据:BRD 选用育留主线 + `feedback/2026070423/ANALYSIS.md`(用户 13 条反馈解读)+ 2026-07-03/04 已落地的体验修复。 > 定位一句话:**每个一线员工口袋里的老师傅**(用户原话背书:"感觉像老带新的感觉",feedback 截图 10)。 > 本文是 P1 开工蓝本,每节可拆成独立执行规格;工程现状与红线见 `AGENTS.md` 移动端条目。 +> v1.1 变更:新增 §2.0 数字师傅形象层(甲方构想:数字形象 + 今日安排/我的地图两面板 + 语音/文字/按钮三交互),员工端首页布局随之修订,路线表 P1/P2 更新。 ## 0. 从"工具箱"到"随身师傅" @@ -32,14 +33,45 @@ demo 数据、今日安排样例、问师傅 placeholder、对练入口场景, 三端不是三份同构 tab 页,按各自使用心智取形态。 -### 2.1 员工端(核心,几千日活)——双引擎首页 + 灵魂交互 +### 2.0 数字师傅形象层(v1.1 新增,甲方构想) + +**构想**:前端做一个数字形象,配合「今日安排」「我的地图」两个面板,语音、文字、按钮三种交互。 + +**为什么对**:形象的真正价值不是好看,是**给所有系统行为一个"发出者"**—— +"系统推送了 2 个任务"是监工,"师傅今天给你排了两件事"是带教。"老带新的感觉"靠信息 +架构只能到 60 分,剩下 40 分在这个"人"身上:任务是师傅安排的、点评是师傅说的、话术 +是师傅教的。同时直接化解 G4 员工接受度风险("被 AI 监考"→"师傅带我")。 + +**必须做轻(红线)**:BRD 一期明确不做数字人视频生成(慢且贵,G6)。本层 = **2D 插画 +形象 + 四状态状态机**,与数字人视频成本差两个数量级: + +| 要素 | 方案 | +|---|---| +| 形象 | 一张"老师傅"人设插画:可亲、专业、40+ 岁感(用户是中年一线员工,不要二次元吉祥物);用 B3 文生图快速出候选给甲方选 | +| 状态机 | **待机**(呼吸/眨眼,CSS 动画)/ **聆听**(录音中,波纹)/ **思考**(检索中)/ **说话**(TTS 播放中,音波);驱动状态的代码已存在——`sopRecording`/`sopLoading`/`sopSpeaking` 即状态源,只差绑一个可视化形象。不做嘴型同步、不做视频、不加依赖 | +| 三交互 | **按钮**(最高频):快捷问题 chips 按岗位配置(生活顾问:催费话术/投诉应对/收费标准)+ 今日安排 CTA + 地图入口,零打字路径;**语音**(现场急用):长按师傅说话→ASR→答案卡+师傅读话术,链路全部已通;**文字**(安静环境/精确提问):查SOP面板已有 | + +**两条克制原则**: +1. **形象是氛围不是路障**:默认占屏 ≤1/5,滚动收缩为右下悬浮小头像(即原"问师傅" + 悬浮球的升维合体);老用户要效率;形象加载失败时静态头像兜底(铁律 6)。 +2. **人格一致**:气泡文案、答案卡口吻("你可以这么说")、对练点评、TTS 音色统一为 + 同一个"师傅"——人格不一致比没有人格更出戏。**师傅人设卡**(名字/语气/口头禅) + 邀甲方参与定稿。 + +**分阶段**:P1 静态形象+四状态+快捷 chips;P2 配合语音对手戏,师傅"演业主"时明示 +人设切换(避免角色混乱);数字人视频远期视试点反馈再议(维持 BRD 决策)。 + +### 2.1 员工端(核心,几千日活)——师傅形象 + 双引擎首页 ``` ┌──────────────────────────┐ -│ 早上好,王敏 · 生活顾问 │ +│ ┌────┐ 「王敏,今天给你 │ ← 师傅形象+气泡(≤1/5屏) +│ │师傅 │ 排了两件事」 │ 滚动收缩为右下悬浮头像 +│ └────┘ 🎤长按说话 ⌨️打字 │ 状态机:待机/聆听/思考/说话 +│ [催费话术][投诉应对][...] │ ← 快捷 chips,按岗位配置 │ │ -│ ▍今日安排(AI 排的) │ ← 引擎一:回答"我该干什么" -│ ● 每日小训:催费沟通 8min │ +│ ▍今日安排(师傅排的) │ ← 引擎一:回答"我该干什么" +│ ● 每日小训:催费沟通 8min │ 叙述者=师傅 │ ● 待复盘:昨天的投诉对练 │ │ │ │ ▍我的地图(全量菜单) │ ← 引擎二:回答"我能干什么" @@ -47,22 +79,19 @@ demo 数据、今日安排样例、问师傅 placeholder、对练入口场景, │ [练] 场景模拟 错题重练 │ 每区专属色,按钮化(铁律4) │ [学] 岗前课程 每日小训 │ │ [报] 上报案例 拍照记录 │ -│ │ -│ ┌────────┐ │ -│ │🎤 问师傅│ │ ← 全局悬浮,长按说话 -│ └────────┘ │ └──────────────────────────┘ tab: 今日 | 练 | 问 | 我 ``` **为什么双引擎分开**:用户既要"AI 分析该让他们看什么"(安排),又要"很明确看到我可以 对哪几个方面操作"(地图,反馈 #5)——两个不同心理诉求,混在一起谁都不满足。 +师傅形象层(§2.0)统摄两个面板:今日安排以师傅口吻叙述,问答从师傅气泡发起。 **职责地图按岗位配置渲染**(不写死布局):岗位 → 模块权重/排序/入口集,查配置表。 生活顾问 [问][练] 大区;保安/保洁将来 [学](视频)为大区。 这张配置表即分发引擎规则版 v1 的第一块积木(见 §4)。 -**「问师傅」= 产品灵魂交互**。回答统一用**答案卡系统**: +**「问师傅」= 产品灵魂交互**(入口即 §2.0 形象层的语音/文字/chips)。回答统一用**答案卡系统**: ``` [话术卡] 你可以这么说 → 2-3 条直接能开口的话(大字,语音可播) @@ -138,8 +167,8 @@ digest prompt 增加 `scripts`(话术 2-3 条)字段;案例沉淀链路是隐性 | 阶段 | 交付 | 验证信号 | |---|---|---| | P0(立即) | 发布现有版本上线 | 用户基于新版的下一轮反馈 | -| P1(约一周) | 员工端新 IA(今日安排+职责地图+问师傅答案卡)、岗位选择、工程拆分 | 问答采纳率(点"听/练"的比例) | -| P2 | 语音对手戏 + **生活顾问场景库做深**(日常服务/催费/投诉三大类) | 人均对练次数(验收 D2≥10 次) | +| P1(约一周) | 员工端新 IA(师傅形象层:静态形象+四状态+快捷 chips;今日安排+职责地图+问师傅答案卡)、岗位选择、工程拆分 | 问答采纳率(点"听/练"的比例) | +| P2 | 语音对手戏(师傅"演业主"人设切换)+ **生活顾问场景库做深**(日常服务/催费/投诉三大类) | 人均对练次数(验收 D2≥10 次) | | P3 | 主管驾驶舱 + 规则版分发引擎 | 每日小训完成率(验收 D3 完训 80%) | | P3 后 | 四保一服场景做广(视频为主) | — |