admin
6d92033d5d
5 张设计图入库并出评审结论 REVIEW.md:采纳为视觉基准;修正项—— 师傅形象全线统一为效果总板老师傅(插画风,首页图女性写实形象不采 用,发出者逻辑破裂)、首页形象占屏压回≤1/5+滚动收缩、对手戏每轮 评分只做教练轻提示(评分仍只在 finish)、知识类型四 tab 依赖 B8 未落前不做假 tab。H5_REDESIGN 头部加视觉基准指针。
180 lines
11 KiB
Markdown
180 lines
11 KiB
Markdown
# 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 画像先行,激励规则后置)。
|