文章主要內(nèi)容

· 認(rèn)識(shí)彈窗

· 彈窗的分類(lèi)

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

· 彈窗設(shè)計(jì)走查表

1認(rèn)識(shí)彈窗

1.1定義

    彈窗作為頁(yè)面的重要控件，用以中斷用戶(hù)的當(dāng)前操作并對(duì)其進(jìn)行補(bǔ)充或?qū)ζ渥鞒龇答仭＜赐ㄟ^(guò)彈窗可阻斷危險(xiǎn)操作、反饋信息給用戶(hù)、需要用戶(hù)交互且引導(dǎo)用戶(hù)操作。

1.2優(yōu)點(diǎn)

    比頁(yè)面更輕量

    彈窗相對(duì)頁(yè)面來(lái)說(shuō)更加輕量，可以承載頁(yè)面部分信息或功能，尤其是頁(yè)面內(nèi)涉及多層級(jí)的任務(wù)操作，通過(guò)彈窗可以讓用戶(hù)不離開(kāi)當(dāng)前頁(yè)面的情況下完成任務(wù)操作。如下圖攜程訂單頁(yè)面，頁(yè)面承載了大量的信息和操作，如果讓用戶(hù)點(diǎn)擊后進(jìn)入新頁(yè)面則增加了費(fèi)力度，因此通過(guò)彈窗來(lái)承載部分功能操作，再如微信中通過(guò)彈窗來(lái)集合功能。

    一個(gè)絕佳的反饋方式

    交互行為需要反饋，用戶(hù)在頁(yè)面操作瀏覽過(guò)程中，不管是主觀(guān)操作還是系統(tǒng)都需要反饋來(lái)告知用戶(hù)，沒(méi)有反饋，交互行為便不完整。通過(guò)彈窗可以實(shí)現(xiàn)通知提醒、信息純滴、任務(wù)操作的功能。

1.3應(yīng)用場(chǎng)景

    彈窗種類(lèi)多樣決定其能夠應(yīng)用于多種場(chǎng)景，如頁(yè)面新手引導(dǎo)、選擇器、任務(wù)頁(yè)面、通知提醒、廣告運(yùn)營(yíng)等等。不同的場(chǎng)景決定了彈窗的種類(lèi)和交互方式。

2彈窗分類(lèi)

2.1模態(tài)彈窗

    模態(tài)彈窗是用戶(hù)可交互的，且需要用戶(hù)進(jìn)行回應(yīng)；模態(tài)彈窗在頁(yè)面中層級(jí)較高，容易吸引用戶(hù)；模態(tài)彈窗包括對(duì)對(duì)話(huà)框（Dialog）、警示框（Alter）、浮層（Popover/Popup）、操作欄（Actionbar）。

2.1.1對(duì)話(huà)框

    定義：屬于MD控件，用于提示用戶(hù)做一些決定，或者是完成某個(gè)任務(wù)時(shí)需要的一些提示信息，用戶(hù)可以進(jìn)行交互，并起著提示、決定的作用。

    場(chǎng)景：對(duì)話(huà)框主要可以分為提示類(lèi)和操作類(lèi)，具體包括系統(tǒng)提示、頁(yè)面提示、運(yùn)營(yíng)廣告、任務(wù)操作

    提示

    通過(guò)強(qiáng)干擾通知用戶(hù)設(shè)備相關(guān)問(wèn)題如備份、打開(kāi)通知等問(wèn)題，這些潛在問(wèn)題可能會(huì)對(duì)用戶(hù)造成一定負(fù)面的影響，因此必須通過(guò)對(duì)話(huà)框的形式讓用戶(hù)明確知道并進(jìn)行選擇。其次，現(xiàn)在各類(lèi)應(yīng)用中運(yùn)營(yíng)推廣位也都通過(guò)強(qiáng)關(guān)注的對(duì)話(huà)框來(lái)呈現(xiàn)，吸引用戶(hù)的注意，以此帶來(lái)轉(zhuǎn)化。

    操作

    操作類(lèi)在移動(dòng)端中主要出現(xiàn)在信息設(shè)置模塊，并只支持少量信息的填寫(xiě)，信息過(guò)多則頁(yè)面形式承載。但在web端尤其是后臺(tái)操作系統(tǒng)中，經(jīng)常出現(xiàn)操作性對(duì)話(huà)框。

2.1.2警示框

    定義：屬于iOS控件，與對(duì)話(huà)框類(lèi)似，主要應(yīng)用于警示提醒。警示框用于全局展示通知提醒信息，特別是在web端，用來(lái)承載較為復(fù)雜的通知內(nèi)容，警示框需要用戶(hù)進(jìn)行交互，帶有關(guān)閉操作，多為系統(tǒng)主動(dòng)推送。如電量提示、刪除操作等。如下圖所示：

圖片來(lái)源網(wǎng)絡(luò)

2.1.3浮層

    定義：指用戶(hù)點(diǎn)執(zhí)行某個(gè)操作后后浮出一個(gè)帶半透明遮罩的功能區(qū)域，用戶(hù)可進(jìn)行交互。可出現(xiàn)在頁(yè)面的任意區(qū)域。浮層類(lèi)似于下拉菜單，相比下拉菜單更加輕量，更容易吸引用戶(hù)的注意。通過(guò)浮層承載部分功能，無(wú)需離開(kāi)當(dāng)前頁(yè)面，且使得頁(yè)面更加簡(jiǎn)潔，不會(huì)造成用戶(hù)認(rèn)知負(fù)擔(dān)。浮層概括來(lái)說(shuō)可以當(dāng)作功能快捷入口、折疊菜單、引導(dǎo)浮層。

    功能入口

一個(gè)操作頁(yè)面有限，頁(yè)面無(wú)法全部展示各大功能，隱藏在其他頁(yè)面則太深。因此，可以通過(guò)浮層來(lái)作為各大功能的入口，即將功能入口集合在一個(gè)浮層中，用戶(hù)觸發(fā)后彈出浮層。這類(lèi)浮層由遮罩（可有可無(wú)）+氣泡+icon+文本按鈕構(gòu)成。

    折疊菜單

    屬于浮出層的衍生應(yīng)用，和上個(gè)場(chǎng)景一樣，節(jié)約屏幕空間，顯露出一部分，并將剩余信息折疊起來(lái)，不影響用戶(hù)理解功能，又解決了屏幕空間，若用戶(hù)有需求，即可展開(kāi)探索更多的信息，同樣也會(huì)用箭頭等指向出處。特別是購(gòu)物類(lèi)應(yīng)用中篩選操作，都通過(guò)下拉或側(cè)拉浮層來(lái)進(jìn)行篩選。

    功能引導(dǎo)

    主要應(yīng)用在頁(yè)面新手引導(dǎo)場(chǎng)景中，通過(guò)氣泡浮層進(jìn)行功能提示，降低用戶(hù)的理解成本。功能引導(dǎo)的浮層可以通過(guò)視覺(jué)化進(jìn)行設(shè)計(jì)，降低彈窗帶來(lái)的打斷用戶(hù)操作的負(fù)面影響。

2.1.4操作欄

    定義：操作欄與浮層功能類(lèi)似，一般出現(xiàn)在頁(yè)面底部，被設(shè)計(jì)用來(lái)向用戶(hù)展示多個(gè)功能按鈕供用戶(hù)選擇操作。點(diǎn)擊取消或空白處關(guān)閉操作欄。iOS和MD樣式上存在區(qū)別，如下圖：

圖片來(lái)源網(wǎng)絡(luò)

圖片來(lái)源網(wǎng)絡(luò)

2.2非模態(tài)彈窗

    非模態(tài)彈窗與模態(tài)相反，是一種輕量級(jí)的反饋提示，用戶(hù)可以不用作出反饋操作。目前各大應(yīng)用的安卓和iOS非模態(tài)彈窗基本可以復(fù)用，沒(méi)有過(guò)多差別。

2.2.1snackbars

    定義：屬于安卓控件，一種輕量級(jí)的反饋機(jī)制，常以小彈框的形式出現(xiàn)在頁(yè)面底部，可包含操作按鈕。一般情況，用戶(hù)點(diǎn)擊snackbar內(nèi)功能按鈕，執(zhí)行操作，彈窗消失，或一定時(shí)間內(nèi)自動(dòng)消失。

 圖片來(lái)源網(wǎng)絡(luò)

2.2.2toast和HUD

    定義：屬于安卓控件，一種信息提示框，以反饋提醒用戶(hù)。toast可出現(xiàn)在頁(yè)面的任意位置，伴隨這遮罩底層和文字提示構(gòu)成。toast一般設(shè)置為一定時(shí)間內(nèi)自動(dòng)消失（根據(jù)場(chǎng)景需要），或者用戶(hù)滑動(dòng)后消失。

圖片來(lái)源網(wǎng)絡(luò)

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

減少干擾，克制使用
    彈窗的使用會(huì)打斷用戶(hù)進(jìn)行當(dāng)前的操作，影響用戶(hù)的心流體驗(yàn)，因此盡量減少使用彈窗，避免用戶(hù)產(chǎn)生反感。

合適的彈窗
    彈窗有模態(tài)和非模態(tài)等類(lèi)型，不同類(lèi)型應(yīng)用在不同場(chǎng)景中，如弱提示不需要用戶(hù)做回應(yīng)的使用toast，2s自動(dòng)關(guān)閉

減少錯(cuò)誤
    當(dāng)用戶(hù)的操作行為會(huì)產(chǎn)生很高的犯錯(cuò)誤成本時(shí)需要利用彈窗進(jìn)行確認(rèn)，如刪除、下載等操作。

用戶(hù)可控性
    彈窗的出現(xiàn)必須是用戶(hù)能夠接受的場(chǎng)景中出現(xiàn)，且符合用戶(hù)預(yù)期。如【上傳圖片】按鈕，用戶(hù)點(diǎn)擊之前能夠預(yù)想點(diǎn)擊后會(huì)觸發(fā)新的操作行為，這個(gè)時(shí)候出彈窗用戶(hù)是能夠接受，且操作是流暢的。

使用用戶(hù)的語(yǔ)言（方式）
    彈窗的文案需要站在用戶(hù)的角度去設(shè)計(jì)，清晰明了的表述。特別是確認(rèn)取消彈窗，彈窗內(nèi)容描述需要指明操作，不可出現(xiàn)模棱兩可的說(shuō)明，且選項(xiàng)需要符合用戶(hù)當(dāng)下的操作場(chǎng)景，用戶(hù)能夠通過(guò)選項(xiàng)知道操作后的后果。如確定刪除？“是”與“否”不如“刪除”與“取消”

極簡(jiǎn)原則
    頁(yè)面中彈窗盡量減少出現(xiàn)的頻次；彈窗內(nèi)容（提示、選項(xiàng)）應(yīng)當(dāng)簡(jiǎn)化，多內(nèi)容適合頁(yè)面承載

4 彈窗的走查表

彈窗語(yǔ)意是否清晰明確？

彈窗文案用戶(hù)是否能快速理解？

操作彈窗結(jié)束后是否有反饋？

彈窗任務(wù)是否簡(jiǎn)潔？

彈窗種類(lèi)是否合適？

彈窗背景是否鎖定？

避免彈窗上再?gòu)棌棿?/p>

5 參考文章

文章內(nèi)容為個(gè)人經(jīng)驗(yàn)之上參考了多篇文章，在此表示感謝！

https://www.uisdc.com/popup-design-principles

https://www.uisdc.com/tencent-100-popup-box

http://www.woshipm.com/pd/1607094.html