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

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

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

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

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

1. 警告視圖(Alert View)

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

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

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

App要獲取位置信息;訪問(wèn)相冊(cè)和相機(jī);詢(xún)問(wèn)是否升級(jí)App等等，這些都需要用到警告視圖。

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

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

韓國(guó)某APP&回家吃飯

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

2. 操作菜單(Action Sheet)

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

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

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

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

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

蝸牛讀書(shū)&支付寶

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

全局模態(tài)屬于一種很特殊的臨時(shí)框，因?yàn)樗膮^(qū)域會(huì)占據(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)(對(duì)照上面iOS自帶的郵件APP的圖會(huì)更容易理解)：

占據(jù)整個(gè)屏幕，或者占據(jù)整個(gè)父視圖的區(qū)域。

包含完成當(dāng)前任務(wù)所需的文字和控件。

通常也包含一個(gè)完成任務(wù)的按鈕，和一個(gè)取消按鈕。

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

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

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

1. Toast

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

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

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

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

淘寶&豆瓣

2. Snackbar

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

SnackBar繼承了Toast的所有特性，即：為小彈窗的形式，會(huì)自動(dòng)消失。有三個(gè)差異化：

可以出現(xiàn)0到1個(gè)操作，不包含取消按鈕;

點(diǎn)擊SnackBar以外的區(qū)域，SnackBar會(huì)消失;

一般只出現(xiàn)在屏幕底部。

在實(shí)際的產(chǎn)品設(shè)計(jì)中，我沒(méi)采用過(guò)SnackBar這種形式，在平時(shí)使用APP時(shí)也很少看到。所以放了兩張MD規(guī)范中的圖。

帶一個(gè)操作 & 不帶操作

舉個(gè)可以采用SnackBar臨時(shí)框的場(chǎng)景：當(dāng)刪除某張照片時(shí)，可以在屏幕底部出現(xiàn)Snackbar，提示“照片成功刪除”，并附帶撤銷(xiāo)操作，當(dāng)用戶(hù)點(diǎn)擊撤銷(xiāo)時(shí)，照片可恢復(fù)。用戶(hù)不進(jìn)行操作Snackbar則消失，照片刪除成功。

APP中所有臨時(shí)框的設(shè)計(jì)，基本上不會(huì)脫離上面提到的五種形式，這五種形式是按照臨時(shí)框的作用和呈現(xiàn)形式來(lái)劃分的。當(dāng)然也可以按照開(kāi)發(fā)的實(shí)現(xiàn)方式來(lái)劃分(Android端)：Dialog、Toast、SnackBar、Popupwindow、Activity等等。但這種劃分對(duì)用戶(hù)來(lái)說(shuō)并沒(méi)有什么價(jià)值，但對(duì)于設(shè)計(jì)師來(lái)說(shuō)知道什么樣的臨時(shí)框可以用什么代碼去實(shí)現(xiàn)，會(huì)更容易推動(dòng)自己的設(shè)計(jì)方案。

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

以上就是上海網(wǎng)站制作公司——海淘科技為你推出《APP中的臨時(shí)框設(shè)計(jì)》的全部?jī)?nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：幾何與網(wǎng)頁(yè)設(shè)計(jì)，于此同時(shí)，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：創(chuàng)業(yè)傘商務(wù)服務(wù)類(lèi)網(wǎng)站制作案例