中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

01

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

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

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

Radio、Select PC端樣式之一

Radio、Select移動(dòng)端樣式之一

既然都是從一組選項(xiàng)集合中去進(jìn)行選擇，那么當(dāng)Select也限定它只能選擇一個(gè)選項(xiàng)時(shí)，與Radio有什么區(qū)別呢？該使用哪個(gè)呢？

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

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

Select、Dropdown PC端樣式之一

Dropdown移動(dòng)端常見樣式

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

02

CheckBox復(fù)選框、Switch開關(guān)。

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

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

CheckBox、Switch樣式之一

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

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

03

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

這幾個(gè)組件都是向用戶進(jìn)行提示的，提示的方式和程度不同。

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

Alert PC端樣式之一

移動(dòng)端NoticeBar公告欄

移動(dòng)端NoticeBar應(yīng)用案例

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

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

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

Message、Notification PC端樣式之一

Message、Notification移動(dòng)端樣式之一

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

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

移動(dòng)端Toast樣式之一

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

最后對(duì)這幾個(gè)組件的使用進(jìn)行一下總結(jié)：

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

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

#專欄作家#

厚厚，微信公眾號(hào)：厚厚的語和文，人人都是產(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é)議