真源职责:产品看起来与感觉如何。设计师与前端的视觉—动效契约。
参数圣经:10-interaction-spec.md
故事分镜:06-user-stories-journeys.md
前端映射:09-frontend-architecture.md
留白会呼吸的智能体。
不是效率仪表盘,不是债务清单,不是排满的日历——是一个接住闪念、替你放好、只在对的时候轻轻叫你一声的存在。
| 要 | 不要 |
|---|
| 轻、暖、空、慢、准 | 密、冷、满、催、炫 |
| 呼吸、微光、果冻、低语 | 红债、进度羞辱、矩阵墙 |
| 单焦点 | 多卡竞争注意力 |
| 承诺 | 画面 |
|---|
| 有焦点 | 聚焦页永远只有一张主卡 |
| 不焦虑(非医疗) | 无「未完成 N」主视觉;复盘交还状态 |
| 只回来一步 | 通知与聚焦 WIP=1 |
| 闪念轻 | 捕获页大留白 + 零字段条 |
- 做:英雄区大空;状态低语;捕获条沉底
- 不做:为填满而塞快捷入口宫格
- 反例:首页九宫格 + 今日 12 条待办
- 做:同一时刻一个主 CTA、一句主文案
- 不做:同时推 3 条「现在只做」
- 反例:通知栈叠 5 条任务
- 做:≤3s 微光 + 短句;完成即隐
- 不做:全屏 Loading「AI 思考中…」卡死
- 反例:判断完跳详情强制确认
- 做:idle 慢呼吸暗示「随时可丢」
- 不做:红点跳动、倒计时羞辱
- 反例:未读 99 红气泡
- 做:主按钮 scale 0.92 → 弹性回弹
- 不做:无反馈的幽灵点击
- 反例:点了没动效也没 Toast
- 做:接住后短撤销;纠偏「记下了」可感知
- 不做:静默改状态
- 反例:归档无恢复入口
- 做:复盘四计数用「接住/归并/冷冻/等待」
- 不做:完成率环、连续打卡火焰压人
- 反例:「你又有 17 件没做」
- 做:文案「下午再回来」「今天不再递」
- 不做:四象限页、日视图拖块
- 反例:捕获后「请选择重要/紧急」
- 做:小尺寸、短动画、服务状态
- 不做:强制对话、陪聊主线
- 反例:打开 App 先和角色聊 3 句
- 做:系统「减少动态」时关呼吸/微光,保留必要过渡
- 不做:无障碍用户仍强制 3s 缩放
| Token | 值 | 语义 |
|---|
--bg-page | #FAFAFA | 暖纸底,非惨白医院 |
--bg-card | #FFFFFF | 浮起的一步 |
--color-primary | #4CAF50 | 生长、接住、完成 |
--color-secondary | #2196F3 | 归并、资料、拆小 |
--color-accent | #FF9800 | 重要、待定、轻确认 |
--color-waiting | #90A4AE | 等待别人 |
--color-frozen | #B0BEC5 | 冷冻、冷静 |
--text-primary | #212121 | 主文案 |
--text-secondary | #616161 | 次说明 |
--text-hint | #9E9E9E | 提示 |
状态色与 FragmentState 对齐(见 src/types/models.ts STATE_COLORS)。
暗色:页底 #121212,卡 #1E1E1E,主色略提亮 #66BB6A;呼吸阴影减弱。
| 角色 | 建议 | 用途 |
|---|
| Hero | 22–24 / Semibold | 「把事情丢进来」 |
| Title | 18–20 / Medium | 「现在只做」 |
| Body | 16 / Regular | 动作正文 |
| Caption | 13–14 / Regular | reason、提示 |
| Micro | 12 / Regular | 时间、统计标签 |
行长:主文案单行优先;动作卡最多 2–3 行,忌段落墙。
- 基准 8pt;区块 16 / 24 / 32
- 卡片圆角 16;胶囊 999
- 阴影:sm 轻浮、md 主卡、primary 绿色光晕仅用于主 CTA
- 安全底:
env(safe-area-inset-bottom) + Tab 50 + 捕获条 56
| 意象 | 画面表达 |
|---|
| 暖纸 | 浅灰底 + 柔阴影 |
| 雾 | 状态条毛玻璃(可选) |
| 微光 | 径向渐变 8s 缓动背景;判断时边缘流光 |
| 果冻 | 按钮按压缩放 + overshoot 曲线 |
呼吸感不是装饰,是产品在说「我活着、我不催你」。
| 态 ID | 名称 | 何时 | 视觉 | 时长 | 曲线 |
|---|
B1 | idle-breathe | 无操作、可捕获 | 胶囊/精灵 scale 0.96→1.02;背景微光 | 3s 循环 | ease-in-out |
B2 | rest-slow | 无操作 ≥10s | 呼吸放慢 scale 0.98→1.01 | 5s 循环 | ease-in-out |
B3 | judging-glow | 闪念已提交、沉淀中 | 边缘微光流动;ThinkingDots;文案轮换 | ≤3s(超时降级文案) | 0.4,0,0.2,1 |
B4 | confirm-ripple | 纠偏成功 / 记下了 | 波纹外扩 + 主副文案浮现 | 0.8–1.5s 一次 | 弹性 0.34,1.56,0.64,1 |
t=0.05 进入 B3 judging-glow
· 微光收束为状态色闪光(绿接住/蓝归并/灰冷冻/橙待定)
· 文案切换为 reason(如「已放进资料线程,不新增 Todo」) ← 可同时服务 M2
t=0.1 波纹自按钮中心扩散 ~80px,800ms
t=0.2 主文案「记下了」+ 副文案「下次先拆小」
t=0.2 卡片正文 crossfade 为更小 action
| 场景 | kind(资产) | 呼吸 |
|---|
| 捕获 idle | idle-breath | B1/B2 |
| 判断中 | capture-task | B3 |
| 冷冻结果 | freeze-task | 短静止 |
| 聚焦有任务 | next-step | 卡片微浮 4s |
| 聚焦空 | next-step 低透明 | B1 |
| 复盘 | sleep-shutdown | 极慢或静 |
| 完成 | done-celebrate | 一次,短 |
| 条件 | 行为 |
|---|
prefers-reduced-motion | 关 B1/B2/背景微光;B3 变静态色条;保留 200ms 淡入 |
| 弱机 | 关阴影联动缩放 |
| 后台 | 停循环动画 |
导航哲学:捕获(进)· 聚焦(做)· 复盘(放) —— 不是「列表·日历·我的」。
┌─────────────────────────────┐
│ StatusStrip(下拉显,默认隐) │ ← 轻统计,非债务
│ AgentStatusLayer │ ← B3 时出现
├─────────────────────────────┤
│ CaptureBar 🎤 输入 + 接住 │ ← 常驻,主路径全可见
├─────────────────────────────┤
└─────────────────────────────┘
| 帧 ID | 名称 | 说明 | 高光 |
|---|
| CAP-F0 | 首日空 | 无数据;1 条可点示例可选;无假列表 | |
| CAP-F1 | Idle 呼吸 | B1;提示「随时丢 · 无需项目标签优先级」 | |
| CAP-F2 | 慢呼吸 | 10s 后 B2 | |
| CAP-F3 | 文字输入中 | 输入框聚焦;接住可点 | |
| CAP-F4 | 判断中 | B3 + capture 精灵 | M1 |
| CAP-F5 | 接住成功·归并 | reason 蓝调;不跳页 | M2 |
| CAP-F6 | 接住成功·下一步 | reason 可含「现在只做…」;提示去聚焦 | M1 |
| CAP-F7 | 接住·冷冻 | 灰调 reason | M2 |
| CAP-F8 | 接住·待定 | 橙调;可引导轻确认 | |
| CAP-F9 | 语音录音 | 脉动;上滑取消红态 | |
| CAP-F10 | 语音取消 | 松手放弃,无沉淀 | |
| CAP-F11 | 有下一步 hint | 「聚焦里有一步在等你」 | 链 M3 |
| CAP-F12 | 弱网 | 「先记下,联网后整理」 | |
| CAP-F13 | 撤销窗 | Undo 5s | |
| 态 | UI |
|---|
| text-idle | 🎤 |
| text-ready | 有字;接住 primary 实心 |
| text-busy | 接住 disabled;条微透明 |
| voice-idle | 主区变「按住 说话」 |
| voice-rec | 高亮+计时;录音层 |
| voice-cancel | 红;「松开取消」 |
| plus-open | 上浮面板:拍照/相册/… |
| 场景 | 文案 |
|---|
| Hero | 把事情丢进来 |
| Sub | 蕉不焦帮你管 Todo,只回来一步 |
| 判断1 | 接住了,正在帮你放好… |
| 判断2 | 蕉不焦在帮你看看这件… |
| 超时 | 这件有点复杂,先接住了,稍后整理 |
┌─────────────────────────────┐
│ ┌─────────────────────┐ │
│ └─────────────────────┘ │
└─────────────────────────────┘
| 帧 ID | 名称 | 说明 |
|---|
| FOC-F0 | 空态 | 「暂时没有下一步」+ CTA 去捕获;温柔,不嘲讽 |
| FOC-F1 | 单步主态 | 大卡 + 四操作;卡片可 4s 微浮 |
| FOC-F2 | 待定确认 | PendingConfirm:一问 + 2–3 按钮(非表单) |
| FOC-F3 | 完成离场 | 卡右飞/淡出;短 celebrate;→ 空或下一步 |
| FOC-F4 | 拆小变形 | 正文 crossfade + M4 波纹 |
| FOC-F5 | 稍后 | 卡淡出;可选时段 chips:傍晚/明天/下周 |
| FOC-F6 | 标重要 | 边框橙光 1s |
| FOC-F7 | 展开原文 | 折叠区显示 raw 闪念 |
合格:打开竞品定价页,摘三条表达
不合格:修改定价页 / 处理一下
| 按钮 | 色 | 成功反馈 |
|---|
| 完成 | 绿 | 离场 + 可选叮 |
| 拆小 | 蓝 | M4 |
| 稍后 | 灰 | 淡出 |
| 重要 | 橙 | 边框光 |
┌─────────────────────────────┐
│ 12 5 2 2 │ ← count-up,非红债
└─────────────────────────────┘
| 帧 ID | 名称 |
|---|
| REV-F0 | 全日零捕获:计数 0 +「有事随时丢」 |
| REV-F1 | 标准释负:四计数 + 明天一步 |
| REV-F2 | 有偏好笔记:「今天记下了…」 |
| REV-F3 | 点「上午别推」→ M4 记下了 |
| REV-F4 | 点收到 → 可回捕获 |
- 完成率环形图
- 「未完成」大字
- 排行榜、连续天数羞辱
- 强制规划明天 8 段
| 原则 | 呈现 |
|---|
| 过程可见 | B3 微光 + 文案阶段 |
| 结果可解释 | 每态一句 reason |
| 学习可感知 | M4「记下了」+ 副文案 |
| 不确定坦诚 | 「我不太确定…你扫一眼」橙态 |
| 不打扰 | 不强制跳页、不模态堵死 |
微光色相:中性灰蓝判断中 → 状态色完成(绿/蓝/橙/灰)。
| 场景 | ✓ 对 | ✗ 错 |
|---|
| 接住 | 收到,先替你放好 | 任务创建成功 |
| 归并 | 已放进××线程,不新增 Todo | 已添加子任务 |
| 冷冻 | 像灵感,先冷冻到周末复盘 | 已延期,别偷懒 |
| 下一步 | 现在只做:打开… | 您有一条待办请尽快处理 |
| 等待 | 先等对方回复,不压你 | 请及时跟进客户 |
| 待定 | 我不太确定是不是硬截止,你扫一眼 | 系统已自动设为最高优先级 |
| 记下了 | 记下了 / 下次先拆小 | 偏好已更新到数据库 |
| 复盘 | 今晚不用再反复想 | 今日完成率 40%,加油 |
| 空聚焦 | 暂时没有下一步,去捕获一些吧 | 待办为空 |
完整品牌禁语见 05-brand-voice.md。
或单行:蕉不焦 | 打开竞品定价页,摘三条表达
可操作(若系统支持):完成 / 稍后 / 拆小
禁止:通知正文列 5 条任务;禁止「你已拖延」。
| 流转 | 动效 |
|---|
| Tab 切换 | 200ms 淡入;目标页呼吸延迟 200ms 再启 |
| 捕获成功且生成 next | 不自动跳;hint 文案出现即可 |
| 通知进聚焦 | 开页即 FOC-F1;可短 B3「递回一步」 |
| 完成后无下一步 | celebrate 一次 → FOC-F0 |
| 复盘「收到」 | 可 switchTab 捕获,B1 |
循环动效在交互触发时暂停,结束后恢复(避免边点边抖)。
| # | 错误呈现 | 正确呈现 |
|---|
| 1 | 捕获页 = 今日任务列表 | 捕获页 = 留白 + 输入 |
| 2 | 表单:项目/日期/优先级/象限 | 零字段一句话 |
| 3 | 四象限拖拽板 | 后台启发;前台 reason |
| 4 | 日历 time-block 主页 | 无;仅调度文案 |
| 5 | 同时 3 张「现在只做」 | WIP=1 单卡 |
| 6 | 「未完成 17」红字 | 「接住 12 · 归并 5」 |
| 7 | AI 黑箱无文案 | 微光 + reason |
| 8 | 自动发客户微信 | 草案 + 用户手发 |
| 9 | 长 onboarding 5 页 | 一句浮动 3s |
| 10 | 精灵逼聊 | 精灵状态灯 |
| 页 | 帧 |
|---|
| 捕获 | CAP-F0 … CAP-F13 |
| 聚焦 | FOC-F0 … FOC-F7 |
| 复盘 | REV-F0 … REV-F4 |
| 生命态 | B1–B4 |
| 高光 | M1–M5 |
| 日期 | 说明 |
|---|
| 2026-07-11 | 商业级呈现真源首版:宣言、呼吸、三页帧、声线、反模式 |