模態(tài)已成為今天的可怕的彈出窗口的版本。用戶發(fā)現(xiàn)模態(tài)窗口很騷擾人，人們本能地自動關(guān)閉這些窗口。

模態(tài)窗口、疊加窗口、對話框、無論你叫它們什么，是時候重溫這個UI模式了。當(dāng)它們第一次來到現(xiàn)場，模態(tài)窗口是一個優(yōu)雅的關(guān)于UI問題的解決方案。第一是它簡化了UI，第二是它節(jié)省了屏幕空間。從那時起，設(shè)計(jì)師就已經(jīng)采用了模態(tài)窗口，有些已經(jīng)采取了極端方式。模態(tài)已成為今天的可怕的彈出窗口的版本。用戶發(fā)現(xiàn)模態(tài)窗口很騷擾人，人們本能地自動關(guān)閉這些窗口。

定義

模態(tài)窗口是位于應(yīng)用程序主窗口頂部的元素。它創(chuàng)建一個模態(tài)，該模態(tài)禁用于主窗口，但保持它與模態(tài)窗口可見作為它前面的子窗口。用戶必須與模態(tài)窗口交互，才能返回到原有的應(yīng)用程序。—維基百科

用法

當(dāng)你需要的時候，你可以考慮使用模態(tài)窗口。

吸引用戶注意力

當(dāng)你想要抓住用戶對更重要的事情的注意力而打斷用戶當(dāng)前的任務(wù)時，來使用模態(tài)窗口。

需要用戶輸入

當(dāng)你想要從用戶那里獲取信息時使用。例如，用戶注冊和登錄。

在界面環(huán)境中顯示其他信息

當(dāng)你想顯示其他信息而不丟失父頁面的環(huán)境時使用。例如，顯示較大的圖像或視頻。

顯示其他信息（不在界面環(huán)境中）

當(dāng)你想要顯示與父頁面不直接相關(guān)的信息或與其他頁面“獨(dú)立”的選項(xiàng)時使用。例如，通知，但這可以通過“非阻塞”模態(tài)來完成。

注意：不要使用顯示錯誤，成功或警告的消息。要讓它們在頁面上。

模態(tài)窗口的剖析

執(zhí)行效果不佳的疊加可能會阻礙任務(wù)完成。為了確保你的模態(tài)不會妨礙你的方式，請務(wù)必包含以下內(nèi)容：

1.逃生出口

給用戶一種逃避方式，給他們一種方式來關(guān)閉模式。這可以通過以下方式實(shí)現(xiàn)：

• 取消按鈕
• 關(guān)閉按鈕
• 換碼鍵
• 在窗口外單擊

輔助功能提示;每個模態(tài)窗口必須具有一個鍵盤可訪問控制以關(guān)閉該窗口。例如，換碼鍵應(yīng)該關(guān)閉窗口。

2.描述性標(biāo)題

用模式標(biāo)題向用戶提供上下文。這能讓用戶知道他/她在哪里，因?yàn)樗麄儧]有離開原始頁面。

點(diǎn)擊推特按鈕-模態(tài)標(biāo)題:組成新的推特。提供上下文。

提示：按鈕標(biāo)簽（啟動模態(tài)）和模態(tài)標(biāo)題應(yīng)該匹配。

3.按鈕

按鈕標(biāo)簽應(yīng)該有可操作的，可理解的名稱。這適用于任何情況下的按鈕。對于模態(tài)，“關(guān)閉”按鈕應(yīng)以標(biāo)記“關(guān)閉”的按鈕或“X”的形式存在。

侵襲是已經(jīng)清晰標(biāo)記的按鈕

注意：不要讓按鈕標(biāo)簽混淆。如果用戶正在嘗試取消并且模態(tài)顯現(xiàn)時出現(xiàn)另一個取消按鈕，則會發(fā)生混亂?！拔乙∠麆h除嗎？還是繼續(xù)我的刪除？”

4.尺寸和位置

模態(tài)窗口不應(yīng)該太大或太小，你想要讓它剛剛好。目標(biāo)是協(xié)調(diào)好環(huán)境，因此模態(tài)不應(yīng)該占據(jù)整個屏幕視圖。內(nèi)容應(yīng)該適合模態(tài)。如果需要滾動條，你可以考慮創(chuàng)建一個新頁面。

• 位置-上半部分的屏幕，由于如果放置較低的話在移動視圖模態(tài)可能會丟失
• 尺寸-不要使用超過50%的屏幕覆蓋

5.焦點(diǎn)

當(dāng)你打開“封閉”模態(tài)（用戶無法繼續(xù)與模態(tài)交互）使用燈箱效果（使背景變暗）。這引起對模態(tài)的注意，并指示用戶不能與父頁面交互。

輔助功能提示：將鍵盤焦點(diǎn)放在模態(tài)上

6.用戶啟動

彈出的模態(tài)不要讓用戶感到驚訝。讓用戶執(zhí)行操作，如單擊按鈕，跟隨鏈接或選項(xiàng)，觸發(fā)模式。不請自來的模式可能會使用戶感動驚訝，并導(dǎo)致快速解除窗口。

模態(tài)的開始由點(diǎn)擊登錄

移動模式

模態(tài)和移動設(shè)備通常不能一起用。因?yàn)槟B(tài)太大，查看內(nèi)容很困難，占用太多或太小的屏幕空間。添加元素，如設(shè)備鍵盤和嵌套滾動條，用戶左右捏和縮放試圖捕捉模態(tài)窗口的字段。有更好的替代模態(tài)且不應(yīng)該在移動設(shè)備上使用。

模態(tài)窗口做的很不錯的—Facebook

輔助功能

鍵盤

當(dāng)創(chuàng)建模態(tài)時記得添加鍵盤輔助功能。考慮以下內(nèi)容:

• 打開模態(tài)——觸發(fā)對話框的元素必須可以通過鍵盤訪問
• 將焦點(diǎn)移動到對話框——一旦模態(tài)窗口打開，鍵盤焦點(diǎn)需要移動到頂部
• 管理鍵盤焦點(diǎn)——一旦焦點(diǎn)移動到對話框中，它應(yīng)該被“捕獲”在其中，直到對話框關(guān)閉。
• 關(guān)閉對話框——每個疊加窗口必須具有鍵盤可訪問控件才能關(guān)閉該窗口。

有關(guān)上面列表的更多信息，請查看Nomensa的博客文章

ARIA

可訪問的豐富網(wǎng)絡(luò)應(yīng)用程序（ARIA）定義了使萬維網(wǎng)的內(nèi)容和應(yīng)用程序更容易訪問的方法。

以下ARIA標(biāo)簽可以有助于創(chuàng)建可訪問的模態(tài)：Role = “dialog”?, aria-hidden, aria-label

有關(guān)ARIA的更多信息，請查閱Smashing雜志文章

此外，記住低視力用戶。他們可以在顯示器上使用屏幕放大鏡來放大屏幕內(nèi)容。一旦放大，用戶只能看到部分屏幕。這里的模態(tài)將具有相同的效果，因?yàn)樗鼈冊谝苿印?/p>

結(jié)論

如果人們已經(jīng)被訓(xùn)練成自動嘗試關(guān)閉模態(tài)的話，為什么要使用它們呢？

獲得用戶的注意，保持環(huán)境和簡化UI是模態(tài)的最佳優(yōu)勢。然而，也有一些缺點(diǎn)，因?yàn)樗鼈冎袛嗔擞脩袅?，并且通過隱藏模態(tài)后面的內(nèi)容使得不能與父頁面交互。模態(tài)可能不總是答案。做出選擇時請考慮以下事項(xiàng)：

清單

• 我們什么時候顯示模態(tài)？
• 我們?nèi)绾物@示模態(tài)？
• 模態(tài)是什么樣子的？
• 我們提供和收集什么信息？

有一個替代的UI組件模態(tài)：非模態(tài)或也叫作toast（谷歌在材料設(shè)計(jì)和微軟中使用的術(shù)語）。查看我的下一篇文章，了解更多。

參考：

Overlays?—?Patterny

Modal Windows?—?UI Patterns

Overuse of Overlays?—?NNgroup

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

作者信息：Naema Baskanderi

原文地址：https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c#.honbti3xi

本文由 @SKYUI 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。