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

産品經理畫産品原型離不開對組件的使用，大部分産品經理對各類組件的使用已經形成了自己的一些習慣，使用起來也是從容不迫，但對下面這幾組組件你能分清他們的區别嗎？

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

而且我相信，有些産品經理在使用這些組件時偶爾可能也會有疑惑：該使用哪個呢？

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

01

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

有的産品經理看了以後可能會感覺有點懵，它們有什麼聯系嗎？

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

Radio、Select PC端樣式之一

Radio、Select移動端樣式之一

既然都是從一組選項集合中去進行選擇，那麼當Select也限定它隻能選擇一個選項時，與Radio有什麼區别呢？該使用哪個呢？

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

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

Select、Dropdown PC端樣式之一

Dropdown移動端常見樣式

第一張圖是Dropdown組件，第二張圖是Select組件。這兩個組件的區别主要還是依據它們的定義而來，使用場景是完全不同的。Select 是用于選擇，而 Dropdown 則是命令集合。基于此，Select常常應用在表單輸入時，它是輸入類組件，而Dropdown常常應用于展現浏覽時，它是導航欄組件。

02 CheckBox複選框、Switch開關。

對這倆組件進行對比，有的産品經理看了以後可能也會感覺有點懵，它們有什麼聯系嗎？

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

CheckBox、Switch樣式之一

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

CheckBox單獨使用時與Switch的區别在于，切換 switch 會直接觸發狀态改變，而checkbox一般用于狀态标記，需要和提交操作配合。

03

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

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

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

Alert PC端樣式之一

移動端NoticeBar公告欄

移動端NoticeBar應用案例

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

這三個組件與後面3個組件的不同在于，它們是在頁面當中的，屬于頁面中的元素，當然也就随着頁面一同展現，是非浮層的靜态展現形式，而且是始終展現，不會自動消失，用戶可以點擊關閉。

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

Message、Notification PC端樣式之一

Message、Notification移動端樣式之一

這兩個組件都是向用戶進行提示，也都不打斷用戶操作，還都是全局的，那麼這兩個組件有什麼區别呢？最大的區别在于Message是由用戶的操作觸發的，常用于主動操作後的反饋提示，而Notification更多用于被動提醒，是系統主動向用戶進行的消息推送。

最後再來看Toast。Toast是對用戶的操作做出及時反饋，由用戶的操作觸發，反饋信息可以是操作的結果狀态，如成功、失敗、出錯、警告等。

移動端Toast樣式之一

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

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

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

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

#專欄作家#

厚厚，厚厚的語和文，人人都是産品經理專欄作家。多年互聯網和傳統企業的跨界産品經理。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部