第 20 章　完整的产品架构：信息结构和页面地图

别让用户思考。

什么时候读这一章：产品的功能和页面越来越多，用户开始找不到东西的时候。

入门篇第 9 章画过功能结构图和流程图，那时候 Bentoly 只有一个编辑页和一个公开页，一张图就画完了。写这本书时的阿布，侧栏有六个入口，设置弹窗有十五个页面，每个页面里面还有分层。到了这个规模，用户找不到东西，原因多半出在整个产品的东西放错了地方，单个页面做得再好也补不回来。

产品架构回答两个问题：有什么，在哪里

我给阿布画过一张产品架构图。

左半边是产品架构，从上到下五层：用户入口（桌面聊天、桌宠、飞书、钉钉、企业微信、Slack、API 和 Webhook）；阿布 Agent 核心，旁边是性格，底下连着项目空间、记忆、技能三块；能力层（文件读写、命令执行、浏览器操作、电脑操控、MCP 工具、联网搜索、生成文档）；自动化层（定时任务、触发器、Webhook、文件监听、IM 消息触发）；结果输出层（文档报表代码、本地文件变更、IM 回复和通知、日志诊断）。Webhook 是别的程序有事时用来通知阿布的一个网址，IM 指的是飞书、钉钉这类聊天软件。右半边是技术架构，讲这些东西在代码里怎么分层。

这张图回答的是“产品里有什么、它们之间是什么关系”。用户从入口进来，和 Agent 核心对话，Agent 调用能力层做事，自动化层让这些事在人不在场时也能发生，最后结果从输出层交回来。你的产品不需要有五层，但你要能用一张图说出来它有哪几块、哪一块用哪一块。画不出这张图，说明你自己心里也没有分清楚。

这张图回答不了的问题是“用户在哪里找到它”。记忆在图上是 Agent 核心底下的一块，用户在界面上是从设置弹窗里的“记忆”一页进去的；定时任务在图上属于自动化层，用户是从侧栏的“自动化”进去的。“有什么”和“在哪里”是两张图，前一张叫信息结构图，后一张叫页面地图。两张图都要有，而且两张图的词要能对上。

信息结构图：先列东西，再分组，再定关系

画信息结构图的顺序是：把产品里所有用户会接触到的“东西”列出来，分组，然后标出组和组之间的关系。

列东西的时候，列的是用户心里认的东西，而且用用户的话。阿布里有“任务”（一次对话）、“项目”（一个文件夹和它的会话）、“专家”（一个有名字、有简介、有工具清单的助手）、“专家团”（一个队长带几名专家）、“技能”、“连接器”、“插件”、“定时任务”、“监听事件”、“记忆”、“性格”。这些词全部出现在界面上，用户能说出口。代码里还有 store、sidecar、registry、snapshot 这些词，它们不出现在信息结构图上，因为用户不会说“我要去看一下我的 registry”。

一样东西在图上只占一行，只有一个名字。列东西的时候发现同一样东西有两个名字，就选一个，把另一个从界面上全部换掉。阿布把“队员”“团队”统一成“专家”“专家团”就是这样一次改动，经过见第 22 章。

分组的时候问一个问题：用户要找某样东西时，会先想到哪一类。阿布在最近一个正式版本里把侧栏的“工具箱”改成“扩展”，分“插件”“技能”“连接器”三页，每页再分“市场”和“我的”。“市场”里是随阿布附带的，“我的”里是你自己创建或导入的。“专家”那一页也是同样的切换，每个页面记住你上次的选择。来源不同，能做的事也不同：市场里的东西直接用，不能编辑或删除；自己的东西能修改、能删除，按钮统一叫“删除”；“卸载”只留给插件。按来源分组，用户看到一样东西在哪一边，就知道能对它做什么。同一种分法在产品里出现两次以上，用户学一次就够了。

分组还要保证每样东西只出现在一处。这一版还修复过一个问题：从市场安装的连接器，原来在“市场”和“我的”两边都有，修复以后只在“市场”出现，“我的”只放你手动添加的。同一样东西在两个地方出现，用户会以为那是两样东西，修改了一边，再去另一边看有没有跟着变化。

定关系的时候，标出哪些东西包含哪些东西、哪些东西引用哪些东西。专家团包含专家；插件可以附带技能、连接器和专家，卸载插件时它带来的东西一并移除；项目包含会话、项目规则和项目配置。删除一样东西之前要不要先问用户，由这些关系决定。阿布删除一个正被专家团使用的专家之前会先确认，就是因为专家团引用了专家。引用关系还决定了另一头怎么显示：专家被删除或改动以后，专家团里对应的成员标为“已失效”，可以“移除”，不会被悄悄跳过。关系没画清楚，这两处都会漏掉。

flowchart TD
    subgraph 入口
        A[新任务]
        B["待办 / 收件箱"]
        C[专家]
        D[扩展]
        E[自动化]
        F[最近]
    end
    C --> C1["专家：市场 | 我的"]
    C --> C2["专家团：市场 | 我的"]
    C2 -- 包含 --> C1
    D --> D1["插件：市场 | 我的"]
    D --> D2["技能：市场 | 我的"]
    D --> D3["连接器：市场 | 我的"]
    D1 -- 可附带 --> C1
    D1 -- 可附带 --> C2
    D1 -- 可附带 --> D2
    D1 -- 可附带 --> D3
    E --> E1[定时任务]
    E --> E2[监听事件]
    F --> F1[任务]
    F1 -- 属于 --> F2[项目]

图上的一级入口是“新任务”“待办”或“收件箱”“专家”“扩展”“自动化”和“最近”列表。图里“插件可以附带专家团”这一条，写这本书时还没有发布。你的产品比这个小的时候，图也小，画法一样。

页面地图：每个东西在哪个页面，怎么走到

页面地图是把信息结构图里的每一样东西放进一个页面，再标出从哪里能走到这个页面。画页面地图的时候，手边要有信息结构图，逐项核对：信息结构图上的每一样东西，在页面地图上都有一个“家”，而且只有一个。有两个家的东西，用户会在两个地方看到不一样的状态；没有家的东西，用户永远找不到。

阿布的页面地图有两条主线。一条是侧栏，用户做事的地方；另一条是设置弹窗，用户调整设置的地方。设置弹窗在写这本书时的版本里按用途分五组，组和组之间用一条线隔开，没有组标题：第一组是账号和几页应用设置，其中有能力、安全、实验；第二组是模型、用量；第三组是记忆、性格，解锁后多一个桌宠；第四组是频道；第五组是诊断、反馈、版本、关于作者。账号排在最前面，诊断、反馈、版本这类求助和了解产品的页面按惯例放在最后。

最近一个正式版本新增“关于作者”页的时候，顺带把几样东西的家重新定了一次。公众号和赞赏的二维码原来放在“反馈”页，改版后集中到“关于作者”，“反馈”页只留一个链接指过去；“版本”页只保留版本号、设备 ID 和更新检查。每一页放什么，可以用页面的名字来检验：用户看到“版本”两个字，想找的是版本号和更新，二维码不在他的预期里。

页面地图上还要标出只从一处能进的页面。阿布的“下载记录”页只从“设置 → 能力 → 阿布内置浏览器”进，因为它只对内置浏览器有意义；“网站权限”是从能力页进的单独列表页，可以逐个网站查看和添加。决定一个页面从几处能进，看的是用户在几种情境下需要它。

导航：入口数量、命名、顺序

导航是页面地图里“怎么走到”那部分在界面上的样子。设计导航有三件事要定：一级入口放几个、每个叫什么、按什么顺序。

一级入口的数量没有一个通用的数字。多一个入口，用户就多一样要记的东西。最近一个正式版本新增“专家”入口的时候，专家团做成了“专家”页里的第二个页签，侧栏没有再多一个入口。两样东西关系近、用户心里认为它们是一类，就放在同一个入口里。

命名用用户要做的事或用户要找的东西。阿布的入口名是新任务、待办、专家、扩展、自动化，都是两三个字。“扩展”里放着插件、技能、连接器三样东西，入口的名字要三样都能概括。“自动化”里是“定时任务”和“监听事件”；后一个在代码里叫 trigger，界面上写的是“监听事件”，页面上的说明是“监听事件可通过 HTTP、文件变化、IM 消息等触发阿布自动执行任务”。

顺序上，阿布把“新任务”排在第一个。“最近”列表放在导航后面，用户从这里或者用搜索回到旧任务。

设置页这类复杂页面怎样分层

设置页是最容易做坏的页面。每个功能都想往设置里放一个开关，时间一长，设置页就变成了一张几十个开关的长表。

有一次我在真机上验收阿布的“能力”设置页，那一版是三个任务各往里加一块堆出来的，一个文件一千多行，页面里有八段说明文字。我当时给了四条意见：一进来应该只有三个入口（内置浏览器、Chrome 插件、操作电脑），点进去再配；大段文字改成状态或提示图标，悬浮或点击再看；下拉框尺寸不一致，没有人会这么设计；写了很多用户看不懂的内容。按这四条重做的能力页随最近一个正式版本发出去，首屏只有三张卡片，各自的规则放到下一层，网站授权单独成一个列表页，所有开关的含义都没有变化。

第一，每个设置项先问“它属于哪个入口的哪一级”。一级页上只放入口和状态，具体的开关放在二级页。用户在一级页看到的是一张卡片和它的状态，想修改才点进去。重做的时候我还改过一次稿：一级页的卡片上不放文字按钮，整行可以点，末尾只留一个箭头。

第二，说明文字只留一行副标题。每个选项的解释放进下拉框的选项描述里，用户展开下拉框的时候自然看到，比页面上的一段话更容易被发现。

第三，同一组控件同宽，状态用徽章，用一句话说明的地方都要怀疑一下是不是可以用一个状态词代替。状态词也要选对：“操作电脑”没开的时候徽章写的是“已关闭”，“未连接”这个词放在一个没有连接这回事的能力上是错的。

第四，术语用用户场景里的词。界面上写“自动任务”“你在场时”“点击和填写”；“无人值守”“交互模式”“操作类”这些工程里的词留在代码和技术方案里。

分层以后，每个二级页也按同样的规则再看一遍。“我的 Chrome”和“操作电脑”两个二级页后来收成了同一副骨架：标题一行，状态加一个动作，再往后是卡片。“操作电脑”二级页里，缺哪项系统权限，就在那一项旁边放一个“去授权”按钮，直接打开对应的系统设置，回到阿布后自动重新检查。按钮放在问题旁边，用户不需要在页面上找。同一版的“安全”页也按这个思路调整过：默认权限模式放在最前面，改成下拉选择。

先有故事和流程，再有对照表和清单

信息结构图和页面地图管的是整个产品。具体到一个功能，阿布工作区的项目手册要求动手之前走四步：用户故事、业务流程、概念对照表、功能清单。前两步由 Agent 起草，我确认之后才做第三步；后两步我确认之后才进入技术方案。只修改错别字、调整间距、修改内部逻辑，不新增也不改变入口、控件、界面状态、流程步骤的，免做这四步。四步的产物写在同一份任务书的前四节。

这一段写进项目手册的起因，是我提的一条意见：纯从技术实现出发做设计，界面上会出现很多用户不需要、用起来不顺手的东西。用户故事和流程图在第 6 章、第 9 章讲过，下面讲后两步，以及进阶阶段的流程图要多画哪些分支。

概念对照表的完整用法

入门篇第 15 章提过概念对照表，那时候它是交给 AI 的文件里的一节。到了进阶篇，它是防止“实现模型泄漏”的主要工具。

实现模型泄漏指的是：软件内部怎么运转的概念，原样出现在了界面上。Agent 天天读代码，代码里的状态名、字段名，还有中间步骤，它都很熟，做界面的时候会很自然地把这些词搬上去。用户看到“sidecar 已断开”“registry 扫描中”“snapshot 不一致”，不知道该做什么。第 11 章讲过一次这样的事：Agent 按技术状态给我做了四种提示，后来改成只在需要用户动手的时候显示一句话。

概念对照表三列：用户心里的说法、软件内部的叫法、界面上怎么呈现。

第一列先填，用用户会说出口的话来写。阿布设计体系改版的任务书里有这样几行：用户心里说的是“深色、浅色、跟着电脑”，软件内部叫 theme: 'system' | 'light' | 'dark'，界面上是设置里一个分段选择“跟随系统 / 浅色 / 深色”。用户心里说的是“它现在在干什么”，内部叫加载状态、转圈组件，界面上是一个转圈加一句具体的话，比如“正在读取 9 个文件”。用户心里说的是“删之前问我一下”，内部叫确认弹窗，界面上是弹窗写明会发生什么，按钮写“取消”和具体动作。用户心里说的是“这里什么都没有”，内部叫空状态，界面上是一句说明加下一步按钮。

第三列的用词只能来自第一列。第一列写“跟着电脑”，第三列就不能出现“system”或“系统主题源”。这一条是复审时逐项核对的，Agent 交上来的界面，每个词都去第一列找，找不到就修改。

第一列填不出来的概念不进界面。同一份任务书里，设计变量、用途层、基础色板、组件库、浮层管理器、迁移名单、lint 规则这几个概念，第一列写不出用户会说的话，于是它们只在内部使用，给一个合理的默认值，界面上一个字都不出现。对照表里还有两行，第三列写的是“没有”：侧边栏的半透明效果是纯视觉效果，不出现任何文字或开关；系统里的“减少动态效果”“降低透明度”，阿布里没有对应开关，直接跟随系统设置。这一条最常被违反的地方是“高级设置”：Agent 填不出用户的说法，就把它做成一个开关放进高级设置里。高级设置里的开关，用户照样看不懂。

功能清单：界面上的每样东西都指得到流程里的一步

功能清单是第四步。每一条功能标明它服务于流程里的哪一步、对应哪条用户故事。界面上的每个入口、控件、状态、文案，都要能指到流程里的某一步，指不到的从界面上去掉。

设计体系改版的任务书列了十五条，编号 F1 到 F15。F1 是外观三选一，指向流程一里“外观设置是什么”那个判断，对应的用户故事是“阿布的深浅外观跟着我的电脑走”。另有一条是任务读取失败时在对话区显示原因和“重试”按钮，条目里注明了阿布现在没有这个提示，属于新增。清单末尾有一节范围边界，写这次明确不做的事：所有入口的名字、位置、文案保持不变，这次只修改外观；组件预览页只在开发版里出现，正式版用户看不到，所以不列入清单。

功能清单管的是多出来的东西。Agent 实现到一半，常会觉得这里应该再加一个开关、一行提示。项目手册里的做法是：清单之外的界面元素不许直接加，记进任务书顶部的“待确认”一节，写明对应哪条用户故事、为什么需要，然后跳过这一项，继续做不依赖它的部分。到了技术方案阶段发现非加不可，就回到第一步补用户故事。

业务流程里的四种情况

入门篇画流程图的时候，画的是一切顺利的那条路。进阶篇的流程图必须画出四种不顺利的情况：失败、中断、没有权限、没有数据。每一种都要写明用户看到什么、能做什么。

失败：操作做了，结果不对。设计体系改版的任务书里，流程三画了任务打不开的分支：在对话区显示一句原因和一个“重试”按钮，其余界面照常可用。最近一个正式版本修复过的一个问题也属于这一类：已经发出去的消息失败时，对话里留一条标着失败、带“重试”的消息，输入框里不再放回一份同样的草稿。设计这一步的时候，问的问题是“失败以后用户还能做什么”，答案决定了按钮放哪里、其他部分要不要一起变灰。

中断：操作做到一半停了。阿布的专家团运行被应用重启打断后会自己接着做；任务到了轮次上限时，在对话里出现一张卡片让用户决定下一步（见第 21 章）；用户关掉浏览器任务的标签页，在发下一条消息之前，任务不会不经询问再开新标签页。没有人回应也是一种中断：自动任务需要审批时，5 分钟没人回复按拒绝处理；网页自己弹出的确认框 60 秒没人处理按“取消”，绝不自动点“确定”。中断的设计要回答两件事：重新开始还是接着做，谁来决定。

没有权限：用户想做的事，系统或别人不允许。阿布“操作电脑”缺系统权限时，在缺的那一项旁边放“去授权”；浏览器遇到支付、转账或政务页面时一律每次询问，不提供“以后都允许”，连续拒绝两次就结束这次运行，并留言问你该怎么做。没有权限的设计重点是把“去哪里拿权限”放在用户当下所在的位置。

没有数据：页面该显示的东西一个都没有。阿布的“下载记录”页空的时候显示“暂无下载记录”，侧栏的最近列表空的时候显示“暂无会话”，定时任务页空的时候显示“暂无定时任务”和一个“创建定时任务”按钮。最后一种是完整的空状态：一句说明加一个下一步按钮，按钮指向产生第一条数据的操作。

四种情况在流程图上各是一个分支。画的时候用同一个 mermaid 图，顺利的路从上往下，四种分支从主路分出去再回到主路或结束。一张流程图上没有菱形判断节点，几乎可以断定它漏掉了这四种情况。

每个分支用哪种方式告诉用户，也在流程图上定。同一份任务书的流程四画的是“阿布有事要告诉用户”：操作无法恢复的，用确认弹窗，按钮写具体动作；可以撤销的，直接执行，只给一条带“撤销”的短通知；和界面上某个位置有关的错误，显示在出错位置旁边，不自动消失；用户没在看阿布的时候，事情进收件箱。这份任务书对应的改版，写这本书时还没有发布。

案例

正例是“设置页这类复杂页面怎样分层”一节讲的能力页改版。改版发出去以后，所有开关的含义和取值都没有变化，用户升级后不需要重新设置。这次改版照着“有什么、在哪里”两张图去做，设置项的数量没有变化，只是重新安排了每一项的位置。

反例是同一个页面改版前的样子。三个任务各自加功能的时候，每个任务都是对的：浏览器站点授权需要一个列表，Chrome 插件需要安装引导，操作电脑需要权限检查。三个“对的”加在一起，就是我验收时看到的那一页。按任务做界面就会长成这样，因为没有人从整页看过。这件事之后我给 Agent 留了一条做法：涉及界面的批次交付前，加一步“整页走查”，按用户旅程看一遍整页。

给 AI 的模板

信息结构图模板是按本章的画法写的。概念对照表和功能清单两份模板取自模板仓库 01-方向/templates/product-brief.md 的第 3、4 节，这里是精简版。用法是复制到你的任务书里，让 Agent 起草，你确认。

信息结构图模板：

## 信息结构图

列出用户会接触到的所有东西，用用户的话命名；分组；标出包含和引用关系。

```mermaid
flowchart TD
    subgraph 一级入口
        A[【入口一】]
        B[【入口二】]
    end
    A --> A1[【东西 1】]
    A --> A2[【东西 2】]
    A2 -- 包含 --> A1
    B --> B1[【东西 3】]
    B1 -- 引用 --> A1
```

核对：每样东西只有一个名字，只出现在一个页面里。
删除规则：被引用的东西删除前先确认；包含关系里删除父项时说明子项怎么处理。

概念对照表模板：

## 概念对照表

第三列的用词只取自第一列。第一列填不出来的概念不进界面。

| 用户心里的说法 | 软件内部的叫法 | 界面上怎么呈现 |
|---|---|---|
| 【用户会说的话】 | 【代码里的名字、字段、状态值】 | 【界面上的控件和文案】 |

这些概念第一列填不出来，只在内部使用，不进界面：【概念 1】、【概念 2】。

功能清单模板：

## 功能清单

每一条都指向业务流程里的某一步，以及一条用户故事。界面上的入口、控件、状态、文案，指不到流程的从界面上去掉。

| 编号 | 功能 | 对应流程步骤 | 对应用户故事 |
|---|---|---|---|
| F1 | 【功能描述】 | 流程一【节点编号】 | P1-1 |

范围边界：
- 【这次明确不做的事】

给 Agent 的指令可以这样写：

读 docs/【功能名】-brief.md。按第 3 节概念对照表核对第 4 节功能清单里每一条功能的界面：
1. 界面上的每个词都要出现在对照表第一列，不在的列出来。
2. 界面上的每个入口、控件、状态、文案都要能指到第 2 节流程里的某一步，指不到的列出来。
3. 第 2 节流程里失败、中断、没有权限、没有数据四种分支，每一种在界面上对应什么，缺的列出来。
只列问题，不修改代码。

专业上叫什么

信息架构（Information Architecture）：Louis Rosenfeld 与 Peter Morville《Information Architecture for the World Wide Web》，讲的是信息怎样组织、命名、导航、检索；本章的信息结构图和页面地图是它的两种产物。

站点地图（Sitemap）：网站设计里的页面层级图；本章的页面地图是同一个东西在桌面产品里的叫法。

INVEST：Bill Wake 提出的用户故事六条标准（独立、可协商、有价值、可估算、小、可测试）；项目手册里要求每条用户故事“能单独演示”，来自其中的“独立”和“小”。

BDD（Behavior-Driven Development）：Dan North 提出，验收场景用 Given-When-Then 写；本章流程图里每一步“用户看到什么、做什么”的写法与它一致。

实现模型和用户心里的模型：阿布的规范写明这组说法依据 Alan Cooper《About Face》。

本章开头那句“别让用户思考”，出自 Steve Krug 的《Don’t Make Me Think》。