14 KiB
墨痕写作台 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 稳定后。统一对话面板是"以后可选的赌注",不是开局第一步。