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