UI最佳實踐：深度解析模態窗口

模態已成為今天的可怕的彈出窗口的版本。用戶發現模態窗口很騷擾人，人們本能地自動關閉這些窗口。

模態窗口、疊加窗口、對話框、無論你叫它們什麼，是時候重溫這個UI模式了。當它們第一次來到現場，模態窗口是一個優雅的關於UI問題的解決方案。第一是它簡化了UI，第二是它節省了屏幕空間。從那時起，設計師就已經採用了模態窗口，有些已經採取了極端方式。模態已成為今天的可怕的彈出窗口的版本。用戶發現模態窗口很騷擾人，人們本能地自動關閉這些窗口。

定義

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

用法

當你需要的時候，你可以考慮使用模態窗口。

吸引用戶注意力

當你想要抓住用戶對更重要的事情的注意力而打斷用戶當前的任務時，來使用模態窗口。

需要用戶輸入

當你想要從用戶那裡獲取信息時使用。例如，用戶註冊和登錄。

在界面環境中顯示其他信息

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

顯示其他信息（不在界面環境中）

當你想要顯示與父頁面不直接相關的信息或與其他頁面「獨立」的選項時使用。例如，通知，但這可以通過「非阻塞」模態來完成。

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

模態窗口的剖析

執行效果不佳的疊加可能會阻礙任務完成。為了確保你的模態不會妨礙你的方式，請務必包含以下內容：

1.逃生出口

給用戶一種逃避方式，給他們一種方式來關閉模式。這可以通過以下方式實現：

• 取消按鈕
• 關閉按鈕
• 換碼鍵
• 在窗口外單擊

輔助功能提示;每個模態窗口必須具有一個鍵盤可訪問控制以關閉該窗口。例如，換碼鍵應該關閉窗口。

2.描述性標題

用模式標題向用戶提供上下文。這能讓用戶知道他/她在哪裡，因為他們沒有離開原始頁面。

點擊推特按鈕-模態標題:組成新的推特。提供上下文。

提示：按鈕標籤（啟動模態）和模態標題應該匹配。

3.按鈕

按鈕標籤應該有可操作的，可理解的名稱。這適用於任何情況下的按鈕。對於模態，「關閉」按鈕應以標記「關閉」的按鈕或「X」的形式存在。

侵襲是已經清晰標記的按鈕

注意：不要讓按鈕標籤混淆。如果用戶正在嘗試取消並且模態顯現時出現另一個取消按鈕，則會發生混亂。「我要取消刪除嗎？還是繼續我的刪除？」

4.尺寸和位置

模態窗口不應該太大或太小，你想要讓它剛剛好。目標是協調好環境，因此模態不應該佔據整個屏幕視圖。內容應該適合模態。如果需要滾動條，你可以考慮創建一個新頁面。

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

5.焦點

當你打開「封閉」模態（用戶無法繼續與模態交互）使用燈箱效果（使背景變暗）。這引起對模態的注意，並指示用戶不能與父頁面交互。

輔助功能提示：將鍵盤焦點放在模態上

6.用戶啟動

彈出的模態不要讓用戶感到驚訝。讓用戶執行操作，如單擊按鈕，跟隨鏈接或選項，觸發模式。不請自來的模式可能會使用戶感動驚訝，並導致快速解除窗口。

模態的開始由點擊登錄

移動模式

模態和移動設備通常不能一起用。因為模態太大，查看內容很困難，佔用太多或太小的屏幕空間。添加元素，如設備鍵盤和嵌套滾動條，用戶左右捏和縮放試圖捕捉模態窗口的欄位。有更好的替代模態且不應該在移動設備上使用。

模態窗口做的很不錯的—Facebook

輔助功能

鍵盤

當創建模態時記得添加鍵盤輔助功能。考慮以下內容:

• 打開模態——觸發對話框的元素必須可以通過鍵盤訪問
• 將焦點移動到對話框——一旦模態窗口打開，鍵盤焦點需要移動到頂部
• 管理鍵盤焦點——一旦焦點移動到對話框中，它應該被「捕獲」在其中，直到對話框關閉。
• 關閉對話框——每個疊加窗口必須具有鍵盤可訪問控制項才能關閉該窗口。

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

ARIA

可訪問的豐富網路應用程序（ARIA）定義了使萬維網的內容和應用程序更容易訪問的方法。

以下ARIA標籤可以有助於創建可訪問的模態：Role = 「dialog」 , aria-hidden, aria-label

有關ARIA的更多信息，請查閱Smashing雜誌文章

此外，記住低視力用戶。他們可以在顯示器上使用屏幕放大鏡來放大屏幕內容。一旦放大，用戶只能看到部分屏幕。這裡的模態將具有相同的效果，因為它們在移動。

結論

如果人們已經被訓練成自動嘗試關閉模態的話，為什麼要使用它們呢？

獲得用戶的注意，保持環境和簡化UI是模態的最佳優勢。然而，也有一些缺點，因為它們中斷了用戶流，並且通過隱藏模態後面的內容使得不能與父頁面交互。模態可能不總是答案。做出選擇時請考慮以下事項：

清單

• 我們什麼時候顯示模態？
• 我們如何顯示模態？
• 模態是什麼樣子的？
• 我們提供和收集什麼信息？

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

作者信息：Naema Baskanderi

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

本文由 @SKYUI 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。