APP彈框怎麼設計？看完這篇就懂了

彈框又稱為對話框，是一種交互方式，用於提醒或作出某個決定或是解決某個任務。常見於網頁中和移動端APP中，也是App與用戶進行交互的常見方式之一。彈框能夠引導用戶更好地體驗軟件，但是過於頻繁的彈框也會引起反感。

常見彈框類型

多年工作總結發現，在MaterialDesign設計規範中，對用戶提示係統考慮的非常全麵，Toast、SnackBar、Dialog三種形式，橫向對比來看，在用戶感受層麵上說是由輕到重的；在iOS設計規範中有Alert（即Dialog）和ActionBar。Toast、SnackBar、Dialog（Alert）和ActionBar它們分別長什麼樣子，怎麼來使用呢？那我們就來聊聊這四種彈框方式。

在移動端APP中常見彈框樣式？

Toast:

一般用來顯示操作結果，或是當前應用狀態，適用於隻是告訴用戶發生了什麼，常見於係統的通知, 但是有很大的局限性，就是隻能通知用戶，而做不到和用戶進行交互，用戶較容易忽視。比如，你不小心刪除了一張照片而沒有通過二次確認，僅僅是toast通知你”已刪除”，對用戶而言是很難接受的事情。

一般常見形式為一句簡短的文字描述，可以設置在頁麵的頂部、中部或底部，具體位置根據頁麵整體設計。

Toast雖然是Android係統中常見的提示方式，在很多APP中也都有采用，作為輕量級提示形式，既能達到目的又不影響用戶操作。

SnackBar：

SnackBar提示對話框，是安卓係統的特色彈框類型，它同時擁有Toast和Dialog的特點，不會打斷用戶正常操作，在告知用戶信息的同時還可以和用戶進行交互，提醒度較強。

一般常見形式有：文字描述加一個功能按鈕組成，如果用戶點擊按鈕，彈框消失，隨即進入相應操作流程；如果用戶不點擊，SnackBar和Toast一樣有時間限製，彈框出現一段時間也會自動消失。設置位置是頁麵底部。

SnackBar的交互行為比Toast更友好，更容易讓用戶接受，既顯示內容的同時，還提供功能按鈕給用戶選擇使用。雖然是Android係統中特有的，但是在iOS中也有類似SnackBar提醒方式，如郵件底部，新郵件數量提醒；在“愛逛街”頁麵中就是SnackBar的變形，符合了“不操作，不打擾”的原則。

Alert（或Dialog）:

Alert（或Dialog）主要作用是給用戶一個提示信息，出現時會打斷用戶和之前頁麵的的交互動作，並且強製要求和用戶進行當前操作, 讓用戶做出一個選擇並且由用戶來負責自己的行為。比如，你不小心刪除一張照片，這時Dialog出現，要你自己做出相應選擇，你要真的“刪除”照片還是“取消”（不刪除）。

一般是對話框形式，通常出現在頁麵中間，由標題、信息內容和功能按鈕構成。

在APP中最常見的是兩個按鈕的Alert（或Dialog），也會有一個按鈕或三個按鈕的情況。兩個按鈕的情況對於用戶來說最容易作出選擇；一個按鈕的情況，通常隻是用來提醒，對用戶來說操控性不強；三個或三個以上按鈕的情況，最為複雜，盡量避免使用。在使用Alert（或Dialog）時一定要謹慎，它的出現會打斷用戶的原有操作，會引發用戶的煩躁情緒，盡量不要給用戶帶來糟糕的體驗感受。

ActionBar：

類似Dialog的設計形式，用戶必須進行當前操作，否則彈框不消失，而且用戶也無法繼續其他操作。不同點在於ActionBar中會提供多個使用戶做出選擇的功能按鈕，一般也會有“取消”按鈕，用戶不想做出任何選擇時，可以點擊“取消”按鈕，也可點擊ActionBar以外的區域，關閉當前彈框。比如，你用手機截了個屏，編輯後並分享出去，那這張截屏你需要怎麼處理呢？“儲存”還是“刪除”還是“取消”（回到編輯狀態）。

一般常見的形式是文字列表，用功能描述性文字表示功能按鈕，通常出現在頁麵底部，在設計時，會產生嚴重後果的功能，例如“刪除”，通常用紅色或較醒目的色彩將字體標出。

當功能按鈕很多時，文字列表形式不合適，還可以使用圖標加文字的形式。這種形式需注意圖標要能表現出操作意義，文字盡量簡單明確；彈框內部按鈕要進行恰當分類，考慮合理間距，便於用戶點擊，如有超出部分，應留有足夠的元素，引導視線。

ActionBar在iOS規範中有以下幾點需要注意：

1、提供明顯且安全的出口。保證用戶明白他們操作後引起的結果是什麼。

2、ActionBar中的任務簡單、簡短、聚焦。如果要在ActionBar中創建帶有多層級關係的任務，一定要慎重！因為用戶很容易忘記它們操作的來龍去脈。

3、ActionBar隻在展示很重要的提示信息時，才考慮使用。由於會打擾到用戶，所以有必要讓用戶覺得這種打擾是值得的。

使用彈框要合理

並不是所有的彈框設計都會被用戶接受。我們在使用彈框的時候要盡量克製，要考慮信息內容的必要性和目的性。一旦選擇使用Alert（Dialog）或ActionBar彈框，請盡量少用，一般情況下都把彈框的層級控製在隻有一級，接連不斷的出現彈框會增加用戶厭惡心理產生想要卸載APP的欲望。