1.1 HarmonyOS和諧美學(xué)
在鴻蒙數(shù)字世界中,從光的設(shè)計元素出發(fā),解構(gòu)真實世界的光、形、色,并沉淀在系統(tǒng)底座組件能力中。同時,對力的解構(gòu),從既有的“引力動效”開始,進(jìn)一步構(gòu)建時間和空間的秩序。從“光、形、色,力、時、空”這一系統(tǒng)體驗特征的角度,遵循自然物理法則,構(gòu)建 HarmonyOS 的和諧美學(xué)秩序。
UI Design Kit 是長期致力于傳遞 HarmonyOS 系統(tǒng)特征性及設(shè)計美感的組件能力集合,將基于底座能力構(gòu)建出的設(shè)計規(guī)格傳遞給開發(fā)者,助力生態(tài)快捷開發(fā)、調(diào)用,與 HarmonyOS 一同構(gòu)建生態(tài)體驗的精致度體驗。
1.2 新設(shè)計:空間感組件集
UI Design Kit 中的組件強調(diào)應(yīng)用界面內(nèi)的空間關(guān)系,在 HdsNavigation 和 HdsTabs 組件中,繼承細(xì)膩的模糊材質(zhì)效果,并且組件的模糊過渡、色彩變化過程也更加跟手,模糊材質(zhì)與提亮算法可以更好的凸顯界面內(nèi)容的層次感與可讀性。
組件提供了可開箱即用的默認(rèn)效果,開發(fā)者也可以設(shè)置不同屬性來實現(xiàn)動態(tài)模糊、跟手顯隱等精致交互效果,接入方式更為便利。以 HdNavigation 為例,只需在scrollEffectOpts 參數(shù)中配置 ScrollEffectType 類型,即可實現(xiàn)標(biāo)題欄在跟手滑動時的模糊效果,提升頁面滑動的沉浸感體驗。同時我們也提供了通用模糊、過渡模糊和漸變模糊三種樣式,適用于不同場景類型下的界面效果,過渡模糊更適用于界面過渡場景下,從沉浸到有明確標(biāo)題欄的場景;漸變模糊更適用于全沉浸場景,標(biāo)題欄與界面內(nèi)容融合度更高的界面類型。
此次也增加了空間感秩序的懸浮工具組件 ActionBar,配置屬性更加靈活,強調(diào)聚焦界面內(nèi)的重點功能和核心操作選項。作為空間感秩序的懸浮類組件,能夠更好的適配一多設(shè)備的開發(fā)與適配,降低界面適配難度。可靈活配置核心操作按鈕樣式、尺寸以及數(shù)量,包括展開方式和方向。
1.3 一多開發(fā):面向全場景設(shè)備體驗
UI Design Kit 中的組件均面向一多設(shè)備提供,構(gòu)建組件在不同設(shè)備上的最佳體驗。以 HdsNavigation 為例,在PC設(shè)備上支持側(cè)邊分欄模式,也支持配置動態(tài)分欄、懸浮分欄多種樣式,更符合PC設(shè)備上的效率交互。
HdsListItem組件也滿足在不同設(shè)備上的配置項,包括左右不同的配置資源和結(jié)構(gòu),參數(shù)化的管理格式確保了組件在對應(yīng)設(shè)備上最佳顯示效果,包括字號大小、適老化設(shè)計、無障礙設(shè)計等問題。
1.4 新能力:開放光場體驗
UI Design Kit 也將鴻蒙獨特的光場體驗開放給開發(fā)者,如控制中心和鎖屏界面點擊時的控件發(fā)光能力、各種背景流光和邊緣流光能力等。通過與軟硬芯一體整合,UI Design Kit 的光場體驗效果在保證精致效果的同時,實現(xiàn)低功耗的性能表現(xiàn)。在控件發(fā)光能力中,開發(fā)者僅需設(shè)置 pointlight 屬性即可在指定控件上實現(xiàn)邊緣、內(nèi)容、羽化等發(fā)光效果。
同時,在流光能力上,UI Design Kit 提供 shaderEffect 接口能力,支持開發(fā)者自行設(shè)置流光的時長、曲線、幀率等效果信息,自定義精致的背景流光和邊緣能力效果。
1.5 新套件:極簡接入鴻蒙設(shè)計
HarmonyOS 生態(tài)持續(xù)完善,官方推出的全鏈路賦能套件——涵蓋標(biāo)準(zhǔn)化API、開發(fā)指南、最佳實踐及場景化Sample,為開發(fā)者帶來“開箱即用”的高效體驗。UI Design Kit 承載鴻蒙空間感、一多開發(fā)、光場等設(shè)計語言,低碼開發(fā)提供高性能組件能力,更多API文檔、指南、技術(shù)文章等賦能產(chǎn)品歡迎點擊【閱讀原文】訪問開發(fā)者網(wǎng)站獲取。
-
鴻蒙
+關(guān)注
關(guān)注
60文章
2963瀏覽量
45882 -
HarmonyOS
+關(guān)注
關(guān)注
80文章
2153瀏覽量
36037
原文標(biāo)題:【HarmonyOS亮點新特性介紹】UI Design Kit助力精致開發(fā)體驗
文章出處:【微信號:HarmonyOS_Dev,微信公眾號:HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
LCD開發(fā):從硬件適配到UI實現(xiàn)
Renesas Starter Kit for RX72T:開啟嵌入式開發(fā)新征程
探索CYUSB3KIT - 004 EZ - USB? SX3開發(fā)套件的無限可能
KIT_T2G-B-H_LITE評估套件:汽車應(yīng)用開發(fā)利器
KIT_XMC14_2GO開發(fā)板:功能特性與硬件解析
EZ-USB? FX10 DVK (KIT_FX10_FMC_001) 套件指南:助力視頻音頻流應(yīng)用開發(fā)
Spec-Kit+Copilot打造AI規(guī)格驅(qū)動開發(fā)
UI開發(fā)概述
基于RV1126開發(fā)板實現(xiàn)簡單的UI開發(fā)示例
UI Design Kit助力精致開發(fā)體驗
評論