7.6 KiB
7.6 KiB
宇之然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 详情页修复（核心闭环，最优先）
- 渲染层兼容：
content字符串按段落/标题解析渲染（服务端或客户端二选一，建议客户端轻量解析，兼容全部 71 条存量数据） sections为空且content为空 → 真正的空态组件；测验options为空 → 隐藏测验区块（不留空白）- 正文排版：17px+/1.8 行距、段间距 24rpx、重点句品牌色强调
- 底部 CTA 换品牌色，文案改"读完了？测一测 / 深挖一步"（衔接问答）
P0-2 问答页去登录墙
- 未登录也显示输入框，游客每日 1~3 次体验额度（服务端按 IP+设备限流）
- 第 2 次起温和引导登录（"登录后每天 5 次"），登录墙从"门"变"斜坡"
- 欢迎卡片重排：视觉重心居中，建议问题改为 2~3 个场景化胶囊（"用大白话解释 Transformer"）
P1-1 首页星图化
- 五维度区升级为星域导航：每域一个进度环（已点亮 X/总数），替换现在的纯色卡片
- 删除"今日已更新 8 条"硬编码文案，换真实统计
- 新增"继续探索"卡片：上次阅读的知识 + 进度（召回入口）
- 今日 streak 火苗入口置顶（游戏化锚点）
P1-2 我的 → 学习者档案
- 头像区：登录态用微信头像；游客态用随机星球插画（替换"用"字）
- 核心数据改为"已点亮星球数 / streak 天数 / 所属星域"，会员卡视觉升级为深空渐变
- 成就/排行榜入口合并为"星途"区块
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》