# C端线框原型基线与首批制作方案

版本：v0.4

状态：P0/P1 原型已实施并完成技术预检，待人工评审

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-04 | v0.1 | 初始创建 / 重大范围确认 | 确认首批覆盖 P0/P1 页面与 Widget，以验证 Widget 自由组合为首要目标；采用浅色低保真线框，P2 页面暂不制作，并将住户展示页纳入 P0。 |
| 2026-08-04 | v0.2 | 重大：空间体验原型规则调整 | WALK / VR 使用一个空间体验 Widget 和统一 iframe 承载；1208 原型只保留一个 WALK 入口。 |
| 2026-08-04 | v0.2 | 非重大：实施状态同步 | 10 个 P0/P1 页面、组合验证台及适用交互状态已完成，并通过五档响应式与构建验证。 |
| 2026-08-05 | v0.2 | 非重大：评审状态纠正 | 将自动检查和 DeepSeek 评审明确为人工评审前预检，不再表述为人工验收完成。 |
| 2026-08-06 | v0.3 | 重大：恢复 WALK / VR 独立 Widget | 原型按两个 P1 Widget 表达 WALK、VR，并继续复用同一 iframe 承载组件；1208 只配置 WALK。 |
| 2026-08-11 | v0.4 | 重大：WALK / VR 内容组件化 | 原型不再将 WALK、VR 表达为独立 Widget，而是由住户、样板间、共有部等调用方直接传入内容并调用沉浸组件。 |
| 2026-08-11 | v0.5 | 重大：全量 Widget 定义同步 | 原型同步项目概览、楼栋展示、共有部、样板间、住户表、眺望集与周边地图的已确认内容及交互口径。 |

## 1. 文档目的

本方案用于指导新版 VISTA C 首批原型重构，先验证页面内容结构、Widget 组合方式、基础交互和响应式关系，为后续视觉设计和正式开发提供可靠输入。

本轮原型不是成品视觉稿，不承担品牌风格、色彩体系、液态玻璃、正式动效或视觉表现定稿。正式页面、Widget 和通用组件的业务规则仍分别以对应 PRD 为准，本方案不重复定义其内部业务逻辑。

## 2. 已确认原则

1. 首批覆盖 P0、P1 页面与 Widget；P2 页面暂不制作。
2. 首要验证目标是 Widget 能否在页面配置中按业务需要组合、排序、启用和移除，并保持各自业务规则与状态独立。
3. “自由组合”不是任意拼接。页面仍须有明确顾客任务，Widget 必须满足适用对象、内容关联、权限和数据前提；不允许为了展示组合能力而建立没有用户价值或业务关系的页面。
4. 原型采用白底或浅色底，以中性色文字、边框、占位块和普通表单控件表达；不实现液态玻璃、品牌配色、装饰性渐变、氛围视觉和正式动效。
5. 现有 C端 demo 仅用于确认已有功能、内容项和典型交互。Logo、建筑图片、户型图、地图等可作为内容素材，不复制 demo 的布局、导航位置、卡片列数、工具条或视觉风格。
6. VISTA C 设计系统只用于核对已有组件的功能、状态和使用边界；正式视觉与设计系统未补齐的布局、颜色、动效由设计师后续处理。
7. 移动端优先定义内容顺序与触控；PAD/PC 只调整并列关系、列数、面板位置和可视范围，不改变核心任务、业务规则或 Widget 顺序含义。

## 3. 首批范围

### 3.1 P0 页面

| 页面 | 主要验证内容 | 首批要求 |
| --- | --- | --- |
| 项目概览 | 封面、项目简介、项目地址、开发商名称 | 独立访问；不展示项目名称、卖点、导航或转化动作。 |
| 户型浏览 | 户型列表、筛选、楼栋并列分组、媒体查看 | 多楼栋同时展示其分组；验证空结果和图片失败。 |
| 周边地图 | 地图、分类筛选、POI 详情与地图控制 | 包含指北针、回到当前位置、路线开关、缩放、街景及卫星/交通视图控制。 |
| 住户展示 | 一个指定住户的户型、楼层位置、外景与关联 WALK/VR 内容 | 不挂载页面导航；最多关联一种 WALK 或 VR 内容。1208 只配置 WALK；P2 费用试算页面不可用时隐藏入口。 |

### 3.2 P1 页面

| 页面 | 主要组合 | 首批边界 |
| --- | --- | --- |
| 建筑与楼层 | 3D大楼 + 断面图与立面图 + 楼层信息 | 多建筑通过入口切换，单次仅展示一栋；楼层页展示当前楼层住户及有效外景入口。 |
| 共有部 | 共有部列表 + 内容对象卡片 + 媒体查看器 | 多建筑按建筑分组同时展示；不提供筛选。 |
| 样板间与空间体验 | 样板间列表 + 沉浸内容承载与控制 | 仅展示名称、代表图和有效 WALK/VR；验证 iframe 的启动、退出、禁止嵌入、失败和设备不支持状态。 |
| 住户表 | 住户表 + 筛选 + 可售住户详情 + 共有部体验入口 | 多建筑一次仅显示一栋，支持切换；不提供住户比较。 |
| 眺望与日影 | 眺望集 + 选择器 + 媒体查看器 | 辅助性文字说明在页面左上角显示；首批只制作 P1 眺望内容，隐藏日影入口。 |
| 项目资料 | 资料集 + 单个文件夹展示 + 搜索/媒体查看器 | 验证同一资料对象在目录页和指定文件夹页的复用。 |

### 3.3 暂不制作的 P2 页面

日影、色彩选择、家具摆放、活动日历、费用与贷款试算、来场预约、外部服务七个 P2 正式页面，以及 360转大楼独立体验，本轮只保留 PRD，不制作可运行页面。P0/P1 页面依赖 P2 能力时，首批使用“该能力不可用”的合法配置，并统一隐藏对应标签、按钮、入口和跳转节点；不得制作虚假的可点击入口或空白页面。

## 4. Widget 自由组合验证方式

### 4.1 原型验证工具

原型入口提供一个仅供产品、设计、开发评审使用的“组合验证台”，用于选择预设页面配置并观察结果。该工具不是 C端顾客功能，不进入正式页面、Widget 或通用组件清单。

组合验证台至少支持：

- 切换预设页面配置；
- 查看当前页面使用的有序 Widget 清单；
- 在允许范围内调整顺序、启用或移除可选 Widget；
- 切换正常、加载、空内容、局部失败等样例状态；
- 切换 320px、375px、768px、1024px、1440px 参考视口；
- 一键恢复预设配置，避免评审过程中状态不可追溯。

组合验证台不承担 B端页面配置能力，不模拟保存、发布、权限设置或 Widget 注册管理；这些行为仍以 A/B 端需求为准。

### 4.2 组合验证规则

| 验证维度 | 通过条件 |
| --- | --- |
| 复用 | 同一 Widget 使用同一套内容、交互和状态规则进入不同合法页面组合，不复制一份页面专用实现。 |
| 顺序 | 页面通过有序 Widget 实例清单决定展示顺序；调整顺序不改变 Widget 内部字段和业务含义。 |
| 启停 | 移除或停用一个可选 Widget 后，其余 Widget 与通用组件仍可正常展示。 |
| 多实例 | 仅允许 PRD 明确支持多实例的 Widget 重复出现；不因技术上可重复渲染就默认业务允许。 |
| 局部失败 | 单个 Widget 加载失败、数据为空或素材失效时，不拖垮其他 Widget，不升级为整页 403/404。 |
| 通用组件 | 项目识别、导航、联系、筛选、媒体查看、详情面板、沉浸控制和状态反馈按各自规则挂载，不伪装成 Widget。 |
| 权限 | 业务内容加载前先完成页面访问判断；住户展示等受限内容不得在认证或授权前泄露摘要。 |
| 对象一致性 | 同一页面内的 Widget 默认必须消费同一项目的已发布内容；涉及住户、楼层、样板间或眺望时，还须满足各自 PRD 的直接关联或允许的参考关联。 |

### 4.3 首批组合样例

除 10 个 P0/P1 正式页面预设外，组合验证台增加以下三个评审样例，用于证明组合能力，不作为新增正式页面：

1. 项目介绍组合：项目概览 + 周边地图 + 共有部列表。三个 Widget 必须属于同一项目，不允许在页面内切换为不同项目内容。
2. 看房决策组合：户型卡片列表 + 住户表 + 眺望集。住户与户型必须来自同一项目；眺望素材须满足其楼层、朝向或指定位置条件，不得以相近素材补位。
3. 指定住户组合：住户展示 + 与当前住户有效关联的一种 WALK 或 VR 内容。主对象只能是一个住户；体验必须与该住户直接关联，或按 PRD 明确标为参考样板间。1208 样例固定为 WALK，不配置 VR。

样例 1、2 可调整 Widget 顺序并关闭可选 Widget；样例 3 的住户展示始终是唯一主对象，不允许添加其他住户切换、住户表或页面导航。

## 5. 线框表达基线

### 5.1 视觉边界

- 页面背景使用白色或浅灰色；正文、辅助文字和分割线使用中性色。
- 内容区域使用普通矩形、边框、标题、文本、图片或地图占位表达，不通过颜色制造层级。
- 真实 Logo、图片、户型图、地图可以直接使用，但只用于说明内容类型和裁切关系。
- 按钮、标签、选择器、弹窗和面板使用常规线框控件，不设计品牌皮肤。
- 不使用大面积深色背景、墨绿色、装饰渐变、夸张字号、悬浮氛围光、玻璃模糊或营销落地页式排版。

每个首批页面应保留一条 demo 对照记录，分别写明“从 demo 核对了哪些功能或内容”和“新版线框采用了什么不同的信息组织”。如果只是更换颜色，却继续沿用 demo 的全屏首屏、导航位置、浮动工具条、固定卡片列数或相同区块主次关系，不能通过本轮验收。

### 5.2 信息与交互表达

每个页面至少表现：

- 页面目标和当前内容对象；
- Widget 边界与排列顺序；
- 主操作、次操作及操作结果；
- 加载、空内容、局部失败、内容不可用状态；
- 弹层、媒体查看、筛选、详情面板、沉浸体验进入与退出等基础交互；
- P2 能力未进入首批时的条件隐藏结果，不展示无效入口。

## 6. 响应式基线

| 视口 | 主要检查 |
| --- | --- |
| 320px | 最小手机宽度下的单列内容、触控目标、文字换行、媒体查看和操作可达性。 |
| 375px | 移动端主要设计与评审基线。 |
| 768px | PAD 竖屏下的双列可能性、面板上下关系和比较布局。 |
| 1024px | PAD 横屏或小型桌面下的内容与详情并列关系。 |
| 1440px | PC 下的最大内容宽度、列数、地图/媒体与面板占比。 |

响应式验收以真实内容重排为准，不使用手机外框模拟，不允许通过整体缩放、横向滚动整页或隐藏核心内容完成适配。

每个 P0/P1 页面在进入制作前补齐自己的五档响应式检查表，至少明确以下内容：

- 各视口下 Widget 是单列、并列还是主次分栏；
- 地图、媒体、列表与详情面板的先后顺序；
- 详情面板使用页面内区块、侧栏、底部面板或全屏层的方式；
- 筛选、比较、媒体查看和沉浸控制的触控入口与关闭方式；
- 任何视口下不得隐藏的核心信息和主操作。

线框阶段不要求精确像素比例，但必须在原型中实际表现上述布局行为，不能只在文档中声明“支持响应式”。

住户展示页作为独立分享入口，不新增固定 HOME、页面导航或假定来源的“返回上一页”按钮。顾客从独立链接进入后可结束浏览或使用浏览器环境关闭/返回；从空间体验 iframe 退出时必须回到当前住户页的原调用区块。

## 7. 制作顺序

1. 建立浅色线框基础样式、统一页面运行层、Widget 注册与组合验证台。
2. 完成四个 P0 页面及登录、403、404，先验证 320px、375px。
3. 完成六个 P1 页面预设，并补三个跨页面组合评审样例。
4. 补齐加载、空内容、局部失败、不可用、媒体查看、筛选和沉浸体验返回状态。
5. 完成 768px、1024px、1440px 的响应式重排验证。
6. 对照当前 C端 demo 做功能覆盖检查，只补遗漏的内容或交互证据，不复制其布局与视觉。

## 8. 验收标准

| 验收编号 | 验收条件 |
| --- | --- |
| AC-WF-01 | 首批原型包含 4 个 P0 页面、6 个 P1 页面、组合验证台，以及登录、403、404；不包含 7 个 P2 正式页面及 360转大楼独立体验。 |
| AC-WF-02 | 原型整体为白底或浅色底的低保真线框，不出现现有墨绿深色主题、液态玻璃或未经确认的品牌视觉。 |
| AC-WF-03 | 至少三个组合评审样例可通过配置切换；允许的 Widget 可调整顺序或停用，且其内部规则不随页面变化。 |
| AC-WF-04 | 任一 Widget 的加载、空内容或局部失败不导致同页其他 Widget 与通用组件消失。 |
| AC-WF-05 | P2 页面没有可运行路由；P0/P1 页面中依赖 P2 的条件入口在能力不可用时隐藏。 |
| AC-WF-06 | 住户展示页作为 P0 独立页面可访问，只显示一个指定住户，不挂载页面导航；1208 只显示一个 WALK 内容入口，可通过共用组件启动 iframe 并返回。 |
| AC-WF-07 | 320px、375px、768px、1024px、1440px 下均发生真实内容重排，核心任务、信息顺序和交互结果保持一致。 |
| AC-WF-08 | demo 素材仅用于 Logo、图片、户型图、地图等内容表达；页面布局和视觉没有照搬 demo。 |
| AC-WF-09 | 组合验证台明确标记为评审工具，不被误认为顾客侧正式功能或 B端配置能力。 |
| AC-WF-10 | 每个 P0/P1 页面均有五档响应式检查表，原型实际表现区块顺序、列数和面板模式的变化，不以文字声明代替验证。 |
| AC-WF-11 | 每个首批页面均有 demo 功能与新版信息组织的对照记录；仅换配色但保留 demo 或旧原型结构不算重构完成。 |

## 9. 明确不做

- 不在本轮确定品牌色、正式字体、圆角、阴影、动效、玻璃效果或完整视觉规范。
- 不把 P2 页面做成空壳、不可用跳转或伪完成状态。
- 不新增 B端页面配置、发布、授权或 Widget 注册管理原型。
- 不把 demo 的页面结构、导航、工具条或视觉皮肤作为新版 VISTA 的页面模板。
- 不因“自由组合”允许违反业务对象、内容关联、权限或页面任务的任意拼接。

## 10. 关联文档

- [C端交付总览与阶段路线图](../00-C端交付总览与阶段路线图.md)
- [C端页面开发清单](00-页面开发清单.md)
- [Widget 开发清单与优先级](../02-Widget体系/01-Widget开发清单与优先级.md)
- [住户展示页 PRD](17-住户展示页PRD.md)
- [住户展示 Widget PRD](../02-Widget体系/Widget需求/25-住户展示Widget-PRD.md)
- [通用组件开发清单](../03-通用组件体系/00-通用组件开发清单.md)
- [P0/P1 线框原型技术预检记录](19-P0-P1线框原型技术预检记录.md)