摹客RP內(nèi)置三方組件庫自從4月上線后,好評如潮。提供多個國內(nèi)外大廠高保真UI組件庫,拖拽即用,大大提高了大家的原型設計效率!
當然我們也關注到了大家的使用反饋,也在持續(xù)的對組件的樣式、交互等進行優(yōu)化,并持續(xù)新增大家需要的UI組件庫。
在近期的更新中,我們就對組件庫進行了一波優(yōu)化,也上新了多個常用三方組件庫。
今天我們就來一起詳細了解一下什么是UI組件庫和它的作用,摹客RP中都內(nèi)置哪些組件庫以及如何使用等!
簡單理解組件庫就是一套可重復使用的用戶界面(UI)組件集合,涵蓋了各種常見的界面元素,如按鈕、輸入框、菜單、導航菜單等等。 UI組件庫中的組件都是經(jīng)過精心設計,樣式統(tǒng)一。許多大型科技公司和互聯(lián)網(wǎng)巨頭都有自己的UI組件庫,用于其產(chǎn)品的設計和開發(fā)過程,減少重復的人力投入,通過統(tǒng)一、完善的組件生態(tài)提升設計開發(fā)效率。很多公司也會將他們的UI組件庫開源供大家使用!
那么UI組件庫有什么作用和好處呢?對于產(chǎn)品設計過程來說其作用主要體現(xiàn)在以下兩點:
除了摹客RP自帶的預設組件庫外,目前摹客已經(jīng)提供了8個國內(nèi)外大廠高保真UI組件庫,包括Ant Design,Element UI,TDesign,Arco Design,WeUI,iOS,macOS和Material Design。所有大廠UI組件庫資源均可在摹客RP內(nèi)拖拽即用,十分方便。
Ant Design:阿里巴巴螞蟻集團出品的B端組件庫,企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。
Element UI:餓了么出品的桌面端組件庫,多數(shù)用于后臺管理系統(tǒng)的頁面設計和開發(fā)。
TDesign:是騰訊各業(yè)務團隊在服務業(yè)務過程中沉淀的一套企業(yè)級設計體系。
Arco Design:字節(jié)跳動出品一款企業(yè)級產(chǎn)品設計系統(tǒng),主要服務于字節(jié)跳動旗下中后臺產(chǎn)品的體驗設計和技術實現(xiàn)。
WeUI:微信官方設計團隊專門為微信內(nèi)網(wǎng)頁和微信小程序定制的一款組件庫。
iOS:蘋果公司為iPhone開發(fā)的手機操作系統(tǒng),其組件庫涵蓋了豐富的 iOS 界面元素
macOS: 蘋果筆記本電腦macbook的操作系統(tǒng),其組件庫涵蓋了豐富的 macOS 界面元素。
Material Design:Google所發(fā)布的設計系統(tǒng),被廣泛應用于各種Web、移動和桌面應用程序的開發(fā)中。
第一步:選擇組件或組件庫
方法一:在摹客RP左側組件面板中找到切換組件庫按鈕。選擇組件庫后,根據(jù)不同組件分類找到你想使用的組件或者你也可以通過切換組件庫按鈕旁的搜索按鈕,在當前你選中的組件庫中搜索組件。
方法二:左側組件面板頂部搜索框中可以進行全局搜索。直接輸入組件名稱即可在全部組件庫中搜索對應組件。
第二步:拖拽組件到畫板。
將組件拖拽到畫板的過程中,支持實時顯示組件最終呈現(xiàn)的效果,所見即所得,便于準確的放置組件到對應位置,減少后續(xù)二次拖動和調(diào)整,十分方便快捷!
第三步:對組件進行編輯。
你可以根據(jù)自己的需求對組件進行二次編輯,如替換圖標,替換文字等操作。
第四步:為組件設置交互等。
你可以點擊右上角的圓點,拖向目標即可快速創(chuàng)建交互。
好了,以上就是本期對于摹客RP三方組件庫的全部內(nèi)容了,快去試試吧!
此外,我們也積極聆聽每一位用戶的聲音。如果你有任何關于新增三方組件庫,組件優(yōu)化等問題,歡迎通過以下方式分享給我們。后續(xù)我們也會根據(jù)大家的需求進行補充、調(diào)整和優(yōu)化,持續(xù)的提高原型設計效率和降低設計門檻,零基礎也能快速搭建高質量的產(chǎn)品原型!