prop-ai-hr/docs/H5_REDESIGN.md

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 更新。 视觉基准:feedback/2026070423/design/ 5 张效果图 + 其 REVIEW.md 修正项(修正项优先于图面)。

0. 从"工具箱"到"随身师傅"

现状前端是功能陈列:知识库、对练、面试是并列工具,用户要自己想"该用哪个"。 "数字师傅"认知下,产品应像一个人:你问他答(言传)、他做给你看(身教)、 他安排你今天练什么(判断)、他记得你的成长。所有设计从这个心智推导。

主角色:生活顾问(英雄岗位,沟通密集型:日常小区服务/物业费停车费催缴/投诉处理)。 demo 数据、今日安排样例、问师傅 placeholder、对练入口场景,全部用生活顾问真实工作填充 (seed 人设"王敏·客服管家"即该岗位,内容口径钉死,不向泛化漂移)。 四保一服(保安/保洁/保绿/保修/客服)后置,以视频教学为主、对练为辅。

1. 六条设计铁律

全部从用户反馈和一线处境反推,不是审美偏好:

#	铁律	依据
1	媒介即答案:规则数字→信息图卡;话术→语音+大字;动作流程→视频。文字是给办公室的,用户戴着手套站在地库里	ANALYSIS 跃迁一
2	结论先行:任何回答 3 秒内给可执行结论,深度内容层层下钻,永不倾泻原文	反馈 #1/#2
3	一屏一事:导航一律整页切换;弹出/页内展开/底部追加不用	反馈 #3"页面一定要切换"
4	可点即明显:按钮长得像按钮,入口行行有色差;像介绍的就不该能点	反馈 #4
5	贵操作按需触发:AI 生成类(总结图/视频)显式按钮+预期等待动画,点了才花钱	反馈 #2、G6 成本闸门
6	弱网可用:高频 SOP 本地缓存;请求失败有可读兜底,绝不白屏	一线场景(地库/电梯间)

2. 信息架构:三端三种形态

三端不是三份同构 tab 页,按各自使用心智取形态。

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,按岗位配置
│                            │
│ ▍今日安排(师傅排的)       │ ← 引擎一:回答"我该干什么"
│  ● 每日小训:催费沟通 8min │    叙述者=师傅
│  ● 待复盘:昨天的投诉对练  │
│                            │
│ ▍我的地图(全量菜单)       │ ← 引擎二:回答"我能干什么"
│  [问] 查SOP  求助话术      │    生活顾问视图:[问][练]为大区
│  [练] 场景模拟  错题重练   │    每区专属色,按钮化(铁律4)
│  [学] 岗前课程  每日小训   │
│  [报] 上报案例  拍照记录   │
└──────────────────────────┘
 tab: 今日 | 练 | 问 | 我

为什么双引擎分开:用户既要"AI 分析该让他们看什么"(安排),又要"很明确看到我可以 对哪几个方面操作"(地图,反馈 #5)——两个不同心理诉求,混在一起谁都不满足。 师傅形象层(§2.0)统摄两个面板:今日安排以师傅口吻叙述,问答从师傅气泡发起。

职责地图按岗位配置渲染(不写死布局):岗位 → 模块权重/排序/入口集,查配置表。 生活顾问以「问」「练」为主；保安/保洁后续以「学（视频）」为主。 这张配置表即分发引擎规则版 v1 的第一块积木(见 §4)。

「问师傅」= 产品灵魂交互(入口即 §2.0 形象层的语音/文字/chips)。回答统一用答案卡系统:

[话术卡]  你可以这么说 → 2-3 条直接能开口的话(大字,语音可播)
[要点卡]  记住这 3 点  → 信息图式排版(徽章数字/色块分区)
[依据]    折叠,点开看原文片段(现有分层已实现)
[视频]    有相关演示则给时间戳跳转
操作:听一遍 | 跟读练一遍 | 生成总结图(按需,反馈 #2 小窗)

"跟读练一遍"把问和练焊接:刚问完催费话术,一键进催费对练场景——师傅的教法, 说完就让你练。这也是"问→练"数据闭环的入口(§4)。

2.2 候选人端——线性漏斗,不用 tab

低频、目标单一(通过面试入职):进度条驱动的流程页 面试 → 补资料 → 岗前学习 → 等通知,每步只有一个主按钮。不加社交/个人中心。

2.3 主管端——监工驾驶舱

主管不是来"使用功能"的,是来看人和派活的(反馈 #7):

• 今日团队动态流:谁练了什么、效果如何(时间线形态);
• 待办:复盘 / 指派;
• 团队短板热力图 → 点短板一键给相关员工指派专项。 衔接 BACKLOG B5 四维画像、视频观看时长统计(心跳+区间合并)。

3. 答案卡的知识类型分层

知识模型加类型维度(ANALYSIS 跃迁二),检索输出按类型供给:

类型	定位	呈现
话术	直接能说的话	话术卡(大字+语音),生活顾问最高频
SOP	标准	要点卡(信息图式)
案例	参照	折叠区"看看别人怎么处理"
经验策略	火候	融入话术卡备注("如果业主还是不满意,再…")

digest prompt 增加 scripts(话术 2-3 条)字段;案例沉淀链路是隐性知识采集入口, 供给侧战略地位上调。

4. 贯穿闭环:问 → 学 → 练 → 评 → 再分发

员工一周内问了 3 次催费相关问题 → 分发引擎把"催费沟通专项"排进他明天的今日安排 → 练完评分入画像 → 主管端看到短板收敛。 问答行为是最真实的短板信号——这条数据回流是产品从"工具"变"师傅"的分水岭。

克制:分发引擎 v1 用规则表(岗位 × 阶段 × 近期问题类目查表),不上真 AI 排序。 规则版一周能落地、可解释、可演示;数据够了再换模型。

5. 前置依赖:岗位身份

整个岗位化设计(内容口径/模块权重/场景过滤)依赖岗位字段,而 H5 登录只有手机号。 轻方案(必须进 P1):首次登录后选一次岗位(生活顾问/保安/保洁/保修/客服), 存用户 profile;组织快照(aihr_org_snapshot)同步后自动带出,选择页仅对无快照记录者出现。

6. 视觉方向:蓝领工具感

不是企业 SaaS 后台感。参照美团骑手端/顺丰小哥端(已验证一线作业者可用性范式):

• 正文 ≥16px,触点 ≥44px,高对比度(阳光下可读);
• 实心按钮+箭头,可点元素与介绍文字视觉分离(铁律 4);
• 每情境区专属强调色;
• 「建设中」提示从 toast 升级为整页/居中大提示(反馈 #3)。

7. 工程还债(与 P1 并行,先行)

mobile/src/App.vue 已 2500+ 行,是所有改动越来越贵的根因:

• 重构为 vue-router 多路由 + 组件化(按端拆目录)+ design tokens;
• 高频 SOP 进 localStorage(铁律 6);
• 为小程序迁移(uni-app/Taro,AGENTS.md 既定方向)留接缝;
• 迁移期间 demo-check.sh 标记与三端演示流不可回归。

8. 路线与度量(尊重 2 人团队)

阶段	交付	验证信号
P0(立即)	发布现有版本上线	用户基于新版的下一轮反馈
P1(约一周)	员工端新 IA(师傅形象层:静态形象+四状态+快捷 chips;今日安排+职责地图+问师傅答案卡)、岗位选择、工程拆分	问答采纳率(点"听/练"的比例)
P2	语音对手戏(师傅"演业主"人设切换)+ 生活顾问场景库做深(日常服务/催费/投诉三大类)	人均对练次数(验收 D2≥10 次)
P3	主管驾驶舱 + 规则版分发引擎	每日小训完成率(验收 D3 完训 80%)
P3 后	四保一服场景做广(视频为主)	—

刻意砍掉的(每加一个模块都在稀释"师傅"心智):

• 案例学习不做独立模块(折进"练"与"问"的供给侧);
• 候选人端不加社交/个人中心;
• 积分商城不碰(B5 画像先行,激励规则后置)。