65 lines
6.3 KiB
Markdown
65 lines
6.3 KiB
Markdown
# Design Plan —— HabitFlow（S3 产物，按 frontend-design 两遍法）
|
||
|
||
> 依据：frontend-design 已装载（Skill 工具路径，sha256 d9197063…）；MASTER.md（ui-ux-pro-max 生成：Claymorphism / 琥珀+绿 / Varela Round + Nunito Sans）；BRIEF（Operate 模式，睡前场景）。
|
||
|
||
## 第一遍：设计计划
|
||
|
||
**题材世界**：习惯打卡的世界是「纸质习惯手账 + 印章/火漆」——每天往本子上盖一个章。打卡（punch/stamp）这个词本身就是印章隐喻。视觉取材：温纸、墨色、章印、双圈火漆、章按下去的软糯手感（正好接住 MASTER 的 Claymorphism：chunky、厚边、软阴影）。
|
||
|
||
**色板**（4–6 具名 hex，token 全部挂 MASTER 变量）：
|
||
- `--paper 暖纸底` #FFFBEB（MASTER background）
|
||
- `--ink 墨夜蓝` #142033（新派生：foreground #0F172A 提蓝一档，用于 hero 面板与正文，暖纸上的「墨水」）
|
||
- `--amber 琥珀主色` #D97706（MASTER primary；印章金泥）
|
||
- `--amber-deep 熔金` #B45309（primary 的按压/深态派生）
|
||
- `--jade 完成玉绿` #059669（MASTER accent；已完成态与统计正值）
|
||
- `--clay-border 陶线` #F3E4C8（border #FAEEE1 加深一档做 3px clay 厚边，避免在暖底上隐形）
|
||
|
||
**字体与角色**：Varela Round = 数字与拉丁（连续天数、百分比、星期字母——圆润 chunky 数字是 Claymorphism 的性格载体）；Nunito Sans = 拉丁正文；中文 PingFang SC（系统栈）= 界面正文。层级靠字重与块面，不靠斜体/单字变色。
|
||
|
||
**布局概念**：单列、左对齐、16px 页边；「安静的纸面 + 一枚重章」——顶部一枚墨夜蓝「今日印章」面板（唯一的深色块、唯一的圆卡），承载日期环+今日进度；其下是满宽的清单行（非浮动卡片，clay 分隔线分行）；底部双 Tab。统计页：七日章谱（7 列盖章格）+ 每习惯完成率条（墨底琥珀条）+ 总连续天数并入顶面板而非独立卡片。
|
||
|
||
```
|
||
┌────────────────────────────┐ ┌────────────────────────────┐
|
||
│ ██ 墨夜蓝今日印章面板 ██████ │ │ ██ 墨夜蓝面板（七日章谱）██ │
|
||
│ ██ ◯周三 11.06 3/5 ██ │ │ ██ ▢▢▣▣▣▢▣ 本周16章 ██ │
|
||
│ ████████████████████████ │ │ ████████████████████████ │
|
||
│ │ │ │
|
||
│ 今晚要盖的章 │ │ 各习惯完成率 │
|
||
│ ┌──────────────────────┐ │ │ 读书 ▓▓▓▓▓▓░░ 78% │
|
||
│ │(icon) 读书 12天 [盖]│ │ │ 冥想 ▓▓▓▓▓░░░ 64% │
|
||
│ ├──────────────────────┤ │ │ 跑步 ▓▓▓▓░░░░ 57% │
|
||
│ │(icon) 冥想 5天 [✓]│ │ │ ... │
|
||
│ └──────────────────────┘ │ │ │
|
||
│ │ │ │
|
||
│ ────── [今日] [统计] ──── │ │ ────── [今日] [统计] ──── │
|
||
└────────────────────────────┘ └────────────────────────────┘
|
||
```
|
||
|
||
**原则**（这个产品独有的）：
|
||
1. **盖章是仪式**：完成动作 = 按下一枚实体感印章（200ms 软按压 + 内阴影翻转 + 章印落定），是全页唯一 authored motion moment。
|
||
2. **安静的纸面**：除顶部印章面板外不允许第二个深色块/浮动卡；信息靠 clay 分隔线与留白分组。
|
||
3. **数字会说话**：连续天数用 Varela 粗圆数字 + 琥珀色，是纸面上唯一的高饱和焦点。
|
||
4. **睡前不打扰**：暖色低刺激、无自动播放动效、reduced-motion 时印章动画退为瞬时状态切换。
|
||
|
||
## 第二遍：AI 味自检与修订
|
||
|
||
逐条对照 frontend-design 的特征清单：
|
||
|
||
1. **暖纸底 + 赤陶色**（tell #1）：色板确实落在暖底+琥珀家族——但这是 MASTER 数据支撑的方向（habit/warm/encouraging 类产品的匹配结果），不是自由轴上的偷懒。修订：用墨夜蓝面板 + clay 厚边 + 印章母题把它做成「手账」而不是「米色落地页」；且琥珀 #D97706 ≠ tell 里的 #D97757 赤陶。**保留，附理由。**
|
||
2. **暗底单酸绿**（tell #2）：否——我们是亮底暖色系。
|
||
3. **报纸 hairline/零圆角**（tell #3）：否——16–24px 圆角 + 3px 厚边是 Claymorphism 要求。
|
||
4. **SaaS 卡片套件**（tell #4）：**修订**——初稿统计页各习惯是独立小卡，已改为满宽行 + 分隔线；全页深色圆卡只保留顶部一枚。
|
||
5. **模板 chrome**（tell #5）：eyebrow/全大写标签/中点连接串/→后缀——全部不出现；标签用句子大小写中文；数据标签不用等宽字体，用 Varela 数字。
|
||
6. **hero = 大数字+小标签+渐变**（默认处理）：**修订**——顶部不是「大数字卡」而是「今日印章」：双圈日戳 + 进度环，数字嵌在章面上；无渐变（craft-floor：渐变文字禁、渐变装饰慎）。
|
||
|
||
## 决策记录（与 MASTER 的冲突裁决）
|
||
|
||
| 冲突 | 裁决 | 依据 |
|
||
|---|---|---|
|
||
| 睡前场景 → 想做全暗色主题 | **不做**，用墨夜蓝面板承载深度 | 裁决表：风格体系是 pro-max 数据轴；暗色 MASTER 标 conditional；「一处重色」也符合 frontend-design 的 boldness 集中原则 |
|
||
| #FAEEE1 边框在暖底上太弱 | 加深派生 #F3E4C8 作 clay 边 | 派生量记入 token 表，不越 MASTER 语义 |
|
||
| 中文无 Varela 对应字 | 数字/拉丁用 Varela，中文系统栈 | 字体 personality 由数字承载（题材：天数与百分比正是主角） |
|
||
| 图标 | 内联 SVG（lucide 线性、圆头、统一 2px 描边） | pro-max：禁 emoji 图标、一套图标一种描边 |
|
||
|
||
**结论：计划相对独特（手账印章世界 + 单一墨章 + clay 手感），可以进入构建。**
|