起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識B端彈窗設計11大法則
我們每天都會主動或者被動的接受彈窗的存在，甚至有時候會忽視它的存在，感覺它就像一粒塵埃一樣渺小，不值得被關注，那么你知道這些問題的答案嗎？彈窗是什么？彈窗的來歷是什么？彈窗的種類是什么？彈窗的使用場景有哪些？彈窗的尺寸有哪些？使用彈窗的注意事項有哪些？彈窗的規范有哪些？以及眾多彈窗種類中他們的區別又有哪些？如果你知道的更加全面，歡迎大家留言區互動補充，如果知道的不全面，也沒關系，現在就來腦補一下也不是來不及嗎？
分享目錄
一、 彈窗的定義
二、 彈窗的由來
三、 彈窗的分類
四、 我眼中的彈窗分類
五、 模態彈窗和非模態彈窗的區別
六、 彈窗的尺寸
七、 彈窗的使用場景
八、 彈窗使用的注意事項
九、 動態彈窗
十、 彈窗樣式的多樣性
十一、彈窗中的按鈕文案
一、彈窗的定義
彈窗，通常指的是計算機軟件或網頁中的一種用戶界面元素，它以一種覆蓋在當前窗口上的方式出現，通常用于顯示通知、警告、提示信息或者要求用戶進行某些操作（如輸入信息、確認操作等），彈窗的設計和使用需要考慮到用戶體驗，以確保它們既有效又不會干擾用戶的工作流程。
二、彈窗的由來
彈窗是伊凡·佐克曼（Ethan Zuckerman）在1990年代在互聯網公司Tripod.com工作時發明的，最初發明彈窗的初衷是希望各品牌廣告與用戶網頁內容風格能夠吻合，他為彈射窗口寫了代碼，讓廣告在內部運營，而非直接插入頁面中，后來隨著時間的推移，彈窗的種類也越來越多，包括網頁彈窗、桌面彈窗、APP彈窗等。
三、彈窗分類
彈窗分類從廣義上來分，可以分為模態彈窗和非模態彈窗。
1. 模態彈窗
模態彈窗會打斷用戶的操作行為，強制用戶必須回應，否則不能進行其他操作；它是一種特殊的彈窗，它在用戶界面中提供了一種交互方式，要求用戶必須先與之交互（如填寫信息、做出選擇或確認操作）后才能繼續其他操作。模態彈窗通常會覆蓋在當前窗口或應用程序的上方，阻止用戶訪問后臺的內容，直到彈窗被正確關閉；模態彈框屬于一種重量性反饋，一般用于用戶進行重要的操作。
1.1 模態彈窗的具體種類
? Modal對話框（確認對話框的實例展示）
? Modal對話框（內容展示型的對話框）
這是我參與設計的一個后臺界面，用戶點擊對應的地名，就能彈出對應城市云電腦使用的一個情況。
? Modal對話框（表單編輯型的對話框）
這是我參與設計的一個后臺彈窗界面設計，該彈窗將基礎信息、網絡配置、高級配置用表格的形式來呈現，并且每塊信息支持修改編輯服務。
? Modal對話框（操作反饋型）
下面是用戶點擊登錄按鈕之后彈出的一個彈窗，如果想要繼續登錄，必須要通過輸入手機號和驗證碼才能成功登錄，他需要用戶有一個操作的反饋信息，才能繼續進行。
? Drawer抽屜彈窗（內容展示）
360瀏覽器這種彈窗就是模態抽屜彈窗，它是從左向右彈出的，并且彈出之后主頁面中的內容無法進行操作。
2. 非模態彈窗
非模態彈窗不會影響用戶的操作，用戶可以不予回應，用戶可以自由地在彈窗和應用程序的其他界面元素之間切換，執行其他任務。非模態彈框偏重信息提示，通常它有時間限制，出現一段時間之后，它會自動消失。
2.1 非模態彈窗的具體類別
? Tooltip文字提示彈窗
Tooltip文字提示包含文字的解釋彈窗，也包含按鈕的解釋彈窗。
? Drawer抽屜式彈窗
抽屜式彈窗一般從左右兩邊彈出, 它能承載比較多的信息，同時它的彈出并不會妨礙主頁面中功能項的操作。
? popconfirm氣泡確認框
當用戶在界面中進行了不當的操作時，界面中就會彈出一個popconfirm氣泡確認框，告知用戶具體的錯誤點。
? Notification通知提示框
Notification通知提示框是系統自動彈出的一種彈框，例如天翼云電腦專家下面的這個彈框，它是軟件啟動后，系統檢測到當前電腦有兩款應用存在兼容性問題，而彈出的一個溫馨提示，希望用戶能夠卸載，避免用戶電腦過載，或者干擾過多。
? Alert警告提示彈框
Alert警告提示彈框是當前出現了特別需要用戶注意的情況而彈出的彈框，通常彈窗中會配以具有告警色的紅色或者橙色圖標。
以下是我使用天翼云電腦管家的過程中彈出的一個告警彈窗，彈窗中提示網絡異常，并且配了一個紅色的告警圖標，警示效果比較明顯。
? Message 全局提示彈窗
Message 全局提示彈窗也就是我們常說的toast,它適用于輕量級的操作反饋，不會打斷用戶操作，一般懸浮出現在導航下方，會自動消失，它是最輕量級的反饋組件。
下面是藍湖中的一個全局提示彈窗，每當鏈接復制成功時，在導航下方都會出現一個復制成功的綠色彈窗，幾秒后自動消失，不會打擾用戶操作，給了用戶及時的反饋。
四、我眼中的彈窗分類
1. 主動觸發式彈窗
主動觸發式彈窗，就是用戶主動操作點擊之后產生的一些彈窗，比方說我們的抽屜彈窗、各種文字、圖標的懸浮彈窗等就是用戶主動操作后彈出的彈窗。
360AI下面的這個彈窗，是用戶通過點擊右邊那個懸浮的618促銷卡片出來的彈窗，它是用戶主動的一種行為，當彈窗廣告是用戶主動觸發時，那么此時的彈窗也就不造成什么干擾了，這個設計的也是非常巧妙，促銷的的入口以一個很小的懸浮片長時間放置在右邊，用戶需要了可以點擊查看詳情，也可以隨時關閉，是一個很好的彈窗設計切入點。
2. 被動觸發式彈窗
被動觸發式彈窗就是不以用戶意志為轉移而出現的彈窗，比方說我們的氣泡彈窗就不是我們主動操作后彈出的彈窗，而是我們在頁面中進行了錯誤操作后系統自動彈出的彈窗，這種彈窗一般駐留的時間不會很久，自己會自動消失。
百度網盤一登錄進來，就出現了超級會員的活動促銷彈窗，它不是用戶主動點擊后出現的彈窗，它出來幾秒鐘后就自動消失了，既起到了促銷的作用，同時也沒對用戶產生太多的打擾，是彈窗運用恰到好處的范例。
五、模態彈窗與非模態彈窗的區別
用一張圖整理了模態彈窗和非模態彈窗各自的一個特點，兩種彈窗它們各有優勢，在產品設計中它們起到了相互補充相互促進的作用。
六、彈窗的尺寸
彈窗的常見尺寸并沒有一個統一的標準，因為它們通常根據應用場景、內容需求、用戶界面設計以及品牌風格等因素來確定，在設計彈窗時，設計師應考慮彈窗內容的可讀性、易用性以及與整體界面的協調性。
下面這些彈窗的大小不一，甚至同一個產品中的彈窗也沒有做到完全一樣，他們的大小都是基于內容需求和應用場景來確定的。
1. 常見的彈窗設計考慮因素
1.1 內容需求：
彈窗的尺寸應該能夠容納所需的全部內容，包括文本、圖片、表單元素、按鈕等。
1.2 用戶體驗：
彈窗不宜過大或過小，以免影響用戶體驗。過大的彈窗可能會顯得過于突兀，而太小則可能導致內容顯示不完整或難以閱讀。
這個是項目中做的一個超級大彈窗，內容超級多，但是排出來因為太大，看起來很不協調，然后優化了下內容布局，把“已添加鏈路”放到另一個標題按鈕下，讓用戶切換查看，既解決了大小不協調問題，也解決了內容呈現的問題。
1.3 屏幕大小
彈窗的設計應考慮目標用戶的屏幕大小和分辨率。在較小的屏幕上，可能需要調整彈窗的尺寸以適應屏幕空間。
通常一個看著舒適的大彈窗尺寸，寬度是在800px左右，高度是在700px左右，在內容能容放的下的情況下，我們盡量選用靠近這種尺寸的彈窗尺寸。當然，我們平時還會遇見那種很小的小彈窗，內容比較少，可能高度只有60px左右，寬度只有400px左右。
總之，彈窗的尺寸是很多樣的，都是根據內容和業務需求來的。
1.4 可訪問性
彈窗的設計應考慮到可訪問性，確保所有用戶都能輕松地與之交互，包括那些有視覺障礙的用戶。
1.5 測試和反饋
通過用戶測試和反饋來確定彈窗的尺寸是否合適，以及是否需要進行調整。
1.6 響應式設計
在響應式設計中，彈窗的尺寸可能會根據設備的屏幕尺寸動態調整?，F代網頁設計中經常使用CSS媒體查詢（Media Queries）來實現響應式彈窗設計，使其能夠適應不同的屏幕尺寸。
2. 前端如何將彈窗適配不同的電腦屏幕？
市面上有這么多的屏幕分辨率，前端平時是如何兼顧的，設計師需不需要對每一個尺寸的電腦單獨設計一個與之匹配的彈窗設計，這個問題，我特意問了我的前端同事。
首先，設計師是不需要設計多種尺寸的彈窗，只需要把需求給到的內容合理的布局在彈窗中，設計一個尺寸即可，前端會參照彈窗設計的比例來適配各種電腦屏幕，會進行相對應的一個百分比的縮放來達到適配的效果。
七、彈框的使用場景
1. 任務
在用戶需操作相對復雜的擴展功能時常用“模態彈窗”，它承載當前頁面的擴展內容，所以常用到“對話框”、“抽屜”兩種類型，他們除了有標題、按鈕之外通常還會有一些任務表單，它是給予當前主頁面之上的一種目標任務，承載了用戶明確目標的擴展應用。
TreeMind樹圖在導出文件的時候，彈出的彈窗是對主頁面導出按鈕一個更為詳盡的詮釋，彈窗中有很多導出格式的選擇，并且對每種格式優缺點做了注解，它承擔著頁面的擴展內容。
2. 反饋
用戶輸入信息或操作用戶界面時，系統會給出相應的提示，一般屬于“非模態彈窗”類型，設計師在設計界面時常常用到“全局提示”、“通知提示”、“氣泡確認框”三種類型作為反饋消息，但如果是重要操作確認時還是需要使用模態彈窗進行確認。
打開藍湖文件，一進去就會出現一個非模態彈窗，提示用戶將瀏覽器縮放至100%以獲得最佳的體驗效果，給了用戶及時的反饋。
3. 信息展示
一般由用戶主動觸發的，包含圖文信息，少數會有簡單的操作按鈕，如“確認”、“知道了”等等。比如操作說明和引導、歡迎界面、操作說明、幫助、功能引導、取數說明、查看詳情、預覽或查看大圖等，這類信息往往與當前頁面緊密相關，并不適合用跳轉頁面，因為這樣無疑會加深頁面層級，增加用戶的認知負擔。
點擊一刻相冊中的AI修圖，會彈出一刻秒傳的概念以及具體的操作說明和步驟。
八、彈窗的使用注意事項
1. 定向推送
定向推送就像是一個智能的推銷員，它會根據目標客戶群體和一些規則來決定向誰推銷什么產品。定向推送是一項需要精心設計和開發的技術，需要充分考慮用戶的需求和喜好，才能發揮其應有的作用。
我參與設計的天翼云電腦管家，對于沒有安裝最新版本的用戶，登錄進去會有版本更新的彈窗提示，如果用戶已經安裝了最新版本，則彈窗不會出現。
2. 時效控制
引導提示通常都是短期的，就像限時促銷一樣，過了一定時間就需要更新。在以前，各業務線都是靠設計或產品經理人工記憶，來決定什么時候上線和下線這些引導提示，但是人的記憶是有限的，難免會有遺漏。為了解決這個問題，我們需要建立一套更加科學、自動化的時效控制機制，比如通過系統自動記錄引導提示的上線和下線時間，或者設置提醒功能，來幫助產品經理及時完成這些操作。
百度翻譯在彈窗的時效控制上就做的很好，以下是最近幾個月的一個彈窗廣告，每次都做了及時的下線和更新，避免了彈窗的冗余，提升了用戶體驗。
九、動態彈窗
在彈窗中，我們還會遇見一種彈窗-動態彈窗，這種彈窗可以增加轉化的效率，他可以動態的顯示時間，以及用戶非常關心的權益，因為很多時候用戶是不會主動去獲取這些信息，這種跟用戶利益相關的權益，用動態彈窗的方式展示，可以增加用戶更多的注意，給需要的用戶很好的提示。
360AI在618大促的時候，當用戶一進入首頁，就會有一個動態彈窗的彈出，給用戶展示了618期間，用戶可以享受的優惠權益，同時他以一種倒計時的方式，給用戶制造了當前優惠時間很有限的氛圍，在一定程度上它會增加需要用戶的一個轉化率。
十、彈窗樣式的多樣性
經過大量的體驗，彈窗的設計樣式可謂是百花齊放，有很多的樣式，不限于我們日常看的那種一個方形框，彈窗也可以這么多彩，也有它絢麗多彩的一面。
十一、彈窗中的按鈕文案
相信大家在設計時，也會遇到這些困擾，彈窗按鈕“確定”、“確認”選哪個，該用哪種文案才能準確地傳達操作意圖。
通過深入研究彈窗按鈕的文案，并對這些文案進行了細致的分類和梳理?，F在，將這份應用指南分享給大家。
總結
小小彈窗，它也有大作為大學問，種類、功能是如此之多，規范也是如此有考究，當我們用一顆敬畏的心去研究每一個細小的事物時，發現每一個事物都是不容小覷，它們的承載的責任是如此之多，不容輕視，今天的分享就到這里，希望對你有啟發。
本文觀點都為個人理解和總結，不足之處也歡迎大家留言區多多點評指正，大家共同進步！
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖由作者提供
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論，等你發揮！
