這一篇你將看到：
 

1、彈窗的定義

2、不同類型彈窗的特點(diǎn)及使用場(chǎng)景

3、常見使用誤區(qū)

 

 

一、彈窗的定義：

彈窗是App中一種常見的交互方式，主要具有“傳遞信息”和“獲取反饋”兩大功能。按類別劃分，可分為“模態(tài)彈窗”和“非模態(tài)彈窗”兩大類。

 

 

模態(tài)彈窗：

強(qiáng)制打斷用戶當(dāng)前操作行為，傳遞給用戶信息，同時(shí)用戶必須進(jìn)行操作回應(yīng)，否則無法使用其他功能。

包含：Dialog/alerts（警告框、對(duì)話框）；  Actionbar、Action Sheets、Acitivity View（動(dòng)作欄、操作列表、活動(dòng)視圖）； Popover/Popup（彈出框、浮層）

 

非模態(tài)彈窗：

不影響用戶當(dāng)前操作行為，傳遞給用戶信息，用戶不用對(duì)其進(jìn)行回應(yīng)，一般出現(xiàn)幾秒后消失。

包含：Toast / HUD（提示框）；Snackbar（底部彈窗）

 

 

 

二、彈窗介紹：

 

1.1、Dialog/alerts（警告框、對(duì)話框）

顧名思義此類彈窗具有通知、警告的作用，往往會(huì)打擾到用戶正常操作。用戶必須對(duì)彈窗進(jìn)行回應(yīng)，才能繼續(xù)其他任務(wù)。此類彈窗在安卓中稱為Dialog，在ios中稱為alerts。

 

 

 

（1）樣式：

一般出現(xiàn)在屏幕中間位置，背后有黑色半透明蒙層。主要分為“按鈕樣式”和“圖片樣式“。“按鈕樣式”基本元素必須包含標(biāo)題、1~3個(gè)按鈕，此外可以根據(jù)情況添加：描述文案、輸入框等。“圖片樣式”通常用于廣告活動(dòng)宣傳，圖片形狀不固定，可以是異形。有時(shí)也可以圖片和按鈕結(jié)合使用。

 

 

（2）使用場(chǎng)景：

此類彈窗通常用于很重要、很緊急、有風(fēng)險(xiǎn)的操作，或傳達(dá)重要信息。如：退出、刪除、清空、版本升級(jí)、廣告宣傳等。由系統(tǒng)發(fā)起的彈窗（非用戶觸發(fā)）一般也使用Dialog。

 

（3）不同按鈕數(shù)量的Dialog使用方法也不同：

單個(gè)按鈕：一般用于告知用戶信息，用戶不需要做出選擇，點(diǎn)擊按鈕后彈窗消失或直接執(zhí)行對(duì)應(yīng)操作。

 

兩個(gè)按鈕：一般用于告知用戶信息，用戶需要在兩個(gè)選項(xiàng)中做出選擇，如果其中涉及到不能恢復(fù)的破壞性操作時(shí)，需要在按鈕上添加特殊顏色，來警示用戶謹(jǐn)慎操作。

 

三個(gè)按鈕：用于有3個(gè)選項(xiàng)時(shí)。通常把最希望用戶點(diǎn)擊的選項(xiàng)，放在第一個(gè)按鈕。最不想用戶點(diǎn)擊的選項(xiàng)，放最后一個(gè)按鈕。

 

 

1.2、Actionbar（Action Sheets、Acitivity View）（動(dòng)作欄、操作列表、活動(dòng)視圖）

點(diǎn)擊頁(yè)面某個(gè)操作區(qū)域，觸發(fā)此彈窗。提供一個(gè)臨時(shí)操作窗口，可以選擇多個(gè)功能選項(xiàng)。一般都有一個(gè)默認(rèn)的“取消”按鈕，點(diǎn)擊“取消”或彈窗以外區(qū)域可以關(guān)閉彈窗。Aciton Sheets和Activity View是iOS上特有的交互形式。

 

Action Sheets

 

（1）樣式：

動(dòng)作欄主要位于屏幕底部，背后有黑色半透明蒙層，可以提供多個(gè)功能選項(xiàng)，且展示的樣式不固定。“Action Sheets”一般提供至少2個(gè)功能選項(xiàng)，頂部提示文案是可選模塊。如果功能選項(xiàng)太多，可以使用“Acitivity View”滾動(dòng)顯示多個(gè)功能，注意需要保留一定的視覺線索。特殊情況下也可自行定義彈窗樣式，來包含多個(gè)功能或復(fù)雜操作，以適應(yīng)特殊場(chǎng)景。

 

Acitivity View

 

（2）使用場(chǎng)景：

一般由用戶主動(dòng)觸發(fā)，常用于提供更多的功能操作。如：分享功能

 

（3）優(yōu)點(diǎn)：

這種提示方式可以減少?gòu)棿俺霈F(xiàn)在頁(yè)面中間給用戶帶來的干擾，且不會(huì)永久占用頁(yè)面的空間。

 

 

1.3、 Popover/Popup（浮層）

 

（1）樣式：

用戶點(diǎn)擊頁(yè)面某個(gè)區(qū)域，浮出的半透明或不透明窗口，包含有多個(gè)功能選項(xiàng)。浮層出現(xiàn)的位置不固定，因此使用上更加靈活。

（2）使用場(chǎng)景：

用于折疊頁(yè)面中的多余信息，或是作為一些功能的快捷入口。常出現(xiàn)于首頁(yè)，具有一定的指向性。

 

 

2.1、Toast / HUD（提示框）

此類彈窗在安卓里叫Toast。在iOS里有一個(gè)類似的叫HUD，音量調(diào)節(jié)提示是最常見的HUD。

 

（1）樣式：

此類彈窗尺寸較小，常出現(xiàn)幾秒后消失。一般有一個(gè)背景，背景顏色不限制，帶有簡(jiǎn)短的文案提示。同時(shí)也可以添加icon，icon顏色也不限制，可以是動(dòng)圖。Toast出現(xiàn)的位置可自定，通常在屏幕中間居多。整個(gè)App里，相同類型的Toast出現(xiàn)的位置需要保持一致，形成統(tǒng)一的認(rèn)知習(xí)慣。

 

 

（2）使用場(chǎng)景：

用于通知用戶結(jié)果反饋或狀態(tài)變化，用戶不需要對(duì)這個(gè)彈窗做出回應(yīng)。此類彈窗能給予用戶及時(shí)反饋，對(duì)用戶的打擾程度較小，用于不是非常重要信息的提示，如：刷新成功、保存成功、等待中。

 

（3）優(yōu)點(diǎn)：

不打斷用戶當(dāng)前的操作任務(wù)，是一種輕量級(jí)的反饋提示，對(duì)用戶干擾小，占用屏幕空間小。

 

（4）缺點(diǎn)：

容易被用戶忽視，出現(xiàn)時(shí)間短。不適合展示重要信息，以及大量文案，用戶很可能沒讀完文案彈窗就消失了。此類彈窗無法交互操作。

 

 

（5）系統(tǒng)規(guī)范里Toast與HUD的區(qū)別：

1、Toast只出現(xiàn)在屏幕底部，HUD則出現(xiàn)在屏幕中央。

2、Toast只能是純文字，HUD則可以帶icon。

3、Toast一般是黑色半透明背景，HUD是毛玻璃透明背景

4、Toast里面的內(nèi)容無法變化，HUD則可以變化內(nèi)容（如音量調(diào)節(jié)時(shí)，音量的變化）

 

我們可以看到很多線上App的Toast，并沒有嚴(yán)格按照系統(tǒng)規(guī)范。所以在實(shí)際使用中，完全可以跳出規(guī)范，選擇適合自己產(chǎn)品的Toast樣式。

 

 

2.2、Snackbar（底部彈窗）

Snackbar是安卓系統(tǒng)的一種控件，有時(shí)也在ios系統(tǒng)中使用。它用于向用戶反饋信息，其打擾程度介于Dialog和Toast之間，是一種輕量級(jí)的反饋彈窗。Snackbar出現(xiàn)時(shí)，用戶仍然可以在屏幕上操作，屏幕上只能同時(shí)出現(xiàn)1個(gè)Snackbar。

 

（1）樣式：

大多數(shù)出現(xiàn)在屏幕底部，由文字和按鈕組成，用戶可以點(diǎn)擊按鈕進(jìn)行交互。通常展示幾秒鐘后消失，也可以操作彈窗外其他位置而消失。偶爾也有未按照規(guī)范，出現(xiàn)在屏幕頂部的情況，如摩拜單車App。

 

（2）使用場(chǎng)景：

較多使用于撤銷操作，給予用戶反悔的機(jī)會(huì)。

 

（3）Snackbar與Toast的對(duì)比：

1、都是小尺寸彈窗，幾秒鐘后自動(dòng)消失。

2、Snackbar帶有可交互的按鈕，而Toast無法交互。

3、Snackbar一般出現(xiàn)在屏幕底部，Toast位置不固定。

4、Snackbar對(duì)用戶的打擾程度，比Toast略高。

5、Snackbar可以觸摸彈窗以外部分消失，而Toast不行，只能等待自動(dòng)消失。

 

 

 

三、彈窗總結(jié)：

 

1、模態(tài)彈窗

特點(diǎn)：模態(tài)彈窗是一種重量級(jí)反饋，常用于重要信息的提示，進(jìn)行重要操作。

優(yōu)點(diǎn)：能夠容易的獲取用戶視覺焦點(diǎn)，吸引用戶注意力。

缺點(diǎn)：容易打斷用戶當(dāng)前的操作行為，用戶必須回應(yīng)彈窗，否則無法進(jìn)行其他操作。

 

Dialog適用于少量選項(xiàng)的判斷操作；動(dòng)作欄和浮層適用于多個(gè)選項(xiàng)的功能操作；浮層具有一定的指向性。

 

 

2、非模態(tài)彈框

特點(diǎn)：非模態(tài)彈窗屬于一種輕量級(jí)反饋，常用于非重要的信息提示。有一定的時(shí)間限制，出現(xiàn)一段時(shí)間后自動(dòng)消失。

優(yōu)點(diǎn)：不強(qiáng)制用戶交互，對(duì)用戶的打擾程度較小。

缺點(diǎn)：展示時(shí)間較短，不適合展示重要信息。不能承載大量文案。

 

 

3、彈窗設(shè)計(jì)原則

（1）精簡(jiǎn)文案

彈窗的“按鈕文案”和“提示文案”應(yīng)盡量精簡(jiǎn)易懂，不產(chǎn)生疑惑和歧義。大量或模糊不清的文案，會(huì)導(dǎo)致用戶無法快速做出選擇，導(dǎo)致整個(gè)操作流程時(shí)間變長(zhǎng)、效率低下。

反饋類型的彈窗，應(yīng)盡可能告訴用戶：發(fā)生了什么，應(yīng)該怎么做。（如果不需要用戶去做什么，則不用提示應(yīng)該怎么做）

 

 

圖一：過于復(fù)雜的文案看似，能讓用戶完全明白發(fā)生了什么。實(shí)際上文案過多，閱讀時(shí)間變長(zhǎng)，操作效率變低。大量的文案閱讀起來也很累。

 

圖二：只告訴了用戶發(fā)生了什么，沒有告訴用戶應(yīng)該怎么辦。尤其是對(duì)年紀(jì)大的用戶，以及對(duì)App不熟悉的用戶，根本不知道接下來應(yīng)該怎么做。

 

圖三：比較合適。精簡(jiǎn)的文案清楚且快速的讓用戶知道發(fā)生了什么，應(yīng)該怎么做。同時(shí)按鈕文案變成“重新輸入”，再一次提示用戶接下來如何操作。

 

 

（2）直接了當(dāng)

操作按鈕盡可能使用直接表示對(duì)應(yīng)操作的文案，避免用戶長(zhǎng)時(shí)間思考，快速理解選項(xiàng)，高效完成操作。

如果希望用戶點(diǎn)擊按鈕去升級(jí)，文案應(yīng)直接表達(dá)升級(jí)意思，使用“立即升級(jí)”文案。而使用“確定”文案，則不能清晰表達(dá)升級(jí)意思，會(huì)使用戶產(chǎn)生疑惑和歧義，不利于理解和高效操作。

 

 

使用“刪除”文案，而不是“確定”文案。雖然根據(jù)提示內(nèi)容，一樣可以知道“確定”就是刪除App，但是不如使用“刪除”文案更直接明了。甚至都不用看提示內(nèi)容，也能明白操作按鈕的含義，和點(diǎn)擊后的結(jié)果。直接展示出操作名稱更合適。

 

 

 

四、常見使用誤區(qū)：

 

1、Dialog（警告框） 和 Action Sheets（操作列表）

（1）Dialog側(cè)重于傳達(dá)信息，因此文案內(nèi)容的優(yōu)先級(jí)較高。Action Sheets側(cè)重于功能選項(xiàng)，因此表示不同功能選項(xiàng)的按鈕優(yōu)先級(jí)較高。

（2）按鈕為2個(gè)或以內(nèi)時(shí)，一般使用Dialog。按鈕超過2個(gè)時(shí)，一般使用Action Sheets。（僅指一般情況，特殊場(chǎng)景特殊對(duì)待）

（3）需要強(qiáng)行打斷的場(chǎng)景，使用Dialog。如：沒有網(wǎng)絡(luò)，版本升級(jí)。

 

 

 

2、Action Sheets（操作列表） 和 選擇器

（1）Action Sheets用于選擇不同的“操作”，而不是選擇不同的“選項(xiàng)”。

（2）選擇不同的選項(xiàng)時(shí)（單選），使用選擇器。選擇器可以容納很多選項(xiàng)。

 

 

------------------------------------------------------

以上僅對(duì)工作中學(xué)習(xí)到的彈窗知識(shí)進(jìn)行總結(jié)，希望可以幫助到大家。
 

 

 

如果喜歡請(qǐng)點(diǎn)個(gè)贊吧。聽說點(diǎn)完贊的朋友今年有好運(yùn)哦~

↓