项目博客（3）赛后评分与复盘页面的设计与实现

DebateLab-项目博客（3）赛后评分与复盘页面的设计与实现

一、为什么赛后页面很重要

在 DebateLab 项目早期，辩论主流程已经可以基本跑起来，但当一场比赛结束后，用户体验其实还不完整。

因为如果用户打完整场辩论后，系统只是突然停止，那么这个产品更像“做完了一次互动”，而不像“完成了一次训练”。

训练类产品真正重要的是赛后反馈。用户最关心的通常是三个问题：

1. 我这场打得怎么样？
2. 为什么会是这个结果？
3. 我下一次应该怎么练？

因此，本阶段我主要补全了两类赛后页面：

• Judgement 页面：回答“结果是什么”
• Review 页面：回答“为什么会这样、下次怎么改”

这样，整个流程才真正形成：

Debate → Judgement → Review

二、Judgement 页面：先告诉用户结果

Judgement 页面是比赛结束后用户看到的第一屏，它更像一个“揭晓结果页”。

这一页主要展示：

• 当前辩手名称
• 总分 / 平均分
• 六维能力评分
• 雷达图
• 裁判评语
• 评分时间

Judgement 页的作用并不是做特别深入的复盘，而是快速让用户知道：

这场比赛自己的整体表现大概处在什么水平。

相比只给出一个总分，这一页更强调“可视化反馈”，让用户既能看到数字，也能直观看出自己能力分布。

三、六维评分模型的设计

Judgement 页面之所以能形成比较完整的反馈，是因为评分不是单一维度，而是拆成了多个能力项。

目前主要包含：

• 逻辑（Logic）
• 攻辩（Attack）
• 表达（Expression）
• 反应（Reaction）
• 说服（Persuasion）
• 深度（Depth）

这样设计的好处是：

1. 结果更细
   用户不会只看到一个模糊总分，而是能知道自己具体强在哪、弱在哪。

2. 更适合雷达图展示
   六维结构很适合做整体分布图，一眼就能看到能力是否均衡。

3. 方便后续训练建议生成
   如果某几个维度明显偏弱，后续 Review 页就可以围绕它们给建议。

我觉得这一点很符合训练型产品的目标，因为训练本质上就是发现短板，再逐步改进。

四、Judgement 页面为什么要做成“结果页”而不是普通面板

如果只是把分数和评语直接堆在页面上，用户体验会比较平，没有“比赛结束后的揭晓感”。

所以这一页在表现上更接近一个“赛后结果页”，而不是简单的数据表。它通常包括：

• 分数展示
• 雷达图刷新
• 进度条动画
• 面板入场效果
• 评语区强化展示

这样做的意义，不只是好看，而是让用户在心理上感受到：

比赛已经结束，系统正在正式地给出结果反馈。

对于训练产品来说，这种“仪式感”其实很重要，因为它会强化用户对反馈结果的关注度。

五、Review 页面：再告诉用户为什么会这样

如果说 Judgement 页是结果页，那么 Review 页就是分析页。

Review 页面不再只关心“得了多少分”，而是更关注：

• 哪些回合最关键
• 哪些争议点我方占优、哪些没占优
• 我下次训练应该优先改什么

所以它承担的是一种“赛后教练”的角色。

相对于分数，复盘真正决定了这个系统是不是一个训练平台。因为用户只有在这里，才会得到更具体的成长方向。

六、Review 页面为什么拆成三个 Tab

当前 Review 页面采用的是三个标签页结构：

• KeyRounds：关键回合
• Disputes：争议点归属
• Advice：个人建议

这样的拆分我觉得非常合理，因为它正好对应了复盘中的三个核心问题。

1. KeyRounds：哪几轮最关键

这个模块会挑出整场辩论里最值得回看的几轮，例如：

• 转折点
• 精彩回合
• 失误回合

它的意义在于避免用户面对一整场长对话时无从下手，而是先聚焦关键节点。

2. Disputes：哪些点打赢了，哪些没打赢

辩论不是单纯比谁说得多，而是围绕具体争议点展开攻防。这个模块会告诉用户：

• 哪个争议点当前更偏向哪一方
• 为什么会形成这种归属
• 双方在该点上的贡献程度如何

这比简单看总分更能还原比赛本身。

3. Advice：下次该怎么练

这部分一般会围绕：

• 优点
• 待改进点
• 训练建议

来给出更明确的行动方向。我觉得这是整个复盘页里最有“训练价值”的部分。

七、为什么 Review 页要强调组件复用

在前端设计时，我比较认同的一点是：
页面组件不应该只服务于当前场景，而要尽量为历史详情和 replay 预留复用能力。

Judgement 和 Review 都采用了比较统一的数据入口思路，例如由主面板组件统一接收数据，然后自己刷新 UI。这样做的好处有：

1. Controller 更轻
2. View 的职责更清楚
3. 历史详情可以复用相同展示组件
4. Replay 模式也能直接复用已有结果页结构

也就是说，这些页面不是“一次性页面”，而是在为后续历史记录系统打基础。

八、赛后页面对项目闭环的意义

如果没有 Judgement 和 Review，整个项目链路其实只是：

选题 → 发言 → 结束

而补上这两个页面之后，链路才真正变成：

选题 → 发言 → 结束 → 结果 → 分析 → 建议

这对项目意义很大。因为训练类产品和普通互动产品最大的区别就在这里：

• 普通互动产品重在“当下有没有完成”
• 训练类产品重在“完成之后能否带来提升”

Judgement 和 Review 这两页，正是把这种提升感补出来的关键。

九、本阶段总结

这一阶段最重要的成果，不只是补了两个页面，而是让 DebateLab 开始具备真正的赛后反馈能力。

当前形成的赛后链路已经比较清晰：

• Judgement 页面负责揭晓结果
• Review 页面负责解释原因
• 两者共同构成训练闭环的一部分

从产品角度看，这一步让 DebateLab 不再只是“能打完一场辩论”，而是开始具备“帮助用户理解自己表现并继续改进”的能力。

我觉得这也是整个项目最有训练价值的一块内容之一。