文章目錄

• 前言
• 定義
• 用法
• • 吸引用戶注意力
  • 需要用戶輸入
  • 在界面環境中顯示其他信息
  • 顯示其他信息（不在界面環境中）
• 模態窗口的剖析
• • 逃生出口
  • 描述性標題
  • 按鈕
  • 尺寸和位置
  • 焦點
  • 用戶啟動
• 移動模式
• 輔助功能
• • 鍵盤
  • ARIA
• 結論
• • 清單
• 轉載說明

前言

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

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

定義

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

用法

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

吸引用戶注意力

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

需要用戶輸入

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

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

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

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

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

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

模態窗口的剖析

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

逃生出口

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

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

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

描述性標題

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

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

按鈕

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

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

尺寸和位置

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

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

焦點

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

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

用戶啟動

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

移動模式

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

輔助功能

鍵盤

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

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

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

ARIA

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

以下ARIA標簽可以有助于創建可訪問的模態：Role = “dialog” , aria-hidden, aria-label

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

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

結論

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

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

清單

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

有一個替代的UI組件模態：非模態或也叫作toast（谷歌在材料設計和微軟中使用的術語）……

轉載說明

• 文章鏈接：《UI最佳實踐：深度解析模態窗口》
• 作者ID：01實驗室

總結

以上是生活随笔為你收集整理的【UI/UX】深度解析模态窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。