在APP設(shè)計(jì)中，有很多組件有著類似的功能和用法。如何正確使用這些組件？這些組件之間有什么區(qū)別？一起看看作者的解讀。

在設(shè)計(jì)iOS版和Android版的APP過程中會涉及到很多組件。不同的場景使用的組件也不一樣。這篇文章講述六組常見的相似組件的區(qū)別和用法。

• 警示框（alert）和底部操作列表（action sheet）
• 標(biāo)簽欄（tab bar)和工具欄（tool bar）
• 底部動作條（bottom sheets）和菜單（menus）
• 選擇器（selector）和底部操作列表（action sheet）
• 下拉菜單（drop-down menu）、底部操作列表（action sheet）及活動視圖控制器（activity view controller）
• snackbar和toast

一. 警示框（Alert）和底部操作列表（Action Sheet）

警示框是傳達(dá)應(yīng)用或設(shè)備某些狀態(tài)的信息，并且常常需要用戶來點(diǎn)擊操作。

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

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

例如：iOS原生郵箱，點(diǎn)擊「更多」出現(xiàn)底部操作列表，展示四種操作選項(xiàng)。推特的退出登錄需要二次確認(rèn)，使用的是警示框。

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

警示框（alert）和底部操作列表（action sheet）的區(qū)別于用法：

• 警示框側(cè)重提示文字，進(jìn)而表示提示文字的內(nèi)容優(yōu)先級較高；
• 底部操作列表側(cè)重選擇按鈕，進(jìn)而表示選擇按鈕的功能優(yōu)先級較高；
• 按鈕為0-2個時，建議使用警示框；
• 按鈕為2-n個時，建議使用底部操作列表；
• 當(dāng)然有的場景需要強(qiáng)阻斷操作，例如提示沒有網(wǎng)絡(luò)，版本升級，這種情況需要使用警示框；
• 具體情況可根據(jù)產(chǎn)品對待。例如微信退出登錄用的是底部操作列表，阻斷性不強(qiáng)，對用戶的打擾程度較低。

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

標(biāo)簽欄：讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換。

工具欄：放置著用于操作當(dāng)前屏幕中各對象的組件，在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部。

例如：app store中底部的標(biāo)簽欄和iOS原生郵件詳情的底部工具欄。

標(biāo)簽欄（tab bar)和工具欄（tool bar）的區(qū)別：

• 標(biāo)簽欄讓用戶在不同視圖切換，例如app store 點(diǎn)擊游戲tab，進(jìn)入游戲內(nèi)容的界面，所以涉及到視圖切換是標(biāo)簽欄。
• 工具欄是對當(dāng)前界面內(nèi)容的操作，例如iOS原生郵件點(diǎn)擊工具欄中的刪除，則刪除當(dāng)前郵件。所以涉及到對當(dāng)前頁面的操作是工具欄。

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

底部動作條：一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現(xiàn)一組功能。底部動作條提供三個或三個以上的操作需要提供給用戶選擇，并且不需要對操作有額外解釋的情景。

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

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

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

例如：微信公眾號點(diǎn)擊「更多」，出現(xiàn)底部動作條；微信對話列表長按出現(xiàn)菜單，點(diǎn)擊退出出現(xiàn)的菜單。

底部動作條（bottom sheet）和菜單（menu）的區(qū)別：

• 如果只有兩個或者更少的操作，或者需要詳加描述的，可以考慮使用菜單(Menu)或者提示框替代。
• 長按操作，多數(shù)情況使用菜單（menu）。

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

對于互斥的單項(xiàng)選擇而言，要使用選擇器。選擇器的好處是可以來回切換確定，同時由于選擇器里面的內(nèi)容滾動，所以可以容納非常多的選項(xiàng)。

例如獵聘app早期版本，選擇當(dāng)前狀態(tài)，使用的是底部操作列表。這樣做是錯誤的，底部操作列表是對選項(xiàng)進(jìn)行操作而不是選擇。獵聘現(xiàn)版本已經(jīng)改為了選擇器。

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

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

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

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

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

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

• 操作選項(xiàng)是提供下一個操作任務(wù)入口，則使用下拉菜單。
• 對當(dāng)前操作的分享，則使用活動視圖控制器。
• 對當(dāng)前頁面內(nèi)容的操作，則使用底部操作列表。

六. Snackbar和Toast

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

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

屏幕上同時最多只能顯示一個 Snackbar。

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

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

snackbar和toast的區(qū)別：

• toast作為信息的反饋提示，可以承載更多的提示語。提示語很長的時候建議用taost，snackbar 文案必須要求很短。
• 如果在提示信息里面嵌入操作，使用snackbar 。例如微信收藏，可在snackbar中加入操作按鈕進(jìn)行收藏標(biāo)簽分類。
• toast相對于snackbar而言，提示強(qiáng)度稍低一些。

歡迎關(guān)注作者的微信公眾號：「UEDC」

「不懂組件規(guī)范？看這幾篇就夠了」

• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之加載類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之網(wǎng)絡(luò)異常類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之引導(dǎo)類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之導(dǎo)航類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之空數(shù)據(jù)類》
• 《輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)體系之提示類》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com