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