全文閱讀約10分鐘，無高深理論，直述彈窗在tob產品中的應用場景。彈窗在B端設計中應用非常高頻了，根據應用場景我把它分為三類，一類為模態彈窗(有黑色不透明度的背景遮罩)，一類為非模態彈窗(無遮罩)，一類歸為其它。模態彈窗模態彈窗的特性：模態彈窗一般通過點擊觸發，出現時自帶遮罩，會有強烈的跳出感，且視覺聚焦于彈窗內容。90%的模態彈窗應用于信息的新增和編輯場景、及信息的強提醒、信息確認；做為單獨的信息載體模塊，一般用于整體業務邏輯的延伸和補充，所以很多時候前端也很愿意用彈窗來解決。因為到達彈窗意味著某個小分支流程的結束。彈窗由于承載內容小于頁面，有時候會涉及到錄入信息過多的情況，這個時候如果讓所有內容都在一個彈窗內顯然體驗不好，于是就需要內容分步，一般不建議超過三步。以上方案僅適用于分完步驟后單信息內容不多，如果單步驟信息還是很多，承載信息的容器單靠以上彈窗顯然不夠用了，這就引出了抽屜。抽屜具備與彈窗相同的特性，并沒有跳出當前頁，并且能承載更多信息。這里面需要注意的幾個交互小細節，一個是彈窗的關閉，模態彈窗的關閉有四個熱點和esc快捷鍵，需要注意：“有信息錄入類的彈窗盡量取消掉遮罩層的關閉熱點，或者給二次確認提示，防止用戶不小心誤觸，導致信息的重復填寫。彈窗關閉熱點一個是分步驟填寫類彈窗or抽屜，涉及到上一步和下一步的操作，在交互中需要考慮每一步是否需要保存？(保存分為本地保存和數據庫保存)，本地保存即保存在瀏覽器中，一般頁面刷新后，保存的數據會消失，但是可以用作臨時保存，而數據庫保存是存在后臺數據表中，綁定用戶信息，不會隨著頁面的刷新而丟失，但是會占數據庫內存，而且需要后端配合，本地保存前端就能寫。所以針對本地還是數據庫保存，就得看用戶的使用場景及信息的重要程度，及內容的多寡。想象一下，你花了十分鐘填寫的信息彈窗因為一次誤觸關閉了，你還要回過頭來在重新填寫一次，是不是就很崩潰！抽屜要注意的交互細節是：層級不要超過二級，底部的確認和取消需要固定在瀏覽器底部。同時抽屜要遵循網頁的柵格布局，然后就是上面說過的保存事項。而關于彈窗什么場景下只加確定按鈕、什么場景需要確定和取消兩個按鈕，什么場景僅留下刪除icon，就是根據彈窗內容來判斷當前的語義。你需要用戶填寫信息，必然要加確定和取消，確定的作用更多的是做一次填寫信息的判斷，信息的錄入是否符合要求、是否有未填寫的等；做某個重要操作前必然需要加上確定和取消，主要是向用戶強調這步操作你要慎重哦！取消按鈕就是給用戶反悔的機會。當詳情類彈窗僅用來看看的話，原則上是不需要加上確定和取消的，因為你沒有任何操作。關于遮罩的黑色不透明度是深點好還是淺點好，就看你的整體視覺風格了，走的小清晰風自然是淺點好，跳出感受也會稍微弱一點，這個不透明度的深淺我個人認為不要太過即可，并且整個TOB端產品都應該保持一致。深一點帶來的好處就是視覺更加聚焦，如黑夜中的燈光一樣。非模態彈窗模態彈窗常用于各分支業務流程的信息延展，代表著分支的小終點，而非模態彈窗常用于某個終點結束后的反饋(正確or錯誤反饋)。其次應用于系統報錯提示，及消息提示幾大應用場景。圖片來源antdesign圖片來源antdesign非模態彈窗基本都是全局提示，位于網頁頂部展示，停留時間在2s左右；消息提示彈窗一般右上角展示，彈窗的消失需要手動點擊確認或關閉，同時還可能伴有跳轉新頁面的鏈接以做快捷操作。全局提示其它除了以上兩種常用彈窗類型，還有氣泡、浮層這種類型彈窗的組件，我把它們歸為其它。氣泡常應用于縮略內容的展開描述，在tob類產品中非常常見，當你遇到單個信息內容過長且重要性層級不是那么高的時候可以應用該組件。交互形式一般默認鼠標懸浮展開。當你遇到某些重要操作需要二次確認一下，但是又不希望阻斷當前操作時，也可以用到以下形式的浮層，相對于模態彈窗操作路勁更短，阻斷感受又不會太強。交互形式一般為點擊展開。之后就是浮層了，浮層常應用于圖表類的數據展示，浮層的展示位置也會隨著鼠標懸浮的點位不同而不同，這里主要注意的就是做好圖表的安全區域規范，浮層的展示要求在安全區域內。同時需要注意鼠標懸浮的位置最好有線的指引，使用戶明確浮層所展示數據的當前位置。最后全文講解了模態彈窗、非模態彈窗、抽屜、氣泡、浮層的相關特性及應用場景；關于分類是建立在我在應用過程中的認知上的分類，大家不用太過糾結怎么分類是正確的，只要知道在什么樣的場景下應用什么樣的彈窗類型即可。該文僅做新人指導，希望大家保持思考，在合適的場景應用或設計合適的組件，才是我們設計師存在的價值之一。寫作不易，歡迎點贊、收藏、轉發，哈哈哈！往期文章

---

總結

以上是生活随笔為你收集整理的iview this.$modal 关闭所有的弹窗_一看会用TOB弹窗应用场景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。