Files
writer-work-flow/docs/design/ux-exploration.md

14 KiB
Raw Permalink Blame History

墨痕写作台 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:508566。这才是用户在找的"打字跟 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:699708。把坏按钮变成会自我说明的控件
P0-5 提示条旁一行持久 HITL 微文案 +「?这是什么」入口(对老用户可再发现) 回答"怎么开始/AI 会不会乱改",不做一次性 coach
P1-1 底栏瘦身:删纯导航链接(大纲/伏笔,左栏已有);把生成动词收进提示条下的「或让 AI:」一行;保留一个强调的「审稿」作为写→审→验收的前进 CTA;底栏只剩 字数/已保存/停 Toolbar:764788。act-on-chapter 与 navigate 彻底分家
P1-2 统一"采用"动词族:采用(替换整章)/采用(加到章末)/采用(替换这段),弃「回填」 ConversationThread:1620RefinePanel:310ContinuePanel:107ChapterRewritePanel:295。让一套 HITL 读起来是一套
P1-3 右栏去术语(不降级):「本章助手」→「本章参考」;「本章注入(透明)」→「AI 写这章会参考」;「四审」→「写完后检查」;空态改白话;去掉重复的「去审稿」快捷(审稿已在左栏+底栏) ChapterAssistant.tsx。守住 #6 透明度,只换措辞
P1-4 四个生成动词加范围提示:写本章=整章·从头写;续写=接着往下写;整章重写=整章·基于现有重写;润色选段=选中段·打磨 让新手在点之前就能预判对草稿的影响
P1-5 把题材并进首个「写本章」(预取/内联),避免第一次发送被 GenrePicker 弹窗打断 Workbench.tsx:142149。提示条要顺滑就不能一发送就弹窗
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 稳定后。统一对话面板是"以后可选的赌注",不是开局第一步。