【共创稿事节】HarmonyOS 7沉浸光感：用光讲故事的体验设计

光在平面界面里长期被当成装饰层加一道高光、铺一层渐变看起来精致一点就够了。到了空间计算光要做的是另一件事——它决定用户先看哪里、这个面板处在哪一层、一次操作有没有被系统接住。HarmonyOS 7API 26把这件事做成了系统能力沉浸光感Immersive Light Sense。光在空间界面里承担三件事把光当成信息通道来设计它同时干三件事。引导。边缘流光沿着面板轮廓流动视线会顺着光的方向走。一个菜单从右下角弹出流光从触发点向面板边缘扩散用户不用读文字就知道内容来自哪个方向。聚焦。当一块区域被点亮、其余区域保持暗沉注意力自然收敛到高亮处。这是最省力的层级表达比加粗、放大、改颜色都安静。氛围。光的色温和强弱决定场景的情绪底色。暖光偏放松冷光偏理性强烈的明暗对比会让画面紧张。落到设计动作上其实就三个问题什么时候发光、光落在哪、光有多强。剩下的都是这三个变量的组合。沉浸光感给了一套现成的材质系统HarmonyOS 7 的沉浸光感包含两块能力沉浸式系统材质Immersive Material负责组件的质感沉浸式空间动效Immersive Motion负责弹出与切换时的光行为。材质这部分系统通过ohos.arkui.uiMaterial暴露接口。开发者不用自己叠模糊、折射、高光、阴影只要把ImmersiveMaterial对象挂到组件的systemMaterial()属性上组件的背景、边框、阴影就交给系统统一接管并且跟随深浅色模式自动切换。import{uiMaterial}fromkit.ArkUI;EntryComponentstruct LightSenseDemo{// 按层级选择样式浮层用薄主内容用常规可参考 ImmsersiveStyle 的适用场景Statematerial:uiMaterial.ImmersiveMaterialnewuiMaterial.ImmersiveMaterial({style:uiMaterial.ImmersiveStyle.REGULAR,// 材质厚度applyShadow:true,// 由系统接管阴影colorInvert:false// 不自动反色浅色内容用深色反之亦然});build(){Stack(){// 底层内容让材质层透出下面的图片Image($r(app.media.bg)).width(100%).height(100%).objectFit(ImageFit.Cover)// 悬浮面板只声明材质样式不再手写 backgroundColor / borderWidthColumn(){Text(沉浸光感面板).fontSize(18).fontColor($r(sys.color.font_primary))}.width(80%).height(120).borderRadius(24).systemMaterial(this.material)// 关键系统材质接管视觉}.width(100%).height(100%)}}要真正生效需要在module.json5的 metadata 里声明开关仅 entry 类型模块生效{module:{type:entry,metadata:[{name:ohos.arkui.UIMaterial.state,value:enable}]}}光感设计的四个参数把设计语言翻译成可调的参数光感大致由四个维度决定每个维度在 API 里都能找到落点。设计维度它决定什么对应实现亮度 / 强度光的能量感是柔和的辉光还是明确的高光LightEffectOptions.color、材质style越厚越暗色温冷暖情绪暖偏放松、冷偏理性materialColor赋色、LightEffectOptions.color自定义光色方向光从哪来、往哪走决定视线动线边缘流光走向、粒子动画轨迹、interactive形变方向衰减光扩散多远、边缘多柔和ImmersiveStyle厚度模糊程度、scale参数LightEffectOptions是光感交互反馈的参数用户触摸时材质表面出现动态光感变化。默认是白色可以换成品牌色或主题色。import{uiMaterial}fromkit.ArkUI;EntryComponentstruct TouchLightDemo{// 触摸时出现暖色光感启用形变让反馈更活Statefeedback:uiMaterial.ImmersiveMaterialnewuiMaterial.ImmersiveMaterial({style:uiMaterial.ImmersiveStyle.THIN,interactive:true,lightEffect:{color:#FFD28A// 暖色光感替代默认白色}});build(){Column(){Toggle({type:ToggleType.Switch}).width(56).height(32).systemMaterial(this.feedback)}.width(100%).height(100%).justifyContent(FlexAlign.Center)}}按层级选材质样式系统给了五档材质从超薄到超厚模糊程度和遮挡力逐级增强。选型的原则是离用户越近、越需要遮挡背景的越厚。样式模糊 / 遮挡适用场景ULTRA_THIN很强透明、几乎不遮挡浮动工具栏THIN较强透明搜索框、轻量提示REGULAR常规模糊通用面板、卡片THICK强模糊菜单ULTRA_THICK很强模糊弹窗、模态遮罩还要注意设备的算力分级。同一份代码在不同设备上表现不同系统用getGlobalMaterialLevel()返回EXQUISITE/GENTLE/SMOOTH三档用isImmersiveMaterialSupported()判断当前设备是否支持沉浸式材质。不支持时设置不报错但也不出效果——所以关键界面必须做降级。import{uiMaterial}fromkit.ArkUI;// 根据设备能力决定材质策略支持则用沉浸材质否则回退到普通半透明背景functionresolveMaterial():uiMaterial.Material|undefined{if(!uiMaterial.isImmersiveMaterialSupported()){returnundefined;// 交给调用方走降级分支}constleveluiMaterial.getGlobalMaterialLevel();// 低算力设备用更薄的样式减少实时模糊带来的负载conststyleleveluiMaterial.MaterialLevel.SMOOTH?uiMaterial.ImmersiveStyle.THIN:uiMaterial.ImmersiveStyle.REGULAR;returnnewuiMaterial.ImmersiveMaterial({style:style});}案例沉浸光感版音量面板音量面板是光感设计的好试验场它需要快速唤起、需要明确当前值、还要在遮挡内容时保持轻盈。设计拆解唤起时用沉浸式空间动效面板从音量键方向非线性展开边缘流光勾出轮廓材质用THIN让底下的播放封面透出来但文字仍然可读拖动滑块时用粒子动画承载音量变化光点密度跟随数值触摸材质表面时出现lightEffect光感反馈确认手已经按到了。面板外壳用系统材质内部滑块沿用 Slider 的沉浸光感效果Slider 在全页面生效import{uiMaterial}fromkit.ArkUI;EntryComponentstruct VolumePanel{Statevolume:number30;// 面板外壳材质薄样式保持通透privatepanelMaterial:uiMaterial.ImmersiveMaterialnewuiMaterial.ImmersiveMaterial({style:uiMaterial.ImmersiveStyle.THIN,interactive:true,// 交互形变按下去有软的反馈lightEffect:{}// 启用默认光感交互反馈});build(){Column(){Text(音量${this.volume}).fontSize(16).fontColor($r(sys.color.font_primary))Slider({value:this.volume,min:0,max:100,step:1}).width(90%).onChange((value:number){this.volumeMath.round(value);})}.width(300).padding(20).borderRadius(28).systemMaterial(this.panelMaterial)// 外壳由系统材质统一接管背景与边框}}这里有个取舍Sliver 的粒子动画由系统处理开发者不参与逐帧绘制代价是动画形态的可控性有限。如果产品要求粒子完全贴合自己的品牌形态就得转到 Canvas 或 Particle 组件自己画同时自己承担性能预算。下面这张图是沉浸光感的选型过程从场景出发走到具体参数引导聚焦氛围支持不支持确定光要承担的角色引导 / 聚焦 / 氛围用边缘流光与空间动效用材质层级拉开明暗用 materialColor 定色温设备是否支持沉浸材质按层级选 ImmersiveStyle降级为普通半透明背景补充 LightEffect 交互光感总结一下下光先定角色再定参数。上来就调透明度最后会变成到处发光、没有重点。材质层级要和信息层级一致。底层内容用薄、遮挡层用厚用户才能靠透不透判断前后关系。把isImmersiveMaterialSupported()的判断放在渲染之前。沉浸材质在不支持的设备上静默失效不主动降级会得到一块没有背景的空白面板。交互光感用于确认操作不用于装饰。每次点击都闪一次会很快变得吵。忘记在module.json5里声明ohos.arkui.UIMaterial.state代码没报错但完全没有效果。只对Slider、Toggle、Select和弹窗类组件全页面生效其他组件只在 Navigation 标题栏或底部 TabBar 生效把材质挂到普通卡片上却不生效多半是范围问题。systemMaterial生效后之前设置的backgroundColor会被重置为透明、borderWidth被清掉还在靠手动背景色做兜底的代码要重新排一遍。低算力设备上的效果档位不同只在模拟器上验收会漏掉真实的观感差异。