模態，彈層，對話框，不管你如何稱呼它，現在讓我們來重新審視一下這個部分。當它第一次出現時，模態窗口曾經是一種優雅的視覺解決方案。首先它簡化了視覺，其次，它節省了屏幕空間。從那以后，設計師就非常樂意使用模態窗口，而且有些設計師甚至過度的使用它。模態窗口慢慢演變成了今天的這種可怕的彈窗。人們覺得它十分討厭，并且本能的、不自覺的忽略這些窗口。
定義：
一個模態窗口是一個覆蓋于軟件主要結構框架之上的窗口。它創造了這樣一種模式：模態窗口以一種子窗口的形式出現在主界面上方，使主界面可見但是不響應任何操作。用戶必須完成模態窗口上指定的操作之后，才可以回到主界面。
——維基百科
用法
你可以在你有如下需求時使用模態窗口：
獲取用戶的注意
當你必須打斷用戶當前正在進行的任務流，將用戶全部注意力引導到一個更加重要的事情上時。
需要用戶輸入
當你需要用戶輸入信息時。舉個例子，注冊或者登錄。
在內容中展示額外的信息
當你想在用戶消費主頁面中內容的同時想展示一些額外的信息的時候可以使用它。例如展示大圖或者視頻。
展示額外的信息（不是在內容中展示）
當你想展示一些不是直接依賴于母頁面額外信息，或者其他的一些不依賴于頁面的獨立選項。例如通知。
小貼士：不要用模態彈窗展示錯誤、成功、或者警告信息。讓這些信息留在頁面當中。
一個模態彈窗的詳細剖析
不好的彈層會妨礙任務的完成。通過下面的方法來保證你的彈窗不會犯這樣的錯誤：
1.逃生閥
給用戶一個離開的途徑，這樣他們就可以主動關閉彈窗?？梢酝ㄟ^如下的方式實現：
- 取消按鈕
- 關閉按鈕
- 退出按鍵
- 點擊彈窗以外的區域
易用性小貼士：每個彈窗都必須有一個可以通過鍵盤控制的快捷退出方式。例如應該可以使用ESC按鍵來關閉彈窗。
2.描述清晰的標題
通過標題告訴用戶一些信息。這樣可以讓用戶知道他們當前所處的位置——他們并沒有離開最初的頁面。
小貼士：呼出彈窗的按鈕中的文案應該與彈窗標題相呼應
3.按鈕
按鈕應該有一個可操作、可理解的名字。這取決于按鈕所處的具體情況。在模態彈窗中，一個“關閉”按鈕可以是一個按鈕或者僅僅是一個“X”。
小貼士：按鈕上的文案不要使人困惑。如果用戶點擊了取消按鈕，但是彈窗出現了另外一個取消按鈕，困惑就出現了，“我是在取消我的取消操作，還是在繼續之前的取消？”
4.大小和位置
一個模態窗口不應太大也不應太小，你希望它剛剛合適。目標是保存應有的信息，同時一個模態窗口不應該占據整個可視窗口。內容需要適應模態窗口。如果需要一個滾動條，你需要考慮創建另外一個頁面來代替它。
- 位置——屏幕中央偏上，因為在移動設備中，如果處于靠下的位置可能會在可是窗口中消失。
- 大小——不要占用整個屏幕超過50%以上的面積
5.焦點
當你使用燈箱效果（使背景變暗）來打開一個模態窗口時，由于用戶無法再與母頁面進行交互，因此用戶的注意力被吸引到模態窗口中。
小貼士：此時要將鍵盤的光標焦點同時移到模態窗口中
6.讓用戶的操作觸發開關
不要突然彈出一個模態窗口，這樣會嚇到用戶。讓用戶產生一個操作行為，例如點擊按鈕、鏈接或者選擇一個選項，以此來出發模態窗口。不請自來的模態窗口會驚嚇到用戶，并且會導致用戶直接忽略其中的內容。
移動設備中的模態彈窗
模態彈窗和移動設備并不能很容易的和諧相處。由于模態彈窗的面積通常較大，占用了屏幕或大或小的一部分區域，因此在使用模態彈窗的同時消費內容就變得不那么容易了。加入設備鍵盤或者嵌入的滾動條等等元素，用戶會不?？s放屏幕，視圖尋找模態彈窗的位置。模態彈窗可以有很多替代的表達方式，最好不要在移動設備中使用它們。
輔助功能
鍵盤
創建模態彈窗時，時刻記得添加可使用的鍵盤操作?？紤]如下幾點：
打開彈窗——呼起彈窗的元素必須是鍵盤可操作的
將焦點移動到對話框中——當模態彈窗打開之后，鍵盤焦點應該移動到模態彈窗的最頂端
管理鍵盤焦點——當焦點移動到對話框中之后，它必須固定在輸入框中，直到對話框關閉
關閉對話框——所有彈窗都應該有一個鍵盤可控的退出方式
更多列表查看 Nomensa’s blog article
ARIA
可訪問的富網絡程序（Accessible Rich Internet Applications）定義了一種讓網站內容和網站應用更加便于使用的方法。
如下所示的ARIA標簽可以很好的創建可用的模態彈窗：
Role = “dialog” , aria-hidden, aria-label
了解更多的關于ARIA的信息，點擊查看Smashing’s Magazine article
同時，不要忽略低視力人群用戶。他們可能在使用系統中的放大鏡功能來放大屏幕中的內容。當屏幕放大時，用戶只能看到屏幕的一部分內容。模態彈窗也要考慮到對他們的影響。
總結
如果用戶被訓練的不自覺的關閉模態彈窗，你還有什么理由使用它們呢？
獲取用戶的注意，同時保證內容和視覺上的簡潔清晰是模態彈窗最大的優點。但是，它也有著自己的缺點，它會阻斷用戶工作流，并且使用戶無法與隱藏在模態彈窗后面的母頁面中的內容進行交互。模態彈窗并不總是最好的解決方案。當你做出選擇的時候，考慮如下幾點：
檢查清單：
- 你要在何時使用模態彈窗？
- 如何使用模態彈窗？
- 模態彈窗要長成什么樣子？
- 模態彈窗中需要展示什么信息？
這里有一些可以替代模態彈窗的UI控件：非模態彈窗，也稱為toast（該術語最早被谷歌的Material Design以及微軟提出）。點擊如下內容來了解更多：
參考文獻
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，在翻譯過程中將與設計主題無關的部分進行了刪節
