★ FEATURED ARTICLE 平面界面里用户的眼睛被屏幕边界框着注意力顶多在矩形内跳来跳去。空间界面没有这个框用户能看的地方变多了注意力反而更容易散。这时候设计的活儿就是主动引导明确告诉用户先看这里再看那里。焦点和景深是两把最顺手的工具。焦点怎么建立让一个元素成为视觉焦点可用的手段不止放大一种。把它们列全了才好知道什么时候用哪个手段具体做法强度副作用尺度放大元素、缩短视距强占视野挤压周围亮度提高brightness焦点更亮中过亮会刺眼对比焦点明、背景暗或反色强对比过强显生硬位置放在视线中心、中轴线上强与舒适区绑定颜色焦点用饱和色背景降饱和中品牌色过多会失效运动焦点有微动背景静止强滥用会干扰阅读清晰度焦点实背景虚强算力开销这些手段单独用都成立但叠两到三种就够。七种全上用户看到的是一团互相打架的信号焦点反而没了。经验值是尺度 清晰度作为主手段亮度或颜色作为辅助运动只在需要抓住用户时用。一个常见问题焦点一堆等于没有焦点。空间界面里同一时刻的强焦点建议只留一个其余降一档。景深DoF为什么能引导注意力景深原本是光学概念——镜头对焦在某段距离上那段距离内清晰前后逐渐模糊。人眼本身也有这个机制所以清晰 vs 模糊天然对应关注 vs 忽略不需要额外学习。在 ArkUI 里没有真正的物理景深相机但可以用视觉信号模拟而且效果够用模糊blur(value)给离焦层加模糊值越大越虚单位 px亮度brightness(value)乘数调亮度值小于 1 变暗1 为原样饱和度saturate(value)降饱和1 为原样让离焦内容退成灰调透明度opacity降透明让离焦层更退后线性渐变模糊linearGradientBlur可以只在某个方向上渐次模糊适合做近处清晰、远处渐散的空间纵深。组合起来就是一套离焦权重// 离焦程度 0~10 为完全聚焦1 为完全离焦Builderdefocused(level:number){Column(){// 组件内容}.blur(level*14)// 模糊随离焦加深.brightness(1-level*0.35)// 变暗退到次要位置.saturate(1-level*0.6)// 降饱和收掉颜色干扰.opacity(1-level*0.25)// 稍微透明}这几个值按同一个level联动比各调各的要稳。聚焦态level 0完全一致地回到原样。视觉权重怎么分配多层信息同时在场时给每层定一个权重预算避免所有东西都在喊看我。下面是一份可直接套用的起始表权重总和控制在 100% 以内层级尺度亮度系数饱和度模糊 px透明度权重预算焦点1.01.051.001.055%次焦点0.950.90.80~40.9525%内容0.90.80.76~100.915%环境0.80.60.514~200.85%这套值不是硬规定是起步价。真正落地时按场景调但层级之间要拉开可见的差距相邻两层差别太小用户读不出主次。焦点切换的参数化实现把上面这张表写成一个可复用的焦点档位用枚举表达语义代码里就不会到处散落魔法数字。// 焦点档位越靠前权重越高enumFocusLevel{Focus0,// 焦点Secondary1,// 次焦点Content2,// 内容Ambient3// 环境}// 每个档位对应一组视觉参数interfaceFocusStyle{blur:numberbrightness:numbersaturate:numberopacity:numberscale:number}functionstyleOf(level:FocusLevel):FocusStyle{switch(level){caseFocusLevel.Focus:return{blur:0,brightness:1.05,saturate:1.0,opacity:1.0,scale:1.0}caseFocusLevel.Secondary:return{blur:3,brightness:0.9,saturate:0.8,opacity:0.95,scale:0.96}caseFocusLevel.Content:return{blur:8,brightness:0.78,saturate:0.68,opacity:0.9,scale:0.92}default:return{blur:16,brightness:0.6,saturate:0.5,opacity:0.8,scale:0.88}}}案例空间化通知中心的聚焦切换手机通知中心就是把一堆通知平铺排列用户靠滑动和分组找重点。空间化后可以让通知卡片围成一圈或几排用户把视线落在哪张卡上那张卡就自动进入焦点档其余按距离退到次焦点、内容、环境档。// NotificationOrbit.ets —— 通知卡片环形排布聚焦项自动升权EntryComponentstruct NotificationOrbit{// 当前聚焦的卡片索引-1 表示无聚焦StatefocusIndex:number-1// 示例通知数据privatenotices:string[][日程提醒,系统更新,消息回复,待办临近,快递到达,账单提醒]// 根据与聚焦项的距离推导档位越远越离焦privatelevelFor(index:number):FocusLevel{if(this.focusIndex0)returnFocusLevel.Content// 未聚焦时全部等权constdistMath.abs(index-this.focusIndex)if(dist0)returnFocusLevel.Focusif(dist1)returnFocusLevel.Secondaryif(dist2)returnFocusLevel.ContentreturnFocusLevel.Ambient}build(){Stack({alignContent:Alignment.Center}){ForEach(this.notices,(text:string,index:number){Column(){Text(text).fontSize(16).fontColor(Color.White)}.width(160).height(96).borderRadius(16).backgroundColor(#1E2740)// 用角度把卡片摆成一圈转头的动作对应切换聚焦.rotate({angle:index*30,centerX:50%,centerY:700%,perspective:1200}).applyFocus(this.levelFor(index))// 自定义扩展套用焦点档位.onHover((isHover:boolean){// 视线/指针落在哪张卡上哪张卡成为焦点this.getUIContext()?.animateTo({duration:220,curve:Curve.Friction},(){this.focusIndexisHover?index:-1})})},(text:string)text)}.width(100%).height(100%).backgroundColor(#0B1020)}}// 通过 AttributeModifier / 自定义修饰器把 FocusStyle 落到组件上Extend(Column)functionapplyFocus(level:FocusLevel){.blur(styleOf(level).blur).brightness(styleOf(level).brightness).saturate(styleOf(level).saturate).opacity(styleOf(level).opacity).scale({x:styleOf(level).scale,y:styleOf(level).scale})}这套逻辑的关键是档位由距离推导而不是每张卡单独设状态。聚焦项一动整排的权重自动重排不用维护一堆if。onHover在这里只是示意入口实际项目里换成onFocus、视线追踪回调或者指针位置都可以。命中卡片 i用户视线/指针移动落在哪张卡片focusIndex i按距离推导档位i 本身Focus 档i±1Secondary 档更远Content / Ambient 档前移 去模糊 提亮轻微后退 微模糊后退 强模糊 降饱和聚焦与离焦的对照维度聚焦Focus离焦Defocus距离感近前移远后退清晰度实blur0虚blur 随距离递增亮度略提亮压暗颜色保持饱和降饱和动效前移、轻微呼吸静止、退让交互接收输入关闭命中小小经验同一时刻一个强焦点。两个同等强度的焦点会互相削弱用户的视线会在两者间来回跳。模糊是降权不是装饰。如果只是想加个好看的虚化别用 blur它会被用户读成这里不用看。聚焦切换要快。200~250ms 左右比深度层级切换300~400ms更快因为它是高频动作。给离焦内容留回来的路。离焦不等于消失保留轮廓和轻度可读性用户才知道可以移回去。亮度优先于模糊做降权。模糊开销大能用亮度和饱和度区分的场合别急着上 blur。容易出问题的地方哦所有元素一起提亮做焦点。提亮是全屏相对概念全都亮等于全都没亮得留暗部做对比。blur 值给太大。超过 20px 的内容基本认不出用户会以为加载失败而不是这里次要。聚焦态还保持可点。离焦的卡片如果还能点用户误触后会觉得我没看它怎么触发了建议离焦层关闭或降低命中优先级。只改视觉不改顺序。焦点在视觉上是前面的但如果zIndex没跟着调它可能被后面的卡片盖住。动画里同时改太多属性。blur、brightness、scale 一起重算低端设备容易掉帧建议聚焦切换时限制在 2~3 个属性同时变化。忽略个体差异。有的人对运动敏感大范围的聚焦动画可能引起不适建议给系统级的减少动效开关留一个退化路径。
阅读完成 · 觉得有帮助？
