<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          UI 彈窗設計總結篇

          2025-8-4    濤濤 系統UI設計文章及欣賞

          image.png

          彈窗在 APP 中無處不在,這段時間剛好在整理彈窗組件相關內容,所以想和大家分享一下彈窗的設計思路。

          一、彈窗分類

          通常根據是否打斷用戶操作,可將彈窗分為模態彈窗(重提示)和非模態彈窗(輕提示)。

          image.png

          1. 模態彈窗

          會打斷用戶的操作行為,用戶必須對該彈窗進行操作,否則無法進行其他操作。

           

          • 優點:能很好地獲取用戶的視覺焦點。
          • 缺點:會打斷用戶當前的操作流程。
          • 常見類型:對話框(Dialog/Alert)、底部動作欄(Actionbar)、浮層(Popover/Popup)。

          2. 非模態彈窗

          不會影響用戶操作,通常有時間限制,出現幾秒后會自動消失。

           

          • 常見類型:提示框(Toast/Hud)、 Snackbar。

           

          分類 具體類型
          模態彈窗 對話框(Alert(iOS)、Dialog(安卓))、操作欄(Action Views、Action Sheets)、浮層(Popover(iOS)、Popup(安卓))
          非模態彈窗 輕提示(Hud(iOS)、Toast(安卓))、中度提示(Snackbar)

          image.png

          二、模態彈窗常見樣式

          1. Dialog/Alert 對話框

          這是常用的彈窗,通常出現在頁面中間,對用戶干擾較大,需要用戶主動觸發選擇才能繼續當前操作。一般只有 1-3 個按鈕,供用戶進行簡單選擇,產品通常會把希望用戶點擊的按鈕放在右邊并突出顯示。

          (1)信息選擇確定

          • 系統功能的授權:如 “百度地圖” 申請訪問麥克風、“網上廚房” 申請訪問位置的彈窗,這類屬于系統自帶的授權彈窗,在許多 APP 中都較為常見。
          • 版本更新:版本升級彈窗通常會弱化 “暫不升級” 按鈕,突出 “升級” 主按鈕,告知用戶新版本的變化和優勢。
          • 消息通知:像高德地圖與餓了么的消息提醒彈窗,屬于 APP 使用后期為推送消息,主動提示用戶開啟消息通知,以便用戶及時獲取重要信息。
          • 重要提示 / 信息二次確認:同程汽車票購買彈窗屬于消息提示,告知用戶車程時長等相關信息;百度網盤彈窗屬于信息確認,詢問用戶選擇何種方式下載文件。

          (2)運營活動

          這類彈窗通常是活動、廣告、領券優惠等內容,主要目的是吸引用戶點擊參加活動。在視覺設計上通常比較吸引人,造型多樣,會根據運營目的突出 “領取”“參與”“查看” 等按鈕,弱化關閉按鈕。

          (3)信息 - 輸入選擇

          這類彈窗一般用于比較簡單的信息選擇或內容填寫,通常只有 “確定” 和 “取消” 兩個按鈕。如微博中對已關注人的分組及備注,操作簡單,設置備注時直接調出鍵盤即可輸入,方便快捷。

          2. Actionbar 操作欄

          image.png

          主要分為 Action Views 和 Action Sheets,通常從底部彈出。

           

          • 優點:能讓用戶清楚感知當前操作,比跳轉到新頁面更有安全感。

          (1)Action Views 操作視圖

          這類彈窗通常占屏較大,有全屏彈窗和半屏彈窗兩種,一般從底部彈出。

           

          • 半屏彈窗:淘寶和京東的購買頁面彈窗是比較典型的例子,在各種電商產品中應用廣泛,方便用戶選擇商品規格、數量等。
          • 全屏彈窗:百度網盤和閑魚發布閑置的彈窗屬于全屏彈窗,占滿整個屏幕,可操作空間更大,能滿足更復雜的操作需求。

          (2)Action Sheets 操作列表

          操作列表相對于操作視圖更單一,主要以文字展示功能按鈕為主,重要的操作功能一般會用主題色或者紅色突出顯示,主要應用于一些功能選擇、日??丶葓鼍啊?/div>

          3. Popover/Popup 浮層

          浮層是指用戶點擊某個功能后浮出的臨時氣泡,對該功能進行補充說明,用戶需要點擊功能區域操作,或者點擊空白處取消才能進入下一步操作。

          (1)指向浮層

          這類浮層一般帶有小三角指向,強調歸屬,氣泡里的功能通常以單一文字或文字 + 圖標的形式展示。如支付寶和微信的頂部加號補充浮層,展示形式相近但 UI 樣式不同;還有選中文字時彈出的氣泡,在復制文字時很常見。

          三、非模態彈窗常見樣式

          1. Toast/Hud 提示框

          屬于輕提示,能給予用戶及時反饋,讓用戶了解自己當前所處的狀態,出現 1 到 2 秒后自動消失,適用于操作遇阻提示、操作成功反饋、正在操作狀態等場景。

          2. Snackbar

          這是 Android 中的一個控件,會超時自動關閉或者在屏幕上滑動關閉,出現時間比 Toast 長,且可以點擊按鈕進行交互。如京東的 Snackbar 提示用戶點擊箭頭查看喜歡的商品,為用戶推薦商品,并有關閉按鈕;酷狗音樂的 Snackbar 給用戶提供開通會員的快捷入口,一直浮于頁面底部,沒有關閉按鈕;同程用車的領券活動彈窗也屬于此類,是常用的營銷手段;QQ 的斷網提示類似通知條樣式,會浮于頁面上方直到網絡恢復。

          image.png

          四、總結思考

          1. Alert 的阻斷感大于 Action Sheets,使用時需根據產品重要程度決定采用哪種樣式的彈窗。
          2. 常見彈窗出現的位置有上部、中部、下部,位置不同,重要程度也不同。
            • 中部:強度高、重要性高,如對話框彈窗、toast 提示等。
            • 上部:強度中等、重要性高于底部,如重要消息 tips 提示。
            • 底部:強度低、重要性低,如底部操作欄、Snackbar。

           

          具體使用哪種彈窗,還需根據實際情況綜合考慮。希望這篇文章能對大家有所幫助。
           

          蘭亭妙微(藍藍設計)www.syprn.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

           

          image.png

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合