Appearance
半公开大屏：展示为主的团队状态可视化
第二部 · Agent 实践 · 第17章
撰写日期：2026-07-05
结论
把团队的知识库活跃度、项目状态、团队记忆做成办公室大屏，本质是在做一个 ambient display（环境信息屏）产品。我做完一版"可点击的交互地图"后被一个朴素问题推翻了默认设计：大屏很少有人点。
大屏的默认用户是"路过的人"，不是"操作的人"。轮播是主线，交互是让位机制；而一切上屏内容都要先过"半公开场合"这道隐私关。
1. 用户模型：三种注视时长
大屏没有"session"，只有注视时长。按时长切用户，设计目标立刻清晰：
| 用户 | 注视时长 | 设计目标 |
|---|---|---|
| 路过者 | 3–10 秒 | 一眼看出"今天谁活跃、有什么新东西" |
| 驻足者（访客、等人的同事） | 30 秒–2 分钟 | 随机一个 30 秒窗口里，至少完整消化 1–2 个信息单元 |
| 团队成员 | 全天余光 + 偶尔抬头 | 状态变化（新文档、新记忆、项目状态）可被余光捕捉 |
关键推论：内容编排要为"随机切入"负责——用户不会从头看起，任何时刻的画面都必须自解释。
2. 展示为主，点击为辅：自动轮播导演
第一版把信息藏在点击后面（点人物出档案、点图标出列表）。上线前推演发现这套交互的真实使用频率会趋近于零——于是把"内容调度"从用户手里收回来，交给一个自动轮播导演：
| 状态 | 行为 | 切换条件 |
|---|---|---|
| 自动轮播 | 侧栏按编排循环展示：逐个介绍成员（活跃者优先）、穿插知识库更新 / 团队记忆 / 项目总览 | 默认态 |
| 人工接管 | 显示用户点击的内容，轮播暂停 | 任何真实点击 |
| 回归 | 恢复轮播 | 无操作 2 分钟 |
两个配套设计：
- 聚光联动：侧栏介绍到谁，地图上该成员的角色同步打高亮标记——屏幕任何时刻都在"讲一个人的故事"，而不是两块互不相关的区域。
- 点击全保留：轮播不取代交互，只是接管默认态。交互的价值在于"想看的人立刻能看"，不在于日常使用频率。
3. 拍长跟信息量走
轮播间隔多长？从第一性原理拆：这块屏的本职是让人在随机一眼里带走信息，所以约束不是"轮得快不快"，而是一拍时长 ≥ 这张卡的阅读时间——切得比读得快，等于什么都没展示。
推论是均匀间隔必然错，因为卡片信息量差很远。按信息密度分配：
| 卡片类型 | 拍长 | 理由 |
|---|---|---|
| 富卡（有当日动态 + 负责项目的成员档案） | 18 秒 | 多行内容 + 链接，读完要 15 秒上下 |
| 仅签名的成员档案 | 12 秒 | 一句话，拖长是浪费屏幕时间 |
| 空卡 | 8 秒 | 扫过即可 |
| 列表卡（记忆列表 / 知识库更新） | 20 秒 | 信息最重 |
| 回到总览喘口气 | 10 秒 | 节奏留白 |
整轮周期控制在约 3 分钟：驻足者的一次等待大概率能覆盖大半轮。
4. 画面"活着"的正确方式：行为由真实数据驱动
参考斯坦福小镇（Generative Agents）的视觉语言：每位成员一个角色在地图上自主移动。但装饰性的随机动画很快会审美疲劳，正确做法是让移动本身携带信息——去哪里由真实数据决定：
| 数据 | 行为 |
|---|---|
| 今天编辑过知识库 | 角色发光冒泡，常去"知识区"干活 |
| 是某项目负责人 | 常在自己项目工作站附近 |
| 无当日动态 | 开阔区漫游，偶遇同伴停下打招呼 |
这样"谁在哪"从装饰变成了可读状态：扫一眼地图 ≈ 扫一眼团队今天的活跃分布。
5. 半公开场合的隐私红线
办公室大屏的观众包括访客和其他团队——它是半公开媒介。红线要在数据源头（生成器白名单）而不是展示层做：
| 红线 | 做法 |
|---|---|
| 数据白名单 | 只上：名字、角色、本人自填的公开签名、文档标题、记忆标题、项目状态。聊天内容、日历、未经确认的候选内容一律不出生成器 |
| 真人只说真话 | 角色的台词气泡全部来自真实数据：本人写的签名、今天真编辑过的文档标题、真负责的项目。绝不为真人生成虚构台词 |
| Bot 例外 | 团队 bot 的角色可以有白名单氛围台词 + 实时数据播报——它不是真人，不存在代言问题 |
| 形象特征要有依据 | 性别等外观特征只在有权威依据时使用，拿不准一律中性形象，宁可中性不可搞错 |
| 只读 | 不做任何输入类交互。半公开屏幕上的输入框 = 允许任何路过者匿名向内部系统发消息 |
| 链接可以上屏 | 内部文档链接有登录门禁，访客点了也看不到内容——可点性和保密性不冲突 |
"真人只说真话"值得展开一句：屏幕上小人头顶的气泡，观感上就是"这个人说了这句话"。哪怕台词无害，也是把一句 TA 从没说过的话署上了 TA 的名字。而"活人感"完全可以用真实数据达成——签名本来就是本人写的，文档标题本来就是 TA 今天真实的动作。代人发言的风险，在公开屏幕上被放大；真实数据的表现力，在公开屏幕上也被放大。
6. 工程小抄
| 事项 | 做法 |
|---|---|
| 永不白屏 | 取数失败保持上一帧画面；每天固定低峰时刻整页自刷新一次，防内存慢性泄漏 |
| 数据链自动 | 生成器定时产出白名单后的 JSON，页面定时拉取；人不喂数据，数据来自真实工作流的副产品 |
| 交互可回归验证 | URL 挂调试钩子（?poke=<选择器> 加载后自动点击一次），无头浏览器截图即可验证点击路径 |
| 视觉要真截图 | 低对比的元素会在屏幕上"隐身"（我踩过：两个深色只差一档，整个元素消失）。视觉验收只能靠截图，不能靠读代码 |
7. 单文件产物的设计协作
大屏是零依赖的单 HTML 文件，这带来一个额外红利：和设计师的改版协作可以不走仓库。打包三样东西发过去，改完回传单文件走合并：
| 包里放什么 | 为什么 |
|---|---|
index.html | 全部样式、素材、逻辑都在里面，改版只碰这一个文件 |
一份真实 data.json 快照 | 页面靠数据渲染，没有它设计师看到的是空屏 |
| 一页改版说明 | 怎么本地预览（本地文件不能 fetch，要起最简 HTTP 服务）；哪些随便改（样式/造型/动画）；哪些别动（数据字段、元素 id、隐私红线） |
关键是把红线写进交接包而不是口头说：数据契约和隐私约定跟着文件走，合并时只需要 diff 一个文件。