# HOMEVISTA 官网 4.0 已设计 5 页面 Figma UI 开发 PRD

版本：v0.2  
文档类型：Figma UI 基线开发需求 PRD  
适用范围：当前 Figma 已完成的 5 个中文桌面端整页画板。  
设计原型：[Figma 官网设计稿](https://www.figma.com/design/Nf4ZCCRjxhLhqwSmhJPJb1/%E5%AE%98%E7%BD%91?node-id=0-1&p=f&t=cAiS7R9XYMU85y7K-0)  
Figma 读取日期：2026-08-11  
关联文档：`HOMEVISTA官网4.0非功能性需求_多域名多语言SEO.md`

---

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-10 | v0.1 | 初始创建 | 根据当前 Figma 已设计页面，定义 5 个页面的开发范围、共用规则与验收标准。 |
| 2026-08-11 | v0.2 | 重大需求变更 | 改为以当前 Figma UI 为唯一页面依据：逐页按实际画板模块、可见控件和状态编写，删除由旧文案扩展出的模块和流程需求。 |

---

## 1. 文档使用规则

### 1.1 Figma 是页面事实源

- 本文件只描述当前 Figma 中已可见的桌面端 UI：模块顺序、标题、图片/插画位置、卡片、按钮、标签、导航、轮播控件和页尾。
- Figma 未画出的页面、模块、表单字段、提交结果、跳转目的地、移动端样式、加载/错误状态，均不视为已确认需求。
- 如本 PRD 与 Figma 当前画板冲突，以 Figma 为准；开发前将变化同步到本文件与修订记录。

### 1.2 本期页面与非目标

| 本期页面 | Figma 画板 | 画板尺寸 |
| --- | --- | --- |
| 首页 | `首页CN` | 1920 × 5687 |
| 产品 | `产品` | 1920 × 9392 |
| 数智 AI | `Ai` | 1920 × 5963 |
| 解决方案 | `解决问题7/27` | 1920 × 6405 |
| 关于我们 | `关于我们` | 2172 × 4776 |

本期不开发预约演示整页、News 整页、CMS、后台管理、表单提交与结果页。它们即使出现在导航或 CTA 中，也只作为待补充目标存在。

### 1.3 设计系统适用说明

这是品牌官网/营销落地页，不属于 VISTA B 后台或 VISTA C 楼盘用户产品界面。开发直接还原 Figma 的官网 UI；不引入 VISTA B 表格/后台模式，也不将 VISTA C 产品导航混入官网。Figma 未定义的组件状态统一标为“待设计补充”。

## 2. 全站 UI 规则

### 2.1 顶部导航

- 5 个画板均使用白底横向顶部导航：左侧 HOME VISTA Logo；中间为 ABOUT、SOLUTION、PRODUCT、AI、PARTNERS；右侧为 JP 语言入口及青色主 CTA。
- 当前页面导航项使用青色高亮；首页无中间导航项高亮。
- Logo、导航项、语言入口和主 CTA 均为可操作元素。其具体 URL、语言菜单内容和 CTA 目标未在当前画板完整定义，待提供链接映射；开发不得自行假设目标页或新增菜单项。
- 顶部导航的吸顶、滚动收缩、移动端折叠菜单与键盘焦点视觉均未在 Figma 画出，均为待设计补充。

### 2.2 视觉与组件共性

- 页面以白底、黑/深灰文字、青色行动元素、浅灰分区与颗粒/线稿风格 3D 插画构成；页面背景的微小颗粒效果应保留，不得用无关纹理替代。
- 主 CTA 为青色实心圆角按钮；次 CTA 为白底描边圆角按钮。按钮文案、宽度和排布以各画板为准。
- 内容卡片包含圆角图片卡、浅灰信息卡、白底描边选择卡和青色强调卡；不能将它们统一替换成通用营销网站卡片样式。
- 页面底部均使用统一页尾，含横向链接、联系方式/版权区和小号法律/隐私链接；真实地址和链接目的地待内容补充。

### 2.3 响应式与非视觉要求

- 当前只提供桌面端整页画板。移动端栅格、断点、图片裁切、导航折叠与文字换行均为待设计补充，不能从桌面端任意推断。
- 多语言、SEO、统计、性能、可访问性、资源失败和上线规则以关联的非功能性需求为准；它们不改变本文件的 UI 范围。

## 3. 页面 UI 需求

### 3.1 首页

#### 画板结构

| 顺序 | UI 模块 | Figma 中可见的内容与控件 |
| --- | --- | --- |
| 1 | 顶部导航与首屏 | 标语“让房地产销售从 DX 进入数智时代”、大号 HOME VISTA 字标、右侧颗粒化 Logo 主视觉、说明文字、一个描边 CTA 与一个青色 CTA。 |
| 2 | 价值主张 | 左侧建筑线稿图，右侧标题“让客户沿着自己的关注，一步步走近未来的家”与说明文字。 |
| 3 | 产品选择 | 标题“不同的销售重点，对应不同的产品选择”、右侧描边按钮、中心颗粒化模型及 VISTA、VISTA WALK、VISTA CAVE、CITY VISTA 四个胶囊标签。 |
| 4 | 客户旅程卡 | 标题“看房前后，客户都能继续查看和比较”；到访前、接待中、客户离场后三张图片卡，其中第三张为青色描边强调状态。 |
| 5 | 数智 AI 上线预告 | 标题“HOMEVISTA 数智 AI｜2026 年 9 月上线”、说明文字、描边 CTA、青色 CTA 与右侧 AI 线稿插画。 |
| 6 | 项目经验 | “100+ 房地产项目的交付经验”标题、大号 100+ 线稿、说明文字和青色 CTA。 |
| 7 | 收尾 CTA 与页尾 | 浅灰收尾区“让客户更早了解，让销售更好准备”、一个青色 CTA、一个描边 CTA、右侧颗粒 Logo 与统一页尾。 |

#### 已表达交互与状态

- 客户旅程区域至少存在一个已选卡状态：第三张卡使用青色边框及青色正文；其他两张为普通状态。是否点击切换、自动切换或仅为静态重点，Figma 未表达，待设计补充。
- 产品选择的四个标签和右侧按钮应按 Figma 显示为可操作样式；点击后跳转或内容切换未定义。
- 首屏、AI 预告、项目经验和收尾区均有 CTA；需保留各自主/次按钮层级，目标待链接映射确认。

### 3.2 产品

#### 画板结构

| 顺序 | UI 模块 | Figma 中可见的内容与控件 |
| --- | --- | --- |
| 1 | 顶部导航与首屏 | 标题“从建筑、空间到城市与现场，完整呈现住宅价值”、说明文字、两个 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 与统一页尾。 |

#### 已表达交互与状态

- VISTA 区域的胶囊标签有选中状态；起点选择区域是手风琴 UI，至少应支持 VISTA 的展开/收起视觉状态。其他产品项是否可展开以及展开内容以 Figma 进一步状态为准。
- 多终端资料模块展示语言下拉、工具图标和左右翻页按钮；实际下拉选项、按钮行为、文件数据来源均未定义，待设计补充。
- VISTA WALK、CITY VISTA、VISTA CAVE 图中的热点/说明标签只要求还原已见位置与文字样式；热点点击行为未定义。

### 3.3 数智 AI

#### 画板结构

| 顺序 | UI 模块 | Figma 中可见的内容与控件 |
| --- | --- | --- |
| 1 | 顶部导航与首屏 | 标题“HOMEVISTA 数智 AI｜2026 年 9 月上线”、青色副标题“从看到，到理解，到决策”、说明文字、描边 CTA、青色 CTA 与右侧资料/画面线稿。 |
| 2 | AI 读取基础 | 标题“HOMEVISTA 如何被 AI 读取”；01—04 四张浅灰圆角信息卡，两列排布，配大号青色编号。 |
| 3 | AI 为销售准备什么 | 四张倾斜的彩色便签围绕青色文件夹，文件夹文字为“数智 AI 将为销售准备什么”。 |
| 4 | 两套房屋持续比较 | 标题“当客户持续比较两套房屋”；客户、数智 AI、销售三段纵向时间线，分别配户型对比屏、AI 图标和手机操作示意。 |
| 5 | 收尾 CTA 与页尾 | 浅灰收尾区标题“让销售更快看见重点，让判断更有依据”、一个青色 CTA、一个描边 CTA、右侧颗粒 Logo 与统一页尾。 |

#### 已表达交互与状态

- 四张 01—04 信息卡和四张便签在画板中均为并列信息展示，未提供展开、拖动或轮播状态，不应擅自增加交互。
- 两套房屋比较区是说明性时间线；Figma 未给出实际房源比较功能、AI 推荐结果、客户数据查询或登录流程。
- “2026 年 9 月上线”是可见内容，是否由后台配置、到期后替换及通知 CTA 的结果页均未定义。

### 3.4 解决方案

#### 画板结构

| 顺序 | UI 模块 | Figma 中可见的内容与控件 |
| --- | --- | --- |
| 1 | 顶部导航与首屏 | 标题“让每一次看房，延续到下一次商谈”、说明文字、描边 CTA、青色 CTA 与住宅线稿主视觉。 |
| 2 | 住宅类型选择 | 标题“不同住宅，需要讲清不同的价值”，新建公寓、独栋住宅与别墅两张圆角图片卡，各有名称和短说明。 |
| 3 | 看房旅程 | 标题“从提前了解，到回家继续比较”；到访前、接待中、离场后、再沟通四个阶段沿纵向虚线排列，搭配手机、讲解、客户比较和销售现场图片。 |
| 4 | 资料比较轮播 | 标题“客户更容易比较，销售更容易准备”，中央大图片卡，两侧露出相邻卡片，下方圆点分页和暂停按钮。 |
| 5 | 项目使用流程 | 标题“一个住宅项目，如何使用 HOMEVISTA”；由浅灰步骤框、青色三角连接符和一条横向资料输入框组成的流程图，右下有青色 CTA。红色备注块为设计说明，不属于正式前台 UI。 |
| 6 | 收尾 CTA 与页尾 | 标题“为住宅找到更合适的销售体验”、青色 CTA、描边 CTA、右侧颗粒 Logo 与统一页尾。 |

#### 已表达交互与状态

- 住宅类型为两张选择卡；是否点击进入独立方案、改变内容或仅展示，未定义。
- 轮播区明确有分页圆点和暂停图标，需实现默认展示一张主卡、可切换分页、可暂停自动播放的状态；切换节奏、循环规则、手势支持和视频/图片来源待设计补充。
- 项目使用流程是可视化说明，不能据此推断官网存在资料上传、项目创建或在线报价功能。

### 3.5 关于我们

#### 画板结构

| 顺序 | UI 模块 | Figma 中可见的内容与控件 |
| --- | --- | --- |
| 1 | 顶部导航与首屏 | 标题“专注房地产数字体验，让客户更容易了解、比较并作出选择”、说明文字、描边 CTA、青色 CTA 和大号颗粒 HOME VISTA 字样。 |
| 2 | 经验与信任卡组 | 标题“100+ 房地产项目”，并列四张圆角图片卡：100+ 房地产项目、日本、澳洲及亚太市场、公司与团队事实、客户与专业证明。 |
| 3 | 资料到销售现场 | 标题“从住宅资料，到销售现场”，三张白底描边步骤卡，内含青色图标与底部青色说明区。 |
| 4 | 资料使用边界 | 标题“未公开的资料，只在确认范围内使用”，说明文字与大号颗粒文件夹插画。 |
| 5 | 收尾 CTA 与页尾 | 浅灰收尾区标题“为下一套住宅，建立更有说服力的数字体验”、青色 CTA、描边 CTA、右侧颗粒 Logo 与统一页尾。 |

#### 已表达交互与状态

- 四张经验与信任卡、三张步骤卡在当前画板中未体现展开、翻转、轮播或跳转状态；按静态信息卡实现，除非设计补充交互。
- “未公开的资料”区域是信息安全/使用边界的视觉声明，不等同于登录、权限申请或文件查看功能。
- 两个首屏 CTA 与两个收尾 CTA 需保留主次样式，但目的地待链接映射确认。

## 4. Figma UI 验收标准

1. 5 个页面的桌面端模块顺序、标题、图片/插画位置、卡片数量、按钮主次层级、标签、轮播控件和页尾均与对应 Figma 画板一致。
2. 顶部导航在各页面显示相同项目，并正确显示当前页面的青色高亮状态；首页不错误高亮某个中间项。
3. 首页客户旅程第三卡、产品模块标签选中态、产品手风琴展开态、解决方案轮播分页/暂停态均按本文件和 Figma 还原。
4. 不实现或伪造 Figma 未出现的预约表单、News、CMS、登录、文件管理、房源比较、AI 推荐、资料上传及链接目的地。
5. 轮播、手风琴、标签等已表达的交互在无目标链接或内容配置时，至少保持当前画板的静态默认状态，不显示失效操作或空白内容。
6. 移动端、导航吸顶、语言菜单、CTA 目标、资源异常状态等待设计项，不得在验收中被误判为 Figma 已确认内容。
7. 所有页面的非视觉质量要求以非功能性需求为准；`pnpm build` 仅验证同仓发布产物，不能替代人工 Figma 对照验收。

## 5. 待设计补充清单

| 项目 | 原因 |
| --- | --- |
| 预约演示、News 整页及 CTA 实际目标 | 只在导航/按钮中可见，未提供整页或链接映射。 |
| 移动端画板与断点规则 | 当前读取到的 5 页均为桌面端画板。 |
| 导航吸顶、移动菜单、语言菜单 | Figma 只展示默认桌面态。 |
| CTA、Logo、导航、页尾、卡片的 URL 映射 | 未由 Figma 原型连线或链接说明明确。 |
| 产品标签、热点、手风琴的完整内容与状态 | 仅部分默认/选中/展开视觉可见。 |
| 解决方案轮播的内容源、时长、循环与无障碍规则 | 仅可见分页与暂停控件。 |
| AI 上线后的状态与通知结果 | 画板只展示上线预告。 |

## 6. 同仓发布说明

- 当前 PRD 源文件位于 `documents/官网最新需求文档/`，构建后以原始 Markdown 发布到 `/docs/官网最新需求文档/`。
- `/prototype/` 直接跳转 Figma 共享设计稿，不另建重复原型。
- 构建命令为 `pnpm build`；正式视觉验收必须以当前 Figma 画板进行人工逐页对照。