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

---

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。