彈窗在APP中無處不在， 這段時(shí)間剛好在整理彈窗組件這一塊，所以就想跟大家分享一下彈窗的一些設(shè)計(jì)思路。

模態(tài)彈窗/非模態(tài)彈窗

一般根據(jù)是否打斷用戶操作把彈窗分為：模態(tài)彈窗（重提示）和非模態(tài)彈窗（輕提示）。

▲ 模態(tài)彈窗

打斷用戶的操作行為，用戶必須對該彈窗進(jìn)行操作，否則不能進(jìn)行其他操作。

優(yōu)點(diǎn)：可以很好的獲取用戶的視覺焦點(diǎn)。

缺點(diǎn)：會打斷用戶當(dāng)前的操作流程。

常見類型：對話框Dialog/Alert、底部動作欄Actionbar、浮層Popover/Popup

▲ 非模態(tài)彈窗

不會影響用戶操作，通常都有時(shí)間限制，出現(xiàn)幾秒后自動消失。

常見類型：Toast/Hud、Snackbar

1、模態(tài)彈窗常見樣式

1.1 Dialog/Alert  對話框

對話框是常用的彈窗，它通常出現(xiàn)在頁面的中間，這類彈窗對用戶的干擾比較大，需要用戶主動觸發(fā)選擇才可以繼續(xù)當(dāng)前的操作。

一般只有1～3個(gè)按鈕，需要用戶進(jìn)行簡單的選擇。一般產(chǎn)品會把期待用戶點(diǎn)擊的按鈕會放在右邊并突出顯示。

常見類型舉例：

 1.1.1、信息選擇確定  

1)系統(tǒng)功能的授權(quán)

如下圖“百度地圖”是否允許訪問麥克風(fēng)、“網(wǎng)上廚房”是否允許訪問位置的彈窗，相信大家一定在許多APP中都見過，這就屬于系統(tǒng)自帶的授權(quán)彈窗。

2)版本更新

版本升級彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。如下圖所示：

3)消息通知

高德地圖與餓了么的消息提醒彈窗屬于使用后期APP為了推送消息，主動提示你開啟消息通知。

4)重要提示/信息二次確認(rèn)

同程汽車票購買彈窗屬于消息提示，告知用戶相關(guān)信息。百度網(wǎng)盤彈窗屬于信息確認(rèn)，詢問用戶選擇哪種方式下載。

1.1.2、運(yùn)營活動

這類彈窗通常是一些活動、廣告、領(lǐng)券優(yōu)惠等，主要是吸引用戶點(diǎn)擊參加活動，這類彈窗視覺上通常會設(shè)計(jì)的比較吸引人，造型多樣，根據(jù)運(yùn)營目的會突出領(lǐng)取、參與、查看等大按鈕，弱化關(guān)閉按鈕。如下圖所示：

1.1.3、信息-輸入選擇 

這類彈窗通常是一些比較簡單的信息選擇或者內(nèi)容填寫，通常只有確定和取消兩個(gè)按鈕。

如微博對于已關(guān)注人的分組及備注，操作簡單。設(shè)置備注時(shí)直接調(diào)出鍵盤即可輸入，方便快捷。

1.2Actionbar操作欄

Actionbar主要分為Action Views和Action Sheets，通常由底部彈出。

優(yōu)點(diǎn)：可以讓用戶清楚的感知當(dāng)前的操作，比跳轉(zhuǎn)到新頁面更加有安全感。

 1.2.1 Action Views操作視圖

這類彈窗通常占屏比較大，有全屏彈窗和半屏彈窗2中。 它一般從底部彈出，如下圖所示：

淘寶和京東的購買頁面彈窗都是比較典型的，屬于半屏彈窗，在各種電商產(chǎn)品中用的非常多。

百度網(wǎng)盤和閑魚發(fā)布閑置都屬于全屏彈窗，占滿整個(gè)屏幕，可操作空間更大。

1.2.2 Action Sheets 操作列表

操作列表相對于操作視圖更單一。主要以文字展示功能按鈕為主，重要的操作功能一般會用主題色或者紅色突出顯示，主要運(yùn)用在一些功能選擇、日?？丶葓鼍爸小Ｈ缦聢D所示：

1.3Popover/Popup 浮層

浮層是指用戶點(diǎn)擊某個(gè)功能后浮出一個(gè)臨時(shí)氣泡對其功能進(jìn)行補(bǔ)充，用戶需要點(diǎn)擊功能區(qū)域操作，或者點(diǎn)擊空白處取消才能進(jìn)入下一步操作。

1.3.1 指向浮層 

這類浮層一般伴隨有小三角指向，強(qiáng)調(diào)歸屬。氣泡里面的功能通常以單一的文字或文字+圖標(biāo)的結(jié)合形式來展示。如下圖所示：

支付寶和微信的頂部加號補(bǔ)充浮層，展示形式差不多，只是UI樣式不一樣，支付寶是白色氣泡黑色半透明遮罩，微信是深灰色氣泡。

再如下圖這種選中文字的彈出氣泡在復(fù)制文字時(shí)很常見 。

2、非模態(tài)彈窗常見樣式

2.1Toast/Hud 提示框

這種彈窗屬于一種輕提示，給予用戶及時(shí)反饋，讓用戶知道自己當(dāng)前所處的狀態(tài)。

2.1.1狀態(tài)提示

反饋用戶當(dāng)前操作的狀態(tài)，出現(xiàn)1到2秒后自動消失，在操作遇阻提示、操作成功反饋、正在操作狀態(tài)等場景中使用。如下圖所示：

2.2 Snackbar

Snackbar是Android中的一個(gè)控件。它一般會超時(shí)自動關(guān)閉或者在屏幕上滑動關(guān)閉，設(shè)置出現(xiàn)的時(shí)間會比Toast長，而且可以點(diǎn)擊按鈕進(jìn)行交互。如下圖所示：

京東的Snackbar提示用戶點(diǎn)擊箭頭查看喜歡的商品，為用戶推薦商品，它有一個(gè)關(guān)閉的按鈕。

酷狗音樂的Snackbar給用戶開通會員的快捷入口，它一直浮于頁面底部，沒有關(guān)閉按鈕。

同程用車的領(lǐng)券活動放在這里，吸引用戶點(diǎn)擊，是一種常用的營銷手段。

QQ的斷網(wǎng)提示類似通知條的樣式，會一種浮于頁面上方直到網(wǎng)絡(luò)恢復(fù)。

1、Alert的阻斷感大于Action Sheets，使用時(shí)根據(jù)產(chǎn)品重要程度決定使用什么樣式的彈窗。

2、常見彈窗出現(xiàn)的位置有上部、中部、下部。位置不同，重要程度不同。

中部：強(qiáng)度高、重要性高，如對話框彈窗、toast提示等。

上部：強(qiáng)度中等、重要性高于底部，重要消息tips提示。

底部：強(qiáng)度低、重要性低，如底部操作欄、Snackbar。

具體使用哪種還是要根據(jù)實(shí)際情況考慮。希望我的文章對大家有幫助，也不費(fèi)我花時(shí)間整理了，哈哈～

圖片素材來源于網(wǎng)絡(luò)和應(yīng)用截圖，僅用于學(xué)習(xí)交流。

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》UI彈窗設(shè)計(jì)總結(jié)篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)