整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
先來了解一下什么是模態(tài)彈窗？
模態(tài)彈窗會(huì)打斷用戶的操作行為，強(qiáng)制用戶必須進(jìn)行操作，否則不可以進(jìn)行其他操作。看看模態(tài)彈窗都長啥樣吧！
一、常見的網(wǎng)頁模態(tài)彈窗
第1種彈窗提示信息，只有一個(gè)確認(rèn)按鈕，只有提示的作用。有返回值，但返回結(jié)果一般不太重要。
alert的彈窗
第2種彈窗選擇按鈕，讓用戶選擇確定或取消，然后會(huì)進(jìn)入到不同的處理步驟，需要有返回值。
第3種彈窗輸入內(nèi)容，向用戶提問，并要求在彈窗中輸入文字，然后返回輸入的內(nèi)容。
二、某些瀏覽器提供禁止模態(tài)彈窗功能，直接在瀏覽器設(shè)置中修改即可，甚至還可以自動(dòng)返回值，使操作不因彈窗而中斷。
三、彈窗一般都是由javascript代碼產(chǎn)生的，在項(xiàng)目管理器中可以設(shè)置禁用javascript，這樣彈窗代碼將不會(huì)被執(zhí)行了，不彈窗也不存在返回值，會(huì)影響所有javascript腳本執(zhí)行。但它不會(huì)影響項(xiàng)目管理器中的javascript代碼執(zhí)行。
四、自動(dòng)檢測模態(tài)彈窗，并關(guān)閉彈窗。這種方法適用于所有的第三方程序窗口，可以控制瀏覽器以外的應(yīng)用程序窗口。設(shè)定檢測頻率，按窗口標(biāo)題識(shí)別彈窗，可以強(qiáng)制關(guān)閉彈窗或向彈窗發(fā)送鍵盤事件。使用這種方法時(shí)，彈窗最多存活一個(gè)檢測周期，往往一閃而過。
五、重載彈窗函數(shù)Alert，如下圖所示，不但可以阻止彈窗，還可以獲得彈窗顯示的內(nèi)容。
六、重載confirm函數(shù)，如下圖所示，不但可以阻止彈窗，還可以直接選擇確定還是取消。
七、重載prompt函數(shù)，如下圖所示，不但可以阻止彈出輸入框，還可以把輸入的內(nèi)容直接寫在代碼中。
Vuejs項(xiàng)目中，我們想實(shí)現(xiàn)這樣一個(gè)功能，當(dāng)有模態(tài)框處于顯示狀態(tài)，按下瀏覽器的后退按鈕或者后退快捷鍵，不離開當(dāng)前頁面，而是關(guān)閉最頂層的模態(tài)框，這是增強(qiáng)用戶體驗(yàn)的一種設(shè)計(jì)，那么該如何實(shí)現(xiàn)呢？
在這里，我們以Vue3中的element-plus UI庫講解，眾所周知，常用的模態(tài)框有3種，分別是：自定義對(duì)話框，消息提示框，抽屜；我們的實(shí)現(xiàn)原理是，當(dāng)路由導(dǎo)航之前，查找頁面中的模態(tài)框DOM元素，調(diào)用關(guān)閉按鈕的單擊方法來關(guān)閉模態(tài)框；原理是不是很簡單？
接下來，我們看代碼實(shí)現(xiàn)。首先，我們創(chuàng)建一個(gè)模塊文件modal.js，文件名大家可以隨便起。
然后，我們定義getAllModals函數(shù)，通過審查元素，我們得知對(duì)話框和抽屜的容器元素都有el-overlay類，我們就通過這個(gè)類進(jìn)行查找，刪選出可見的模態(tài)框容器元素。數(shù)組的構(gòu)造函數(shù)方法from用于將迭代器或類數(shù)組對(duì)象轉(zhuǎn)化為真正的數(shù)組。
/** @returns {HTMLDivElement[]} 所有可見的模態(tài)框容器元素 */
const getAllModals = () => {
return Array.from(document.body.querySelectorAll('.el-overlay'))
.filter(_ => window.getComputedStyle(_, null).display !== 'none')
}接下來，我們定義closeModal函數(shù)，用于關(guān)閉模態(tài)框，返回true，表示成功關(guān)閉了一個(gè)模態(tài)框。后面，我們會(huì)使用這個(gè)返回值來決定導(dǎo)航的邏輯。
/** @param {HTMLDivElement} el */
const closeModal = el => {
if (el) {
/** @type {HTMLButtonElement} */
const btnClose = el.querySelector('.el-dialog__close, .el-drawer__close')
if (btnClose) {
btnClose.click()
return true
}
}
}接下來，我們定義closeTopModal函數(shù)，用于關(guān)閉處于頂層的模態(tài)框，我們通過zIndex判斷模態(tài)框的層疊次序。
export const closeTopModal = () => {
return closeModal(
getAllModals()
.reduce((t, _) => t ? +t.style.zIndex > +_.style.zIndex ? t : _ : _, null)
)
}接下來，我們定義closeAllModals函數(shù)，用于關(guān)閉所有模態(tài)框，用戶登錄狀態(tài)發(fā)生變化的時(shí)候會(huì)用到。
export const closeAllModals = () => getAllModals().forEach(closeModal)接下來，我們定義closeMsgBox函數(shù)，用于關(guān)閉消息提示框，返回true，表示成功關(guān)閉了一個(gè)消息提示框。后面，我們會(huì)使用這個(gè)返回值來決定導(dǎo)航的邏輯。
export const closeMsgBox = () => {
const el = document.body.querySelector('.el-overlay.is-message-box')
if (el) {
const visible = window.getComputedStyle(el, null).display !== 'none'
if (visible) {
/** @type {HTMLButtonElement} */
const btnClose = el.querySelector('.el-message-box__headerbtn')
if (btnClose) {
btnClose.click()
return true
}
}
}
}該模塊文件的最后，我們定義closeMsgBoxAndModalAll函數(shù)，用于關(guān)閉所有打開的消息提示框和模態(tài)框。
export const closeMsgBoxAndModalAll = () => {
closeMsgBox()
closeAllModals()
}現(xiàn)在，我們可以轉(zhuǎn)向路由模塊文件了，我們對(duì)router的beforeEach導(dǎo)航守衛(wèi)進(jìn)行攔截，如果成功關(guān)閉了一個(gè)任意類型的模態(tài)框，那么阻止頁面跳轉(zhuǎn)。
router.beforeEach((to, from, next) => {
if (closeMsgBox() || closeTopModal()) {
return next(false)
}
next()
})實(shí)現(xiàn)起來就是這么簡單，不是嗎？我以后有時(shí)間會(huì)分享更多的Web開發(fā)技術(shù)內(nèi)容，歡迎大家閱讀，學(xué)習(xí)！若大家有更好的解決方案，也歡迎分享出來，共同進(jìn)步，謝謝！
輯導(dǎo)語：Web端的設(shè)計(jì)規(guī)則有很多，設(shè)計(jì)內(nèi)容也十分豐富，本篇文章作者分享了Web端彈框設(shè)計(jì)需要掌握的要點(diǎn)，從多個(gè)方面講述了有關(guān)彈框設(shè)計(jì)的內(nèi)容，一起來學(xué)習(xí)一下，希望對(duì)你有幫助。
臺(tái)灣相較于大陸地區(qū)，互聯(lián)網(wǎng)發(fā)展相對(duì)較晚，用戶使用習(xí)慣較受海外市場影響。公司后臺(tái)數(shù)據(jù)顯示PC端用戶明顯高于移動(dòng)端用戶，換句話說用戶更習(xí)慣于大屏上用到產(chǎn)品，大屏除了PC端還有iPad或其他屏幕端口。
Web端內(nèi)容很多設(shè)計(jì)規(guī)則需要重新定義，而不是簡單從一端移到另外一端，以下關(guān)于彈框的內(nèi)容是我踩坑總結(jié)，希望能給大家一點(diǎn)幫助。
定義：中斷用戶當(dāng)前操作并對(duì)其作出補(bǔ)充，或中斷用戶當(dāng)前操作并對(duì)其作出反饋。
彈窗，是一種“展現(xiàn)于頁面之上的一種信息容器”，在x、y軸的平面空間之外擴(kuò)展了頁面的深度，它是一種比頁面更靈活的信息容器。
常見的彈框一般包含一個(gè)蒙版，一個(gè)主體及一個(gè)關(guān)閉入口，常見于網(wǎng)頁及移動(dòng)端。其好處是讓用戶更聚焦，且不用離開當(dāng)前頁面，更快更容易完成任務(wù)。
以彈窗功能和用途可分為：任務(wù)類（引導(dǎo)操作）、內(nèi)容反饋、信息展示三大類。模態(tài)彈窗一般是屬于任務(wù)類型的，比如賬號(hào)登錄、刪除某個(gè)信息等等
用戶操作用戶界面時(shí)，系統(tǒng)給出相應(yīng)的內(nèi)容反饋，在設(shè)計(jì)師設(shè)計(jì)界面時(shí)常用到“通知提示”、“全局提示”、“氣泡確認(rèn)框”三種類型作為消息反饋。
它的“非模態(tài)”在于用戶操作后不打斷用戶的情況下及時(shí)地顯示出來，明確告知用戶的一些反饋結(jié)果，幫助用戶更加有效的完成界面中的復(fù)雜任務(wù)。
如下圖谷歌郵箱右下角的通知提示，明確告知兩個(gè)按鈕的使用含義，決定權(quán)在于用戶，同時(shí)不影響用戶其它操作
存在的意義是及時(shí)有效的幫助用戶完成任務(wù)目標(biāo)，不需要用戶做特殊動(dòng)作或者轉(zhuǎn)換模式，就能看到和理解這些反饋，從而提高任務(wù)的操作效率和可理解程度。信息提示常常用到“文字提示”、“氣泡”、“警告提示”三種形式展現(xiàn)給用戶。如下圖的客服氣泡提示對(duì)應(yīng)用戶想解決問題的相關(guān)路徑：
“非模態(tài)”彈窗中的“信息提示”類型通常都需要進(jìn)行指定動(dòng)作操作后出現(xiàn)，比如編輯好內(nèi)容后點(diǎn)擊發(fā)送，通常會(huì)有發(fā)送成功的提醒。另外當(dāng)系統(tǒng)中出現(xiàn)一些成功、失敗、錯(cuò)誤、警示就需要“警告提示”告訴用戶；其中“文字提示”、“氣泡”它需要用戶懸停在某個(gè)焦點(diǎn)時(shí)出現(xiàn)，移除才消失，后面我也會(huì)講解到。
彈窗體系分為模態(tài)彈框與非模態(tài)彈框兩種，模態(tài)彈框和非模態(tài)彈框最大的區(qū)別就是是否強(qiáng)制用戶交互。
模態(tài)彈框會(huì)打斷用戶的當(dāng)前操作流程，如果用戶不在彈框上操作，那么其余功能都使用不了；而非模態(tài)彈框僅僅是用于提醒用戶，用戶可以忽視繼續(xù)操作。
模態(tài)彈框出現(xiàn)時(shí)，直到用戶明確與內(nèi)容做出回應(yīng)，才能消失。常見的有對(duì)話框、抽屜等。它的視覺層級(jí)非常高，屬于不操作不消失類型。
新的花瓣web端不登錄彈框不消失，除非點(diǎn)擊右上角關(guān)閉鍵或者點(diǎn)擊后面蒙層。
從出現(xiàn)到停留消失的時(shí)間大約3-5秒，用戶可以不用做出任何操作，繼續(xù)與頁面內(nèi)容進(jìn)行交互，是一種極輕量的弱彈框，不影響用戶體驗(yàn)。
上面警示提示時(shí)，下面【我已閱讀并同意語雀服務(wù)協(xié)議】是可操作的。
簡單講，模態(tài)彈窗就是當(dāng)前必須完成后，才能繼續(xù)下一步；非模態(tài)彈窗隨時(shí)可關(guān)可不關(guān)，不影響當(dāng)前任務(wù)。
“內(nèi)容反饋”及“信息提示”這兩種類型都統(tǒng)稱為“信息反饋”，因?yàn)樗鼈儍煞N類型很相似，都屬于非模態(tài)彈框。“信息反饋”存在的意義是及時(shí)有效的目的幫助用戶完成任務(wù)目標(biāo)，其中“有效”包含了“提供有用的信息反饋，提高任務(wù)的操作效率和可理解程度”。
1）有用
有用的「信息反饋」：
2）效率
提高用戶的操作效率：
彈框的組成元素主要包含以下幾類：
做為輔助類解釋說明，常用做解釋該功能特點(diǎn)，常做為鼠標(biāo)的懸浮提示。
目前有不少產(chǎn)品，在對(duì)一些普通的字段進(jìn)行解釋說明時(shí)，特別喜歡使用帶遮罩的模態(tài)彈窗，需要用戶點(diǎn)擊才能關(guān)閉，嚴(yán)重阻礙用戶當(dāng)前操作，這種設(shè)計(jì)是屬于不合理的。因?yàn)檫@樣簡單的解釋說明，用非模態(tài)彈窗來展現(xiàn)，用戶只需要懸停就能快速預(yù)覽相關(guān)內(nèi)容，還可以快速離開（移開觸發(fā)區(qū)的圖標(biāo)，或點(diǎn)擊空白區(qū)域）。
常用于系統(tǒng)級(jí)通知的被動(dòng)提醒 ，通知彈窗主要是為了將一些重要信息通知給用戶
長文本提示建議增加標(biāo)題，表示提示的類型或主題，用戶可快速理解主要內(nèi)容，內(nèi)容建議不超過 4 行。
Alert 默認(rèn)四種類型的提示（這里顏色是固定的，比如付款成功一般是綠色，用戶已經(jīng)產(chǎn)生這種認(rèn)知，設(shè)計(jì)時(shí)不要用新的樣式讓用戶重新學(xué)習(xí)，人性是懶惰的），分別是：
提示框有描邊和填充這兩種變體可以使用，以便匹配不同的設(shè)計(jì)風(fēng)格。
標(biāo)準(zhǔn)（默認(rèn)）是淺色填充無邊框，填充（filled）是深色填充，描邊（outlined）只有邊框無填充。
注意：
位置一般在頁面頂端，常出現(xiàn)在用戶操作后的反饋，頁面最上層浮動(dòng)展示，暗示全局性。全局提示和警示提示狀態(tài)一樣默認(rèn)有5種狀態(tài)，其中多一條loading狀態(tài) 。例如當(dāng)我在語雀上編輯好文章發(fā)布成功后，發(fā)布成功會(huì)有個(gè)全局提示的提醒，這樣做為用戶的我知道目前是處于什么狀態(tài)。
鼠標(biāo) Hover/Click 時(shí)，可用于承載更多信息/輕量型的操作。
點(diǎn)擊元素，彈出氣泡確認(rèn)框，氣泡確認(rèn)框不對(duì)父級(jí)頁面造成影響，或者僅會(huì)父級(jí)頁面造成部分影響，摹客首次登錄進(jìn)去提示每個(gè)icon功能，但不影響后面面板的操作。
營銷彈框、公告通知彈框、提示類消息彈框都屬于通知公告類的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶具體操作，當(dāng)然某些場景也需要用戶簡單輸入的操作，但這些操作往往不復(fù)雜。
如果用戶將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。
適用通知公告類彈框的場景（通常是重要的信息，需要加強(qiáng)用戶關(guān)注度）：
1）營銷彈框
出于公司運(yùn)營目標(biāo)為提高曝光率和營收，或便于拉新和轉(zhuǎn)化。該框會(huì)在該網(wǎng)站加載出來后第一時(shí)間就會(huì)出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，不然不可操作其它。即便是他們產(chǎn)品運(yùn)營知道這種方式比較遭人煩，也不得不如此，利益大于一切價(jià)值。
2）公告通知彈框
主要是為了將一些重要信息通知用戶，一般在用戶登錄后第一時(shí)間談粗，避免用戶錯(cuò)過。這些信息一般來自一些被觸發(fā)的事件，或者來自應(yīng)用開發(fā)者的信息。如果這些信息比較重要，在應(yīng)用的通知中心也會(huì)保留這類重要或者高級(jí)別的通知，以便用戶查看回顧。例如摹客首次登錄有個(gè)更新提醒通知通過后版本更新內(nèi)容，方便用戶知道。
3）提示類消息彈框（包含對(duì)話框）
模擬系統(tǒng)的消息提示框而實(shí)現(xiàn)的一套模態(tài)對(duì)話框組件，常用與消息提示、確認(rèn)消息和提交內(nèi)容。
確定取消語言文字描述、標(biāo)題文字描述。
4）對(duì)話框
對(duì)話框強(qiáng)調(diào)了用戶與計(jì)算機(jī)進(jìn)行對(duì)話的過程，是疊加在應(yīng)用主窗口上的彈出框，一般在對(duì)話中它會(huì)給出消息或要求輸入。當(dāng)對(duì)話完成后，即可關(guān)閉對(duì)話框。說人話就是，對(duì)話框一般需要用戶進(jìn)行操作，當(dāng)用戶輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會(huì)根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對(duì)話”的過程，因此稱之為“對(duì)話框”。
簡單配置（表單內(nèi)容少，操作清晰）。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、更改名稱等操作。
有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，操作配置的彈窗無法滿足需求，需要更精細(xì)分層歸納。它的優(yōu)點(diǎn)是合理利用了空間布局，讓信息層級(jí)更清晰易懂，使用起來更加高效。
標(biāo)簽頁彈窗的設(shè)計(jì)需要找到信息之間的因果關(guān)系，單個(gè)彈窗中的標(biāo)簽頁不宜過多，一般不超過五個(gè)，如果多余5個(gè)標(biāo)簽，建議將其改為豎向顯示。
分布彈框是分布表單的衍生品，與標(biāo)簽頁彈框接近，區(qū)別是分步彈框需要上一步完成才能進(jìn)行下一步，主要特點(diǎn)頭部會(huì)有進(jìn)度條告知當(dāng)前進(jìn)度和后續(xù)還有需要幾個(gè)步驟完成操作，另外一點(diǎn)是頁腳上常常會(huì)有下一步、上一步兩個(gè)選項(xiàng)供用戶進(jìn)行選擇。
抽屜指的是從當(dāng)前界面的“上下左右”側(cè)邊滑出相應(yīng)的表單內(nèi)容完成相應(yīng)操作，之前的內(nèi)容不丟失。
抽屜式彈框常見4種樣式，表格中出現(xiàn)較多，通常會(huì)以側(cè)滑的形式出現(xiàn)，有加遮罩層的，也有不加遮罩層的模態(tài)彈窗（不加遮罩層方便方便用戶進(jìn)行對(duì)比、參照和檢閱相關(guān)內(nèi)容，同時(shí)并不會(huì)影響用戶對(duì)界面其他區(qū)域的操作）。
頁面跳轉(zhuǎn)后的新開頁面是當(dāng)前頁面保留，新的內(nèi)容在新頁面中呈現(xiàn)。常見的頁面跳轉(zhuǎn)方式有直接跳轉(zhuǎn)、左右跳轉(zhuǎn)、上下跳轉(zhuǎn)、翻轉(zhuǎn)跳轉(zhuǎn)、聯(lián)動(dòng)性跳轉(zhuǎn)、放大縮小跳轉(zhuǎn)（iOS微信公眾號(hào)浮窗）、搜索框跳轉(zhuǎn)。
其中直接跳轉(zhuǎn)是最原始最直接的跳轉(zhuǎn)方式，在web端很常見，實(shí)現(xiàn)難度和維護(hù)成本都很低。在設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，從而做出最合適的設(shè)計(jì)。
從頁面承載的內(nèi)容看，新建頁面＞抽屜式彈框＞對(duì)話框。
但是我們不能單一從頁面內(nèi)容量的多少來確定使用哪種形式。通常內(nèi)容的深度較深最好采用抽屜式，內(nèi)容寬度較寬則彈框形式更為合理，新建頁面適合寬度與深度同時(shí)較大的產(chǎn)品中
本著孜孜不倦的學(xué)習(xí)心態(tài)，這次梳理也是因?yàn)樵诠ぷ髦杏龅?個(gè)小問題。
1）模態(tài)彈框是不是一定有黑色透明蒙層，沒有蒙層時(shí)屬于什么性質(zhì)彈框？
這時(shí)候我各種渠道搜索之后發(fā)現(xiàn)有些大佬說蒙層是模態(tài)彈框的標(biāo)志，并沒講原因，這種說法完全不能接受。我在使用過程中碰到過沒有蒙層的彈框，存在即合理好奇心驅(qū)使我去問了研發(fā)和產(chǎn)品同學(xué)，最后得出結(jié)論根據(jù)用戶使用場景不同，對(duì)蒙層的設(shè)計(jì)也不同。
原來是隨著產(chǎn)品對(duì)彈窗的使用，也會(huì)有需求采用不透明度為0的蒙層，最小化打斷用戶的操作的不良體驗(yàn)；但是要注意在一個(gè)產(chǎn)品系統(tǒng)中蒙層不透明度的使用應(yīng)該統(tǒng)一，這個(gè)需要規(guī)范定統(tǒng)一的不透明度避免產(chǎn)品各個(gè)地方不統(tǒng)一的情況。
谷歌郵件非常典型案例，當(dāng)窗口最大化時(shí)，產(chǎn)品認(rèn)定為用戶專注寫郵件不想被打擾場景，所以父級(jí)頁面加上蒙層不可操作，視覺聚焦當(dāng)前彈框操作窗口；當(dāng)新郵件窗口默認(rèn)模式時(shí)，產(chǎn)品判斷用戶可能是寫郵件場景，同時(shí)可能需要翻閱或查找以往郵件，這時(shí)候父級(jí)頁面操作完全不受影響。
可以說明蒙層取決于當(dāng)前操作是否需要參照父級(jí)頁面，如果填表需要參考父級(jí)頁面可以不需要蒙層，反之相反。
我寫日?qǐng)?bào)時(shí)候覺得非常便利，有時(shí)候需要查看昨天日?qǐng)?bào)，看看計(jì)劃今日是否完成，以便提交今天日?qǐng)?bào)。如果這時(shí)候父級(jí)頁面不可操作，我需要多4-5步把昨天內(nèi)容復(fù)制過來，這無疑是非常累贅的操作。
2）為什么有的模態(tài)彈框右上角沒有關(guān)閉鍵？當(dāng)彈框下面有確認(rèn)和取消鍵可關(guān)閉彈框時(shí)，右上角關(guān)閉鍵多余能否去掉？
關(guān)于這個(gè)問題不知道大家伙有沒有觀察到，早期win電腦的彈框右上角都有固定位置的關(guān)閉按鈕，發(fā)展到目前有些產(chǎn)品設(shè)計(jì)右上角保留關(guān)閉鍵，有些產(chǎn)品設(shè)計(jì)省去關(guān)閉鍵了，那么它們存在或消失的邏輯是什么呢？
上圖花瓣和Pinterest的彈框中，點(diǎn)擊蒙層都可關(guān)閉，同時(shí)花瓣右上角有關(guān)閉按鈕，這樣看來關(guān)閉按鈕似乎多余了。
我們?cè)倏瓷蠄D中的案例，對(duì)于這種表單頁，右下角取消鍵以及右上角的關(guān)閉都可以關(guān)閉彈框，導(dǎo)致存在兩個(gè)關(guān)閉鍵我認(rèn)為有以下幾點(diǎn)：
不同場景的理解：
對(duì)話框的「關(guān)閉」是對(duì)于彈窗頁面的一種反饋，它的含義是「關(guān)閉當(dāng)前彈窗，暫對(duì)彈窗內(nèi)容暫時(shí)不做處理」；而彈框里面「取消」是對(duì)彈框內(nèi)容的反饋
比如對(duì)話框給用戶，問是否要加入活動(dòng)？如果用戶還沒想清楚，不想現(xiàn)在決定，點(diǎn)否表示拒絕不合適的，關(guān)閉彈窗就表示我現(xiàn)在不做決定。從操作上關(guān)閉和取消鍵判斷是一致的，用戶沒有激活活動(dòng)。
與“對(duì)話框”對(duì)比，“抽屜”在使用場景也有它的優(yōu)劣勢。
“抽屜”適用范圍更小，大部分場景下都用在較復(fù)雜的表單及字段較多詳情頁。
“抽屜”在Web端的應(yīng)用中可分為：a. 內(nèi)容展示、b. 表單編輯這兩大類型。
注釋：
操作確認(rèn)、信息提示、操作反饋場景：在需要用戶暫停當(dāng)前操作、即刻處理時(shí)，使用模態(tài)彈框。
需要和父級(jí)頁面內(nèi)容相互參照：使用無遮罩的非模態(tài)抽屜，便于查看和操作。
需要在父級(jí)頁面中快速選擇切換：使用無遮罩的非模態(tài)抽屜。在下面父頁面露出的部分上進(jìn)行與抽屜內(nèi)容和位置都無關(guān)的操作，且不是點(diǎn)擊空白區(qū)域時(shí)，抽屜不用自動(dòng)消失。
疊放：是指在一個(gè)對(duì)話框/抽屜上面疊加放置更多對(duì)話框/抽屜。不建議對(duì)話框上疊放對(duì)話框，但抽屜組件支持多層抽屜，即在抽屜內(nèi)打開新的抽屜，用以解決多分支任務(wù)的復(fù)雜狀況。
優(yōu)秀彈窗不管從視覺設(shè)計(jì)層面還是從文案邏輯層面都需要清晰簡潔易懂，在彈出時(shí)需要考慮目標(biāo)用戶是否理解，以及盡量降低用戶的其它操作。
假想我正在玩游戲或看直播、突然來了個(gè)騷擾電話全屏幕覆蓋（傳統(tǒng)來電），我會(huì)以最快的速度掛掉電話，回到游戲中發(fā)現(xiàn)已領(lǐng)盒飯，這個(gè)就相當(dāng)尷尬了。
即便來電是多么的理所當(dāng)然，但心里必定是非常不痛快的。如果來電以彈窗的形式占據(jù)屏幕很小區(qū)域是不是就給了用戶足夠反應(yīng)時(shí)間及緩沖時(shí)間呢？
理解彈框設(shè)計(jì)前提后，下一步需要明確設(shè)計(jì)目標(biāo)。
設(shè)計(jì)師應(yīng)該理解產(chǎn)品需求，分別產(chǎn)品側(cè)（能給產(chǎn)品帶來什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果）？
從用戶側(cè)（能給用戶帶來什么？滿足什么樣的需求？避免什么損失）？
分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計(jì)目標(biāo)，以確保彈窗根據(jù)不同的需求，以適合的樣式呈現(xiàn)給用戶。
其次，在得到設(shè)計(jì)目標(biāo)后，同樣需要從設(shè)計(jì)側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。
從設(shè)計(jì)角度，團(tuán)隊(duì)所有成員需要對(duì)該組件有清晰且統(tǒng)一的認(rèn)知，了解組件的使用場景，以確保不會(huì)錯(cuò)用、濫用，提升效率。
站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，大大提高開發(fā)效率。
這里我強(qiáng)調(diào)下我們接到業(yè)務(wù)訴求明確到控件時(shí)，作為設(shè)計(jì)師該如何判斷和溝通訴求的合理性：
首先接到需求后，執(zhí)行不是第一步，我們首先需要判斷業(yè)務(wù)的首要目標(biāo)和具體訴求是否統(tǒng)一，具體訴求是否是完成目標(biāo)的最佳解決方案？
例如舉例的業(yè)務(wù)目標(biāo)：“減少用戶跳出帶來的流失”——先確定流失的的根本原因是否由跳出導(dǎo)致，原有流程中跳出的目的是什么，改變承載介質(zhì)是否能達(dá)成原有目的？確定以上信息便于我們同步業(yè)務(wù)根本需求，從而判斷訴求的合理性，同時(shí)明確設(shè)計(jì)側(cè)可發(fā)力點(diǎn)。然后才是如何輸出平衡業(yè)務(wù)目標(biāo)與用戶體驗(yàn)的有效方案。
1）文案表述
因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡潔且精確，能用一句話說清楚的就不要過于啰嗦，容器的空間有限且用戶的耐性也有限。
2）標(biāo)題字體
另外文案的標(biāo)題往往比正文大2px或4px，具體看自己公司字體規(guī)范，比如新建表單、刪除信息、修改內(nèi)容等，前面不同標(biāo)題對(duì)應(yīng)不同的功能場景，都是為了用戶方便理解。
3）確定與確認(rèn)
我們先講講彈窗中常常容易被忽視也容易搞混淆的「確認(rèn)」和「確定」，它們常常與「取消」按鈕搭配使用，從表面的中文上看他們很接近，所以造成很多設(shè)計(jì)師把二者混合著用。
4）彈出的時(shí)機(jī)及頻率
針對(duì)運(yùn)營彈窗，如果彈出的時(shí)間不對(duì)或過于頻繁，可能會(huì)造成用戶反感，所以需要把握好彈出時(shí)機(jī)及頻率。
例如包圖網(wǎng)VIP，如果用戶每次進(jìn)入應(yīng)用都看到彈出提醒，確實(shí)又沒有購買商品的意愿，總是被彈窗打斷真的就很煩，并且彈框后也套著彈框。若我需要下載素材需要關(guān)閉2次才能找素材，相信你進(jìn)入該網(wǎng)站也會(huì)反感。
那么可以適當(dāng)將提醒彈窗設(shè)置為每日首次進(jìn)入應(yīng)用時(shí)提示、每累計(jì)進(jìn)入應(yīng)用5次后提示或者即將到期提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。
5）盡量避免彈框上再加彈框
要盡量避免在彈框上再彈一層彈框，多層層蒙版會(huì)讓用戶覺得負(fù)擔(dān)很重，當(dāng)然早期win多模態(tài)彈框采用位置錯(cuò)誤，在產(chǎn)品中盡量避免使用。
如果有多個(gè)彈框一同出現(xiàn)該怎么辦呢？
一是要做好多種內(nèi)容層級(jí)的排序，二是不同類的內(nèi)容盡量區(qū)分場景改用輕量彈框或者交互重新梳理，還有多個(gè)彈窗同時(shí)出現(xiàn)的時(shí)候，頁面的彈窗疊加在一起，無論是視覺還是感受都會(huì)非常差，建議慎重使用。
6）抽屜頁面上可以更深一步操作彈出彈框或再疊加一個(gè)抽屜
我們開始設(shè)計(jì)一個(gè)彈框時(shí)，首先解決的問題是確定彈框尺寸。
上圖可看出市場市面上最小的屏幕是1024×768，那是不是只要在最小分辨率下不錯(cuò)位不跑偏，在其他分辨率就能安分守己呢？
那下面我們就以最小分辨率1024×768為基礎(chǔ)開始今天的論證。
由此可以得出彈窗尺寸的界限值：彈窗高度≤620px，寬度≤1000px。
1）彈窗高度不高于瀏覽器內(nèi)容展示
彈框高度過高，彈框顯示不全，就算滾動(dòng)條固定到底部也有一部分顯示不出來，影響操作。對(duì)話框的大小主要根據(jù)內(nèi)容而定，Web端應(yīng)用中，一個(gè)尺寸無法滿足所有類型的彈窗需求。
抽屜提供穩(wěn)定的尺寸。提供 S (w=378px) 和 M (w=736px)基礎(chǔ)寬度選項(xiàng)。這兩個(gè)尺寸是根據(jù) antd 表單尺寸規(guī)范，分別可容納單列和雙列表單，而且保持了使用抽屜時(shí)父級(jí)頁內(nèi)容可見的優(yōu)勢。
2）內(nèi)容滾動(dòng)
坑我已經(jīng)幫大家踩完了，大家在設(shè)計(jì)抽屜式彈框和父級(jí)頁面都是長頁面時(shí)，一定要將背景滾動(dòng)條進(jìn)行鎖定，不然兩個(gè)滾動(dòng)條的出現(xiàn)，會(huì)導(dǎo)致十分混亂。
彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見的彈窗關(guān)閉方式有 4 種：
彈窗外的任意區(qū)域，這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉，這種交互方式上文內(nèi)容有提到討論過，這里不再贅述。
值得注意的是操作配置類彈窗不建議采用點(diǎn)擊蒙層關(guān)閉彈框，極易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。
方式一：模態(tài)層顏色根據(jù)產(chǎn)品品牌色定
蒙層顏色可以用色彩傾向偏向品牌的蒙層，這樣整體品牌感知會(huì)加強(qiáng)，如上圖蒙層加入了品牌色的色彩傾向，整體品牌感知更強(qiáng)。
方式二：有模態(tài)層但不顯示
模態(tài)抽屜的遮罩背景層可以降低透明度，也可以是全透明不顯示的，可以更好的展示關(guān)聯(lián)的信息，點(diǎn)擊抽屜其他處可關(guān)閉抽屜，下圖中的模態(tài)抽屜就是這樣設(shè)計(jì)的。點(diǎn)擊右側(cè)父級(jí)頁面可關(guān)閉抽屜。
方式三：去掉模態(tài)層
下圖中的抽屜為非模態(tài)抽屜，可以根據(jù)左側(cè)列的切換快速查看右側(cè)抽屜內(nèi)容。
是否去掉模態(tài)層根據(jù)場景而定，如果抽屜內(nèi)容與父級(jí)頁面關(guān)聯(lián)，建議去掉模態(tài)層，目標(biāo)是方便用戶操作。如果抽屜內(nèi)容與父級(jí)頁面無關(guān)聯(lián)，加上蒙層，避免父級(jí)內(nèi)容的干擾，讓用戶視覺更聚焦抽屜內(nèi)容。
對(duì)于頁面的展示采取哪種樣式有科學(xué)說服性解釋，注意交互體驗(yàn)的一致性，也注意不要為了一致而一致，效率至上，滿足業(yè)務(wù)需求為第一位。考慮好之間的關(guān)聯(lián)性，給出最符合用戶心理預(yù)期的過渡方式，就可以幫助我們找到最合適的設(shè)計(jì)。
互聯(lián)網(wǎng)不斷影響著我們的生活，移動(dòng)端也在引領(lǐng)著設(shè)計(jì)趨勢，多端體驗(yàn)的一致性，可以想像將會(huì)有一大波移動(dòng)上的體驗(yàn)遷徙網(wǎng)頁設(shè)計(jì)上，未來還會(huì)出現(xiàn)更好用且易維護(hù)的展現(xiàn)方式。
文章引用：
本文由 @見賢設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
