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