編輯導語：產(chǎn)品經(jīng)理在畫原型時，離不開對組件的使用，不同的組件，用法也不一樣。那么，什么時候該使用哪些組件呢？本文作者對三組組件進行了總結分析，一起來看一下吧。

產(chǎn)品經(jīng)理畫產(chǎn)品原型離不開對組件的使用，大部分產(chǎn)品經(jīng)理對各類組件的使用已經(jīng)形成了自己的一些習慣，使用起來也是從容不迫，但對下面這幾組組件你能分清他們的區(qū)別嗎？

• 第一組：Radio單選框、Select選擇器、Dropdown下拉菜單
• 第二組：CheckBox復選框、Switch開關
• 第三組：Alert警告提示、Banner通知橫幅、NoticeBar公告欄、Message消息、Notification通知提醒框、Toast輕提示

而且我相信，有些產(chǎn)品經(jīng)理在使用這些組件時偶爾可能也會有疑惑：該使用哪個呢？

今天咱們就一起來看一下。雖然是很基礎的東西，但估計也會有不少產(chǎn)品經(jīng)理平時只是使用，也從來沒有整理和對比過，可能有的時候使用得并不恰當哦！

01

Radio單選框、Select選擇器、Dropdown下拉菜單。

有的產(chǎn)品經(jīng)理看了以后可能會感覺有點懵，它們有什么聯(lián)系嗎？

先來對比下Radio和Select。Radio是在預設的一組選項中執(zhí)行單項選擇，并呈現(xiàn)選擇結果。Select是從一個選項集合中去選中一個或多個選項，并呈現(xiàn)最終選擇結果。

Radio、Select PC端樣式之一

Radio、Select移動端樣式之一

既然都是從一組選項集合中去進行選擇，那么當Select也限定它只能選擇一個選項時，與Radio有什么區(qū)別呢？該使用哪個呢？

這兩個組件的使用場景不同。Radio和 Select 的區(qū)別是，Radio 所有選項默認可見，方便用戶在比較中選擇，因此選項不宜過多。而Select是將選項折疊起來，適用于選項比較多的時候。因此，這兩個組件使用哪一個要看選項的數(shù)量多少而定，一般情況下，當選項少于 5 項時，建議直接將選項平鋪，使用 Radio 是更好的選擇。

再來看Select和Dropdown。Select上面說了，是從一個選項集合中去選中一個或多個選項，并呈現(xiàn)最終選擇結果。而Dropdown是將動作或菜單折疊到下拉菜單中。從定義上來看，它倆確實沒有什么關聯(lián)，但它倆長得可是太像了。下面這兩張圖，你能分清分別對應哪個組件嗎？

Select、Dropdown PC端樣式之一

Dropdown移動端常見樣式

第一張圖是Dropdown組件，第二張圖是Select組件。這兩個組件的區(qū)別主要還是依據(jù)它們的定義而來，使用場景是完全不同的。Select 是用于選擇，而 Dropdown 則是命令集合?；诖?，Select常常應用在表單輸入時，它是輸入類組件，而Dropdown常常應用于展現(xiàn)瀏覽時，它是導航欄組件。

02

CheckBox復選框、Switch開關。

對這倆組件進行對比，有的產(chǎn)品經(jīng)理看了以后可能也會感覺有點懵，它們有什么聯(lián)系嗎？

還是先來看定義。CheckBox是在一組選項中，選擇一個或多個選項。Switch是用于兩種相互對立的狀態(tài)間的切換。

CheckBox、Switch樣式之一

乍一看，似乎這兩個沒有關系。但問題就在于CheckBox單獨使用時（單獨使用即只有一個CheckBox控件沒有成組）也可以表示兩種狀態(tài)之間的切換。那么問題就來了，什么時候該使用哪個呢？

CheckBox單獨使用時與Switch的區(qū)別在于，切換 switch 會直接觸發(fā)狀態(tài)改變，而checkbox一般用于狀態(tài)標記，需要和提交操作配合。

03

Alert警告提示、Banner通知橫幅、NoticeBar公告欄、Message消息、Notification通知提醒框、Toast輕提示。

這幾個組件都是向用戶進行提示的，提示的方式和程度不同。

還是先來看定義。Alert是向用戶展示需要關注的警告提示。Banner是用于標識全頁的狀態(tài)或通知。NoticeBar是在用于給用戶顯示提示消息。這三個組件其實是一回事，只是叫法不同而已，NoticeBar更多是移動端的一種叫法。這三個組件的基本樣式如下。

Alert PC端樣式之一

移動端NoticeBar公告欄

移動端NoticeBar應用案例

個人覺得，從英文名稱來看，NoticeBar可能更加形象一些，因為對用戶的提示常常在頁面的頂部導航的下面，而且基本上是單獨的一塊通欄區(qū)域，只是中文名稱翻譯成公告欄個人感覺有些不妥，不妥的地方在于可能會和一些需求中的公告功能相混淆，可能翻譯成提示欄更合適。而Alert常常有一點出問題了的負面暗示，實際上這個提示是偏中性的，成功了也可以進行提示。而Banner就不推薦了，因為會和我們常用的推廣廣告相混淆。

這三個組件與后面3個組件的不同在于，它們是在頁面當中的，屬于頁面中的元素，當然也就隨著頁面一同展現(xiàn)，是非浮層的靜態(tài)展現(xiàn)形式，而且是始終展現(xiàn)，不會自動消失，用戶可以點擊關閉。

再來看Message和Notification。Message是全局展示的輕量級反饋或提示，并自動消失，不會打斷用戶操作。Notification是全局展示通知提醒，將信息及時有效地傳達給用戶。

Message、Notification PC端樣式之一

Message、Notification移動端樣式之一

這兩個組件都是向用戶進行提示，也都不打斷用戶操作，還都是全局的，那么這兩個組件有什么區(qū)別呢？最大的區(qū)別在于Message是由用戶的操作觸發(fā)的，常用于主動操作后的反饋提示，而Notification更多用于被動提醒，是系統(tǒng)主動向用戶進行的消息推送。

最后再來看Toast。Toast是對用戶的操作做出及時反饋，由用戶的操作觸發(fā)，反饋信息可以是操作的結果狀態(tài)，如成功、失敗、出錯、警告等。

移動端Toast樣式之一

Toast也是全局的。那Toast與Message又有什么區(qū)別呢？Toast更多是在移動端平臺上的一個組件。在移動端上，Toast相比Message更輕量一些，也更簡單一些，單純的文本提示或者加上一個圖標，自動消失，出現(xiàn)的位置可以上在頂部、中部或者底部，使用時最常見的位置是中部或底部。而Message比Toast稍微復雜一些，可以自動消失，也可以由用戶來點擊關閉，出現(xiàn)的位置通常在頂部。

最后對這幾個組件的使用進行一下總結：

• PC端：Alert用于頁面內(nèi)提示，Message用于由用戶操作觸發(fā)的全局的輕量級提示，Notification用于系統(tǒng)主動向用戶推送的通知提醒。
• 移動端：NoticeBar用于頁面內(nèi)提示，Message用于由用戶操作觸發(fā)的出現(xiàn)在頂部的自動消失或點擊關閉的全局性提示，Toast是由用戶觸發(fā)的更輕量的主要出現(xiàn)在中部或底部的自動消失的全局性提示，Notification用于系統(tǒng)主動向用戶推送的通知提醒。

好啦，通過上面的介紹，對這幾個組件是不是更加清晰了呢？

#專欄作家#

厚厚，微信公眾號：厚厚的語和文，人人都是產(chǎn)品經(jīng)理專欄作家。多年互聯(lián)網(wǎng)和傳統(tǒng)企業(yè)的跨界產(chǎn)品經(jīng)理。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議