wm
b94eb706ff
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
292 lines
23 KiB
Markdown
292 lines
23 KiB
Markdown
# FITCOACH 设计语言重塑提案（v2 暗色动能系统）
|
||
|
||
> 设计师：颜好看 ｜ 日期：2026-07-22 ｜ 寄存器：Product（app UI）｜ 平台：微信小程序（原生）
|
||
> 配套机器可读：`design-system/design-tokens.json`（已产出）
|
||
> 三轴刻度：DESIGN_VARIANCE=5（克制、可预测网格）／ MOTION_INTENSITY=4（状态反馈为主）／ VISUAL_DENSITY=4（日常应用密度）
|
||
|
||
---
|
||
|
||
## 0. 当前视觉审计（暗金奢华风 → 问题清单）
|
||
|
||
我实际通读了 `miniprogram/` 下页面与组件。结论：**当前"暗金奢华"调性与健身教练产品不匹配，且存在大量 P0 级违规（emoji 当图标）、Token 不全（硬编码）、以及 AI 模板味的结构问题。** 逐项如下。
|
||
|
||
### 0.1 P0 级硬伤（违反即退回）
|
||
|
||
| # | 问题 | 位置 | 现状 |
|
||
|---|------|------|------|
|
||
| P0-1a | emoji 当功能图标（首页） | `pages/index/index.wxml` `search-pill__icon`=🔍、`cta__icon`=✨；`quick__emoji`=✨💪🏋️📋🗂️👤；`prog__emoji` | 6 个快捷入口 + 搜索 + CTA 全用 emoji |
|
||
| P0-1b | emoji 当功能图标（导航） | `components/bottom-nav/index.js` 🏠📚📋👤 | 主导航 4 项全 emoji |
|
||
| P0-1c | emoji 当功能图标（个人页/空态/占位） | `profile.wxml` ❤️🗂️⭐📋💪；`favorites/search/my-plans/plan-favorites/plan-detail` 空态 ⭐📋🔍🏋️；`exercise-card`/`detail` 占位 🏋️ | 几乎每页都有 |
|
||
| P0-1d | 收藏切换用字符 ♥/♡ | `detail.wxml` `collection-detail.wxml` | 字符当图标，应换 SVG heart |
|
||
| P0-3a | 硬编码颜色散落 | 全 13 个 wxss 中大量 `#0E1110`、`rgba(229,84,75,…)`、`#fff` 直接写死（见下表） | 改主题要改 N 处，违反"颜色全走 Token" |
|
||
| P0-2 | 当前非紫粉渐变（此项**未违规**，但注意 CTA 用金→浅金渐变 `linear-gradient(135deg, gold, gold-2)` 属"奢华模板味"，新方案去掉） | `index.wxss` `.cta` | 保留为审计备注 |
|
||
|
||
### 0.2 Token 不全 / 硬编码（必须重塑）
|
||
|
||
全量 grep 出的硬编码色值（应下沉为 Token）：
|
||
|
||
```
|
||
pages/index/index.wxss:5 linear-gradient(150deg, #1C2A22 0%, #0E1110 70%) ← hero 背景硬编码
|
||
pages/index/index.wxss:26 color: #0E1110; ← CTA 前景硬编码
|
||
plan-detail.wxss:16,50 rgba(229,84,75,0.92) / #E5544B ← danger 硬编码
|
||
plan-detail.wxss:33,48 color: #0E1110; ← 硬编码
|
||
profile/recommend/my-plans/favorites/plan-edit/detail ... color: #0E1110 ← 同值散落 8+ 处
|
||
exercise-card.wxss:28 color: #0E1110;
|
||
gif-player.wxss:12 var(--gold, #c9a24b) ← 兜底硬编码（可接受但应统一）
|
||
app.wxss:5 --bg-grad: linear-gradient(160deg,#16201B,#0E1110) ← 已有变量，但页面级又重复写
|
||
```
|
||
|
||
**问题归纳**：`app.wxss` 里其实定义了 `--bg/--surface/--gold/--text/--line/--radius` 等，但（1）命名偏"金色语义"（--gold/--gold-2/--gold-soft），不利去奢华化；（2）缺语义色（success/warn/danger）、缺层级阴影、缺字体三族、缺字距/字重规范；（3）页面级普遍不引用 Token 直接写 hex。
|
||
|
||
### 0.3 层级 / 间距 / 字体 / 对比 / 留白 / 动效
|
||
|
||
| 维度 | 现状问题 |
|
||
|------|----------|
|
||
| 层级 | 卡片全靠 `box-shadow: 0 12rpx 40rpx rgba(0,0,0,.35)` 抬升 + 28rpx 大圆角 → "幽灵卡片"（发丝边框 + 大阴影同屏，见绝对禁令 #9）；缺乏"背景递进表达层级" |
|
||
| 间距 | 混用 `40rpx/32rpx/36rpx/28rpx/24rpx/20rpx/18rpx/16rpx/22rpx` 等，无统一尺度（`quick__grid gap:18rpx` 不在 4px 网格；`cta padding:28rpx` 非标） |
|
||
| 字体 | 只用系统 `-apple-system, "PingFang SC", ...`，无 Latin 显示字体、无等宽数据字；Hero 56rpx 与正文 28rpx 跨度大但中间阶梯缺 |
|
||
| 对比 | 正文 `--text-2:#98A39B` 在 `#0E1110` 上约 6.5:1（OK）；但 `--text-3:#6B746D` 仅约 3.3:1，用于次要信息勉强达标，用于小字会吃力 |
|
||
| 留白 | 卡片内边距 28rpx、区块 padding 40rpx 偏挤；Hero 下方直接接内容，缺少节奏呼吸 |
|
||
| 动效 | 几乎无状态动效（hover/active/loading 无反馈）；CTA 有光晕但无按下态；进度/加载无骨架屏 |
|
||
| 结构 | 首页用"全大写英文 eyebrow（FEATURED/PROGRAMS）+ 图标网格 + 横向滑动"结构，偏模板；且 emoji 占位使整页廉价感强 |
|
||
|
||
### 0.4 审计结论
|
||
|
||
当前方案在 **P0-1（emoji 图标）、P0-3（硬编码/模板味）、Token 完整性** 三处不达标，必须重塑。设计语言从"暗金奢华"转向 **「动能暗色 / Kinetic Dark」**：保留深色高级基底，去掉金色奢华语义，换成单一有能量的珊瑚橙强调色 + 发丝边框 + 数据化表达，贴合健身教练的"专业、能量、可信赖"。
|
||
|
||
---
|
||
|
||
## 1. 新设计语言提案：Design Token 草案
|
||
|
||
> 完整机读版见 `design-system/design-tokens.json`。此处给出关键决策与色值。
|
||
|
||
### 1.1 配色（中性 85% ＋ 强调 8% ＋ 语义 5% ＋ 效果 <2%）
|
||
|
||
**基底（A1，冷中性近黑，非纯黑、非绿调奢华）**
|
||
- `--bg:#0B0F0E` 页面背景 ｜ `--surface:#141A18` 卡片 ｜ `--surface-2:#1C2421` 次级表面/chip
|
||
- `--fg:#ECF1EF` 主文本 ｜ `--fg-2:#9BA7A1` 次级 ｜ `--fg-3:#6B7670` 三级（仅用于非关键 meta，且字号≥24rpx）
|
||
- `--border:rgba(255,255,255,.08)` ｜ `--border-strong:rgba(255,255,255,.14)`
|
||
|
||
**强调色（A1，单一品牌色，每屏≤2 处）**
|
||
- `--accent:#FF6A3D` **Pulse 珊瑚橙**（CTA、激活导航、关键数据高亮）
|
||
- 派生：`--accent-hover:#FF8263` / `--accent-active:#E8562B` / `--accent-on:#20100A`（深暖字，橙底上对比>7:1）/ `--accent-soft:rgba(255,106,61,.12)`
|
||
|
||
**语义色（A2，不计入"第二品牌色"——success 用于进度/连续天数这类"正向"语义）**
|
||
- `--success:#2BD9A6`（进度环/连续天数/正向趋势）｜ `--warn:#F2B53D` ｜ `--danger:#FF5C5C`（替代旧 `#E5544B`）｜ `--info:#4FA8FF`
|
||
- 派生 soft 版用于淡底标签
|
||
|
||
**为什么不是紫/粉/金**：紫→粉渐变属 AI 模板红线（P0-2）；金色奢华与"健身教练"调性错位（奢侈感≠专业运动感）；珊瑚橙在深色上能量强、对比足、且与现品牌"暗底"自然衔接，迁移成本低。
|
||
|
||
**备选方向（待 PM 拍板）**：若想要更"运动品牌"的辨识度，可把 accent 换成 **Volt 荧光绿 `#B6F24E`**（Gymshark/Nike 味，更激进）；或 **Ion 青 `#1FD4C4`**（更冷静健康）。本提案默认推荐珊瑚橙。
|
||
|
||
### 1.2 字体（含中文，三族明确）
|
||
|
||
- **显示/标题/数字**：`'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif`
|
||
- Latin 用 **Manrope**（几何、运动感、不在反射拒绝清单）；中文回落系统黑体 —— 小程序不打包 10MB+ CJK 字体，这是真实约束下的最优解。
|
||
- **正文**：`'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif`（中文系统字体优先）
|
||
- **数据/统计**：`'JetBrains Mono', ui-monospace, monospace`（等宽，tabular 数字，用于进度环中心数字、连续天数、历史曲线 Y 轴）
|
||
|
||
**字重三级**：Regular 400（正文）／ Medium 510（按钮、小标题）／ Semibold 590（大标题）。小程序字体若无 510 字重则回落 500。
|
||
|
||
**字距**：eyebrow 全大写 `0.08em`；大标题 `-0.02em`；正文 `0`。
|
||
|
||
### 1.3 字号阶梯（rpx，750rpx=375pt）
|
||
|
||
`xs 22 / sm 24 / base 28 / md 30 / lg 32 / xl 36 / 2xl 44 / 3xl 56(hero) / 4xl 72(巨型数字)`。中间补 `md 30` 让"正文→小标题"过渡平滑（旧方案缺这档）。
|
||
|
||
### 1.4 间距尺度（4px 网格 → rpx 偶数）
|
||
|
||
`8/16/24/32/40/48/64/80/96/128(rpx)`，对应 4–64px。统一替换旧方案里的 `18rpx/22rpx/28rpx/36rpx` 等非标值。区块节奏：桌面/大屏 `section-y = 48rpx`，移动 `32rpx`（小程序默认移动，省略断点差异，但安全区 `env(safe-area-inset-bottom)` 必须在底部导航与吸底按钮处使用）。
|
||
|
||
### 1.5 圆角（收紧，去"过度圆滑"）
|
||
|
||
`sm 16 / md 24 / lg 32 / xl 40 / pill 9999 (rpx)`。卡片用 `md(24rpx=12px)` 或 `lg(32rpx=16px)`，**不再用 28rpx 这种临界值**；chip/pill 用 `pill`。
|
||
|
||
### 1.6 阴影 / 层级（Hairline First）
|
||
|
||
默认卡片 **不用阴影，用 1px 发丝边框**（`--shadow:ring`）。仅悬浮/选中用 `--shadow:raised`；底部导航用 `--shadow:float`；**唯一允许的彩色阴影是 CTA 的 `--shadow:glow`**（珊瑚橙光晕，替代旧金色光晕）。深色模式靠"背景亮度递进"表达层级（`#0B0F0E → #141A18 → #1C2421`），不靠投影。
|
||
|
||
### 1.7 动效（150ms 收敛，无 bounce）
|
||
|
||
`fast 150 / base 200 / slow 300ms`，标准缓动 `cubic-bezier(0.2,0,0,1)`。**禁 bounce/elastic**。所有交互组件补 hover/active 反馈；列表/卡片进入用 ≤300ms 的淡入（勿每节相同动画）。尊重 `prefers-reduced-motion`（小程序通过 `wx.getSystemSetting().reduceMotion` 或 CSS `@media (prefers-reduced-motion: reduce)` 降级）。
|
||
|
||
---
|
||
|
||
## 2. 图标系统：锁定 Lucide（MIT）
|
||
|
||
### 2.1 推荐与理由
|
||
|
||
**锁定一套：`lucide`（MIT，原 Feather 续作）。**
|
||
|
||
| 维度 | 说明 |
|
||
|------|------|
|
||
| 一致性 | 统一 24×24 网格、2px 描边、单线风格 → 缩到 16/20/24 视觉不变形 |
|
||
| 覆盖 | 健身语义齐全：`dumbbell`/`activity`/`flame`/`heart`/`target`/`calendar-check`/`trending-up`/`search`/`user`/`home`/`sparkles` 等 |
|
||
| 许可 | MIT，可子集化编译为 iconfont，无商用风险 |
|
||
| 调性 | 中性、现代、"赢得熟悉感"（Product 寄存器标杆），不像彩色 emoji 那样廉价 |
|
||
| 落地 | 小程序无原生 inline SVG：把**所需子集编译成 iconfont（.ttf/.woff2）**，用 `<text class="fc-icon">` + `font-family` 引用；或 base64 SVG `<image>`。**严禁 emoji** |
|
||
|
||
**为何不选其他**：Remix Icon（含 outline/fill 双风格，可作备选，但双风格易混，先锁 Lucide 单风格）；Radix Icons（集太小、偏开发工具、缺健身图标）；Iconify（聚合器非单一风格，**混用即违反 P0-1"锁定一套"**）。
|
||
|
||
### 2.2 尺寸规范
|
||
|
||
| 用途 | 尺寸 | 示例 |
|
||
|------|------|------|
|
||
| 行内/列表前置 | **16rpx (8px)** | 单元格图标、标签前置 |
|
||
| 按钮内 | **20rpx (10px)** | CTA、次要按钮 |
|
||
| 独立图标/导航 | **24rpx (12px)** | 底部导航、区块图标、空态 |
|
||
|
||
> 注意：小程序 rpx 在 750 基准下 24rpx=12px 物理点；若真机偏小，导航图标可上探到 44–48rpx（见下表映射的视觉权重）。底部导航按平台规范建议视觉区 ~44–48rpx。
|
||
|
||
### 2.3 现有 emoji → Lucide SVG 映射表（全量）
|
||
|
||
| 现有 emoji | 位置 | 语义 | Lucide 图标 | 备注 |
|
||
|-----------|------|------|-------------|------|
|
||
| 🔍 | index 搜索胶囊、search 页、favorites 空态 | 搜索 | `search` / 空态 `search-x` | |
|
||
| ✨ | index CTA、quick"智能推荐" | AI 推荐 | `sparkles` | |
|
||
| 💪 | quick"按部位" | 部位/身体 | `accessibility`（或 `person-standing`） | 不与器械混 |
|
||
| 🏋️ | quick"按器械"、exercise 占位、detail 占位、plan-detail 空态 | 器械/训练 | `dumbbell` | |
|
||
| 📋 | quick"官方计划"、profile"设置"、my-plans 空态 | 计划/列表 | `clipboard-list`（官方计划）/ `settings`（设置） | 两处语义不同，分两个图标 |
|
||
| 🗂️ | quick"我的计划"、profile"我的计划" | 我的计划 | `folder-open` | |
|
||
| 👤 | quick"我的"、bottom-nav"我的" | 个人 | `user` | |
|
||
| 🏠 | bottom-nav"首页" | 首页 | `home` | |
|
||
| 📚 | bottom-nav"分类" | 分类浏览 | `layout-grid` | |
|
||
| ❤️ | profile"收藏"、detail/collection 收藏切换 | 收藏 | `heart`（outline/fill 两态） | 替 ♥/♡ 字符 |
|
||
| ♥ / ♡ | detail、collection-detail 收藏按钮 | 收藏切换 | `heart` | 字符→SVG |
|
||
| ⭐ | profile"成就"、plan-favorites 空态 | 成就/收藏 | `star`（成就）/ `star` outline（空态） | |
|
||
| 🔥 | （个性化档）连续训练天数 | 连击/能量 | `flame` | 新区块用 |
|
||
| 🎯 | （个性化档）今日推荐 | 目标/推荐 | `target` | 新区块用 |
|
||
| ⚡/🌟/🤸/🧘/🥊/🚴/🐯/🦁 | plan-edit / profile 的"emoji 选择器" | 用户自选头像/计划图标 | **保留 emoji 选择器（UGC）** 或迁移到 Lucide 子集 `dumbbell/run/bike/heart/flame/target/yoga/medal` | 见 §2.4 |
|
||
|
||
### 2.4 关于"用户自选 emoji"的边界判定（重要）
|
||
|
||
P0-1 红线的例外是"**emoji 仅允许出现在用户生成内容（UGC）**"。因此：
|
||
|
||
- **plan-edit 的 emoji 选择器、profile 的头像 emoji 选择器**：这是用户表达（UGC），**允许保留 emoji 选择器**。
|
||
- 但：**用所选 emoji 渲染出的"计划图标/头像"若出现在卡片头部（plan-card、collection-detail、plan-detail 的 `header__emoji`）**，它已从"用户输入"变成"界面元素"，长期应迁移到 **SVG 图标选择器**（从 Lucide 取一个运动子集：dumbbell/run/bike/heart/flame/target/yoga/medal/trophy）。
|
||
- **短期方案（MVP）**：保留 UGC emoji 选择器；系统默认图标、所有功能导航、空态、占位、收藏切换 **一律 SVG**。这样 P0-1 在"功能图标"维度完全达标，UGC 例外成立。
|
||
|
||
---
|
||
|
||
## 3. 首页个性化区块视觉草案
|
||
|
||
> 寄存器=Product，故"个性化"不是营销炫技，而是**降低用户启动成本的实用信息密度**。两档按 PM 选定的范围实现。
|
||
|
||
### 3.1 轻量档（Light）：我的计划 · 收藏动作 · 今日推荐
|
||
|
||
**布局顺序**（插入 Hero 之后、精选动作之前，作为"为你"区）：
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ [section-header] 为你准备 action:编辑 │
|
||
│ │
|
||
│ ┌─ 我的计划卡（整卡可点）──────────┐ │
|
||
│ │ 📋 推胸日 · 第 3 周 进行中 │ │ ← clipboard-list 图标 + 状态 pill
|
||
│ │ 今日 6 个动作 · 已完成 2/6 │ │
|
||
│ │ ▓▓▓▓▓▓▓░░░░░ 33% │ │ ← 线性进度条（accent 填充）
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─ 今日推荐（AI 行）──────────────┐ │
|
||
│ │ ✨ 上斜哑铃推胸 │ │ ← sparkles + 动作名
|
||
│ │ 根据你的推胸计划，匹配度 92% │ │ ← 一行理由（具体，非模板）
|
||
│ │ › │ │
|
||
│ └─────────────────────────────────┘ │
|
||
│ │
|
||
│ [section-header] 收藏的动作 action:全部│
|
||
│ ┌────┐ ┌────┐ ┌────┐ ← 横滑缩略卡 │
|
||
│ │ 💪 │ │ 💪 │ │ 💪 │ (dumbbell 占位) │
|
||
│ │名 │ │名 │ │名 │ │
|
||
│ └────┘ └────┘ └────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**卡片样式（轻量档）**
|
||
- 我的计划卡：surface 底 + 1px border（ring），圆角 lg(32rpx)，内边距 space-5(40rpx)；左侧 `clipboard-list` 20rpx 图标 + 计划名（fg，semibold）；右上状态 pill（`进行中`=accent-soft 底 + accent 字，或 `已完成`=success-soft 底 + success 字）；进度条高 8rpx、圆角 pill、track=border、fill=accent，宽度=完成比例。
|
||
- 今日推荐行：与计划卡同容器规格，但左侧用 `sparkles` 20rpx（accent 色）；动作名 fg semibold；理由行 fg-2 24rpx 一行截断；右箭头 `›`（用 SVG `chevron-right`，不字符）。
|
||
- 收藏动作横滑：每张 200rpx 宽，surface 底 + ring，圆角 md；缩略图区 16:10 比例（用 `dumbbell` 占位 SVG 直到真实 GIF 加载），下方动作名 24rpx 单行省略。
|
||
|
||
### 3.2 完整档（Full）：+ 进度环 · 连续天数 · 历史曲线
|
||
|
||
在轻量档顶部追加一个 **「本周概览」卡**（一卡三信息，密度克制）：
|
||
|
||
```
|
||
┌─────────────────────────────────────┐
|
||
│ [section-header] 本周概览 │
|
||
│ ┌─────────────────────────────────┐ │
|
||
│ │ ╭───╮ 连续训练 │ │
|
||
│ │ │ 4 │ 🔥 12 天 │ │ ← 进度环 + 中心数字(4/5)
|
||
│ │ │ ╱5 │ 本周 4/5 次 │ │ 火焰图标+天数(stat)
|
||
│ │ ╰───╯ │ │
|
||
│ │ ──╱╲──╱── 历史曲线(14天) │ │ ← 内联 SVG 面积图
|
||
│ │ 训练时长趋势 ↑ 8% │ │ trending-up + 文案
|
||
│ └─────────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
**视觉表达规范**
|
||
- **进度环**：SVG `<circle>` 双环。track=`border`（1.5px 在 120rpx 直径上≈2px），progress=`accent`（或成功语义绿，当"完成周目标"用 success），`stroke-linecap:round`，转角用 `stroke-dasharray` 动画 300ms 进入。中心数字用 mono 字体、`4xl(72rpx)` 主数 + `sm` 分母。环直径 ~120rpx，整体占卡左侧 1/3。
|
||
- **连续训练天数**：`flame` 24rpx（accent 或 warn 色，不抢进度环）→ 数字 mono `xl(36rpx)` fg semibold → "天" 后缀 fg-2 `sm`。作为小统计块置于环右侧第一行。
|
||
- **历史曲线**：内联 SVG 面积图（宽 ~100%，高 ~120rpx），14 个数据点（近 14 天训练分钟），填充 `accent` 8% 渐变 + 1.5px `accent` 描边线，末端小圆点。X 轴不标注，Y 靠趋势文案"↑ 8%"传达（**不靠颜色单独传达含义**——配文字）。下方一行 `trending-up` 20rpx + "训练时长较上周 +8%"。
|
||
- 整卡：surface + ring，圆角 lg，内边距 space-5；内部用 `divide-y`/间距分组，不嵌套卡片。
|
||
|
||
### 3.3 状态覆盖（两档通用，5 态）
|
||
|
||
| 状态 | 表现 |
|
||
|------|------|
|
||
| Loading | 区块骨架屏（与卡同形的灰色脉冲块，accent-soft 微光） |
|
||
| Empty | 空态：SVG 图标（非 emoji）+ 一句引导（"还没有计划？去挑选一个官方计划"）+ 主按钮（accent） |
|
||
| Error | "网络开小差了" + 重试按钮（ghost） |
|
||
| Populated | 上文布局 |
|
||
| Edge | 计划名超长 → 单行省略；进度 0% → 显示"开始第一次"而非空环；连续天数 0 → 显示"开始你的连击" |
|
||
|
||
---
|
||
|
||
## 4. 反模式自检（13 项视觉清单 ＋ P0 三绝对规则）
|
||
|
||
### 4.1 P0 三绝对规则（逐条）
|
||
|
||
- **P0-1 禁止 emoji 作功能图标**：✅ 本提案**全量替换**功能图标为 Lucide SVG（§2.3 映射 18 处）；仅 UGC 选择器保留 emoji（§2.4 已界定边界）。通过。
|
||
- **P0-2 禁止紫色→粉色渐变**：✅ 新配色无紫无粉；强调色为珊瑚橙 `#FF6A3D`，语义绿 `#2BD9A6` 仅用于正向。**无** `#7C3AED/#A855F7/#EC4899` 任意组合。通过。
|
||
- **P0-3 禁止 AI 模板味**：✅ 颜色**全走 Token**（§1.1，design-tokens.json 机读）；无 "Lorem ipsum"/"Welcome to"；Hero 改为展示真实训练内容（§3 个性化区块即真实数据）；去"全大写英文 eyebrow + 图标网格 + 金渐变 CTA"模板味。通过。
|
||
|
||
### 4.2 十三条视觉清单
|
||
|
||
| # | 检查项 | 本提案 | 结论 |
|
||
|---|--------|--------|------|
|
||
| 1 | 无 emoji 功能图标 | Lucide 全量替换 | ✅ |
|
||
| 2 | 无紫粉渐变 | 珊瑚橙 + 语义绿 | ✅ |
|
||
| 3 | 无 AI 模板味/空洞文案 | 真实数据 Hero、具体按钮文案 | ✅ |
|
||
| 4 | 颜色全走 Token | design-tokens.json，页面级禁止裸 hex（除 #000/#fff 例外，本项目仅 accent-on 用深暖色） | ✅ |
|
||
| 5 | 间距全 4px 网格 | 8/16/24/32/40/48/64/80/96/128 rpx，清掉 18/22/28/36 非标 | ✅ |
|
||
| 6 | 字体三族含中文 | Manrope+PingFang SC（CJK）/ JetBrains Mono（数据） | ✅ |
|
||
| 7 | Hero 真实内容非口号 | 个性化区块承载真实计划/进度/推荐 | ✅ |
|
||
| 8 | 图标库锁定一套+尺寸 16/20/24 | Lucide，§2.2 | ✅ |
|
||
| 9 | 无纯黑/纯灰裸用 | bg `#0B0F0E` 非纯黑；灰带冷调；语义色有 chroma | ✅ |
|
||
| 10 | 对比度 + reduced-motion + 焦点 | fg/fg-2 达标；motion 尊重 reduced；focus-ring accent 3px | ✅（实现期需 audit 复测） |
|
||
| 11 | 安全区 + 触摸目标≥44 | `env(safe-area-inset-bottom)`；图标按钮命中区≥88rpx | ✅ |
|
||
| 12 | 组件 5 态覆盖 | §3.3 loading/empty/error/populated/edge | ✅ |
|
||
| 13 | 每屏强调色≤2 处 | accent(珊瑚橙) 用于 CTA+激活导航；success 仅正向语义；克制 | ✅ |
|
||
|
||
### 4.3 设计时主动规避的 AI 模板禁令（对照绝对禁令）
|
||
|
||
- 侧条纹边框：`border-left>1px` 彩色强调 → **不用**，选中态用 `border-strong` 整圈或 accent-soft 底。
|
||
- 渐变文字 `background-clip:text` → **不用**，强调靠字重/字色。
|
||
- 默认毛玻璃 → 仅底部导航用 `backdrop-filter:blur`（功能目的：内容滚过不刺眼），不作装饰。
|
||
- 幽灵卡片（1px 边框+大阴影同屏）→ **改为 hairline-first**，默认无阴影。
|
||
- 过度圆角（≥24px）→ 卡片上限 16px(32rpx)。
|
||
- 每节相同淡入 → 进入动画匹配内容（进度环转、曲线绘、卡淡入各异）。
|
||
- 奶油/米色默认化 → 基底为冷中性近黑，暖意由 accent 传达。
|
||
|
||
---
|
||
|
||
## 5. 落地建议（给架构师 / 前端）
|
||
|
||
1. **图标**：从 Lucide 取 §2.3 所列子集，用 `iconfont` 工具编译为 `.ttf/.woff2` 放入 `miniprogram/assets/fonts/`，在 `app.wxss` 用 `@font-face` 声明 `fc-icon`；组件用 `<text class="fc-icon fc-icon--20">{{codepoint}}</text>`。需我提供 codepoint 映射表可补。
|
||
2. **Token 注入**：把 `design-tokens.json` 的 color/spacing/radius/shadow 编译进 `app.wxss` 的 `page{}` 变量；fontSize/letterSpacing/motion 同步为 WXSS 变量；JS 侧把字号/色值常量化供 `setData` 用（如动态 `style="background:{{item.color}}22"` 这类应改为 Token 变量）。
|
||
3. **去硬编码**：全局替换 `#0E1110`→`var(--bg)`、`#E5544B`→`var(--danger)`、`rgba(229,84,75,…)`→`var(--danger-soft)` 等（grep 命中见 §0.2）。
|
||
4. **动态色迁移**：`index.wxml` 里 `style="background:{{item.color}}22;color:{{item.color}}"`（训练组合/计划卡按色渲染）应改为从"预设语义色板"取 Token 别名（如 `var(--accent-soft)`），避免任意 hex 注入破坏系统。
|
||
5. **需 PM/架构师确认**：accent 最终色（珊瑚橙 vs Volt 绿 vs Ion 青）；个性化区块选轻量档还是完整档；UGC emoji 选择器是否迁移到 SVG 图标选择器。
|
||
|
||
---
|
||
*文档结束。机读 Token：`design-system/design-tokens.json`。视觉草案可出 SVG 线框（如需我可补 `home-personalization-mockup.svg`）。*
|