同一份状态，四种视觉表达

这轮要回答的问题：Agent 已经作出同样的整理判断，怎样的视觉编码能让人更快、更准确地还原当前局面？用户评价原版约为60分，具体反馈是：整齐本身没有增加理解；留白可以散在事项周围；动画要给人时间看清来源、移动和结果。用户也提出 Three.js 液体形态，尝试用流动表达注意力。

三个不同的假设

版本	尝试改善什么	主表达	需要观察的代价
A · 空间排布	第一眼辨认现在值得关注的内容	中央松散纸片，份额决定面积，真实空白分散在周围与间隙	少量小事项是否难读，位置是否仍过度变动
B · 时间展开	理解当前局面怎样形成	事项保持身份，沿真实整理节点看份额、摘要与明确合并关系	历史会不会抢走当前内容，轨迹是否增加理解负担
C · 流动形态	用连续形变感知注意力变化	每件事一滴，面积即份额、位置跨帧稳定；换帧时液滴流动、变大变小，只有明确合并才融为一滴；64 格预算带给出精确份数	流动是否只是在吸引眼球，小液滴的标签是否仍好读
D · 手机首页	打开手机第一眼知道哪些需要你，并就地回应	先后与字号表达份额，登记的反馈按钮表达期待，只需知道的事项错开成叠，底部折叠带交代被整理的输入	档位是否足以分辨份额差异，按钮会不会让“需要你填一个数”压过更重要但只需知道的事

原版继续保留作对照。四个视图使用同一个回放模型，37帧、输入、声明、份额、批注与状态完全相同。表达可以不同，事实与不确定性不变。查看和展开不会写回状态，也不制造“用户已读”的记录。

不是争论哪版更漂亮

人离开一段时间再回来，尝试回答：

1. 此刻哪些内容会改变我的理解或行动？结果与放心等待也算，不只看待办。
2. 相比上一轮，真正变了什么？哪些只是位置变化或时间经过？
3. 为什么这件事变得更值得关注？有疑问时，能否沿原消息、理由或批注核对？

可用同一时刻切换四个方案，观察漏读、误读、反复查找和阅读负担。不用动效数量、信息密度或排列整齐程度代替传递效果；视觉吸引力只有在帮助辨认与记忆时才有价值。

共同边界

• 每个子层独立使用64份预算，不乘父事项的份额。
• A的事项面积、B的同宽状态截面面积表达最终份额；空白不需要连成一整块，也不必起名。
• C的液滴面积与份额成比例，精确份数与未分配见64格预算带；高光、厚度与阴影只是材质，不携带数据。
• 状态不变时不制造进展。跨事项连线或吸合必须有明确合并关系，不从相邻、同色或份额此消彼长推断因果。
• 数据检查入口保留完整 state、原始输入、Batch 和 Diff。故事中的私人消息与 Agent 判断为演示创作。

待用户体验后决定

当前没有选定方案，也不声称某版已经提高传递效率。可以保留某版的空间布局、另一版的变化解释，再重新组合；尚未把实验代码吸收为产品实现。

标题与措辞

2026-10-10，用户指出标题像小说章节，浪费了最重要的信息空间。已逐帧重写事项及子项标题、37个时间节点和6个阶段名称，让标题直接说明对象、当前结果或待决定的边界。预算标题区分费用预测与已批准上限；故障、样表和家庭行程随事实更新名称。三种视图和原版读取同一份标题，不另外创作展示名称；保留原消息、份额、状态和时间。

第一轮体验后的反馈

2026-10-10，用户认为方向可继续，但整体质感仍不足。C 的光线与材质显得生硬，流动不明显，选中后的矩形底色破坏了液体形态。B 的历史主体缺少可辨认的演变动画，悬停没有联动整条事项；上下堆叠的布局让看图与读详情需要反复滚动，历史区域也占用了过多横向空间。

第二轮据此调整：B 将历史与此刻并排放进左侧画布，右侧固定阅读区；按同一事项联动历史、当前截面和标签，并让历史与当前几何连续过渡。C 将材质改为连续液面，采用柔和环境反射、低幅表面流动和运动时的滞后形变，选中效果沿液体轮廓呈现。表面运动不改动状态、份额或文字锚点，业务合并仍只来自明确记录。效果是否改善理解，继续由实际体验判断。

随后用户指出 C 的灰色选中描边仍然生硬。选中表达改为斜光照透液滴：本色在内部聚集，两段不闭合的折射光带随液面弯曲，文字中心避开增强高光。最终按用户反馈移除点击和指针引起的水波纹，将持续的表面蠕动放缓至原速的 40%，帧间与层级切换的过渡速度不变。颜色与透光差异持续标记选中，减少动态效果时保留静态材质。选中不改变液滴半径、位置、轮廓计算或份额；无法使用 WebGL 时，列表明确标出当前查看的事项。

材质与动效参考来自创作者的一手说明：SDF 液体与光照、延迟形变与折射、厚度、法线与环境反射。实现继续使用随原型保存的 Three.js，本地运行。

D · 手机首页与反馈回路

2026-10-10，用户提出移动端的第一屏问题：助理有几百个任务、上千个信息源，打开时要先给出最需要知道的内容，不是输入框加会话列表，也不是通知列表。随后用户在领域模型中把“需要你”与“让你知道”分开：前者以注册了反馈路径为前提，已阅等反馈的后果由业务用途决定。D 据此把这些关系直接变成视觉语法：

状态或记录	手机上的表达
屏幕结构	三个区域各答一个问题：等你回应的卡片、进行中与结果的纸面行、小事的叠卡；顶部一句话给出等你回应的件数。
share	先后与字号档位：24 份是带依据原文的大卡，12 份带一行说明，6 份只留一行；份额不足一行且只需知道的事项进入错开的一叠。精确份数在详情中。
登记的反馈动作	只有登记了反馈路径的输出才成为卡片，大字是登记的问题。按钮形态：两个选项是决定，金额键盘或短句是提供，单个动作是去做，相机是提供照片。朱红只用于可以回应的控件。
子层	首页不展示，详情中展开为独立 64 份。
被整理的输入	底部折叠带给出累计输入、当前件数、本轮噪音与重复，点开看原文与撤下或合并的事项。
变化	相对你指定的比较起点，用一个黑点标出本项或子项有变化；首切片不记录查看，这个起点需要人工选择。
时间信号	零事件的每日整理显示窗口、渠道覆盖与这次整理的结果。

点击卡片进入详情：依据原文、份额理由、来龙去脉、反馈回路和子项，底部固定与首页相同的回应按钮。稍后提醒会把卡片收进顶部时钟；往后切到提醒时间后，它回到首页并注明期间是否有更新。

为此升级了共用的演示数据（四个视图读取同一份）：

• 每个“需要你”的输出版本都登记了期待与可用的反馈动作（frame.asks）；Agent 改写该事项而没有重新登记时，视为没有可用回传路径。
• 故事中林苒回应先前问题的消息，标注了所回应的对象与动作（event.feedback）；另增加两次按钮反馈和一次完整的稍后提醒回路（f14、f24、f30），后者在到点后由 Agent 重新判断并更新招聘事项。
• 每一帧记录调用原因与窗口（frame.signal）。f17 的零事件每日整理不再只是检查：东馆资料已过复核时间，改为“最后核对于13日，出发前再确认”；f27 仍是有效的无变化检查。

这些记录在宿主一侧，不进入 Fold 状态，也不改变其他声明。哪些按钮出现、按下后如何处理，仍属于业务策略；原型中的两种用途只用于比较，不是内置规则。

第一版体验后，用户认为有意思但显得乱：要仔细看才找得到有用的信息。原因是每张卡都同时带头像、类别色、期待标签、期限、子项数、变化标记、摘要、引用和按钮，朱红又出现在按钮、逾期、变化与“收下”上，区分不出主次。第二版只保留三层：顶部一句话、等你回应的卡片（问题即标题）、无装饰的进行中与结果；头像、类别色、子项纸边移出首页，变化统一为黑点，原生输入与下拉改为金额键盘、短句面板与自绘菜单。

第三版按用户“手机上仍浪费空间”的反馈压缩：不再按一份一行预留高度（满屏 64 份会让大份额事项留下大片空白），改为先后与字号档位表达份额，空余份额写进折叠带；窄屏的回放栏只留一行，比较、状态与说明收进“⋯”。

四个视图的第二轮打磨

2026-10-10，用户要求在 D 之后逐个打磨原版与 A/B/C：不只是界面，还要让它们表达升级后的领域含义。四个视图各用自己的语言呈现同一组新记录：

• 哪些事项登记了回应路径、期待是决定、提供还是去做，并显示登记的问题；强调色只承担这一层含义或本轮变化，不再同时表示多件事。
• 输入中的回复、按钮反馈与到点提醒可以辨认，并能定位到它回应的事项；只使用数据中明确的反馈关联，不推断因果。B 在历史带上用空心圈（问你）、实心点（你的回应）与时钟（稍后提醒）连成回路。
• 零事件每日整理说明窗口、渠道覆盖与结果，区分“检查后不改”和“按时间重看后有调整”。
• 详情或阅读区列出反馈回路；回应方式只展示，不能提交，提交只在 D 中演示。
• 原生 select、range 与 details 下拉全部换成自绘控件，保留键盘操作与 aria 语义。A 的纸片改为按 rank 阅读顺序排列，放不下标题时用序号并在板下列出完整标题；B 让此刻截面成为主体，历史退为辅助；C 的小液滴保留事项类型。

已知遗留：原版在手机上的底部播放栏占用较多高度；A 在手机上最小的纸片只能显示序号；B 中早于可见范围的问题看不到对应的空心圈；C 的 1 份液滴偶尔需要很长的指引线（C 已重做，见下节）。

C 重做：注意力容器

2026-10-10，用户认为 Three.js 液滴版“又卡又难看”。C 改为一只竖立的透明容器，容量是本层 64 份：每件事是一层液体，层厚严格等于份额，左侧刻度 0–64 可读数，液面以上的空余就是未分配。最重要的事放在最上层，因为液面是视线最先落下的地方，自上而下读标签也就是按 rank 读；本层用满时杯口写明“已满 64 / 64”。

状态或记录	容器中的表达
share	层厚，对照刻度读数；标签前的数字给出份额，本轮变化时注明原值
未分配	液面以上的空余，写出空余份数；液面高度标在刻度上
类别	同一种液体的不同明度与轻微色相，按类别稳定；子层在父类别内变化明度
登记的回应路径	层右侧的朱红舌签，标签写出期待与登记的问题；空心舌签表示回应路径在子项里。朱红不承担其他含义
本轮回复、按钮与到点提醒	标签标注 ↩ / ◷；阅读区逐条写出输入回应的问题，并可定位到对应层
零事件整理	顶部与阅读区说明调用原因、窗口、覆盖与结果，区分“检查后不改”和“按时间重看后调整”；份额不变时液面不动
变化	同一 ID 连续改变厚度与位置；新事项从杯口注入，撤下的就地流出，只有 merged_into 的两层汇合为一层。保持顺序的标签滑动，换位的标签淡出后在新位置出现，文字不互相穿过
子层	点击有子项的层，父层展开为它自己的 64 份，返回时收回

用 SVG 绘制；过渡约 1.25 秒，可被打断，空闲时不运行动画循环，静止时完全不动，减少动态效果时直接到位。选中只加墨色边线、刻度旁的卡尺和标签底卡，不改变几何。待体验后判断：层数多时右侧标签会延伸到容器底部以下，引线变长；同类别的相邻层主要靠层间高光区分；换位过程中层会短暂重叠。

C 回到液滴

2026-10-10，用户也不喜欢注意力容器：“我觉得之前水滴流动、表达融合、变大变小是合理的思路，就是做得太差了。”问题在执行而不在方向：Three.js 版又卡又难看，水杯版放弃了液滴本身。这一版回到液滴，重写渲染与布局，保留容器版的时间控件、阅读区与领域表达。

状态或记录	液滴中的表达
share	液滴面积：半径按份额开方，同层面积之比等于份额之比；滴内或标签写出份数，本轮变化时注明原值
未分配	液滴之间与周围的真实空白；下方 64 格预算带用空格表示，并写出“未分配 N 份”
位置	份额越大越靠近视觉中心（略偏上），已有事项尽量留在上一帧的位置；每次过渡开始时一次性求解，液滴与标签互不重叠
类别	颜色按类别稳定，子层在父类别内变化明度；相邻或同色不代表关系
登记的回应路径	液滴外一圈细朱红环，与体量无关；标签写出期待与登记的问题。虚线环表示回应路径在子项里。朱红不承担其他含义
本轮回复、按钮与到点提醒	液滴边缘的 ↩ / ◷ 标记；标签与阅读区说明它回应的问题，并可定位
零事件整理	顶部与阅读区说明调用原因、窗口、覆盖与结果；份额不变时画面完全不动
变化	同一事项连续移动、变大变小，运动中略沿路径拉长，并绕开其他液滴；新事项滴入，撤下的缩小淡出。只有 merged_into 让两滴靠拢、长出液桥并融为一滴，倒放沿原路分开
子层	点击有子项的液滴，镜头推进到它内部的 64 份，背景留一层父事项的颜色；Esc 返回
选中	光从液滴内部透出，并在纸面上留一点同色光晕；不加灰色描边或矩形底

做法：一个 WebGL2 片元着色器在整张画布上计算每滴的距离场，由距离场的梯度构造法线，做柔和高光、边缘加深与远侧透光，形成半透明凝胶的质感，不做折射、彩虹或噪声。只有同一合并组的液滴用平滑并集连成一体，过渡中逐渐增大连接半径；其他液滴各自合成，因此不会因为靠近而粘连。只在过渡、选中与悬停变化时运行渲染循环，静止后停止；不支持 WebGL2 时用 Canvas2D 画同样的液滴与液桥。标签是 HTML 叠层：大滴写在滴内，小滴放在旁边并用短引线相连，按优先级排列以供 Tab 遍历。

待体验后判断：直接打开某一帧与逐帧播放到同一帧时，液滴位置可能不同，因为位置沿用上一帧；手机上液滴排成一列，需要滚动；液桥只在合并时出现约一秒，是否足以看清来源。