HarmonyKit | 鸿蒙新特性：HDS 沉浸光感与空间化视觉设计

HarmonyKit | 鸿蒙新特性：HDS 沉浸光感与空间化视觉设计

引言：UI 框架的下一个范式转移

2026 年的 HarmonyOS 有一个明确的 UI 设计主线：从"平面视觉"走向"空间感知"。这不是简单地把按钮加上阴影或渐变，而是一套系统级的、由底层渲染引擎驱动的视觉增强体系。这套体系在 API 26 中通过 ImmersiveMaterial API 和 HDS（Harmony Design System）组件的深度耦合正式落地。

HarmonyKit 的首页导航使用了 HdsTabs 组件的 systemMaterialEffect 属性------这是沉浸光感设计最直观的应用入口。但这只是冰山一角。这篇文章从设计哲学、技术实现和实际应用三个层面，完整解读鸿蒙"沉浸光感空间化视觉"体系。

项目仓库：https://atomgit.com/VON-/harmony-kit

空间化视觉：不是"好看"，是"感知"

先澄清一个概念。传统的 UI 设计讲究的是"视觉层次"------通过颜色对比、间距、阴影来建立信息层级。这是一种 2D 思维。

空间化视觉在此基础上增加了一个维度：材质感知。你不是在"画"一个界面，而是在"布置"一个空间。组件不是平面的色块，而是具有物理光学属性的材质------透光率、模糊度、折射、环境光响应。

想象你面前有一块磨砂玻璃。你透过它看到后面的内容，但你也能感知到玻璃本身的存在。玻璃的"存在感"来自它你对后方光线的扭曲------这是一种需要 GPU 实时计算的视觉效果。鸿蒙的 ImmersiveMaterial API 就是将这种"磨砂玻璃"般的材质体验引入到了系统 UI 中。

为什么这是范式转移？因为它在"内容"和"界面"之间引入了一个新的感知层。传统 UI 只有两层：内容层（你要看的信息）和控件层（按钮、导航栏）。空间化视觉引入了第三层------材质层。材质层在内容和控件之间，影响你对两者的感知方式。

HDS 组件如何体现空间化视觉

HarmonyKit 的 Index.ets 中使用了 HdsTabs 的 systemMaterialEffect：

typescript 复制代码

HdsTabs({ controller: this.controller }) {
  ForEach(CATEGORIES, (cat: string) => {
    TabContent() {
      this.ToolGrid(cat)
    }
    .tabBar(cat)
  })
}
.barFloatingStyle({
  barBottomMargin: 36,
  adaptToHandedness: true,
  systemMaterialEffect: {
    materialType: hdsMaterial.MaterialType.ADAPTIVE,
    materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
  }
})

这段代码中，systemMaterialEffect 是空间化视觉的核心切入点。它做了以下事情：

渲染一层材质纹理 ：在 Tab Bar 的背景上叠加一层系统级的材质效果。materialType: ADAPTIVE 意味着系统根据当前上下文（应用内 vs 桌面、前景 vs 背景）自动选择最合适的材质类型。
实时环境光响应：材质会响应设备的环境光传感器数据。在明亮环境中（白天户外），材质呈现更明显的漫反射效果；在暗光环境中（夜间室内），材质呈现更柔和的散射效果。这种响应是 GPU 实时计算的，不是预渲染的图片。
内容感知模糊：如果 Tab Bar 下方的滚动内容发生变化，材质的模糊采样源也会同步更新。这不是静态的高斯模糊，而是一种"内容感知"的散射------它与下面的内容存在视觉上的连续性，而非生硬的遮挡。

materialType 的选项解读

MaterialType 定义了材质的光学基础属性：

REGULAR：标准材质。最接近传统的半透明效果------一个固定透明度和模糊半径的图层。
THICK：厚重材质。更高的不透明度，更明显的模糊效果。适合需要强分离感的场景（如底部导航栏 vs 内容区需要明确边界）。
THIN：轻薄材质。更高的透明度，更细微的模糊。适合辅助性 UI 元素（如工具栏、辅助标签）。
ULTRA_THIN：超薄材质。几乎完全透明，模糊效果极微弱。适合不遮挡内容的极小 UI 元素。
ADAPTIVE ：自适应材质。推荐使用。系统根据组件的位置、大小、色彩上下文、环境光条件自动调配最合适的材质参数。这是"空间化"思维的体现------你不需要为每个组件手动选择材质，系统理解你的设计意图。

materialLevel 的选项解读

MaterialLevel 定义了材质在"空间层"中的相对位置：

PRIMARY：最顶层。对应浮层、弹窗、ActionSheet 等最高层级 UI。
SECONDARY：第二层。对应导航栏、工具栏等次要层级 UI。
TERTIARY：第三层。对应搜索框、分段控制器等内嵌控件。
ADAPTIVE：自适应层级。系统根据组件类型和 Z-order 自动判断层级。

materialType 和 materialLevel 的组合产生了一个二维的材质矩阵。以 HarmonyKit 的 Tab Bar（materialType: ADAPTIVE, materialLevel: ADAPTIVE）为例：

在内容列表上方时，它表现为 THIN + SECONDARY------足够区分导航和内容但不阻碍内容可见性
在内容列表滚动到底部时，它可能调整为 REGULAR + SECONDARY------因为此时 Tab 下方的空白区域不需要保持内容感知

这种动态调整是 HDS 自动处理的，开发者不需要手动监听滚动状态------再次体现了"声明式材质"的理念：你声明"这里需要材质效果"，系统根据上下文决定"具体是什么效果"。

ImmersiveMaterial API：底层渲染引擎

HDS 组件使用的材质效果底层由 ImmersiveMaterial API 驱动。这是 API 26 引入的系统级 API，对第三方开发者部分开放。

核心概念：

1. 材质渲染管线

复制代码

输入层
├── 背景内容（被模糊的源图层）
├── 环境光数据（光传感器 + 屏幕亮度 + 色彩模式）
└── 色调数据（系统强调色 + 用户壁纸色彩）

处理层
├── 色彩提取（从背景内容采样主色）
├── 混合计算（材质透明度 × 背景色 × 环境光色温）
├── 模糊处理（基于材质参数的高斯/方向模糊）
└── 饱和度自适应（根据环境光调整色彩饱和度）

输出层
└── 渲染到目标图层（叠加在 UI 组件下方）

这个管线每帧运行，每帧根据最新的背景内容和环境数据重新计算。所以当你在 HarmonyKit 中滚动工具列表时，Tab Bar 的材质效果是实时变化的------你滚动到不同颜色的工具卡片（如红色哈希、蓝色 JSON、绿色 Base64），Tab Bar 的材质会微妙地反映下方的主色调。

2. 性能考量

材质渲染是 GPU 密集型操作。一块磨砂玻璃效果的实时渲染可能比渲染一个普通的半透明 View 多消耗 3-5 倍的 GPU 资源。HDS 做了以下优化：

采样降频：材质效果不按原生分辨率渲染，而是按 1/2 或 1/4 分辨率采样再放大
惰性更新：如果内容层没有动画或滚动，材质冻结，不重新计算
材质合并：多个材质组件在同一层级时，合并为单次渲染 pass
硬件加速：利用 GPU 的专用模糊和混合单元，而非 CPU 计算

对于 HarmonyKit 这种信息密度不高、动画场景少的工具类应用，材质渲染的额外开销几乎可以忽略。但如果你在做高帧率游戏或实时数据面板，需要注意材质效果对帧率的影响。

设计原则：内容优先，体验优先

鸿蒙的空间化视觉设计遵循两个核心原则：

原则一：Content-First（内容优先）

材质效果是"服务内容"的，不是"抢内容风头"的。一个正确的材质设计应该是用户"感觉到它的存在"但不"注意到它的存在"。

反例：一个过于厚重的材质效果会让用户注意到"这个导航栏好模糊"，而不是"下面的内容是什么"。正例：HarmonyKit 的 Tab Bar------用户关注的是工具分类标签，Tab Bar 的材质效果只是让视觉体验更舒适，不会引起多余的注意力。

技术上的体现：materialType: ADAPTIVE 的默认行为倾向于轻薄材质------系统默认假设开发者不希望在 UI chrome 上使用过于抢眼的材质效果。

原则二：Experience-First（体验优先）

材质效果必须"有意义"而非"花里胡哨"。每一个材质的使用都应服务于一个具体的体验目标：

层级感：模态弹窗使用 PRIMARY 层级的厚重材质，清晰区分"你可以操作的"和"你不能操作的"区域。
连续性：导航栏使用自适应材质，当用户滚动内容时，导航栏的材质随内容变化------保持了视觉上的连续性。
空间感：浮动的 FAB 按钮使用轻薄材质，让用户感觉到它是"浮在"内容上方的，而非"嵌在"内容中的。

HarmonyKit 中的沉浸光感实践

实践一：Tab Bar 的浮动材质

typescript 复制代码

.barFloatingStyle({
  barBottomMargin: 36,
  adaptToHandedness: true,
  systemMaterialEffect: {
    materialType: hdsMaterial.MaterialType.ADAPTIVE,
    materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
  }
})

设计考量：

barBottomMargin: 36：Tab Bar 与屏幕底部保持 36vp 的距离。这个距离不是为了"好看"，而是手势工效学的考虑------底部太近的话，用户在拇指操作时容易误触 Home 指示条。
adaptToHandedness: true：适配左右手操作习惯。系统根据用户设置（左撇子/右撇子）自动调整 Tab Bar 的布局偏向。

实践二：工具卡片的阴影与光照

typescript 复制代码

.shadow({
  radius: 10,
  color: '#0d000000',
  offsetX: 0,
  offsetY: 2
})

虽然 ToolCard 没有使用 systemMaterialEffect（它不是系统 UI 级别的组件），但它的阴影配置体现了材质感：#0d000000 是 5% 不透明度的黑色------非常淡的阴影，模拟的是"纸张"而非"塑料"的光照效果。

实践三：颜色系统与材质

HarmonyKit 的背景色 #f5f5f5 是一种暖灰色。在材质渲染中，这个背景色会影响材质的色彩混合------暖灰色的背景会透过半透明材质带来温暖的底色调，这是有意选择的。纯白背景（#ffffff）在材质效果下会显得偏冷，而 #f5f5f5 则在保持干净的前提下增加了温度感。

空间化视觉的未来方向

从 API 26 的 ImmersiveMaterial 可以推断鸿蒙 UI 体系正在构建的方向：

1. 从"组件级"到"页面级"的材质化

目前只有系统 UI 组件（HDS Tabs、HDS Navigation、HDS Dialog）可以使用材质效果。未来的趋势是将材质作为一种"页面属性"开放给所有开发者------你可以在任何组件上声明材质级别，系统自动计算组件之间的空间关系。

2. 从"2D 材质"到"3D 空间"

当前的材质效果是 2D 层面的光学模拟。结合鸿蒙空间计算能力的演进，未来可能出现真正 3D 空间中的材质------组件在 3D 空间中有实际的位置和曲面，材质效果响应的是空间中的光线追踪，而非平面上的模糊计算。

3. 从"视觉材质"到"触觉材质"

如果鸿蒙进一步整合触觉反馈引擎，材质效果可能延伸到触觉层面------点击一个厚重材质区域的触觉反馈与点击一个轻薄材质区域的触觉反馈不同。这种"通感"设计将极大地增强空间感知。

4. 从"系统决定"到"开发者定制"

当前 Adaptive 模式由系统决定材质参数。未来可能开放更多细粒度的材质控制参数，如自定义模糊强度、自定义色彩混合曲线、甚至自定义材质着色器。

开发者应该如何准备

如果你的应用目前运行在 API 22 或更低版本上，空间化视觉的大部分功能不可用。但你可以做以下准备：

迁移到 HDS 组件：将传统组件（Text、Button、List）替换为 HDS 等价组件（HdsButton、HdsList）。HDS 组件在低 API 版本上使用普通渲染，在高 API 版本上自动启用材质效果------你不需要写任何版本判断代码。
使用自适应属性 ：首选 ADAPTIVE 而非硬编码具体材质类型。这样当系统升级材质算法时，你的应用自动受益。
建立材质层级规范：为你的应用内的 UI 元素建立材质层级规范------哪些是 PRIMARY（模态），哪些是 SECONDARY（导航），哪些是 TERTIARY（内嵌控件）。这样当材质 API 更成熟时，你只需在相应层级的组件上启用对应的 materialLevel。

HarmonyKit 目前只在 Tab Bar 上使用了材质效果，未来计划在工具详情页的顶部导航栏和全屏搜索框上也启用材质------这些都是 SECONDARY 和 TERTIARY 层级的典型应用场景。

结语

沉浸光感空间化视觉不是一个"美化"功能，它是对人机交互的一种重新思考。在物理世界中，你不会把一张纸直接贴在另一张纸上------你会在它们之间建立空间关系（叠加、半透明、阴影）。在数字世界中，UI 元素之间的关系不应该是"一块矩形覆盖另一块矩形"这么生硬。材质系统在你和内容之间建立了一个感知的桥梁。

对于 HarmonyKit 来说，材质效果让一个工具类的"冰冷"应用变得更"温暖"------这是功能上的提升，也是一种体验的善意。

项目仓库：https://atomgit.com/VON-/harmony-kit