# HOMEVISTA 官网 4.0 解决方案页 UI 开发 PRD

版本：v0.2
对应画板：`解决问题7/27`（1920 × 6405）
设计原型：[Figma 解决方案画板](https://www.figma.com/design/Nf4ZCCRjxhLhqwSmhJPJb1/%E5%AE%98%E7%BD%91?node-id=1-1767&p=f&t=cAiS7R9XYMU85y7K-0)

---

## 修订记录

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

---

## 1. 页面范围

本 PRD 覆盖解决方案页的 Figma 视觉、已确认导航与 CTA 去向、响应式和国际化交付。复用全站顶部导航，其中 `SOLUTION` 为青色高亮，及统一页尾。所有图片均为可替换素材，不作为发布前置条件。

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

| 顺序 | UI 模块 | Figma 中可见的内容与控件 | 已表达状态 |
| --- | --- | --- | --- |
| 1 | Hero | “让每一次看房，延续到下一次商谈”、说明、描边 CTA、青色 CTA 与住宅线稿主视觉。 | 双 CTA 主/次层级。 |
| 2 | 住宅类型 | “不同住宅，需要讲清不同的价值”；新建公寓、独栋住宅与别墅两张圆角图片卡，各含名称和短说明。 | 两卡并列，无选中态。 |
| 3 | 看房旅程 | “从提前了解，到回家继续比较”；到访前、接待中、离场后、再沟通四阶段沿纵向虚线排列，配手机、讲解、客户比较、销售现场图片。 | 说明性时间线。 |
| 4 | 资料比较轮播视觉 | “客户更容易比较，销售更容易准备”；中间大图片卡、左右露出相邻卡、圆点分页和暂停图标。 | 仅可见默认视觉控件，未提供交互原型连线。 |
| 5 | 项目使用流程 | “一个住宅项目，如何使用 HOMEVISTA”；浅灰步骤框、青色三角连接符、横向资料输入框和青色 CTA。 | 流程图；红色备注为设计说明，不进入前台。 |
| 6 | 收尾 CTA 与页尾 | “为住宅找到更合适的销售体验”、青色 CTA、描边 CTA、颗粒 Logo 和页尾。 | 双 CTA 主/次层级。 |

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

- 资料比较轮播只还原默认单张主卡、两侧露出卡、圆点分页和暂停图标的视觉；不绑定分页点击、自动播放、暂停、手势或键盘行为。
- Figma 未定义轮播的交互原型连线、自动播放、循环方式、手势、键盘、素材类型和暂停后的恢复规则；不得自行补充，待设计补充。
- 住宅类型卡和流程图为静态说明，不绑定上传、创建项目或未定义详情页。CTA、导航、语言入口和已确认页尾链接按第 5 节跳转。

## 4. 视觉与验收

1. 以 Figma 桌面画板为视觉基线；同时支持桌面、平板和手机端。移动端首版可由开发按内容层级重排，后续由设计师校准。
2. 两张住宅类型卡、四阶段旅程图片、纵向虚线与节点必须完整保留。
3. 轮播视觉必须保留两侧露出卡、中央主卡、分页圆点和暂停图标；不验收点击、自动播放或暂停行为。
4. 项目使用流程必须还原步骤框、连接三角、资料输入框和青色 CTA；不显示红色设计备注。
5. 不实现住宅详情、上传资料、项目创建、报价或预约表单；已定义的导航与咨询跳转除外。
6. 非视觉质量要求遵循关联 NFR，最终采用人工 Figma 对照验收。

## 5. CTA、导航与语言

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

- 住宅类型卡与轮播内容不设独立路由，避免制造未设计的详情页。
- 对外语言为英文、日文、繁体中文；简体中文只作内部校对。语言切换后须保留当前页面与同语言链接。

## 6. 国际化文案交付

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

## 7. 待设计补充

- 轮播的时间、循环、手势、键盘、素材与加载失败规则。
- 住宅类型卡的最终内容来源与视觉素材。
- 流程图中各步骤与资料框的实际数据/业务行为。
- 移动端最终视觉校准、悬停、焦点和异常画板。