Skip to content

网页优化方案 (评估 · 3 选 1)

版本: v0.6 · 2026-06-16 · T14 评估 适用: PM / 设计 / 客户对接 触发: 用户问 "网页内容很多, 如何优化"

0. 当前问题

  • mkdocs nav 6 大板块 (首页/交接/SOP/工具箱/培训/审计/脚本) 共 24+ 文档
  • 用户首次访问 不知从哪开始
  • 长文档 (RETROSPECTIVE 200+ 行) 难快速 find
  • 7 大功能散落各页, 没突出
  • 内部/外部未分层 (公网可见所有)

1. 方案 A: 导航 + 搜索优化 (1 天)

目标: 提升 findability, 不改内容

改法: 1. mkdocs nav 分层: - 📌 入口: 3 按钮 (新人 / 同事 / 客户) - 📚 文档: 7 类 (SOP / 培训 / 工具 / 审计 / 复盘 / 部署 / 上手) - 🔒 内部 (password-gate): _internal/ (已部分) 2. mkdocs 搜索: 关键字高亮 (默认开了) + 加 fuzzy 搜索 (Pinyin 支持) 3. breadcrumb: 每页顶部 (material theme 默认有, 检查开) 4. 首页: 7 大功能改成 1 屏可看 (现在超长, 要 scroll 2 屏)

ROI: 🟡 中 (改 mkdocs 配置 + nav 重排)

适合: 想快速见效, 不动内容

2. 方案 B: 内容分层 + 摘要 (0.5 天)

目标: 长文档可读性 + 5 分钟读

改法: 1. 每页 frontmatter 加 tl_dr: 30 字摘要 2. 长文档用 pymdownx.details 折叠 (二级章节可折) 3. 首页 + 重要页加 "5 分钟读" 标记 (有 badge) 4. 大表格分行 (现在 RETROSPECTIVE 一行 200 列)

ROI: 🟢 低 (改内容, 不改结构)

适合: 内容成熟, 想提升可读性

3. 方案 C: Landing page 改版 (1-2 天)

目标: 首页重设计, 7 大功能凸显

改法: 1. 首页 hero: 1 句话 + 3 按钮 (Start / Demo / GitHub) 2. 7 大功能挪到 hero 区下方 (3×2 grid + 图标) 3. 减少嵌套深度 (现 4 层 nav → 2 层) 4. 加 "5 分钟上手" 视频/GIF (可选, 估 1 天另算) 5. 视觉: Vercel/Linear 极简 (用 material theme + custom CSS)

ROI: 🟡 中 (改主页 + 视觉, 工作量中)

适合: 推广/品牌/第一印象重要

4. 方案 D: Landing + 3 入口 (推荐, 1.5 天)

目标: 角色化入口, 自动路由

改法: 1. 首页 hero: 1 句话 + 3 大按钮: - 🆕 我是新员工 → 跳 training/01 + D1 任务卡 - 👥 我是同事 → 跳 08_新功能上手指南 + 4 个 quick win - 🤝 我是客户/甲方 → 跳 05_甲方对接 + 12 字段表单 2. 客户端 JS 检测 (User-Agent + IP) → 自动跳对应路径 3. 中间: 7 大功能 + 数字 (3 类业务 / 25 脚本 / 16 SOP / 1750 状态) 4. 底部: 5P0 链接 + 联系 5. 减少 nav 嵌套 (现 4 层 → 2 层)

ROI: 🔴 高 (角色化, 转化率提升)

适合: 用户来源多样 (新人/同事/客户), 转化率是核心

5. 推荐与对比

维度 A 导航搜索 B 内容摘要 C Landing D Landing+3 入口
工作量 1 天 0.5 天 1-2 天 1.5 天
视觉变化 🟢 小 🟢 无 🔴 大 🔴 大
findability 提升 🟡 中 🟡 中 🟢 小 🟡 中
角色化 🟢 无 🟢 无 🟢 无 🔴
转化率 🟢 低 🟢 低 🟡 中 🔴
维护成本 🟢 低 🟡 中 🟡 中 🟡 中

6. 我的推荐

D. Landing + 3 入口 (1.5 天)

理由: - chunx FDE 用户来源 3 类清晰 (新员工 / 同事 / 客户) - 角色化入口减少首次访问迷茫 - 数字 + 7 大功能凸显, 强化"业务生产管理体系"品牌 - ROI 最高

次推: A + B 组合 (1.5 天, 不动主页, 提升 findability + 可读性)

7. 实装细节 (D 方案)

前端 (1 天): - 改 docs/index.md + gen_site_pages.py 重做首页 HTML - Vercel/Linear 风格: hero + 3 按钮 + 中部 7 功能 grid + 底部联系 - 客户端 JS: 检测 User-Agent + LARK cookie → 自动跳转

测试 (0.5 天): - 飞书客户端/Chrome/Safari 三端 - 4 个角色: chunx / 新员工 / 同事 / 客户 - 跳转 5s 内不重复 (cookie 记忆)

回滚: git revert + 改回旧 index.md

8. v0.7+ 后续

  • 1.0+ 加 A/B test (5/5 split, 哪个转化高)
  • 加热力图 (Plausible / Fathom 自托管)
  • 加 SEO (sitemap 已有, 优化 title/description)

9. 用户拍板

下次会话启动时确认: - A / B / C / D / A+B / 其它?

不拍板就默认 D.