摹客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)置哪些組件庫以及如何使用等！

什么是UI組件庫？有什么作用？

簡單理解組件庫就是一套可重復(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)：

• 提高設(shè)計效率：不管是產(chǎn)品經(jīng)理還是設(shè)計師都可以直接使用現(xiàn)成的組件，快速搭建原型或界面，避免從頭開始設(shè)計每個UI元素。

• 保持界面設(shè)計一致性：通過使用UI組件庫，可以確保產(chǎn)品各個部分在外觀和交互上保持一致。這有助于消除不同設(shè)計師之間的設(shè)計風(fēng)格差異，提供統(tǒng)一的用戶界面，使得用戶在不同頁面和功能之間的切換更加自然。

摹客RP有哪些組件庫？

除了摹客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)品的體驗(yà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中使用三方組件庫？

第一步：選擇組件或組件庫

• 方法一：在摹客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)容了，快去試試吧!

點(diǎn)擊了解更多