特殊情況下的APP設(shè)計(jì)（5）：最全的臨時(shí)框設(shè)計(jì)

　

一共有五種臨時(shí)框：警告識圖，操作菜單，全局模態(tài)，Toast，SnackBar。知道這五類臨時(shí)框的作用與特點(diǎn)，就能在設(shè)計(jì)APP臨時(shí)框時(shí)做到心中有數(shù)，游刃有余。

智能手機(jī)經(jīng)歷了十年的發(fā)展，目前市場上主流的移動端操作系統(tǒng)只有兩個(gè)：Android和iOS。智能手機(jī)的硬件和軟件已經(jīng)同質(zhì)化很嚴(yán)重，所以我會把Android和iOS的臨時(shí)框放在一起講，因?yàn)檎驹谠O(shè)計(jì)的角度，它們的邊界在變得模糊。基本上在iOS存在的設(shè)計(jì)樣式，在Android都能找到對應(yīng)。

一. 模態(tài)臨時(shí)框

臨時(shí)框可以分為兩大類，一類稱為模態(tài)臨時(shí)框，另一類稱為非模態(tài)臨時(shí)框。模態(tài)臨時(shí)框需要用戶必需選擇一項(xiàng)操作后才會消失，好比 Alert 確認(rèn)等；而非模態(tài)臨時(shí)框并不需要用戶必需選擇一項(xiàng)操作才會消失，好比頁面上彈出的 Toast 提示。

模態(tài)臨時(shí)框主要有以下三類：

1. 警告視圖（Alert View）

Alert View是iOS中的概念，中文翻譯為警告視圖，官方定義是：警告框用于告知用戶一些會影響到他們使用 app 或設(shè)備的重要信息。與之對應(yīng)的臨時(shí)框，在Android系統(tǒng)中被稱為dialog，翻譯為對話框。

回想一下，當(dāng)聽到一個(gè)令人震驚消息時(shí)你的反應(yīng)是？大部分人的反應(yīng)是“什么？”或者“你說什么？”你潛意識要求對方再說一遍。為什么？因?yàn)檫@個(gè)信息太出人不測了，所以你要再次確認(rèn)下是不是真的！

同理，當(dāng)你觸發(fā)了刪除按鈕時(shí)，App是什么反應(yīng)？刪除的操作太敏感了，所以需要讓再次確認(rèn)，這里用到的即是警告視圖Alert View。

App要獲取位置信息；拜候相冊和相機(jī)；詢問是否升級App等等，這些都需要用到警告視圖。

滴滴出行&網(wǎng)易云音樂

除此之外，警告視圖還能作為運(yùn)營活動的入口或者引導(dǎo)頁。

韓國某APP&回家吃飯

從上圖可以看到，警告視圖包孕三個(gè)部分：標(biāo)題；正文；按鈕。有些簡單的警告視圖只有標(biāo)題和按鈕，不需要正文來說明；別的一些可能會沒有按鈕，點(diǎn)擊臨時(shí)框外部區(qū)域臨時(shí)框會消失。

2. 操作菜單（Action Sheet）

iOS中Action Sheet中文翻譯為操作菜單，對應(yīng)Android中的Bottom Sheets，中文翻譯為底部動作條。

某天你正在用某音樂App聽一首歌，看著播放界面，這時(shí)候你想要查看歌手信息，專輯信息，還想要保藏這首歌……在當(dāng)前頁面要滿足這這么多需求，就要用到操作列表Action Sheet。針對當(dāng)前頁面，用戶想要執(zhí)行的操作太多了，不成能把這些操作都放出來，這樣頁面上全都是密密麻麻的icon、button。用操作列表的形式把這些按鈕都放在一個(gè)臨時(shí)框里就完美的解決了這個(gè)問題。

網(wǎng)易云音樂&XY

上面兩張圖，看起來完全紛歧樣，但是原理是我上面所說的，萬變不離其中，只不過換了個(gè)UI樣式。它們都屬于操作菜單類臨時(shí)框。

該類臨時(shí)框還有一類變種，不在底部彈出，而是在用戶觸發(fā)操作的區(qū)域附近彈出，如下圖：

蝸牛讀書&支付寶

3. 全局模態(tài)（Modal View）

全局模態(tài)屬于一種很特殊的臨時(shí)框，因?yàn)樗膮^(qū)域會占據(jù)整個(gè)屏幕。但在iOS的設(shè)計(jì)規(guī)范中，全局模態(tài)被放在了臨時(shí)框中。官方定義是：一個(gè)以模態(tài)形式展現(xiàn)的視圖，它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨(dú)立的、自包羅的(self-contained)功能。

郵件APP

全局模態(tài)有一下幾個(gè)特點(diǎn)（對照上面iOS自帶的郵件APP的圖會更容易理解）：

占據(jù)整個(gè)屏幕，或者占據(jù)整個(gè)父視圖的區(qū)域。包羅完成當(dāng)前任務(wù)所需的文字和控件。通常也包羅一個(gè)完成任務(wù)的按鈕，和一個(gè)取消按鈕。

關(guān)于全局模態(tài)和普通二級頁面的區(qū)別，以及什么時(shí)候該用全局模態(tài)，什么時(shí)候該用普通二級頁面？

二. 非模態(tài)臨時(shí)框

非模態(tài)臨時(shí)框有Toast、SnackBar：

1. Toast

Toast是Android平臺的設(shè)計(jì)形式，iOS規(guī)范中并沒有規(guī)定這種形式，但是由于Toast能很好的起到輕量級反饋的作用，現(xiàn)在很多iOS的APP也在使用這種臨時(shí)框。

toast屬于一種輕量級的反饋，常常以小彈框的形式出現(xiàn)，一般出現(xiàn)1到2秒會自動消失，可以出現(xiàn)在屏幕上中下任意位置，但同個(gè)產(chǎn)品會模塊盡量使用同一位置，讓用戶產(chǎn)生統(tǒng)一認(rèn)知。

關(guān)于Toast的顯示時(shí)間，Android自帶的兩種時(shí)間屬性Toast.LENGTH_SHORT和Toast.LENGTH_SHORT別離為2秒和3.5秒，但是我的設(shè)計(jì)習(xí)慣一般會自定義為1.5秒和2.5秒。Toast中的文本超過10個(gè)字符用2.5秒，少于10個(gè)字符用1.5秒。

在樣式上，盡量和產(chǎn)品整體風(fēng)格連結(jié)一致，這樣會更和諧，不至于突兀。

淘寶&豆瓣

2. Snackbar

同Toast，SnackBar同樣是Android特有的臨時(shí)框。

標(biāo)簽：林芝 東營 九江 烏魯木齊 鹽城