建筑設(shè)計師尤哈尼·帕拉斯瑪說、簡約并非簡單，它是通過深思熟慮后對事物本質(zhì)的準(zhǔn)確把握。知其然、知其所以然。這次文章會盡量簡潔一點(diǎn)。
奔跑的日子、總是希望優(yōu)秀的你和我一起同行。讓我們一起在藝術(shù)的環(huán)境里生菌、知識的海洋里狗刨~
如果你只是想了解一下彈窗的基礎(chǔ)知識，那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義；彈窗來歷；彈窗拆分；彈窗分類；彈窗尺寸；
彈窗是用戶和系統(tǒng)交互信息的容器
。（在網(wǎng)上搜了一些文章看，他們的彈窗定義寫的基本都是各寫各的）我的這個定義絕對靠譜。站的維度高，從人機(jī)交互工程出發(fā)。這定義沒錯的妥妥的。說出去基本不會有人反駁你（如果有人敢反駁你把我的名字告訴他，反正我他也不認(rèn)識我哈哈哈）
彈窗最早的起源可以追溯至上世紀(jì)90年代。當(dāng)時，互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中，但這種方式存在一些問題。廣告商擔(dān)心消費(fèi)者在瀏覽負(fù)面內(nèi)容時，會將廣告與負(fù)面信息聯(lián)系在一起，從而對品牌造成不利影響。因此，網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序，發(fā)明了一種在新開窗口發(fā)布廣告的方法，這就是網(wǎng)絡(luò)彈窗的起源。
整體的去分析、在大部分的彈窗類型里都會包括
關(guān)閉、內(nèi)容區(qū)、模態(tài)層
（非模態(tài)類別的沒有個元素）
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強(qiáng)打斷的不適和跳出當(dāng)前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
我個人在設(shè)計時模態(tài)層基本都是50%的純黑，但并不是一定要用50%的純黑，要結(jié)合自己的平臺業(yè)務(wù)、設(shè)計風(fēng)格等方面去制定。偷偷的告訴你這個模態(tài)層加入一點(diǎn)微微的色彩傾向在視覺上往往會更好一點(diǎn)。
彈窗的關(guān)閉是用戶退彈窗的重要途徑、一般都會在彈窗內(nèi)容右上角。彈窗關(guān)閉按鈕也有在彈窗范圍外的。我們要保證彈窗關(guān)閉的清晰明確，來方便用戶操作。
在彈窗中、關(guān)閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同，內(nèi)容就會有所不同。什么都可能有、圖標(biāo)、確認(rèn)信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會出現(xiàn)在彈窗的內(nèi)容區(qū)域。
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個大類就比較好區(qū)分，看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認(rèn)等。
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為，用戶必須對其進(jìn)行操作才能解散彈窗，否則不能進(jìn)行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認(rèn)彈窗
。當(dāng)然還有其他的文件選擇、信息展示、等等。
這彈窗在B端設(shè)計里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復(fù)雜的業(yè)務(wù)就意味著你會和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。（煩死個人）不過在你制定好一套規(guī)使用規(guī)范后?；具@樣的彈窗是不太需要設(shè)計介入的，產(chǎn)品和FE兩人一對使用模版就上了。
這種彈窗就比較好理解了。承載較為緊急的信息，讓用戶快速處理；如：用戶未保存，就點(diǎn)擊離開當(dāng)前頁面，通過對話框讓用戶做出選擇。在執(zhí)行一個重要信息的刪除時，通過二次詢問引起用戶的注意，讓用戶再次做判斷；這類彈窗；
強(qiáng)不會讓用戶忽略或跳過，確保信息的交互響應(yīng)；引導(dǎo)用戶操作；增加用戶的參與度，可以提升用戶的活躍度和參與度。
01、會中斷用戶的操作流程，打斷用戶的思路或行為。
02、可能會影響用戶體驗(yàn)，因?yàn)橛脩粜枰却P(guān)閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復(fù)雜，用戶可能會感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗，例如頻繁彈出廣告或無意義的信息提示，用戶可能會對其產(chǎn)生反感甚至抵制使用相關(guān)軟件或平臺。
可以不打斷父應(yīng)用程序，無需停止進(jìn)度，用戶仍可以對父級內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。常見的非模態(tài)類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認(rèn)框；
不打斷操作流程；不會干擾用戶操作用戶體驗(yàn)更好；常用于輕量級的信息或提示。
可能會被忽略，導(dǎo)致信息傳遞不暢；不適合展示重要信息；形式通常比較單一，不能滿足復(fù)雜的展示需求
林子大了什么鳥兒都會有，一定會有我沒有接觸到的前沿交互方式。所以這個其他留給未來更優(yōu)秀的我們?nèi)グl(fā)現(xiàn)。
彈窗的尺寸和電腦屏幕分辨率是有關(guān)系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設(shè)計界面是一般用的是1440*900的設(shè)計尺寸。在做彈窗的時候已經(jīng)不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據(jù)自己業(yè)務(wù)需求去定義的。比如我們的業(yè)務(wù)最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
我在我們平臺定義的表單彈窗寬度雖然很不嚴(yán)謹(jǐn)、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細(xì)化的。這樣的定義彈窗尺寸導(dǎo)致的結(jié)果是，開發(fā)還原想過不是太好。
承載內(nèi)容、為什么會有這么多的彈窗類型。問題不在于彈窗，而在于合適的承載內(nèi)容和交互類型。
在項(xiàng)目里我們應(yīng)該怎么去選擇這三種內(nèi)容呈現(xiàn)方式呢。如果你只是設(shè)計師大部分時間你也不用選。你只有建議的權(quán)利沒有決定的權(quán)利。如果產(chǎn)品原型是彈窗、你給做了個抽屜。你可以從下面幾方面去找支撐點(diǎn)去和產(chǎn)品撕逼、干翻他的原型用你的效果圖。
彈窗和抽屜或界面他們承載的內(nèi)容量是不一樣的。所以在選擇用那種交互方式時可以從我們業(yè)務(wù)需要展示的內(nèi)容量來考慮。簡單的確認(rèn)或通知適合用彈窗、需要展示大量內(nèi)容或進(jìn)行復(fù)雜的功能時就適合用抽屜或者界面了。
我們可以從用戶體驗(yàn)方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進(jìn)程的成本。一致性、確保與其他業(yè)務(wù)模塊交互方式保持一致，為用戶提供一致的體驗(yàn)。
考慮到用戶的使用成本、B端設(shè)計中效率的提升優(yōu)先率老高了?？紤]系統(tǒng)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗(yàn)。
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的。總的來說核心是提升效率、保證我們用戶好的體驗(yàn)。
當(dāng)涉及到B端彈窗的交互方式時，有以下幾點(diǎn)核心優(yōu)缺點(diǎn)：
彈窗可以快速向用戶顯示重要的信息或請求，使用戶能夠即時了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
對于某些復(fù)雜的操作或任務(wù)，彈窗可以提供直觀的界面和簡化的步驟，使用戶更容易完成目標(biāo)。
通過使用彈窗，可以確保用戶在操作過程中不會被其他界面元素分散注意力，從而更專注于當(dāng)前的任務(wù)。
彈窗可以包含更多的詳細(xì)信息或額外的功能選項(xiàng)，使用戶能夠更深入地了解或操作某個特定內(nèi)容。
過度或不合適的彈窗可能會干擾用戶的正常操作，打斷用戶的工作流程，影響用戶體驗(yàn)。
不清晰或誤導(dǎo)性的彈窗信息可能會使用戶產(chǎn)生困惑或誤解，導(dǎo)致錯誤的操作或決策。
彈窗的彈出和關(guān)閉可能會增加系統(tǒng)的負(fù)擔(dān)，影響性能和響應(yīng)速度。
對于習(xí)慣于傳統(tǒng)界面的用戶來說，過于復(fù)雜或與眾不同的彈窗交互方式可能會造成使用上的困擾和不適應(yīng)。
我們項(xiàng)目里把升級彈窗做成了模版、廣告彈窗也是模版。當(dāng)然像二次確認(rèn)這樣的彈窗是組件，上貨看東西。
這個是系統(tǒng)的一個展示彈窗、和一個從彈窗形式優(yōu)化到抽屜的模塊界面。
這個就是一個在線聊天界面。是從SaaS里跳轉(zhuǎn)新建頁面。
大概是想了想、平時做的項(xiàng)目確實(shí)比較碎、最近也沒做整理盒復(fù)盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
我大學(xué)設(shè)計史陳老師告誡過我們。她說同學(xué)們，我其實(shí)不怕你們眼高手低。我怕的是你們眼都不高。和優(yōu)秀的人一起前行、希望和優(yōu)秀的你們一起去經(jīng)歷設(shè)計、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導(dǎo)反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設(shè)計師來自于天南海北，不乏有互聯(lián)網(wǎng)大廠設(shè)計師。再次
期待你的加入...
優(yōu)設(shè)網(wǎng)：4個方面層層遞進(jìn)，分析如何設(shè)計B端產(chǎn)品的彈窗
知乎：運(yùn)營彈窗的設(shè)計要點(diǎn)拆解
知乎：淺談B端產(chǎn)品彈窗一級設(shè)計方法
人人都是產(chǎn)品經(jīng)理：WEB端彈框掌握著幾天就夠了
作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
