
彈窗在 APP 中無處不在,這段時間剛好在整理彈窗組件相關內容,所以想和大家分享一下彈窗的設計思路。
通常根據是否打斷用戶操作,可將彈窗分為模態彈窗(重提示)和非模態彈窗(輕提示)。

會打斷用戶的操作行為,用戶必須對該彈窗進行操作,否則無法進行其他操作。
- 優點:能很好地獲取用戶的視覺焦點。
- 缺點:會打斷用戶當前的操作流程。
- 常見類型:對話框(Dialog/Alert)、底部動作欄(Actionbar)、浮層(Popover/Popup)。
不會影響用戶操作,通常有時間限制,出現幾秒后會自動消失。
- 常見類型:提示框(Toast/Hud)、 Snackbar。

這是常用的彈窗,通常出現在頁面中間,對用戶干擾較大,需要用戶主動觸發選擇才能繼續當前操作。一般只有 1-3 個按鈕,供用戶進行簡單選擇,產品通常會把希望用戶點擊的按鈕放在右邊并突出顯示。
- 系統功能的授權:如 “百度地圖” 申請訪問麥克風、“網上廚房” 申請訪問位置的彈窗,這類屬于系統自帶的授權彈窗,在許多 APP 中都較為常見。
- 版本更新:版本升級彈窗通常會弱化 “暫不升級” 按鈕,突出 “升級” 主按鈕,告知用戶新版本的變化和優勢。
- 消息通知:像高德地圖與餓了么的消息提醒彈窗,屬于 APP 使用后期為推送消息,主動提示用戶開啟消息通知,以便用戶及時獲取重要信息。
- 重要提示 / 信息二次確認:同程汽車票購買彈窗屬于消息提示,告知用戶車程時長等相關信息;百度網盤彈窗屬于信息確認,詢問用戶選擇何種方式下載文件。
這類彈窗通常是活動、廣告、領券優惠等內容,主要目的是吸引用戶點擊參加活動。在視覺設計上通常比較吸引人,造型多樣,會根據運營目的突出 “領取”“參與”“查看” 等按鈕,弱化關閉按鈕。
這類彈窗一般用于比較簡單的信息選擇或內容填寫,通常只有 “確定” 和 “取消” 兩個按鈕。如微博中對已關注人的分組及備注,操作簡單,設置備注時直接調出鍵盤即可輸入,方便快捷。

主要分為 Action Views 和 Action Sheets,通常從底部彈出。
- 優點:能讓用戶清楚感知當前操作,比跳轉到新頁面更有安全感。
這類彈窗通常占屏較大,有全屏彈窗和半屏彈窗兩種,一般從底部彈出。
- 半屏彈窗:淘寶和京東的購買頁面彈窗是比較典型的例子,在各種電商產品中應用廣泛,方便用戶選擇商品規格、數量等。
- 全屏彈窗:百度網盤和閑魚發布閑置的彈窗屬于全屏彈窗,占滿整個屏幕,可操作空間更大,能滿足更復雜的操作需求。
操作列表相對于操作視圖更單一,主要以文字展示功能按鈕為主,重要的操作功能一般會用主題色或者紅色突出顯示,主要應用于一些功能選擇、日??丶葓鼍啊?/div>
浮層是指用戶點擊某個功能后浮出的臨時氣泡,對該功能進行補充說明,用戶需要點擊功能區域操作,或者點擊空白處取消才能進入下一步操作。
這類浮層一般帶有小三角指向,強調歸屬,氣泡里的功能通常以單一文字或文字 + 圖標的形式展示。如支付寶和微信的頂部加號補充浮層,展示形式相近但 UI 樣式不同;還有選中文字時彈出的氣泡,在復制文字時很常見。
屬于輕提示,能給予用戶及時反饋,讓用戶了解自己當前所處的狀態,出現 1 到 2 秒后自動消失,適用于操作遇阻提示、操作成功反饋、正在操作狀態等場景。
這是 Android 中的一個控件,會超時自動關閉或者在屏幕上滑動關閉,出現時間比 Toast 長,且可以點擊按鈕進行交互。如京東的 Snackbar 提示用戶點擊箭頭查看喜歡的商品,為用戶推薦商品,并有關閉按鈕;酷狗音樂的 Snackbar 給用戶提供開通會員的快捷入口,一直浮于頁面底部,沒有關閉按鈕;同程用車的領券活動彈窗也屬于此類,是常用的營銷手段;QQ 的斷網提示類似通知條樣式,會浮于頁面上方直到網絡恢復。

- Alert 的阻斷感大于 Action Sheets,使用時需根據產品重要程度決定采用哪種樣式的彈窗。
- 常見彈窗出現的位置有上部、中部、下部,位置不同,重要程度也不同。
- 中部:強度高、重要性高,如對話框彈窗、toast 提示等。
- 上部:強度中等、重要性高于底部,如重要消息 tips 提示。
- 底部:強度低、重要性低,如底部操作欄、Snackbar。
具體使用哪種彈窗,還需根據實際情況綜合考慮。希望這篇文章能對大家有所幫助。