# HOMEVISTA 模块化展示产品方案：UI 页面需求报告

## 一、UI 设计目标

HOMEVISTA 模块化后的 UI 不能只是在现有系统上增加更多菜单，也不能把所有功能一次性展示给客户。

UI 的核心目标是：

```text
让客户知道现在看什么，
为什么要看这个，
它和其他选择有什么差异，
下一步应该做什么。
```

这套 UI 应同时服务两个入口：

| 入口 | 使用者 | 核心任务 |
|---|---|---|
| 客户入口 | 购房客户 | 打开项目链接后，快速看懂项目、户型、空间、视野和下一步预约方式 |
| 销售入口 | 销售人员 | 根据客户类型和客户决策阶段，选择合适的讲解路径并推进转化 |

## 二、全盘 UI 设计思路

UI 设计不能只按第一版功能画几个页面，而要先建立完整的信息架构。第一版可以只开发其中一部分，但整体设计上必须同时考虑客户前台、销售演示、内部配置、AI / Codex 编辑和未来智能辅助。

核心原则是：

**全盘设计，分期落地。**

| UI 层级 | 使用者 | 主要作用 | 第一版处理方式 | 第二版扩展方向 |
|---|---|---|---|---|
| 客户展示层 | 购房客户 | 看项目、看户型、看样板间、看眺望、预约联系 | 做项目入口、单资产展示、组合展示、比较和预约 | 根据客户行为展示更合适的内容入口 |
| 销售演示层 | 销售人员 | 按客户类型和阶段选择讲解路径，带客户看内容 | 做演示方案选择和路径演示 | 自动生成新路径草稿、提示路径缺失 |
| 内容配置层 | 配置人员、产品人员 | 管理项目资料、模块、资产、页面文案、比较说明 | 做结构化字段和基础配置 | 增加资料完整性检查和批量优化 |
| AI / Codex 编辑层 | 配置人员、销售人员、产品人员 | 导出资料、辅助编辑、人工确认、回写系统 | 做导出、编辑结果确认、回写入口 | 做快速检查、版本建议、多语言批量处理 |
| 数据复盘层 | 销售经理、管理层 | 查看客户行为、路径效果、预约转化 | 先预留行为记录和基础查看 | 生成客户行为摘要、销售跟进建议、管理复盘摘要 |

这意味着 UI 不应只设计“客户最终看到的页面”，还要设计“内部人员如何管理页面背后的资料结构”。

第一版 UI 可以克制开发，但设计稿中应提前体现以下全局关系：

```text
项目资料
→ 模块 / 资产
→ 展示页面
→ 讲解路径
→ 比较页面
→ 预约转化
→ 行为记录
→ Codex 辅助编辑 / 人工确认回写
```

如果第一版只画客户展示页，而不考虑配置、导出、回写和行为记录，第二版加入 AI 辅助时会很容易返工。

## 三、UI 核心原则

| 原则 | 说明 |
|---|---|
| 不暴露全部内容 | 客户只看到已购买、已启用、与当前路径相关的内容 |
| 单页面解决单问题 | 每个页面只服务一个主要判断，不做杂乱功能堆叠 |
| 单模块也完整 | 只购买一个模块时，也要像完整产品，而不是残缺系统 |
| 路径优先于菜单 | 销售讲解时优先按客户类型和阶段进入路径，而不是面对大菜单 |
| 比较突出差异 | 比较页要帮助客户判断，不只是堆数据 |
| 结束必须转化 | 路径或比较结束后，要有预约、联系销售、下载资料等动作 |
| 移动端可分享 | 客户通过分享链接打开时，页面要清楚、轻量、可继续操作 |
| AI 可再编辑 | 页面文案、路径说明、推荐理由和资料摘要应能被 AI / Codex 读取、修改并回到页面配置中 |

## 四、页面总览

| 页面 | 主要使用者 | 页面目的 |
|---|---|---|
| 项目入口页 | 购房客户、销售人员 | 进入项目后知道这是哪个项目、可以看什么 |
| 单资产展示页 | 购房客户 | 单独购买一个资产时也能形成完整体验 |
| 组合展示页 | 购房客户、销售人员 | 展示已购买或已启用的多个资产 |
| 演示方案选择页 | 销售人员 | 按客户类型和客户阶段选择讲解路径 |
| 路径演示页 | 销售人员、购房客户 | 像 PPT 一样按顺序讲解 |
| 户型比较页 | 购房客户、销售人员 | 比较 2-3 个户型差异 |
| 样板间比较页 | 购房客户、销售人员 | 比较空间体验、装修风格和生活场景 |
| 眺望比较页 | 购房客户、销售人员 | 比较楼层、朝向、视野和景观价值 |
| 房源综合比较页 | 销售人员、购房客户 | 对比具体房源并说明推荐理由 |
| 预约转化页 | 购房客户 | 预约看房、联系销售、下载资料 |
| 客户行为记录页 | 销售人员、销售经理 | 查看客户看过什么、关注什么 |
| AI 内容编辑入口 | HOMEVISTA 配置人员、销售人员 | 让 Codex 快速读取当前页面、路径或比较内容，并生成可回写的修改建议 |

## 五、客户入口页面

### 1. 项目入口页

页面目的：让客户打开链接后，立刻知道这是哪个项目、可以看哪些内容、下一步怎么进入。

建议内容：

| 区域 | 内容 |
|---|---|
| 项目信息 | 项目名称、主视觉、基础说明 |
| 已启用资产入口 | 3D 大楼、虚拟样板间、眺望集、户型图、资料集等 |
| 推荐路径入口 | 项目认知、深度看房、房源比较等 |
| 转化入口 | 联系销售、预约看房、下载资料 |

注意：客户未购买或未启用的模块不应出现在入口中。

### 2. 单资产展示页

适用于客户只购买一个模块的情况，例如只购买虚拟样板间、眺望集或 3D 大楼。

页面目的：让单个模块看起来是完整产品，而不是完整系统里缺了一部分。

示例：虚拟样板间单资产页

| 区域 | 内容 |
|---|---|
| 项目名称 | 当前项目基本识别 |
| 主视觉 | 虚拟样板间主图或入口 |
| 户型选择 | 如有多个户型，可切换 |
| 体验入口 | 进入看房 |
| 关联动作 | 联系销售、分享链接、预约 |

不应出现：

- 3D 大楼
- 住户表
- 周边地图
- 贷款计算器
- 其他未购买模块

### 3. 组合展示页

适用于客户购买多个模块但未必购买完整数字售楼处的情况。

页面目的：清楚展示已购买模块，不让页面变成杂乱菜单。

示例：客户购买 3D 大楼 + 眺望集 + 虚拟样板间

| 页面区域 | 内容 |
|---|---|
| 项目主视觉 | 项目形象和基础信息 |
| 模块入口 | 3D 大楼、眺望集、虚拟样板间 |
| 推荐顺序 | 先看建筑，再看视野，再看样板间 |
| 转化入口 | 联系销售、预约看房、分享 |

## 六、销售入口页面

### 1. 演示方案选择页

页面目的：帮助销售根据客户情况快速选择讲法，而不是从全部功能菜单中临时找内容。

推荐流程：

```text
选择客户类型
→ 选择客户当前决策阶段
→ 查看推荐演示方案
→ 开始讲解 / 调整顺序
```

客户类型建议：

| 客户类型 | 讲解重点 |
|---|---|
| 首次置业客户 | 项目基础信息、户型适配、预算可行性 |
| 预算敏感客户 | 价格区间、可售房源、贷款测算 |
| 改善型客户 | 户型升级、空间尺度、景观、生活品质 |
| 家庭居住客户 | 房间数量、动线、收纳、学校、生活配套 |
| 投资型客户 | 区位价值、价格、流动性、房源性价比 |
| 高净值客户 | 景观、楼层、私密性、装修品质、项目形象 |
| 远程客户 | 项目整体、空间体验、资料完整性 |
| 犹豫比较客户 | 户型、楼层、价格、景观横向比较 |

客户阶段建议：

| 阶段 | UI 应推荐的路径 |
|---|---|
| 初次了解 | 项目认知路径 |
| 兴趣判断 | 兴趣判断路径 |
| 深度看房 | 深度看房路径 |
| 房源比较 | 房源比较路径 |
| 预约转化 | 预约转化路径 |

### 2. 路径演示页

页面目的：销售进入某条路径后，可以像 PPT 一样顺序讲解项目内容。

必须具备：

| UI 对象 | 要解决的问题 |
|---|---|
| 当前路径名称 | 知道当前讲的是哪套方案 |
| 当前步骤标题 | 知道现在看什么 |
| 进度提示 | 知道当前第几步、后面还有什么 |
| 上一步 / 下一步 | 销售自然切换，不必回大菜单 |
| 路径内跳转 | 客户临时关注某项内容时，可以跳到相关资产或比较页 |
| 路径切换 | 可从户型讲解切到眺望比较、预算筛选等 |
| 结束动作 | 预约、联系销售、查看资料、保存推荐房源 |

路径演示状态下，应弱化杂乱功能入口，强化当前讲解顺序。

## 七、比较页面

比较页面是 HOMEVISTA 从“展示系统”升级为“辅助决策系统”的关键。

比较页面的 UI 重点不是热闹，而是清楚、可判断、能推进下一步。

### 1. 通用比较页结构

| 页面区域 | 内容 | 目的 |
|---|---|---|
| 比较标题 | 例如“3 个推荐户型比较” | 让客户知道当前比较什么 |
| 客户需求提示 | 预算、家庭结构、景观偏好等 | 让比较有依据 |
| 对比对象 | 户型 A/B/C 或房源 A/B/C | 明确参与比较的对象 |
| 核心指标 | 面积、价格、楼层、朝向、景观、状态 | 用事实支撑比较 |
| 视觉内容 | 户型图、样板间图、眺望图、楼栋位置 | 帮客户形成直观判断 |
| 差异说明 | 每个对象优势和限制 | 避免客户看不懂差异 |
| 推荐结论 | 推荐哪一个，为什么 | 帮销售完成说明 |
| 下一步动作 | 查看样板间、预约、联系销售、下载资料 | 把比较引向转化 |

### 2. 户型比较页

比较内容：

| 维度 | 说明 |
|---|---|
| 户型结构 | 2LDK、3LDK、4LDK 等 |
| 面积 | 建筑面积、使用感、空间尺度 |
| 房间配置 | 卧室、客厅、厨房、卫浴、收纳 |
| 生活动线 | 入户、客餐厅、卧室、阳台之间的关系 |
| 适合人群 | 单身、夫妻、小家庭、三代同住、投资 |
| 价格区间 | 总价、单价、月供参考 |
| 推荐理由 | 为什么建议客户优先看这个户型 |

下一步：进入对应虚拟样板间、加入房源比较、预约看房。

### 3. 样板间比较页

比较内容：

| 维度 | 说明 |
|---|---|
| 空间尺度 | 客厅、卧室、厨房、卫浴体感 |
| 生活动线 | 从玄关到客厅、卧室、阳台的使用顺序 |
| 装修风格 | 不同风格对客户想象的影响 |
| 家具布置 | 有家具、无家具、不同家具方案 |
| 采光感受 | 窗、阳台、朝向带来的空间感 |
| 适合人群 | 自住、家庭、投资出租、改善型客户 |

下一步：查看样板间、选择偏好、联系销售。

### 4. 眺望比较页

比较内容：

| 维度 | 说明 |
|---|---|
| 楼层 | 低层、中层、高层的视野差异 |
| 朝向 | 南向、东向、西向、角部房源等 |
| 景观 | 城市景观、绿地、水景、道路、邻栋关系 |
| 遮挡 | 是否被建筑物、树木、设施遮挡 |
| 价格差异 | 视野差异对应的价格差异 |
| 推荐理由 | 某一楼层或朝向为什么更适合客户 |

下一步：选择楼层、查看房源、进入房源综合比较。

### 5. 房源综合比较页

页面目的：帮助销售解释为什么推荐某几套房。

建议默认比较 2-3 个对象。

| 比较维度 | 房源 A | 房源 B | 房源 C |
|---|---|---|---|
| 户型 | 3LDK | 3LDK | 4LDK |
| 面积 | 74㎡ | 76㎡ | 84㎡ |
| 楼层 | 5F | 7F | 9F |
| 价格 | 参考价格 | 参考价格 | 参考价格 |
| 眺望 | 中等 | 较好 | 最好 |
| 状态 | 可售 | 商谈中 | 可售 |
| 适合客户 | 预算优先 | 综合均衡 | 景观优先 |

页面底部应有：

- 推荐结论
- 查看推荐户型
- 预约看房
- 联系销售

## 八、预约转化页

页面目的：客户看完路径或比较页后，知道下一步怎么做。

建议内容：

| 区域 | 内容 |
|---|---|
| 推荐房源摘要 | 客户刚才看过或销售推荐的房源 |
| 下一步选项 | 预约看房、联系销售、下载资料、视频沟通 |
| 联系入口 | 电话、表单、即时沟通、销售名片 |
| 资料入口 | 项目资料、户型资料、贷款信息 |

路径结束或比较结束后，不应让客户停在最后一页，应自然进入转化动作。

## 九、UI 第一版优先级

第一版不建议一次性做所有页面，应优先验证销售讲解和客户比较是否成立。

| 优先级 | 页面 / 能力 | 原因 |
|---|---|---|
| P0 | 项目入口页 | 所有客户进入项目的第一屏 |
| P0 | 单资产展示页 | 验证模块化销售是否成立 |
| P0 | 演示方案选择页 | 验证销售是否愿意按客群和阶段选择路径 |
| P0 | 路径演示页 | 验证“像 PPT 一样讲解”是否成立 |
| P0 | 房源综合比较页 | 最直接支持销售推荐和客户选择 |
| P1 | 户型比较页 | 支持深度看房和户型判断 |
| P1 | 眺望比较页 | 支持楼层和景观价值说明 |
| P1 | 预约转化页 | 连接展示和销售动作 |
| P2 | 样板间比较页 | 可在户型与样板间数据成熟后增强 |
| P2 | 客户行为记录页 | 可与分析系统评估后推进 |
| P2 | AI 内容编辑入口 | 可先做成导出 / 导入或复制到 Codex 的工作流，不必一开始内嵌复杂 AI 界面 |

## 十、AI / Codex 相关 UI 要求

AI / Codex 融合不一定要在第一版做成一个复杂聊天窗口。更重要的是让 UI 中的关键内容可以被快速读取和再次编辑。

第一版 UI 只围绕四个动作设计，不做复杂 AI 聊天界面：

| 第一版动作 | UI 要求 |
|---|---|
| 资料结构化 | 配置界面能清楚看到项目、模块、户型、房源、眺望、讲解路径和比较页的字段 |
| 导出给 Codex | 当前项目、当前路径或当前比较页可以导出为 Markdown / 表格 / JSON |
| Codex 辅助编辑 | 导出内容可用于生成页面文案、讲解路径、推荐理由、多语言版本 |
| 人工确认后回写 | Codex 修改后的内容不自动发布，配置人员确认后再回写到对应字段 |

UI 设计时应避免只给人看一个最终页面，而要让“页面背后的资料结构”也能被管理和编辑。

第一版建议采用轻量方式：

```text
查看结构化资料
→ 导出给 Codex
→ Codex 辅助编辑
→ 人工确认
→ 回写系统配置
```

不建议第一版在客户前台展示 AI 聊天入口，也不建议 AI 直接修改并发布页面内容。

## 十一、UI 验收标准

| 验收项 | 标准 |
|---|---|
| 单资产体验 | 只启用一个资产时，页面仍然完整，不出现无关菜单 |
| 已购内容展示 | 客户只看到已购买或已启用内容 |
| 演示方案入口 | 销售能按客户类型和客户阶段进入至少 2 条路径 |
| 路径演示 | 支持上一步、下一步、当前进度和结束动作 |
| 比较页面 | 可以清楚比较 2-3 个对象 |
| 比较结论 | 页面能展示差异说明和推荐理由 |
| 转化动作 | 路径或比较结束后，有明确预约或联系销售入口 |
| 移动端体验 | 客户通过分享链接打开时，能看懂当前页面和下一步动作 |
| AI 可编辑性 | 页面文案、路径说明和比较推荐理由可以被导出、编辑并回写 |