我們在看App時，有沒有思考過這樣的問題，同樣都是提示彈窗為什麼出現那麼多不同的樣式，亦或者同樣都是讓界面進行切換的導航為什麼有的可以通過側滑切換，有的卻隻能點擊切換呢？最近在玩App時發現了幾組這樣的控件，下面就來和大家分享下我對他們的理解和選用。

目錄：

• 第一部分：警告框與操作表
• 第二部分：标簽欄與操作欄
• 第三部分：Tabs與分段控件
• 第四部分：Toast與Snackbar

警告框與操作表

1. 定義

警告框：是一種操作上的确認，隻有當用戶點擊按鈕後才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。

警告框由三部分組成：标題、正文、按鈕。有些簡單的警告或提示隻有正文和按鈕即可。

操作表/ActionSheet：操作表通常會從屏幕底部邊緣向上滑出一個面闆，可提供2個以上的選擇。呈現給用戶的是簡單、清晰、無須解釋的一組操作，沒有正文的描述内容（大部分）。另外重要的功能操作也會用紅色文字展示。

2. 如何選用？

（1）文字内容的重要性：選擇警示框和操作表時，要考慮的是兩個彈窗文字内容對于用戶的重要程度，如果内容極為重要則選用警示框，如果文字内容不重要甚至不需要描述文字我們就應該選擇操作表。

案例：如下圖，淘寶登錄密碼錯誤時，由于警示框更重要的是文字内容的體現，幫助用戶找到問題所在，所以選用警示框。再看QQ郵箱的垃圾箱中點擊全部清空時，由于信息本身就在圾箱内，不需要對用戶過多的文字提示，用戶直接操作即可，所以最後選用操作表。

（2）用戶操作流暢性：當我們需要讓用戶停止操作并必須點擊當前界面的按鈕時，要選擇警示框，警示框對用戶操作上的流暢性有着很嚴重的影響。如果不需要太過強硬，我們就選用隻需在屏幕中任意位置點擊就會消失的操作表。

（3）數量：這是最容易區分使用的方面，當彈窗中的按鈕數量超過2個事我們一定選用操作表，因為警示框的按鈕數量不可以超過兩個。如果數量一樣，可以根據上面兩點擇優使用。

案例：如下圖，我們在得到App中點擊開通“推送通知”時，因為操作按鈕隻有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。

标簽欄與工具欄

1. 定義

标簽欄：标簽欄位于屏幕底部，它是懸浮在當前頁面之上的，并且會一直存在，隻有當用戶點擊跳轉到二級菜單後才會消失。用戶可以在不同的子任務、視圖和模式中進行切換，并且切換按鈕間都屬于不同的内容。

當用戶選中某個标簽時，該标簽呈現适當的高亮狀态。數量也有限制，不能超過5個，如果存在5個以上的标簽可以将最後的标簽設計成“更多”标簽。

工具欄：工具欄同樣位于屏幕底部，懸浮在當前頁面之上的，并且當用戶不需要使用的時候，可以隐藏它。例如向上滑動界面時，工具欄會自動隐藏。工具欄的内容主要是對當前頁面的相關操作按鈕。

如何選用？

（1）切換狀态：當我們需要同級别界面切換時圖時，應該選擇标簽欄，同時标簽欄的切換通常為一級導航，工具欄的功能僅針對當前界面内容的相關操作。

案例：如下圖，微信讀書底部欄中是關于同級别的視圖切換，所以選擇标簽欄，同時标簽欄也常用于産品的一級導航。而Safari浏覽器底部的内容是針對當前界面的操作功能，所以使用了工具欄。

（2）位置狀态：當底部導航始終在界面最上方時，上下滑動都不會消失，則選擇标簽欄；如果底部導航上滑随之消失則選擇工具欄（說明：也有少數的工具欄是怎麼滑動都不會消失的）。

案例：如下圖，我們來看看百度的App，當我向上滑動界面時，底部導航的位置是不會消失的，所以使用了标簽欄。再看Safari浏覽器，因為上滑時底部欄會被隐藏，所以選用了工具欄。

（3）選中狀态：當用戶選中底部某一項時，如果需要高亮顯示且顯示的内容是不同子任務的視圖，則使用标簽欄；而當選擇後，出現操作表等與當前界面相關的操作時，應該選擇工具欄。

案例：如下圖，我們還是來看百度App，當我點擊底部的選項時，切換時圖的同時，當前選中的“好看視頻”需要變成選中的樣式，來告知用戶當前選中的是那個界面，所以使用了标簽欄。再看Safari浏覽器，點擊底部按鈕後出現操作表且當前選中的按鈕也不會變高亮，因為不回在當前切換界面，所以選擇了工具欄。

Tabs與分段控件/Segment Control

1. 定義

Tabs：Tabs來自MD規範，早在Android 2.0時代，官方的通訊錄App就使用頂部Tab導航，可以滑動切換不同視圖。Tabs裡Tab呈現的内容可以有很大的差别，而且數量沒有限制，Tabs不能作為表單的單選組件。

分段控件：iOS原生控件之一，每個分段作用是互斥的，在分段控件裡，所有的分段選項框在長度上要保持一緻，同iOS規範中對于分段控件的分段選項不得超過5個，每個分段選項可以是存文字或者圖片。

2. 如何運用？

（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

1. 定義

Toast：Toast通常出現在頂部和中部，浮于頁面上方，無法對其操作，出現一段時間後便會消失，并且在此期間不影響其他正常操作。

Snackbar：Snackbar出自于安卓系統，是安卓系統的特色彈窗之一。它是由一段信息和一個按鈕組成，他們會在超時或者用戶在屏幕其他地方觸碰後自動消失。Snackbar可以在屏幕上滑動關閉。Snackbar不回妨礙用戶對産品的其他操作。

2. 如何選用？

（1）操作不同：Toast彈窗沒有任何操作鍵，而Snackbar是有操作鍵的。

案例：如圖馬蜂窩App中給作者的文章點贊功能隻需要告知用戶，點贊已成功即可，不需要其他操作，所以選用Toast彈窗。而攜程中當進入酒店界面時，除了告知用戶下面還有更多信息外，還想引導用戶直接查看，所以選用了帶操作功能的Snackbar。

（2）退出狀态不同：Toast彈窗完全是通過超時後自動消失，不存在任何操作，而Snackbar可以超時消失也可以用戶主動上滑關閉。

案例：如下圖豆瓣App廣播界面中，當我點擊換一批後，換好的内容會自動刷新到最前面，所以用戶不需要任何操作就可以看到内容，就可以選用無操作必須等待超時後才會消失的Toast彈窗。

而攜程App中的酒店界面，因為更多精彩的内容在下面，并沒有展示出來，為了不讓用戶在滑動浏覽時造成視覺障礙。所以選擇了Snackbar，除了超時後自動關閉外，也可以通過滑動界面讓彈窗主動關閉。

（3）組成元素不同：Toast彈窗主要是由文字和背景組成，也可以額外附加圖标。而Snackbar除文字、背景，圖标外還有操作鍵組成。

案例：如下圖得到App中隻需要提示用即可，所以選用Toast，組成元素選用背景 文字 圖标，而小紅書App需要加入操作鍵，所以選擇了Snackbar。

總結

通過上面的分析，大家是不是對這八個組件有了更深的理解呢？

每個組件都有不可替代的作用，如果大家還有哪些不清楚的組件對比可以在文章下留言，之後我會選擇一些整理出來再次和大家分享，感謝大家的耐心閱讀。

作者：小溜Epik，公衆号：海鹽社

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

題圖來自Unsplash，基于CC0協議

,

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

查看全部