您以前可能去過那裡。我們如何選擇向使用者顯示模式，以及何時將他們導航到單獨的新頁面？這有什麼關係嗎？ 事實上，確實如此。此決策會影響使用者的流程、情境、尋找細節的能力，以及錯誤頻率和任務完成。這兩種選擇都可能在錯誤的時間、錯誤的地點造成破壞性和令人沮喪。 所以我們最好把事情做好。好吧，讓我們看看如何做到這一點。 模態、對話框、疊加、燈箱 雖然我們經常談論單一模態 UI 元件，但我們經常忽略所有不同類型模態之間細微、複雜的細微差別。事實上，並非每個模態都是相同的。模態框、對話框、疊加層和燈箱——聽起來都很相似，但實際上有很大不同：
Dialog「對話」的通用術語（使用者↔系統）。 覆蓋顯示在頁面頂部的小型內容面板。 ModalUser 必須與禁用的覆蓋+背景互動。 NonmodalUser 必須與啟用的覆蓋+背景進行互動。 Lightbox 調暗背景以將注意力集中在模式上。
正如 Anna Kaley 所強調的那樣，大多數疊加層出現在錯誤的時間，在關鍵任務期間打斷用戶，使用糟糕的語言，並破壞用戶的流程。它們本質上是乾擾性的，並且通常具有很高的嚴重性，但沒有強烈的需要。
當然，如果用戶的行為後果具有很大的影響，則必須放慢速度並打斷用戶，但對於大多數情況而言，非模態更加微妙，並且是引起用戶注意的更友好的選擇。如果有的話，我總是建議將其作為預設值。 模態 → 用於單一、獨立的任務 身為設計師，我們經常認為模態是無關緊要且令人討厭的，而且事實往往如此！ ——但它們也有其價值。它們對於警告用戶潛在的錯誤或幫助他們避免資料遺失非常有幫助。它們還可以幫助執行相關操作或深入了解詳細信息，而無需中斷頁面的當前狀態。 但模態框的最大優點是它們可以幫助使用者保留目前畫面的上下文。它不僅意味著 UI，還意味著編輯輸入、滾動位置、手風琴狀態、過濾器選擇、排序等等。
有時，用戶需要快速確認選擇（例如，如上所示的過濾器），然後立即從那裡繼續。當然，自動保存可以實現相同的目的，但並不總是需要或期望的。阻止 UI 通常不是一個好主意。 但是，模態框不用於任何任務。通常，我們將它們用於單一、獨立的任務，使用者應該跳入其中，完成任務，然後返回原來的位置。毫不奇怪，它們確實適用於高優先級、短時間的互動（例如警報、破壞性操作、快速確認）。 當模態有幫助時： 🚫 模態框通常具有破壞性、侵入性和混亂性。 🚫 它們使得比較和複製貼上變得困難。 ✅ 然而模態框允許使用者維護多個上下文。 ✅ 可用於防止不可逆轉的錯誤和資料遺失。 ✅ 如果將使用者傳送到新頁面會造成破壞，則很有用。 ✅ 僅當使用者重視中斷時才顯示模式。 ✅ 預設情況下，偏好非阻塞對話方塊（「非模式」）。 ✅ 允許使用者最小化、隱藏或稍後恢復對話方塊。 ✅ 使用模式來減慢使用者的速度，例如，驗證複雜的輸入。 ✅ 使用「關閉」、ESC 鍵或點選框外為出路。 頁面 → 適用於複雜的多步驟工作流程 模式中的嚮導或選項卡式導航效果不太好，即使在複雜的企業產品中也是如此——側面板或抽屜通常效果更好。當使用者需要比較或引用資料點時，麻煩就開始了——但模式會阻止這種行為，因此他們會在多個標籤中重新開啟同一頁面。
對於更複雜的流程和多步驟流程，獨立頁面效果最佳。當頁面需要使用者的全部注意力時，頁面也會更好地工作，並且參考上一個畫面並沒有多大幫助。抽屜適用於對於簡單模式來說過於複雜的子任務，但不需要完整的頁面導航。 何時避免情態動詞： 🚫 避免使用錯誤訊息模式。 🚫 避免使用功能通知模式。 🚫 避免使用入門體驗模式。 🚫 避免使用複雜、冗長的多步驟任務模式。 🚫 避免多個嵌套模式，並使用上一個/下一個。 🚫 除非絕對必要，否則避免自動觸發模式。 避免兩者對於重複任務 在許多複雜、任務繁重的產品中，使用者會發現自己一再重複執行相同的任務。在那裡，模式和新頁面導航都會增加摩擦，因為它們會中斷流程或迫使使用者收集所有不同選項卡或視圖之間遺失的資料。 很多時候，使用者最終會得到一種破碎的體驗，充滿了永無止境的確認、誇大的警告、冗長的說明，或只是缺少參考點。正如 Saulius Stebulis 所提到的，在這些場景中，可擴展部分或就地編輯通常效果更好 - 它們將任務固定在當前螢幕上。 實際上，在許多場景中，使用者並不是孤立地完成任務的。他們需要在完成任務時查找資料、複製貼上值、優化不同位置的條目，或只是查看類似的記錄。 覆蓋層和抽屜對於在任務期間保持對後台資料的存取更有幫助。因此，上下文始終保留在其位置，可供參考或複製貼上。將模式和頁面導航保存在中斷真正增加價值的時刻，尤其是為了防止嚴重錯誤。 模態與頁面：決策樹 不久前，Ryan Neufeld 整理了一份非常有用的指南，幫助設計師在模式和頁面之間進行選擇。它附帶了一個方便的 PNG 備忘單和一個 Google 文件模板，其中的問題分為 7 個部分。 它很長，非常徹底，但很容易理解：
這可能看起來令人畏懼，但這是一個非常簡單的 4 步驟過程：
螢幕的上下文。首先，我們檢查使用者是否需要維護底層螢幕的上下文。 任務複雜性和持續時間。更簡單、更集中、不分散注意力的任務可以使用模式，但長而複雜的流程需要頁面。 底層頁面的引用。然後，我們檢查使用者是否經常需要在後台引用數據，或者任務是否是簡單的確認或選擇。 選擇正確的覆蓋。最後，如果覆蓋確實是一個不錯的選擇，它會指導我們在模態或非模態之間進行選擇（傾向於非模態）。
總結 盡可能避免阻塞整個 UI。有一個浮動對話框，部分覆蓋 UI，但允許導航、滾動和複製貼上。或將模式的內容顯示為側抽屜。或使用垂直手風琴代替。或者，如果您需要顯示大量詳細信息，請將用戶帶到單獨的頁面。 但如果您想提高使用者的效率和速度，請不惜一切代價避免使用模式。使用它們來減慢使用者的速度，集中他們的注意力，防止錯誤。正如 Therese Fessenden 指出的那樣，沒有人喜歡被打擾，但如果必須的話，請確保它絕對值得付出代價。 認識“智慧介面設計模式” 您可以在智慧介面設計模式中找到有關模態和替代方案的整個部分，這是我們的 15 小時視訊課程，其中包含來自現實專案的 100 個實際範例 - 今年稍後還將提供現場使用者體驗培訓。從大型下拉清單到複雜的企業表格，應有盡有，每年都會增加 5 個新細分。跳到免費預覽。使用代碼 BIRDIE 可節省 15% 的折扣。 認識智慧介面設計模式，這是我們關於介面設計和使用者體驗的視訊課程。
影片 + 使用者體驗培訓 僅視訊影片 + 使用者體驗培訓$ 495.00 $ 699.00
取得視訊 + 使用者體驗培訓25 個視訊課程（15 小時）+ 即時使用者體驗培訓。 100 天退款保證。限影片$ 300.00$ 395.00
取得視訊課程40 節視訊課程（15 小時）。每年更新。也可以作為包含 2 個視訊課程的 UX 捆綁包提供。
有用的資源
不同類型的彈出窗口，作者：Anna Kaley 設計 UI 模態的最佳實踐，作者：Uxcel 我們使用了太多該死的模態：使用者體驗指南，作者：Adrian Egger 模態與非模態對話框，作者：Therese Fessenden 現代企業 UI 設計：模態對話框，作者：James Jacobs 設計系統中的模態
