一共有五種臨時框：警告識圖，操作菜單，全局模態，Toast，SnackBar。知道這五類臨時框的作用與特點，就能在設計APP臨時框時做到心中有數，游刃有余。

智能手機經歷了十年的發展，目前市場上主流的移動端操作系統只有兩個：Android和iOS。智能手機的硬件和軟件已經同質化很嚴重，所以我會把Android和iOS的臨時框放在一起講，因為站在設計的角度，它們的界限在變得模糊。基本上在iOS存在的設計樣式，在Android都能找到對應。

一. 模態臨時框

臨時框可以分為兩大類，一類稱為模態臨時框，另一類稱為非模態臨時框。模態臨時框需要用戶必須選擇一項操作后才會消失，比如 Alert 確認等;而非模態臨時框并不需要用戶必須選擇一項操作才會消失，比如頁面上彈出的 Toast 提示。

模態臨時框主要有以下三類：

1. 警告視圖(Alert View)

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

回想一下，當聽到一個令人震驚消息時你的反應是?大部分人的反應是“什么?”或者“你說什么?”你潛意識要求對方再說一遍。為什么?因為這個信息太出人意外了，所以你要再次確認下是不是真的!

同理，當你觸發了刪除按鈕時，App是什么反應?刪除的操作太敏感了，所以需要讓再次確認，這里用到的便是警告視圖Alert View。

App要獲取位置信息;訪問相冊和相機;詢問是否升級App等等，這些都需要用到警告視圖。

滴滴出行&網易云音樂

除此之外，警告視圖還能作為運營活動的入口或者引導頁。

韓國某APP&回家吃飯

從上圖可以看到，警告視圖包括三個部分：標題;正文;按鈕。有些簡單的警告視圖只有標題和按鈕，不需要正文來說明;另外一些可能會沒有按鈕，點擊臨時框外部區域臨時框會消失。

2. 操作菜單(Action Sheet)

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

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

網易云音樂&XY

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

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

蝸牛讀書&支付寶

3. 全局模態(Modal View)

全局模態屬于一種很特殊的臨時框，因為它的區域會占據整個屏幕。但在iOS的設計規范中，全局模態被放在了臨時框中。官方定義是：一個以模態形式展現的視圖，它為當前任務或當前工作流程提供獨立的、自包含的(self-contained)功能。

郵件APP

全局模態有一下幾個特點(對照上面iOS自帶的郵件APP的圖會更容易理解)：

占據整個屏幕，或者占據整個父視圖的區域。

包含完成當前任務所需的文字和控件。

通常也包含一個完成任務的按鈕，和一個取消按鈕。

關于全局模態和普通二級頁面的區別，以及什么時候該用全局模態，什么時候該用普通二級頁面?

二. 非模態臨時框

非模態臨時框有Toast、SnackBar：

1. Toast

Toast是Android平臺的設計形式，iOS規范中并沒有規定這種形式，但是由于Toast能很好的起到輕量級反饋的作用，現在很多iOS的APP也在使用這種臨時框。

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

關于Toast的顯示時間，Android自帶的兩種時間屬性Toast.LENGTH_SHORT和Toast.LENGTH_SHORT分別為2秒和3.5秒，但是我的設計習慣一般會自定義為1.5秒和2.5秒。Toast中的文本超過10個字符用2.5秒，少于10個字符用1.5秒。

在樣式上，盡量和產品整體風格保持一致，這樣會更和諧，不至于突兀。

淘寶&豆瓣

2. Snackbar

同Toast，SnackBar同樣是Android特有的臨時框。

SnackBar繼承了Toast的所有特性，即：為小彈窗的形式，會自動消失。有三個差異化：

可以出現0到1個操作，不包含取消按鈕;

點擊SnackBar以外的區域，SnackBar會消失;

一般只出現在屏幕底部。

在實際的產品設計中，我沒采用過SnackBar這種形式，在平時使用APP時也很少看到。所以放了兩張MD規范中的圖。

帶一個操作 & 不帶操作

舉個可以采用SnackBar臨時框的場景：當刪除某張照片時，可以在屏幕底部出現Snackbar，提示“照片成功刪除”，并附帶撤銷操作，當用戶點擊撤銷時，照片可恢復。用戶不進行操作Snackbar則消失，照片刪除成功。

APP中所有臨時框的設計，基本上不會脫離上面提到的五種形式，這五種形式是按照臨時框的作用和呈現形式來劃分的。當然也可以按照開發的實現方式來劃分(Android端)：Dialog、Toast、SnackBar、Popupwindow、Activity等等。但這種劃分對用戶來說并沒有什么價值，但對于設計師來說知道什么樣的臨時框可以用什么代碼去實現，會更容易推動自己的設計方案。

總結一下，一共有五種臨時框：警告識圖，操作菜單，全局模態，Toast，SnackBar。知道這五類臨時框的作用與特點，就能在設計APP臨時框時做到心中有數，游刃有余。

文章標題：APP中的臨時框設計
當前網址：http://www.js-pz168.com/news39/158789.html

成都網站建設公司_創新互聯，為您提供響應式網站、用戶體驗、網站營銷、搜索引擎優化、移動網站建設、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯