Sprint 18 — Design Exploration

17 directions · 1 homepage

左侧 sidebar + 主内容列 跟你现在 Layout 一致 (08-12 是 真 app 感); 01-07 是早期方向 (有些偏网站感, 仅作美学参考). #13 是融合版 — Ocean 色调 + Stripe Press 字体 + 现 Editorial 锋利感. 所有 mockup 用同一组数据 (问候 / 数据 / 考试倒计时 / 今日学习计划 / 课程进度 / 学习足迹 / 待解决问题).

★ Palette Swap (你的方向 — 只换色, 框架/字体/布局不动)
现项目 layout / 字体 / 卡片间距全部保留, 只把 #A5192E 红墨水换成蓝色系. 4 个 palette 直接对比
★ 推荐
14
Ocean Ink
暖纸 (#F7F5F2 不变) + 海蓝墨水 (#1A6F8F 替红) + 沙金保留. 最自然过渡, 给现风格"换墨水"
deeper
15
Deep Navy
暖纸 + 皇家深蓝 (#1E3A8A) + 沙金. 比海蓝更"严肃书本", 古典学术感
cooler
16
Twilight Cool
冷纸 (#ECF1F3) + 深海蓝 (#0E5172) + 沙金. 整体偏冷, 海边静谧氛围最强
brighter
17
Sapphire Sand
暖纸 + 鲜亮蓝宝 (#1D4ED8) + 沙金. 蓝色饱和度最高, 现代 / 偏 SaaS 感
★ Earlier Hybrid (字体也换了 — 偏离你"只换色"要求)
这版我换了字体 (Newsreader+DM Sans) — 其实你想保留现 Instrument Serif + Satoshi 字体, 这版仅作参考
字体换了
13
Editorial Ocean (字体换版)
海边深蓝 + 沙金 + Newsreader 衬线 + DM Sans · 杂志列分隔. 仅供色调参考
▸ App-native (推荐)
真"app 感" — 进来就是 sidebar + 工作区, 跟你现在 Layout 一致
★ 海边蓝
08
Ocean Blue Calm 🌊
海边蓝 + 沙白 + 柔和渐变 · Fraunces 衬线 · 静谧专注 · 你刚要的方向
app
09
Things 3 (macOS)
高级 macOS 任务 app · 节制无衬线 · 蓝色 accent · 经典 ✓ Today/Upcoming/Anytime 五分类
app
10
Spotify Dark
深色 + 绿色 · 课程当 album cover · "Now Playing" 底栏 · 内容卡片大图为主
app
11
Apple Fitness Rings
深色 · 三色彩环 dominate (Move/Exercise/Stand 改成 学习/连续/题目) · 数据可视化优先
app
12
Raycast / Arc Gradient
深色 + 玻璃磨砂 · ⌘K 命令面板 · 渐变光晕 · 最 AI-product 现代感
app
01
Linear / Vercel
极简科技感 · 全黑底 · 等宽数字 · 工程师向 · 命令栏 + ⌘K
app
02
Notion / Doc
工具感 · 高信息密度 · 灰白中性 · 生产力工具
app
03
Duolingo / Playful
卡通游戏化 · 鲜艳色 · 圆角厚边 · XP 徽章 · 中学生向
app
06
中文产品现代
温暖中文优先 · 红印章 + 文楷点缀 · 卡片式 · 国内向
▸ Website / Editorial (早期探索)
这 3 个有 hero / 大留白 / 多列杂志感, 偏"落地页"不是 app — 美学好但布局不适合 app 内
web
04
Stripe Press / Apple
高级极简 · 大留白 · 大字号衬线 · 编辑感 · 留学生 / 高端向
web
05
Anthropic / Cursor
AI 产品标准 · 暖象牙白 · 衬线+无衬线混排 · 柔光晕
web
07
Editorial v2 (现风格精修)
学术期刊感 · 暖纸 + 红墨水 · drop cap + Vol/Issue 杂志排版