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/b4/v3/okoTQUORRiC2CPJEBbP6yQ/zh-cn_image_0000002594828476.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=BE4798B1CA261080A6BAA24E55E06DAF9308A1B9DFC803602E3C250269ACC67B)

多样化的组件样式

 | 

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/37/v3/HQDW0ku7S7WXpahmuQ0bLA/zh-cn_image_0000002625187923.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=C03873756E54AE4927D60095EA261C0C1DEE4370CA479B766D03056F2F7CE300)

丰富UI界面光影

 | 

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/76/v3/W3zuwk4NR96cAlEH3uBJRw/zh-cn_image_0000002625108067.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=689BD2CF5BABBD2025BF24E40B2C9BFA25746F1A100F71817402274FB3F168D6)

全场景一致体验

 |

#### 功能全景

#### \[h2\]增强型UI组件

| 组件分类 | 组件描述 |
| :-- | :-- |
| 
![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5e/v3/IhjcGMzDR2yK_h6hG7rhNQ/zh-cn_image_0000002594668550.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=2F6D4F11E6356CECDD24D0F0F0154A05A18F070A1E6D374E4CD8D169BACE8E33)

**[组件导航（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/14/v3/mB8wi5PIQfiT7u7J-wpkLQ/zh-cn_image_0000002594828478.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=F286519AC766D7C4C3C23DF695AE80892D1FD3105EC789649167DC176A23279C)

**[侧边栏（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/c6/v3/d3AcpzGERNeX6CySR3MUsA/zh-cn_image_0000002625187925.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=A50974196B14299A87C5CB61A6D1801E70CAE8937E88820EB15E7EC306E376DF)

**[底部页签（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/e0/v3/bUnAYHvHQpC7OAJJZ1T6fA/zh-cn_image_0000002625108069.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=CD71DEBDDB3286589FEC837C67270D4898881AE0FE3E53D49D7BB9020C9F6905)

**[即时操作（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/e2/v3/_0qqXBOPTMu57HfDBmyLGg/zh-cn_image_0000002594668552.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=58B6B65BFB25B0D2113D7668F72D514439C162003820A06066FAB4A39DEEF681)

**[列表（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/4a/v3/09JrltbcQ0qfdWI9yV_AwQ/zh-cn_image_0000002594828480.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=A7CE9C554A6222BA24B3699A730BED96F65B36FB61C1325C7206BD8C25385DD0)

**[应用内多窗（MultiWindowEntryInAPP）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-multiwindowentryinapp)**

 | 单应用多窗口入口，支持自定义图标、背板颜色与大小，实现多窗并行。 |

#### \[h2\]HDS沉浸视效

| 光效功能 | 功能描述 |
| :-- | :-- |
| 
![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b5/v3/VrCbIhRFRNS16b6f_-KJmQ/zh-cn_image_0000002625187927.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=331EBD8A3698881DCB503DE260BAE598AA36564D1150DF6C31CD18C125CEC01F)

**[物理光感系统](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/3c/v3/1r-pSiXGRcWpoZ3nf1rqNg/zh-cn_image_0000002625108071.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=034EBB5720B91C521909F50559B984BDA558B78B16E61E3171BBB0AF4842E9D9)

**[按压交互阴影](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/43/v3/6-CO8xE7Tlao_qnioNNfmQ/zh-cn_image_0000002594668554.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=764ECE8067FE6A03DE101AAF16D6516A5BFD817FE5153C9B55D689120F80921F)

**[沉浸光感材质](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-component-material)**

 | 提供HDS标题栏组件和底部页签组件的沉浸光感材质能力。提升组件层次感和空间感，带来更具沉浸式的视觉和交互反馈。 |

#### \[h2\]资源与图标能力

| 能力分类 | 能力说明 |
| :-- | :-- |
| 
![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2e/v3/6oiua8KRRkmOycopwlz9pA/zh-cn_image_0000002594828482.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=ABD516658A33BCDBB1B55906575893C30D68F978331E7E93EDCF6BF9DFA502EF)

**[应用图标处理](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/87/v3/VGcfuX2aTemh3K1E9YtTnw/zh-cn_image_0000002625187929.png?HW-CC-KV=V1&HW-CC-Date=20260612T073348Z&HW-CC-Expire=86400&HW-CC-Sign=27900505CFB423B0AAAAB1B41294EBF568EB6B34A641752623182935AEBD4ADB)

**[自定义 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，不需提前预置系统 |

#### 约束与限制

#### \[h2\]支持的国家和地区

UI Design Kit当前仅支持中国境内（香港特别行政区、澳门特别行政区、中国台湾除外）。

#### \[h2\]支持的设备

| 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 |

#### \[h2\]能力限制

**HdsNavigation/HdsNavDestination：** 横屏且导航栏为[Stack模式](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation#navigationmode9枚举说明)时，不支持合并工具栏到菜单栏。标题栏默认采用层叠布局（位于内容区上层）。

#### \[h2\]规格限制

*   **图标批量处理接口：** 最大并发数为 10，单次最大处理量 500 个。
*   **Symbol资源注册接口：** 仅支持注册 1 组图标资源与动效参数资源，最大支持 10 个自定义图标与动效参数资源注册。

#### 模拟器支持情况

本Kit支持模拟器开发，但与真机存在部分能力差异，具体差异如下：

*   通用差异：请参见“[模拟器与真机的差异](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-emulator-specification#section1227613205203)”。
*   不支持HDS沉浸视效，包括点光源效果、按压阴影、双边边缘流光、背景流光、自带背景的双边流光和沉浸光感材质。