Article

蕉不焦产品呈现设计

2026年7月11日 · 10 分钟阅读

商业级呈现真源:设计宣言、呼吸感系统、三页高保真帧、声线、反模式。参数级 px/bezier 见 10-interaction-spec。

07 · 产品呈现设计

真源职责:产品看起来与感觉如何。设计师与前端的视觉—动效契约。
参数圣经:10-interaction-spec.md
故事分镜:06-user-stories-journeys.md
前端映射:09-frontend-architecture.md


1. 设计宣言

1.1 一句话气质

留白会呼吸的智能体。
不是效率仪表盘,不是债务清单,不是排满的日历——是一个接住闪念、替你放好、只在对的时候轻轻叫你一声的存在。

1.2 关键词

要不要
轻、暖、空、慢、准密、冷、满、催、炫
呼吸、微光、果冻、低语红债、进度羞辱、矩阵墙
单焦点多卡竞争注意力

1.3 品牌承诺在画面上的落点

承诺画面
有焦点聚焦页永远只有一张主卡
不焦虑(非医疗)无「未完成 N」主视觉;复盘交还状态
只回来一步通知与聚焦 WIP=1
闪念轻捕获页大留白 + 零字段条

2. 设计原则(做 / 不做 / 反例)

P1 留白是功能,不是浪费

  • 做:英雄区大空;状态低语;捕获条沉底
  • 不做:为填满而塞快捷入口宫格
  • 反例:首页九宫格 + 今日 12 条待办

P2 一次只说一件事

  • 做:同一时刻一个主 CTA、一句主文案
  • 不做:同时推 3 条「现在只做」
  • 反例:通知栈叠 5 条任务

P3 智能可见,但不抢戏

  • 做:≤3s 微光 + 短句;完成即隐
  • 不做:全屏 Loading「AI 思考中…」卡死
  • 反例:判断完跳详情强制确认

P4 呼吸代替催促

  • 做:idle 慢呼吸暗示「随时可丢」
  • 不做:红点跳动、倒计时羞辱
  • 反例:未读 99 红气泡

P5 触感可信(果冻)

  • 做:主按钮 scale 0.92 → 弹性回弹
  • 不做:无反馈的幽灵点击
  • 反例:点了没动效也没 Toast

P6 可撤销写在脸上

  • 做:接住后短撤销;纠偏「记下了」可感知
  • 不做:静默改状态
  • 反例:归档无恢复入口

P7 低羞耻是结构

  • 做:复盘四计数用「接住/归并/冷冻/等待」
  • 不做:完成率环、连续打卡火焰压人
  • 反例:「你又有 17 件没做」

P8 排程隐形

  • 做:文案「下午再回来」「今天不再递」
  • 不做:四象限页、日视图拖块
  • 反例:捕获后「请选择重要/紧急」

P9 精灵是状态灯,不是主角

  • 做:小尺寸、短动画、服务状态
  • 不做:强制对话、陪聊主线
  • 反例:打开 App 先和角色聊 3 句

P10 减少动态可关

  • 做:系统「减少动态」时关呼吸/微光,保留必要过渡
  • 不做:无障碍用户仍强制 3s 缩放

3. 视觉方向

3.1 色彩

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;呼吸阴影减弱。

3.2 字体阶梯

角色建议用途
Hero22–24 / Semibold「把事情丢进来」
Title18–20 / Medium「现在只做」
Body16 / Regular动作正文
Caption13–14 / Regularreason、提示
Micro12 / Regular时间、统计标签

行长:主文案单行优先;动作卡最多 2–3 行,忌段落墙。

3.3 空间与形

  • 基准 8pt;区块 16 / 24 / 32
  • 卡片圆角 16;胶囊 999
  • 阴影:sm 轻浮、md 主卡、primary 绿色光晕仅用于主 CTA
  • 安全底:env(safe-area-inset-bottom) + Tab 50 + 捕获条 56

3.4 材质意象

意象画面表达
暖纸浅灰底 + 柔阴影
雾状态条毛玻璃(可选)
微光径向渐变 8s 缓动背景;判断时边缘流光
果冻按钮按压缩放 + overshoot 曲线

4. 呼吸感系统(核心)

呼吸感不是装饰,是产品在说「我活着、我不催你」。

4.1 四生命态

态 ID名称何时视觉时长曲线
B1idle-breathe无操作、可捕获胶囊/精灵 scale 0.96→1.02;背景微光3s 循环ease-in-out
B2rest-slow无操作 ≥10s呼吸放慢 scale 0.98→1.015s 循环ease-in-out
B3judging-glow闪念已提交、沉淀中边缘微光流动;ThinkingDots;文案轮换≤3s(超时降级文案)0.4,0,0.2,1
B4confirm-ripple纠偏成功 / 记下了波纹外扩 + 主副文案浮现0.8–1.5s 一次弹性 0.34,1.56,0.64,1

4.2 捕获全过程时间轴(0–8s)— 高光 M1

t=0.0s 用户点「接住」
· 按钮 scale 0.92(果冻按下)
· 轻触觉 lightTap
t=0.05 进入 B3 judging-glow
· 文案:「接住了,正在帮你放好…」
· 精灵 → capture-task
t=0.3s 文案:「蕉不焦在帮你看看这件…」
t=2.0–2.5s 判断完成
· 微光收束为状态色闪光(绿接住/蓝归并/灰冷冻/橙待定)
· 文案切换为 reason(如「已放进资料线程,不新增 Todo」) ← 可同时服务 M2
· 可选 Undo 芯片出现 5s
t=3.5–5s B3 淡出
· 回到 B1 或 B2
· 用户仍在捕获页(不强制跳聚焦)

4.3 「记下了」时间轴 — 高光 M4

t=0 用户点「拆小」
t=0–0.2 按钮果冻回弹
t=0.1 波纹自按钮中心扩散 ~80px,800ms
t=0.2 主文案「记下了」+ 副文案「下次先拆小」
t=0.2 卡片正文 crossfade 为更小 action
t=1.5 文案淡出;偏好已写入

4.4 与精灵(SpriteStatus)绑定

场景kind(资产)呼吸
捕获 idleidle-breathB1/B2
判断中capture-taskB3
冷冻结果freeze-task短静止
聚焦有任务next-step卡片微浮 4s
聚焦空next-step 低透明B1
复盘sleep-shutdown极慢或静
完成done-celebrate一次,短

4.5 降级

条件行为
prefers-reduced-motion关 B1/B2/背景微光;B3 变静态色条;保留 200ms 淡入
弱机关阴影联动缩放
后台停循环动画

5. 三页高保真呈现

导航哲学:捕获(进)· 聚焦(做)· 复盘(放) —— 不是「列表·日历·我的」。

5.1 捕获页 pages/capture — 闪念神殿

布局层级(自上而下)

┌─────────────────────────────┐
│ StatusStrip(下拉显,默认隐) │ ← 轻统计,非债务
│ │
│ AgentStatusLayer │ ← B3 时出现
│ │
│ Sprite │
│ 「把事情丢进来」 │ ← Hero
│ 副文案:只回来一步… │
│ 提示:随时丢 / 有一步在等 │
│ (大留白) │
│ │
├─────────────────────────────┤
│ CaptureBar 🎤 输入 + 接住 │ ← 常驻,主路径全可见
├─────────────────────────────┤
│ Tab 捕获 | 聚焦 | 复盘 │
└─────────────────────────────┘

状态帧目录

帧 ID名称说明高光
CAP-F0首日空无数据;1 条可点示例可选;无假列表
CAP-F1Idle 呼吸B1;提示「随时丢 · 无需项目标签优先级」
CAP-F2慢呼吸10s 后 B2
CAP-F3文字输入中输入框聚焦;接住可点
CAP-F4判断中B3 + capture 精灵M1
CAP-F5接住成功·归并reason 蓝调;不跳页M2
CAP-F6接住成功·下一步reason 可含「现在只做…」;提示去聚焦M1
CAP-F7接住·冷冻灰调 reasonM2
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蕉不焦在帮你看看这件…
超时这件有点复杂,先接住了,稍后整理

5.2 聚焦页 pages/focus — 单点宇宙(高光 M3)

布局

┌─────────────────────────────┐
│ 现在只做 │
│ 其余事项在后台,不打扰你 │
│ │
│ [ next-step 精灵 ] │
│ ┌─────────────────────┐ │
│ │ reason 小字 │ │
│ │ 打开客户方案文档 │ │
│ │ 写三个小标题 │ │
│ │ 原文 ▾ │ │
│ └─────────────────────┘ │
│ │
│ [完成✓] [拆小] [稍后] [🔥] │
└─────────────────────────────┘

状态帧

帧 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
稍后灰淡出
重要橙边框光

5.3 复盘页 pages/review — 释负仪式(高光 M5)

布局

┌─────────────────────────────┐
│ 21:08 │
│ [ sleep 精灵 ] │
│ 今天已经很好了 │
│ 状态交还,今晚不用反复想 │
│ │
│ 接住 归并 冷冻 等待 │
│ 12 5 2 2 │ ← count-up,非红债
│ │
│ 明天只看这一步: │
│ 「打开方案,写第一段标题」 │
│ │
│ [明天上午别推] [收到] │
└─────────────────────────────┘

状态帧

帧 ID名称
REV-F0全日零捕获:计数 0 +「有事随时丢」
REV-F1标准释负:四计数 + 明天一步
REV-F2有偏好笔记:「今天记下了…」
REV-F3点「上午别推」→ M4 记下了
REV-F4点收到 → 可回捕获

禁止元素

  • 完成率环形图
  • 「未完成」大字
  • 排行榜、连续天数羞辱
  • 强制规划明天 8 段

6. 智能体可见性

原则呈现
过程可见B3 微光 + 文案阶段
结果可解释每态一句 reason
学习可感知M4「记下了」+ 副文案
不确定坦诚「我不太确定…你扫一眼」橙态
不打扰不强制跳页、不模态堵死

微光色相:中性灰蓝判断中 → 状态色完成(绿/蓝/橙/灰)。


7. 文案声线库(对 / 错)

场景✓ 对✗ 错
接住收到,先替你放好任务创建成功
归并已放进××线程,不新增 Todo已添加子任务
冷冻像灵感,先冷冻到周末复盘已延期,别偷懒
下一步现在只做:打开…您有一条待办请尽快处理
等待先等对方回复,不压你请及时跟进客户
待定我不太确定是不是硬截止,你扫一眼系统已自动设为最高优先级
记下了记下了 / 下次先拆小偏好已更新到数据库
复盘今晚不用再反复想今日完成率 40%,加油
空聚焦暂时没有下一步,去捕获一些吧待办为空

完整品牌禁语见 05-brand-voice.md。


8. 通知呈现

标题:蕉不焦
正文:打开竞品定价页,摘三条表达

或单行:蕉不焦 | 打开竞品定价页,摘三条表达

可操作(若系统支持):完成 / 稍后 / 拆小
禁止:通知正文列 5 条任务;禁止「你已拖延」。


9. 跨页动效叙事

流转动效
Tab 切换200ms 淡入;目标页呼吸延迟 200ms 再启
捕获成功且生成 next不自动跳;hint 文案出现即可
通知进聚焦开页即 FOC-F1;可短 B3「递回一步」
完成后无下一步celebrate 一次 → FOC-F0
复盘「收到」可 switchTab 捕获,B1

循环动效在交互触发时暂停,结束后恢复(避免边点边抖)。


10. 反模式墙

#错误呈现正确呈现
1捕获页 = 今日任务列表捕获页 = 留白 + 输入
2表单:项目/日期/优先级/象限零字段一句话
3四象限拖拽板后台启发;前台 reason
4日历 time-block 主页无;仅调度文案
5同时 3 张「现在只做」WIP=1 单卡
6「未完成 17」红字「接住 12 · 归并 5」
7AI 黑箱无文案微光 + reason
8自动发客户微信草案 + 用户手发
9长 onboarding 5 页一句浮动 3s
10精灵逼聊精灵状态灯

11. 设计走查清单

设计感

  • 第一眼是「轻」,不是「工具后台」
  • 三页信息密度捕获最空、聚焦一核、复盘仪式感
  • 主色克制,状态色有语义不彩虹

呼吸感

  • Idle 可见 3s 呼吸;10s 后变慢
  • 判断微光 ≤3s 且可并行不挡操作
  • 减少动态时不崩布局

减负

  • 全程无象限/日历主路径
  • 复盘无羞辱
  • M1–M5 可 3 分钟演示

工程对齐

  • Token 名与 tokens.scss 一致
  • 帧 ID 被 06/09 引用
  • 精确曲线/手势阈值见 10

12. 帧 ID 总表(供 06/09 引用)

页帧
捕获CAP-F0 … CAP-F13
聚焦FOC-F0 … FOC-F7
复盘REV-F0 … REV-F4
生命态B1–B4
高光M1–M5

13. 修订

日期说明
2026-07-11商业级呈现真源首版:宣言、呼吸、三页帧、声线、反模式