From 3d5365e4609e822ee9a942c471c630a8843a3353 Mon Sep 17 00:00:00 2001 From: let5sne Date: Sun, 5 Jul 2026 00:18:47 +0800 Subject: [PATCH] docs: add H5 redesign blueprint (digital mentor v1.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 沉淀 H5 前端重构设计蓝本:「随身师傅」定位(用户原话背书)、六条 设计铁律、三端三形态 IA(员工端双引擎首页+问师傅答案卡、候选人端 线性漏斗、主管端监工驾驶舱)、知识类型分层、问学练评分发闭环(规则 版 v1)、岗位身份前置依赖、蓝领工具感视觉方向、工程还债与 P0-P3 路线度量;生活顾问为英雄岗位做深,四保一服后置做广。 --- docs/H5_REDESIGN.md | 149 ++++++++++++++++++++++++++++++++++++++++++++ docs/README.md | 1 + 2 files changed, 150 insertions(+) create mode 100644 docs/H5_REDESIGN.md diff --git a/docs/H5_REDESIGN.md b/docs/H5_REDESIGN.md new file mode 100644 index 00000000..d3d975d8 --- /dev/null +++ b/docs/H5_REDESIGN.md @@ -0,0 +1,149 @@ +# H5 前端重构设计蓝本(v1.0 · 2026-07-05) + +> 依据:BRD 选用育留主线 + `feedback/2026070423/ANALYSIS.md`(用户 13 条反馈解读)+ 2026-07-03/04 已落地的体验修复。 +> 定位一句话:**每个一线员工口袋里的老师傅**(用户原话背书:"感觉像老带新的感觉",feedback 截图 10)。 +> 本文是 P1 开工蓝本,每节可拆成独立执行规格;工程现状与红线见 `AGENTS.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.1 员工端(核心,几千日活)——双引擎首页 + 灵魂交互 + +``` +┌──────────────────────────┐ +│ 早上好,王敏 · 生活顾问 │ +│ │ +│ ▍今日安排(AI 排的) │ ← 引擎一:回答"我该干什么" +│ ● 每日小训:催费沟通 8min │ +│ ● 待复盘:昨天的投诉对练 │ +│ │ +│ ▍我的地图(全量菜单) │ ← 引擎二:回答"我能干什么" +│ [问] 查SOP 求助话术 │ 生活顾问视图:[问][练]为大区 +│ [练] 场景模拟 错题重练 │ 每区专属色,按钮化(铁律4) +│ [学] 岗前课程 每日小训 │ +│ [报] 上报案例 拍照记录 │ +│ │ +│ ┌────────┐ │ +│ │🎤 问师傅│ │ ← 全局悬浮,长按说话 +│ └────────┘ │ +└──────────────────────────┘ + tab: 今日 | 练 | 问 | 我 +``` + +**为什么双引擎分开**:用户既要"AI 分析该让他们看什么"(安排),又要"很明确看到我可以 +对哪几个方面操作"(地图,反馈 #5)——两个不同心理诉求,混在一起谁都不满足。 + +**职责地图按岗位配置渲染**(不写死布局):岗位 → 模块权重/排序/入口集,查配置表。 +生活顾问 [问][练] 大区;保安/保洁将来 [学](视频)为大区。 +这张配置表即分发引擎规则版 v1 的第一块积木(见 §4)。 + +**「问师傅」= 产品灵魂交互**。回答统一用**答案卡系统**: + +``` +[话术卡] 你可以这么说 → 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(今日安排+职责地图+问师傅答案卡)、岗位选择、工程拆分 | 问答采纳率(点"听/练"的比例) | +| P2 | 语音对手戏 + **生活顾问场景库做深**(日常服务/催费/投诉三大类) | 人均对练次数(验收 D2≥10 次) | +| P3 | 主管驾驶舱 + 规则版分发引擎 | 每日小训完成率(验收 D3 完训 80%) | +| P3 后 | 四保一服场景做广(视频为主) | — | + +**刻意砍掉的**(每加一个模块都在稀释"师傅"心智): +- 案例学习不做独立模块(折进"练"与"问"的供给侧); +- 候选人端不加社交/个人中心; +- 积分商城不碰(B5 画像先行,激励规则后置)。 diff --git a/docs/README.md b/docs/README.md index 899582b6..785aeb16 100644 --- a/docs/README.md +++ b/docs/README.md @@ -14,6 +14,7 @@ | [物业AI人力资源系统业务需求文档BRD.md](物业AI人力资源系统业务需求文档BRD.md) | 业务需求、范围边界、角色、风险与验收 | | [物业AI人力资源系统开发规格TechSpec.md](物业AI人力资源系统开发规格TechSpec.md) | 工程结构、数据模型、页面路由、API 和核心实现规格 | | [BACKLOG.md](BACKLOG.md) | 需求池与延后事项（B1–B8：数据权限/人设语音/生成图片/生成视频/员工画像/视觉检索/数字师傅） | +| [H5_REDESIGN.md](H5_REDESIGN.md) | H5 前端重构设计蓝本（随身师傅定位、双引擎首页、答案卡、岗位化、路线图） | | [feedback/](feedback/) | 用户反馈原始截图与解读（按日期归档，含 ANALYSIS.md） | | [CODEBASE_ORIGINS.md](CODEBASE_ORIGINS.md) | 代码库来源与上游仓库说明 | | [prototypes/ai-hr-dashboard.png](prototypes/ai-hr-dashboard.png) | 后台首页高保真目标图 |