HarmonyKit | 鸿蒙新特性HDS 沉浸光感与空间化视觉设计引言UI 框架的下一个范式转移2026 年的 HarmonyOS 有一个明确的 UI 设计主线从平面视觉走向空间感知。这不是简单地把按钮加上阴影或渐变而是一套系统级的、由底层渲染引擎驱动的视觉增强体系。这套体系在 API 26 中通过 ImmersiveMaterial API 和 HDSHarmony Design System组件的深度耦合正式落地。HarmonyKit 的首页导航使用了HdsTabs组件的systemMaterialEffect属性——这是沉浸光感设计最直观的应用入口。但这只是冰山一角。这篇文章从设计哲学、技术实现和实际应用三个层面完整解读鸿蒙沉浸光感空间化视觉体系。项目仓库https://atomgit.com/VON-/harmony-kit空间化视觉不是好看是感知先澄清一个概念。传统的 UI 设计讲究的是视觉层次——通过颜色对比、间距、阴影来建立信息层级。这是一种 2D 思维。空间化视觉在此基础上增加了一个维度材质感知。你不是在画一个界面而是在布置一个空间。组件不是平面的色块而是具有物理光学属性的材质——透光率、模糊度、折射、环境光响应。想象你面前有一块磨砂玻璃。你透过它看到后面的内容但你也能感知到玻璃本身的存在。玻璃的存在感来自它你对后方光线的扭曲——这是一种需要 GPU 实时计算的视觉效果。鸿蒙的 ImmersiveMaterial API 就是将这种磨砂玻璃般的材质体验引入到了系统 UI 中。为什么这是范式转移因为它在内容和界面之间引入了一个新的感知层。传统 UI 只有两层内容层你要看的信息和控件层按钮、导航栏。空间化视觉引入了第三层——材质层。材质层在内容和控件之间影响你对两者的感知方式。HDS 组件如何体现空间化视觉HarmonyKit 的 Index.ets 中使用了HdsTabs的systemMaterialEffectHdsTabs({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 BarmaterialType: ADAPTIVE, materialLevel: ADAPTIVE为例在内容列表上方时它表现为 THIN SECONDARY——足够区分导航和内容但不阻碍内容可见性在内容列表滚动到底部时它可能调整为 REGULAR SECONDARY——因为此时 Tab 下方的空白区域不需要保持内容感知这种动态调整是 HDS 自动处理的开发者不需要手动监听滚动状态——再次体现了声明式材质的理念你声明这里需要材质效果系统根据上下文决定具体是什么效果。ImmersiveMaterial API底层渲染引擎HDS 组件使用的材质效果底层由ImmersiveMaterialAPI 驱动。这是 API 26 引入的系统级 API对第三方开发者部分开放。核心概念1. 材质渲染管线输入层 ├── 背景内容被模糊的源图层 ├── 环境光数据光传感器 屏幕亮度 色彩模式 └── 色调数据系统强调色 用户壁纸色彩 处理层 ├── 色彩提取从背景内容采样主色 ├── 混合计算材质透明度 × 背景色 × 环境光色温 ├── 模糊处理基于材质参数的高斯/方向模糊 └── 饱和度自适应根据环境光调整色彩饱和度 输出层 └── 渲染到目标图层叠加在 UI 组件下方这个管线每帧运行每帧根据最新的背景内容和环境数据重新计算。所以当你在 HarmonyKit 中滚动工具列表时Tab Bar 的材质效果是实时变化的——你滚动到不同颜色的工具卡片如红色哈希、蓝色 JSON、绿色 Base64Tab 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 的浮动材质.barFloatingStyle({barBottomMargin:36,adaptToHandedness:true,systemMaterialEffect:{materialType:hdsMaterial.MaterialType.ADAPTIVE,materialLevel:hdsMaterial.MaterialLevel.ADAPTIVE}})设计考量barBottomMargin: 36Tab Bar 与屏幕底部保持 36vp 的距离。这个距离不是为了好看而是手势工效学的考虑——底部太近的话用户在拇指操作时容易误触 Home 指示条。adaptToHandedness: true适配左右手操作习惯。系统根据用户设置左撇子/右撇子自动调整 Tab Bar 的布局偏向。实践二工具卡片的阴影与光照.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
HarmonyKit | 鸿蒙新特性：HDS 沉浸光感与空间化视觉设计
HarmonyKit | 鸿蒙新特性HDS 沉浸光感与空间化视觉设计引言UI 框架的下一个范式转移2026 年的 HarmonyOS 有一个明确的 UI 设计主线从平面视觉走向空间感知。这不是简单地把按钮加上阴影或渐变而是一套系统级的、由底层渲染引擎驱动的视觉增强体系。这套体系在 API 26 中通过 ImmersiveMaterial API 和 HDSHarmony Design System组件的深度耦合正式落地。HarmonyKit 的首页导航使用了HdsTabs组件的systemMaterialEffect属性——这是沉浸光感设计最直观的应用入口。但这只是冰山一角。这篇文章从设计哲学、技术实现和实际应用三个层面完整解读鸿蒙沉浸光感空间化视觉体系。项目仓库https://atomgit.com/VON-/harmony-kit空间化视觉不是好看是感知先澄清一个概念。传统的 UI 设计讲究的是视觉层次——通过颜色对比、间距、阴影来建立信息层级。这是一种 2D 思维。空间化视觉在此基础上增加了一个维度材质感知。你不是在画一个界面而是在布置一个空间。组件不是平面的色块而是具有物理光学属性的材质——透光率、模糊度、折射、环境光响应。想象你面前有一块磨砂玻璃。你透过它看到后面的内容但你也能感知到玻璃本身的存在。玻璃的存在感来自它你对后方光线的扭曲——这是一种需要 GPU 实时计算的视觉效果。鸿蒙的 ImmersiveMaterial API 就是将这种磨砂玻璃般的材质体验引入到了系统 UI 中。为什么这是范式转移因为它在内容和界面之间引入了一个新的感知层。传统 UI 只有两层内容层你要看的信息和控件层按钮、导航栏。空间化视觉引入了第三层——材质层。材质层在内容和控件之间影响你对两者的感知方式。HDS 组件如何体现空间化视觉HarmonyKit 的 Index.ets 中使用了HdsTabs的systemMaterialEffectHdsTabs({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 BarmaterialType: ADAPTIVE, materialLevel: ADAPTIVE为例在内容列表上方时它表现为 THIN SECONDARY——足够区分导航和内容但不阻碍内容可见性在内容列表滚动到底部时它可能调整为 REGULAR SECONDARY——因为此时 Tab 下方的空白区域不需要保持内容感知这种动态调整是 HDS 自动处理的开发者不需要手动监听滚动状态——再次体现了声明式材质的理念你声明这里需要材质效果系统根据上下文决定具体是什么效果。ImmersiveMaterial API底层渲染引擎HDS 组件使用的材质效果底层由ImmersiveMaterialAPI 驱动。这是 API 26 引入的系统级 API对第三方开发者部分开放。核心概念1. 材质渲染管线输入层 ├── 背景内容被模糊的源图层 ├── 环境光数据光传感器 屏幕亮度 色彩模式 └── 色调数据系统强调色 用户壁纸色彩 处理层 ├── 色彩提取从背景内容采样主色 ├── 混合计算材质透明度 × 背景色 × 环境光色温 ├── 模糊处理基于材质参数的高斯/方向模糊 └── 饱和度自适应根据环境光调整色彩饱和度 输出层 └── 渲染到目标图层叠加在 UI 组件下方这个管线每帧运行每帧根据最新的背景内容和环境数据重新计算。所以当你在 HarmonyKit 中滚动工具列表时Tab Bar 的材质效果是实时变化的——你滚动到不同颜色的工具卡片如红色哈希、蓝色 JSON、绿色 Base64Tab 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 的浮动材质.barFloatingStyle({barBottomMargin:36,adaptToHandedness:true,systemMaterialEffect:{materialType:hdsMaterial.MaterialType.ADAPTIVE,materialLevel:hdsMaterial.MaterialLevel.ADAPTIVE}})设计考量barBottomMargin: 36Tab Bar 与屏幕底部保持 36vp 的距离。这个距离不是为了好看而是手势工效学的考虑——底部太近的话用户在拇指操作时容易误触 Home 指示条。adaptToHandedness: true适配左右手操作习惯。系统根据用户设置左撇子/右撇子自动调整 Tab Bar 的布局偏向。实践二工具卡片的阴影与光照.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
