首頁Intersection

Modal 模式是大多數設計師不甚瞭解的 UX 概念

很多（大多數是經驗較少的）設計師會以自己的直覺打造數位產品。雖然很多情況下行得通，但是現有已驗證過的共通標準，能幫助你依據邏輯打造良好架構的 UI 解決方案，而不是倚靠直覺。

這篇文章裡，我們會探索使用者介面 Modal（互動視窗）模式的共通標準，還會討論只有兩種基本畫面類型的原因，最後分析 App 和網站裡，資訊架構和使用者流程如何無法轉換為直覺的使用者介面。哦，還會談一些貓貓。

我們就以如此大膽的主張開始探索：

畫面只有兩種類型

  1. Modal 畫面
  2. 非 Modal 畫面

就是這樣，讓我來說明。（幾乎）每個可以想像出來的畫面都屬於這兩種分類之一。為了能理解 Modal 和非 Modal 畫面的差別，首先要定義「Modal 畫面」。

什麼是 “Modal”？

封面列舉出手機和電腦上的 Modal 樣式
Modal 畫面的範例

互動視窗畫面可以是不同的形狀與大小：

  1. 全螢幕 Modal 畫面 (1)
  2. 彈出訊息框 Popups (2)
  3. （跟隨觸發位置的）彈出訊息框 Pop-Overs (3)
  4. 燈箱視窗 Lightboxes (4)
  5. 警告/通知
  6. （多重步驟）對話框
  7. …

Modal 與非 Modal 畫面都是次級畫面 (child view)，意思是附屬於 App 的主要視窗之下。然而，最重要的差別在：

「Modal 模式」使得主視窗還看得到，但無法使用。次級視窗身份的 Modal 在它的前方，使用者返回應用程式最上方之前，必須跟 Modal 進行互動。 — 維基百科

大多數的 Modal 畫面（尤其是桌面版應用程式）都很容易發現，因為它們以視覺覆蓋主要視窗：彈出訊息框、滑入彈出選單和對話框、燈箱視窗和警告…等都是如此，讓主視窗淡出。

然而，行動裝置的螢幕範圍有限，因此許多行動裝置上的互動視窗會佔滿整個螢幕，看不到底下的主要視窗，比較難分辨是否是非 Modal 畫面：

非互動視窗畫面與互動視窗畫面的外觀

其中主要的差別是可以跟每個畫面互動的方式。非 Modal 畫面讓使用者可以直覺地回到上一層畫面，而 Modal 會要求使用者完成某動作，才可以回到主要視窗（例如在範例裡是「儲存」），或取消當前的動作。

非 Modal 最明顯的視覺指示是能否看見導覽（目前的範例是導覽列），讓使用者即使不小心進入分頁，也還是在主要導覽層級來回切換。而 Modal 要求使用者關閉視窗後才可以再次使用主要導覽列（這裡的範例是儲存或取消。）此差異是大多數 App 沒有做到的事情，也是我之前寫這篇「分頁列是又一個漢堡選單」的原因。

Tab Bars are the new Hamburger Menus

In this article we are going to talk about a navigation pattern that got out of hand.

為什麼要使用 Modal 模式？

Modal 畫面能解決這簡單的問題：使用者很容易分心，因此有時候要抓住他們的全部注意力（來源）。而 Modal 就是在做這件事：要專注在某單一工作後才可以繼續。

Modal 產生注意力，讓人完成某項工作或略過訊息、畫面之前，無法做其他事情。 — Apple

哪時候該用 Modal 模式？

我們知道 Modal 長得是什麼樣子、跟非 Modal 來比有什麼不同，還有它們的用途之後，還要自問：「什麼情境下該要用？」

前面說好的貓貓，現在來了：想像我們正在打造精巧又創新的矽谷級 App “purrrfect”， 讓使用者可以上傳、觀賞和在可愛貓咪 GIF 留言，超棒的概念。

貓重複叫的表情，背景快速移動
來源：https://giphy.com/gifs/tDgXAst2PhIYw

（簡化過的）使用者流程可能會長得這樣子：使用者打開 App，進入其中一個分頁（也就是貓貓資料庫），點擊其中一隻貓咪（進入單隻貓咪細節畫面），又再點擊留言區塊（進入留言區）。

解釋 purrrfect 這款 App 流程
purrrfect 的使用者流程

另外，使用者在每個階段都可以進行補充動作，例如：他可以在貓貓資料庫畫面再新增一隻貓咪。或者是在貓咪細節畫面修改資料。做得很棒。

來看看這些畫面裡，哪個是 Modal，又哪個不是？其實分類的方法很簡單，我個人的萬用方法是：

可以獨立存在的流程使用 Modal，其他全部都是非互動視窗。

只要有清楚的開始到結束點，就是「可以獨立存在的流程」。此動作在有限的時間範圍內，將使用者帶離一般使用者流程，讓他專注在本次動作，然後再送回他當時離開的地方。

Google 是這樣定義：使用 Modal（對話框）畫面的目的是…

「得要讓使用者進行某特定工作、決定或知曉的重要資訊」— Google

在我們的 purrrfect app，這意思是主要使用者流程（用在 App 裡四處探索）不會是互動視窗。而特別的時間限定動作，像是新增、編輯貓咪圖，還有留言才是互動視窗。

purrrfect app 的流程，以互動視窗畫面/非互動視窗畫面來區分

所有互動視窗動作在回到主要流程之前，不是取消就是完成。因此，Modal 畫面使用取消和儲存按鈕（或其他相似按鈕），而不是使用上一步按鈕。如果在非 Modal 畫面的上一步按鈕會同時執行儲存，就該要考慮換成有取消和儲存按鈕的 Modal 畫面。反過來說（通常）也是對的：如果取消和儲存兩個動作在 Modal 畫面裡根本沒用（因為可能觸發相同的動作），就可能會想要換成非 Modal 畫面。如果是這樣的情況，主要導覽（例如分頁 ）就應該也要留在畫面上能看到。

回到我們可以改變市場的 purrrfect app。purrrfect 的介面有可能長得像這樣：

purrrfect 可能的使用者介面
purrrfect 可能的使用者介面

現實世界裡，是否是 Modal 的區別通常沒這麼清楚。舉例來說，大多數 App 以全螢幕互動視窗顯示的圖片，並不是一組流程或對話。為了要引起注意，Modal 畫面在其他特殊情況也適用。如果貓咪細節的畫面（中間）是沒有編輯或顯示留言的結束點畫面，就可能會用 Modal 模式（全螢幕呈現）。不過，既然它可以讓使用者更進一步深入資訊架構，執行各種不同的動作（顯示留言、編輯…等），這樣就沒有清楚的結束點。因此，這算是主要流程的一部份。也就是說，這是非 Modal 畫面。

評估某動作是否能獨立存在，還是 App 的一般探索流程，然後決定是否適用 Modal，是設計師的責任。如果猶豫的話，請記得 Apple 記載：

盡可能不要使用 Modal。一般來說，人們喜歡以非線性的方式與 App 互動。只有在非得要抓住注意力、必須完成或放棄某項工作才可以繼續使用 App 的時候，才考慮做 Modal，要不然就是要儲存重要資料。— Apple

不負責聲明：當然，沒有嚴謹分別是否使用 Modal 畫面的介面，仍可以完美運作。只不過，Modal 模式的概念已經牢牢依附在 Apple、Google、微軟及其他企業，使用者早就養成各種預期模式。

如果 Apple 不打臉以前的自己，就不叫 Apple 了。舉例來說，新版的 App Store 在 “Today” 分頁以 Modal 畫面打開每則主題，但仍允許使用者在 Modal 畫面底部連到深入推薦（無明顯結束點）。這個方法讓使用者往 Modal 更深處逛下去，且沒有固定的結束點。在這過程中，他們無法切換分頁，也不能在更深一層頁面關閉 Modal 畫面。從不是推薦內容的地方打開同樣的 App 畫面，就會讓畫面以非互動視窗呈現。這才保留了分頁列和返回上一頁動作（再次點擊分頁列目前的圖示，就可以切到它的主畫面）。

不一致的 Apple UI
不一致的 Apple UI

左邊不一致的情況可能的修復方法…

  • A: …以非 Modal 的次級畫面打開每則主題，有返回按鈕，而且保留分頁列。
  • B: …使用者只要點擊 Modal 畫面內的連結，Modal 畫面就會關閉，接著從 App 的根目錄層級前往非 Modal 的次級畫面。

Modal 模式該怎麼用？

看到這裡，我們應該對何時使用 Modal 模式有相當的瞭解了。還剩下的問題是「我們要如何設計它？」請看 Modal 的簡易檢查表：

  • 在上方的導覽列一定要顯示關閉按鈕（或取消/放棄/最小化…等）。使用者迷路的時候，可以輕易地關閉 ，然後回到 App 的最頂層級。
  • iOS 和 Android 的取消按鈕最常放在導覽列的左上方。在 Android 習慣使用「關閉」或「X 圖示」，而 iOS 偏好「取消」文字。不過，圖示按鈕在 iOS 仍可通用，而且能廣泛理解。
  • 在 iOS 和 Android 的儲存按鈕預設放在導覽列的右上角。只不過，這樣的擺放方式在大一點的裝置上會按不到。因此，我個人建議在畫面下方使用固定浮著 (fixed floating) 或跟隨頁面尾端的方式當做補充擺放位置。
預設的互動視窗版面，與建議的互動視窗版面

多重步驟的 Modal

一旦對話 Modal 含有多重步驟或次級畫面，事情就變得更複雜。繼續按鈕預設在右上方顯示，第二步驟的畫面會留在現有的 Modal 裡，以它的非 Modal 次級畫面呈現，而不是又打開新的 Modal。

如同前面建議過的，在畫面底部擺放主要動作（儲存、套用或繼續）的時候，Modal 裡第二步驟的右上角區域就空出來了，可以拿來放額外的取消按鈕。雖然從左邊跳到右邊，如此擺放方式還是比次級畫面無法關閉 Modal 還要好。

預設的多重步驟互動視窗版面，與建議的多重步驟互動視窗版面

動畫

目前 iOS 和 Android 使用 Modal 畫面的方式都還很類似。不過，只要細看動畫，情況就不同了。

  • iOS: 在 iOS 的動畫幾乎都標準化了。 非 Modal 從右邊推進螢幕範圍，分頁列維持在螢幕下方不動。上方的導覽列也是固定的，但是內容以自訂的轉場效果進場。此動畫提供從邊緣撥入手勢 (edge-swipe gesture) 回到上一步的基礎，補足按不到的上一步按鈕。

    至於 Modal，會從螢幕範圍下方滑入，覆蓋整個介面（產生新的導覽列）。邊緣撥入手勢在此沒有作用，如果沒有要儲存的東西，自訂一份往下拉執行關閉的手勢可能會有幫助。

  • Android: 在 Android 的動畫非常多樣化。Google 在 Material Design 規範裡建議使用「有意義的轉場」。方法是「一按下去，子元素就會升起，然後放大它使用的空間」，同時讓頂部導覽列的內容淡出。不過，Android 並沒有分別 Modal 或非 Modal 的動畫。

總結

許多設計師是根據直覺設計產品。有時候直覺會比規範有用，為了能在合乎邏輯的時候採用或忽略共通標準，是很重要的。

我認為 Modal 是現今 App 裡最被忽略的 UX 原則。跨平台 App 與網頁、原生混合模式使得依據平台規範與基準來做事無法更輕鬆。但是，Modal 模式的一般概念是你應該要熟悉的規範，才可知道在有必要時不遵守。