為順應(yīng)數(shù)字時(shí)代的不斷發(fā)展,圖撲 HT UI 5.0 在原有功能強(qiáng)大的界面組件庫(kù)的基礎(chǔ)上進(jìn)行了全面升級(jí),融入了更先進(jìn)的技術(shù)、創(chuàng)新的設(shè)計(jì)理念以及更加智能的功能。HT UI 5.0 使用戶體驗(yàn)更為直觀、個(gè)性化,并在性能、穩(wěn)定性和安全性等方面達(dá)到新的高度。
HT UI 5.0 的改版升級(jí),是團(tuán)隊(duì)對(duì)于用戶需求深刻理解和對(duì)于未來科技趨勢(shì)的前瞻洞察。旨在為用戶帶來更加令人驚艷的界面體驗(yàn),同時(shí)也為企業(yè)提供更強(qiáng)大的數(shù)字化工具,以應(yīng)對(duì)不斷變化的市場(chǎng)挑戰(zhàn)。
HT UI 庫(kù)是一套功能強(qiáng)大的界面組件庫(kù),基于 HT 核心包的優(yōu)秀架構(gòu)和 HTML5 先進(jìn)的 Canvas 機(jī)制,具有易上手、高性能、易擴(kuò)展、組件豐富、跨平臺(tái)等特點(diǎn)。而本次全面升級(jí)的 HT UI 5.0 版本,為 Web 應(yīng)用提供了豐富而強(qiáng)大的基礎(chǔ) UI 組件。相較于之前的 4.0 版本側(cè)重于擴(kuò)展性,5.0 版本則在保留擴(kuò)展性的基礎(chǔ)上,提供了開箱即用的特性。
圖撲軟件基于 HTML5(Canvas/WebGL/WebVR)標(biāo)準(zhǔn)的 Web 技術(shù),滿足了工業(yè)物聯(lián)網(wǎng)跨平臺(tái)云端化部署實(shí)施的需求,以低代碼的形式自由構(gòu)建大屏組態(tài)、UI 組態(tài)、工業(yè)組態(tài)、三維組態(tài)。從 SDK 組件庫(kù),到 2D 和 3D 編輯,到屬性修改,構(gòu)成了一站式的數(shù)據(jù)可視化解決方案、形成了一整套實(shí)踐證明的高效開發(fā)流程和生態(tài)體系。
高性能
圖撲 HT UI 5.0 致力于提供高性能的用戶界面體驗(yàn),其中一個(gè)顯著的亮點(diǎn)是采用了先進(jìn)的繪制機(jī)制,以實(shí)現(xiàn)高效的圖形處理。這一特性使得 HT UI 5.0 在處理大量數(shù)據(jù)和復(fù)雜交互的場(chǎng)景中表現(xiàn)出色,相較于傳統(tǒng)的組件庫(kù),極大地提升了性能水平,為用戶提供更為流暢的界面操作體驗(yàn)。
![wKgZomW4XAiASr-hAAMOWfDKVmM626.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XAiASr-hAAMOWfDKVmM626.png)
通過優(yōu)化繪制機(jī)制,HT UI 5.0 能夠更加智能地處理圖形渲染,使得在處理大數(shù)據(jù)量或者需要頻繁交互的情況下,仍能保持高效運(yùn)行。這種高性能的設(shè)計(jì)不僅僅體現(xiàn)在組件的顯示上,更包括用戶與界面的互動(dòng)過程中,確保了即便是在復(fù)雜的應(yīng)用場(chǎng)景下,用戶也能夠感受到毫不遲滯的界面響應(yīng)速度。
![wKgaomW4XAmABUOMAETEkKb14QI145.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XAmABUOMAETEkKb14QI145.gif)
相較于傳統(tǒng)組件庫(kù),HT UI 5.0 的高性能設(shè)計(jì)意味著更迅速的數(shù)據(jù)渲染、更快速的頁(yè)面切換,以及更為高效的用戶交互。這不僅提升了用戶體驗(yàn)的品質(zhì),也使得開發(fā)者能夠更自如地應(yīng)對(duì)復(fù)雜的業(yè)務(wù)需求,為 Web 應(yīng)用的性能表現(xiàn)帶來了質(zhì)的飛躍。
統(tǒng)一的數(shù)據(jù)模型
圖撲 HT UI 5.0 沿用了 4.0 版本的特性,即統(tǒng)一的數(shù)據(jù)模型(DataModel),為用戶提供了一種統(tǒng)一的數(shù)據(jù)驅(qū)動(dòng)方式。這一設(shè)計(jì)理念使得樹形、表格、列表等多種組件可以共享同一套數(shù)據(jù)模型,從而顯著降低了開發(fā)人員的學(xué)習(xí)成本,簡(jiǎn)化了開發(fā)流程。
![wKgZomW4XAqANA7xAANQXhGkZn4139.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XAqANA7xAANQXhGkZn4139.png)
通過使用 DataModel,開發(fā)人員能夠更輕松地管理和操作組件所需的數(shù)據(jù)。這種統(tǒng)一的數(shù)據(jù)模型不僅使得代碼更為簡(jiǎn)潔,減少了冗余代碼的出現(xiàn),同時(shí)也提高了代碼的質(zhì)量。開發(fā)者不再需要為每個(gè)組件單獨(dú)定義數(shù)據(jù)模型,而是可以在整個(gè)應(yīng)用中共享和重用同一套數(shù)據(jù)模型,大大提高了開發(fā)效率。
![wKgaomW4XAuAJBFxAAUvbBaak1A543.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XAuAJBFxAAUvbBaak1A543.gif)
另外,采用統(tǒng)一的數(shù)據(jù)模型還使得各個(gè)組件之間更好地協(xié)同工作。不同組件之間的數(shù)據(jù)交流更加順暢,降低了集成的難度,提高了系統(tǒng)的可維護(hù)性和可擴(kuò)展性。這種協(xié)同工作的方式使得開發(fā)團(tuán)隊(duì)能夠更加靈活地應(yīng)對(duì)需求變化,從而更好地滿足用戶的期望。
![wKgZomW4XAyAWT1CAAX7WKw1oAA573.gif](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XAyAWT1CAAX7WKw1oAA573.gif)
矢量化
圖撲 HT UI 5.0 強(qiáng)調(diào)矢量化作為首選,相較于 PNG 等柵格圖像格式,HT 矢量圖像成為按鈕圖標(biāo)和其他圖片場(chǎng)景的首選。采用矢量圖像的優(yōu)勢(shì)在于其能夠適應(yīng)不同設(shè)備屏幕尺寸,并提供高質(zhì)量的圖像顯示效果。這種設(shè)計(jì)選擇確保了無論是在放大還是縮小的情況下,圖像的邊緣和細(xì)節(jié)都能夠保持清晰,不會(huì)出現(xiàn)鋸齒狀的曲線和粗糙的邊緣。
![wKgaomW4XA2AJUL0AAv1XFX3GuM866.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XA2AJUL0AAv1XFX3GuM866.gif)
HT 矢量圖像的優(yōu)越性使得 HT UI 組件在各種設(shè)備上能夠提供統(tǒng)一且精確的呈現(xiàn)。
這意味著用戶無論使用何種設(shè)備,都能夠享受到一致且高品質(zhì)的視覺體驗(yàn)。矢量圖像的靈活性和可伸縮性使得 HT UI 在不同分辨率和屏幕尺寸下都能夠保持圖像的質(zhì)量,為用戶呈現(xiàn)出更為精致和清晰的界面元素。
![wKgZomW4XA6AS1_5ABNHzRHoLko968.gif](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XA6AS1_5ABNHzRHoLko968.gif)
組件豐富
圖撲 HT UI 5.0 以組件豐富為特色,提供多種布局器以滿足不同的頁(yè)面結(jié)構(gòu)需求,幫助開發(fā)者快速搭建頁(yè)面框架,并支持響應(yīng)式布局,以適應(yīng)不同大小的屏幕和設(shè)備。
![wKgaomW4XA6ANObfAB5UafTtDFQ490.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XA6ANObfAB5UafTtDFQ490.gif)
其中,多種布局器的引入使得開發(fā)者能夠更靈活地選擇適合其頁(yè)面結(jié)構(gòu)的布局方式,從而更高效地實(shí)現(xiàn)頁(yè)面的設(shè)計(jì)和排版。而響應(yīng)式布局的支持則確保了在不同尺寸的屏幕上,頁(yè)面能夠呈現(xiàn)出良好的用戶體驗(yàn),提升了應(yīng)用的可訪問性。
![wKgZomW4XBCADcO3AATrqTyDAXM019.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XBCADcO3AATrqTyDAXM019.png)
HT UI 5.0 涵蓋了豐富的常用界面元素和功能組件,包括但不限于按鈕、輸入框、下拉菜單等用戶交互元素,以及導(dǎo)航欄、標(biāo)簽頁(yè)、折疊面板等用于構(gòu)建頁(yè)面結(jié)構(gòu)的元素,還有表格、列表等用于數(shù)據(jù)展示的組件。這種全方位的組件覆蓋,讓開發(fā)者在實(shí)現(xiàn)各種交互和展示效果時(shí)能夠選擇合適的組件,提高了開發(fā)效率。
![wKgaomW4XBGAZOuUAAH8w8DgrTw846.png](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XBGAZOuUAAH8w8DgrTw846.png)
![wKgZomW4XBOAei8BAAHxmmAg1jk597.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XBOAei8BAAHxmmAg1jk597.png)
![wKgZomW4XBaAEx3FAAPQZ_P_Uyk993.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XBaAEx3FAAPQZ_P_Uyk993.png)
![wKgaomW4XBeAW9HHAAFntn4PuVs485.png](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XBeAW9HHAAFntn4PuVs485.png)
適配移動(dòng)端
圖撲 HT UI 5.0 注重移動(dòng)端適配,組件庫(kù)內(nèi)置了專門為移動(dòng)端設(shè)計(jì)的交互支持,并針對(duì)移動(dòng)設(shè)備封裝了常用的手勢(shì)事件,以提供用戶更加直觀和自然的移動(dòng)端體驗(yàn)。
![wKgaomW4XBmAc93OAAubE__mKs8789.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XBmAc93OAAubE__mKs8789.gif)
為了適應(yīng)移動(dòng)設(shè)備的特殊性,HT UI 5.0 在組件設(shè)計(jì)上考慮了移動(dòng)端的屏幕大小、交互方式和操作習(xí)慣。組件庫(kù)中提供了專門為移動(dòng)端設(shè)備設(shè)計(jì)的日期選擇、滑塊等組件,以確保在移動(dòng)設(shè)備上的用戶體驗(yàn)更為方便、流暢。
![wKgZomW4XBmAEHDYAAQ4oREu5ik632.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XBmAEHDYAAQ4oREu5ik632.png)
通過封裝常用的手勢(shì)事件,HT UI 5.0 使得用戶能夠更直觀地與應(yīng)用程序進(jìn)行交互,無論是點(diǎn)擊或者長(zhǎng)按操作,都能夠在移動(dòng)設(shè)備上得到良好的支持。這種細(xì)致入微的設(shè)計(jì)讓用戶在移動(dòng)端上使用應(yīng)用時(shí)感到更加自然和舒適。
圖撲軟件利用自研 HT UI 通用組件開發(fā)工具包產(chǎn)品,打造的手機(jī)端運(yùn)維管理系統(tǒng)(移動(dòng)網(wǎng)頁(yè)應(yīng)用或 Web App)。支持在不同操作系統(tǒng)(如 iOS、Android、Windows)上運(yùn)行,節(jié)省開發(fā)時(shí)間和成本,無需下載安裝,只需通過瀏覽器訪問網(wǎng)頁(yè)即可使用,方便運(yùn)維人員實(shí)時(shí)監(jiān)控和管理。
主題切換
圖撲 HT UI 5.0 引入了主題切換功能,為用戶提供了深色/亮色兩種不同的色彩模式,以及主題色切換功能,使用戶能夠根據(jù)個(gè)人偏好或系統(tǒng)要求自由選擇。
// 深色/亮色模式切換:
用戶可以根據(jù)個(gè)人喜好或者系統(tǒng)的設(shè)置,自由切換應(yīng)用程序的色彩模式。深色模式適合在低光環(huán)境下使用,減少眼睛疲勞,而亮色模式則更適用于明亮環(huán)境,提供清晰的界面展示。這種靈活的切換方式,有助于用戶在不同場(chǎng)景下獲得最佳的視覺體驗(yàn)。
// 主題色切換:
HT UI 5.0 還提供了主題色切換功能,用戶可以根據(jù)自己的需求來更改應(yīng)用程序的主題顏色。這意味著用戶可以個(gè)性化地定制應(yīng)用的外觀,以滿足個(gè)性化的審美需求。這種個(gè)性化的主題色切換功能不僅提升了用戶對(duì)應(yīng)用的歸屬感,也為用戶提供了更加愉悅和符合個(gè)人品味的視覺體驗(yàn)。
![wKgaomW4XByAc4mDAA_28u97O1w410.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XByAc4mDAA_28u97O1w410.gif)
支持國(guó)際化
圖撲 HT UI 5.0 著重支持國(guó)際化,為用戶提供了一鍵切換中文和英文語(yǔ)言的功能,使用戶能夠根據(jù)自身語(yǔ)言偏好或特定的用戶需求輕松切換界面語(yǔ)言。
// 一鍵切換中/英文:
用戶可以通過簡(jiǎn)單的操作,輕松實(shí)現(xiàn)中文和英文之間的切換。這使得應(yīng)用能夠迅速適應(yīng)不同用戶群體,提供更加友好的界面展示。
![wKgZomW4XB2AECxuAAG-dP0mEqQ348.png](https://file1.elecfans.com//web2/M00/BE/E2/wKgZomW4XB2AECxuAAG-dP0mEqQ348.png)
// 國(guó)際化 API :
為了更好地滿足不同地區(qū)和用戶群體的需求,HT UI 5.0 提供了國(guó)際化 API,使開發(fā)者能夠方便地?cái)U(kuò)展其他語(yǔ)言的支持。通過這個(gè) API,開發(fā)者可以自定義業(yè)務(wù)組件的國(guó)際化支持,以適應(yīng)更廣泛的語(yǔ)言需求。國(guó)際化的支持有助于開發(fā)者在全球范圍內(nèi)推廣應(yīng)用,同時(shí)也提高了用戶的使用便捷性和舒適度。用戶可以在不同語(yǔ)言環(huán)境下自由切換,從而獲得更加貼近自己的體驗(yàn)。
![wKgaomW4XB6ARybAADxcg2h9q7Q279.gif](https://file1.elecfans.com//web2/M00/BF/CF/wKgaomW4XB6ARybAADxcg2h9q7Q279.gif)
圖撲 HT UI 5.0 版本的推出標(biāo)志著一個(gè)全新的里程碑,為用戶界面設(shè)計(jì)和開發(fā)帶來了一系列卓越的創(chuàng)新和提升,彰顯了對(duì)前端開發(fā)的極致追求。通過卓越的性能提升、移動(dòng)端適配的精心設(shè)計(jì),以及全球用戶的國(guó)際化支持等特性,HT UI 5.0 為開發(fā)者提供了更高效、更靈活的工具,同時(shí)為用戶呈現(xiàn)了更舒適、更個(gè)性化的用戶界面體驗(yàn)。這個(gè)版本的綜合升級(jí)標(biāo)志著 HT UI 系列不斷演進(jìn)的承諾,為現(xiàn)代 Web 應(yīng)用的發(fā)展注入了更為創(chuàng)新和引領(lǐng)潮流的力量。
審核編輯 黃宇
-
Web
+關(guān)注
關(guān)注
2文章
1272瀏覽量
69760 -
ui
+關(guān)注
關(guān)注
0文章
205瀏覽量
21435
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
可視化圖表組件之“雙跨”平臺(tái) BI 數(shù)據(jù)大屏
![可視化圖表<b class='flag-5'>組件</b>之“雙跨”平臺(tái) BI 數(shù)據(jù)大屏](https://file1.elecfans.com//web3/M00/01/0F/wKgZO2dQF3SAZJPqAAdmrRrUoKI460.gif)
模擬功放聽到有撲撲的聲音,怎么處理?
前端總線頻率的類型是什么?
前端總線是屬于什么總線
基于 HT for Web 插件搭建組態(tài)拓?fù)浣Y(jié)構(gòu)
![基于 <b class='flag-5'>HT</b> for Web 插件搭建組態(tài)拓?fù)浣Y(jié)構(gòu)](https://file1.elecfans.com//web2/M00/00/CD/wKgaomaq_smAOkA6AAYjuUClU6w433.png)
鴻蒙開發(fā):【PageAbility組件概述+配置】
鴻蒙Ability Kit(程序框架服務(wù))【UIAbility組件與UI的數(shù)據(jù)同步】
![鴻蒙Ability Kit(程序框架服務(wù))【UIAbility<b class='flag-5'>組件</b>與<b class='flag-5'>UI</b>的數(shù)據(jù)同步】](https://file1.elecfans.com/web2/M00/EA/D2/wKgaomZVz_2AdNl_AADm68VM4QA306.jpg)
鴻蒙原生應(yīng)用元服務(wù)開發(fā)WEB-使用Devtools工具調(diào)試前端頁(yè)面
HarmonyOS開發(fā)案例:【基礎(chǔ)組件Slider的使用】
![HarmonyOS開發(fā)案例:【基礎(chǔ)<b class='flag-5'>組件</b>Slider的使用】](https://file1.elecfans.com/web2/M00/DE/4A/wKgaomYtA6mAaDuhAE-3-mfo7Qk693.jpg)
HarmonyOS實(shí)戰(zhàn)開發(fā)-深度探索與打造個(gè)性化自定義組件
未來工廠大腦:圖撲組態(tài)軟件在智能制造中的應(yīng)用
![未來工廠大腦:<b class='flag-5'>圖</b><b class='flag-5'>撲</b>組態(tài)軟件在智能制造中的應(yīng)用](https://file1.elecfans.com//web2/M00/C7/B6/wKgZomYWAZeAQ3pmAADQd_rDRHY944.png)
圖撲數(shù)字孿生技術(shù)在航空航天方面的應(yīng)用
![<b class='flag-5'>圖</b><b class='flag-5'>撲</b>數(shù)字孿生技術(shù)在航空航天方面的應(yīng)用](https://file1.elecfans.com//web2/M00/C2/3E/wKgaomXdfNGAKCSVABlaJAXny70900.gif)
圖撲數(shù)字孿生“光儲(chǔ)充”一體化智慧充電站
![<b class='flag-5'>圖</b><b class='flag-5'>撲</b>數(shù)字孿生“光儲(chǔ)充”一體化智慧充電站](https://file1.elecfans.com//web2/M00/C0/65/wKgZomXVZfCAbpIIACvFY-Pgmes641.gif)
評(píng)論