# UI Design Kit简介 UI Design Kit（UI设计套件）是华为提供的符合HarmonyOS Design System规范的UI界面开发套件集合。通过提供多样式的扩展组件、丰富的光影效果，支撑开发者高效构建高端精致的界面（参见[HarmonyOS设计理念](https://developer.huawei.com/consumer/cn/doc/design-guides/design-concepts-0000001795698445)），确保应用在HarmonyOS全场景设备上达成一致的视觉体验与设计品质，遵循[HarmonyOS设计规范](https://developer.huawei.com/consumer/cn/doc/design-guides/general_overview-0000001929599380)。 |**扩展组件**|**光影效果**|**多设备适配**| |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5d/v3/9nzwRAgGSVC72E5b9R_-ig/zh-cn_image_0000002776749184.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=3FF3D6C16C3F9BBC31A263B6B9D7EA6F921F079A4815C717493B2F1B8B035EB4) 多样化的组件样式|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d8/v3/tc87-40ISYKnP3zolFMvQw/zh-cn_image_0000002806028901.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=F9E3FD1C8512FE21D6F35A182EB45AB8AEDC961B3C168EFAA975D9BAD1DE25F0) 丰富UI界面光影|![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/JidaY7xmQNuF-mFXhk-RJw/zh-cn_image_0000002806108791.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=4AAD1E8EF569A2762FB50B6B6B2023D5C95F1989823A7C6F309E7A69485D4047) 全场景一致体验| ## 功能全景 ### 增强型UI组件 |组件分类|组件描述| |:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f8/v3/FzAWRXeAQKaIw4R8ON8dEA/zh-cn_image_0000002776909172.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=35E8C9E92AA9990D781CC7A5BA3A63B9392C45CC724D3B41EEF34A0E22734BFD) **[组件导航（HdsNavigation/HdsNavDestination）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-navigation-dynamic-blur)**|提供HdsNavigation组件作为路由导航的根视图容器，HdsNavDestination作为子页面的根容器，实现灵活跳转操作；扩展标题栏交互，支持动态模糊与菜单气泡。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cb/v3/uMEsMOE3RK-XmvjTroyDAw/zh-cn_image_0000002776749186.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=4D15FBDBF56AB36B155D74C88C4A6BA82F212679A646F0D6CDE807147F0FB1F4) **[侧边栏（HdsSideBar）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-sidebar-overlay-mode)与[侧边栏菜单（HdsSideMenu）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-side-menu)**|侧边栏：提供可显隐的侧边栏容器，支持自定义内容区。 侧边栏菜单：配套菜单组件支持一、二级菜单样式及新消息红点提醒。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2e/v3/0eZ0Pl5rR6yr6scEf-GQDA/zh-cn_image_0000002806028903.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=C9078A2C10F68E68D3642797F41CC2D576B9F84CC04FB807BEC077DF78D521FF) **[底部页签（HdsTabs）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-tabs-split-line)**|支持视图切换，提供分割线动态显隐、背景模糊、图标出血及半屏居中布局等增强样式。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3e/v3/Qv1ATzfVSzufXn9AmvR6Gw/zh-cn_image_0000002806108793.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=4DB906C8D3FC65936BBBC67540625998E269DC70860FC794A326A9232CD57DED) **[即时操作（HdsSnackBar）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-snackbar-resident-notification)与[核心操作栏（HdsActionBar）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-actionbar-main-buttons)**|即时操作：提供非模态通知组件，支持图文展示与快速操作按钮，用于轻量化交互反馈。 核心操作栏：组合多个按钮，支持主按钮展开/收起的联动动效。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9e/v3/-F1JkNpYR-yytDe2nMbawA/zh-cn_image_0000002776909174.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=FA37273F6F9785A2E11BDE715838B0FB79A9DC1BEE7E45154B405C4078A89697) **[列表（HdsListItem）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-set-hds-slide-horizon-listitem)**|封装高端卡片样式，内置横滑删除动效，适配多设备系统风格。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/TRu1FTqNRmaLDBGoHW19Jg/zh-cn_image_0000002776749188.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=4B6F0D8CAF6D6A4CC0C21ED89A8A94E58339A2D14BC31476CB15C51DFDB21BFF) **[应用内多窗（MultiWindowEntryInAPP）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-multiwindowentryinapp)**|单应用多窗口入口，支持自定义图标、背板颜色与大小，实现多窗并行。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/92/v3/GO_am5PASfi51pSQtgOB4A/zh-cn_image_0000002806028905.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=D3F982B6265E679AB48FC8F7F441BAAE44EC6130F030F2EFBD76F03D97F8846B) **[颜色选择器（HdsColorPicker）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-color-picker-favorites)**|提供颜色选择与收藏管理功能的组件，支持网格、光谱和滑块三种颜色选择模式。| ### HDS沉浸视效 |光效功能|功能描述| |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/95/v3/k6kBGp-DRrOGOvAV0zFFrg/zh-cn_image_0000002806108795.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=6A7EDBBECF93AE398AC5D1544357EBF4FEEC91EAD4BB7B05AAD1E2247542932F) **[物理光感系统](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-point-light)**|提供点光源、边缘流光及背景流光。特有"自带背景双边流光"接口，完美适配胶囊组件与屏幕边缘发光场景。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/0d/v3/pftJ5gr8SwSJiRx6uEOgXw/zh-cn_image_0000002776909176.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=81A37283488E619EBE9A027F89AFE4F63365E1F5AC4F9C5226268E23D429E598) **[按压交互阴影](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-background-color)**|提供按压阴影接口，自动计算组件在按压交互时的背景色变化效果，增强触控真实感。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c4/v3/zHaIqbOcR2eg3pjuUNZqhw/zh-cn_image_0000002776749190.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=A724F5BB6FB1ECB55678BF4A2A7195BDEBC1C664B0706A5944907430A855B114) **[沉浸光感材质](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material)**|提供HDS标题栏组件和底部页签组件的沉浸光感材质能力。提升组件层次感和空间感，带来更具沉浸式的视觉和交互反馈。| ### 资源与图标能力 |能力分类|能力说明| |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/34/v3/WOEXmY_0QuyvM4kh5XS7AA/zh-cn_image_0000002806028907.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=F91F5D4D2FC14261818D3BBF062C132B9F4A2810C9BF41D45883C5222C006587) **[应用图标处理](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-layered-process)**|支持单层或分层图标的合成、剪切、缩放及描边，提供高效的批量处理能力。| |![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/20/v3/oputn7kJRlqKmQIZkJIE-A/zh-cn_image_0000002806108797.png?HW-CC-KV=V1&HW-CC-Date=20261029T054329Z&HW-CC-Expire=31536000000&HW-CC-Sign=047AFD2A54032BE6D8C675DAEE7706F55CA2BD6A322D7ED5144381AFBB40599B) **[自定义 Symbol](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-custom-symbol-res-register)**|支持注册应用侧图标与动效资源，配合 ArkUI 组件展示，保持系统级视觉一致性。| ## 与ArkUI基础能力的关系 UI Design Kit的导航、页签、列表、光效、应用交互等能力是基于ArkUI以下能力维度的扩展。 |能力维度|ArkUI基础能力|UI Design Kit能力| |:-------|:--------|:-------------------------------------------| |组件导航|基础跳转|**沉浸式体验**：动态模糊标题栏、半模态样式、标题栏自定义区域、文字/图片双类型图标等| |底部页签|基础切换|**视觉增强**：分割线动态显隐、页签栏模糊、图标出血设计、半屏居中对齐| |列表交互|普通展示|**高端动效：** 内置横滑删除、统一样式卡片、多设备适配| |光影视觉|基础平面/材质|**增强视效**：提供点光源、流光、按压阴影等系统级沉浸渲染能力| |应用交互|单窗口|**多窗并行**：提供应用内多窗组件，支持自定义背板、图标与文字样式| |Symbol图标|依赖系统预置|**解耦灵活：** 应用内注册自定义Symbol，不需提前预置系统| ## 约束与限制 ### 支持的国家和地区 UI Design Kit当前仅支持中国境内（香港特别行政区、澳门特别行政区、中国台湾除外）。 ### 支持的设备 |UI Design Kit提供的能力|支持的设备类型| |:------------------------------------------------------------------------------------------------------------------|:-------------------------------| |[图标处理](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-layered-process)|Phone、Tablet、PC/2in1、TV| |[组件导航](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-navigation-dynamic-blur)|Phone、Tablet、PC/2in1、TV| |[侧边栏样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-sidebar-overlay-mode)|Phone、Tablet、PC/2in1、TV| |[侧边栏菜单样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-side-menu)|Phone、Tablet、PC/2in1、TV| |[底部页签](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-tabs-split-line)|Phone、Tablet、PC/2in1| |[即时操作](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-snackbar-resident-notification)|Phone、Tablet、PC/2in1、TV| |[核心操作栏](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-actionbar-main-buttons)|Phone、Tablet、PC/2in1、TV| |[列表](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-set-hds-slide-horizon-listitem)|Phone、Tablet、PC/2in1、Wearable、TV| |[应用加载自定义Symbol](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-custom-symbol-res-register)|Phone、Tablet、PC/2in1| |[HDS视效](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-visual-effect-point-light)|Phone、Tablet、PC/2in1| |[应用内多窗](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-multiwindowentryinapp)|Phone、Tablet| |[沉浸光感材质](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material)|Phone、Tablet| |[颜色选择器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-color-picker-favorites)|Phone、Tablet| ### 能力限制 **HdsNavigation/HdsNavDestination：** 横屏且导航栏为[Stack模式](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#navigationmode9枚举说明)时，不支持合并工具栏到菜单栏。标题栏默认采用层叠布局（位于内容区上层）。 ### 规格限制 * **图标批量处理接口：** 最大并发数为 10，单次最大处理量 500 个。 * **Symbol资源注册接口：** 仅支持注册 1 组图标资源与动效参数资源，最大支持 10 个自定义图标与动效参数资源注册。 ## 模拟器支持情况 本Kit支持模拟器开发，但与真机存在部分能力差异，具体差异如下： * 通用差异：请参见"[模拟器与真机的差异](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-emulator-specification#section1227613205203)"。 * 不支持HDS沉浸视效，包括点光源效果、按压阴影、双边边缘流光、背景流光、自带背景的双边流光和沉浸光感材质。