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