docs: 墨痕写作台 UX 探索报告——多 agent 诊断 + P0/P1/P2 分级改造计划
This commit is contained in:
Yaojia Wang
132
docs/design/ux-exploration.md
Normal file
132
docs/design/ux-exploration.md
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
# 墨痕写作台 UX 探索报告
|
||||||
|
|
||||||
|
> 多 agent 生成：4 个 UX 视角起草（首次心智 / AI 对话可发现性 / 信息架构 / 可供性与措辞）→ 3 个对抗式交叉评审 → 综合合稿；扎根真实截图（`.ux_shots/editor.png`）+ 组件代码。
|
||||||
|
> 用户原话：**「我怎么和 AI 对话？」**——下方 §2 是直接答案，§4 是分级改造清单。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 墨痕写作台 UX 探索 · 综合报告
|
||||||
|
|
||||||
|
用户原话:「我怎么和 AI 对话?」——这不是能力缺失,而是**入口被三件事联手藏住**。下面先诊断根因,再给出一个明确的"怎么和 AI 说话"模型,然后是分级改造清单、更干净的布局草图,以及先做什么。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1. 为什么看不懂(已对代码/截图逐条核实)
|
||||||
|
|
||||||
|
**A. 名字最像"对话"的两个地方,恰恰都不能对话。**
|
||||||
|
- 底栏「AI 对话」按钮(`Workbench.tsx:760`)打开的 `AiConversationDrawer` 是只读历史——代码自己注释「append-only 只读展示」、`role="log"`、空态写「还没有 AI 对话」、**全文件没有任何输入框**。用户点了最像"聊天"的按钮,落进一个不能打字的日志——这就是"我怎么和 ai 对话"的字面成因。
|
||||||
|
- 右栏「本章助手」(`ChapterAssistant`)不是助手,是注入透明度检查器(本章注入/四审/去审稿),同样没有输入框。两个叫"对话/助手"的地方都没法说话。
|
||||||
|
|
||||||
|
**B. 真正能对 AI 说话的输入框,被折叠+标"可选"藏到最不起眼处。**
|
||||||
|
`DirectivePanel` 是 `<details>` 默认折叠、徽标写「可选」、标题「本章写作指令」、里层「AI 写作诉求」(截图顶栏就是那条塌着的"本章写作指令 可选")。全页唯一的自然语言指令框,是被压制得最狠的元素——新手根本不知道能用文字指挥 AI。
|
||||||
|
|
||||||
|
**C. 同一个标签在不同位置含义相反。**「写本章」在顶部「AI 工具条」里是导航 `<Link>`(跳 /write,已在该页时是空操作),在底栏才是真正的生成动作。用户无法形成"这个按钮让 AI 写字"的稳定规则。
|
||||||
|
|
||||||
|
**D. 三套导航面重复到无法学习。** 左栏 10 项(写作/大纲/伏笔/审稿/多章链/文风/设定库/工具箱/规则/技能库)+ 顶栏 5 项(写本章/审稿/大纲/设定库/工具箱)+ 底栏 ~11 控件。「大纲」出现 3 次、「审稿」4 次(还含右栏"去审稿")、「工具箱」3 次且两种去向(底栏开内联面板 vs 顶/左栏跳整页)。而那条叫「AI 工具条」的顶栏里**没有一个是 AI 动作**,全是重复左栏的跳转链接。
|
||||||
|
|
||||||
|
**E. 底栏把 4 类东西做成一模一样的灰药丸,不分组、不标"AI"。** 生成动作(写本章/续写/润色选段/工具箱/整章重写)、纯导航(大纲/伏笔/审稿)、抽屉(速查/AI对话)、状态(字数/已保存)肩并肩,没有任何视觉线索区分"对我这章动手"和"跳到别处"。
|
||||||
|
|
||||||
|
**F. 「润色选段」在空章上是灰死按钮。** `disabled={!canRefine}`,唯一说明是 hover 才出现的原生 title,触屏/键盘都看不到。对困惑用户就是个坏掉的按钮。
|
||||||
|
|
||||||
|
**G. 术语劝退 + 首次零引导。** 右栏「本章注入(透明)/注入实体/四审」是 LLM 管道行话;写作页全程无 onboarding(只有点了写本章后才反应式弹的 GenrePicker)。同一个"采用"动作在各面板有 5 种叫法(接受回填/插入正文/接受最新版/接受这版(替换整章)/回填选段),让本是一套的 HITL(AI 出稿→你采用)看起来像一堆互不相干的工具。
|
||||||
|
|
||||||
|
**H. (评审补充)最该修的是空章状态。** 截图是 3802 字的满章,但"我怎么和 AI 对话"在**空白章**最痛。空章 + 11 个无标注按钮 = 零指引。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. 推荐的"和 AI 对话"模型(直接回答用户的问题)
|
||||||
|
|
||||||
|
**一句话:正文正上方那条常驻输入框,就是你和 AI 说话的地方。**
|
||||||
|
|
||||||
|
把今天折叠的 `DirectivePanel` 升级成一条**始终可见、有标题的中央提示条**,压在正文编辑区正上方:
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────┐
|
||||||
|
│ 告诉 AI 这章想怎么写…(留空则按大纲写) │
|
||||||
|
│ [文风▾] [剧情▾] [写本章 ▸] │
|
||||||
|
└──────────────────────────────────────────────┘
|
||||||
|
或让 AI: 续写 · 润色选中段 · 整章重写 · 工具箱
|
||||||
|
```
|
||||||
|
|
||||||
|
- **发送键就是「写本章」**:把你打的字 `composeDirective` → 逐字流式写进正文(保留现有打字机体验)。
|
||||||
|
- 其余动词作为**同一个 AI 的其它用法**排在下面一行「或让 AI:」,而不是伪装成一个输入框的五种"模式"(见 §3 为何不合并)。
|
||||||
|
- **HITL 不变**:AI 写的永远是草稿,你随时改;满意了去「审稿」验收——原文始终你说了算。一行持久微文案讲清这点:"AI 给草稿,你决定采不采用,原文永远你说了算。"
|
||||||
|
- **为什么放中央而不是右栏**:三份交叉评审一致裁定——右栏 `hidden xl:block`,在 <1280px 的多数 13" 笔记本和所有平板/手机上**整列消失变抽屉**,"最显眼的 AI 家"反而看不见;而 写本章/续写/润色都是**流式写进中央编辑器**,入口就该贴着产出落地的地方(prompt↔output 相邻)。中央方案还是对现有 DirectivePanel 的**原地提升,零重构**。
|
||||||
|
|
||||||
|
**同时拆掉那个误导的陷阱**:把底栏「AI 对话」改名「对话记录/AI 记录」,让"对话"这个词回到真正能打字的中央输入框。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. 明确不做(评审否掉的过度设计)
|
||||||
|
|
||||||
|
- ❌ **"一个输入框 + 模式芯片路由到全部 5 个 hook"**:五个流程形态本就不同——续写不需要文本输入、工具箱是项目级生成器表单、润色需要选区做对象、整章重写有版本栈。塞进一个框会让"回车此刻做什么"取决于看不见的模式,**重造"一个控件多种含义"的老问题**,还要改动 5 个组件及其测试。**统一入口,不统一这五种交互形态。**
|
||||||
|
- ❌ **把「写本章」变成"回复气泡+采用"的聊天模式**:这是倒退——会破坏流式打字机写进正文的体验,多加一步无谓的采用。写本章早已守 HITL(只写草稿、不碰真源),真正的闸门是审稿/验收事务(不变量 #3)。
|
||||||
|
- ❌ **删/替换右栏「本章注入(透明)」**:它是不变量 #6 的"看到的=写章用的"信任牌。**去术语、别删除**。
|
||||||
|
- ❌ **用 Sparkles 当 AI 组标记**:与「工具箱」现有的 Sparkles 图标撞车。用文字组标签或另一个未占用图标。
|
||||||
|
- ❌ **把「润色选段」藏到有选区才出现**:会让新手永远发现不了这能力。**保留可见 + 点击时给提示**才对。
|
||||||
|
- ❌ **首次引导只靠一次性 flag**:提这个意见的是 16 章的老项目用户,"首次进入"的 flag 永远触发不到他。引导必须对老用户**可再次找到**(持久的"这是什么/?"入口 + 不设限的一行提示)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. 分级改造清单(P0 立刻能感知 → P2 较大重构)
|
||||||
|
|
||||||
|
| # | 改动 | 影响 | 成本 | 说明/落点 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| **P0-1** | 底栏「AI 对话」按钮 + 抽屉标题/aria 改名「对话记录」,空态改「这里留存你和 AI 的往复记录」 | 高 | 极小 | `Toolbar:760` / `AiConversationDrawer:106,119,193`。**单点最高 ROI**,直接拆掉用户踩的陷阱,零风险 |
|
||||||
|
| **P0-2** | `DirectivePanel` 提升为正文上方常驻提示条;空章默认展开;标题「本章写作指令」→「告诉 AI 这章想怎么写」;去掉「可选」徽标(空时改邀请式"写点要求,AI 更懂你");「AI 写作诉求」→「你的写作要求」 | 高 | 小 | `Workbench.tsx:508–566`。这才是用户在找的"打字跟 AI 说"的框;发送键 = 写本章,保留流式 |
|
||||||
|
| **P0-3** | 删掉顶部「AI 工具条」,`--chrome` 7rem→4rem | 高 | 极小 | `AppShell.tsx:35,84` + 删 `AiToolbar.tsx`/`ai-tools.ts`。5 项全是重复左栏的导航,一删同时消灭最严重的三重复 + 假"AI"标签 + 「写本章」双重含义,还省 48px |
|
||||||
|
| **P0-4** | 「润色选段」保持可见且可点;无选区时点击弹 toast「先在正文里选中一段再润色」,取消 hover-only title | 中 | 极小 | `Toolbar:699–708`。把坏按钮变成会自我说明的控件 |
|
||||||
|
| **P0-5** | 提示条旁一行持久 HITL 微文案 +「?这是什么」入口(对老用户可再发现) | 高 | 小 | 回答"怎么开始/AI 会不会乱改",不做一次性 coach |
|
||||||
|
| **P1-1** | 底栏瘦身:删纯导航链接(大纲/伏笔,左栏已有);把生成动词收进提示条下的「或让 AI:」一行;保留一个强调的「审稿」作为写→审→验收的前进 CTA;底栏只剩 字数/已保存/停 | 高 | 中 | `Toolbar:764–788`。act-on-chapter 与 navigate 彻底分家 |
|
||||||
|
| **P1-2** | 统一"采用"动词族:`采用(替换整章)/采用(加到章末)/采用(替换这段)`,弃「回填」 | 中 | 小 | `ConversationThread:16–20`、`RefinePanel:310`、`ContinuePanel:107`、`ChapterRewritePanel:295`。让一套 HITL 读起来是一套 |
|
||||||
|
| **P1-3** | 右栏去术语(不降级):「本章助手」→「本章参考」;「本章注入(透明)」→「AI 写这章会参考」;「四审」→「写完后检查」;空态改白话;去掉重复的「去审稿」快捷(审稿已在左栏+底栏) | 中 | 小 | `ChapterAssistant.tsx`。守住 #6 透明度,只换措辞 |
|
||||||
|
| **P1-4** | 四个生成动词加范围提示:写本章=整章·从头写;续写=接着往下写;整章重写=整章·基于现有重写;润色选段=选中段·打磨 | 中 | 小 | 让新手在点之前就能预判对草稿的影响 |
|
||||||
|
| **P1-5** | 把题材并进首个「写本章」(预取/内联),避免第一次发送被 GenrePicker 弹窗打断 | 中 | 小 | `Workbench.tsx:142–149`。提示条要顺滑就不能一发送就弹窗 |
|
||||||
|
| **P2-1** | 左栏 10 项分组:写作 / 资料库(大纲·设定库·伏笔·文风)/ 审阅(审稿·多章链)/ 更多(规则·技能库) | 中 | 中 | `items.ts` + `NavItems.tsx`,复用现有"本作"小标题模式 |
|
||||||
|
| **P2-2** | 处理真正的"第 4 列":把「目录」折成可收起列 / 章节下拉,才谈得上"三区" | 中 | 中 | 删顶栏后仍是 4 列(目录+编辑+右栏);必须给目录定位 |
|
||||||
|
| **P2-3** | 在 `memory/decisions.md` 写死放置规则:导航只在左栏、AI 动作只在中央、状态只在底栏——防三重复回潮 | 中(预防) | 极小 | 让新功能不再乱塞 |
|
||||||
|
| **P2-4** | (延后的赌注,先观察)统一对话面板 | — | 大 | 先上 P0 观察再决定,**不作为开局** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. 更干净的 IA / 布局草图
|
||||||
|
|
||||||
|
**现状(3 套导航 + 实为 4 列):**
|
||||||
|
```
|
||||||
|
Header 墨痕 〈学渣逆袭〉第1章 ················· 搜索 设置
|
||||||
|
[写本章][审稿][大纲][设定库][工具箱] ← 顶"AI工具条":全是导航,重复左栏,含零个AI动作
|
||||||
|
┌────┬─────┬──────────────────────────┬─────────┐
|
||||||
|
│作品库│目录 │ ▸本章写作指令[可选]←真输入框藏这│本章助手 │
|
||||||
|
│模板库│第1章 │ │本章注入 │
|
||||||
|
│设置 │第2章 │ 正文(流式写进这里) │(透明) │
|
||||||
|
│─本作│... │ │四审 │
|
||||||
|
│写作 │ │ │去审稿→ │
|
||||||
|
│大纲…│ │ │<1280px │
|
||||||
|
│(10项)│ │ │整列变抽屉 │
|
||||||
|
└────┴─────┴──────────────────────────┴─────────┘
|
||||||
|
[写本章][续写][润色(灰)][工具箱][整章重写] 字数 [速查][AI对话][大纲][伏笔][审稿] 已保存
|
||||||
|
↑生成 ↑───动作×5───↑ ↑状态 ↑抽屉×2 ↑导航×3重复 ↑状态
|
||||||
|
```
|
||||||
|
|
||||||
|
**目标(删顶栏 → 一条规则:左=去哪 · 中=写稿+跟AI说 · 右=AI参考/写完检查):**
|
||||||
|
```
|
||||||
|
Header 墨痕 〈学渣逆袭〉第1章 ················· 搜索 设置 (省下48px)
|
||||||
|
┌────┬─────┬──────────────────────────┬─────────┐
|
||||||
|
│左栏 │目录 │ ╔══════════════════════╗ │本章参考 │
|
||||||
|
│=唯一│(可折 │ ║告诉 AI 这章想怎么写… ║ │(去术语) │
|
||||||
|
│导航 │叠/下 │ ║[文风▾][剧情▾] [写本章▸]║ │AI写这章 │
|
||||||
|
│ │拉) │ ╚══════════════════════╝ │会参考… │
|
||||||
|
│写作 │ │ 或让AI:续写·润色选中段·整章重写·工具箱│写完后检查│
|
||||||
|
│资料库│ │ ──────────────────────── │→去审稿 │
|
||||||
|
│审阅 │ │ 正文(流式写进这里) │(<1280变 │
|
||||||
|
│更多 │ │ ·AI给草稿,你决定采不采用· │ 抽屉;中央│
|
||||||
|
│ │ │ │ 输入框仍在)│
|
||||||
|
└────┴─────┴──────────────────────────┴─────────┘
|
||||||
|
字数 3802 ····························· 已保存 (底栏只剩状态)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. 先做什么
|
||||||
|
|
||||||
|
**把 P0-1…P0-5 作为一个小 PR 一起上,dogfood,再决定其余。** 交叉评审一致:光是"改名对话 + 提升输入框 + 删顶栏 + 修死按钮 + 持久提示"这 5 项,就以近乎零风险解决约 80% 的困惑,且直接回答用户的字面问题。**不要**用一次大重构去捆绑这个便宜的字面修复而拖延答案。观察真实反馈后,再推进 P1(底栏瘦身/统一采用词/右栏去术语),P2(左栏分组/目录归位)留到 IA 稳定后。统一对话面板是"以后可选的赌注",不是开局第一步。
|
||||||
Reference in New Issue
Block a user