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