本文是「經典交互模式」系列第二篇，前文回顧：面包屑導航 Breadcrumbs Trail

全文目錄

• 什么是模態窗
• 模態窗的使用問題
• 模態框應用實踐

什么是模態窗 Modal Window

我們在各種不同的屏幕應用中見過「模態窗」，全屏幕模態窗、彈出信息框、（跟隨觸發）彈出信息框、燈箱彈窗、多步驟對話框等等，它們有著不同的形狀、大小和交互模式。

可以說，所有屏幕應用都可以分為模態窗口和非模態窗口。

什么是模態窗口？我們先從「模態」理解起。

Modal 模態是指計算機處于一種特殊狀態下，此時用戶進行同樣的輸入操作，會得到不一樣的輸入結果。典型的案例即按下 大寫鎖定（Caps Clock）時，用戶輸入的字母會變成大寫，此時大寫鎖定鍵成為了模態開關。

而「模態窗」即指窗口的特殊模式：出現在前級主視窗前方，使主窗口可被看到（移動屏幕上可能出現全屏），但無法使用。用戶想要返回主應用，需要先與模態窗進行互動。

在非模態窗中，用戶可以自由的瀏覽、操作、返回或是通過導航跳轉；而在模態窗中，你需要先完成操作，才可以返回狀態。

在「相冊」應用中可以任意瀏覽照片、查看詳情；而在圖片選擇的模態窗口中，需要選擇圖片或退出

---

模態窗的使用問題

由于模態框覆蓋原瀏覽內容且不進行操作無法離開的特點，它總被應用于強制打斷用戶的工作流程獲取用戶的注意力。久而久之，人們反而形成了一種「應激機制」——精準地找到「關閉按鈕」，瞬間關閉。

當年被彈窗支配的恐懼

• 需要即刻的注意力

模態窗將系統置于一個特殊模態中，用戶需要搞懂模態窗的內容并作出反應。

• 打斷用戶的工作流

從模態窗返回后用戶需要額外的時間和精力想起此前的工作內容。

• 用戶產生了額外的目標

有些復雜內容的模態窗花費了更多的額外成本，用戶不得不將「關閉窗口」作為當前的任務目標。

• 遮擋了主窗口內容

特別是出現表單類模態窗口時，重要的信息被遮擋導致無法完成表單填寫。

縱觀帶來的巨大交互成本，模態窗的使用卻依舊廣泛。因此，了解如何合理、節制地使用模態窗口或許可以幫助你創建更加安全、流暢的產品體驗。

---

模態窗應用實踐

• 展示更多內容

模態窗口可以用于展示更多的瀏覽內容，例如圖片、視頻等。

dribbble 的項目詳情

• 完成一個獨立的任務

模態窗口可以承載應用主任務之外的獨立任務，它有著明確的觸發點和結束點。

瀏覽朋友圈作為主任務，模態窗口承載發布新內容的獨立任務

• 顯示重要警告 用于預防或改正嚴重錯誤

預防總比補救更重要。這可能是最常見的模態窗使用方式。那么什么才是「防止嚴重錯誤」的重要時刻呢？

1 只需要用戶留意就可以避免的錯誤

只要稍微提醒，就會發現沒有添加附件

2 難以補救的錯誤

沒有自動保存的機制下，內容丟失就很難找回

• 補充重要信息 保證流程繼續進行

由于信息的缺失，流程無法繼續下去時，我們運用模態窗要求用戶補全信息。

購物網站不會要求立即注冊或登錄，而結算時需要用戶提供賬戶信息

• 避免讓用戶在模態框中做復雜決策

模態窗的內容應當簡潔、直接，避免用戶完成復雜的計算或研究。例如模態窗顯示的商品優惠，卻遮擋了原價信息，用戶難以做出選擇。

• 避免用模態窗顯示提示消息

警告或錯誤提示盡量出現在相關目標旁邊，消息通知不需要額外占用用戶的注意力。

訂單會如期出現在「已取消」的標簽頁下，不需要模態窗的提示

總結

無論是否使用模態窗口，我們的產品目的總是幫助用戶解決問題、完成任務繼而達成目標。沒有人愿意自己著手的事情沒打斷，所以在應用模態窗時，衡量一下它的交互成本，并保證用戶會覺得這次中斷是有價值的。

---

參考鏈接

Therese Fessenden, Modal & Nonmodal Dialogs: When (& When Not) to Use Them, Nielsen Norman Group

Raluca Budiu, Interaction Cos, Nielsen Norman Group

Naema Baskanderi, Best Practices for Modals / Overlays / Dialog Windows, uxplanet.org

Fabian Sebastian, Modality Is the One UX Concept That Most Designers Don’t Fully Understand, uxplanet.org

總結

以上是生活随笔為你收集整理的bootstrap 模态框无法使用_模态窗 Modal Window - 产品中的??注意力设计的全部內容，希望文章能夠幫你解決所遇到的問題。

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