# HOMEVISTA VISTA C 端液态玻璃界面设计指导意见

版本：v0.1

状态：设计指导初稿；用于试点设计与评审，不代表全量页面改造已获确认

适用表面：VISTA C 顾客侧页面

适用角色：产品、UI/UX 设计、前端开发、测试、Codex

编制日期：2026-08-25

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 |
| --- | --- | --- | --- |
| 2026-08-25 | v0.1 | 初始创建 | 提炼 Apple Liquid Glass 六组官方资料，并结合当前 HOMEVISTA VISTA C 设计系统、实际 Demo、页面 PRD 和 2026-08-21 设计评审结论，形成适用边界、组件映射、状态要求、试点方案与验收建议。 |
| 2026-08-25 | v0.1 | 重大：交付评审补强 | 根据 DeepSeek 产品专家交付评审及 Codex 本地核验，补充试点参数基线门槛、第三方内容不可采样降级、模态/非模态焦点规则，并拆分地图、户型和响应式必验子项；不新增全局视觉参数。 |

## 0. 结论先行

HOMEVISTA 不应把“液态玻璃”理解为全页面透明化，也不应把普通半透明卡片统一包装成液态玻璃。建议采用以下产品定义：

> VISTA C 的液态玻璃是一套用于导航、切换、浮动控制和临时操作层的视觉与交互语言。它应让顾客更容易操作楼盘内容，同时尽量减少对图片、户型图、地图、VR、WALK 和 3D 场景的遮挡。

本指导意见形成六项核心结论：

1. **内容优先，控件后置。** 楼盘图片、户型图、地图和沉浸场景是内容主体；玻璃主要属于浮在内容上方的功能层。
2. **局部使用，不做全量覆盖。** 首页/二级页导航、系统顶栏、筛选、切换、媒体控制和浮动工具是优先对象；长文本、户型卡片列表、资料目录等内容层不应整体液态化。
3. **玻璃不等于液态。** 透明、模糊、边缘高光属于静态玻璃质感；触摸、点击、展开、切换时的形态和光影反馈才构成“液态行为”。
4. **可读性优先于材质纯度。** 背景复杂时必须增强分离、加深遮罩或切换到更稳定的表面；不能为了看见背景而牺牲文字和图标辨识度。
5. **VISTA C 是网页产品，不等同于原生 iOS。** Apple 资料用于理解设计原则，HOMEVISTA 需要自行定义网页端的视觉参数、降级方案和性能标准，不直接复制 Apple 系统控件或宣称原生等效。
6. **先试点再扩展。** 按已形成的评审方向，先完成周边地图与户型列表的完整页面试点，并同步验证状态、响应式、可访问性和性能，再决定其他页面的应用范围。

## 1. 文档目的与使用边界

### 1.1 文档目的

本文档用于解决以下问题：

- 将 Apple Liquid Glass 官方资料整理为团队可直接理解的中文要点；
- 判断哪些原则适合 HOMEVISTA VISTA C，哪些不能直接照搬；
- 为设计师提供页面、组件、状态和交互层面的设计依据；
- 为开发和测试提供可核对的实现边界与验收方向；
- 为后续完善 HOMEVISTA Design System 的 VISTA C 手册提供输入。

### 1.2 适用范围

适用于 VISTA C 的顾客侧和销售展示侧页面，包括但不限于：

- 项目首页与完整导航；
- 户型浏览、住户表、住户展示；
- 周边地图、建筑与楼层；
- 画廊、资料集、眺望集；
- VR、WALK、3D/GIS/2D 建筑；
- 色彩选择、家具摆放、样板间等沉浸或工具型页面；
- PC、PAD 和手机浏览形态。

### 1.3 不适用范围

- VISTA B 后台、配置、上传、权限和管理页面；这些页面继续使用 VISTA B 设计规则。
- Apple 原生应用的 SwiftUI、UIKit 或 AppKit 代码规范。
- Apple 品牌资产、SF Symbols 或系统控件的直接复制规则。
- 尚未写入对应 PRD 的新业务功能、权限、流程或数据字段。

### 1.4 文档效力

- 本文是**设计指导意见**，不是对全部 C 端页面进行视觉改造的授权。
- 本文不改变现有页面 PRD、Widget PRD、通用组件 PRD 的业务边界。
- 当前线框原型仍以既有线框基线为准；进入正式视觉试点后，才按本文制作地图与户型列表等试点页面。
- 本文标记为“待设计系统补充”的内容，不得由设计或开发自行解释为已确认规范。

## 2. 资料来源与证据层级

| 层级 | 资料 | 在本文中的用途 |
| --- | --- | --- |
| Apple 官方原则 | Human Interface Guidelines、WWDC 视频、Technology Overview | 说明 Liquid Glass 的目标、层级、材质、交互和可访问性原则。 |
| Apple 官方资源 | Apple Design Resources | 帮助理解系统控件、形状、结构和跨设备适配；不作为 HOMEVISTA 直接复制资产。 |
| HOMEVISTA 当前规范 | HOMEVISTA Design System 的 `docs/vista-c/`，核对版本 HEAD `533cc30ae87b3361c5ce2eb5bfee6a210b32e4cd` | 确认 VISTA C 已有导航、顶栏、图片栏、选择器、面板等组件规则。 |
| HOMEVISTA 当前需求 | `C端需求/` 下的页面、Widget、通用组件 PRD | 确保视觉建议不扩大业务范围。 |
| 现状参考 | `截图/C端实际Demo/` | 识别现有页面的信息密度、控件位置和内容复杂度；不作为新版布局规范。 |
| 会议结论 | `评审记录/2026-08-21-C端液态玻璃UI设计第三次评审会议纪要.md` | 确认先试点地图与户型列表、先做完整页面、同步验证性能的当前方向。 |

本文使用以下状态词：

| 状态 | 含义 |
| --- | --- |
| 现有规范 | HOMEVISTA Design System 或当前 PRD 已明确，可直接引用。 |
| 本文建议 | 基于 Apple 原则与 HOMEVISTA 场景形成的建议，需通过试点评审后再纳入正式设计系统。 |
| 待设计系统补充 | 当前设计系统没有给出足够规格，不能自行补成正式参数。 |
| 待产品确认 | 会改变范围、流程、权限、验收或对外承诺，需要产品决策。 |

## 3. Apple 六组官方资料中文版提炼

### 3.1 Human Interface Guidelines：Materials

官方资料：[Materials](https://developer.apple.com/design/human-interface-guidelines/materials)

#### 核心含义

- “材质”用于建立前景与背景之间的深度、层次和从属关系，不只是装饰效果。
- Liquid Glass 的主要职责是承载控件和导航，使它们浮在内容上方，同时尽量让内容保持可见。
- 内容层与功能层必须清楚分开。把玻璃铺进内容层，会造成层级混乱和不必要的视觉复杂度。
- 自定义玻璃效果应谨慎使用，只应强调最重要的操作和功能元素。
- Liquid Glass 有适应性较强的常规形态和透明度更高的清晰形态。高透明形态只适合丰富媒体背景，并且必须保证前景内容足够醒目、背景允许被压暗。
- 需要考虑降低透明度、提高对比度和减少动态效果等辅助功能情形。

#### 对 HOMEVISTA 的直接启示

- 地图、图片、户型图、VR、WALK、3D 场景属于内容层，不应整块变成玻璃。
- 导航、筛选、切换、浮动控制和临时菜单属于功能层，是最适合使用玻璃的区域。
- 户型卡片、住户信息、资料目录等高信息密度内容，应优先使用稳定内容表面，而不是高透明玻璃。

### 3.2 WWDC：Meet Liquid Glass

官方资料：[Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/)

#### 核心含义

- Liquid Glass 不只是模糊背景，而是通过折射感、边缘光、阴影和动态变化，让用户识别物体的形态、位置与层级。
- 材质需要根据背景亮暗、控件大小和当前交互自动调整，以保持控件清晰。
- 静止时应保持克制；用户触摸或操作时，控件可以通过形变、亮度或形态变化表现响应。
- 相关控件之间可以通过形态延展、融合和展开，表达“从哪里打开、打开了什么”。
- 玻璃最适合用于位于内容上方的导航层；不要把玻璃放入内容层，也不要形成玻璃叠玻璃。
- 色彩只用于强调主操作；如果所有控件都上色，主次关系会消失。
- 高透明形态只适合媒体内容丰富、允许压暗背景、前景符号或文字足够醒目的场景。

#### 对 HOMEVISTA 的直接启示

- 点击 Menu 后出现导航面板，应让用户感知面板来自 Menu，而不是无关联地突然出现。
- 地图筛选、楼栋切换、户型筛选等可通过形态延展表达来源与结果关系。
- 静态玻璃可用于保持界面安静；触摸、点击、切换和展开时再出现液态反馈。
- 不应给每张户型卡片、每个 POI 卡片都增加独立液态动画。

### 3.3 WWDC：Get to know the new design system

官方资料：[Get to know the new design system](https://developer.apple.com/videos/play/wwdc2025/356/)

#### 核心含义

- 设计系统需要同时处理视觉语言、信息结构和跨设备连续性，不能只改材质。
- 形状需要保持协调：外层容器、内层控件、设备或窗口边缘之间应形成一致的圆角和间距关系。
- 胶囊形适合触控和重点操作，但不应在高密度界面中把所有控件都做成大胶囊。
- 操作应按功能和使用频率分组；次要操作应进入更多菜单，避免工具栏拥挤。
- 页面层级应主要通过布局、分组和位置表达，不应依赖不断叠加背景、边框和装饰。
- 弹出层应能看出与触发按钮的来源关系；模态任务需要明确聚焦，非模态任务则应尽量不中断浏览。
- 同一功能在手机、PAD 和 PC 上可以改变形态和布局，但核心结构、含义和反馈必须一致。

#### 对 HOMEVISTA 的直接启示

- PC、PAD、手机不应各做一套互不相关的液态玻璃方案，应先定义组件共同结构，再做响应式变化。
- 系统顶栏和导航不能无限堆叠按钮；次要功能进入 Menu 或面板。
- 户型筛选、比较、分享、语言切换等应按任务和频率分组，避免看起来像一个连续但含义不明的大按钮。
- 页面滚动到固定顶栏或浮动工具下方时，需要明确内容与控件的分界，但不应额外制造多层模糊带。

### 3.4 Apple Design Resources

官方资料：[Apple Design Resources](https://developer.apple.com/design/resources/)

#### 核心含义

- Apple 提供 iOS、iPadOS、macOS 等平台的官方 UI Kit、图标制作模板、字体和设计工具。
- Figma 或 Sketch UI Kit 可用于理解系统控件的结构、形状、间距、状态和跨设备关系。
- SF Symbols、Icon Composer 等资源展示了 Apple 平台内图标与动态表达的组织方式。

#### 对 HOMEVISTA 的使用边界

- 可用于研究组件结构、触控形状、层级和状态表达。
- 不直接替换 HOMEVISTA 已有图标，不把 SF Symbols 当成 HOMEVISTA 图标库。
- 不从 Apple UI Kit 复制一套页面后更换 Logo；HOMEVISTA 应继续使用自己的内容模型、导航体系和品牌表达。

### 3.5 Adopting Liquid Glass

官方资料：[Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)

#### 核心含义

- 原生 Apple 应用优先使用系统组件，让系统自动获得新的材质和适配行为；自定义组件只在必要时使用玻璃。
- 采用新视觉前，应逐页检查应用结构、导航、工具栏、搜索、控件和自定义元素，而不是一次性统一加效果。
- 必须在不同显示环境和辅助功能设置下测试，包括降低透明度、提高对比度和减少动态效果。
- 过度使用玻璃会分散对内容的注意力，因此应限制在关键功能元素上。

#### 对 HOMEVISTA 的直接启示

- HOMEVISTA 网页没有 Apple 原生系统组件自动适配，需要建立自己的组件级规则和降级方案。
- 不能只在理想背景上验收；需要覆盖亮图、暗图、复杂地图、户型线稿、长列表和空内容。
- 每个自定义玻璃组件都应说明：为什么需要玻璃、默认状态、交互状态、不可用状态和降级状态。

### 3.6 Applying Liquid Glass to custom views

官方资料：[Applying Liquid Glass to custom views](https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views)

#### 核心含义

- 自定义玻璃可以设置形状、色调和交互响应，但材质应该直接作用于完整控件，而不是分别作用于控件内部每个小元素。
- 相邻玻璃元素需要作为同一组处理，才能获得统一背景采样和协调的形态变化。
- 控件可以在不同状态之间进行连贯的形态转换，使用户理解操作前后的关系。
- 自定义效果越多，越需要明确分组、状态和转换规则。

#### 对 HOMEVISTA 的直接启示

- 一组地图工具、媒体工具或导航入口应作为一个视觉组设计，不能每个图标各自使用不一致的玻璃强度。
- 面板展开应从对应按钮或控件组发生，关闭后回到原来的触发位置和任务上下文。
- 网页端可参考这种“来源—展开—返回”的关系，但具体实现不能假设等同于 Apple 原生效果。

## 4. Apple 原则到 HOMEVISTA 的转换

### 4.1 三层界面模型

VISTA C 页面统一按以下三层理解：

| 层级 | HOMEVISTA 内容 | 设计原则 |
| --- | --- | --- |
| 内容层 | 楼盘图片、户型图、地图、住户数据、资料、VR/WALK/3D 场景 | 内容清晰、稳定、可阅读；不以液态玻璃作为默认表面。 |
| 功能层 | 系统顶栏、导航、筛选、切换、媒体控制、浮动工具、Menu | 液态玻璃的主要应用层；必须清楚可操作且不遮挡主体。 |
| 临时反馈层 | 弹窗、加载、错误提示、帮助、全屏查看、临时详情 | 根据任务使用稳定面板、玻璃或遮罩；必须能关闭、返回并恢复上下文。 |

页面设计时必须先明确元素属于哪一层，再决定是否使用玻璃。不能先选择“玻璃效果”，再反向把所有元素归入玻璃层。

### 4.2 HOMEVISTA 的材质分级

Apple 的 `Regular` 与 `Clear` 是原生系统材质。HOMEVISTA 网页端不直接沿用相同命名，避免暗示效果等同；建议在内部设计稿中使用以下工作名称：

| 工作名称 | 用途 | 适用场景 | 禁用场景 |
| --- | --- | --- | --- |
| 标准玻璃表面 | 默认功能层，优先保证可读性和稳定性 | 导航、系统顶栏、筛选、列表切换、媒体工具、帮助 | 长文本正文、大量内容卡片、复杂表格主体 |
| 高透明媒体玻璃 | 让丰富媒体背景更多透出，仅限条件满足时使用 | 全屏图片、全景、VR/WALK/3D 上方的小型浮动控件 | 地图文字密集区、户型线稿、长列表、浅色复杂背景、较大面板 |
| 稳定内容表面 | 内容层的白色、深色或中性表面，不强调透底 | 户型卡片、住户信息、详情、资料目录、长文本、表单 | 需要表达浮动导航或临时控制的区域 |

高透明媒体玻璃只有同时满足以下条件才可使用：

1. 背景以图片、全景、视频或 3D 画面为主；
2. 背景允许通过局部压暗或遮罩换取可读性；
3. 前景只包含短文字、明确符号或少量操作；
4. 设计稿同时给出亮背景、暗背景和高细节背景状态；
5. 降低透明度或不支持背景模糊时仍能完成操作。

### 4.3 不允许玻璃叠玻璃

- 玻璃导航上方的图标、标签和选中态使用内容填充、亮度或色调表达，不再为每个子元素增加一层独立玻璃。
- 玻璃工具栏打开玻璃面板时，应通过形态延展或替换形成一个主要层级，不能让两个高透明面板互相覆盖。
- 弹窗出现时，底层玻璃控件应退出视觉焦点；必要时使用统一遮罩，不继续保持多组高光和动画。

焦点层级按任务类型处理：

- **模态层**：登录、重要提示、必须处理的确认和阻断错误出现后，底层玻璃控件停止动效和交互，键盘焦点与触摸操作限制在当前层；关闭后回到原触发位置或安全返回位置。
- **非模态层**：筛选、地图详情、列表切换和可并行浏览的右侧面板可保留底层内容操作，但必须明确当前活动对象；面板与触发按钮不得同时表现为两个主焦点。
- **帮助与加载**：帮助按其是否阻断当前任务选择模态或非模态；加载层只阻断尚不可操作的局部范围，不默认锁定整页。全页任务确实不可继续时，才使用全页阻断层。

## 5. VISTA C 组件适用矩阵

| 页面/组件 | 建议级别 | 指导意见 | 依据状态 |
| --- | --- | --- | --- |
| 首页重点入口与完整导航 | 优先使用 | 作为主要功能层使用标准玻璃；首页先展示项目，首屏仅保留 2–6 个重点入口，完整功能进入导航面板。 | 现有规范 |
| 非首页侧边/底部导航 | 优先使用 | 位于主体内容边缘；入口多时用右侧竖排，入口少或宽屏时用底部横排；始终保留 Menu。 | 现有规范 |
| 系统顶栏 | 优先使用 | 深浅表面随页面内容选择；返回、标题、导航与页面级操作分组，避免工具拥挤。 | 现有规范 + 本文建议 |
| 地图浮动工具、分类筛选、详情入口 | 首批试点 | 地图保持内容层；玻璃只用于自有操作控件、筛选和面板触发，不假定第三方地图可参与真实折射。 | 已确定试点 |
| 户型筛选、比较、楼栋/户型切换 | 首批试点 | 筛选与切换属于功能层；户型卡片本体保持稳定内容表面，避免大量液态卡片同时运动。 | 已确定试点 |
| 图片栏/全景底栏 | 可使用 | 图片使用白色玻璃，全景使用深色玻璃；支持收起、切换和清屏。高透明形态只用于媒体背景条件满足时。 | 现有规范 |
| 楼层选择器 | 可使用 | 眺望全景使用深色玻璃，眺望图片与平面图使用白色玻璃；数量过多、当前、悬停、不可用仍需补充。 | 现有规范 + 待补充 |
| 列表切换 | 可使用 | 建筑切换使用白色玻璃；全景建筑切换使用深色玻璃；WALK/VR 分别承载楼层或房间切换。 | 现有规范 |
| 筛选弹窗 | 可使用 | 使用稳定的白色玻璃，从右上角触发；移动端应保持任务一致，但不强制保持相同尺寸和位置。 | 现有规范 + 本文建议 |
| 资料搜索 | 谨慎使用 | PC 的悬停展开不能成为唯一入口；触屏必须有点击展开方式，展开后保持输入和清除可达。 | 现有规范 + 本文建议 |
| 图标横栏 | 可使用 | 作为一个控件组处理，保持统一表面和间距；展开、收起、不可用状态待补齐。 | 现有规范 + 待补充 |
| 右侧面板/右侧功能栏 | 谨慎使用 | 较大面板优先保证稳定阅读，不使用高透明媒体玻璃；关闭和再次打开必须与触发入口对应。 | 现有规范 + 本文建议 |
| 帮助与加载 | 可使用 | 帮助使用白色玻璃，沉浸加载使用深色玻璃；加载信息不能遮挡退出或错误恢复入口。 | 现有规范 + 本文建议 |
| 户型卡片、住户卡片、资料卡片 | 原则上不用液态行为 | 作为内容层保持白色/深色稳定表面；只给选中、查看或关联体验按钮必要反馈。 | 本文建议 |
| 长文本、表单、费用说明、认证 | 不使用高透明玻璃 | 使用稳定背景和明确层级，优先保障阅读、输入、错误提示与合规信息。 | 本文建议 |
| 403、404、全局错误 | 不依赖玻璃 | 即使背景模糊或动态效果不可用，也必须完整显示原因、返回或重试动作。 | 本文建议 |

## 6. 页面级设计指导

### 6.1 首页与完整导航

#### 设计目标

- 顾客先看到项目形象和内容，不先看到功能清单。
- 重点入口用于快速开始，完整导航用于发现全部已发布功能。
- 玻璃导航与背景图片保持分离，但不形成厚重遮挡。

#### 现有可直接使用的导航参数

以下数值来自当前 HOMEVISTA Design System，只适用于已记录的首页导航卡片，不能扩展为全局玻璃参数：

| 项目 | 当前值 |
| --- | --- |
| 导航卡片底色 | 黑色，10% 透明度 |
| 卡片尺寸 | 100pt × 100pt |
| 卡片圆角 | 16pt |
| 外阴影 | 0pt 4pt 20pt，黑色 10% |
| 背景模糊 | 5pt |
| 边缘 | 上/左较亮，右/下较暗，不使用单一普通描边代替 |

#### 设计要求

- 当前项以整卡亮度、高光和层次变化表达，不只改变文字颜色。
- Menu、关闭、分享、声音、全屏等按功能分组，不把所有操作拼成一个无层级工具条。
- 项目品牌 Logo 列表只在首页或完整导航中出现，不进入二级页常驻导航。
- 入口较少时减少卡片数量，不用空白卡片维持网格。
- “首屏 2–6 个重点入口”只描述普通浏览模式的当前设计系统规则。销售讲解模式是否复用该入口数量与组件仍由 Q-LG-04 决定，不作为本批地图与户型列表试点的默认值。

### 6.2 周边地图试点

#### 内容层

- 地图底图、项目锚点、POI、路线、距离和时间参考属于内容层。
- 地图缩放、拖动和选择标记时，浮动控件不得遮挡主要操作区域。
- 不能假定第三方地图、iframe 或瓦片内容可以被可靠采样、折射或同步变形。

#### 功能层

优先验证以下对象：

- 项目导航与返回；
- POI 分类筛选；
- 指北针、回到当前位置、路线开关、缩放、街景、卫星/交通视图；
- POI 详情入口和详情面板；
- 展开/全屏与返回。

#### 玻璃规则

- 地图工具按用途分组，不把所有按钮分散为大量独立玻璃圆点。
- 选中状态应同时改变控件和对应地图内容，不能只做发光效果。
- POI 详情包含较长文字时，使用稳定内容面板；玻璃只表达其浮动层级和触发关系。
- 当背景文字、道路或图标过于复杂时，优先提高表面稳定度或加入局部遮罩，不继续追求高透明。
- 地图性能或浏览器能力不足时，可降级为稳定半透明/不透明控件，但功能位置、状态和操作结果不变。
- 第三方地图瓦片、Canvas、iframe 或跨域内容不能被可靠采样时，玻璃效果只作用于 HOMEVISTA 自有控件表面，不对地图内容做实时折射；该状态必须作为试点必测降级场景，而不是实现失败。

### 6.3 户型列表试点

#### 内容层

- 户型图、户型名称、LDK、面积、建筑/楼栋、备注和关联体验属于内容层，不应用动态玻璃作为默认卡片表面。
- 多楼栋和大量户型时，卡片需要稳定排列、清晰对比和持续滚动性能。

#### 功能层

优先验证以下对象：

- 筛选入口和筛选弹窗；
- 楼栋、户型或列表切换；
- 比较入口、选中数量和退出比较；
- 查看大图、查看详情、进入有效 VR/WALK；
- 查看全部、展开/全屏与返回。

#### 玻璃规则

- 筛选、比较和切换可采用标准玻璃；户型卡片保持稳定内容表面。
- 选中卡片通过边界、状态标记和操作反馈表达，不让整张卡片持续流动或发光。
- 当列表滚动到固定顶栏下方时，只设置一套清晰分界；不能叠加多个模糊层。
- 手机端不依赖 hover；触摸后必须立即获得清楚的按下、选中或展开反馈。
- 比较模式应减少无关玻璃控件，突出候选对象和退出路径。

### 6.4 VR、WALK、3D/GIS 与全景

- 场景本身占据主要画布，玻璃只承载工具、视点/楼层/房间切换、帮助和退出。
- 可使用高透明媒体玻璃，但必须同时提供复杂背景和低对比背景测试稿。
- 工具栏在静止时保持克制，操作时给予短暂反馈；不能持续播放高光或漂移动画。
- 进入沉浸场景、打开工具面板、全屏和退出之间必须保持来源关系与返回上下文。
- 外部 WALK/VR 内部能力不由 VISTA C 外层玻璃规范扩展；只规范外层承载、加载、错误和退出。

### 6.5 画廊、资料与长文本

- 图片浏览可在底部使用白色或深色玻璃媒体栏，并支持收起和清屏。
- 资料目录、文件名称、搜索结果和长文本正文保持稳定内容背景。
- 搜索框、筛选、查看模式切换可以使用玻璃，但不能让文字直接落在复杂图片上。
- 非图片文件的格式标记属于内容信息，不作为发光装饰处理。

## 7. 形状、层级与色彩指导

### 7.1 形状关系

- 控件、控件组、面板和页面边缘应保持协调的圆角与间距关系。
- 胶囊形优先用于主操作、切换和少量触控控件；高密度列表和信息面板继续使用更稳定的圆角矩形。
- 内层控件圆角应与外层容器形成协调的内外关系，避免内角比外角更张扬或边距不一致。
- HOMEVISTA 已记录的 16pt 导航卡片圆角只属于该组件；其他组件精确圆角为 **待设计系统补充**。

### 7.2 层级表达

- 优先通过位置、分组、间距和显隐表达层级，再使用模糊、阴影和高光。
- 浮动控件需要与内容有清楚分离，但不应形成厚重的悬浮卡片墙。
- 大面板比小按钮更需要稳定表面；面板越大，越不能依赖持续亮暗翻转或高透明背景。

### 7.3 色彩与强调

- 普通导航卡片保持当前黑色 10% 透明玻璃；非首页 Menu 使用当前设计系统规定的青色强调。
- 强调色只用于主操作、当前关键状态或 Menu，不给所有玻璃元素统一上色。
- 白色/深色玻璃的精确颜色、透明度、边缘亮度和暗色模式映射目前均为 **待设计系统补充**。
- 不把 Apple 系统蓝、系统灰或彩色玻璃参数直接当成 HOMEVISTA 品牌色。

## 8. 交互与动效指导

### 8.1 动效目标

液态行为必须帮助用户理解以下关系之一：

- 这个元素可以操作；
- 操作已经被接收；
- 面板从哪个入口打开；
- 当前选中了什么；
- 页面或控件正在从一种状态转换到另一种状态；
- 操作结束后如何返回原任务。

不能说明上述关系的动画，应视为装饰性效果并谨慎使用。

### 8.2 必须设计的状态

| 状态 | 设计要求 |
| --- | --- |
| 默认 | 安静、可读、层级明确，不持续闪烁或流动。 |
| 悬停 | 仅用于鼠标环境；提示可操作，但不能成为发现功能的唯一方式。 |
| 键盘聚焦 | 有独立可识别的焦点状态，不与悬停混为一体。 |
| 按下/触摸 | 立即反馈操作已被接收，结束后回到稳定状态。 |
| 选中/当前 | 持续可识别，与瞬时按下状态区分。 |
| 展开/打开 | 从触发元素建立连续关系，打开后内容层级清楚。 |
| 收起/关闭 | 返回触发位置或原任务上下文，不让用户失去所在对象。 |
| 不可用 | 仍能识别控件含义，不响应液态反馈，并说明不可用原因或条件。 |
| 加载 | 显示当前任务、等待状态以及可用的取消/退出路径。 |
| 错误/降级 | 材质失败时仍能看到信息、重试、返回或继续浏览入口。 |
| 减少动态效果 | 取消弹性、融合和大幅形变，保留必要的淡入、状态和结果反馈。 |

### 8.3 动效限制

- 不对长列表中的每个卡片同时使用形变、折射或连续高光。
- 不在地图拖拽、缩放或 3D 场景运行时叠加大面积持续动态玻璃。
- 不用动画掩盖加载、无数据或操作失败。
- 不把 PC hover 动画原样搬到触屏；手机和平板以触摸、选中和展开状态为主。
- 动画时长、缓动、形变量和并发数量当前均为 **待设计系统补充**。

## 9. 可读性、可访问性与降级

### 9.1 可读性

- 设计稿必须分别验证亮背景、暗背景、高细节背景和快速滚动背景。
- 图标和文字不得依赖背景刚好合适；必要时增强表面、遮罩、阴影或文字对比。
- 大面积面板不使用会频繁亮暗翻转的表现，避免阅读过程不稳定。
- 高透明玻璃上的文字应保持短而明确；长文转入稳定内容面板。

### 9.2 可访问性

网页端至少需要定义与 Apple 三类辅助设置意图对应的表现：

| 用户需要 | HOMEVISTA 应对方式 |
| --- | --- |
| 降低透明度 | 提高表面不透明度或改用稳定内容表面，不能让控件消失。 |
| 提高对比度 | 强化前景文字/图标与背景分离，可增加明确边界。 |
| 减少动态效果 | 取消弹性、融合、漂移和大幅形变，保留状态变化与任务结果。 |

键盘操作、焦点顺序、屏幕阅读语义、文本缩放和触控目标仍按各组件与页面的可访问性要求执行，不能因视觉材质而省略。

### 9.3 浏览器与性能降级

- 背景模糊、实时折射或复杂合成不可用时，使用稳定半透明或不透明表面代替。
- 降级后不得改变控件位置、名称、可用状态和操作结果。
- 第三方地图、外部 WALK/VR 和 iframe 不假定支持内部材质处理。
- 复杂页面应提供关闭高成本动态效果的能力；具体触发条件与性能阈值为 **待研发验证/待产品确认**。

## 10. 响应式指导

### 10.1 共同原则

- 同一组件在 PC、PAD、手机上保持相同任务、含义和核心状态。
- 可以改变位置、方向、尺寸和展开方式，但不能让某个平台缺失核心操作。
- 响应式不是整体缩放；内容、导航、面板和工具组需要重新排列。

### 10.2 各设备重点

| 设备 | 重点指导 |
| --- | --- |
| 手机 | 以纵向单任务为主；避免控件沿四边堆叠；面板可转为底部层或全屏层；不依赖 hover。 |
| PAD 竖屏 | 控件数量与内容面积最容易冲突；需要重点验证侧栏、底栏和全屏切换。 |
| PAD 横屏 | 可使用内容与面板并列，但应保持主体内容优先。 |
| PC | 可使用右侧导航、悬停提示和并列面板；仍需控制高密度工具栏与鼠标移动距离。 |
| 大屏触控 | 保持触控目标、可达性和讲解路径，不能按普通桌面小按钮直接放大页面。 |

现有 C 端页面 320px、375px、768px、1024px、1440px 的响应式检查基线继续有效。正式视觉试点必须至少覆盖上述五档视口。

五档视口除“不遮挡、可操作”外，还必须检查：

- 320px、375px：所有核心功能可通过点击或触摸发现并完成，不能依赖 hover；
- 768px：PAD 竖屏下侧栏、底栏、面板和系统顶栏不能互相挤压，必要时切换为单一面板或全屏层；
- 1024px：PAD 横屏下允许内容与面板并列，但展开面板后仍保留足够主体操作区域；
- 1440px：PC 下可使用 hover 提示，但同一功能仍须支持点击与键盘聚焦；
- 大屏触控：不能仅把桌面小控件同比放大，必须重新核对触控距离、目标大小和销售讲解时的可达性。

## 11. 设计师交付要求

### 11.1 试点启动门槛

在进入可开发原型前，设计和研发应共同形成一份“试点参数与降级基线”，至少包括：

- 地图与户型列表试点实际采用的颜色、透明度、模糊、阴影和边缘处理候选值；
- 默认、按下、选中、展开和关闭的动效候选值或逐帧/关键帧说明；
- 第三方内容不可采样、浏览器不支持背景模糊、减少动态效果和低性能时的对应表面；
- 至少一组亮、暗、高细节背景的对照稿；
- 本轮评审使用的目标设备、浏览器和样例数据范围。

这份基线只用于让本轮试点可复现、可对照，不自动成为 VISTA C 全局标准。任何候选值只有在试点评审通过并回写设计系统后，才能被其他页面复用。

### 11.2 首批试点交付物

设计师应提交：

1. 周边地图完整页面，而不是只提交一组地图按钮；
2. 户型列表完整页面，而不是只提交单张卡片；
3. 两个页面在 375px、768px、1024px、1440px 下的主要布局；320px 做最小宽度检查；
4. 每个关键玻璃组件的状态稿；
5. 亮、暗、高细节三类背景下的可读性对照；
6. 正常效果、降低透明度、减少动态效果和性能降级四类表现；
7. 组件来源、触发方式、返回关系和未解决问题的标注。

### 11.3 每个玻璃组件的标注模板

| 标注项 | 必填内容 |
| --- | --- |
| 组件名称 | 使用设计系统现有名称；缺失时标记“待设计系统补充”。 |
| 所属层级 | 内容层 / 功能层 / 临时反馈层。 |
| 使用原因 | 为什么需要玻璃，解决什么操作或层级问题。 |
| 背景类型 | 图片 / 地图 / 户型线稿 / 3D / 纯色 / 长列表。 |
| 默认表面 | 标准玻璃 / 高透明媒体玻璃 / 稳定内容表面。 |
| 交互状态 | 默认、悬停、聚焦、按下、选中、展开、关闭、不可用。 |
| 触发与返回 | 从哪里打开，关闭后回到哪里。 |
| 响应式 | 手机、PAD、PC 的位置和形态变化。 |
| 可访问性 | 降低透明度、提高对比度、减少动态效果。 |
| 降级方案 | 无模糊、低性能、第三方内容限制时的表现。 |

## 12. 验收标准

| 编号 | 验收条件 |
| --- | --- |
| AC-LG-01 | 页面明确区分内容层、功能层和临时反馈层，地图、图片、户型图、VR/WALK/3D 不被当成玻璃内容层。 |
| AC-LG-02 | 玻璃优先用于导航、切换、筛选、浮动工具和临时控制；没有全页面、全卡片平均铺设。 |
| AC-LG-03 | 页面不存在玻璃叠玻璃造成的层级混乱；弹层打开后有唯一主要焦点。 |
| AC-LG-04 | 每个液态行为都对应明确触发、状态变化或来源—结果关系，不存在无目的持续动画。 |
| AC-LG-05 | 亮、暗、高细节背景下，关键文字、图标、当前状态和关闭/返回入口均可识别。 |
| AC-LG-06 | 手机不依赖 hover；键盘聚焦、触摸按下、选中、不可用和错误状态均有独立表达。 |
| AC-LG-07 | 降低透明度、提高对比度、减少动态效果时，核心任务、信息和操作结果保持可用。 |
| AC-LG-08 | 无背景模糊或低性能降级时，组件可改用稳定表面，但位置、含义、状态和操作结果不变。 |
| AC-LG-09-M1 | 地图试点可完成基础浏览：地图加载后可缩放、平移、识别项目锚点和已发布 POI，浮动玻璃控件不遮挡主要操作区。 |
| AC-LG-09-M2 | 地图试点可完成筛选与切换：分类、地图视图和可用控制的当前状态与地图结果一致。 |
| AC-LG-09-M3 | 地图试点可完成详情与返回：POI 详情、路线或完整查看从明确入口打开，关闭后回到原地图对象和浏览上下文。 |
| AC-LG-09-M4 | 地图试点覆盖加载、空内容、局部失败、地图整体不可用、第三方内容不可采样、无背景模糊和低性能降级；任一状态下仍提供符合 PRD 的继续浏览、重试或返回路径。 |
| AC-LG-09-F1 | 户型试点可完成基础浏览：多楼栋/多户型内容稳定排列，户型图、名称、LDK、面积等已定义内容清楚可读。 |
| AC-LG-09-F2 | 户型试点可完成筛选、楼栋/户型切换、选中和有效比较，功能层状态与内容结果一致。 |
| AC-LG-09-F3 | 户型试点可完成大图/详情/有效 VR 或 WALK 的进入与返回；查看全部、展开或全屏入口及返回关系清楚。 |
| AC-LG-09-F4 | 户型试点覆盖加载、空结果、图片失败、局部失败、不可用入口隐藏、减少动态效果和低性能降级；任一状态不拖垮同页其他内容。 |
| AC-LG-09-G | AC-LG-09-M1 至 M4、F1 至 F4 均为本轮完整页面评审的必验子项；任一子项无交付稿或未通过时，不声明试点评审通过。 |
| AC-LG-10-A | 320px、375px、768px、1024px、1440px 下，主体内容不被玻璃控件遮挡，关键操作可达并发生符合页面任务的重排。 |
| AC-LG-10-B | 320px、375px 下所有核心功能不依赖 hover；1440px 下的 hover 提示也有点击和键盘聚焦替代。 |
| AC-LG-10-C | 768px 下侧栏、底栏、面板和顶栏不互相挤压；1024px 下并列面板不夺取主体必要操作空间。 |
| AC-LG-10-D | 大屏触控形态经过触控距离、目标大小和讲解可达性检查，不以桌面控件整体放大代替设计。 |
| AC-LG-11 | 设计稿未新增任何 PRD 未定义的业务入口、内容字段、权限、流程或对外承诺。 |
| AC-LG-12 | 所有尚无精确规格的颜色、圆角、模糊、动效和性能值均标记为“待设计系统补充”或“待研发验证”，未伪装成既定标准。 |
| AC-LG-13 | 进入可开发原型前已提交第 11.1 节的试点参数与降级基线；这些候选值仅用于本轮复现和对照，未被扩展为全局标准。 |

## 13. 当前设计系统缺口

截至 HOMEVISTA Design System HEAD `533cc30ae87b3361c5ce2eb5bfee6a210b32e4cd`，VISTA C 的颜色、布局、文本、动画、加载和视觉风格手册仍存在占位或未完整整理内容。以下事项不能由本文直接定稿：

- 白色玻璃、深色玻璃的完整颜色与透明度；
- 标准玻璃与高透明媒体玻璃的全局参数；
- 除首页导航外的圆角、阴影、边缘高光与模糊值；
- PC、PAD、手机的正式间距、边距和控件尺寸体系；
- 动画时长、缓动、形变量、元素合并与拆分规则；
- 楼层数量过多、当前/悬停/不可用状态；
- 图标横栏展开、收起和不可用状态；
- 弹窗尺寸、按钮位置、关闭行为和长文本滚动；
- 动态效果性能预算、启用阈值和自动降级条件。

这些内容应在地图与户型列表试点完成并经过设计、产品和研发联合评审后，回写 HOMEVISTA Design System。试点稿可提出候选方案，但必须标记为“建议方案”。

## 14. 待确认事项

| ID | 待确认问题 | 影响 | 建议确认方式 |
| --- | --- | --- | --- |
| Q-LG-01 | “液态玻璃”最终是 VISTA C 的全局设计语言，还是仅限关键功能层的视觉与交互体系？ | 决定扩展范围、设计工作量和验收口径。 | 以地图与户型列表完整页面试点结果决策。 |
| Q-LG-02 | 标准玻璃、高透明媒体玻璃、白色玻璃和深色玻璃之间如何形成正式命名和参数体系？ | 影响设计系统、代码组件和测试用例统一。 | 试点后由设计负责人提出 token 方案，研发验证，产品确认边界。 |
| Q-LG-03 | 动态效果的性能门槛和自动降级条件是什么？ | 影响地图、长列表、3D/VR/WALK 的稳定性。 | 研发使用高密度数据与目标设备测试后给出量化建议。 |
| Q-LG-04 | 销售讲解模式与普通浏览模式是否共用同一组导航玻璃组件？ | 影响导航分组、当前状态和跨页连续性。 | 先完成销售讲解导航分组需求，再做视觉合并评估。 |
| Q-LG-05 | HOMEVISTA Design System 的 VISTA C 视觉手册由谁维护、何时将试点结果升级为正式规范？ | 影响后续页面能否一致复用。 | 在试点评审会上明确负责人、版本和发布条件。 |

## 15. 与现有需求和原型的同步规则

- 本文没有新增页面、Widget、通用组件或业务数据。
- 本文当前不要求修改低保真线框原型；低保真原型仍用于验证内容、结构、状态和响应式。
- 正式视觉试点开始前，地图与户型列表对应 PRD 应保持业务边界不变；如视觉设计发现新的业务缺口，应先记录为待确认，不直接做进原型。
- 试点若改变页面结构、导航、展开/全屏流程、状态或验收口径，必须先回写对应需求文档及修订记录，再同步原型。
- 每次原型更新后，需要核对本文、对应页面 PRD、通用组件 PRD 与原型是否一致。

## 16. 供 Codex 使用的执行说明

后续 Codex 基于本文制作设计说明、原型或测试用例时必须遵守：

1. 先确认页面属于 VISTA C，不得混入 VISTA B 后台样式。
2. 先读取对应页面、Widget、通用组件 PRD，再使用本文决定视觉层级。
3. 不直接复制 Apple 原生控件、图标或 API 表现。
4. 不把本文建议扩大为新业务需求。
5. 精确参数缺失时标记“待设计系统补充”，不得自行发明全局 token。
6. 原型必须包含正常、加载、空内容、失败、不可用、减少动态效果和降级状态。
7. 完成原型后执行文档与原型双向一致性检查。

## 17. 关联资料

### Apple 官方资料

- [Human Interface Guidelines：Materials](https://developer.apple.com/design/human-interface-guidelines/materials)
- [Meet Liquid Glass](https://developer.apple.com/videos/play/wwdc2025/219/)
- [Get to know the new design system](https://developer.apple.com/videos/play/wwdc2025/356/)
- [Apple Design Resources](https://developer.apple.com/design/resources/)
- [Adopting Liquid Glass](https://developer.apple.com/documentation/TechnologyOverviews/adopting-liquid-glass)
- [Applying Liquid Glass to custom views](https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views)

### HOMEVISTA 资料

- `C端需求/评审记录/2026-08-21-C端液态玻璃UI设计第三次评审会议纪要.md`
- `C端需求/01-页面体系/03-周边地图页PRD.md`
- `C端需求/01-页面体系/02-户型浏览页PRD.md`
- `C端需求/01-页面体系/18-线框原型基线与首批制作方案.md`
- `C端需求/03-通用组件体系/02-页面导航组件PRD.md`
- HOMEVISTA Design System：`https://cnb.cool/homevista.jp/design-system`