# 宇之然AI维度 · 差异化重构升级方案

> 2026-09 · 基于线上截图评审（首页/AI问答/我的/知识详情四页）+ 代码审查 + 生产数据核查
> 暂不开发，本方案为实施蓝图

---

## 一、核心诊断：不是"不好看"，是"核心闭环断裂"

### 1.1 致命缺陷（比视觉问题严重得多）

**① 知识详情页全线空白（功能性 bug）**
- 详情页正文只渲染 `detail.sections` 循环、测验只渲染 `detail.options`（`detail.vue:39-73`）
- 生产库核查：**71 条知识，0 条有 sections、0 条有测验 options**，全部只有 `content` 字符串字段
- 结果：用户从任何入口点进任何一条知识，看到的都是"暂无内容"——**核心阅读体验 100% 断裂**
- 这直接解释了生产数据：28 用户无留存、人均点亮为 0

**② AI 问答登录墙前置（转化 bug）**
- 未登录态问答页**连输入框都不显示**，只有"登录后即可体验"横条
- 用户没有任何免费体验机会 → 生产 AI 问答调用 0 次
- 行业惯例（豆包/ChatGPT/豆包问问）：先给 1~3 次体验，再引导登录

### 1.2 视觉层问题（截图证据）

| 页面 | 具体问题 |
|---|---|
| 首页 | emoji 当图标（🔔👤🔍✦🎁）与 tabBar 的 PNG 图标混用，风格割裂；副文案灰色小字对比度不足；五维度卡片内联样式各自配色，缺乏统一韵律；"今日已更新 8 条"为硬编码假文案；Hero 大标题排版松散 |
| AI 问答 | 欢迎卡片视觉重心偏上、中部大片空白；头像用"∞"字符+💡 emoji；无会话历史/新建对话等常规操作；气泡设计普通 |
| 我的 | "用"字占位头像观感廉价；会员卡灰渐变弱视觉，承担登录+转化双职责却无说服力；功能列表 emoji 图标 |
| 详情 | 底部 CTA"🤖 还有疑问？问问 AI 助手"用蓝→绿渐变，与品牌 Indigo 紫完全冲突；正文排版尚未可用（见 1.1①） |

### 1.3 代码层问题

- **30+ 处硬编码颜色绕过设计 token**：`#b388ff`×15、`#7c4dff`×8、`#ef5350`×7、`#4dd0e1`×7、`#ffa726`×5……是早期 Material 色板残留，与 App.vue 里已系统化的 Indigo 品牌体系（`--color-brand`、`--dim1~5-color`）打架
- **19 个页面全部是 300~570 行单文件巨页**（profile 569 行、chat 469 行、detail 468 行），template/script/style 全塞一个文件，无组件复用层，改一处动全身
- 页面内 9 处 emoji 图标（tabBar 反而已有正规 PNG 图标，本末倒置）

---

## 二、差异化定位

**一句话：5 分钟点亮一颗 AI 知识星球。**

- 对标交叉地带：多邻国（游戏化学习路径）× 豆包（AI 问答），做巨头不做的"轻知识闯关"
- 竞品都是"工具"（问一句答一句），维度做"有进度的知识探索"——这是唯一差异化生存空间（依据双项目方案的竞争分析：通用工具打不过字节矩阵）
- **世界观升级**：五维度 = 五大星域，每条知识 = 一颗星球，"读完 + 答对检测题 = 点亮"，连续点亮 = streak。视觉、交互、文案全部围绕这一个隐喻统一

---

## 三、设计系统 2.0（先立规矩再动页面）

### 3.1 色彩收敛
- 保留 Indigo 品牌色 `#5b5ff8` 为主；五维度色降饱和、只用于"星域标识"（徽章/进度环/光晕），不再整卡刷色
- **删除全部硬编码 Material 色**（30+ 处），统一走 CSS 变量；建立一个 lint 脚本防回归
- 中性色 12 阶（文字 5 阶 + 背景 3 阶 + 边框 2 阶 + 状态色 4 阶）

### 3.2 图标系统
- 统一替换 9 处 emoji 为线性 SVG 图标（uniapp 用 static/icons 或 iconfont，与 tabBar 风格一致），首批 12~16 个：通知/我的/搜索/收藏/星标/火苗(streak)/星球/问答/分享/设置/反馈/成就

### 3.3 深色模式
- 知识阅读类产品夜间场景占比高，token 化之后深色模式成本可控（P2 实施）

### 3.4 基础组件层（拆巨页的前提）
5 个组件覆盖 80% 场景：`KnowledgeCard`（列表卡）、`DimBadge`（维度徽章）、`ProgressRing`（点亮进度环）、`ChatBubble`（问答气泡）、`EmptyState`（空态）——新页面用组件拼装，老页面在重构时逐页替换

---

## 四、页面重构清单（按优先级）

### P0-1 详情页修复（核心闭环，最优先）
1. **渲染层兼容**：`content` 字符串按段落/标题解析渲染（服务端或客户端二选一，建议客户端轻量解析，兼容全部 71 条存量数据）
2. `sections` 为空且 `content` 为空 → 真正的空态组件；测验 `options` 为空 → 隐藏测验区块（不留空白）
3. 正文排版：17px+/1.8 行距、段间距 24rpx、重点句品牌色强调
4. 底部 CTA 换品牌色，文案改"读完了？测一测 / 深挖一步"（衔接问答）

### P0-2 问答页去登录墙
1. 未登录也显示输入框，游客每日 1~3 次体验额度（服务端按 IP+设备限流）
2. 第 2 次起温和引导登录（"登录后每天 5 次"），登录墙从"门"变"斜坡"
3. 欢迎卡片重排：视觉重心居中，建议问题改为 2~3 个场景化胶囊（"用大白话解释 Transformer"）

### P1-1 首页星图化
1. 五维度区升级为**星域导航**：每域一个进度环（已点亮 X/总数），替换现在的纯色卡片
2. 删除"今日已更新 8 条"硬编码文案，换真实统计
3. 新增"继续探索"卡片：上次阅读的知识 + 进度（召回入口）
4. 今日 streak 火苗入口置顶（游戏化锚点）

### P1-2 我的 → 学习者档案
1. 头像区：登录态用微信头像；游客态用随机星球插画（替换"用"字）
2. 核心数据改为"已点亮星球数 / streak 天数 / 所属星域"，会员卡视觉升级为深空渐变
3. 成就/排行榜入口合并为"星途"区块

### P1-3 资讯精简
news 与 trend 两页内容重叠（都是资讯流），合并为一个"AI 快讯"页，释放导航空间

### P2 体验进阶
- 深色模式；AI 导师人格化（固定角色"维度精灵"，统一口吻）；问答结果一键存为知识卡

---

## 五、体验闭环：点亮体系（与双项目方案衔接）

```
读（详情页，P0-1 修复后才有意义）
→ 测（文末 1 道检测题，答对点亮星球）
→ 进度可见（星域进度环 + 我的档案）
→ streak（连续点亮激励，对标 Duolingo 3.6x 留存数据）
→ 排行/成就（复用已有 /leaderboard /achievements 后端）
```

测验题来源：71 条知识用 AI 批量生成检测题 + 人工抽检（服务端已有 `/:dim/questions` 路由骨架）。

---

## 六、实施估时与验收

| 阶段 | 内容 | 估时 |
|---|---|---|
| Phase 1（P0） | 详情页渲染修复 + 问答去登录墙 | 2~3 天 |
| Phase 2（P1） | 设计 token 收敛 + 图标替换 + 首页星图 + 我的档案 | 4~5 天 |
| Phase 3（P2） | 深色模式 + 人格化 + 点亮体系完整闭环 | 3~4 天 |

**验收标准**：
- 71 条知识详情页全部正常显示正文（自动化遍历校验）
- 游客可在不登录状态下完成至少 1 次 AI 问答
- 全仓库硬编码色清零（lint 保证）
- 详情→测验→点亮→档案 全链路可走通
- 目标指标（上线后 3 个月）：三日留存 ≥20%、问答使用率 ≥25%、人均点亮 ≥5 颗星

---

## 附：本次调研证据
- 线上截图评审：首页 / AI问答 / 我的 / 知识详情（2026-09-12，www.wdkj.yuzhiran.com.cn）
- 生产库核查：knowledges 71 条（sections=0、options=0、content=71）
- 代码审查：App.vue token 体系、pages/*.vue 硬编码色统计、detail.vue 渲染逻辑
- 双项目竞争与游戏化调研：见 ai-art 仓库《双项目调研与改造升级方案-2026-09》