当 AI 学会"什么时候该用 HDS"：Skill 如何让 UI 质感适配不再踩坑

HdsTabs / HdsTabsController 6.0.0(20) 悬浮页签、三断点响应式宽度、左右手自适应、沉浸光感 侧边栏 HdsSideBar / HdsSideMenu 6.0.0(20) 可折叠侧边栏，嵌入式和覆盖式两种模式 即时操作 HdsSnackBar 6.0.0(20) 非模态通知，支持富媒体和操作按钮 核心操作栏 HdsActionBar 6.0.0(20) 多按钮组合 + 可展开主按钮 列表 HdsListItem / HdsListItemCard 6.0.0(20) 高端卡片样式，内置横滑删除动画 应用内多窗 MultiWindowEntryInAPP 6.0.0(20) 仅折叠屏展开态、三折叠横屏、平板横屏生效 图标处理 hdsDrawable 5.0.0(12) 分层/单层图标批量处理 自定义 Symbol symbolRegister 5.1.1(19) 注册自定义图标字体 沉浸光感 hdsMaterial 6.1.0(23) 系统材质效果，沉浸光感自适应 视效 hdsEffect / HdsVisualComponent 6.0.0(20) 点光源、按压光效、流光效果

各组件详细特性不在本文展开，完整 API 参考 HDS 组件官方文档。

5.5 约束汇总

AI 输出方案时会自动附加以下约束提示：

约束项	约束内容
地域限制	仅中国大陆（不含港澳台）
模拟器	不支持沉浸视效（点光源、流光、沉浸光感均无效果）
沉浸光感设备	仅手机、平板
应用内多窗设备	仅折叠屏展开态、三折叠横屏、平板横屏
图标批处理	并发最大 10，每批最大 500
自定义 Symbol	最多注册 1 组资源，每组最多 10 个自定义图标
点光源	单组件最多同时受 12 个光源照亮
光源位置	初始化为组件正中心，不随组件位移变化，不建议在滚动组件中使用

六、实战演示：三个真实场景

场景 1：DEV —— 底部页签 + 导航栏沉浸光感

输入："底部页签加沉浸光感，折叠屏上也要正常显示。"

路由：DEV → 信号词 沉浸光感 → SCENE-09（主），折叠屏 → SCENE-02（次）。

输出：用 HdsTabs 的 barFloatingStyle 配置 systemMaterialEffect，推荐 ADAPTIVE 模式。折叠态切换时窗口变化触发 HdsTabs 重新布局。注意沉浸光感仅手机/平板支持，模拟器无法验证。

场景 2：FIX —— 中低端设备卡顿 + 风格不统一

输入："底部页签中低端机卡顿，导航栏光效和页签风格不统一。"

根因：用了固定 EXQUISITE 等级而非 ADAPTIVE；在滚动容器中用了点光源；多个组件同时开沉浸光感，GPU 负载叠加。

修复：改 ADAPTIVE 模式或加 getSystemMaterialTypes() 降级；点光源移出滚动区域，滚动场景改用 shaderEffect；导航栏和页签统一走 ADAPTIVE 配置，确保同一渲染路径。

场景 3：VAL —— 多设备一致性验证

输入："验证沉浸光感在手机、平板、折叠屏上的表现和性能。"

输出验证矩阵：

设备形态	材质等级	验证指标
手机（旗舰）	ADAPTIVE → EXQUISITE	帧率 ≥ 60fps，无明显发热
手机（中低端）	ADAPTIVE → SMOOTH	帧率 ≥ 30fps，无卡顿
平板	ADAPTIVE	帧率稳定，布局不错位
折叠屏（展开态）	ADAPTIVE	窗口变化后光效正常，无闪烁
折叠屏（折叠态）	ADAPTIVE	页签重新布局后光效正常

 4/5   首页 上一页 2 3 4 5 下一页 尾页

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载