# HOMEVISTA 官网 4.0 TOP 首页 UI 开发 PRD

版本：v0.4
文档类型：Figma UI 开发需求
对应画板：`首页CN`（1920 × 5687）
设计原型：[Figma 首页画板](https://www.figma.com/design/Nf4ZCCRjxhLhqwSmhJPJb1/%E5%AE%98%E7%BD%91?node-id=1-1289&p=f&t=cAiS7R9XYMU85y7K-0)
Figma 读取日期：2026-08-11
关联规则：`HOMEVISTA官网4.0非功能性需求_多域名多语言SEO.md`

---

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-11 | v0.1 | 初始创建 | 依据 Figma 首页桌面端画板，定义页面模块、可见控件、已表达状态与验收标准。 |
| 2026-08-11 | v0.2 | 重大需求变更 | 根据人工评审补充首页导航、CTA、响应式开发与内容使用边界；统一采用官网页面索引中的路由。 |
| 2026-08-11 | v0.3 | 重大需求变更 | 项目案例与 FAQ 不再属于首期官网页面范围；首页中的对应入口在设计删除或替换前不得作为可用链接发布。 |
| 2026-08-11 | v0.4 | 重大需求变更 | 新增国际化交付章节；对外语言收口为英文、日文和繁体中文，并指定首页国际化文案与逐语言 OG 内容为开发来源。同步修正已定义 CTA 的状态说明。 |

---

## 1. 页面范围

本 PRD 覆盖首页的 Figma 桌面端视觉、已确认的导航与 CTA 去向，以及响应式开发要求。页面由顶部导航、7 个内容区和统一页尾组成。

首页不要求逐段使用现有首页内容稿，也不以内容稿反向改变 Figma 已确认的区块顺序与视觉层级。内容填充时，应在不改变既有区块数量、顺序和主体视觉关系的前提下，选择能够支撑该区块表达的内容。

本 PRD 不定义预约演示页、Partners 页、News 页、表单字段、后台配置或资源失败状态；其页面范围、内容来源与路由以《00_官网页面索引.md》为准。

## 2. 顶部导航

| 区域 | Figma UI 要求 |
| --- | --- |
| 左侧 | 显示 HOME VISTA Logo。 |
| 中间 | 横向显示 ABOUT、SOLUTION、PRODUCT、AI、PARTNERS。首页没有中间导航项处于青色高亮。 |
| 右侧 | 显示 `JP` 语言入口及下拉箭头；最右为青色圆角主 CTA。 |
| 样式 | 白色背景、细小黑色导航文字、青色 Logo/CTA；高度、间距、字体和按钮尺寸以画板为准。 |

Logo、导航项、语言入口和主 CTA 必须使用可访问的链接或按钮实现，并按第 4 节定义目标。语言入口需展示当前语言；展开的语言项、视觉状态与动画可在不改变其访问规则的前提下由开发采用与现有设计最接近的方式实现。导航吸顶、悬停与焦点的视觉细节待设计校准。

## 3. UI 模块与默认状态

| 顺序 | 模块 | Figma UI 要求 | 已表达状态 |
| --- | --- | --- | --- |
| 1 | Hero | 左侧依次显示“让房地产销售从 DX 进入数智时代”、大号 `HOME VISTA` 字标、说明文字、描边 CTA 与青色 CTA；右侧为大号颗粒化 HOME VISTA 图形。 | 主 CTA 进入 `/contact/`，次 CTA 进入 `/solution/`；具体文案见第 4.2 节。 |
| 2 | 客户理解价值 | 左侧放置建筑线稿/模型图；右侧显示“让客户沿着自己的关注，一步步走近未来的家”和短说明。 | 静态展示，无已表达交互。 |
| 3 | 产品选择 | 标题为“不同的销售重点，对应不同的产品选择”；右侧有描边 CTA；下方以颗粒化建筑模型为中心，环绕 VISTA、VISTA WALK、VISTA CAVE、CITY VISTA 四个胶囊标签。 | 描边 CTA 进入 `/contact/`；四个标签进入 `/product/`，不在首页定义页内锚点或筛选。 |
| 4 | 客户旅程 | 标题为“看房前后，客户都能继续查看和比较”；横向展示到访前、接待中、客户离场后三张图片卡。 | 第三张卡有青色描边及青色说明，前两张为普通状态。是否切换未定义。 |
| 5 | 数智 AI 预告 | 标题为“HOMEVISTA 数智 AI｜2026 年 9 月上线”；左侧说明文字、描边 CTA、青色 CTA，右侧为 AI 线稿插画。 | “查看数智 AI”进入 `/ai/`；“获取上线通知”进入 `/contact/`；上线日期为静态可见文案。 |
| 6 | 项目经验 | 标题为“100+ 房地产项目的交付经验”；左侧大号 `100+` 颗粒插画，右侧说明文字和青色 CTA。 | 项目案例页不在首期范围；该 CTA 需删除或替换后方可发布。 |
| 7 | 收尾 CTA | 浅灰背景；显示“让客户更早了解，让销售更好准备”、短说明、青色 CTA、描边 CTA，右侧为颗粒化 Logo。 | “预约演示”和“咨询适合的方案”均进入 `/contact/`，分别承接演示咨询与通用方案咨询。 |
| 8 | 页尾 | 使用白色页尾，顶部为横向栏目链接，下方为联系/版权信息和小号法律/隐私链接。 | 各入口目标见第 4.2 节；FAQ 与 HOME360 不得在未完成删除/确认前作为可用链接发布。 |

## 4. 已表达交互的开发要求

### 4.1 客户旅程卡

- 默认画面必须还原第三张“客户离场后”卡的强调状态：青色描边、青色辅助说明；前两张卡保持普通状态。
- 画板没有提供点击、切换、自动播放或展开状态。开发只需实现默认静态状态，不得自行增加轮播、Tab 或链接。

### 4.2 CTA、标签与导航

- 所有青色实心按钮与白色描边按钮必须保留 Figma 中的主次层级、相对位置和按钮文案。
- 所有导航、标签、CTA 和页尾链接均须跳转到已定义目标，能够通过键盘访问，并按全站 NFR 记录点击统计。
- 路由以《00_官网页面索引.md》为准；下表中的“页面路径”是页面后缀，实际访问时须加当前语言路径，例如英文解决方案页为 `/en/solution/`。

| 位置 | 用户意图 | 目标页面路径 | 规则 |
| --- | --- | --- | --- |
| Logo | 返回当前语言首页 | `/` | 不跨语言跳转。 |
| 顶部 About / Solution / Product / AI / Partners | 进入相应主题页 | `/about/`、`/solution/`、`/product/`、`/ai/`、`/partners/` | Figma 中的五项导航均须保留。 |
| 顶部主 CTA、Hero 主 CTA、产品选择区预约演示、收尾区预约演示 | 发起销售演示咨询 | `/contact/` | 进入统一咨询页的“预约演示”入口。 |
| Hero 次 CTA | 了解 HOMEVISTA 的解决方式 | `/solution/` | 用于继续了解销售问题与解决方案。 |
| 四个产品标签 | 了解 HOMEVISTA 产品组合 | `/product/` | 首期均进入产品页；不在首页定义产品页内锚点或筛选规则。 |
| 客户旅程区 CTA | 了解客户看房前后的一体化销售路径 | `/solution/` | 进入解决方案页。 |
| 数智 AI“查看数智 AI” | 了解 AI 能力、边界和适用场景 | `/ai/` | 进入 AI 页面。 |
| 数智 AI“获取上线通知” | 就 AI 上线、导入或使用方式发起咨询 | `/contact/` | 首期不新增订阅表单或通知名单；由联系我们页承接。 |
| 项目经验“查看项目案例” | 不属于首期发布范围 | 不设目标页面 | 项目案例页已从官网页面范围删除。该 CTA 需由设计稿删除或替换后才能发布；不得保留为无效链接或跳转到无关页面。 |
| 收尾区“咨询适合的方案” | 就项目类型、销售阶段与现有资料咨询适合方案 | `/contact/` | 进入统一咨询页的通用咨询入口。 |
| 页尾 About / Products / Solutions / AI & Technology / Book a Demo / Partner with us | 进入相应主题或咨询页 | `/about/`、`/product/`、`/solution/`、`/ai/`、`/contact/`、`/partners/` | 文案应随当前语言变化。 |
| 页尾 Privacy Policy / 利用规约 | 查看隐私和条款 | `/privacy/`、`/terms/` | 页面内容与 UI 可后补，但正式上线前必须可访问。 |
| 页尾 FAQ | 不属于首期发布范围 | 不设目标页面 | FAQ 已从官网页面范围删除。该入口需由设计稿删除或替换后才能发布；不得保留为无效链接。 |
| 页尾 HOME360、电话、邮箱、官网地址 | 访问外部服务或联系 HOMEVISTA | 外部目标待核实 | HOME360 的正式外部地址尚未在当前资料中确认，不得猜测；确认前不作为可用链接发布。电话、邮箱和官网地址采用其已确认的标准链接形式。 |

### 4.3 语言切换

- 对外语言入口必须包含 English、日本語、繁體中文；简体中文只用于内部校对，不在前台入口出现。
- 切换后应进入同一页面的目标语言版本；如该版本暂未上线，则按全站 NFR 的语言兜底规则处理。
- Figma `首页CN` 是中文视觉审核画板，不改变对外语言范围。画板中的 `JP` 文字不构成只提供日文语言入口的规则。

### 4.4 响应式开发

- 开发须支持响应式布局，使首页在桌面、平板和手机端保持可阅读、可点击、可完成导航与 CTA 跳转。
- 当前没有移动端 Figma 画板。开发可基于现有桌面信息层级和常见可用性原则完成首版重排；不得新增页面功能、额外内容区或新的交互流程。
- 首版响应式效果须提交设计师校准；设计师后续调整以视觉规格修订方式回写本 PRD或关联设计稿。

### 4.5 国际化文案交付

- 开发必须使用《01_TOP首页_国际化文案.md》中的当前语言内容，不得从简体中文运行时自行翻译，也不得混用不同语言的导航、CTA、页尾或 OG 文案。
- 对外发布语言为 English、日本語、繁體中文；简体中文为内部内容基准。每种语言都须提供页面可见文案、`title`、`meta description`、`og:title`、`og:description`、`og:locale` 与分享图说明。
- 页面文案内容的翻译状态为“待业务/母语校对”时，不得作为正式对外发布版本；开发可用于预览和版式验收。
- 页面路由、canonical、hreflang、统计与 Cookie 规则仍由全站 NFR 管理，不在国际化文案中重复定义。

## 5. 视觉还原要求

- 白底、浅灰分区、黑/深灰文字、青色行动元素、颗粒化线稿/模型和背景微粒均为首页的必要视觉元素。
- 圆角图片卡、胶囊标签、描边按钮和青色实心按钮必须按各自样式还原，不能统一替换成其他通用卡片或按钮。
- 主要插画、图片和大号字标必须保持 Figma 的左右关系和视觉层级；不得为适配实现而改变模块顺序。
- 1920 宽度是桌面视觉验收基线。更小桌面、平板与移动端须按第 4.4 节完成响应式首版，并在设计师后续校准时调整；首版不因缺少移动端画板而省略移动端可用性。

## 6. 验收标准

1. 页面桌面端模块顺序与本 PRD 第 3 节完全一致，且与 Figma 首页整页画板逐段对照一致。
2. 顶部导航包含 Logo、5 个中间项、当前语言入口和青色主 CTA；首页不高亮 ABOUT、SOLUTION、PRODUCT、AI 或 PARTNERS。
3. Hero、数智 AI 预告和收尾区均同时显示描边 CTA 与青色 CTA；项目经验区只显示一个青色 CTA。
4. 产品选择区包含四个指定产品标签；客户旅程区包含三张卡，且第三张为默认强调状态。
5. AI 预告中保留“2026 年 9 月上线”可见文案和 AI 线稿；项目经验区保留“100+”视觉重点。
6. 页尾结构、浅灰收尾区、背景颗粒和颗粒化主视觉均不缺失。
7. 所有已定义导航、CTA、产品标签和页尾链接均有正确目标、可通过键盘访问，并按全站 NFR 纳入点击统计；HOME360 在正式目标确认前不作为可用链接发布。
8. 非功能性要求按关联 NFR 验收；页面构建通过不能代替人工 Figma 视觉验收。
9. 首页在桌面、平板和手机端均可阅读、可完成导航和 CTA 跳转；首版移动端效果已经设计师校准或列入明确的校准待办。
10. 英文、日文和繁体中文均使用首页国际化文案中的同语言页面文案与 OG 内容；简体中文不出现在前台语言切换入口。

## 7. 待设计补充

| 项目 | 缺失内容 |
| --- | --- |
| 页内产品落点 | 四个产品标签进入产品页后的具体落点、锚点或筛选规则。 |
| HOME360 | 对外正式地址、是否在首期启用及对应语言规则。 |
| 交互视觉状态 | 导航吸顶、悬停、焦点、语言菜单展开与移动端菜单的具体视觉规格。 |
| 响应式视觉规格 | 断点、图片裁切、文字换行和导航折叠的设计师校准稿。 |

## 8. 同仓发布

- 源文件位于 `documents/官网最新需求文档/`，构建后以原始 Markdown 发布到 `/docs/官网最新需求文档/`。
- `/prototype/` 直接跳转 Figma 共享设计稿；不另建重复原型。