模態(tài)，彈層负溪，對話框透揣，不管你如何稱呼它，現(xiàn)在讓我們來重新審視一下這個部分川抡。當(dāng)它第一次出現(xiàn)時辐真，模態(tài)窗口曾經(jīng)是一種優(yōu)雅的視覺解決方案。首先它簡化了視覺，其次拆祈，它節(jié)省了屏幕空間恨闪。從那以后，設(shè)計師就非常樂意使用模態(tài)窗口放坏，而且有些設(shè)計師甚至過度的使用它咙咽。模態(tài)窗口慢慢演變成了今天的這種可怕的彈窗。人們覺得它十分討厭淤年，并且本能的钧敞、不自覺的忽略這些窗口。
定義：
一個模態(tài)窗口是一個覆蓋于軟件主要結(jié)構(gòu)框架之上的窗口麸粮。它創(chuàng)造了這樣一種模式：模態(tài)窗口以一種子窗口的形式出現(xiàn)在主界面上方溉苛，使主界面可見但是不響應(yīng)任何操作。用戶必須完成模態(tài)窗口上指定的操作之后弄诲，才可以回到主界面愚战。
——維基百科
用法
你可以在你有如下需求時使用模態(tài)窗口：
獲取用戶的注意
當(dāng)你必須打斷用戶當(dāng)前正在進行的任務(wù)流，將用戶全部注意力引導(dǎo)到一個更加重要的事情上時齐遵。
需要用戶輸入
當(dāng)你需要用戶輸入信息時寂玲。舉個例子，注冊或者登錄梗摇。
在內(nèi)容中展示額外的信息
當(dāng)你想在用戶消費主頁面中內(nèi)容的同時想展示一些額外的信息的時候可以使用它拓哟。例如展示大圖或者視頻。
展示額外的信息（不是在內(nèi)容中展示）
當(dāng)你想展示一些不是直接依賴于母頁面額外信息伶授，或者其他的一些不依賴于頁面的獨立選項断序。例如通知。
小貼士：不要用模態(tài)彈窗展示錯誤糜烹、成功违诗、或者警告信息。讓這些信息留在頁面當(dāng)中疮蹦。
一個模態(tài)彈窗的詳細剖析
不好的彈層會妨礙任務(wù)的完成较雕。通過下面的方法來保證你的彈窗不會犯這樣的錯誤：
1.逃生閥
給用戶一個離開的途徑，這樣他們就可以主動關(guān)閉彈窗挚币。可以通過如下的方式實現(xiàn)：
- 取消按鈕
- 關(guān)閉按鈕
- 退出按鍵
- 點擊彈窗以外的區(qū)域
易用性小貼士：每個彈窗都必須有一個可以通過鍵盤控制的快捷退出方式扣典。例如應(yīng)該可以使用ESC按鍵來關(guān)閉彈窗妆毕。
2.描述清晰的標題
通過標題告訴用戶一些信息。這樣可以讓用戶知道他們當(dāng)前所處的位置——他們并沒有離開最初的頁面贮尖。
小貼士：呼出彈窗的按鈕中的文案應(yīng)該與彈窗標題相呼應(yīng)
3.按鈕
按鈕應(yīng)該有一個可操作、可理解的名字薪前。這取決于按鈕所處的具體情況润努。在模態(tài)彈窗中，一個“關(guān)閉”按鈕可以是一個按鈕或者僅僅是一個“X”示括。
小貼士：按鈕上的文案不要使人困惑铺浇。如果用戶點擊了取消按鈕，但是彈窗出現(xiàn)了另外一個取消按鈕垛膝，困惑就出現(xiàn)了鳍侣，“我是在取消我的取消操作，還是在繼續(xù)之前的取消吼拥？”
4.大小和位置
一個模態(tài)窗口不應(yīng)太大也不應(yīng)太小倚聚，你希望它剛剛合適。目標是保存應(yīng)有的信息凿可，同時一個模態(tài)窗口不應(yīng)該占據(jù)整個可視窗口惑折。內(nèi)容需要適應(yīng)模態(tài)窗口。如果需要一個滾動條枯跑，你需要考慮創(chuàng)建另外一個頁面來代替它惨驶。
- 位置——屏幕中央偏上，因為在移動設(shè)備中全肮，如果處于靠下的位置可能會在可是窗口中消失敞咧。
- 大小——不要占用整個屏幕超過50%以上的面積
5.焦點
當(dāng)你使用燈箱效果（使背景變暗）來打開一個模態(tài)窗口時，由于用戶無法再與母頁面進行交互辜腺，因此用戶的注意力被吸引到模態(tài)窗口中休建。
小貼士：此時要將鍵盤的光標焦點同時移到模態(tài)窗口中
6.讓用戶的操作觸發(fā)開關(guān)
不要突然彈出一個模態(tài)窗口，這樣會嚇到用戶评疗。讓用戶產(chǎn)生一個操作行為测砂，例如點擊按鈕、鏈接或者選擇一個選項百匆，以此來出發(fā)模態(tài)窗口砌些。不請自來的模態(tài)窗口會驚嚇到用戶，并且會導(dǎo)致用戶直接忽略其中的內(nèi)容加匈。
移動設(shè)備中的模態(tài)彈窗
模態(tài)彈窗和移動設(shè)備并不能很容易的和諧相處存璃。由于模態(tài)彈窗的面積通常較大，占用了屏幕或大或小的一部分區(qū)域雕拼，因此在使用模態(tài)彈窗的同時消費內(nèi)容就變得不那么容易了纵东。加入設(shè)備鍵盤或者嵌入的滾動條等等元素，用戶會不蜕犊埽縮放屏幕偎球，視圖尋找模態(tài)彈窗的位置洒扎。模態(tài)彈窗可以有很多替代的表達方式，最好不要在移動設(shè)備中使用它們衰絮。
輔助功能
鍵盤
創(chuàng)建模態(tài)彈窗時袍冷，時刻記得添加可使用的鍵盤操作∶担考慮如下幾點：
打開彈窗——呼起彈窗的元素必須是鍵盤可操作的
將焦點移動到對話框中——當(dāng)模態(tài)彈窗打開之后胡诗，鍵盤焦點應(yīng)該移動到模態(tài)彈窗的最頂端
管理鍵盤焦點——當(dāng)焦點移動到對話框中之后，它必須固定在輸入框中镊掖，直到對話框關(guān)閉
關(guān)閉對話框——所有彈窗都應(yīng)該有一個鍵盤可控的退出方式
更多列表查看 Nomensa’s blog article
ARIA
可訪問的富網(wǎng)絡(luò)程序（Accessible Rich Internet Applications）定義了一種讓網(wǎng)站內(nèi)容和網(wǎng)站應(yīng)用更加便于使用的方法乃戈。
如下所示的ARIA標簽可以很好的創(chuàng)建可用的模態(tài)彈窗：
Role = “dialog” , aria-hidden, aria-label
了解更多的關(guān)于ARIA的信息，點擊查看Smashing’s Magazine article
同時亩进，不要忽略低視力人群用戶症虑。他們可能在使用系統(tǒng)中的放大鏡功能來放大屏幕中的內(nèi)容。當(dāng)屏幕放大時归薛，用戶只能看到屏幕的一部分內(nèi)容谍憔。模態(tài)彈窗也要考慮到對他們的影響。
總結(jié)
如果用戶被訓(xùn)練的不自覺的關(guān)閉模態(tài)彈窗主籍，你還有什么理由使用它們呢习贫？
獲取用戶的注意，同時保證內(nèi)容和視覺上的簡潔清晰是模態(tài)彈窗最大的優(yōu)點千元。但是苫昌，它也有著自己的缺點，它會阻斷用戶工作流幸海，并且使用戶無法與隱藏在模態(tài)彈窗后面的母頁面中的內(nèi)容進行交互祟身。模態(tài)彈窗并不總是最好的解決方案。當(dāng)你做出選擇的時候物独，考慮如下幾點：
檢查清單：
- 你要在何時使用模態(tài)彈窗袜硫？
- 如何使用模態(tài)彈窗？
- 模態(tài)彈窗要長成什么樣子挡篓？
- 模態(tài)彈窗中需要展示什么信息婉陷？
這里有一些可以替代模態(tài)彈窗的UI控件：非模態(tài)彈窗，也稱為toast（該術(shù)語最早被谷歌的Material Design以及微軟提出）官研。點擊如下內(nèi)容來了解更多：
參考文獻
10 Guidelines to Consider when using Overlays?—?UX for the Masses
Making Modal Windows Better For Everyone?—?Smashing Magazine
How to improve the accessibility of overlay windows?—?Nomensa
譯者注：譯自Medium秽澳，在翻譯過程中將與設(shè)計主題無關(guān)的部分進行了刪節(jié)
