0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

UI Design Kit助力精致开发体验

HarmonyOS开发者 来源:HarmonyOs开发者技术 2025-07-14 17:12 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

1.1 HarmonyOS和谐美学

鸿蒙数字世界中,从光的设计元素出发,解构真实世界的光、形、色,并沉淀在系统底座组件能力中。同时,对力的解构,从既有的“引力动效”开始,进一步构建时间和空间的秩序。从“光、形、色,力、时、空”这一系统体验特征的角度,遵循自然物理法则,构建 HarmonyOS 的和谐美学秩序。

UI Design Kit 是长期致力于传递 HarmonyOS 系统特征性及设计美感的组件能力集合,将基于底座能力构建出的设计规格传递给开发者,助力生态快捷开发、调用,与 HarmonyOS 一同构建生态体验的精致度体验。

1.2 新设计:空间感组件集

UI Design Kit 中的组件强调应用界面内的空间关系,在 HdsNavigation 和 HdsTabs 组件中,继承细腻的模糊材质效果,并且组件的模糊过渡、色彩变化过程也更加跟手,模糊材质与提亮算法可以更好的凸显界面内容的层次感与可读性。

组件提供了可开箱即用的默认效果,开发者也可以设置不同属性来实现动态模糊、跟手显隐等精致交互效果,接入方式更为便利。以 HdNavigation 为例,只需在scrollEffectOpts 参数中配置 ScrollEffectType 类型,即可实现标题栏在跟手滑动时的模糊效果,提升页面滑动的沉浸感体验。同时我们也提供了通用模糊、过渡模糊和渐变模糊三种样式,适用于不同场景类型下的界面效果,过渡模糊更适用于界面过渡场景下,从沉浸到有明确标题栏的场景;渐变模糊更适用于全沉浸场景,标题栏与界面内容融合度更高的界面类型。

此次也增加了空间感秩序的悬浮工具组件 ActionBar,配置属性更加灵活,强调聚焦界面内的重点功能和核心操作选项。作为空间感秩序的悬浮类组件,能够更好的适配一多设备的开发与适配,降低界面适配难度。可灵活配置核心操作按钮样式、尺寸以及数量,包括展开方式和方向。

1.3 一多开发:面向全场景设备体验

UI Design Kit 中的组件均面向一多设备提供,构建组件在不同设备上的最佳体验。以 HdsNavigation 为例,在PC设备上支持侧边分栏模式,也支持配置动态分栏、悬浮分栏多种样式,更符合PC设备上的效率交互。

HdsListItem组件也满足在不同设备上的配置项,包括左右不同的配置资源和结构,参数化的管理格式确保了组件在对应设备上最佳显示效果,包括字号大小、适老化设计、无障碍设计等问题。

1.4 新能力:开放光场体验

UI Design Kit 也将鸿蒙独特的光场体验开放给开发者,如控制中心和锁屏界面点击时的控件发光能力、各种背景流光和边缘流光能力等。通过与软硬芯一体整合,UI Design Kit 的光场体验效果在保证精致效果的同时,实现低功耗的性能表现。在控件发光能力中,开发者仅需设置 pointlight 属性即可在指定控件上实现边缘、内容、羽化等发光效果。

同时,在流光能力上,UI Design Kit 提供 shaderEffect 接口能力,支持开发者自行设置流光的时长、曲线、帧率等效果信息,自定义精致的背景流光和边缘能力效果。

1.5 新套件:极简接入鸿蒙设计

HarmonyOS 生态持续完善,官方推出的全链路赋能套件——涵盖标准化API、开发指南、最佳实践及场景化Sample,为开发者带来“开箱即用”的高效体验。UI Design Kit 承载鸿蒙空间感、一多开发、光场等设计语言,低码开发提供高性能组件能力,更多API文档、指南、技术文章等赋能产品欢迎点击【阅读原文】访问开发者网站获取。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    60

    文章

    2858

    浏览量

    45354
  • HarmonyOS
    +关注

    关注

    80

    文章

    2146

    浏览量

    35575

原文标题:【HarmonyOS亮点新特性介绍】UI Design Kit助力精致开发体验

文章出处:【微信号:HarmonyOS_Dev,微信公众号:HarmonyOS开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    Spec-Kit+Copilot打造AI规格驱动开发

    作者:算力魔方创始人/英特尔创新大使 刘力 一,什么是Spec-Kit? 在传统的软件开发中,通常先有需求→ 写规格 → 再写代码;规格多数是“指导性文档”,而真正的业务逻辑和边界由程序员“翻译
    的头像 发表于 10-15 16:10 728次阅读
    Spec-<b class='flag-5'>Kit</b>+Copilot打造AI规格驱动<b class='flag-5'>开发</b>

    UI开发概述

    基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建应用
    发表于 06-24 06:36

    基于RV1126开发板实现简单的UI开发示例

    本方案为最简单的UI开发示例,已为用户初步构建一个基本的应用工程;准备好我司的easyeai-api链接调用;准备好UI开发环境。其目的在于方便用户马上进行带有界面交互的产品
    的头像 发表于 04-18 16:07 888次阅读
    基于RV1126<b class='flag-5'>开发</b>板实现简单的<b class='flag-5'>UI</b><b class='flag-5'>开发</b>示例

    鸿蒙应用元服务开发-Account Kit配置登录权限

    的用户体系。 用户打开元服务时,不需要用户点击登录/注册按钮,即可获取用户的身份标识UnionID/OpenID,完成静默登录。静默登录详细接入体验可参考Account Kit提供的SampleCode
    发表于 04-15 16:03

    RV1126 实现简单的UI开发示例

    在RV1126上实现简单的UI开发实例
    的头像 发表于 04-09 16:08 899次阅读
    RV1126 实现简单的<b class='flag-5'>UI</b><b class='flag-5'>开发</b>示例

    鸿蒙应用元服务开发-Account Kit获取手机号

    客户端开发参见Scenario Fusion Kit的快速验证手机号Button。 服务端开发 1.元服务服务器使用Client ID、Client Secret、Authorization Code调用
    发表于 04-08 16:14

    鸿蒙应用元服务开发-Account Kit获取收货地址

    ID:1****12 Client ID:1****14 使用场景:*** 五、开发步骤 开发者可参考Scenario Fusion Kit的选择收货地址Button开发指南完成代码
    发表于 04-07 17:15

    鸿蒙应用元服务开发-Account Kit获取华为账号用户信息概述

    三种获取头像的方式:使用华为账号头像、从图库选择、拍照,用户选择其中一种方式后,Account Kit返回头像uri给Button,元服务刷新Button并展示头像。 (三)开发前提 在进行代码开发
    发表于 04-02 11:10

    鸿蒙应用元服务开发-Account Kit获发票抬头

    。 四、开发步骤 开发者可参考Scenario Fusion Kit的选择发票抬头Button开发指南完成代码开发。 本文主要引用参考Har
    发表于 04-01 15:26

    鸿蒙应用元服务开发-Account Kit概述

    。Account Kit提供的SampleCode示例工程体现了Account Kit提供的登录、授权头像昵称、快速验证手机号、收货地址、发票抬头、未成年人模式等特性,可参考该工程进行应用的相关内容开发。 一
    发表于 03-31 12:08

    用AI人脸识别开发板BW21-CBV-Kit驱动墨水屏

    试着用BW21-CBV-Kit点亮2.9寸墨水屏,开发板例程非常丰富,在arduino上开发的话上手超级容易。
    的头像 发表于 03-04 18:24 1532次阅读
    用AI人脸识别<b class='flag-5'>开发</b>板BW21-CBV-<b class='flag-5'>Kit</b>驱动墨水屏

    大彩VisualTFT智能家居UI案例

                   一、适合范围                     适合全系列480*480大彩串口屏产品               二、UI展示         
    发表于 02-14 16:32 1次下载

    Qt Group发布Qt AI Assistant,助力跨平台UI开发

    为了进一步提升跨平台用户界面(UI)开发的效率与便捷性,Qt Group近日推出了一款实验性工具——Qt AI Assistant。这款工具的问世,标志着Qt Group在简化UI开发
    的头像 发表于 02-07 13:47 1645次阅读

    Payment Kit(华为支付服务)概述

    Payment Kit(华为支付服务)提供了方便、安全和快捷的支付方式,开发者在开发的商户应用/元服务中接入华为支付服务便捷且快速。 商户应用/元服务接入Payment Kit后,可在
    发表于 01-20 16:17

    BW21-CBV-Kit的使用教程

    作为一款本地AI图象识别开发板,BW21-CBV-Kit它能够独自运行目标识别模型。2.4GHz+5GHz的双频Wi-Fi,提供高性能的无线传输能力,让图象传输更加流畅。丰富的接口,搭配着AI识别
    的头像 发表于 01-03 11:30 1302次阅读
    BW21-CBV-<b class='flag-5'>Kit</b>的使用教程