彈窗在 APP 中無(wú)處不在，這段時(shí)間剛好在整理彈窗組件相關(guān)內(nèi)容，所以想和大家分享一下彈窗的設(shè)計(jì)思路。
通常根據(jù)是否打斷用戶(hù)操作，可將彈窗分為模態(tài)彈窗（重提示）和非模態(tài)彈窗（輕提示）。
會(huì)打斷用戶(hù)的操作行為，用戶(hù)必須對(duì)該彈窗進(jìn)行操作，否則無(wú)法進(jìn)行其他操作。
- 優(yōu)點(diǎn)：能很好地獲取用戶(hù)的視覺(jué)焦點(diǎn)。
- 缺點(diǎn)：會(huì)打斷用戶(hù)當(dāng)前的操作流程。
- 常見(jiàn)類(lèi)型：對(duì)話(huà)框（Dialog/Alert）、底部動(dòng)作欄（Actionbar）、浮層（Popover/Popup）。
不會(huì)影響用戶(hù)操作，通常有時(shí)間限制，出現(xiàn)幾秒后會(huì)自動(dòng)消失。
- 常見(jiàn)類(lèi)型：提示框（Toast/Hud）、 Snackbar。
這是常用的彈窗，通常出現(xiàn)在頁(yè)面中間，對(duì)用戶(hù)干擾較大，需要用戶(hù)主動(dòng)觸發(fā)選擇才能繼續(xù)當(dāng)前操作。一般只有 1-3 個(gè)按鈕，供用戶(hù)進(jìn)行簡(jiǎn)單選擇，產(chǎn)品通常會(huì)把希望用戶(hù)點(diǎn)擊的按鈕放在右邊并突出顯示。
- 系統(tǒng)功能的授權(quán)：如 “百度地圖” 申請(qǐng)?jiān)L問(wèn)麥克風(fēng)、“網(wǎng)上廚房” 申請(qǐng)?jiān)L問(wèn)位置的彈窗，這類(lèi)屬于系統(tǒng)自帶的授權(quán)彈窗，在許多 APP 中都較為常見(jiàn)。
- 版本更新：版本升級(jí)彈窗通常會(huì)弱化 “暫不升級(jí)” 按鈕，突出 “升級(jí)” 主按鈕，告知用戶(hù)新版本的變化和優(yōu)勢(shì)。
- 消息通知：像高德地圖與餓了么的消息提醒彈窗，屬于 APP 使用后期為推送消息，主動(dòng)提示用戶(hù)開(kāi)啟消息通知，以便用戶(hù)及時(shí)獲取重要信息。
- 重要提示 / 信息二次確認(rèn)：同程汽車(chē)票購(gòu)買(mǎi)彈窗屬于消息提示，告知用戶(hù)車(chē)程時(shí)長(zhǎng)等相關(guān)信息；百度網(wǎng)盤(pán)彈窗屬于信息確認(rèn)，詢(xún)問(wèn)用戶(hù)選擇何種方式下載文件。
這類(lèi)彈窗通常是活動(dòng)、廣告、領(lǐng)券優(yōu)惠等內(nèi)容，主要目的是吸引用戶(hù)點(diǎn)擊參加活動(dòng)。在視覺(jué)設(shè)計(jì)上通常比較吸引人，造型多樣，會(huì)根據(jù)運(yùn)營(yíng)目的突出 “領(lǐng)取”“參與”“查看” 等按鈕，弱化關(guān)閉按鈕。
這類(lèi)彈窗一般用于比較簡(jiǎn)單的信息選擇或內(nèi)容填寫(xiě)，通常只有 “確定” 和 “取消” 兩個(gè)按鈕。如微博中對(duì)已關(guān)注人的分組及備注，操作簡(jiǎn)單，設(shè)置備注時(shí)直接調(diào)出鍵盤(pán)即可輸入，方便快捷。
主要分為 Action Views 和 Action Sheets，通常從底部彈出。
- 優(yōu)點(diǎn)：能讓用戶(hù)清楚感知當(dāng)前操作，比跳轉(zhuǎn)到新頁(yè)面更有安全感。
這類(lèi)彈窗通常占屏較大，有全屏彈窗和半屏彈窗兩種，一般從底部彈出。
- 半屏彈窗：淘寶和京東的購(gòu)買(mǎi)頁(yè)面彈窗是比較典型的例子，在各種電商產(chǎn)品中應(yīng)用廣泛，方便用戶(hù)選擇商品規(guī)格、數(shù)量等。
- 全屏彈窗：百度網(wǎng)盤(pán)和閑魚(yú)發(fā)布閑置的彈窗屬于全屏彈窗，占滿(mǎn)整個(gè)屏幕，可操作空間更大，能滿(mǎn)足更復(fù)雜的操作需求。
操作列表相對(duì)于操作視圖更單一，主要以文字展示功能按鈕為主，重要的操作功能一般會(huì)用主題色或者紅色突出顯示，主要應(yīng)用于一些功能選擇、日常控件等場(chǎng)景。
浮層是指用戶(hù)點(diǎn)擊某個(gè)功能后浮出的臨時(shí)氣泡，對(duì)該功能進(jìn)行補(bǔ)充說(shuō)明，用戶(hù)需要點(diǎn)擊功能區(qū)域操作，或者點(diǎn)擊空白處取消才能進(jìn)入下一步操作。
這類(lèi)浮層一般帶有小三角指向，強(qiáng)調(diào)歸屬，氣泡里的功能通常以單一文字或文字 + 圖標(biāo)的形式展示。如支付寶和微信的頂部加號(hào)補(bǔ)充浮層，展示形式相近但 UI 樣式不同；還有選中文字時(shí)彈出的氣泡，在復(fù)制文字時(shí)很常見(jiàn)。
屬于輕提示，能給予用戶(hù)及時(shí)反饋，讓用戶(hù)了解自己當(dāng)前所處的狀態(tài)，出現(xiàn) 1 到 2 秒后自動(dòng)消失，適用于操作遇阻提示、操作成功反饋、正在操作狀態(tài)等場(chǎng)景。
這是 Android 中的一個(gè)控件，會(huì)超時(shí)自動(dòng)關(guān)閉或者在屏幕上滑動(dòng)關(guān)閉，出現(xiàn)時(shí)間比 Toast 長(zhǎng)，且可以點(diǎn)擊按鈕進(jìn)行交互。如京東的 Snackbar 提示用戶(hù)點(diǎn)擊箭頭查看喜歡的商品，為用戶(hù)推薦商品，并有關(guān)閉按鈕；酷狗音樂(lè)的 Snackbar 給用戶(hù)提供開(kāi)通會(huì)員的快捷入口，一直浮于頁(yè)面底部，沒(méi)有關(guān)閉按鈕；同程用車(chē)的領(lǐng)券活動(dòng)彈窗也屬于此類(lèi)，是常用的營(yíng)銷(xiāo)手段；QQ 的斷網(wǎng)提示類(lèi)似通知條樣式，會(huì)浮于頁(yè)面上方直到網(wǎng)絡(luò)恢復(fù)。
- Alert 的阻斷感大于 Action Sheets，使用時(shí)需根據(jù)產(chǎn)品重要程度決定采用哪種樣式的彈窗。
- 常見(jiàn)彈窗出現(xiàn)的位置有上部、中部、下部，位置不同，重要程度也不同。
- 中部：強(qiáng)度高、重要性高，如對(duì)話(huà)框彈窗、toast 提示等。
- 上部：強(qiáng)度中等、重要性高于底部，如重要消息 tips 提示。
- 底部：強(qiáng)度低、重要性低，如底部操作欄、Snackbar。
具體使用哪種彈窗，還需根據(jù)實(shí)際情況綜合考慮。希望這篇文章能對(duì)大家有所幫助。
