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

在設(shè)計(jì)iOS版和Android版的APP過(guò)程中，會(huì)涉及到很多組件。不同的場(chǎng)景使用的組件也不一樣。本文將講述六組常見(jiàn)的相似組件的區(qū)別和用法。

一、警示框（alert）和底部操作列表（actionsheet）

警示框是傳達(dá)應(yīng)用或設(shè)備某些狀態(tài)的信息，并且常常需要用戶(hù)來(lái)點(diǎn)擊操作。底部操作列表展示了與用戶(hù)觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)，包含兩個(gè)或以上的按鈕。一般含有三種以上操作使用底部操作列表，一種或者兩種操作使用警示框或底部操作列表。

對(duì)于警示框（alert）和底部操作列表（actionsheet）的困惑多用于二次確認(rèn)上，例如微信的退出登錄使用的是底部操作列表，而QQ用的是警示框。警示框（alert）和底部操作列表（actionsheet）的區(qū)別在于用法：警示框側(cè)重提示文字；進(jìn)而表示提示文字的內(nèi)容優(yōu)先級(jí)較高；底部操作列表側(cè)重選擇按鈕；進(jìn)而表示選擇按鈕的功能優(yōu)先級(jí)較高；按鈕為0-2個(gè)時(shí)，建議使用警示框；按鈕為2-n個(gè)時(shí)，建議使用底部操作列表；當(dāng)然有些場(chǎng)景需要強(qiáng)阻斷操作，例如提示沒(méi)有網(wǎng)絡(luò)、版本升級(jí)等情況需要使用警示框；具體情況可根據(jù)產(chǎn)品對(duì)待。例如微信退出登錄用的是底部操作列表，阻斷性不強(qiáng)，對(duì)用戶(hù)打擾程度較低。

二、標(biāo)簽欄（tabbar)和工具欄（toolbar）

標(biāo)簽欄讓用戶(hù)在不同子任務(wù)、視圖和模式中進(jìn)行切換。工具欄放置著用于操作當(dāng)前屏幕中各對(duì)象的組件，在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現(xiàn)在頂部。

例如App Store中底部的標(biāo)簽欄和iOS原生郵件詳情頁(yè)下方工具欄。

標(biāo)簽欄（tabbar)和工具欄（toolbar）之間存在區(qū)別：標(biāo)簽欄讓用戶(hù)在不同視圖切換，例如App Store點(diǎn)擊游戲tab進(jìn)入游戲內(nèi)容界面，則涉及到視圖切換是標(biāo)簽欄。工具欄則是對(duì)當(dāng)前界面內(nèi)容進(jìn)行操作，例如iOS原生郵件點(diǎn)擊工具欄中刪除，則刪除當(dāng)前郵件。所以涉及到對(duì)當(dāng)前頁(yè)面進(jìn)行操作時(shí)要考慮使用工具欄。

三、底部動(dòng)作條（bottomsheets）和菜單（menus）

底部動(dòng)作條：一個(gè)從屏幕底部邊緣向上滑出一個(gè)面板，在這種方式下向用戶(hù)呈現(xiàn)一組功能。提供三個(gè)或三個(gè)以上需要提供給用戶(hù)選擇并且不需要對(duì)其進(jìn)行額外解釋的行動(dòng)選項(xiàng)情境可以采取此方法展現(xiàn)行動(dòng)選項(xiàng)?？梢允菍m格樣式也可以是列表樣式。

菜單：菜單由按鈕、動(dòng)作、點(diǎn)或者包含至少兩個(gè)菜單項(xiàng)其他控件觸發(fā)而成立一個(gè)臨時(shí)紙張(paper)。每一個(gè)菜單項(xiàng)都是離散選項(xiàng)或者動(dòng)作，并且能夠影響到應(yīng)用、視圖或者視圖中選中按鈕。

例如微信公眾號(hào)點(diǎn)擊更多出現(xiàn)了一個(gè)底部動(dòng)作條；微信對(duì)話(huà)長(zhǎng)按出現(xiàn)菜單再點(diǎn)擊退出出現(xiàn)了一個(gè)菜單。

總結(jié)下來(lái)：

- 如果只有兩個(gè)或更少數(shù)量行動(dòng)選項(xiàng)可考慮采取菜單(Menu)或者提示框替代。
- 針對(duì)長(zhǎng)按情境大多數(shù)采取菜單(menu)

四、選擇器和底部動(dòng)作條

針對(duì)互斥性單項(xiàng)選擇需求采取選擇器(Selector)，好處在于來(lái)回切換確定同時(shí)由于滾輪式滾動(dòng)容納非常多選項(xiàng)很合適。

例如獵聘APP早期版本，在選擇當(dāng)前狀態(tài)時(shí)采取了“刪除”、“取消”等字眼描述方式采取了類(lèi)似“編輯資料”的形式展開(kāi)全部狀態(tài)并不能清晰地表達(dá)意思且無(wú)法容納更多狀態(tài)因此做法錯(cuò)誤獵聘APP目前已經(jīng)改為選擇器形式展開(kāi)全部狀態(tài)并且支持搜索功能使得交互更加友好明確

五、下拉菜單(drop-downmenu)、 底部操 作 列 表 ( actionsheet ) 及活 動(dòng) 視 圖 控 制 器 ( activityviewcontroller )

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

活動(dòng)視圖控制器：一個(gè)臨時(shí)視圖羅列了一系列可以針對(duì)頁(yè)面特定內(nèi)容系統(tǒng)服務(wù)以及定制服務(wù)

例子：

- 在支付寶中點(diǎn)擊“更多”出現(xiàn)下拉菜單
- 微信公眾號(hào)主頁(yè)點(diǎn)擊“更多”出現(xiàn)了一個(gè)懸浮窗口
- 公眾號(hào)歷史文章中點(diǎn)擊“更多”出現(xiàn)活動(dòng)視圖控制器

總結(jié)：

- 如果希望提供下一個(gè)任務(wù)入口則可考慮采取下拉菜單
- 如果希望分享當(dāng)前頁(yè)面內(nèi)容則可考慮活動(dòng)視圖控制器
- 如果希望提供與用戶(hù)觸發(fā)相關(guān)聯(lián)行為則可考慮采取 底 部 操 作 列 表 ( actionsheet )

六、Snackbar 和 Toast

Snackbar 是一種針對(duì)某些行為反饋機(jī)制, 常以小型彈窗形式呈現(xiàn)在手機(jī)屏幕最下方, 或者電腦屏幕左下角, 它們會(huì)覆蓋所有正在運(yùn)行程序, 包括浮點(diǎn)按鈕. Snackbar 會(huì)自己消失, 或者當(dāng)超時(shí)時(shí)間結(jié)束后, 或者當(dāng)用戶(hù)觸摸屏幕其他位置后.

Toast 主要用于提示系統(tǒng)消息. Toast 同 Snackbar 非常相似, 但是 Toast 并不包含任何交互元素, 也不能從屏幕其他位置關(guān)閉.

總結(jié)：

1.如果信息反饋需要承載更多提示語(yǔ)建議采取Toast。
2.如果嵌入了交互元素建議采取Snackbar。
3.Toast 相比 Snackbar 提醒強(qiáng)度稍低些。
4.想要學(xué)習(xí)關(guān)于 App 運(yùn)營(yíng)等方面知識(shí)請(qǐng)關(guān)注135編輯器！