我們每天都會(huì)主動(dòng)或者被動(dòng)的接受彈窗的存在，甚至有時(shí)候會(huì)忽視它的存在，感覺(jué)它就像一粒塵埃一樣渺小，不值得被關(guān)注，那么你知道這些問(wèn)題的答案嗎？彈窗是什么？彈窗的來(lái)歷是什么？彈窗的種類(lèi)是什么？彈窗的使用場(chǎng)景有哪些？彈窗的尺寸有哪些？使用彈窗的注意事項(xiàng)有哪些？彈窗的規(guī)范有哪些？以及眾多彈窗種類(lèi)中他們的區(qū)別又有哪些？如果你知道的更加全面，歡迎大家留言區(qū)互動(dòng)補(bǔ)充，如果知道的不全面，也沒(méi)關(guān)系，現(xiàn)在就來(lái)腦補(bǔ)一下也不是來(lái)不及嗎？

分享目錄

一、 彈窗的定義

二、 彈窗的由來(lái)

三、 彈窗的分類(lèi)

四、 我眼中的彈窗分類(lèi)

五、 模態(tài)彈窗和非模態(tài)彈窗的區(qū)別

六、 彈窗的尺寸

七、 彈窗的使用場(chǎng)景

八、 彈窗使用的注意事項(xiàng)

九、 動(dòng)態(tài)彈窗

十、 彈窗樣式的多樣性

十一、彈窗中的按鈕文案

一、彈窗的定義

彈窗，通常指的是計(jì)算機(jī)軟件或網(wǎng)頁(yè)中的一種用戶(hù)界面元素，它以一種覆蓋在當(dāng)前窗口上的方式出現(xiàn)，通常用于顯示通知、警告、提示信息或者要求用戶(hù)進(jìn)行某些操作（如輸入信息、確認(rèn)操作等），彈窗的設(shè)計(jì)和使用需要考慮到用戶(hù)體驗(yàn)，以確保它們既有效又不會(huì)干擾用戶(hù)的工作流程。

二、彈窗的由來(lái)

彈窗是伊凡·佐克曼（Ethan Zuckerman）在1990年代在互聯(lián)網(wǎng)公司Tripod.com工作時(shí)發(fā)明的，最初發(fā)明彈窗的初衷是希望各品牌廣告與用戶(hù)網(wǎng)頁(yè)內(nèi)容風(fēng)格能夠吻合，他為彈射窗口寫(xiě)了代碼，讓廣告在內(nèi)部運(yùn)營(yíng)，而非直接插入頁(yè)面中，后來(lái)隨著時(shí)間的推移，彈窗的種類(lèi)也越來(lái)越多，包括網(wǎng)頁(yè)彈窗、桌面彈窗、APP彈窗等。

三、彈窗分類(lèi)

彈窗分類(lèi)從廣義上來(lái)分，可以分為模態(tài)彈窗和非模態(tài)彈窗。

1. 模態(tài)彈窗

模態(tài)彈窗會(huì)打斷用戶(hù)的操作行為，強(qiáng)制用戶(hù)必須回應(yīng)，否則不能進(jìn)行其他操作；它是一種特殊的彈窗，它在用戶(hù)界面中提供了一種交互方式，要求用戶(hù)必須先與之交互（如填寫(xiě)信息、做出選擇或確認(rèn)操作）后才能繼續(xù)其他操作。模態(tài)彈窗通常會(huì)覆蓋在當(dāng)前窗口或應(yīng)用程序的上方，阻止用戶(hù)訪問(wèn)后臺(tái)的內(nèi)容，直到彈窗被正確關(guān)閉；模態(tài)彈框?qū)儆谝环N重量性反饋，一般用于用戶(hù)進(jìn)行重要的操作。

1.1 模態(tài)彈窗的具體種類(lèi)

? Modal對(duì)話框（確認(rèn)對(duì)話框的實(shí)例展示）

? Modal對(duì)話框（內(nèi)容展示型的對(duì)話框）

這是我參與設(shè)計(jì)的一個(gè)后臺(tái)界面，用戶(hù)點(diǎn)擊對(duì)應(yīng)的地名，就能彈出對(duì)應(yīng)城市云電腦使用的一個(gè)情況。

? Modal對(duì)話框（表單編輯型的對(duì)話框）

這是我參與設(shè)計(jì)的一個(gè)后臺(tái)彈窗界面設(shè)計(jì)，該彈窗將基礎(chǔ)信息、網(wǎng)絡(luò)配置、高級(jí)配置用表格的形式來(lái)呈現(xiàn)，并且每塊信息支持修改編輯服務(wù)。

? Modal對(duì)話框（操作反饋型）

下面是用戶(hù)點(diǎn)擊登錄按鈕之后彈出的一個(gè)彈窗，如果想要繼續(xù)登錄，必須要通過(guò)輸入手機(jī)號(hào)和驗(yàn)證碼才能成功登錄，他需要用戶(hù)有一個(gè)操作的反饋信息，才能繼續(xù)進(jìn)行。

? Drawer抽屜彈窗（內(nèi)容展示）

360瀏覽器這種彈窗就是模態(tài)抽屜彈窗，它是從左向右彈出的，并且彈出之后主頁(yè)面中的內(nèi)容無(wú)法進(jìn)行操作。

2. 非模態(tài)彈窗

非模態(tài)彈窗不會(huì)影響用戶(hù)的操作，用戶(hù)可以不予回應(yīng)，用戶(hù)可以自由地在彈窗和應(yīng)用程序的其他界面元素之間切換，執(zhí)行其他任務(wù)。非模態(tài)彈框偏重信息提示，通常它有時(shí)間限制，出現(xiàn)一段時(shí)間之后，它會(huì)自動(dòng)消失。

2.1 非模態(tài)彈窗的具體類(lèi)別

? Tooltip文字提示彈窗

Tooltip文字提示包含文字的解釋彈窗，也包含按鈕的解釋彈窗。

? Drawer抽屜式彈窗

抽屜式彈窗一般從左右兩邊彈出, 它能承載比較多的信息，同時(shí)它的彈出并不會(huì)妨礙主頁(yè)面中功能項(xiàng)的操作。

? popconfirm氣泡確認(rèn)框

當(dāng)用戶(hù)在界面中進(jìn)行了不當(dāng)?shù)牟僮鲿r(shí)，界面中就會(huì)彈出一個(gè)popconfirm氣泡確認(rèn)框，告知用戶(hù)具體的錯(cuò)誤點(diǎn)。

? Notification通知提示框

Notification通知提示框是系統(tǒng)自動(dòng)彈出的一種彈框，例如天翼云電腦專(zhuān)家下面的這個(gè)彈框，它是軟件啟動(dòng)后，系統(tǒng)檢測(cè)到當(dāng)前電腦有兩款應(yīng)用存在兼容性問(wèn)題，而彈出的一個(gè)溫馨提示，希望用戶(hù)能夠卸載，避免用戶(hù)電腦過(guò)載，或者干擾過(guò)多。

? Alert警告提示彈框

Alert警告提示彈框是當(dāng)前出現(xiàn)了特別需要用戶(hù)注意的情況而彈出的彈框，通常彈窗中會(huì)配以具有告警色的紅色或者橙色圖標(biāo)。

以下是我使用天翼云電腦管家的過(guò)程中彈出的一個(gè)告警彈窗，彈窗中提示網(wǎng)絡(luò)異常，并且配了一個(gè)紅色的告警圖標(biāo)，警示效果比較明顯。

? Message 全局提示彈窗

Message 全局提示彈窗也就是我們常說(shuō)的toast,它適用于輕量級(jí)的操作反饋，不會(huì)打斷用戶(hù)操作，一般懸浮出現(xiàn)在導(dǎo)航下方，會(huì)自動(dòng)消失，它是最輕量級(jí)的反饋組件。

下面是藍(lán)湖中的一個(gè)全局提示彈窗，每當(dāng)鏈接復(fù)制成功時(shí)，在導(dǎo)航下方都會(huì)出現(xiàn)一個(gè)復(fù)制成功的綠色彈窗，幾秒后自動(dòng)消失，不會(huì)打擾用戶(hù)操作，給了用戶(hù)及時(shí)的反饋。

四、我眼中的彈窗分類(lèi)

1. 主動(dòng)觸發(fā)式彈窗

主動(dòng)觸發(fā)式彈窗，就是用戶(hù)主動(dòng)操作點(diǎn)擊之后產(chǎn)生的一些彈窗，比方說(shuō)我們的抽屜彈窗、各種文字、圖標(biāo)的懸浮彈窗等就是用戶(hù)主動(dòng)操作后彈出的彈窗。

360AI下面的這個(gè)彈窗，是用戶(hù)通過(guò)點(diǎn)擊右邊那個(gè)懸浮的618促銷(xiāo)卡片出來(lái)的彈窗，它是用戶(hù)主動(dòng)的一種行為，當(dāng)彈窗廣告是用戶(hù)主動(dòng)觸發(fā)時(shí)，那么此時(shí)的彈窗也就不造成什么干擾了，這個(gè)設(shè)計(jì)的也是非常巧妙，促銷(xiāo)的的入口以一個(gè)很小的懸浮片長(zhǎng)時(shí)間放置在右邊，用戶(hù)需要了可以點(diǎn)擊查看詳情，也可以隨時(shí)關(guān)閉，是一個(gè)很好的彈窗設(shè)計(jì)切入點(diǎn)。

2. 被動(dòng)觸發(fā)式彈窗

被動(dòng)觸發(fā)式彈窗就是不以用戶(hù)意志為轉(zhuǎn)移而出現(xiàn)的彈窗，比方說(shuō)我們的氣泡彈窗就不是我們主動(dòng)操作后彈出的彈窗，而是我們?cè)陧?yè)面中進(jìn)行了錯(cuò)誤操作后系統(tǒng)自動(dòng)彈出的彈窗，這種彈窗一般駐留的時(shí)間不會(huì)很久，自己會(huì)自動(dòng)消失。

百度網(wǎng)盤(pán)一登錄進(jìn)來(lái)，就出現(xiàn)了超級(jí)會(huì)員的活動(dòng)促銷(xiāo)彈窗，它不是用戶(hù)主動(dòng)點(diǎn)擊后出現(xiàn)的彈窗，它出來(lái)幾秒鐘后就自動(dòng)消失了，既起到了促銷(xiāo)的作用，同時(shí)也沒(méi)對(duì)用戶(hù)產(chǎn)生太多的打擾，是彈窗運(yùn)用恰到好處的范例。

五、模態(tài)彈窗與非模態(tài)彈窗的區(qū)別

用一張圖整理了模態(tài)彈窗和非模態(tài)彈窗各自的一個(gè)特點(diǎn)，兩種彈窗它們各有優(yōu)勢(shì)，在產(chǎn)品設(shè)計(jì)中它們起到了相互補(bǔ)充相互促進(jìn)的作用。

六、彈窗的尺寸

彈窗的常見(jiàn)尺寸并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，因?yàn)樗鼈兺ǔ８鶕?jù)應(yīng)用場(chǎng)景、內(nèi)容需求、用戶(hù)界面設(shè)計(jì)以及品牌風(fēng)格等因素來(lái)確定，在設(shè)計(jì)彈窗時(shí)，設(shè)計(jì)師應(yīng)考慮彈窗內(nèi)容的可讀性、易用性以及與整體界面的協(xié)調(diào)性。

下面這些彈窗的大小不一，甚至同一個(gè)產(chǎn)品中的彈窗也沒(méi)有做到完全一樣，他們的大小都是基于內(nèi)容需求和應(yīng)用場(chǎng)景來(lái)確定的。

1. 常見(jiàn)的彈窗設(shè)計(jì)考慮因素

1.1 內(nèi)容需求：

彈窗的尺寸應(yīng)該能夠容納所需的全部?jī)?nèi)容，包括文本、圖片、表單元素、按鈕等。

1.2 用戶(hù)體驗(yàn)：

彈窗不宜過(guò)大或過(guò)小，以免影響用戶(hù)體驗(yàn)。過(guò)大的彈窗可能會(huì)顯得過(guò)于突兀，而太小則可能導(dǎo)致內(nèi)容顯示不完整或難以閱讀。

這個(gè)是項(xiàng)目中做的一個(gè)超級(jí)大彈窗，內(nèi)容超級(jí)多，但是排出來(lái)因?yàn)樘?，看起?lái)很不協(xié)調(diào)，然后優(yōu)化了下內(nèi)容布局，把“已添加鏈路”放到另一個(gè)標(biāo)題按鈕下，讓用戶(hù)切換查看，既解決了大小不協(xié)調(diào)問(wèn)題，也解決了內(nèi)容呈現(xiàn)的問(wèn)題。

1.3 屏幕大小

彈窗的設(shè)計(jì)應(yīng)考慮目標(biāo)用戶(hù)的屏幕大小和分辨率。在較小的屏幕上，可能需要調(diào)整彈窗的尺寸以適應(yīng)屏幕空間。

通常一個(gè)看著舒適的大彈窗尺寸，寬度是在800px左右，高度是在700px左右，在內(nèi)容能容放的下的情況下，我們盡量選用靠近這種尺寸的彈窗尺寸。當(dāng)然，我們平時(shí)還會(huì)遇見(jiàn)那種很小的小彈窗，內(nèi)容比較少，可能高度只有60px左右，寬度只有400px左右。

總之，彈窗的尺寸是很多樣的，都是根據(jù)內(nèi)容和業(yè)務(wù)需求來(lái)的。

1.4 可訪問(wèn)性

彈窗的設(shè)計(jì)應(yīng)考慮到可訪問(wèn)性，確保所有用戶(hù)都能輕松地與之交互，包括那些有視覺(jué)障礙的用戶(hù)。

1.5 測(cè)試和反饋

通過(guò)用戶(hù)測(cè)試和反饋來(lái)確定彈窗的尺寸是否合適，以及是否需要進(jìn)行調(diào)整。

1.6 響應(yīng)式設(shè)計(jì)

在響應(yīng)式設(shè)計(jì)中，彈窗的尺寸可能會(huì)根據(jù)設(shè)備的屏幕尺寸動(dòng)態(tài)調(diào)整?，F(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常使用CSS媒體查詢(xún)（Media Queries）來(lái)實(shí)現(xiàn)響應(yīng)式彈窗設(shè)計(jì)，使其能夠適應(yīng)不同的屏幕尺寸。

2. 前端如何將彈窗適配不同的電腦屏幕？

市面上有這么多的屏幕分辨率，前端平時(shí)是如何兼顧的，設(shè)計(jì)師需不需要對(duì)每一個(gè)尺寸的電腦單獨(dú)設(shè)計(jì)一個(gè)與之匹配的彈窗設(shè)計(jì)，這個(gè)問(wèn)題，我特意問(wèn)了我的前端同事。

首先，設(shè)計(jì)師是不需要設(shè)計(jì)多種尺寸的彈窗，只需要把需求給到的內(nèi)容合理的布局在彈窗中，設(shè)計(jì)一個(gè)尺寸即可，前端會(huì)參照彈窗設(shè)計(jì)的比例來(lái)適配各種電腦屏幕，會(huì)進(jìn)行相對(duì)應(yīng)的一個(gè)百分比的縮放來(lái)達(dá)到適配的效果。

七、彈框的使用場(chǎng)景

1. 任務(wù)

在用戶(hù)需操作相對(duì)復(fù)雜的擴(kuò)展功能時(shí)常用“模態(tài)彈窗”，它承載當(dāng)前頁(yè)面的擴(kuò)展內(nèi)容，所以常用到“對(duì)話框”、“抽屜”兩種類(lèi)型，他們除了有標(biāo)題、按鈕之外通常還會(huì)有一些任務(wù)表單，它是給予當(dāng)前主頁(yè)面之上的一種目標(biāo)任務(wù)，承載了用戶(hù)明確目標(biāo)的擴(kuò)展應(yīng)用。

TreeMind樹(shù)圖在導(dǎo)出文件的時(shí)候，彈出的彈窗是對(duì)主頁(yè)面導(dǎo)出按鈕一個(gè)更為詳盡的詮釋?zhuān)瑥棿爸杏泻芏鄬?dǎo)出格式的選擇，并且對(duì)每種格式優(yōu)缺點(diǎn)做了注解，它承擔(dān)著頁(yè)面的擴(kuò)展內(nèi)容。

2. 反饋

用戶(hù)輸入信息或操作用戶(hù)界面時(shí)，系統(tǒng)會(huì)給出相應(yīng)的提示，一般屬于“非模態(tài)彈窗”類(lèi)型，設(shè)計(jì)師在設(shè)計(jì)界面時(shí)常常用到“全局提示”、“通知提示”、“氣泡確認(rèn)框”三種類(lèi)型作為反饋消息，但如果是重要操作確認(rèn)時(shí)還是需要使用模態(tài)彈窗進(jìn)行確認(rèn)。

打開(kāi)藍(lán)湖文件，一進(jìn)去就會(huì)出現(xiàn)一個(gè)非模態(tài)彈窗，提示用戶(hù)將瀏覽器縮放至100%以獲得最佳的體驗(yàn)效果，給了用戶(hù)及時(shí)的反饋。

3. 信息展示

一般由用戶(hù)主動(dòng)觸發(fā)的，包含圖文信息，少數(shù)會(huì)有簡(jiǎn)單的操作按鈕，如“確認(rèn)”、“知道了”等等。比如操作說(shuō)明和引導(dǎo)、歡迎界面、操作說(shuō)明、幫助、功能引導(dǎo)、取數(shù)說(shuō)明、查看詳情、預(yù)覽或查看大圖等，這類(lèi)信息往往與當(dāng)前頁(yè)面緊密相關(guān)，并不適合用跳轉(zhuǎn)頁(yè)面，因?yàn)檫@樣無(wú)疑會(huì)加深頁(yè)面層級(jí)，增加用戶(hù)的認(rèn)知負(fù)擔(dān)。

點(diǎn)擊一刻相冊(cè)中的AI修圖，會(huì)彈出一刻秒傳的概念以及具體的操作說(shuō)明和步驟。

八、彈窗的使用注意事項(xiàng)

1. 定向推送

定向推送就像是一個(gè)智能的推銷(xiāo)員，它會(huì)根據(jù)目標(biāo)客戶(hù)群體和一些規(guī)則來(lái)決定向誰(shuí)推銷(xiāo)什么產(chǎn)品。定向推送是一項(xiàng)需要精心設(shè)計(jì)和開(kāi)發(fā)的技術(shù)，需要充分考慮用戶(hù)的需求和喜好，才能發(fā)揮其應(yīng)有的作用。

我參與設(shè)計(jì)的天翼云電腦管家，對(duì)于沒(méi)有安裝最新版本的用戶(hù)，登錄進(jìn)去會(huì)有版本更新的彈窗提示，如果用戶(hù)已經(jīng)安裝了最新版本，則彈窗不會(huì)出現(xiàn)。

2. 時(shí)效控制

引導(dǎo)提示通常都是短期的，就像限時(shí)促銷(xiāo)一樣，過(guò)了一定時(shí)間就需要更新。在以前，各業(yè)務(wù)線都是靠設(shè)計(jì)或產(chǎn)品經(jīng)理人工記憶，來(lái)決定什么時(shí)候上線和下線這些引導(dǎo)提示，但是人的記憶是有限的，難免會(huì)有遺漏。為了解決這個(gè)問(wèn)題，我們需要建立一套更加科學(xué)、自動(dòng)化的時(shí)效控制機(jī)制，比如通過(guò)系統(tǒng)自動(dòng)記錄引導(dǎo)提示的上線和下線時(shí)間，或者設(shè)置提醒功能，來(lái)幫助產(chǎn)品經(jīng)理及時(shí)完成這些操作。

百度翻譯在彈窗的時(shí)效控制上就做的很好，以下是最近幾個(gè)月的一個(gè)彈窗廣告，每次都做了及時(shí)的下線和更新，避免了彈窗的冗余，提升了用戶(hù)體驗(yàn)。

九、動(dòng)態(tài)彈窗

在彈窗中，我們還會(huì)遇見(jiàn)一種彈窗-動(dòng)態(tài)彈窗，這種彈窗可以增加轉(zhuǎn)化的效率，他可以動(dòng)態(tài)的顯示時(shí)間，以及用戶(hù)非常關(guān)心的權(quán)益，因?yàn)楹芏鄷r(shí)候用戶(hù)是不會(huì)主動(dòng)去獲取這些信息，這種跟用戶(hù)利益相關(guān)的權(quán)益，用動(dòng)態(tài)彈窗的方式展示，可以增加用戶(hù)更多的注意，給需要的用戶(hù)很好的提示。

360AI在618大促的時(shí)候，當(dāng)用戶(hù)一進(jìn)入首頁(yè)，就會(huì)有一個(gè)動(dòng)態(tài)彈窗的彈出，給用戶(hù)展示了618期間，用戶(hù)可以享受的優(yōu)惠權(quán)益，同時(shí)他以一種倒計(jì)時(shí)的方式，給用戶(hù)制造了當(dāng)前優(yōu)惠時(shí)間很有限的氛圍，在一定程度上它會(huì)增加需要用戶(hù)的一個(gè)轉(zhuǎn)化率。

十、彈窗樣式的多樣性

經(jīng)過(guò)大量的體驗(yàn)，彈窗的設(shè)計(jì)樣式可謂是百花齊放，有很多的樣式，不限于我們?nèi)粘？吹哪欠N一個(gè)方形框，彈窗也可以這么多彩，也有它絢麗多彩的一面。

十一、彈窗中的按鈕文案

相信大家在設(shè)計(jì)時(shí)，也會(huì)遇到這些困擾，彈窗按鈕“確定”、“確認(rèn)”選哪個(gè)，該用哪種文案才能準(zhǔn)確地傳達(dá)操作意圖。

通過(guò)深入研究彈窗按鈕的文案，并對(duì)這些文案進(jìn)行了細(xì)致的分類(lèi)和梳理?，F(xiàn)在，將這份應(yīng)用指南分享給大家。

總結(jié)

小小彈窗，它也有大作為大學(xué)問(wèn)，種類(lèi)、功能是如此之多，規(guī)范也是如此有考究，當(dāng)我們用一顆敬畏的心去研究每一個(gè)細(xì)小的事物時(shí)，發(fā)現(xiàn)每一個(gè)事物都是不容小覷，它們的承載的責(zé)任是如此之多，不容輕視，今天的分享就到這里，希望對(duì)你有啟發(fā)。

本文觀點(diǎn)都為個(gè)人理解和總結(jié)，不足之處也歡迎大家留言區(qū)多多點(diǎn)評(píng)指正，大家共同進(jìn)步！