編輯導(dǎo)語(yǔ)：Web端的設(shè)計(jì)規(guī)則有很多，設(shè)計(jì)內(nèi)容也十分豐富，本篇文章作者分享了Web端彈框設(shè)計(jì)需要掌握的要點(diǎn)，從多個(gè)方面講述了有關(guān)彈框設(shè)計(jì)的內(nèi)容，一起來(lái)學(xué)習(xí)一下，希望對(duì)你有幫助。

臺(tái)灣相較于大陸地區(qū)，互聯(lián)網(wǎng)發(fā)展相對(duì)較晚，用戶(hù)使用習(xí)慣較受海外市場(chǎng)影響。公司后臺(tái)數(shù)據(jù)顯示PC端用戶(hù)明顯高于移動(dòng)端用戶(hù)，換句話(huà)說(shuō)用戶(hù)更習(xí)慣于大屏上用到產(chǎn)品，大屏除了PC端還有iPad或其他屏幕端口。

Web端內(nèi)容很多設(shè)計(jì)規(guī)則需要重新定義，而不是簡(jiǎn)單從一端移到另外一端，以下關(guān)于彈框的內(nèi)容是我踩坑總結(jié)，希望能給大家一點(diǎn)幫助。

一、彈窗的定義

定義：中斷用戶(hù)當(dāng)前操作并對(duì)其作出補(bǔ)充，或中斷用戶(hù)當(dāng)前操作并對(duì)其作出反饋。

彈窗，是一種“展現(xiàn)于頁(yè)面之上的一種信息容器”，在x、y軸的平面空間之外擴(kuò)展了頁(yè)面的深度，它是一種比頁(yè)面更靈活的信息容器。

常見(jiàn)的彈框一般包含一個(gè)蒙版，一個(gè)主體及一個(gè)關(guān)閉入口，常見(jiàn)于網(wǎng)頁(yè)及移動(dòng)端。其好處是讓用戶(hù)更聚焦，且不用離開(kāi)當(dāng)前頁(yè)面，更快更容易完成任務(wù)。

二、功能分類(lèi)

以彈窗功能和用途可分為：任務(wù)類(lèi)（引導(dǎo)操作）、內(nèi)容反饋、信息展示三大類(lèi)。模態(tài)彈窗一般是屬于任務(wù)類(lèi)型的，比如賬號(hào)登錄、刪除某個(gè)信息等等

1. 內(nèi)容反饋類(lèi)型

用戶(hù)操作用戶(hù)界面時(shí)，系統(tǒng)給出相應(yīng)的內(nèi)容反饋，在設(shè)計(jì)師設(shè)計(jì)界面時(shí)常用到“通知提示”、“全局提示”、“氣泡確認(rèn)框”三種類(lèi)型作為消息反饋。

它的“非模態(tài)”在于用戶(hù)操作后不打斷用戶(hù)的情況下及時(shí)地顯示出來(lái)，明確告知用戶(hù)的一些反饋結(jié)果，幫助用戶(hù)更加有效的完成界面中的復(fù)雜任務(wù)。

如下圖谷歌郵箱右下角的通知提示，明確告知兩個(gè)按鈕的使用含義，決定權(quán)在于用戶(hù)，同時(shí)不影響用戶(hù)其它操作

2. 信息提示類(lèi)型

存在的意義是及時(shí)有效的幫助用戶(hù)完成任務(wù)目標(biāo)，不需要用戶(hù)做特殊動(dòng)作或者轉(zhuǎn)換模式，就能看到和理解這些反饋，從而提高任務(wù)的操作效率和可理解程度。信息提示常常用到“文字提示”、“氣泡”、“警告提示”三種形式展現(xiàn)給用戶(hù)。如下圖的客服氣泡提示對(duì)應(yīng)用戶(hù)想解決問(wèn)題的相關(guān)路徑：

“非模態(tài)”彈窗中的“信息提示”類(lèi)型通常都需要進(jìn)行指定動(dòng)作操作后出現(xiàn)，比如編輯好內(nèi)容后點(diǎn)擊發(fā)送，通常會(huì)有發(fā)送成功的提醒。另外當(dāng)系統(tǒng)中出現(xiàn)一些成功、失敗、錯(cuò)誤、警示就需要“警告提示”告訴用戶(hù)；其中“文字提示”、“氣泡”它需要用戶(hù)懸停在某個(gè)焦點(diǎn)時(shí)出現(xiàn)，移除才消失，后面我也會(huì)講解到。

三、按體系分類(lèi)

彈窗體系分為模態(tài)彈框與非模態(tài)彈框兩種，模態(tài)彈框和非模態(tài)彈框最大的區(qū)別就是是否強(qiáng)制用戶(hù)交互。

模態(tài)彈框會(huì)打斷用戶(hù)的當(dāng)前操作流程，如果用戶(hù)不在彈框上操作，那么其余功能都使用不了；而非模態(tài)彈框僅僅是用于提醒用戶(hù)，用戶(hù)可以忽視繼續(xù)操作。

1. 模態(tài)彈框

模態(tài)彈框出現(xiàn)時(shí)，直到用戶(hù)明確與內(nèi)容做出回應(yīng)，才能消失。常見(jiàn)的有對(duì)話(huà)框、抽屜等。它的視覺(jué)層級(jí)非常高，屬于不操作不消失類(lèi)型。

• 優(yōu)勢(shì)：可以很好的獲取的用戶(hù)的視覺(jué)焦點(diǎn)，簡(jiǎn)單易操作、承載的信息量有較大的彈性空間；
• 劣勢(shì)：浮層彈窗給主操作流程造成較強(qiáng)的割裂，降低整個(gè)頁(yè)面瀏覽的流暢度。也正是這個(gè)原因很多產(chǎn)品為了減少用戶(hù)跳出率使用模態(tài)彈框非常謹(jǐn)慎；
• 適用場(chǎng)景：適用于主流程步驟中需要分支任務(wù)行為的場(chǎng)景。

新的花瓣web端不登錄彈框不消失，除非點(diǎn)擊右上角關(guān)閉鍵或者點(diǎn)擊后面蒙層。

2. 非模態(tài)化的

從出現(xiàn)到停留消失的時(shí)間大約3-5秒，用戶(hù)可以不用做出任何操作，繼續(xù)與頁(yè)面內(nèi)容進(jìn)行交互，是一種極輕量的弱彈框，不影響用戶(hù)體驗(yàn)。

• 優(yōu)勢(shì)：同時(shí)進(jìn)行多個(gè)操作，阻斷性弱；
• 劣勢(shì)：學(xué)習(xí)成本高，容易產(chǎn)生混亂，誤操作概率高；
• 適用場(chǎng)景：適用于理解難度大、多任務(wù)處理情況有較高的要求的場(chǎng)景。

上面警示提示時(shí)，下面【我已閱讀并同意語(yǔ)雀服務(wù)協(xié)議】是可操作的。

簡(jiǎn)單講，模態(tài)彈窗就是當(dāng)前必須完成后，才能繼續(xù)下一步；非模態(tài)彈窗隨時(shí)可關(guān)可不關(guān)，不影響當(dāng)前任務(wù)。

3. 非模態(tài)彈框存在的意義

“內(nèi)容反饋”及“信息提示”這兩種類(lèi)型都統(tǒng)稱(chēng)為“信息反饋”，因?yàn)樗鼈儍煞N類(lèi)型很相似，都屬于非模態(tài)彈框?！靶畔⒎答仭贝嬖诘囊饬x是及時(shí)有效的目的幫助用戶(hù)完成任務(wù)目標(biāo)，其中“有效”包含了“提供有用的信息反饋，提高任務(wù)的操作效率和可理解程度”。

1）有用

有用的「信息反饋」：

• 回應(yīng)操作結(jié)果：告訴用戶(hù)剛剛做了什么，之前的操作導(dǎo)致現(xiàn)所處的狀態(tài)，讓用戶(hù)感受到一切都在掌握之中；
• 操作路徑指導(dǎo)：告訴用戶(hù)哪些過(guò)程正在進(jìn)行中，下一步需要做什么，及時(shí)告訴這一步哪些地方操作有誤。

2）效率

提高用戶(hù)的操作效率：

• 操作行為反饋：在不打斷用戶(hù)行為操作的前提下提供良好的反饋機(jī)制，用戶(hù)看到反饋后可繼續(xù)操作當(dāng)前頁(yè)面；
• 提前告知錯(cuò)誤：在用戶(hù)出現(xiàn)錯(cuò)誤之前及時(shí)制止，盡量避免出現(xiàn)錯(cuò)誤后才的告知用戶(hù)；
• 減少系統(tǒng)報(bào)錯(cuò)：減少用戶(hù)出錯(cuò)率，設(shè)計(jì)師必須清楚不出錯(cuò)不代表用戶(hù)總是正確的，而是杜絕「自以為是」地糾錯(cuò)用戶(hù)錯(cuò)誤，正確引導(dǎo)用戶(hù)形成良好的操作環(huán)境。

四、彈框的組成元素

彈框的組成元素主要包含以下幾類(lèi)：

• 窗體容器（必要）：信息內(nèi)容的主要載體；
• 圖標(biāo)：一般跟著標(biāo)題；
• 標(biāo)題：標(biāo)明彈框的目的/主題信息（簡(jiǎn)單的信息確認(rèn)常常沒(méi)有標(biāo)題）；
• 提示文本（必要）：可以有多種信息展示，從一行文案到各種復(fù)雜的操作集合都可容納；
• 功能按鈕（必要）：供用戶(hù)選擇，一般不超過(guò)2個(gè) （常見(jiàn)一個(gè)確定按鈕，一個(gè)取消按鈕）；
• 關(guān)閉按鈕：關(guān)閉彈框按鈕，并非取消鍵，關(guān)閉按鈕是最為常規(guī)的操作，主要是每一個(gè)用戶(hù)對(duì)于它都足夠的熟悉。因此建議不需要改變關(guān)閉按鈕的位置，一般會(huì)有在彈窗內(nèi)與彈窗外兩種形式可供大家進(jìn)行選擇；
• 蒙層：提醒用戶(hù)蒙層后面內(nèi)容不可操作，聚焦當(dāng)前彈窗內(nèi)容（常見(jiàn)于模態(tài)彈框）。

五、非模態(tài)彈框的樣式框架對(duì)照表

1. 文字提示

做為輔助類(lèi)解釋說(shuō)明，常用做解釋該功能特點(diǎn)，常做為鼠標(biāo)的懸浮提示。

目前有不少產(chǎn)品，在對(duì)一些普通的字段進(jìn)行解釋說(shuō)明時(shí)，特別喜歡使用帶遮罩的模態(tài)彈窗，需要用戶(hù)點(diǎn)擊才能關(guān)閉，嚴(yán)重阻礙用戶(hù)當(dāng)前操作，這種設(shè)計(jì)是屬于不合理的。因?yàn)檫@樣簡(jiǎn)單的解釋說(shuō)明，用非模態(tài)彈窗來(lái)展現(xiàn)，用戶(hù)只需要懸停就能快速預(yù)覽相關(guān)內(nèi)容，還可以快速離開(kāi)（移開(kāi)觸發(fā)區(qū)的圖標(biāo)，或點(diǎn)擊空白區(qū)域）。

2. 通知提示

常用于系統(tǒng)級(jí)通知的被動(dòng)提醒 ，通知彈窗主要是為了將一些重要信息通知給用戶(hù)

3. 警告提示

長(zhǎng)文本提示建議增加標(biāo)題，表示提示的類(lèi)型或主題，用戶(hù)可快速理解主要內(nèi)容，內(nèi)容建議不超過(guò) 4 行。

Alert 默認(rèn)四種類(lèi)型的提示（這里顏色是固定的，比如付款成功一般是綠色，用戶(hù)已經(jīng)產(chǎn)生這種認(rèn)知，設(shè)計(jì)時(shí)不要用新的樣式讓用戶(hù)重新學(xué)習(xí)，人性是懶惰的），分別是：

• 普通提示 info：用于展示背景條件、政策信息、規(guī)范要求、當(dāng)前狀態(tài)等客觀(guān)內(nèi)容；
• 成功提示 success：用于展示已完成操作的成功狀態(tài)；
• 警告提示 warning：用于展示可能會(huì)導(dǎo)致某種后果的警示性文本；
• 錯(cuò)誤提示 error：用于展示當(dāng)前操作或者整體狀態(tài)有錯(cuò)誤，提示用戶(hù)修正或展示錯(cuò)誤相關(guān)信息。

提示框有描邊和填充這兩種變體可以使用，以便匹配不同的設(shè)計(jì)風(fēng)格。

標(biāo)準(zhǔn)（默認(rèn)）是淺色填充無(wú)邊框，填充（filled）是深色填充，描邊（outlined）只有邊框無(wú)填充。

注意：

1. 避免出現(xiàn) “你”，“你的”，“我”，“我的” 這類(lèi)詞語(yǔ)，因?yàn)檫@類(lèi)詞匯有時(shí)候會(huì)給人生疏和趾高?昂的感受；
2. 不用刻意避免在警告框中使用消極負(fù)面的文案。?戶(hù)知道警告框彈出是出現(xiàn)了問(wèn)題和危險(xiǎn)的情況。

4. 全局提示

位置一般在頁(yè)面頂端，常出現(xiàn)在用戶(hù)操作后的反饋，頁(yè)面最上層浮動(dòng)展示，暗示全局性。全局提示和警示提示狀態(tài)一樣默認(rèn)有5種狀態(tài)，其中多一條loading狀態(tài) 。例如當(dāng)我在語(yǔ)雀上編輯好文章發(fā)布成功后，發(fā)布成功會(huì)有個(gè)全局提示的提醒，這樣做為用戶(hù)的我知道目前是處于什么狀態(tài)。

5. 氣泡提示

鼠標(biāo) Hover/Click 時(shí)，可用于承載更多信息/輕量型的操作。

6. 氣泡確認(rèn)框

點(diǎn)擊元素，彈出氣泡確認(rèn)框，氣泡確認(rèn)框不對(duì)父級(jí)頁(yè)面造成影響，或者僅會(huì)父級(jí)頁(yè)面造成部分影響，摹客首次登錄進(jìn)去提示每個(gè)icon功能，但不影響后面面板的操作。

六、模態(tài)彈框的樣式框架對(duì)照表

1. 通知公告類(lèi)彈窗

營(yíng)銷(xiāo)彈框、公告通知彈框、提示類(lèi)消息彈框都屬于通知公告類(lèi)的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶(hù)具體操作，當(dāng)然某些場(chǎng)景也需要用戶(hù)簡(jiǎn)單輸入的操作，但這些操作往往不復(fù)雜。

如果用戶(hù)將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶(hù)已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。

適用通知公告類(lèi)彈框的場(chǎng)景（通常是重要的信息，需要加強(qiáng)用戶(hù)關(guān)注度）：

• 輕量型的頁(yè)面，可以快速回到原來(lái)的界面；
• 相對(duì)比較獨(dú)立，與原來(lái)的頁(yè)面互不干擾，完全不影響原來(lái)頁(yè)面的整體布局；
• 比較適合簡(jiǎn)單的一次性操作就能解決的內(nèi)容。

1）營(yíng)銷(xiāo)彈框

出于公司運(yùn)營(yíng)目標(biāo)為提高曝光率和營(yíng)收，或便于拉新和轉(zhuǎn)化。該框會(huì)在該網(wǎng)站加載出來(lái)后第一時(shí)間就會(huì)出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，不然不可操作其它。即便是他們產(chǎn)品運(yùn)營(yíng)知道這種方式比較遭人煩，也不得不如此，利益大于一切價(jià)值。

2）公告通知彈框

主要是為了將一些重要信息通知用戶(hù)，一般在用戶(hù)登錄后第一時(shí)間談粗，避免用戶(hù)錯(cuò)過(guò)。這些信息一般來(lái)自一些被觸發(fā)的事件，或者來(lái)自應(yīng)用開(kāi)發(fā)者的信息。如果這些信息比較重要，在應(yīng)用的通知中心也會(huì)保留這類(lèi)重要或者高級(jí)別的通知，以便用戶(hù)查看回顧。例如摹客首次登錄有個(gè)更新提醒通知通過(guò)后版本更新內(nèi)容，方便用戶(hù)知道。

3）提示類(lèi)消息彈框（包含對(duì)話(huà)框）

模擬系統(tǒng)的消息提示框而實(shí)現(xiàn)的一套模態(tài)對(duì)話(huà)框組件，常用與消息提示、確認(rèn)消息和提交內(nèi)容。

確定取消語(yǔ)言文字描述、標(biāo)題文字描述。

4）對(duì)話(huà)框

對(duì)話(huà)框強(qiáng)調(diào)了用戶(hù)與計(jì)算機(jī)進(jìn)行對(duì)話(huà)的過(guò)程，是疊加在應(yīng)用主窗口上的彈出框，一般在對(duì)話(huà)中它會(huì)給出消息或要求輸入。當(dāng)對(duì)話(huà)完成后，即可關(guān)閉對(duì)話(huà)框。說(shuō)人話(huà)就是，對(duì)話(huà)框一般需要用戶(hù)進(jìn)行操作，當(dāng)用戶(hù)輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會(huì)根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對(duì)話(huà)”的過(guò)程，因此稱(chēng)之為“對(duì)話(huà)框”。

2. 操作配置彈框

簡(jiǎn)單配置（表單內(nèi)容少，操作清晰）。

“簡(jiǎn)單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、更改名稱(chēng)等操作。

3. 標(biāo)簽頁(yè)彈框

有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，操作配置的彈窗無(wú)法滿(mǎn)足需求，需要更精細(xì)分層歸納。它的優(yōu)點(diǎn)是合理利用了空間布局，讓信息層級(jí)更清晰易懂，使用起來(lái)更加高效。

標(biāo)簽頁(yè)彈窗的設(shè)計(jì)需要找到信息之間的因果關(guān)系，單個(gè)彈窗中的標(biāo)簽頁(yè)不宜過(guò)多，一般不超過(guò)五個(gè)，如果多余5個(gè)標(biāo)簽，建議將其改為豎向顯示。

4. 分步彈框

分布彈框是分布表單的衍生品，與標(biāo)簽頁(yè)彈框接近，區(qū)別是分步彈框需要上一步完成才能進(jìn)行下一步，主要特點(diǎn)頭部會(huì)有進(jìn)度條告知當(dāng)前進(jìn)度和后續(xù)還有需要幾個(gè)步驟完成操作，另外一點(diǎn)是頁(yè)腳上常常會(huì)有下一步、上一步兩個(gè)選項(xiàng)供用戶(hù)進(jìn)行選擇。

5. 抽屜

抽屜指的是從當(dāng)前界面的“上下左右”側(cè)邊滑出相應(yīng)的表單內(nèi)容完成相應(yīng)操作，之前的內(nèi)容不丟失。

• 優(yōu)勢(shì)：承載的信息量有較大的彈性空間。
• 劣勢(shì)：由于信息集中在一側(cè)，導(dǎo)致視覺(jué)焦點(diǎn)不穩(wěn)定，如果長(zhǎng)時(shí)間工作，會(huì)產(chǎn)生不平衡的感覺(jué)。
• 適用場(chǎng)景：適用于當(dāng)前任務(wù)流中插入臨時(shí)任務(wù)的場(chǎng)景。

抽屜式彈框常見(jiàn)4種樣式，表格中出現(xiàn)較多，通常會(huì)以側(cè)滑的形式出現(xiàn)，有加遮罩層的，也有不加遮罩層的模態(tài)彈窗（不加遮罩層方便方便用戶(hù)進(jìn)行對(duì)比、參照和檢閱相關(guān)內(nèi)容，同時(shí)并不會(huì)影響用戶(hù)對(duì)界面其他區(qū)域的操作）。

6. 頁(yè)面跳轉(zhuǎn)

頁(yè)面跳轉(zhuǎn)后的新開(kāi)頁(yè)面是當(dāng)前頁(yè)面保留，新的內(nèi)容在新頁(yè)面中呈現(xiàn)。常見(jiàn)的頁(yè)面跳轉(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端很常見(jiàn)，實(shí)現(xiàn)難度和維護(hù)成本都很低。在設(shè)計(jì)時(shí)需要考慮好其中的關(guān)聯(lián)性，從而做出最合適的設(shè)計(jì)。

從頁(yè)面承載的內(nèi)容看，新建頁(yè)面＞抽屜式彈框＞對(duì)話(huà)框。

• 優(yōu)勢(shì)：信息承載能力強(qiáng)；有利于用戶(hù)對(duì)業(yè)務(wù)流程有更清晰的認(rèn)識(shí)，從而使得主流程的操作流暢度高。
• 劣勢(shì)：及時(shí)性反饋較低，頁(yè)面連貫性明顯小于對(duì)話(huà)框和抽屜式
• 適用場(chǎng)景：適用于特別重要的功能表單的填寫(xiě)場(chǎng)景。

但是我們不能單一從頁(yè)面內(nèi)容量的多少來(lái)確定使用哪種形式。通常內(nèi)容的深度較深最好采用抽屜式，內(nèi)容寬度較寬則彈框形式更為合理，新建頁(yè)面適合寬度與深度同時(shí)較大的產(chǎn)品中

本著孜孜不倦的學(xué)習(xí)心態(tài)，這次梳理也是因?yàn)樵诠ぷ髦杏龅?個(gè)小問(wèn)題。

1）模態(tài)彈框是不是一定有黑色透明蒙層，沒(méi)有蒙層時(shí)屬于什么性質(zhì)彈框？

這時(shí)候我各種渠道搜索之后發(fā)現(xiàn)有些大佬說(shuō)蒙層是模態(tài)彈框的標(biāo)志，并沒(méi)講原因，這種說(shuō)法完全不能接受。我在使用過(guò)程中碰到過(guò)沒(méi)有蒙層的彈框，存在即合理好奇心驅(qū)使我去問(wèn)了研發(fā)和產(chǎn)品同學(xué)，最后得出結(jié)論根據(jù)用戶(hù)使用場(chǎng)景不同，對(duì)蒙層的設(shè)計(jì)也不同。

原來(lái)是隨著產(chǎn)品對(duì)彈窗的使用，也會(huì)有需求采用不透明度為0的蒙層，最小化打斷用戶(hù)的操作的不良體驗(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)定為用戶(hù)專(zhuān)注寫(xiě)郵件不想被打擾場(chǎng)景，所以父級(jí)頁(yè)面加上蒙層不可操作，視覺(jué)聚焦當(dāng)前彈框操作窗口；當(dāng)新郵件窗口默認(rèn)模式時(shí)，產(chǎn)品判斷用戶(hù)可能是寫(xiě)郵件場(chǎng)景，同時(shí)可能需要翻閱或查找以往郵件，這時(shí)候父級(jí)頁(yè)面操作完全不受影響。

可以說(shuō)明蒙層取決于當(dāng)前操作是否需要參照父級(jí)頁(yè)面，如果填表需要參考父級(jí)頁(yè)面可以不需要蒙層，反之相反。

我寫(xiě)日?qǐng)?bào)時(shí)候覺(jué)得非常便利，有時(shí)候需要查看昨天日?qǐng)?bào)，看看計(jì)劃今日是否完成，以便提交今天日?qǐng)?bào)。如果這時(shí)候父級(jí)頁(yè)面不可操作，我需要多4-5步把昨天內(nèi)容復(fù)制過(guò)來(lái)，這無(wú)疑是非常累贅的操作。

2）為什么有的模態(tài)彈框右上角沒(méi)有關(guān)閉鍵？當(dāng)彈框下面有確認(rèn)和取消鍵可關(guān)閉彈框時(shí)，右上角關(guān)閉鍵多余能否去掉？

關(guān)于這個(gè)問(wèn)題不知道大家伙有沒(méi)有觀(guān)察到，早期win電腦的彈框右上角都有固定位置的關(guān)閉按鈕，發(fā)展到目前有些產(chǎn)品設(shè)計(jì)右上角保留關(guān)閉鍵，有些產(chǎn)品設(shè)計(jì)省去關(guān)閉鍵了，那么它們存在或消失的邏輯是什么呢？

上圖花瓣和Pinterest的彈框中，點(diǎn)擊蒙層都可關(guān)閉，同時(shí)花瓣右上角有關(guān)閉按鈕，這樣看來(lái)關(guān)閉按鈕似乎多余了。

我們?cè)倏瓷蠄D中的案例，對(duì)于這種表單頁(yè)，右下角取消鍵以及右上角的關(guān)閉都可以關(guān)閉彈框，導(dǎo)致存在兩個(gè)關(guān)閉鍵我認(rèn)為有以下幾點(diǎn)：

1. 視覺(jué)平衡（只針對(duì)彈框，這個(gè)原因占比很?。?；
2. 符合用戶(hù)習(xí)慣（由傳統(tǒng)win操作轉(zhuǎn)移，對(duì)于不需要的操作習(xí)慣性關(guān)閉，而不是取消）；
3. 交互一致性：出于一致性原則，整個(gè)產(chǎn)品彈框右上角都有關(guān)閉按鈕；
4. 提高無(wú)障礙訪(fǎng)問(wèn)：這個(gè)理解有點(diǎn)類(lèi)似鍵盤(pán)上esc鍵，退出當(dāng)前操作，在沒(méi)有確認(rèn)和取消按鈕時(shí)，這個(gè)關(guān)閉鍵就至關(guān)重要。

不同場(chǎng)景的理解：

對(duì)話(huà)框的「關(guān)閉」是對(duì)于彈窗頁(yè)面的一種反饋，它的含義是「關(guān)閉當(dāng)前彈窗，暫對(duì)彈窗內(nèi)容暫時(shí)不做處理」；而彈框里面「取消」是對(duì)彈框內(nèi)容的反饋

比如對(duì)話(huà)框給用戶(hù)，問(wèn)是否要加入活動(dòng)？如果用戶(hù)還沒(méi)想清楚，不想現(xiàn)在決定，點(diǎn)否表示拒絕不合適的，關(guān)閉彈窗就表示我現(xiàn)在不做決定。從操作上關(guān)閉和取消鍵判斷是一致的，用戶(hù)沒(méi)有激活活動(dòng)。

七、交互細(xì)節(jié)思考

1. 選擇：用對(duì)話(huà)框還是抽屜

與“對(duì)話(huà)框”對(duì)比，“抽屜”在使用場(chǎng)景也有它的優(yōu)劣勢(shì)。

• 優(yōu)勢(shì)：“抽屜”的頁(yè)面空間更大，它能夠承載更多的內(nèi)容、信息，它與主頁(yè)面親密度更高；
• 劣勢(shì)：“抽屜”的靈活度比較低，比如“對(duì)話(huà)框”可以根據(jù)業(yè)務(wù)的內(nèi)容多少去變化它的寬度與高度，而抽屜只能橫向/縱向降低尺寸。
• 一致性：例如某產(chǎn)品彈出的表單大多較長(zhǎng)，采用抽屜組件，為了保持體驗(yàn)的一致性，個(gè)別短表單也可以同樣采用抽屜。

“抽屜”適用范圍更小，大部分場(chǎng)景下都用在較復(fù)雜的表單及字段較多詳情頁(yè)。

“抽屜”在Web端的應(yīng)用中可分為：a. 內(nèi)容展示、b. 表單編輯這兩大類(lèi)型。

注釋?zhuān)?/strong>