对话与工作区并置

尚无可操作的样本；插图为编辑示意，用于说明布局概念而非实际产品截图。落地到产品时仍须验证：工作区变更与具体对话轮次之间的对应关系在真实数据量和长对话下是否仍然清晰、工作区是否真的支持不经过对话的直接编辑、窄屏收起后两侧内容是否都仍可通过键盘和屏幕阅读器完整触达，以及高频修改场景下变更标记是否会造成视觉噪音。

{
  "states": [
    "expanded",
    "collapsed-conversation",
    "collapsed-workspace"
  ],
  "a11y": [
    "工作区中的最新变更除颜色高亮外还有文字说明，不仅靠颜色区分",
    "工作区因对话产生更新时不会抢占用户当前的键盘焦点",
    "收起状态下的展开入口有文字标签且可用键盘操作"
  ],
  "motion": "工作区局部更新可使用短促高亮过渡提示最新变更位置，并尊重减少动态偏好"
}

{
  "id": "conversation-workspace",
  "type": "layout",
  "name": {
    "zh": "对话与工作区并置",
    "en": "Conversation-and-Workspace Layout"
  },
  "aliases": [
    "对话工作区布局",
    "对话画布布局",
    "Chat-and-Canvas Layout"
  ],
  "granularity": "page",
  "intents": [
    "state-intent",
    "co-produce-artifact"
  ],
  "tags": [
    "对话面板",
    "工作区",
    "并置布局",
    "同步产物",
    "可追溯变更"
  ],
  "definition": "把对话面板与承载持久产物的工作区面板并排呈现的页面布局：工作区保存对话生成或修改的对象（文档、代码、看板等），对话是改变该对象的手段，而不是需要被保留的产物本身。",
  "boundary": "与主从布局的区别在于驱动第二个区域内容变化的输入：主从布局里详情内容由用户在列表中选中的项目决定；本布局里驱动工作区变化的是用户发送的一条消息，不经过从列表选择一项这一步。与辅助面板布局的区别在于哪一侧承载主任务：辅助面板中主内容区自身就是主任务，面板只提供参考资料或来源；本布局中工作区面板才承载用户真正要保留和交付的持久对象，对话面板只是修改它的手段，即使对话在视觉上占据不小的空间。轮次对话本身如何组织、如何呈现能力边界，属于对话式界面负责的范畴；本布局只关注对话面板与工作区面板的空间并置关系，以及两者之间的同步契约，不重复定义对话轮次的呈现方式。",
  "signature": [
    "一侧是对话消息流，另一侧是承载持久产物的工作区面板",
    "对话中发送的消息会在工作区中产生可见、可定位的变化",
    "工作区中的每处变化都能追溯到促成它的具体一轮对话"
  ],
  "when": [
    "用户需要通过对话式指令持续生成或修改一份需要保留、可交付的文档、代码或看板等产物",
    "用户需要在查看对话历史的同时，随时直接检查或编辑产物的当前状态",
    "产物会经历多轮迭代修改，用户需要区分哪一轮对话导致了哪处变化"
  ],
  "when_not": [
    "对话的输出本身就是最终交付物，不存在独立于对话、需要持续维护的工作区对象，此时普通对话式界面已足够",
    "第二个区域的内容其实由用户在列表中选中的项目决定，而不是由发送消息产生，这属于主从布局",
    "屏幕窄到无法保留工作区的可达入口，产品却因此彻底移除对工作区的访问，而不是收起为可展开的入口"
  ],
  "tradeoff": "用户可以边对话边看到产物同步更新、减少来回切换，但产品需要维护并可视化“消息—变更”之间的对应关系；窄屏下要在对话与工作区之间做取舍；工作区如果不能脱离对话直接编辑，会让本该轻量的小修改也必须绕道对话才能完成。",
  "comparison": {
    "focus": "通过对话持续生成或修改一个需要保留的工作区产物",
    "mechanism": "对话面板与工作区面板并置，消息与工作区变更之间保持可追溯的对应关系",
    "cost": "需要维护并展示“消息—变更”映射，窄屏下须为工作区保留可达入口"
  },
  "sources": [
    {
      "id": "conversation-workspace-ms-365-copilot-design",
      "title": "Microsoft 365 Blog · Introducing a new design for Microsoft 365 Copilot",
      "url": "https://www.microsoft.com/en-us/microsoft-365/blog/2026/05/28/introducing-a-new-design-for-microsoft-365-copilot/",
      "claim": "微软官方产品设计博客描述 Copilot 在文档、表格或幻灯片旁打开一个对话侧边栏，可直接对内容提出编辑建议或代为修改，并强调要给出“清晰信号”让用户始终知道系统正在做什么；这是微软对自家产品的设计说明，属于产品发布文章，只用于说明对话与工作区并置在实际产品中可能的呈现方式，不构成独立研究证据。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.microsoft.com/en-us/microsoft-365/blog/2026/05/28/introducing-a-new-design-for-microsoft-365-copilot/",
        "status": "available",
        "checkedAt": "2026-09-16T05:40:54.379Z",
        "jobId": "spn2-5c967b1cf4e564d75e20df084d0d9e7a570100a1",
        "url": "https://web.archive.org/web/20260916054120/https://www.microsoft.com/en-us/microsoft-365/blog/2026/05/28/introducing-a-new-design-for-microsoft-365-copilot/",
        "timestamp": "20260916054120"
      }
    },
    {
      "id": "conversation-workspace-nng-accordion-editing",
      "title": "Nielsen Norman Group · Accordion Editing and Apple Picking: Early Generative-AI User Behaviors",
      "url": "https://www.nngroup.com/articles/accordion-editing-apple-picking/",
      "claim": "该研究观察到，用户在纯对话式界面中反复迭代生成内容（先“收缩”再“展开”，即“手风琴式编辑”）时，容易在不断累积的消息流中“迷失”，需要反复向上滚动才能比较多轮修改之间的差异，这在所有受试者身上都构成明显的操作摩擦；这一发现说明了把持久产物固定呈现在独立工作区面板中、而不是让其淹没在对话历史里的必要性，但该研究针对的是纯对话式界面本身，并未直接测试并置工作区的方案。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/accordion-editing-apple-picking/",
        "status": "available",
        "checkedAt": "2026-09-16T05:41:32.271Z",
        "jobId": "spn2-8479ca33a5710834b93408e7aae806cac79136a1",
        "url": "https://web.archive.org/web/20260916054156/https://www.nngroup.com/articles/accordion-editing-apple-picking/",
        "timestamp": "20260916054156"
      }
    }
  ],
  "relations": [
    {
      "target": "supporting-pane",
      "kind": "related",
      "condition": "判断承载主任务的是对话产生的持久对象，还是辅助参考资料",
      "reason": "两者都在主内容旁并置第二个面板；区别在于哪一侧承载主任务——辅助面板中主内容区自身就是主任务，面板只提供参考或来源；本布局中工作区面板才承载用户要保留的持久产物，对话面板只是修改它的手段。",
      "basis": "editorial"
    },
    {
      "target": "master-detail",
      "kind": "related",
      "condition": "区分驱动第二个区域内容的输入是什么",
      "reason": "两者都是主区加副区的空间结构；主从布局由用户在列表中选中的项目驱动详情内容，本布局由用户发送的一条消息驱动工作区变化，输入不是从列表中选择一项。",
      "basis": "editorial"
    },
    {
      "target": "conversational-interface",
      "kind": "composes_with",
      "condition": "对话面板一侧需要组织轮次对话本身的呈现",
      "reason": "对话式界面负责消息轮次如何呈现、能力边界如何说明；本布局在其基础上加入第二个持久工作区面板，并约定消息与工作区变更之间的同步与可追溯关系。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "用户通过对话让工作区内容发生变化",
      "instruction": "在工作区中给出可辨识的变更标记（如高亮或说明文字），并让用户能看出是哪一轮对话消息导致了该变更。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "用户想要修改工作区中的内容",
      "instruction": "允许用户直接在工作区中编辑，不强制所有修改都必须重新组织成一条对话消息。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "视口窄到无法并排显示对话面板与工作区面板",
      "instruction": "把其中一侧收起为可达的入口（如切换标签或抽屉），但保留用户直接触达工作区完整内容的路径，不让工作区内容因收起而不可读或不可达。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "expanded",
      "collapsed-conversation",
      "collapsed-workspace"
    ],
    "a11y": [
      "工作区中的最新变更除颜色高亮外还有文字说明，不仅靠颜色区分",
      "工作区因对话产生更新时不会抢占用户当前的键盘焦点",
      "收起状态下的展开入口有文字标签且可用键盘操作"
    ],
    "motion": "工作区局部更新可使用短促高亮过渡提示最新变更位置，并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意，用于说明布局概念而非实际产品截图。落地到产品时仍须验证：工作区变更与具体对话轮次之间的对应关系在真实数据量和长对话下是否仍然清晰、工作区是否真的支持不经过对话的直接编辑、窄屏收起后两侧内容是否都仍可通过键盘和屏幕阅读器完整触达，以及高频修改场景下变更标记是否会造成视觉噪音。",
  "image": {
    "src": "/images/conversation-workspace.webp",
    "alt": "虚构的 FIELDNOTES 两栏界面：左侧是较窄的对话消息气泡列，右侧是较宽的工作区面板，呈现一份文档，其中一个最近被修改的段落被高亮标出；一条淡淡的连线从最新一条消息指向该高亮段落，整体为暖色调的扁平插画风格。"
  },
  "searchTerms": [
    "conversation pane",
    "workspace",
    "paired panes",
    "synced artifact",
    "traceable changes"
  ]
}