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