在設(shè)計(jì)iOS版或Android版App過程中會使用到很多組件。

設(shè)計(jì)師在使用組件的過程中，可能沒有意識到相似組件之間的差異性和正確的用法，導(dǎo)致組件使用出錯(cuò)。

這篇文章講述6組易混淆組件的區(qū)別及正確用法，6組組件如下：

1.底部操作列表（Action sheet）和警示框（Alert）

2.標(biāo)簽欄（Tab bar)和工具欄（Tool bar）

3.底部動作條（Bottom sheets）和菜單（Menus）

4.選擇器（）和底部操作列表（Action Sheet）

5.下拉菜單（-down menu）、底部操作列表（Action sheet）及活動視圖控制器（Activity view controller）

6.Snackbar和Toast

1.底部操作列表和警示框

在iOS原生郵箱，用戶點(diǎn)擊“轉(zhuǎn)發(fā)/回復(fù)”出現(xiàn)底部操作列表，呈現(xiàn)3種操作選項(xiàng)。推特退出登錄時(shí)，通過警示框讓用戶進(jìn)行二次確認(rèn)。

底部操作列表展示與用戶觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)，包含兩個(gè)或以上的操作按鈕。

警告框是告知App或設(shè)備某些狀態(tài)的信息，并且需要用戶來點(diǎn)擊操作。

底部操作列表伴隨著用戶操作后出現(xiàn)，而警示框可能用戶不操作也會出現(xiàn)。如下圖所示，當(dāng)用戶首次下載App，并打開時(shí)候，通過警示框來獲取權(quán)限。

一般含有三種以上操作使用底部操作列表，一種或者兩種操作使用警示框或底部操作列表。

對于警示框和底部操作列表的使用困惑多在二次確認(rèn)上，例如微信的退出登錄使用的是底部操作列表，而QQ用的是警示框。

總結(jié)警示框和底部操作列表的區(qū)別于用法：

1.底部操作列表側(cè)重選擇按鈕，選擇按鈕的功能優(yōu)先級較高，如微信退出的底部操作列表按鈕；

2.警示框側(cè)重點(diǎn)是提示文字，提示文字的內(nèi)容優(yōu)先級較高，如QQ退出警示框偏重文案提示；

3.按鈕為0-2個(gè)時(shí)，建議使用警示框；

4.按鈕為2-n個(gè)時(shí)，建議使用底部操作列表；

5.當(dāng)然有的場景需要強(qiáng)阻斷操作，例如提示沒有網(wǎng)絡(luò)，版本升級，這種情況需要使用警示框；

6.具體情況可根據(jù)產(chǎn)品對待，例如微信退出登錄用的是底部操作列表，原因可能是底部操作列表阻斷性不強(qiáng)，對用戶的打擾程度較低。

2.標(biāo)簽欄和工具欄

標(biāo)簽欄：讓用戶在不同的界面視圖和模式中進(jìn)行切換。

工具欄：用于操作當(dāng)前界面內(nèi)容的組件，在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部。

如下圖，綠洲底部的標(biāo)簽欄和iOS原生郵箱詳情的底部工具欄。

總結(jié)標(biāo)簽欄和工具欄的區(qū)別：

1.標(biāo)簽欄讓用戶在不同視圖切換，例如綠洲點(diǎn)擊tab2，進(jìn)入搜索界面，所以涉及到界面視圖切換是標(biāo)簽欄。

2.工具欄是對當(dāng)前界面內(nèi)容的操作，例如iOS原生郵件點(diǎn)擊工具欄中的刪除，則刪除當(dāng)前郵件。所以涉及到對當(dāng)前頁面的操作是標(biāo)簽欄。

3.底部動作條和菜單

底部動作條：一個(gè)從屏幕底部邊緣向上滑出的一個(gè)面板，使用這種方式向用戶呈現(xiàn)一組功能。

底部動作條提供2個(gè)或2個(gè)以上的操作需要提供給用戶選擇、并且不需要對操作有額外的解釋。

底部動作條可以是列表樣式的也可以是宮格樣式。

底部動作條是Android的設(shè)計(jì)指南組件，iOS相對應(yīng)的是底部操作列表。

菜單：菜單是臨時(shí)的一張紙（paper），由按鈕（button）、動作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

每一個(gè)菜單項(xiàng)是一個(gè)離散的選項(xiàng)或者動作，并且能夠影響到應(yīng)用、視圖或者視圖中選中的按鈕。

如下圖，微信公眾號點(diǎn)擊更多，出現(xiàn)底部動作條。微信對話列表長按出現(xiàn)菜單。

總結(jié)底部動作條和菜單的區(qū)別：

1.如果有3個(gè)或3個(gè)以上的操作，可以使用底部操作列表；

2.長按操作，多數(shù)情況使用菜單。

4.選擇器和底部操作列表

對于互斥的單項(xiàng)選擇而言，要使用選擇器。

選擇器的好處是可以來回切換確定，同時(shí)由于選擇器里面的內(nèi)容滾動，所以可以容納非常多的選項(xiàng)。

底部操作列表展示與用戶觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)，包含兩個(gè)或以上的操作按鈕。

例如獵聘app早期版本，選擇當(dāng)前狀態(tài)，使用的是底部操作列表。這樣做是錯(cuò)誤的。

底部操作列表是對選項(xiàng)進(jìn)行操作而不是選擇。獵聘現(xiàn)版本已經(jīng)改為了選擇器。

5.下拉菜單、底部操作列表及活動視圖控制器

在支付寶中，點(diǎn)擊“更多”出現(xiàn)下拉菜單。微信公眾號主頁點(diǎn)擊“更多”出現(xiàn)底部操作列表。公眾號歷史文章中點(diǎn)擊“更多”出現(xiàn)視圖控制器。

下拉菜單：常見適用于提供快捷入口。導(dǎo)流用戶去做其他功能任務(wù)。

底部操作列表：展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)，包含兩個(gè)或以上的按鈕。

活動視圖控制器：是一個(gè)臨時(shí)視圖，當(dāng)中羅列了一系列可以針對頁面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)。

總結(jié)下拉菜單、底部操作列表及動視圖控制器的區(qū)別：

1.如果操作選項(xiàng)是提供下一個(gè)操作任務(wù)入口，則使用下拉菜單；

2.如果是對當(dāng)前操作的分享則使用活動視圖控制器；

3.如果是對當(dāng)前頁面內(nèi)容的操作，則使用底部操作列表。

6.Snackbar和Toast

Snackbar 是一種針對操作的輕量級反饋機(jī)制，常以一個(gè)小的彈出框的形式，出現(xiàn)在手機(jī)屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方，包括浮動操作按鈕。

例如微信對話收藏后，底部會出現(xiàn)Snackbar。它的作用除了提示用戶收藏成功，還可以讓用戶對收藏的信息進(jìn)行添加標(biāo)簽。

它會在超時(shí)或者用戶在屏幕其他地方觸摸之后自動消失。Snackbar 可以在屏幕其他區(qū)域滑動關(guān)閉。當(dāng)它出現(xiàn)時(shí)，不會阻礙用戶在屏幕上的輸入，并且Snackbar也不支持輸入。屏幕上同時(shí)最多只能顯示一個(gè) Snackbar。

Toast主要用于提示系統(tǒng)消息。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能從屏幕其他區(qū)域上滑動關(guān)閉，文本內(nèi)容左對齊。

文章討論的Toast和Snackbar主要是針對Android端，當(dāng)然iOS設(shè)計(jì)規(guī)范中使用Taost很多，使用Snackbar我也僅僅在gmail中看見過。

總結(jié)Snackbar和Toast的區(qū)別：

1.Toast作為信息的反饋提示，可以承載更多的提示語。提示語很長的時(shí)候建議用Toast，Snackbar 文案必須要求很短；

2.如果在提示信息里面嵌入操作，則需要使用Snackbar 。如微信收藏在Snackbar中加入操作按鈕進(jìn)行收藏標(biāo)簽分類；

3.Toast相對于Snackbar而言，提示強(qiáng)度稍低一些。