模態(tài)窗口、疊加窗口译暂、對話框抠忘、無論你叫它們什么，是時候重溫這個UI模式了外永。當它們第一次來到現(xiàn)場崎脉，模態(tài)窗口是一個優(yōu)雅的關(guān)于UI問題的解決方案。第一是它簡化了UI,第二是它節(jié)省了屏幕空間伯顶。從那時起囚灼，設計師就已經(jīng)采用了模態(tài)窗口，有些已經(jīng)采取了極端方式祭衩。模態(tài)已成為今天的可怕的彈出窗口的版本灶体。用戶發(fā)現(xiàn)模態(tài)窗口很騷擾人，人們本能地自動關(guān)閉這些窗口汪厨。
定義：
模態(tài)窗口是位于應用程序主窗口頂部的元素赃春。它創(chuàng)建一個模態(tài)，該模態(tài)禁用于主窗口劫乱，但保持它與模態(tài)窗口可見作為它前面的子窗口织中。用戶必須與模態(tài)窗口交互锥涕，才能返回到原有的應用程序。---維基百科
用法
當你需要的時候狭吼，你可以考慮使用模態(tài)窗口层坠。
吸引用戶注意力
當你想要抓住用戶對更重要的事情的注意力而打斷用戶當前的任務時，來使用模態(tài)窗口刁笙。
需要用戶輸入
當你想要從用戶那里獲取信息時使用破花。例如，用戶注冊和登錄疲吸。
在界面環(huán)境中顯示其他信息
當你想顯示其他信息而不丟失父頁面的環(huán)境時使用座每。例如，顯示較大的圖像或視頻摘悴。
顯示其他信息（不在界面環(huán)境中）
當你想要顯示與父頁面不直接相關(guān)的信息或與其他頁面“獨立”的選項時使用峭梳。例如，通知蹂喻，但這可以通過“非阻塞”模態(tài)來完成葱椭。
注意：不要使用顯示錯誤，成功或警告的消息口四。要讓它們在頁面上孵运。
模態(tài)窗口的剖析
執(zhí)行效果不佳的疊加可能會阻礙任務完成。為了確保你的模態(tài)不會妨礙你的方式蔓彩，請務必包含以下內(nèi)容：
1.逃生出口
給用戶一種逃避方式治笨，給他們一種方式來關(guān)閉模式。這可以通過以下方式實現(xiàn)：
---取消按鈕
---關(guān)閉按鈕
---換碼鍵
---在窗口外單擊
輔助功能提示;每個模態(tài)窗口必須具有一個鍵盤可訪問控制以關(guān)閉該窗口粪小。例如大磺，換碼鍵應該關(guān)閉窗口。
2.描述性標題
用模式標題向用戶提供上下文探膊。這能讓用戶知道他/她在哪里，因為他們沒有離開原始頁面待榔。
提示：按鈕標簽（啟動模態(tài)）和模態(tài)標題應該匹配锐锣。
3.按鈕
按鈕標簽應該有可操作的腌闯，可理解的名稱。這適用于任何情況下的按鈕雕憔。對于模態(tài)姿骏，“關(guān)閉”按鈕應以標記“關(guān)閉”的按鈕或“X”的形式存在。
注意：不要讓按鈕標簽混淆斤彼。如果用戶正在嘗試取消并且模態(tài)顯現(xiàn)時出現(xiàn)另一個取消按鈕分瘦，則會發(fā)生混亂蘸泻。“我要取消刪除嗎嘲玫？還是繼續(xù)我的刪除悦施？”
4.尺寸和位置
模態(tài)窗口不應該太大或太小，你想要讓它剛剛好去团。目標是協(xié)調(diào)好環(huán)境抡诞，因此模態(tài)不應該占據(jù)整個屏幕視圖。內(nèi)容應該適合模態(tài)土陪。如果需要滾動條昼汗，你可以考慮創(chuàng)建一個新頁面。
---?位置-上半部分的屏幕鬼雀，由于如果放置較低的話在移動視圖模態(tài)可能會丟失
---?尺寸-不要使用超過50%的屏幕覆蓋
5.焦點
當你打開“封閉”模態(tài)（用戶無法繼續(xù)與模態(tài)交互）使用燈箱效果（使背景變暗）乔遮。這引起對模態(tài)的注意，并指示用戶不能與父頁面交互取刃。
輔助功能提示：將鍵盤焦點放在模態(tài)上
6.用戶啟動
彈出的模態(tài)不要讓用戶感到驚訝蹋肮。讓用戶執(zhí)行操作，如單擊按鈕璧疗，跟隨鏈接或選項坯辩，觸發(fā)模式。不請自來的模式可能會使用戶感動驚訝崩侠，并導致快速解除窗口漆魔。
移動模式
模態(tài)和移動設備通常不能一起用。因為模態(tài)太大却音，查看內(nèi)容很困難改抡，占用太多或太小的屏幕空間。添加元素系瓢，如設備鍵盤和嵌套滾動條阿纤，用戶左右捏和縮放試圖捕捉模態(tài)窗口的字段。有更好的替代模態(tài)且不應該在移動設備上使用夷陋。
輔助功能
鍵盤
當創(chuàng)建模態(tài)時記得添加鍵盤輔助功能欠拾。考慮以下內(nèi)容:
打開模態(tài)——觸發(fā)對話框的元素必須可以通過鍵盤訪問
將焦點移動到對話框——一旦模態(tài)窗口打開骗绕，鍵盤焦點需要移動到頂部
管理鍵盤焦點——一旦焦點移動到對話框中藐窄，它應該被“捕獲”在其中，直到對話框關(guān)閉酬土。
關(guān)閉對話框——每個疊加窗口必須具有鍵盤可訪問控件才能關(guān)閉該窗口荆忍。
有關(guān)上面列表的更多信息，請查看Nomensa的博客文章
ARIA
可訪問的豐富網(wǎng)絡應用程序（ARIA）定義了使萬維網(wǎng)的內(nèi)容和應用程序更容易訪問的方法。
以下ARIA標簽可以有助于創(chuàng)建可訪問的模態(tài)：Role = “dialog”?,aria-hidden, aria-label
有關(guān)ARIA的更多信息刹枉，請查閱Smashing雜志文章
此外叽唱，記住低視力用戶。他們可以在顯示器上使用屏幕放大鏡來放大屏幕內(nèi)容嘶卧。一旦放大尔觉，用戶只能看到部分屏幕。這里的模態(tài)將具有相同的效果芥吟，因為它們在移動侦铜。
結(jié)論
如果人們已經(jīng)被訓練成自動嘗試關(guān)閉模態(tài)的話，為什么要使用它們呢钟鸵？
獲得用戶的注意钉稍，保持環(huán)境和簡化UI是模態(tài)的最佳優(yōu)勢。然而棺耍，也有一些缺點贡未，因為它們中斷了用戶流，并且通過隱藏模態(tài)后面的內(nèi)容使得不能與父頁面交互蒙袍。模態(tài)可能不總是答案俊卤。做出選擇時請考慮以下事項：
清單
?我們什么時候顯示模態(tài)？
?我們?nèi)绾物@示模態(tài)害幅？
?模態(tài)是什么樣子的消恍？
?我們提供和收集什么信息？
有一個替代的UI組件模態(tài)：非模態(tài)或也叫作toast（谷歌在材料設計和微軟中使用的術(shù)語）以现。查看我的下一篇文章狠怨，了解更多。
參考：
10 Guidelines to Consider whenusing Overlays—UX for the Masses
MakingModal Windows Better For Everyone—Smashing Magazine
Howto improve the accessibility of overlay windows—Nomensa
原文鏈接：https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c#.honbti3xi
作者信息：Naema?Baskanderi
譯文出自：SKYUI
歡迎關(guān)注SKYUI官方微博“SKYUIHOME”
官方微信公眾賬號“SKYUIUX”?
