对照当前实现:项目页是同构白卡竖堆 + 底栏扩展按钮;时间轴是「节点轨 + 白卡 + 间隔 pill」。 问题不是「能不能用」,而是 节奏单一、信息层级弱、框与轨抢注意力。 下面各 4 套方案,可直接浏览器打开对比。
现状:每项标题 / 描述 / 图 / 标签 / 时间同权重塞进白卡,扫描成本高;AppBar 三图标偏挤。
白卡 + 阴影,内容块完整但扁平。适合当对照基线。
上图下文杂志卡:封面承载情绪,正文只留标题+一句+计数。有图项目立刻跳出来。
缩略图 + 双行文案 + 右侧计数。密度高、扫读快,像邮件收件箱。适合项目很多的人。
大封面焦点 + 双列次要项目。首页感强,适合「最近在跟的一件事」叙事。
现状:左轨圆点 + 白卡 + GapDays pill。子项目 header 又是一张卡。元素多时「线、点、卡、pill」互相打架。
轨 + 卡 + gap pill + 子项目头。信息全,视觉最吵。
保留时间感,但把轨变细、去掉 gap 白 pill;间隔改成轻文字。日期分段降低同构感。
取消左侧时间轨,用大日期锚定。子项目变成色条分组。更像日记本,更干净。
彻底去掉轨和 gap 组件;顶部分段胶囊筛选子项目。正文大标题 + 分割线,阅读优先。
| 区域 | 方案 | 一句话 | 落地 | 建议 |
|---|---|---|---|---|
| 项目列表 | 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 · 未改应用代码。