# HOMEVISTA 官网 4.0 产品页 UI 开发 PRD

版本：v0.2
对应画板：`产品`（1920 × 9392）
设计原型：[Figma 产品画板](https://www.figma.com/design/Nf4ZCCRjxhLhqwSmhJPJb1/%E5%AE%98%E7%BD%91?node-id=1-1622&p=f&t=cAiS7R9XYMU85y7K-0)

---

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-11 | v0.1 | 初始创建 | 依据 Figma 产品页桌面端画板，定义模块、可见控件、已表达状态及验收。 |
| 2026-08-11 | v0.2 | 重大需求变更 | 补充可判断 CTA 与导航路由、响应式、独立国际化文案交付；所有图片素材按可替换素材处理。 |

---

## 1. 页面范围

本 PRD 覆盖产品页的 Figma 视觉、已确认导航和 CTA 去向、响应式与国际化交付。复用全站白底顶部导航、当前 `PRODUCT` 青色高亮、统一页尾和粒子化视觉语言。所有图片均为可替换素材，不以当前图片内容作为发布前置条件。

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

| 顺序 | UI 模块 | Figma 中可见的内容与控件 | 已表达状态 |
| --- | --- | --- | --- |
| 1 | Hero | 标题“从建筑、空间到城市与现场，完整呈现住宅价值”、说明、描边 CTA、青色 CTA、笔记本/手机产品视觉。 | 两个 CTA 为主/次层级；目标未定义。 |
| 2 | 场景横幅 | 全宽室内人物照片，叠加“产品，自己建立，完整地组合”类标题和说明。 | 静态横幅。 |
| 3 | VISTA | 半透明 VISTA 大字、标题“从建筑印象，到具体选择”、建筑/眺望组合图，下方四个胶囊选择项。 | 一项为青色选中，其他为普通描边。 |
| 4 | VISTA WALK | 半透明 VISTA WALK 大字、标题“提前感受空间尺度与生活动线”、室内空间主图及下方小型标签/导航。 | 标签仅见默认视觉。 |
| 5 | CITY VISTA | 半透明 CITY VISTA 大字、标题“在地图之外，看见未来生活”、城市模型、移动端地图、区位视觉三联画面。 | 静态展示。 |
| 6 | VISTA CAVE | 半透明 VISTA CAVE 大字、标题“把数字体验带进销售中心”、沉浸式室内主图与多处说明标签。 | 热点/标签只有视觉，不定义点击。 |
| 7 | 起点选择 | 标题“按当前销售任务，选择合适的起点”；左侧 VISTA、VISTA WALK、CITY VISTA、VISTA CAVE 手风琴，右侧户型图。 | VISTA 显示展开与向上箭头；其余项为收起状态。 |
| 8 | 多终端资料 | 标题“同一套资料，服务不同语言与终端”，文件夹/资料中心界面，含语言下拉、工具图标、文件夹和左右翻页控件。 | 仅还原默认界面；不实现文件、下拉或翻页功能。 |
| 9 | 收尾 CTA 与页尾 | 标题“找到适合当前销售任务的产品”、青色 CTA、描边 CTA、颗粒 Logo 和页尾。 | 两个 CTA 的主/次层级可见。 |

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

- VISTA 胶囊组必须还原一个青色选中态；未提供点击后的内容、切换规则或跳转，默认只显示静态选中态。
- 起点选择必须还原 VISTA 展开、其他三项收起的默认手风琴视觉；不实现展开切换，除非补充完整状态与内容。
- 资料中心工具、翻页箭头和热点标签仅还原视觉，不绑定文件数据或跳转。导航、语言入口、CTA 和已确认页尾链接必须按第 5 节跳转。

## 4. 视觉与验收

1. 以 Figma 桌面画板为视觉基线；同时支持桌面、平板和手机端。移动端首版可由开发按阅读和点击优先级重排，后续由设计师校准。
2. VISTA、VISTA WALK、CITY VISTA、VISTA CAVE 四段的顺序、半透明大字、标题、主视觉和标签数量应与 Figma 一致。
3. 起点选择区必须保留左侧四项层级和右侧户型图；VISTA 为默认展开视觉。
4. 多终端资料区必须保留语言下拉、工具图标、文件夹和双翻页箭头的视觉结构，不伪造真实文件管理功能。
5. 不实现 Figma 未画出的产品详情页、房源查询、资料下载、地图交互、热点弹窗或文件管理；已定义的导航与 CTA 跳转除外。
6. 非视觉质量要求以关联 NFR 为准；最终以人工逐段对照 Figma 验收。

## 5. CTA、导航与语言

| 位置 | 用户意图 | 目标 |
| --- | --- | --- |
| Logo | 返回首页 | `/` |
| ABOUT / SOLUTION / PRODUCT / AI / PARTNERS | 浏览一级页面 | `/about/`、`/solution/`、`/product/`、`/ai/`、`/partners/` |
| 顶部“预约演示”、Hero“预约演示”、收尾预约产品 | 发起演示咨询 | `/contact/` |
| Hero“咨询产品组合”、收尾“咨询产品组合” | 讨论适合的产品组合 | `/contact/` |
| 页尾隐私政策 / 用户协议 | 查看法律文本 | `/privacy/`、`/terms/` |

- 产品名称、胶囊标签、手风琴标题和热点不设独立路由，避免制造未设计的产品详情页。
- 对外语言为英文、日文、繁体中文；简体中文只作内部校对。语言切换后须保留当前页面与同语言链接。

## 6. 国际化文案交付

- 开发必须使用《02_产品_国际化文案.md》中的同语言可见文案及逐语言 SEO/OG 信息，不得运行时翻译或混用语言。
- 英文、日文、繁体中文发布前须完成业务与母语校对。

## 7. 待设计补充

- 胶囊标签与手风琴的全部状态、内容和切换规则。
- 资料中心的真实数据、工具、语言选项与翻页行为。
- 移动端最终视觉校准、悬停、焦点、加载和异常画板。