理性的選擇 ，八個元件的使用指南
感謝 海鹽社 的小夥伴 @風箏、@Fiumi、@橙子的橙子對這篇分享的幫助，一遍遍修正分享，希望可以看文的你們一些幫助。
我們在看App時，有沒有思考過這樣的問題，同樣都是提示彈窗為什麼出現那麼多不同的樣式，亦或者同樣都是讓介面進行切換的導航為什麼有的可以通過側滑切換，有的卻只能點選切換呢？最近在“玩”App時發現了幾組這樣的控制元件，下面就來和大家分享下我對他們的理解和選用。
目錄
第一部分：警告框與操作表
第二部分：標籤欄與操作欄
第三部分：Tabs與分段控制元件
第四部分：Toast與Snackbar
警告框與操作表
定義
警告框：
是一種操作上的確認，只有當用戶點選按鈕後才算真的完成，才可以有其他操作。主要作用是警告或提示使用者的。警告框由三部分組成：標題，正文，按鈕。有些簡單的警告或提示只有正文和按鈕即可。
操作表/ActionSheet：
操作表通常會從螢幕底部邊緣向上滑出一個面板，可提供2個以上的選擇。呈現給使用者的是簡單、清晰、無須解釋的一組操作，沒有正文的描述內容（大部分）。另外重要的功能操作也會用紅色文字展示。
如何選用？
1.文字內容的重要性：
選擇警示框和操作表時，要考慮的是兩個彈窗文字內容對於使用者的重要程度，如果內容極為重要則選用警示框，如果文字內容不重要甚至不需要描述文字我們就應該選擇操作表。
案例：如下圖，淘寶登入密碼錯誤時，由於警示框更重要的是文字內容的體現，幫助使用者找到問題所在，所以選用警示框。再看QQ郵箱的垃圾箱中點選全部清空時，由於資訊本身就在圾箱內，不需要對使用者過多的文字提示，使用者直接操作即可，所以最後選用操作表。
2.使用者操作流暢性：
當我們需要讓使用者停止操作並必須點選當前介面的按鈕時，要選擇警示框，警示框對使用者操作上的流暢性有著很嚴重的影響。如果不需要太過強硬，我們就選用只需在螢幕中任意位置點選就會消失的操作表。
案例：如下圖，在用阿里巴巴拍照功能時，避免使用者在有其他的操作而影響當前的需要解決的問題，會使用警示框，來阻止使用者。而在支付寶中，點選退出登入時，由於避免使用者誤操作而退出，則使用了操作表，可以通過點選空白區域關閉操作表。
3.數量：
這是最容易區分使用的方面，當彈窗中的按鈕數量超過2個事我們一定選用操作表，因為警示框的按鈕數量不可以超過兩個。如果數量一樣，可以根據上面兩點擇優使用。
案例：如下圖，我們在得到App中點選開通“推送通知”時，因為操作按鈕只有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。
標籤欄與工具欄
定義
標籤欄：
標籤欄位於螢幕底部，它是懸浮在當前頁面之上的，並且會一直存在，只有當用戶點選跳轉到二級選單後才會消失。使用者可以在不同的子任務、檢視和模式中進行切換，並且切換按鈕間都屬於不同的內容。當用戶選中某個標籤時，該標籤呈現適當的高亮狀態。數量也有限制，不能超過5個，如果存在5個以上的標籤可以將最後的標籤設計成“更多”標籤。
工具欄：
工具欄同樣位於螢幕底部，懸浮在當前頁面之上的，並且當用戶不需要使用的時候，可以隱藏它。例如向上滑動介面時，工具欄會自動隱藏。工具欄的內容主要是對當前頁面的相關操作按鈕。
如何選用？
1.切換狀態：
當我們需要同級別介面切換時圖時，應該選擇標籤欄，同時標籤欄的切換通常為一級導航。工具欄的功能僅針對當前介面內容的相關操作。
案例： 如下圖，微信讀書底部欄中是關於同級別的檢視切換，所以選擇標籤欄，同時標籤欄也常用於產品的一級導航。而Safari瀏覽器底部的內容是針對當前介面的操作功能，所以使用了工具欄。
2.位置狀態：
當底部導航始終在介面最上方時，上下滑動都不會消失，則選擇標籤欄；如果底部導航上滑隨之消失則選擇工具欄 （說明：也有少數的工具欄是怎麼滑動都不會消失的） 。
案例：如下圖，我們來看看百度的App，當我向上滑動介面時，底部導航的位置是不會消失的，所以使用了標籤欄。再看Safari瀏覽器，因為上滑時底部欄會被隱藏，所以選用了工具欄。
3.選中狀態：
當用戶選中底部某一項時，如果需要高亮顯示且顯示的內容是不同子任務的檢視，則使用標籤欄；而當選擇後，出現操作表等與當前介面相關的操作時，應該選擇工具欄。
案例：如下圖，我們還是來看百度App，當我點選底部的選項時，切換時圖的同時，當前選中的“好看視訊”需要變成選中的樣式，來告知使用者當前選中的是那個介面，所以使用了標籤欄。再看Safari瀏覽器，點選底部按鈕後出現操作表且當前選中的按鈕也不會變高亮，因為不回在當前切換介面，所以選擇了工具欄。
Tabs與分段控制元件/Segment Control
定義
Tabs：
Tabs來自MD規範，早在Android 2.0時代，官方的通訊錄App就使用頂部Tab導航，可以滑動切換不同檢視。Tabs裡Tab呈現的內容可以有很大的差別，而且數量沒有限制，Tabs不能作為表單的單選元件。
分段控制元件：
iOS原生控制元件之一，每個分段作用是互斥的，在分段控制元件裡，所有的分段選項框在長度上要保持一致，同iOS規範中對於分段控制元件的分段選項不得超過5個，每個分段選項可以是存文字或者圖片。
如何運用？
1.來源不同：
分段控制元件來自iOS規範，而Tabs來源於MD規範。
案例：如圖我們來看iPhone的日曆介面點選收件箱，因為是iOS系統配置的應用，所以介面中切換樣式用的是分段控制元件，而反觀安卓系統則用的是Tabs切換。
2.內容不同：
分段控制元件的主要起到分割和篩選同類資料，而Tabs則沒有這樣的限制，Tabs裡的每一項所呈現的內容可以有很大的差別。另外分段控制元件更多的是以單選功能出現在表單的使用中，而Tab則不能作為表單的單選元件。
案例：如下圖鯊魚記賬中的圖表頁，支援、收入為整個介面展示專案，為了讓使用者檢視起來更加方便，把資料分割為周、月、年的不同的資料展示，因為是同類資料切換，所以選擇了分段空間。反觀36氪首頁的Tabs欄，由於每個內容的差別都很大，所以使用了Tab欄展示。
3.操作方式不同：
分段控制元件需要點選操作，而Tabs除了點選外還可以通過左右滑動切換不同檢視。
案例：如下圖，網易錢包App介面中的切換控制元件，因為在表單中且是極為近似的資料圖，不易讓使用者側滑螢幕切換，需要使用者讓使用者更精準的點選選擇，所以使用了智慧點選的分段控制元件，而優酷視訊的切換頁變化都比較明顯，很容易區分，所以選擇了可以側滑螢幕切換的Tabs。
4.數量：
分段控制元件數量不能超過5個，而Tabs沒有數量限制
案例：如下圖網易雲音樂中的訊息介面，介面中因為分類的數量未超過五個（不是所有未超過5個的就要用分段控制元件，同時也要根據以上說的其他三種情況判斷，這裡只針對數量闡述而已）所以可以使用分段控制元件；而網易雲音樂視訊介面中因為分類數量過多且內容上有區別所以選擇了Tabs。
Toast與Snackbar
定義
Toast：
Toast通常出現在頂部和中部，浮於頁面上方，無法對其操作，出現一段時間後便會消失，並且在此期間不影響其他正常操作。
Snackbar：
Snackbar出自於安卓系統，是安卓系統的特色彈窗之一。它是由一段資訊和一個按鈕組成，他們會在超時或者使用者在螢幕其他地方觸碰後自動消失。Snackbar可以在螢幕上滑動關閉。Snackbar不回妨礙使用者對產品的其他操作。
如何選用？
1.操作不同：
Toast彈窗沒有任何操作鍵，而Snackbar是有操作鍵的
案例：如圖馬蜂窩App中給作者的文章點贊功能只需要告知使用者，點贊已成功即可，不需要其他操作，所以選用Toast彈窗；而攜程中當進入酒店介面時，除了告知使用者下面還有更多資訊外，還想引導使用者直接檢視，所以選用了帶操作功能的Snackbar
2.退出狀態不同：
Toast彈窗完全是通過超時後自動消失，不存在任何操作；而Snackbar可以超時消失也可以使用者主動上滑關閉。
案例：如下圖豆瓣App廣播介面中，當我點選換一批後，換好的內容會自動重新整理到最前面，所以使用者不需要任何操作就可以看到內容，就可以選用無操作必須等待超時後才會消失的Toast彈窗。而攜程App中的酒店介面，因為更多精彩的內容在下面，並沒有展示出來，為了不讓使用者在滑動瀏覽時造成視覺障礙，所以選擇了Snackbar，除了超時後自動關閉外，也可以通過滑動介面讓彈窗主動關閉。
3.組成元素不同：
Toast彈窗主要是由文字和背景組成，也可以額外附加圖示。而Snackbar除文字、背景，圖示外還有操作鍵組成。
案例：如下圖得到App中只需要提示用即可，所以選用Toast，組成元素選用背景+文字+圖示，而小紅書App需要加入操作鍵，所以選擇了Snackbar。
總結
通過上面的分析，大家是不是對這八個元件有了更深的理解呢？每個元件都有不可替代的作用，如果大家還有哪些不清楚的元件對比可以在文章下留言，之後我會選擇一些整理出來再次和大家分享。感謝大家的耐心閱讀。
ofollow,noindex">微信公眾號： 海鹽社