2018-12-21 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
很多設計師根據直覺進行產品設計。雖然大部分情況下是沒問題的，但是已經證明了的通用標準可以更好的幫助你從邏輯上構建有理有據的UI解決方案，而不是僅僅依賴于你的直覺。
本文我們將探討UI設計中的模態通用標準，討論為什么僅有兩種類型的原因，并且分析App和網站在將信息體系結構和用戶信息流轉換為直觀的用戶界面是如何失敗的，本文將使用“Purrrfect”這個產品來講解。
兩種基本屏幕類型：模態屏幕、非模態屏幕
基本每個可視化窗口幾乎都屬于這兩類中的一個。為了理解模態與非模態的區別，我們首先要定義模態屏幕。
什么是“模態屏幕”？
模態屏幕示例
模態屏幕有不同的形狀和大小：
全屏模態視圖（左1）
彈出窗口（左2）
氣泡彈窗（左3）
燈箱彈窗（左4）
快訊/通知
...
模態屏幕和非模態屏幕這兩種類型看起來似乎很好理解，它們都從屬于App的主窗口。但是有一個重要的區別：
模態窗口
創建一個禁用主窗口的模式，模態窗口作為前面的子窗口使其保持可見。用戶必須先與模態窗口進行交互才能返回父級應用程序。
—— 維基百科
大多數模態屏幕，特別是在桌面應用上可以輕松識別，因為它們覆蓋主窗口并且可見：主窗口背景遮罩的彈出窗，彈出菜單和彈出框對話框，燈箱彈框，警告等...
但是移動設備上的屏幕空間有限，這也是移動設備上的許多模態屏幕占據整個屏幕的原因。它們不再保持底層主窗口可見，所以很難將它與非模態屏幕區分開來：
iOS示例：移動設備上的模態屏幕
兩者的主要區別在于屏幕的交互方式不同。雖然非模態屏幕允許用戶簡單地返回到父級屏幕，但是模態屏幕要求用戶在返回主窗口之前完成操作（示例中為“保存”）或取消當前操作。
非模態屏幕最明顯可視信息便是導航欄（示例中為標簽欄）。即使在子級頁面，非模態屏幕也允許用戶在主導航來回跳轉。另外模態屏幕要求用戶在再次使用主導航之前必須關閉窗口（示例中為“Save ”或“ Cancel ”）。
為什么要使用模態？
模態屏幕解決了一個簡單的問題：用戶容易分心，所以有時候必須讓用戶全神貫注的進行操作。單一的模態屏幕正是要求人集中在單一的任務上，然后再繼續其他操作。
“模態通過阻止人們在完成任務或解除消息或視圖之前做其他事情來創造焦點”
—— Apple
什么時候應該使用模態？
模態屏幕的規則我們已經了然于胸，與非模態屏幕相比，它能達到的目的是什么，應該在什么樣的情況下使用它呢？
試想一下，我們正在創造一個巧妙而新穎的App：“ Purrrfect ” ， 一個小貓數據庫，它允許用戶上傳，查看和評論可愛的貓咪GIF。
資料來源：https：//giphy.com/gifs/tDgXAst2PhIYw
我們App（簡化）用戶流程如下圖所示：用戶打開App，進入幾個可用選項卡之一（我們的小貓數據庫），點擊其中一只小貓（進入詳細的單一小貓視圖），然后點擊評論部分（進入評論部分）。
Purrrfect用戶流程
另外用戶可以在每個階段執行補充操作。例如他可以在小貓數據庫頁面中將另一只小貓添加到數據庫中，又或者他可以在小貓詳情頁中編輯數據。
如何分辨模態與非模態，其實沒有那么容易，這些只是我個人的經驗總結：對自包含過程使用模態屏幕，對其他所有內容使用非模態屏幕。
“自包含過程”是指每個操作都有明確的起點和終點。此操作有明確的時間范圍，將用戶從一般用戶流中移出，讓他專注于操作，然后再將他帶回到開始的位置。
“需要特定的用戶任務，決策或確認的關鍵信息”
對于Purrrfect App來說，這意味著主要用戶流不是模態的。但是特殊的限時操作，如添加小貓，編輯小貓和撰寫評論都是模態的。
在用戶返回主流程之前，可以取消或保存完成所有模態操作。因此模態屏幕使用取消和保存按鈕（或其他類似操作）而不是后退按鈕。如果您的后退按鈕在非模態屏幕中觸發保存操作，您可能需要考慮使用取消和保存按鈕切換到模態屏幕。如果在模態屏幕中有兩個不同的操作，例如取消和保存，則無意義（因為它們會觸發相同的操作）您可能希望切換到非模態視圖。在這種情況下，主導航（例如標簽欄）也應保持在屏幕上可見。
讓我們回到我們改變游戲規則的App，Purrrfect界面如下圖所示：
Purrrfect用戶界面
在實際情況中，模態和非模態屏幕之間的區別通常沒那么明顯。例如圖像全屏頁面在大多數應用中都是模態的，盡管它不是進程或對話框。在一些特殊情況下，模態屏幕可能會承載頁面的焦點。如果我們的App屏幕中間是沒有其他操作（如編輯或評論）的情況，我們可能使用模態（全屏視圖）。但由于它允許用戶更深入地進入信息架構并執行各種附加操作（顯示注釋，編輯 ......），因此它不再具有明確的終點，因此它是主流程的一部分，所以應該選擇非模態視圖。
設計師有責任了解清楚App的流程，評估某個操作是否應該單獨展示，從而決定來模態是否有意義。如有疑問，請記住Apple的指導方針：
盡量減少模態的使用。通常人們更喜歡以非線性的方式與應用交互。只有在獲得某人注意、任務必須完成或放棄，以繼續使用應用或保存重要數據時，才考慮創建一個模態來連接上下層級。
——? Apple
雖然不需要嚴格區分模態和非模態，界面也可以完美展現。但是模態的概念深深植根于Apple，Google，Microsoft等企業的界面生態系統中，且用戶已經形成了相應的期望值。
如果Apple時不時的違反自己的規則，那么Apple將不會是Apple。例如，新版App Store在“今日”標簽中打開亮點作為模態屏幕，但仍然允許用戶在屏幕底部導航到下一步（沒有明確的終點）。這樣用戶就可以在模態屏幕內部更深入地導航到其他流程。從推薦以外的其他內容打開相同的App屏幕會導致屏幕顯示為非模態屏幕。這將保留標簽欄和后退操作（再次單擊當前標簽欄圖標以轉到其主屏幕）。
不一致的Apple UI
左邊的不一致可以通過....來解決
A：...在非模態子屏幕中打開高亮顯示，并帶有后退按鈕并保留標簽欄
B：...一旦用戶點擊模態屏幕內的鏈接并繼續在App的父級別上的非模態子屏幕操作，從而關閉模態屏幕。
如何使用模態？
現在我們對何時使用模態有了一個大致的了解。那么“我們如何進行設計？”這是目前唯一的問題。下面是對模態屏幕檢查后得到的列表：
頂部導航欄始終顯示關閉按鈕（或“取消”/“丟棄”/“最小化”/ ...）。當用戶迷路時，可以輕松關閉疊加層并導航回App的頂層。
iOS和Android上的取消按鈕通常位于導航欄的左上角。Android更喜歡關閉/“x”圖標，而iOS則喜歡“取消”文本，但是圖標按鈕在ios也很常見，經常使用ios設備的應該都知道。
一般情況下，iOS和Android上的保存按鈕都位于導航欄的右上角。但是這種放置規則在大屏幕設備上是不可取的。所以在屏幕底部固定浮動或頁面末端的內嵌是我個人推薦的放置位置。
多步模態
一旦模態對話框由多個步驟或子級頁面組成，事情就會變得更加復雜。一般情況下，繼續按鈕顯示在右上角。第二步不會打開新的模態屏幕，而是保留在當前模態屏幕，并在現有模態上覆蓋非模態子屏幕。
當在屏幕底部放置主要操作（“保存”，“應用”或“繼續”）時，模態第二步的右上區域釋放了可選取消按鈕的空間。雖然會從左到右跳轉，但這種方案仍然比不能在子屏幕上直接關閉更好一些。
動畫
截止目前，iOS和Android在模態的使用方面非常相似。但是動畫方面并不是這樣的。
iOS：動畫在iOS中高度標準化。
非模態屏幕從右側進入框架。標簽欄在屏幕底部保持不變。頂部的導航欄也保持不變，但其內容在自定義轉換中淡入淡出。此動畫還為用于返回的邊緣滑動手勢提供了基礎。
另一方面模態屏幕從框架的底部滑入并覆蓋整個界面（新的頂部導航欄）。他們不使用邊緣滑動手勢，如果沒有保存之類的重要操作，自定義下拉關閉手勢可能會好一些。
Android： Android上的動畫更加的豐富多樣。
Google建議在Material Design指南中使用“有意義的過渡” 。Android本身并不區分動畫是否為模態或者非模態。
總結
大部分設計師根據直覺來進行產品設計。有時候直覺的確很重要。但是更重要的是要我們需要了解一些通用標準，以便于在特定的時候選擇更好的適應或者改變。
在我看來模態的概念是當今應用設計中最被忽視的UX原則之一。跨平臺和Web本地混合應用并不能很好的使用模態的指南和規范。但是模態的基本規則你應該了解，以便在必要的時候適應或者改變它。
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
