# RankedByAI 全站 UI/UX 原型 v1 — 改进提案清单（Bet 59）

设计交付物，配套原型站 `design/prototype-v1/`。每条 = 原型中与现状不同的设计决策：**问题（现状）→ 提案 → 理由/对标**。
优先级：P0 直接影响转化/留存；P1 明显体验缺陷；P2 一致性与效率；P3 锦上添花。

对标来源：Peec.ai（主蓝本）、Profound、Linear、Vercel、Stripe 公开页面；规范依据 docs/design-system.md v5、docs/brand-guidelines.md v3.1。

## 全局（G）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| G1 | P0 | 移动端 dashboard 改**底部 tab bar**（Overview/Prompts/Actions/History/Settings） | 现状移动端沿用汉堡+抽屉侧栏，核心分区两次点击才可达 | 移动 SaaS 事实标准；触控目标 ≥44px（规范 §7）；原型所有 dash-* 页已内置 |
| G2 | P1 | 修复闭环升级为一级分区 **Recommendations**，Site Health 检查并入 | 现状修复看板挤在 Overview 内、Site Health 独立成节，闭环被切碎 | 修复→验证是产品最大差异化，应有独立地址可分享/回访；七分区结构与老板要求一致 |
| G3 | P1 | 全站 insight 条（`→ 一句话结论`）作为图表/表格标配 | 部分区块有结论文案，部分没有 | 规范 §7「图表配文字结论」；Profound 每图带 takeaway |
| G4 | P2 | ⌘K 从「页面导航」扩展为**数据实体搜索**（prompts/竞品/报告可搜可跳）+ 动作（Run scan、Re-check、CSV） | 现状 ⌘K 只搜索页面 | Linear ⌘K 模式：命令面板是高频用户的主界面 |
| G5 | P2 | 桌面 1440 下 dashboard 内容列限宽 1180px，防超宽行长 | 现状大屏下表格行长超 90 字符 | 可读性行长 ≤ 75–90ch；Peec 同款限宽 |
| G6 | P3 | 原型内置「标注/网格」查看工具条 | — | 设计评审基础设施，验收时老板可逐页开标注核对 |

## 首页 Landing（H）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| H1 | P1 | Hero 表单降为**单字段起步**（只填 business name，industry/city 第二步渐进披露） | 三字段+高级选项折叠一次性铺开，移动端拥挤、首屏认知负担高 | 表单字段数与转化率负相关；Stripe/Peec 均单字段起步 |
| H2 | P2 | 「See a real report」四步演示改**横向步骤 tab + 单一大截图区** | 四步纵向长卡，占 ~2.5 屏 | Linear 产品导览模式；首页总长从 ~9 屏压到 ~6 屏 |
| H3 | P2 | Features 9 宫格与「AI channels」区**合并为 6 卡精选** | 两区信息重复（渠道解释出现两次） | 每屏一个论点；砍 1/4 页长 |
| H4 | P3 | 收口 CTA 用深底 #0f172a 区块 + emerald-400 强调 | 现状已有深色收口，保留并对齐品牌深色物料语法 | brand-guidelines §4 深色物料统一语法 |

## Pricing（P）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| P1 | P2 | 合并页首双标题（"Simple pricing, honest beta" 与第二个 "Pricing" 眉题区二选一） | 同屏两组标题层级，重复 | 单一 PageHeader；Stripe pricing 单标题 |
| P2 | P2 | Compare plans 表**分组小节头**（扫描与报告/监控/修复闭环）+ 移动端首列粘性 | 17 行全平铺，扫读慢 | Stripe pricing 分组表模式 |
| P3 | P3 | 划线价视觉统一：$0 大字 + 划线原价 faint 小字 + "Free during beta" success 色 | 现状基本如此，原型将三态（现价/原价/说明）定为规范组件 | 防止后续页面各写各的 |

## Benchmark（B）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| B1 | P2 | limited-sample 行业加 **warning badge** 且与大样本行业视觉区隔 | 88.9%（2 scans）与 2.2%（7 scans）同图并列，误导 | 数据诚实是品牌核心（语气原则 §4）；避免被截图断章取义 |
| B2 | P2 | 来源类型改**横向堆叠条 + 色块图例卡**（弃 donut） | 54% vs 5% 的悬殊占比在环图上不可读 | 数值差异大时长度编码优于角度编码（数据可视化基础） |
| B3 | P3 | 行业深挖改 3 列卡网格（样本 badge + KPI + top 域名 chips） | 纵向长列表，对比困难 | 卡片网格可并排对比；Profound benchmark 同款 |

## Docs / Changelog / VS（D）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| D1 | P1 | Docs 首页加**搜索优先 hero**（搜索框 + 热门指南 chips），索引与 ⌘K 共用 | 22 篇指南只能滚动扫描，无搜索 | Vercel/Stripe docs 标准形态；搜索是 docs 第一动作 |
| D2 | P2 | Changelog 加**类型筛选 chips + 左侧月份锚点** | 无筛选无锚点，只能全量下滚 | Linear changelog 模式 |
| D3 | P3 | Docs 页尾加「未解决？」双出口卡（支持邮箱 + 免费扫描） | 页面直接结束 | docs 也是转化面；空态=邀请（语气原则 §6） |
| D4 | P3 | VS 表尾加 **Best for 判定行** + 底部双 CTA（各自最佳场景，含指向对方的） | 对比表结束后无行动指引 | 诚实分流反而提升可信度与转化（对标 Peec 自己的对比页没做，是我们的差异点） |

## 转化域：扫描/报告/Onboarding（S/R/W）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| S1 | **P0** | 扫描等待页重构为**三层可感知进度**：阶段 stepper + 实时计数 + 逐题流式结果表 | 5–10 分钟黑盒等待（仅进度条），漏斗最大流失点 | 等待即演示：Perplexity/Deep Research 流式等待模式；用户边等边理解产品价值 |
| S2 | P1 | 等待页加**留邮箱离开**出口（报告好了邮件送永久链接） | 无离开出口，等不下去=流失 | 把流失点转为 lead 捕获；现有 /api/lead 能力复用 |
| R1 | **P0** | 报告页 **Action plan 前置到第 2 节**（现在在页面最底） | F 级用户最需要「怎么修」，却要滚过 9 节分析才到 | 结论先行+下一步（语气原则 §2）；处方是付费转化的钩子 |
| R2 | P1 | 报告 hero 重排：大等级徽章 + **结论句为第一视觉层**，4 个 KPI 降为次级行 | KPI 平铺在前，结论句藏在 KPI 下方 | 老板/店主 3 秒内要读懂「我什么水平」 |
| R3 | P2 | 竞品两节合并：单表内嵌 SoV 条形，你的行高亮 | 「Who AIs recommend instead」与「You vs competition」分居两节，来回滚动 | Peec 表内 data-bar 模式 |
| R4 | P3 | 90 条 raw answers **按问题分组折叠** + 「只看提到我的」筛选 | 全量渲染，页面 811KB、滚动极长 | 按需展开；顺带改善加载性能与 SEO |
| W1 | P1 | /welcome **网站字段提为第一字段** + Auto-fill 主动作（自动识别名称/行业/城市） | 网站字段在表单中段、可跳过，5 字段手填 | 表单 1+确认代替 5 手填；网站又解锁诊断/处方（价值绑定） |
| W2 | P2 | /welcome 右侧加**价值预告列**（迷你 dashboard + 首扫时间预期 + beta 承诺） | 右侧空白，表单孤零零 | Stripe onboarding 侧栏模式；降低最后一步放弃率 |

## Dashboard（DB）

| # | 优先级 | 提案 | 现状问题 | 理由 / 对标 |
|---|---|---|---|---|
| DB1 | P1 | Overview 瘦身为**单屏 triage**：结论卡 → Problems（预览4条）→ Next actions（top3），完整看板/图表下沉 | Overview 现状 ~5 屏长：起步清单+问题+三列看板+KPI+趋势+竞品+情感全在一页 | 每周回访动作是「看结论→干活」，不是浏览报告；Linear Inbox 理念 |
| DB2 | P1 | Sources 加 **Citation Gap 漏斗**：缺席域名一键生成「建档处方」进 Recommendations | Sources 只有汇总统计，看完没有下一步 | 分析必须闭环到行动（产品北极星）；差异化功能显性化 |
| DB3 | P2 | Competitors 加**对战卡**（head-to-head 逐题 won/lost/both + 反超处方） | 只有汇总榜单，无法回答「我和 X 差在哪」 | Peec 竞品对比深挖模式的 SMB 化 |
| DB4 | P2 | History 加**事件注记**（修复上线/prompt 变更落时间线）+ 两次扫描对比 | 纯链接列表，趋势拐点无法归因 | 归因是续费理由：「你修了 X，提及率 +6pt」 |
| DB5 | P2 | Recommendations 看板 Done 列显示 **verified 徽章与时间**，语义=「re-check 证明的完成」 | done 状态语义模糊 | 把「验证闭环」这一独家能力可视化 |
| DB6 | P3 | 通知设置分三档（周报/等级变化/验证结果） | 只有单一开关 | 减少无效邮件，提高打开率 |

## 汇总

- P0 × 2：S1 扫描等待流式化、R1 报告行动计划前置 — 直接作用于漏斗最痛两点。
- P1 × 8：G1 G2 H1 D1 S2 R2 W1 DB1 DB2。
- P2 × 12 / P3 × 8：一致性、效率与锦上添花。
- 所有决策均可用现有后端能力实现（流式结果=现有 client-side scan 改渲染；Auto-fill=现有 /api/onboard 识别；re-check=现有能力），无需新增基础设施。