diff --git a/docs/差异化重构升级方案-2026-09.md b/docs/差异化重构升级方案-2026-09.md new file mode 100644 index 0000000..3ff0bc8 --- /dev/null +++ b/docs/差异化重构升级方案-2026-09.md @@ -0,0 +1,135 @@ +# 宇之然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》