# HOMEVISTA 官网 4.0 关于我们页 UI 开发 PRD

版本：v0.2
对应画板：`关于我们`（2172 × 4776）
设计原型：[Figma 关于我们画板](https://www.figma.com/design/Nf4ZCCRjxhLhqwSmhJPJb1/%E5%AE%98%E7%BD%91?node-id=7-3255&p=f&t=cAiS7R9XYMU85y7K-0)

---

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-11 | v0.1 | 初始创建 | 依据 Figma 关于我们桌面端画板，定义模块、可见控件、静态信息卡及验收。 |
| 2026-08-11 | v0.2 | 重大需求变更 | 补充全站路由、可判断 CTA 去向、响应式和独立国际化文案交付要求；素材图统一按可替换素材处理。 |

---

## 1. 页面范围

本 PRD 覆盖关于我们页的 Figma 视觉、已确认的导航与 CTA 去向、响应式和文案交付。复用全站顶部导航，其中 `ABOUT` 为青色高亮，及统一页尾。图片均为可替换素材，不以当前图片内容作为验收或发布前置条件。

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

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

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

- 四张经验与信任卡、三张步骤卡和资料使用边界区均按静态视觉实现；不增加翻转、展开、轮播、客户筛选、下载或跳转。
- 顶部 Logo、导航、语言入口、Hero 与收尾 CTA、页尾中的已确认项目均须使用可访问链接或按钮；目标见第 4 节。
- 资料使用边界区不能被实现为登录、文件查看、权限申请或资料上传功能。

## 4. 视觉与验收

1. 以 Figma 桌面画板为视觉基线；同时支持桌面、平板和手机端。移动端首版可由开发按内容层级重排，后续由设计师校准。
2. Hero 的两行标题、双 CTA、大号颗粒字标及导航 ABOUT 高亮必须与 Figma 一致。
3. 经验与信任区必须保持四张卡的 2 × 2 排列、图片和标题层级。
4. 三张步骤卡必须保持白底描边、青色图标和底部青色信息区的组合；资料使用边界区必须保留标题、说明和文件夹插画。
5. 不实现客户案例详情、公司介绍详情、资料权限、下载或未定义的链接跳转；咨询统一进入 `/contact/`。
6. 非视觉质量要求遵循关联 NFR，最终采用人工 Figma 对照验收。

## 5. CTA、导航与语言

| 位置 | 用户意图 | 目标 | 说明 |
| --- | --- | --- | --- |
| Logo | 返回首页 | `/` | 各语言切换到对应语言首页。 |
| ABOUT / SOLUTION / PRODUCT / AI / PARTNERS | 浏览一级页面 | `/about/`、`/solution/`、`/product/`、`/ai/`、`/partners/` | 当前页 ABOUT 不重复跳转亦可。 |
| 顶部“预约演示” | 预约产品演示 | `/contact/` | 进入统一咨询页的预约演示入口。 |
| Hero“预约沟通” | 发起沟通 | `/contact/` | 进入统一咨询页。 |
| Hero“了解 HOMEVISTA” | 了解可提供的产品 | `/product/` | 依据按钮语义进入产品页；不另建关于我们详情页。 |
| 收尾“预约沟通” / “合作咨询” | 发起销售或合作咨询 | `/contact/` | 由联系页承接不同咨询意图。 |
| 页尾隐私政策 / 用户协议 | 查看法律文本 | `/privacy/`、`/terms/` | 页面待设计，不影响路由定义。 |

- 对外语言为英文、日文、繁体中文；简体中文仅作内部校对，不出现在前台语言切换入口。
- 语言切换后须保留当前页面与对应语言路径；全部链接、CTA 与页尾文案均随语言切换。

## 6. 国际化文案交付

- 开发必须使用《05_关于我们_国际化文案.md》中的对应语言文案及逐语言 SEO/OG 信息；不得运行时机器翻译或混用语言。
- 英文、日文、繁体中文为对外稿，发布前须完成业务与母语校对。画板内“公司与团队事实”“客户与专业证明”的占位内容不得替换为未经确认的事实。

## 7. 待确认项

- 项目数量、地区、团队与专业证明的正式内容来源和授权范围。
- 资料使用边界的实际隐私/权限流程（如需）。
- 移动端的最终视觉校准、悬停、焦点、加载和异常画板。