編輯導語：產品經理在畫原型時，離不開對元件的使用，不同的元件，用法也不一樣。那麼，什麼時候該使用哪些元件呢？本文作者對三組元件進行了總結分析，一起來看一下吧。
產品經理畫產品原型離不開對元件的使用，大部分產品經理對各類元件的使用已經形成了自己的一些習慣，使用起來也是從容不迫，但對下面這幾組元件你能分清他們的區別嗎？
第一組：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 協議