UI領域中經常聽見的''modal''究竟是什麼?

模態窗口其實就是個彈窗....

問題總結

用戶須要採起操做或取消覆蓋，直到他能夠繼續與原始頁面進行交互, 這是最原始的modal定義, 本質上是頁面在時間維度上的中斷系統:

來自wiki百科:

Modals have been considered a UI anti-pattern. The main reason lies in the definition of a modal window: A window that prevents the user from interacting with your application until she closes the window1. Modal windows interrupt users and force them into doing a specific action. Arguably, in most cases, there is no need to force users into specific actions. As a result, modal windows introduce unnecessary pain points for your users.

modal原則上是要"暫停"一個app的應用進程, 可是有不少變種需求, 咱們來一一分析一會兒, 好比這張圖:

 

▲ Newsletter 在Invision博客的中斷模式窗口中顯示。

 

特色

• 當您想要中斷用戶當前任務時使用，以便讓用戶全神貫注於更重要的事情。
• 不要用於顯示錯誤，成功或警告消息
• 提請注意重要的信息。這種用法被批評爲無效，由於用戶被太多的對話框轟炸，而且習慣於只是單擊「關閉」，「取消」或「肯定」而不閱讀或理解該消息。
• 阻塞應用程序流程，直到輸入須要繼續信息，例如在一個login過程。另外一個示例是用於在應用程序中打開和保存文件的文件對話框。
• 在集中式對話框中收集應用程序配置選項。在這種狀況下，一般在關閉對話框時應用更改，而且在進行編輯時禁用對應用程序的訪問。
• 警告當前操做的影響不可逆。這是模態對話的頻繁交互模式，可是一些可用性專家批評它對於因習慣使用而對其預期用途（防止破壞性行爲中的錯誤）無效。他們建議改變行動（提供「撤消」選項）.

解決方案

引入一種模式，在模式關閉以前，用戶沒法與您的應用程序進行交互。中斷用戶的注意並中止全部其餘操做，直處處理或解除消息。

匹配的標題

匹配按鈕文本與模態的標題增長了熟悉感。當模態引入新的中斷模式時，用戶可能沒法將剛剛執行的操做與模式彈出鏈接起來。確保他們知道模態的來源。

容許逃跑

容許用戶經過讓他們在須要時關閉模態窗口來逃避該模式。關閉按鈕的經常使用約定是右上角的「X」圖標和/或模式窗口底部的「關閉」或「取消」按鈕。該ESC鍵也每每是傳統的鍵盤快捷鍵來關閉情態動詞-因此點擊模態窗口外。

合理性和安全性

modal的彈出一般會阻斷線程,好比瀏覽器中的alert, 這雖然保證了安全性, 可是卻閒置了cpu, 另外一種方案中是使用後臺沙盒程序, 必要的安全任務跑在後臺, 可是阻隔一切用戶操做; 另外一方面在合理性上, 雖然modal有效地集中注意力，可是引入多種模式會帶來引入模式錯誤的風險，其中用戶忘記界面的狀態並嘗試執行適合於不一樣模式的動做。

討論

模態被認爲是UI反模式。主要緣由在於模態窗口的定義：一個窗口，阻止用戶在關閉窗口以前與應用程序交互。模態窗口會中斷用戶並強制他們執行特定操做。能夠說，在大多數狀況下，沒有必要強迫用戶採起特定的行動。所以，模態窗口會爲您的用戶帶來沒必要要的痛點。

替代方案是無模式接口。容許用戶隨時改變主意的界面。不強制用戶進入特定操做集的接口。

此外，模態在移動設備上不能很好地工做，由於它們會佔用屏幕空間並引入額外的用戶界面元素。

modal也是一種妥協的方式, 由於模態對話框是任務流的一部分，並給出了建議，將它們放在焦點在該流中的位置。例如，窗口能夠放置在觸發其激活的圖形控制元素附近。 自己爲了避免破壞頁面的完整性, 是不須要額外的窗口的, 可是隨着用戶需求的變態化, modal出現了.....

最後, 使用半透明的深色背景可能會遮擋主窗口中的信息，所以最好只在信息會分散注意力時使用。經過將整個背景區域用做關閉按鈕，能夠減小半透明背景：這是大多數移動操做系統的標準配置，避免讓用戶感到困惑，並使模態窗口感受不像惡意彈出窗口。

 

參考連接:

1 Modal WIndow at Wikipedia.org

2 Design patterns for replacing modal windows by L. Mathis