摹客RP內(nèi)置三方組件庫(kù)自從4月上線后，好評(píng)如潮。提供多個(gè)國(guó)內(nèi)外大廠高保真UI組件庫(kù)，拖拽即用，大大提高了大家的原型設(shè)計(jì)效率！

當(dāng)然我們也關(guān)注到了大家的使用反饋，也在持續(xù)的對(duì)組件的樣式、交互等進(jìn)行優(yōu)化，并持續(xù)新增大家需要的UI組件庫(kù)。

在近期的更新中，我們就對(duì)組件庫(kù)進(jìn)行了一波優(yōu)化，也上新了多個(gè)常用三方組件庫(kù)。

今天我們就來(lái)一起詳細(xì)了解一下什么是UI組件庫(kù)和它的作用，摹客RP中都內(nèi)置哪些組件庫(kù)以及如何使用等！

1、什么是UI組件庫(kù)？有什么作用？

簡(jiǎn)單理解組件庫(kù)就是一套可重復(fù)使用的用戶界面（UI）組件集合，涵蓋了各種常見(jiàn)的界面元素，如按鈕、輸入框、菜單、導(dǎo)航菜單等等。 UI組件庫(kù)中的組件都是經(jīng)過(guò)精心設(shè)計(jì)，樣式統(tǒng)一。許多大型科技公司和互聯(lián)網(wǎng)巨頭都有自己的UI組件庫(kù)，用于其產(chǎn)品的設(shè)計(jì)和開(kāi)發(fā)過(guò)程，減少重復(fù)的人力投入，通過(guò)統(tǒng)一、完善的組件生態(tài)提升設(shè)計(jì)開(kāi)發(fā)效率。很多公司也會(huì)將他們的UI組件庫(kù)開(kāi)源供大家使用！

那么UI組件庫(kù)有什么作用和好處呢？對(duì)于產(chǎn)品設(shè)計(jì)過(guò)程來(lái)說(shuō)其作用主要體現(xiàn)在以下兩點(diǎn)：

• 提高設(shè)計(jì)效率：不管是產(chǎn)品經(jīng)理還是設(shè)計(jì)師都可以直接使用現(xiàn)成的組件，快速搭建原型或界面，避免從頭開(kāi)始設(shè)計(jì)每個(gè)UI元素。
• 保持界面設(shè)計(jì)一致性：通過(guò)使用UI組件庫(kù)，可以確保產(chǎn)品各個(gè)部分在外觀和交互上保持一致。這有助于消除不同設(shè)計(jì)師之間的設(shè)計(jì)風(fēng)格差異，提供統(tǒng)一的用戶界面，使得用戶在不同頁(yè)面和功能之間的切換更加自然。

2、摹客RP有哪些組件庫(kù)？

除了摹客RP自帶的預(yù)設(shè)組件庫(kù)外，目前摹客已經(jīng)提供了8個(gè)國(guó)內(nèi)外大廠高保真UI組件庫(kù)，包括Ant Design，Element UI，TDesign，Arco Design，WeUI，iOS，macOS和Material Design。所有大廠UI組件庫(kù)資源均可在摹客RP內(nèi)拖拽即用，十分方便。 

Ant Design：阿里巴巴螞蟻集團(tuán)出品的B端組件庫(kù)，企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。

Element UI：餓了么出品的桌面端組件庫(kù)，多數(shù)用于后臺(tái)管理系統(tǒng)的頁(yè)面設(shè)計(jì)和開(kāi)發(fā)。

TDesign：是騰訊各業(yè)務(wù)團(tuán)隊(duì)在服務(wù)業(yè)務(wù)過(guò)程中沉淀的一套企業(yè)級(jí)設(shè)計(jì)體系。

Arco Design：字節(jié)跳動(dòng)出品一款企業(yè)級(jí)產(chǎn)品設(shè)計(jì)系統(tǒng)，主要服務(wù)于字節(jié)跳動(dòng)旗下中后臺(tái)產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)。

WeUI：微信官方設(shè)計(jì)團(tuán)隊(duì)專門(mén)為微信內(nèi)網(wǎng)頁(yè)和微信小程序定制的一款組件庫(kù)。

iOS：蘋(píng)果公司為iPhone開(kāi)發(fā)的手機(jī)操作系統(tǒng)，其組件庫(kù)涵蓋了豐富的 iOS 界面元素

macOS： 蘋(píng)果筆記本電腦macbook的操作系統(tǒng)，其組件庫(kù)涵蓋了豐富的 macOS 界面元素。

Material Design：Google所發(fā)布的設(shè)計(jì)系統(tǒng)，被廣泛應(yīng)用于各種Web、移動(dòng)和桌面應(yīng)用程序的開(kāi)發(fā)中。

3、如何在摹客RP中使用三方組件庫(kù)？

第一步：選擇組件或組件庫(kù)

方法一：在摹客RP左側(cè)組件面板中找到切換組件庫(kù)按鈕。選擇組件庫(kù)后，根據(jù)不同組件分類找到你想使用的組件或者你也可以通過(guò)切換組件庫(kù)按鈕旁的搜索按鈕，在當(dāng)前你選中的組件庫(kù)中搜索組件。

方法二：左側(cè)組件面板頂部搜索框中可以進(jìn)行全局搜索。直接輸入組件名稱即可在全部組件庫(kù)中搜索對(duì)應(yīng)組件。

第二步：拖拽組件到畫(huà)板。

將組件拖拽到畫(huà)板的過(guò)程中，支持實(shí)時(shí)顯示組件最終呈現(xiàn)的效果，所見(jiàn)即所得，便于準(zhǔn)確的放置組件到對(duì)應(yīng)位置，減少后續(xù)二次拖動(dòng)和調(diào)整，十分方便快捷！

第三步：對(duì)組件進(jìn)行編輯。

你可以根據(jù)自己的需求對(duì)組件進(jìn)行二次編輯，如替換圖標(biāo)，替換文字等操作。

第四步：為組件設(shè)置交互等。

你可以點(diǎn)擊右上角的圓點(diǎn)，拖向目標(biāo)即可快速創(chuàng)建交互。

好了，以上就是本期對(duì)于摹客RP三方組件庫(kù)的全部?jī)?nèi)容了，快去試試吧!

此外，我們也積極聆聽(tīng)每一位用戶的聲音。如果你有任何關(guān)于新增三方組件庫(kù)，組件優(yōu)化等問(wèn)題，歡迎通過(guò)以下方式分享給我們。后續(xù)我們也會(huì)根據(jù)大家的需求進(jìn)行補(bǔ)充、調(diào)整和優(yōu)化，持續(xù)的提高原型設(shè)計(jì)效率和降低設(shè)計(jì)門(mén)檻，零基礎(chǔ)也能快速搭建高質(zhì)量的產(chǎn)品原型！