项目列表 & 时间轴 · UI 设计稿

对照当前实现:项目页是同构白卡竖堆 + 底栏扩展按钮;时间轴是「节点轨 + 白卡 + 间隔 pill」。 问题不是「能不能用」,而是 节奏单一、信息层级弱、框与轨抢注意力。 下面各 4 套方案,可直接浏览器打开对比。

项目:同构卡片堆叠 时间轴:轨 + 卡 + gap 三层噪音 目标:层次 / 节奏 / 少框 配套:create-form-ui-design.html
一、项目列表 ProjectListPage

现状:每项标题 / 描述 / 图 / 标签 / 时间同权重塞进白卡,扫描成本高;AppBar 三图标偏挤。

P-A · 现状还原

白卡 + 阴影,内容块完整但扁平。适合当对照基线。

9:41●●●
Enil
⌕
🏷
⋯
北海道自驾
···
七月环岛:札幌 → 富良野 → 知床,记录沿途天气与住宿。
旅行2025
12 条记录
3 天前更新
产品日记
···
Enil 迭代备忘:子项目、时间隙、导出…
工作
48 条记录
今天
读书记
···
非虚构摘录与短评。
阅读
7 条记录
上周
项目
+
我的
基线不推荐原样保留

P-B · 封面优先

上图下文杂志卡:封面承载情绪,正文只留标题+一句+计数。有图项目立刻跳出来。

9:41●●●
Enil
⌕
⋯
12 条
北海道自驾
札幌 → 富良野 → 知床 · 3 天前
旅行2025
···
48 条
产品日记
今天更新 · 工作
7 条
读书记
上周 · 阅读
项目
+
我的
推荐有图场景 可复用 paperlike 方向 无图时用渐变占位

P-C · 紧凑列表

缩略图 + 双行文案 + 右侧计数。密度高、扫读快,像邮件收件箱。适合项目很多的人。

9:41●●●
Enil
⌕
⋯
北海道自驾
札幌 → 富良野 → 知床
123天前
产品日记
Enil 迭代备忘
48今天
读书记
非虚构摘录与短评
7上周
健身记录
力量 + 有氧
31昨天
家庭相册
周末随手拍
1205天前
项目
+
我的
推荐多项目 实现成本低 情绪感弱

P-D · 索引首页

大封面焦点 + 双列次要项目。首页感强,适合「最近在跟的一件事」叙事。

9:41●●●
Enil
⌕
⋯
继续记录
你的项目
最近更新
产品日记
48 条 · 今天写了「子项目折叠」
全部项目
北海道自驾
12 条 · 3 天前
读书记
7 条 · 上周
项目
+
我的
品牌感强 排序逻辑要重做 适合 3–12 个项目
二、时间轴 TimelinePage · 含子项目

现状:左轨圆点 + 白卡 + GapDays pill。子项目 header 又是一张卡。元素多时「线、点、卡、pill」互相打架。

T-A · 现状还原

轨 + 卡 + gap pill + 子项目头。信息全,视觉最吵。

9:41●●●
‹
北海道自驾
+
⋯
Day 1 札幌
3 条
▾
抵达新千岁
7/12 14:20
天气很好,租车顺利。市区堵了一会儿。
3 小时
薄野晚饭
7/12 18:40
成吉思汗烤肉,啤酒很上头。
Day 2 富良野
5 条
›
基线轨+卡重复轮廓

T-B · 细轨 + 日标题

保留时间感,但把轨变细、去掉 gap 白 pill;间隔改成轻文字。日期分段降低同构感。

9:41●●●
‹
北海道自驾
+
⋯
7 月 12 日 · 周六 · Day 1 札幌
Day 1 札幌
14:20
抵达新千岁
天气很好,租车顺利。市区堵了一会儿。
↓ 3 小时
18:40
薄野晚饭
成吉思汗烤肉,啤酒很上头。
7 月 13 日 · 周日 · Day 2 富良野
Day 2 富良野
09:10
花田公路
薰衣草还没全开,但已经很香。
推荐默认升级 兼容 gap 模式 子项目色点可保留

T-C · 日日志(无轨)

取消左侧时间轨,用大日期锚定。子项目变成色条分组。更像日记本,更干净。

9:41●●●
‹
北海道自驾
+
⋯
127 月 · 周六
Day 1 札幌 · 3 条
14:20
抵达新千岁
天气很好,租车顺利。
18:40 · 间隔 3 小时
薄野晚饭
成吉思汗烤肉,啤酒很上头。
137 月 · 周日
Day 2 富良野 · 5 条
09:10
花田公路
薰衣草还没全开,但已经很香。
最干净 与「纯时间」模式契合 弱化经典 timeline 符号

T-D · 编辑流

彻底去掉轨和 gap 组件;顶部分段胶囊筛选子项目。正文大标题 + 分割线,阅读优先。

9:41●●●
‹
北海道自驾
+
⋯
全部 Day 1 札幌 Day 2 富良野 未归组
7 月 12 日 14:20 · Day 1 札幌
抵达新千岁
天气很好,租车顺利。市区堵了一会儿,但看到街边的招牌已经很兴奋。
旅行机场
7 月 12 日 18:40 · 间隔 3 小时
薄野晚饭
成吉思汗烤肉,啤酒很上头。店员推荐了当地限定。
7 月 13 日 09:10 · Day 2 富良野
花田公路
薰衣草还没全开,但已经很香。风很大,帽子差点飞走。
阅读体验最佳 折叠/peek 需另解 与创建页 C/E 成套

选型建议

区域 方案 一句话 落地 建议
项目列表 P-A 现状 同构白卡 — 淘汰
P-B 封面优先 情绪与识别度 中(可借 paperlike) 有图用户默认
P-C 紧凑列表 密度与效率 低 多项目 / 可作显示密度选项
P-D 索引首页 焦点叙事 高 品牌向进阶
时间轴 T-A 现状 轨+卡+pill — 淘汰噪音
T-B 细轨+日标题 保留 timeline 符号,去噪 中 默认升级路径
T-C 日日志 去轨,日期锚定 中高 与子项目分组最搭
T-D 编辑流 阅读优先 高 远期 / 阅读模式

成套推荐: 项目 P-B(或密度开关 P-C)+ 时间轴 T-B 先落地; 子项目多的旅行类项目可切 T-C; 创建页对齐此前 B 软卡片,阅读模式再上 T-D + 创建 C/E。

共同原则:① 减少同权重描边/白卡堆叠 ② 用日期/封面制造节奏 ③ gap 用轻文字而非第三种组件 ④ AppBar 图标 ≤2(其余进 ⋯)。

文件:docs/project-timeline-ui-design.html · 创建页:docs/create-form-ui-design.html · 子项目:docs/subproject-ui-design.html · 未改应用代码。