Skip to content
/home2 首页改版设计规格
目标
在不影响当前 / 首页的前提下，新增一个独立预览页 /home2，用于验证更专业、更高端的企业级 AI 官网首页方向。
本次改版同时融合三种气质：
A 企业稳重：强调可信、部署、能力边界、企业级服务感B 产品导向：强调真实产品界面、流程、结果证明C 高端科技：强调留白、质感、弱动效、品牌感
最终落地原则：
A 做骨架B 做证明C 做气质
范围
包含
- 新增独立预览路由
/home2 - 新增一个新的首页组件，不覆盖现有
HomeLanding.vue - 允许重排现有首页模块顺序
- 允许补少量占位文案，以完成更完整的专业化表达
- 优先复用当前仓库已有图片素材
不包含
- 不替换当前
/首页 - 不改动现有文档结构和文档页内容
- 不新增复杂交互逻辑或重 JS 动画系统
- 不引入新的图片资源依赖
页面定位
/home2 应表现为“企业级 AI 联络中心旗舰首页预览版”，而不是当前首页的样式变体。
用户进入页面后的第一印象应是：
- 这是一个成熟的企业级产品
- 这是一个有真实系统、有部署能力的 AI 平台
- 页面高级但不浮夸，信息克制、可信、可阅读
信息架构
页面固定为 7 个主区块。
1. 顶部导航
复用当前导航信息架构，但升级样式表达。
要求：
- 导航高度约
72px - 半透明白底，带轻微模糊
- 中间菜单留白更充足
- 右侧电话与 CTA 分离表达
- hover 用轻背景或下边线，不使用明显大色块
导航内容保持现有结构：
- 首页
- 产品
- 解决方案
- 文档
- 核心技术
- 关于合作
- 关于我们
- 右侧主 CTA：
立即体验 - 次信息：
400-801-8663
2. Hero 首屏
Hero 改为双栏布局，不再使用纯居中海报式排布。
布局：
- 左列：价值主张、说明、CTA、信任指标
- 右列：真实产品主视觉
左侧内容：
- Eyebrow：
企业级 AI 联络中心 - 主标题两行：
让营销触达更智能让客户服务更可控
- 描述文案：
- 保留当前首页的能力表达，但改成更凝练的企业口径
- CTA：
- 主按钮：
立即免费体验 - 次按钮：
查看产品文档
- 主按钮：
- 下方信任指标条：
98% 识别准确率10万+ 日均外呼能力1 天私有化部署99.9% 系统稳定性
右侧内容：
- 一张主产品图，放入带设备感的大容器中
- 允许在主图上叠加 1-2 个轻量数据卡
产品图候选：
/images/statistics.jpg/images/agent.jpg
悬浮信息卡建议：
- 卡片 1：
日均外呼任务 100,000+ - 卡片 2：
识别准确率 98%
3. 产品价值展示区
替代原“核心能力矩阵 + CardSwap”组合。
采用 3 个大图叙事模块，每个模块由：
- 标题
- 一段短说明
- 一张真实产品图
模块如下：
智能语音交互- 图：
/images/agent.jpg - 强调自然对话、多轮交互、客户意图承接
- 图：
流程编排与智能决策- 图：
/images/speechflow.jpg或/images/aidecision.jpg - 强调可视化流程、策略控制、业务分发
- 图：
实时分析与运营看板- 图：
/images/statistics.jpg - 强调数据洞察、通话监控、转化闭环
- 图：
版式采用交错节奏：
- 第一块：文左图右
- 第二块：图左文右
- 第三块：文左图右
4. 企业能力证明区
该区承担企业可信度表达，强调“可部署、可扩展、可运营”。
区块标题建议：
为企业场景提供可部署、可扩展、可运营的 AI 能力
内容采用 4 列能力卡：
私有化部署弹性扩容全链路监控开放式集成
每张卡只包含：
- 标题
- 一句说明
允许补充的占位型企业能力文案：
支持 API / SIP / 语音能力集成适配多业务线与多租户场景支持监控、告警与审计链路
5. 行业场景区
保留现有行业素材，但由当前的小卡 hover 样式改为更克制的 editorial grid。
保留 6 个代表性行业：
- 银行
- 保险
- 证券
- 零售
- 制造
- 政务
每个场景卡只展示：
- 行业名称
- 一句结果导向场景描述
- 弱化背景图
- 深色遮罩
hover 只允许：
- 轻微上移
- 轻微放大
- 边框高亮
禁止重 overlay 动画。
6. 实施流程区
保留现有四步流程，但去掉重卡片感，改成横向时间线表达。
四步保持不变：
- 导入客户数据
- 智能话术编排
- 全自动外呼触达
- 效果实时洞察
样式要求：
- 深色背景整段切换节奏
- 每一步包含编号、标题、简述
- 步骤之间用细线连接
- 文案控制在一句半以内
7. 结尾 CTA
结尾 CTA 从强销售型横幅改为品牌型收尾。
结构：
- 标题：
准备好接入更智能的 AI 外呼体系了吗 - 描述：一句短文案
- 按钮：
申请免费试用查看产品文档
背景：
- 细腻浅灰至浅蓝渐变
- 不使用重纹理
- 不再使用当前高饱和整块蓝色横幅
视觉系统
色彩
页面仅保留一套核心色系：
--home2-bg: #F6F8FC--home2-surface: rgba(255,255,255,0.72)--home2-text: #0F172A--home2-muted: #475569--home2-line: rgba(15,23,42,0.08)--home2-brand: #2563EB--home2-brand-soft: #DBEAFE
约束：
- 仅允许 1 套品牌蓝作为强调色
- 禁止每个区块使用不同渐变主题
- 深色块仅用于流程段或极少数强调内容
字体
建议字体栈：
"HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif
要求：
- 整页风格现代、清晰
- 不混用多套字体风格
- 标题与正文靠字重与尺寸区分，而非靠花式字体
字号层级
- Hero 标题：
56px - Hero 描述：
18px - 模块标题：
34px - 卡片标题：
20px - 正文：
16px - 辅助文案：
14px
要求：
- 只保留稳定的 2-3 级主层级
- 避免字号过多导致层级松散
间距
- 主容器最大宽度：
1240px - 左右内边距：
32px - Hero 上下留白：
120px / 96px - 常规 section 上下留白：
100px - 流程区与 CTA：
120px
圆角
- 主视觉图容器：
28px - 常规卡片：
20px - 小标签与按钮：
999px
阴影
限制为两级：
- 普通卡片：
0 10px 40px rgba(15,23,42,.06) - 重点产品图：
0 30px 80px rgba(37,99,235,.12)
要求：
- 阴影服务层次，不制造廉价悬浮感
动效原则
动效只承担“引导”和“增强质感”的作用，不做表演。
统一规则：
- 页面进入：
opacity + translateY(18px)，时长约220ms - hover：约
180ms - 大图 hover：最多
translateY(-4px) - 指标不做明显弹跳计数
- 禁止持续存在感过强的背景动画
- 必须兼容
prefers-reduced-motion
对现有效果的处理：
Particles在/home2中默认弱化，必要时可直接移除CardSwap不进入/home2MagicBento不进入/home2
素材复用策略
优先复用现有仓库图片，不新增外部资源。
建议复用：
- Hero 主图：
/images/statistics.jpg或/images/agent.jpg - 产品模块：
/images/agent.jpg/images/speechflow.jpg/images/aidecision.jpg/images/statistics.jpg
- 行业图：
/images/bank.jpg/images/insurance.jpg/images/bond.jpg/images/shop.jpg/images/manufacture.jpg/images/government.jpg
实施文件
本次实现预计新增或修改以下文件：
docs/home2.mddocs/.vitepress/components/HomeLanding2.vue
如有必要，可在组件内部使用 scoped style 完成主要样式，不强制新增全局 CSS 文件。
验收标准
当 /home2 完成时，应满足以下标准：
- 首屏一屏内可同时看到价值主张、主 CTA、产品画面、信任指标
- 页面节奏明显区别于现有首页，不再是重复的“标题 + 副标题 + 卡片”
- 整体视觉更克制、更高级，但仍保持企业官网可读性
- 产品截图成为主角，而不是背景特效成为主角
- 桌面端页面风格统一，不出现模块间语言割裂
- 不影响现有
/首页和文档页