life/flow · v0.1 2 directions
visual exploration

两个视觉方向 · 同一套信息架构

两个原型实现完全相同的三个模块(Hero 对比 · 长期目标 · 今日明细),只在节奏、字号、留白、线条粗细上分野。深浅色自动跟随系统。移动端优先、iPhone 首屏可见 Hero + 3 条进度条。

— prototypes click any card to open

v1 · Editor

dense · grid · engineering

克制、网格、极细线。顶部面包屑、段落编号、角标装饰让页面像一份编辑器文档。信息密度偏高,晨起/晚间快速扫读最优。

type · JetBrains Mono + system-ui

v2 · Breath

airy · typographic · calm

大留白、超大主数字、进度条压到 2px。温纸色底 + 深蓝墨底双模式。数字本身是主角,页面像一本清晨翻开的笔记。

type · JetBrains Mono + system-ui
共通决策 Hero 数字右上角 +30 小徽章 · 极细进度条 · 浅绿胶囊 Δ 徽章 · 桌面端 Hero 置顶 + 下方两列 · 字号/对齐由 JetBrains Mono + tabular-nums 统一
新增细节 进度条今日增量浅色高亮(基于项目色 38%–45% mix) · 等级卡下方小进度条(240/500 → 冒险者) · 0% 项目用虚线基线(“待启程”,非“未启动”)
三态 Hero 徽章 每个原型 Hero 区下方都画出三种样例:
↑ 比昨日多 30 分(浅绿) · ↓ 比昨日少 10 分(浅橙) · = 与昨日持平(浅灰)
flow.wu-happy.com v0.1 · prototypes