在設(shè)計(jì)原型時(shí)，如果有自己用順手的組件庫(kù)，會(huì)提高很多工作效率。本文講解了5中常見(jiàn)的組件類型，大家可以學(xué)起來(lái)。

不少產(chǎn)品新人，在練習(xí)原型圖時(shí)，會(huì)拿UI界面進(jìn)行臨摹。但到了項(xiàng)目實(shí)戰(zhàn)時(shí)，還是不知道怎么畫(huà)。

出現(xiàn)這個(gè)情況，有2個(gè)主要的原因

1. 還沒(méi)梳理功能需求、頁(yè)面布局（這是基本功，篇幅有限，以后再單獨(dú)寫(xiě)）
2. 不了解頁(yè)面組件類型、用法（本篇講解的內(nèi)容）

一、組件的5種類型

按組件的用途，可歸納為5種常見(jiàn)類型

1. 基礎(chǔ)：頁(yè)面基礎(chǔ)元素，如icon、文本、按鈕；
2. 導(dǎo)航：顯示用戶當(dāng)前位置和指引各個(gè)頁(yè)面跳轉(zhuǎn)；
3. 錄入：用戶操作數(shù)據(jù)錄入，例如勾選、填手機(jī)號(hào)；
4. 展示：顯示相關(guān)數(shù)據(jù)內(nèi)容、狀態(tài)說(shuō)明；
5. 反饋：進(jìn)行操作后，給用戶相應(yīng)的反饋說(shuō)明

二、基礎(chǔ)組件

有些組件庫(kù)也叫「通用」，一般有按鈕、文本、icon。在不同的場(chǎng)景、狀態(tài)下，又有不同的樣式。

三、導(dǎo)航組件

顯示當(dāng)前停留的頁(yè)面、功能模塊，以及引導(dǎo)跳轉(zhuǎn)至其他頁(yè)面

常用的：頂部導(dǎo)航條、選項(xiàng)卡、底部導(dǎo)航欄、分段器

四、錄入組件

有些組件庫(kù)也分類為「表單」，是最常用的分類，例如選擇內(nèi)容、輸入文本等操作。

常見(jiàn)的：?jiǎn)芜x框、復(fù)選框、輸入框、表單、選擇器等。

五、展示組件

展示數(shù)據(jù)相關(guān)的內(nèi)容（如手機(jī)號(hào)、頭像）、提示性內(nèi)容

常見(jiàn)：標(biāo)簽、徽標(biāo)、通告欄

六、反饋組件

對(duì)用戶操作行為或頁(yè)面狀態(tài)的提示，讓用戶知道當(dāng)前的狀態(tài)

常見(jiàn)：Toast、彈窗、可操作提示

??如果臨摹UI畫(huà)原型時(shí)，沒(méi)有對(duì)組件進(jìn)行總結(jié)分析，那只是練習(xí)畫(huà)圖軟件的操作，而設(shè)計(jì)能力并無(wú)提升。

七、如何正確使用組件

阿里/騰訊/微信等大廠都有官方組件庫(kù) + 詳細(xì)文檔，非常值得下載、學(xué)習(xí)。

個(gè)人推薦頭條和阿里，真心不錯(cuò)！

#ArcoDesign@ 頭條

官網(wǎng)：https://arco.design/

#Ant Design@阿里

官網(wǎng)：https://ant-design.antgroup.com/docs/resources-cn

下表是我整理的14個(gè)大廠組件庫(kù)、官網(wǎng)，大家可以學(xué)習(xí)