写作工作台页面重组·已发布·Vol. I  ·  2026·5 节

系统体验设计

针对留学群体深度访谈,通过整合工具栏与功能重组,减少视线跳跃,优化写作流。

01
Fig. 01写作工作台 — 改版前界面全貌

背景

写作工作台(Essay Lab)是留学申请产品的核心模块——用户在此完成申请文书的构思、写作与修改全流程,也是产品中交互复杂度最高、用户停留时长最长的页面。

数据发现

03
Fig. 03Clarity 热图 — 写作工作台点击分布

我注意到用户在顶部工具栏与底部功能区之间存在大量无效的来回扫视——这不是习惯问题,而是信息架构造成的眼动负担

  • 我注意到用户在进入写作界面后约 47 秒内,点击行为集中在顶部工具栏与底部功能区之间反复切换。录屏显示约 38% 用户首次使用时误触「段落建议」而非「AI 润色」,察觉错误后停顿超过 3 秒。
  • 热图上「历史版本」入口点击热度远低于预期,而访谈中 7/9 位用户表示「找不到以前的版本」——这不是用户行为问题,是信息可见性的系统性失效。

问题诊断

  • 信息层级失效:「格式操作」「AI 建议」「版本管理」三类操作意图按钮处于同一视觉层级,用户无法建立功能分区的认知模型。
  • 空间语言矛盾:顶部导航与底部操作并存,两套逻辑视觉权重相近,用户必须「学习」而非「直觉」使用。
  • 文案风险未分级:「智能建议」仅标注不修改,「AI 润色」直接改写文本;后果迥异,但视觉权重相同,用户无法在操作前预判风险。
04
Fig. 04图 4 — 问题诊断

修改方案

基于以上诊断,重组工具栏信息架构,并引入操作后果的可见性设计。

改前

顶部 + 底部双工具栏并存,功能分散两端,用户视线需频繁上下跳跃

改后

合并为单一顶部栏:左侧文档操作 / 中间 AI 辅助 / 右侧版本管理

↳让三种操作意图各有归属,消除视线跳跃

改前

「AI 润色」与「智能建议」使用相同视觉权重,操作后果不可预判

改后

破坏性操作(直接修改文本)加入橙色边框 + 「将修改原文」警示标签

↳让操作结果可见——用户需要在修改前知道「这个按钮会动我的稿子」

结果 / 待验证假设

改版后追踪周期 2 周。以下为初步观测结果与待验证假设,没有数据支撑的部分如实标注,而非过度声索。

误触 −31%已验证

工具栏误触率下降约 31%(热图点击分布已改善,统计显著性待确认)

版本访问 +2.4×已验证

「历史版本」入口点击率改版后第一周上升 2.4×,用户开始主动使用版本功能

待验证假设

假设:操作可见性提升将减少「撤销」频率 ≥20%(当前数据不足,需 4 周跟踪)

追踪中

假设:改版后新用户首次写作完成率将提升(旧版仅 52%),需等下一批新用户进入后验证