39 KiB

Raw Blame History

GEO 官网重构规划方案

文档版本: v1.0 创建日期: 2026-05-19 文档类型: 官网重构规划产品: GEO 平台 (Generative Engine Optimization Platform) 状态: 待评审

一、重构背景与目标

1.1 现状分析

维度	现状	问题
定位	现有官网为"菲西尔智能"公司介绍站	未突出 GEO 产品独立价值主张
内容	以 AI+物业/资管/CRM 为主	缺少 GEO 品牌曝光分析的核心叙事
交互	基础 IntersectionObserver 淡入动效	缺乏沉浸感和品牌记忆点
转化	简单表单 + 假提交逻辑	无真实数据存储和通知机制
SEO/GEO	基础 meta 标签	未针对 AI 搜索引擎做结构化优化

1.2 重构目标

目标	衡量指标
品牌认知	访客 5 秒内理解 GEO 平台核心价值
转化提升	咨询表单提交率 > 5%
沉浸体验	视差滚动 + 动效，平均停留时长 > 2 分钟
AI 可发现	AI 搜索引擎（ChatGPT/Kimi/文心）能准确引用官网内容
SEO 基础	核心关键词 3 个月内进入百度/Google 前 3 页

1.3 核心原则

产品即叙事 -- 官网本身就是 GEO 理念的最佳示范
数据驱动说服 -- 用真实数据场景展示产品价值，而非空洞口号
AI 可读优先 -- 内容结构同时面向人类用户和 AI 搜索引擎
渐进式披露 -- 首屏传递核心价值，滚动逐步展开细节
转化闭环 -- 每个模块都有明确的下一步行动引导

二、官网文案结构与内容规划

2.1 页面规划总览

序号	页面名称	核心职能	URL 路径	优先级
1	首页	吸引注意、传递价值主张、引导转化	`/`	P0
2	产品功能	展示核心功能与使用场景	`/features`	P0
3	定价方案	透明定价、促进转化	`/pricing`	P1
4	博客/资源	SEO/GEO 内容营销、行业洞察	`/blog`	P1
5	关于我们	建立信任、团队与愿景	`/about`	P2

说明: 采用多页面架构而非单页应用，每个页面有独立的 URL、title 和 meta 信息，有利于 SEO 和 AI 搜索引擎索引。首页作为核心转化页面，包含最完整的内容叙事。

2.2 首页文案结构

首页
├── 1.1 导航栏 (Navigation)
├── 1.2 Hero 区域 (首屏)
├── 1.3 时代变革 (为什么 GEO 很重要)
├── 1.4 核心功能展示 (产品能力)
├── 1.5 工作原理 (如何运作)
├── 1.6 竞品对比场景 (差异化价值)
├── 1.7 客户证言 (社会证明)
├── 1.8 定价预览 (转化引导)
├── 1.9 常见问题 (消除疑虑)
├── 1.10 最终 CTA (转化收口)
└── 1.11 页脚 (Footer)

1.1 导航栏

元素	内容
Logo	GEO 平台 Logo + 文字
导航链接	功能 · 定价 · 资源 · 关于
主 CTA	免费试用
次 CTA	预约演示

1.2 Hero 区域（首屏）

主标题:

你的品牌，AI 推荐了吗？

副标题:

GEO 平台 -- 实时监控品牌在 AI 搜索中的曝光表现，看清竞争格局，获取行动建议，让品牌在 AI 时代被看见。

主 CTA 按钮: 免费开始监测

次 CTA 按钮: 预约产品演示

视觉元素: 全屏背景 -- 模拟 AI 搜索界面，搜索框中输入品牌名，AI 回答中品牌名高亮/未高亮的对比动效。

数据指标条:

指标	数值
覆盖 AI 平台	8+
监控查询词	10,000+
品牌引用分析	实时
部署时间	5 分钟

SEO/GEO 优化要点:

<title> 标签: GEO平台 - 品牌AI搜索曝光度分析 | 让品牌在AI时代被看见
<meta name="description">: 包含核心关键词 "GEO"、"品牌AI曝光"、"AI搜索优化"、"竞品对比"
<h1> 标签仅使用一次，包含主关键词
Schema.org 结构化数据: SoftwareApplication + Organization

1.3 时代变革模块

章节标题: 搜索变了，品牌曝光的逻辑也变了

章节副标题: 60% 的 Z 世代已转向 AI 搜索。当用户问 AI "推荐一个好用的项目管理工具"，你的品牌会出现吗？

三列对比卡片:

传统 SEO 时代	AI 搜索时代 (GEO)	你的现状
用户搜索关键词	用户用自然语言提问	你还在优化关键词排名？
品牌出现在搜索结果列表	品牌被 AI 引用或忽略	你知道 AI 有没有提到你吗？
排名决定曝光	AI 的引用决定曝光	你知道竞品被引用了多少次吗？
SEO 工具可以监测	没有专门的监测工具	你用什么来衡量 AI 渠道的效果？

核心洞察框:

SEO 让你在搜索结果中被找到。GEO 让你在 AI 回答中被推荐。

SEO/GEO 优化要点:

使用 <h2> 标签，包含 "AI搜索" "GEO" 等关键词
对比表格使用语义化 <table> 标签，AI 搜索引擎可解析
添加 FAQPage Schema，便于 AI 直接引用

1.4 核心功能展示

章节标题: 五大核心能力，掌控品牌 AI 曝光

章节副标题: 从监控到行动，一站式 GEO 解决方案

功能卡片（5 张）:

序号	功能名称	核心文案	视觉元素
01	品牌健康监控	实时评估品牌在各大 AI 平台的曝光表现，健康评分一目了然。就像给品牌做 AI 体检，哪里强、哪里弱，一眼看清。	仪表盘截图/动效，健康分数从红变绿
02	竞品对比	了解与竞品在 AI 搜索中的差距。谁被 AI 提及更多？谁的推荐排名更靠前？数据说话，不用猜。	雷达图/对比柱状图动效
03	AI 引用分析	品牌被哪些 AI 平台提及？在什么场景下被引用？引用内容是正面还是中性？全链路追踪。	AI 对话气泡动效，品牌名高亮
04	查询词效果追踪	追踪核心查询词下品牌的曝光变化。哪些词带来了 AI 推荐？哪些词被竞品占据？精准定位优化方向。	搜索词云 + 趋势线动效
05	智能行动建议	不只告诉你问题在哪，还告诉你怎么做。基于数据生成可执行的优化建议，从诊断到行动一步到位。	行动卡片依次展开动效

SEO/GEO 优化要点:

每个功能使用 <h3> 标签，包含功能名 + 核心关键词
功能描述使用 <article> 标签包裹，增加语义权重
添加 SoftwareApplication.features Schema

1.5 工作原理

章节标题: 三步开始，5 分钟上手

步骤展示:

步骤	标题	描述
Step 1	输入品牌名称	输入你的品牌，系统自动识别竞品和监控平台
Step 2	获取健康报告	AI 自动分析品牌在 8+ 平台的曝光表现，生成健康评分
Step 3	获取行动建议	基于数据生成可执行的优化建议，持续追踪效果

视觉: 横向时间线，每步配有产品界面截图/动效，滚动时逐步展开。

1.6 竞品对比场景

章节标题: 别人被 AI 推荐，你被 AI 忽略？

场景描述:

当用户问 Kimi："推荐一个好用的项目管理工具"，竞品 A 被推荐了 3 次，你的品牌 0 次提及。当用户问文心一言："XX 行业哪个品牌好"，竞品 B 排在推荐第一位，你不在列表里。

交互元素: 模拟 AI 搜索对话界面，用户可切换不同 AI 平台和查询词，实时看到品牌 vs 竞品的引用差异。

数据展示:

指标	你的品牌	竞品 A	竞品 B
AI 引用次数	12	45	38
推荐排名	未进入前 5	#2	#3
正面提及率	67%	82%	75%

1.7 客户证言

章节标题: 他们已经在用 GEO 平台

证言卡片结构:

元素	内容
客户 Logo	品牌方 Logo
客户信息	姓名 · 职位 · 公司
证言内容	真实使用反馈
关键指标	使用后提升的具体数据

示例证言（待替换为真实客户）:

客户	证言
某消费品品牌市场总监	"用了 GEO 平台才发现，我们在 Kimi 上的曝光几乎为零。调整内容策略后，AI 引用率提升了 200%。"
某科技公司品牌负责人	"以前只知道做 SEO，现在终于有工具能监测 AI 渠道了。竞品对比功能太实用了。"

SEO/GEO 优化要点:

使用 Review + Organization Schema 标记客户证言
证言内容包含行业关键词，提升 AI 引用概率

1.8 定价预览

章节标题: 透明定价，按需选择

三档定价卡片:

方案	价格	核心权益	目标用户
入门版	免费	1 个品牌 · 基础监控 · 周报	初步了解 AI 曝光的用户
专业版	999 元/月	3 个品牌 · 全平台监控 · 竞品对比 · 行动建议	品牌市场部门
企业版	联系我们	无限品牌 · 高级分析 · API 接入 · 专属客户成功	大型企业

CTA: 每个方案下方放置对应按钮（免费开始 / 立即订阅 / 联系销售）

1.9 常见问题

章节标题: 常见问题

FAQ 列表（6-8 条）:

问题	回答要点
GEO 和 SEO 有什么区别？	SEO 优化搜索引擎排名，GEO 优化 AI 搜索中的品牌引用。两者互补，但逻辑不同。
GEO 平台支持哪些 AI 平台？	文心一言、Kimi、通义千问、豆包、讯飞星火、天工 AI、智谱清言、Perplexity 等 8+ 平台。
需要技术团队配合吗？	不需要。5 分钟注册，输入品牌名即可开始监测。
数据更新频率是多少？	核心指标实时更新，详细报告每日刷新。
免费版有什么限制？	免费版支持 1 个品牌的基础监控和周报，适合初步体验。
如何保证数据的准确性？	我们直接调用各 AI 平台 API，结合语义分析引擎，确保引用检测的准确率 > 95%。

SEO/GEO 优化要点:

使用 FAQPage Schema 标记，这是 AI 搜索引擎最常引用的结构化数据
问题和回答使用 <details>/<summary> 或 Q&A 语义标签
FAQ 内容覆盖用户最可能向 AI 提问的问题

1.10 最终 CTA

章节标题: 现在，看看你的品牌在 AI 中是什么位置

副标题: 5 分钟免费检测，无需信用卡

CTA 按钮: 免费开始监测

信任元素: "已有 500+ 品牌在使用" · "无需信用卡" · "5 分钟上手"

1.11 页脚

区域	内容
品牌信息	GEO 平台 Logo · 一句话介绍 · 社交媒体链接
产品	功能 · 定价 · 更新日志 · API 文档
资源	博客 · 帮助中心 · GEO 指南 · 行业报告
公司	关于我们 · 联系我们 · 招聘 · 合作伙伴
法律	隐私政策 · 服务条款 · ICP 备案
底部	Copyright · 备案号

2.3 产品功能页文案结构

产品功能页
├── 2.1 页面标题区
├── 2.2 功能总览导航
├── 2.3 品牌健康监控详情
├── 2.4 竞品对比详情
├── 2.5 AI 引用分析详情
├── 2.6 查询词效果追踪详情
├── 2.7 智能行动建议详情
├── 2.8 平台覆盖展示
└── 2.9 功能页 CTA

页面标题: 五大核心能力

页面副标题: 从品牌监控到行动优化，GEO 平台提供完整的 AI 搜索曝光管理方案

每个功能详情模块包含:

功能标题 + 一句话描述
产品界面截图/GIF 演示
3-4 个使用场景
关键指标展示
相关功能交叉引用

平台覆盖展示:

AI 平台	Logo	监控能力
文心一言	Logo	品牌引用 · 推荐排名 · 语义分析
Kimi	Logo	品牌引用 · 推荐排名 · 语义分析
通义千问	Logo	品牌引用 · 推荐排名 · 语义分析
豆包	Logo	品牌引用 · 推荐排名 · 语义分析
讯飞星火	Logo	品牌引用 · 推荐排名 · 语义分析
天工 AI	Logo	品牌引用 · 推荐排名 · 语义分析
智谱清言	Logo	品牌引用 · 推荐排名 · 语义分析
Perplexity	Logo	品牌引用 · 推荐排名 · 语义分析

SEO/GEO 优化要点:

URL: /features -- 简洁、包含关键词
每个功能模块使用 <section> + id 锚点，支持深度链接
添加 SoftwareApplication Schema，featureList 字段列出所有功能

2.4 定价页文案结构

定价页
├── 4.1 页面标题区
├── 4.2 定价方案对比
├── 4.3 功能对比表
├── 4.4 常见问题（定价相关）
└── 4.5 定价页 CTA

页面标题: 选择适合你的方案

页面副标题: 从免费体验到企业定制，灵活选择

定价方案对比: 同首页 1.8，但增加完整功能对比表

功能对比表:

功能	入门版	专业版	企业版
监控品牌数	1	3	无限
AI 平台覆盖	3 个	全部 8+	全部 8+
竞品对比	-	5 个竞品	无限
AI 引用分析	基础	完整	完整 + 自定义
查询词追踪	10 个	100 个	无限
行动建议	-	智能建议	定制化建议
报告导出	-	PDF/Excel	PDF/Excel/API
数据更新	周更新	日更新	实时
API 接入	-	-	包含
专属客户成功	-	-	包含

SEO/GEO 优化要点:

添加 OfferCatalog Schema，便于 AI 搜索引擎展示定价信息
定价信息使用语义化标记，AI 可直接引用

2.5 博客/资源页文案结构

博客/资源页
├── 5.1 页面标题区
├── 5.2 分类导航
├── 5.3 精选文章
├── 5.4 文章列表
└── 5.5 订阅 CTA

内容分类:

分类	内容方向	GEO 价值
GEO 指南	GEO 概念解读、优化方法论	建立专业权威，AI 引用率高
行业报告	AI 搜索趋势、品牌曝光数据报告	数据驱动内容，媒体引用价值
产品更新	新功能发布、版本更新日志	展示产品活跃度
案例分析	客户成功案例、优化实战	转化说服力
AI 平台动态	各 AI 平台更新、算法变化	时效性内容，SEO 流量入口

SEO/GEO 优化要点:

每篇文章独立 URL，包含关键词 slug（如 /blog/what-is-geo）
文章使用 Article Schema + author + datePublished
文章末尾添加结构化摘要框，便于 AI 引用
内链策略：文章间交叉引用，提升页面权重

重点文章规划（首发内容）:

优先级	文章标题	目标关键词
P0	什么是 GEO？AI 搜索时代的品牌优化指南	GEO、生成式引擎优化
P0	2026 年中国 AI 搜索市场报告	AI 搜索趋势、品牌曝光
P1	SEO vs GEO：两个时代的品牌曝光逻辑	SEO vs GEO
P1	如何提升品牌在 Kimi/文心一言中的推荐率	AI 搜索优化
P2	5 个 GEO 优化实操技巧	GEO 优化方法

2.6 关于我们页文案结构

关于我们页
├── 6.1 页面标题区
├── 6.2 公司介绍
├── 6.3 愿景与使命
├── 6.4 核心团队
├── 6.5 联系方式
└── 6.6 页脚

页面标题: 关于 GEO 平台

公司介绍:

GEO 平台由上海菲西尔智能科技有限公司打造，是中国领先的 AI 搜索品牌曝光分析平台。我们帮助企业监测、分析并优化品牌在各大 AI 搜索引擎中的曝光表现，让品牌在 AI 时代被看见。

愿景: 让每一个品牌都能在 AI 搜索中占据有利位置

使命: 成为中国企业首选的 AI 时代品牌认知管理平台

SEO/GEO 优化要点:

添加 Organization Schema，包含公司名、地址、联系方式
团队成员使用 Person Schema
页面内容包含公司全称、地址等结构化信息，便于 AI 引用

2.7 全站 SEO/GEO 优化策略

2.7.1 技术 SEO 基础

项目	实施方案
站点地图	自动生成 `sitemap.xml`，提交至百度/Google
Robots.txt	允许所有搜索引擎爬取，屏蔽 `/api/` 路径
Canonical URL	每个页面设置规范 URL
Open Graph	每个页面设置 OG 标签，优化社交分享
页面速度	LCP < 2.5s，FID < 100ms，CLS < 0.1
移动适配	响应式设计，移动端优先索引
HTTPS	全站 HTTPS
结构化数据	每页至少一种 Schema.org 标记

2.7.2 GEO 专项优化（让 AI 搜索引擎找到我们）

核心原则: AI 搜索引擎（ChatGPT、Kimi、文心一言等）通过理解网页内容来回答用户问题。我们的内容需要结构化、权威、易于被 AI 解析和引用。

策略	具体实施
结构化内容	使用 FAQ、HowTo、Article 等 Schema，AI 可直接提取答案
权威引用	在内容中引用第三方数据源（Gartner、Forrester 等），增加可信度
概念定义	对 "GEO"、"AI搜索优化" 等概念给出明确定义，AI 倾向引用有清晰定义的内容
数据驱动	发布含具体数据的行业报告，AI 偏好引用有数据支撑的内容
内容深度	每个核心话题提供 2000+ 字的深度内容，而非碎片化短文
多格式	同一内容提供文本、表格、列表等多种格式，适配不同 AI 的解析偏好
引用标记	使用 `<cite>` 和 blockquote 标记引用内容，增加语义权重
实体标记	使用 `sameAs` 关联官方社交账号，建立实体可信度

2.7.3 关键词策略

关键词类型	示例	目标页面
核心词	GEO、GEO优化、AI搜索优化	首页
长尾词	品牌AI曝光分析、AI搜索品牌监控	功能页
问题词	什么是GEO、如何提升AI搜索曝光	博客
竞品词	Semrush替代、Ahrefs中文替代	定价页
品牌词	GEO平台、菲西尔GEO	全站

三、视觉呈现方案

3.1 视差滚动技术选型

方案	优势	劣势	推荐度
GSAP + ScrollTrigger	生态成熟、文档完善、性能优秀、与 React/Next.js 集成好、社区活跃	包体积较大（~30KB gzipped）	强烈推荐
Lenis + GSAP	Lenis 提供丝滑滚动体验，与 GSAP 配合好	需要两个库，增加复杂度	推荐
Locomotive Scroll	内置平滑滚动 + 视差、轻量	社区较小、维护节奏不稳定、与 Next.js 集成有坑	不推荐
纯 CSS 视差	零依赖、性能最好	效果有限、兼容性差、无法实现复杂交互	不推荐
Framer Motion	React 生态原生、API 友好	滚动驱动动画能力不如 GSAP、包体积大	备选

最终推荐: GSAP ScrollTrigger

理由:

ScrollTrigger 是业界最成熟的滚动动画方案，文档和社区资源丰富
与项目现有的 Next.js 前端框架完美集成（通过 useGSAP hook）
性能优秀，支持 GPU 加速和 will-change 优化
可实现从简单视差到复杂时间线动画的全场景覆盖
免费用于标准 Web 项目

技术实现要点:

使用 @gsap/react 的 useGSAP hook 管理 React 生命周期
所有动画属性使用 x/y/scale/opacity 等 GPU 加速属性，避免触发 layout
设置 scrub: true 实现滚动驱动的平滑过渡
使用 pin: true 实现粘性定位效果
移动端降级：视差效果在移动端简化为淡入/位移，避免性能问题

3.2 视差滚动优秀参考案例

案例	URL	核心亮点	可借鉴点
Apple Mac Pro	apple.com/mac-pro	全屏视差 + 3D 旋转 + 滚动驱动叙事	产品 360 度展示、滚动节奏控制、章节过渡
Linear	linear.app	克制优雅的微动效 + 视差文字 + 渐进式披露	科技感排版、功能卡片滚动展开、性能优化
Locomotive.ca	locomotive.ca	经典视差滚动 + 大胆排版 + 沉浸式叙事	全屏图片视差、文字层叠效果、章节切换动效
Awwwards - Raycast	raycast.com	功能展示滚动动效 + 交互式产品演示	功能卡片依次展开、代码/界面实时切换动效
Stripe	stripe.com	渐变背景视差 + 数据可视化动效 + 微交互	数据流动效、渐变色滚动变化、信任感设计

3.3 每个页面的视觉动效规划

3.3.1 首页动效规划

模块	动效类型	具体效果	技术实现
Hero	视差 + 动画	背景层（AI 搜索界面模拟）以 0.3x 速度滚动；文字层以 0.7x 速度上移；数据指标条从底部滑入；搜索框打字机效果	GSAP ScrollTrigger pin + scrub
时代变革	视差 + 对比切换	三列卡片从左右交错滑入；传统 vs AI 对比表格随滚动逐行高亮；背景渐变从暖色过渡到冷色	GSAP stagger + ScrollTrigger
核心功能	粘性滚动 + 依次展开	功能区域 pin 住，滚动时 5 张功能卡片依次从右侧滑入、展开、滑出；每张卡片配有产品界面动效	GSAP pin + timeline + scrub
工作原理	横向时间线	垂直滚动驱动横向时间线移动；三步流程从左到右依次展开，每步配有界面截图淡入	GSAP horizontal scroll
竞品对比	交互式模拟	模拟 AI 搜索对话界面，滚动时"搜索"自动触发，AI 回答逐字出现；品牌名高亮/竞品名高亮形成视觉对比	GSAP text animation + ScrollTrigger
客户证言	视差 + 轮播	证言卡片以不同速度横向滚动（视差层叠效果）；滚动到视口时卡片放大到焦点位	GSAP horizontal parallax
定价预览	淡入 + 悬浮	三档定价卡片从底部交错淡入；hover 时卡片上浮 + 光晕效果	GSAP stagger + CSS hover
FAQ	手风琴 + 视差	问题列表随滚动逐个淡入；展开/收起使用平滑高度动画	GSAP height animation
最终 CTA	粘性 + 脉冲	CTA 区域 pin 住 2 秒；按钮有脉冲光晕效果；背景粒子加速汇聚	GSAP pin + CSS animation

背景全局动效:

深色主背景 + 流动渐变光晕（蓝紫色调，与现有品牌色系一致）
网格线背景，随滚动微弱位移
粒子效果：缓慢上浮的蓝色光点，数量随滚动增加
章节间过渡：发光分割线，滚动到时从中心向两侧展开

3.3.2 产品功能页动效规划

模块	动效类型	具体效果
页面标题区	视差	标题文字大号视差，背景产品界面模糊视差
功能详情	粘性滚动 + 界面演示	每个功能区域 pin 住，左侧文字描述，右侧产品界面截图/动效同步切换
平台覆盖	网格动效	AI 平台 Logo 网格，滚动时从中心向外扩散出现；hover 时 Logo 放大 + 平台信息浮层

3.3.3 定价页动效规划

模块	动效类型	具体效果
定价卡片	视差 + 悬浮	三档卡片从底部交错淡入；推荐方案（专业版）略微放大 + 边框光晕
功能对比表	滚动展开	表格随滚动逐行淡入；勾选/横线图标有微动效
CTA	脉冲	按钮脉冲光晕

3.3.4 博客页动效规划

模块	动效类型	具体效果
文章卡片	瀑布流 + 淡入	卡片交错淡入；hover 时上浮 + 阴影加深
文章详情	阅读进度 + 视差	顶部阅读进度条；文章内图片视差；代码块/引用块滑入

3.3.5 关于我们页动效规划

模块	动效类型	具体效果
公司介绍	视差 + 渐变	文字视差滚动；背景从深蓝渐变到深紫
团队成员	卡片翻转	hover 时卡片翻转显示详细信息

3.4 视觉设计规范

维度	规范
主色调	深色背景 `#0a0a0a` + 蓝色强调 `#3b82f6`（延续现有品牌色系）
辅助色	紫色 `#8b5cf6`（渐变过渡）、绿色 `#22c55e`（健康/正面指标）、红色 `#ef4444`（警告/负面指标）
字体	英文: Space Grotesk（标题）+ Inter（正文）；中文: Noto Sans SC
标题字号	Hero: clamp(48px, 8vw, 88px)；章节: clamp(32px, 5vw, 56px)；模块: 24px
正文字号	16px，行高 1.7
间距	模块间距: clamp(80px, 12vw, 160px)；容器最大宽: 1200px
圆角	卡片: 12px；按钮: 8px；标签: 100px
动效时长	快: 0.3s；中: 0.6s；慢: 1.2s；滚动驱动: scrub 模式
缓动函数	`power2.out`（淡入）、`power3.inOut`（位移）、`elastic.out(1, 0.5)`（弹跳）

四、客户咨询模块规划

4.1 咨询引导 UI 设计

4.1.1 入口设计

入口位置	形式	触发条件
导航栏右侧	"预约演示" 按钮	始终可见
首页 Hero	"免费开始监测" 主 CTA	始终可见
首页最终 CTA	"免费开始监测" 按钮	滚动到底部时
右下角浮动	圆形按钮 + "咨询" 文字	页面滚动超过 1 屏后出现
定价页	"联系销售" 按钮	企业版方案
退出意图	弹窗	检测鼠标移向浏览器顶部（桌面端）
停留超时	侧边滑出卡片	页面停留 > 30 秒未操作

4.1.2 咨询表单交互流程

点击咨询入口
    │
    ▼
┌─────────────────────────┐
│  选择咨询类型            │
│  ○ 免费试用             │
│  ○ 预约产品演示         │
│  ○ 企业方案咨询         │
│  ○ 其他                 │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  填写咨询表单            │
│  (根据咨询类型动态调整)   │
└─────────────────────────┘
    │
    ▼
┌─────────────────────────┐
│  提交成功                │
│  + 预计回复时间          │
│  + 添加企业微信          │
└─────────────────────────┘

4.1.3 表单展示方式

场景	展示方式
导航栏/浮动按钮点击	右侧滑出抽屉（Drawer），不离开当前页面
页面内 CTA	滚动到页面内嵌表单区域
退出意图弹窗	居中弹窗（Modal），简化版表单（仅 3 个必填字段）

4.2 咨询表单字段设计

4.2.1 完整版表单（页面内嵌 / Drawer）

字段名	字段标识	类型	必填	验证规则	占位提示
咨询类型	`consult_type`	单选	是	枚举值校验	免费试用 / 预约演示 / 企业咨询 / 其他
公司名称	`company_name`	文本	是	2-100 字符	请输入公司名称
您的姓名	`contact_name`	文本	是	2-50 字符	请输入您的姓名
职位	`job_title`	文本	否	0-100 字符	如：市场总监、品牌经理
邮箱	`email`	邮箱	是	标准邮箱格式	name@company.com
手机号码	`phone`	手机号	是	11 位手机号	138xxxx8888
品牌名称	`brand_name`	文本	否	0-100 字符	您想监测的品牌名称
行业	`industry`	下拉	否	枚举值	互联网 / 消费品 / 金融 / 制造 / 其他
需求描述	`description`	文本区	否	0-500 字符	简单描述您的需求或想了解的内容
来源渠道	`utm_source`	隐藏	-	自动填充	URL 参数自动采集
来源媒介	`utm_medium`	隐藏	-	自动填充	URL 参数自动采集
来源活动	`utm_campaign`	隐藏	-	自动填充	URL 参数自动采集
页面路径	`page_path`	隐藏	-	自动填充	当前页面 URL

4.2.2 简化版表单（退出弹窗）

字段名	类型	必填	占位提示
公司名称	文本	是	请输入公司名称
您的姓名	文本	是	请输入您的姓名
手机号码	手机号	是	138xxxx8888

4.2.3 表单交互细节

交互	实现
实时验证	输入时验证格式，错误时字段下方红色提示
提交防重复	提交后按钮置灰 + loading 状态，5 秒内不可重复提交
成功反馈	提交成功后显示确认页面 + 预计回复时间 + 企业微信二维码
失败反馈	网络错误时提示"请稍后重试"，保留已填写内容
数据持久化	未提交的表单内容自动保存到 localStorage，刷新不丢失
隐私声明	表单下方显示"提交即表示同意隐私政策"链接

4.3 数据存储方案

4.3.1 推荐方案: 飞书多维表格 + 后端数据库双写

架构:

用户提交表单
    │
    ▼
前端表单验证
    │
    ▼
GEO 后端 API (/api/v1/consultations)
    │
    ├──────► PostgreSQL 数据库 (主存储)
    │         consultations 表
    │
    └──────► 飞书多维表格 (同步写入)
              销售团队直接在飞书查看/跟进

为什么双写:

PostgreSQL: 作为主数据存储，支持复杂查询、数据关联、统计分析
飞书多维表格: 销售团队无需登录后台即可查看和跟进，降低协作成本

4.3.2 PostgreSQL 数据库表设计

CREATE TABLE consultations (
    id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    consult_type    VARCHAR(20) NOT NULL,     -- 'trial' / 'demo' / 'enterprise' / 'other'
    company_name    VARCHAR(100) NOT NULL,
    contact_name    VARCHAR(50) NOT NULL,
    job_title       VARCHAR(100),
    email           VARCHAR(255) NOT NULL,
    phone           VARCHAR(20) NOT NULL,
    brand_name      VARCHAR(100),
    industry        VARCHAR(50),
    description     TEXT,
    utm_source      VARCHAR(100),
    utm_medium      VARCHAR(100),
    utm_campaign    VARCHAR(100),
    page_path       VARCHAR(500),
    status          VARCHAR(20) DEFAULT 'pending',  -- 'pending' / 'contacted' / 'qualified' / 'closed'
    assigned_to     UUID REFERENCES users(id),
    created_at      TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at      TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

CREATE INDEX idx_consultations_status ON consultations(status);
CREATE INDEX idx_consultations_created_at ON consultations(created_at);
CREATE INDEX idx_consultations_email ON consultations(email);

4.3.3 飞书多维表格配置

配置项	说明
多维表格名称	GEO 平台 - 客户咨询
字段映射	与数据库字段一一对应
视图	默认视图：按创建时间倒序；待跟进视图：status = pending；已跟进视图：status = contacted
自动化	新增记录时触发通知（见 4.4）
权限	销售团队可编辑；产品团队只读

飞书多维表格字段设计:

字段名	类型	说明
咨询类型	单选	免费试用 / 预约演示 / 企业咨询 / 其他
公司名称	文本
联系人	文本
职位	文本
邮箱	文本
手机	文本
品牌名称	文本
行业	单选
需求描述	文本
来源	文本	UTM 信息组合
状态	单选	待跟进 / 已联系 / 已合格 / 已关闭
负责人	人员	飞书用户
创建时间	创建时间	自动
跟进记录	文本	销售手动填写

4.4 自动通知机制

4.4.1 通知架构

用户提交咨询
    │
    ▼
后端 API 处理
    │
    ├──────► 写入数据库
    │
    ├──────► 写入飞书多维表格
    │
    ├──────► 触发飞书机器人通知
    │         ├─ 销售群组通知（群消息）
    │         └─ 负责人私聊通知
    │
    ├──────► 触发邮件通知
    │         └─ 销售团队邮箱组
    │
    └──────► 触发用户确认邮件
              └─ 自动回复：已收到咨询，预计 24 小时内联系

4.4.2 飞书通知详情

群组通知（飞书机器人 Webhook）:

[GEO 平台] 新客户咨询

咨询类型: 预约产品演示
公司名称: XX 科技有限公司
联系人: 张明
职位: 市场总监
手机: 138xxxx8888
邮箱: zhangming@xx.com
品牌名称: XX科技
行业: 互联网
需求描述: 想了解 GEO 平台的企业版功能

来源渠道: 百度搜索 / organic
提交时间: 2026-05-19 14:30:00

[查看详情] [分配给我] [标记已联系]

通知规则:

规则	条件	动作
即时通知	每条新咨询	飞书群消息 + 邮件
超时提醒	咨询 > 2 小时未跟进	飞书群 @销售负责人
每日汇总	每天 9:00	飞书群发送前一日咨询汇总
高价值标记	企业咨询类型	飞书群 @全体销售 + 高亮标记

4.4.3 用户自动回复邮件

邮件模板:

主题: 已收到您的咨询 - GEO 平台

您好，{contact_name}：

感谢您对 GEO 平台的关注！我们已收到您的咨询，销售团队将在 24 小时内与您联系。

在等待期间，您可以：
- 了解 GEO 平台核心功能: {features_url}
- 阅读《什么是 GEO？AI 搜索时代的品牌优化指南》: {blog_url}
- 添加企业微信，获取更快响应: {wechat_url}

如有紧急需求，请拨打: 400-xxx-xxxx

GEO 平台团队

4.4.4 飞书多维表格自动化

自动化规则	触发条件	动作
新增通知	新记录创建	发送飞书群消息
超时预警	创建后 2 小时 status 仍为 pending	发送飞书群提醒
状态变更	status 字段变更	记录变更日志
每日汇总	每天 9:00	汇总前一日数据到群消息

五、技术架构建议

5.1 技术选型

层级	技术	理由
框架	Next.js 14 (App Router)	与 GEO 平台前端统一技术栈；SSR/SSG 支持 SEO
样式	Tailwind CSS 4	与 GEO 平台前端统一；原子化 CSS，性能好
动画	GSAP + ScrollTrigger	视差滚动最佳方案（见 3.1 分析）
UI 组件	shadcn/ui + Radix	与 GEO 平台前端统一；可访问性好
表单	React Hook Form + Zod	类型安全、验证完善
部署	Vercel	Next.js 原生支持；全球 CDN；自动 HTTPS
分析	Vercel Analytics + 百度统计	用户行为分析 + 国内 SEO
CMS	Next.js MDX	博客内容使用 MDX，开发者友好

5.2 性能优化策略

策略	具体实施
图片优化	使用 Next.js Image 组件，自动 WebP/AVIF 转换，懒加载
代码分割	GSAP 按需加载，仅在使用视差滚动的页面加载 ScrollTrigger
字体优化	`next/font` 自动优化，preload 关键字体
动画降级	检测 `prefers-reduced-motion`，为需要的用户关闭动画
移动端优化	移动端简化视差效果，减少 GPU 负担
缓存策略	静态页面 ISR，动态页面 SWR

5.3 项目结构建议

geo-site/
├── app/
│   ├── layout.tsx            # 全局 Layout
│   ├── page.tsx              # 首页
│   ├── features/
│   │   └── page.tsx          # 功能页
│   ├── pricing/
│   │   └── page.tsx          # 定价页
│   ├── blog/
│   │   ├── page.tsx          # 博客列表
│   │   └── [slug]/
│   │       └── page.tsx      # 博客详情
│   ├── about/
│   │   └── page.tsx          # 关于我们
│   └── api/
│       └── consultations/
│           └── route.ts      # 咨询表单 API
├── components/
│   ├── layout/               # 导航、页脚
│   ├── sections/             # 首页各模块组件
│   ├── animations/           # GSAP 动画组件
│   ├── forms/                # 咨询表单组件
│   └── ui/                   # 通用 UI 组件
├── lib/
│   ├── animations.ts         # GSAP 动画配置
│   ├── feishu.ts             # 飞书 API 集成
│   └── seo.ts                # SEO 工具函数
├── content/
│   └── blog/                 # MDX 博客内容
└── public/
    ├── images/               # 图片资源
    └── fonts/                # 字体文件

六、实施路线图

6.1 分阶段实施

阶段	时间	交付物	优先级
Phase 1: 核心上线	第 1-3 周	首页 + 咨询表单 + 基础动效	P0
Phase 2: 功能完善	第 4-5 周	功能页 + 定价页 + 完整视差动效	P1
Phase 3: 内容生态	第 6-8 周	博客系统 + 首发 5 篇文章 + SEO 优化	P1
Phase 4: 优化迭代	第 9-10 周	关于页 + 性能优化 + A/B 测试	P2

6.2 Phase 1 详细任务

任务	预估工时	依赖
项目初始化（Next.js + Tailwind + GSAP）	4h	-
全局 Layout（导航 + 页脚）	8h	项目初始化
首页 Hero 区域 + 视差动效	12h	全局 Layout
时代变革模块	6h	Hero
核心功能展示模块（粘性滚动）	16h	Hero
工作原理模块（横向时间线）	8h	核心功能
竞品对比场景模块	8h	核心功能
客户证言模块	4h	-
定价预览模块	4h	-
FAQ 模块	4h	-
最终 CTA 模块	2h	-
咨询表单组件	8h	-
咨询表单 API + 飞书集成	12h	咨询表单组件
自动通知机制	8h	飞书集成
SEO 基础配置	4h	-
响应式适配	8h	所有模块
性能优化 + 测试	8h	所有模块
合计	~120h

6.3 验收标准

维度	标准
功能	所有页面可正常访问，咨询表单可提交并写入数据库 + 飞书
动效	首页视差滚动流畅，FPS > 30；移动端动效降级正常
性能	Lighthouse 性能评分 > 90；LCP < 2.5s
SEO	所有页面有正确的 title/description/Schema；sitemap 可访问
兼容	Chrome/Safari/Firefox 最新 2 版本正常；iOS/Android 主流设备正常
安全	表单有防刷机制（rate limit）；敏感信息不暴露在前端

文档版本: v1.0 | 创建日期: 2026-05-19 | 状态: 待评审

39 KiB Raw Blame History Unescape Escape

GEO 官网重构规划方案

目录

一、重构背景与目标

1.1 现状分析

1.2 重构目标

1.3 核心原则

二、官网文案结构与内容规划

2.1 页面规划总览

2.2 首页文案结构

1.1 导航栏

1.2 Hero 区域（首屏）

1.3 时代变革模块

1.4 核心功能展示

1.5 工作原理

1.6 竞品对比场景

1.7 客户证言

1.8 定价预览

1.9 常见问题

1.10 最终 CTA

1.11 页脚

2.3 产品功能页文案结构

2.4 定价页文案结构

2.5 博客/资源页文案结构

2.6 关于我们页文案结构

2.7 全站 SEO/GEO 优化策略

2.7.1 技术 SEO 基础

2.7.2 GEO 专项优化（让 AI 搜索引擎找到我们）

2.7.3 关键词策略

三、视觉呈现方案

3.1 视差滚动技术选型

3.2 视差滚动优秀参考案例

3.3 每个页面的视觉动效规划

3.3.1 首页动效规划

3.3.2 产品功能页动效规划

3.3.3 定价页动效规划

3.3.4 博客页动效规划

3.3.5 关于我们页动效规划

3.4 视觉设计规范

四、客户咨询模块规划

4.1 咨询引导 UI 设计

4.1.1 入口设计

4.1.2 咨询表单交互流程

4.1.3 表单展示方式

4.2 咨询表单字段设计

4.2.1 完整版表单（页面内嵌 / Drawer）

4.2.2 简化版表单（退出弹窗）

4.2.3 表单交互细节

4.3 数据存储方案

4.3.1 推荐方案: 飞书多维表格 + 后端数据库双写

4.3.2 PostgreSQL 数据库表设计

4.3.3 飞书多维表格配置

4.4 自动通知机制

4.4.1 通知架构

4.4.2 飞书通知详情

4.4.3 用户自动回复邮件

4.4.4 飞书多维表格自动化

五、技术架构建议

5.1 技术选型

5.2 性能优化策略

5.3 项目结构建议

六、实施路线图

6.1 分阶段实施

6.2 Phase 1 详细任务

6.3 验收标准

39 KiB

Raw Blame History