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