1.1 HarmonyOS和諧美學(xué)

在鴻蒙數(shù)字世界中，從光的設(shè)計(jì)元素出發(fā)，解構(gòu)真實(shí)世界的光、形、色，并沉淀在系統(tǒng)底座組件能力中。同時(shí)，對(duì)力的解構(gòu)，從既有的“引力動(dòng)效”開(kāi)始，進(jìn)一步構(gòu)建時(shí)間和空間的秩序。從“光、形、色，力、時(shí)、空”這一系統(tǒng)體驗(yàn)特征的角度，遵循自然物理法則，構(gòu)建 HarmonyOS 的和諧美學(xué)秩序。

UI Design Kit 是長(zhǎng)期致力于傳遞 HarmonyOS 系統(tǒng)特征性及設(shè)計(jì)美感的組件能力集合，將基于底座能力構(gòu)建出的設(shè)計(jì)規(guī)格傳遞給開(kāi)發(fā)者，助力生態(tài)快捷開(kāi)發(fā)、調(diào)用，與 HarmonyOS 一同構(gòu)建生態(tài)體驗(yàn)的精致度體驗(yàn)。

1.2 新設(shè)計(jì)：空間感組件集

UI Design Kit 中的組件強(qiáng)調(diào)應(yīng)用界面內(nèi)的空間關(guān)系，在 HdsNavigation 和 HdsTabs 組件中，繼承細(xì)膩的模糊材質(zhì)效果，并且組件的模糊過(guò)渡、色彩變化過(guò)程也更加跟手，模糊材質(zhì)與提亮算法可以更好的凸顯界面內(nèi)容的層次感與可讀性。

組件提供了可開(kāi)箱即用的默認(rèn)效果，開(kāi)發(fā)者也可以設(shè)置不同屬性來(lái)實(shí)現(xiàn)動(dòng)態(tài)模糊、跟手顯隱等精致交互效果，接入方式更為便利。以 HdNavigation 為例，只需在scrollEffectOpts 參數(shù)中配置 ScrollEffectType 類(lèi)型，即可實(shí)現(xiàn)標(biāo)題欄在跟手滑動(dòng)時(shí)的模糊效果，提升頁(yè)面滑動(dòng)的沉浸感體驗(yàn)。同時(shí)我們也提供了通用模糊、過(guò)渡模糊和漸變模糊三種樣式，適用于不同場(chǎng)景類(lèi)型下的界面效果，過(guò)渡模糊更適用于界面過(guò)渡場(chǎng)景下，從沉浸到有明確標(biāo)題欄的場(chǎng)景；漸變模糊更適用于全沉浸場(chǎng)景，標(biāo)題欄與界面內(nèi)容融合度更高的界面類(lèi)型。

此次也增加了空間感秩序的懸浮工具組件 ActionBar，配置屬性更加靈活，強(qiáng)調(diào)聚焦界面內(nèi)的重點(diǎn)功能和核心操作選項(xiàng)。作為空間感秩序的懸浮類(lèi)組件，能夠更好的適配一多設(shè)備的開(kāi)發(fā)與適配，降低界面適配難度?？伸`活配置核心操作按鈕樣式、尺寸以及數(shù)量，包括展開(kāi)方式和方向。

1.3 一多開(kāi)發(fā)：面向全場(chǎng)景設(shè)備體驗(yàn)

UI Design Kit 中的組件均面向一多設(shè)備提供，構(gòu)建組件在不同設(shè)備上的最佳體驗(yàn)。以 HdsNavigation 為例，在PC設(shè)備上支持側(cè)邊分欄模式，也支持配置動(dòng)態(tài)分欄、懸浮分欄多種樣式，更符合PC設(shè)備上的效率交互。

HdsListItem組件也滿足在不同設(shè)備上的配置項(xiàng)，包括左右不同的配置資源和結(jié)構(gòu)，參數(shù)化的管理格式確保了組件在對(duì)應(yīng)設(shè)備上最佳顯示效果，包括字號(hào)大小、適老化設(shè)計(jì)、無(wú)障礙設(shè)計(jì)等問(wèn)題。

1.4 新能力：開(kāi)放光場(chǎng)體驗(yàn)

UI Design Kit 也將鴻蒙獨(dú)特的光場(chǎng)體驗(yàn)開(kāi)放給開(kāi)發(fā)者，如控制中心和鎖屏界面點(diǎn)擊時(shí)的控件發(fā)光能力、各種背景流光和邊緣流光能力等。通過(guò)與軟硬芯一體整合，UI Design Kit 的光場(chǎng)體驗(yàn)效果在保證精致效果的同時(shí)，實(shí)現(xiàn)低功耗的性能表現(xiàn)。在控件發(fā)光能力中，開(kāi)發(fā)者僅需設(shè)置 pointlight 屬性即可在指定控件上實(shí)現(xiàn)邊緣、內(nèi)容、羽化等發(fā)光效果。

同時(shí)，在流光能力上，UI Design Kit 提供 shaderEffect 接口能力，支持開(kāi)發(fā)者自行設(shè)置流光的時(shí)長(zhǎng)、曲線、幀率等效果信息，自定義精致的背景流光和邊緣能力效果。

1.5 新套件：極簡(jiǎn)接入鴻蒙設(shè)計(jì)

HarmonyOS 生態(tài)持續(xù)完善，官方推出的全鏈路賦能套件——涵蓋標(biāo)準(zhǔn)化API、開(kāi)發(fā)指南、最佳實(shí)踐及場(chǎng)景化Sample，為開(kāi)發(fā)者帶來(lái)“開(kāi)箱即用”的高效體驗(yàn)。UI Design Kit 承載鴻蒙空間感、一多開(kāi)發(fā)、光場(chǎng)等設(shè)計(jì)語(yǔ)言，低碼開(kāi)發(fā)提供高性能組件能力，更多API文檔、指南、技術(shù)文章等賦能產(chǎn)品歡迎點(diǎn)擊【閱讀原文】訪問(wèn)開(kāi)發(fā)者網(wǎng)站獲取。