很多設(shè)計(jì)師根據(jù)直覺進(jìn)行產(chǎn)品設(shè)計(jì)。雖然大部分情況下是沒問題的，但是已經(jīng)證明了的通用標(biāo)準(zhǔn)可以更好的幫助你從邏輯上構(gòu)建有理有據(jù)的UI解決方案，而不是僅僅依賴于你的直覺。

本文我們將探討UI設(shè)計(jì)中的模態(tài)通用標(biāo)準(zhǔn)，討論為什么僅有兩種類型的原因，并且分析App和網(wǎng)站在將信息體系結(jié)構(gòu)和用戶信息流轉(zhuǎn)換為直觀的用戶界面是如何失敗的，本文將使用“Purrrfect”這個(gè)產(chǎn)品來講解。

兩種基本屏幕類型：模態(tài)屏幕、非模態(tài)屏幕

基本每個(gè)可視化窗口幾乎都屬于這兩類中的一個(gè)。為了理解模態(tài)與非模態(tài)的區(qū)別，我們首先要定義模態(tài)屏幕。

什么是“模態(tài)屏幕”？

模態(tài)屏幕示例

模態(tài)屏幕有不同的形狀和大?。?/span>

全屏模態(tài)視圖（左1）

彈出窗口（左2）

氣泡彈窗（左3）

燈箱彈窗（左4）

快訊/通知

...

模態(tài)屏幕和非模態(tài)屏幕這兩種類型看起來似乎很好理解，它們都從屬于App的主窗口。但是有一個(gè)重要的區(qū)別：

模態(tài)窗口

創(chuàng)建一個(gè)禁用主窗口的模式，模態(tài)窗口作為前面的子窗口使其保持可見。用戶必須先與模態(tài)窗口進(jìn)行交互才能返回父級應(yīng)用程序。

 —— 維基百科

大多數(shù)模態(tài)屏幕，特別是在桌面應(yīng)用上可以輕松識別，因?yàn)樗鼈兏采w主窗口并且可見：主窗口背景遮罩的彈出窗，彈出菜單和彈出框?qū)υ捒?，燈箱彈框，警告?..

但是移動設(shè)備上的屏幕空間有限，這也是移動設(shè)備上的許多模態(tài)屏幕占據(jù)整個(gè)屏幕的原因。它們不再保持底層主窗口可見，所以很難將它與非模態(tài)屏幕區(qū)分開來：

iOS示例：移動設(shè)備上的模態(tài)屏幕

兩者的主要區(qū)別在于屏幕的交互方式不同。雖然非模態(tài)屏幕允許用戶簡單地返回到父級屏幕，但是模態(tài)屏幕要求用戶在返回主窗口之前完成操作（示例中為“保存”）或取消當(dāng)前操作。

非模態(tài)屏幕最明顯可視信息便是導(dǎo)航欄（示例中為標(biāo)簽欄）。即使在子級頁面，非模態(tài)屏幕也允許用戶在主導(dǎo)航來回跳轉(zhuǎn)。另外模態(tài)屏幕要求用戶在再次使用主導(dǎo)航之前必須關(guān)閉窗口（示例中為“Save ”或“ Cancel ”）。

為什么要使用模態(tài)？

模態(tài)屏幕解決了一個(gè)簡單的問題：用戶容易分心，所以有時(shí)候必須讓用戶全神貫注的進(jìn)行操作。單一的模態(tài)屏幕正是要求人集中在單一的任務(wù)上，然后再繼續(xù)其他操作。

“模態(tài)通過阻止人們在完成任務(wù)或解除消息或視圖之前做其他事情來創(chuàng)造焦點(diǎn)” 

—— Apple

什么時(shí)候應(yīng)該使用模態(tài)？

模態(tài)屏幕的規(guī)則我們已經(jīng)了然于胸，與非模態(tài)屏幕相比，它能達(dá)到的目的是什么，應(yīng)該在什么樣的情況下使用它呢？

試想一下，我們正在創(chuàng)造一個(gè)巧妙而新穎的App：“ Purrrfect ” ， 一個(gè)小貓數(shù)據(jù)庫，它允許用戶上傳，查看和評論可愛的貓咪GIF。

資料來源：https：//giphy.com/gifs/tDgXAst2PhIYw

我們App（簡化）用戶流程如下圖所示：用戶打開App，進(jìn)入幾個(gè)可用選項(xiàng)卡之一（我們的小貓數(shù)據(jù)庫），點(diǎn)擊其中一只小貓（進(jìn)入詳細(xì)的單一小貓視圖），然后點(diǎn)擊評論部分（進(jìn)入評論部分）。

Purrrfect用戶流程

另外用戶可以在每個(gè)階段執(zhí)行補(bǔ)充操作。例如他可以在小貓數(shù)據(jù)庫頁面中將另一只小貓?zhí)砑拥綌?shù)據(jù)庫中，又或者他可以在小貓?jiān)斍轫撝芯庉嫈?shù)據(jù)。

如何分辨模態(tài)與非模態(tài)，其實(shí)沒有那么容易，這些只是我個(gè)人的經(jīng)驗(yàn)總結(jié)：對自包含過程使用模態(tài)屏幕，對其他所有內(nèi)容使用非模態(tài)屏幕。

“自包含過程”是指每個(gè)操作都有明確的起點(diǎn)和終點(diǎn)。此操作有明確的時(shí)間范圍，將用戶從一般用戶流中移出，讓他專注于操作，然后再將他帶回到開始的位置。

“需要特定的用戶任務(wù)，決策或確認(rèn)的關(guān)鍵信息”

——Google

對于Purrrfect App來說，這意味著主要用戶流不是模態(tài)的。但是特殊的限時(shí)操作，如添加小貓，編輯小貓和撰寫評論都是模態(tài)的。

在用戶返回主流程之前，可以取消或保存完成所有模態(tài)操作。因此模態(tài)屏幕使用取消和保存按鈕（或其他類似操作）而不是后退按鈕。如果您的后退按鈕在非模態(tài)屏幕中觸發(fā)保存操作，您可能需要考慮使用取消和保存按鈕切換到模態(tài)屏幕。如果在模態(tài)屏幕中有兩個(gè)不同的操作，例如取消和保存，則無意義（因?yàn)樗鼈儠|發(fā)相同的操作）您可能希望切換到非模態(tài)視圖。在這種情況下，主導(dǎo)航（例如標(biāo)簽欄）也應(yīng)保持在屏幕上可見。

讓我們回到我們改變游戲規(guī)則的App，Purrrfect界面如下圖所示：

Purrrfect用戶界面

在實(shí)際情況中，模態(tài)和非模態(tài)屏幕之間的區(qū)別通常沒那么明顯。例如圖像全屏頁面在大多數(shù)應(yīng)用中都是模態(tài)的，盡管它不是進(jìn)程或?qū)υ捒?。在一些特殊情況下，模態(tài)屏幕可能會承載頁面的焦點(diǎn)。如果我們的App屏幕中間是沒有其他操作（如編輯或評論）的情況，我們可能使用模態(tài)（全屏視圖）。但由于它允許用戶更深入地進(jìn)入信息架構(gòu)并執(zhí)行各種附加操作（顯示注釋，編輯  ......），因此它不再具有明確的終點(diǎn)，因此它是主流程的一部分，所以應(yīng)該選擇非模態(tài)視圖。

設(shè)計(jì)師有責(zé)任了解清楚App的流程，評估某個(gè)操作是否應(yīng)該單獨(dú)展示，從而決定來模態(tài)是否有意義。如有疑問，請記住Apple的指導(dǎo)方針：

盡量減少模態(tài)的使用。通常人們更喜歡以非線性的方式與應(yīng)用交互。只有在獲得某人注意、任務(wù)必須完成或放棄，以繼續(xù)使用應(yīng)用或保存重要數(shù)據(jù)時(shí)，才考慮創(chuàng)建一個(gè)模態(tài)來連接上下層級。

——? Apple

雖然不需要嚴(yán)格區(qū)分模態(tài)和非模態(tài)，界面也可以完美展現(xiàn)。但是模態(tài)的概念深深植根于Apple，Google，Microsoft等企業(yè)的界面生態(tài)系統(tǒng)中，且用戶已經(jīng)形成了相應(yīng)的期望值。

如果Apple時(shí)不時(shí)的違反自己的規(guī)則，那么Apple將不會是Apple。例如，新版App Store在“今日”標(biāo)簽中打開亮點(diǎn)作為模態(tài)屏幕，但仍然允許用戶在屏幕底部導(dǎo)航到下一步（沒有明確的終點(diǎn)）。這樣用戶就可以在模態(tài)屏幕內(nèi)部更深入地導(dǎo)航到其他流程。從推薦以外的其他內(nèi)容打開相同的App屏幕會導(dǎo)致屏幕顯示為非模態(tài)屏幕。這將保留標(biāo)簽欄和后退操作（再次單擊當(dāng)前標(biāo)簽欄圖標(biāo)以轉(zhuǎn)到其主屏幕）。

不一致的Apple UI

左邊的不一致可以通過....來解決

A：...在非模態(tài)子屏幕中打開高亮顯示，并帶有后退按鈕并保留標(biāo)簽欄

B：...一旦用戶點(diǎn)擊模態(tài)屏幕內(nèi)的鏈接并繼續(xù)在App的父級別上的非模態(tài)子屏幕操作，從而關(guān)閉模態(tài)屏幕。

如何使用模態(tài)？

現(xiàn)在我們對何時(shí)使用模態(tài)有了一個(gè)大致的了解。那么“我們?nèi)绾芜M(jìn)行設(shè)計(jì)？”這是目前唯一的問題。下面是對模態(tài)屏幕檢查后得到的列表：

頂部導(dǎo)航欄始終顯示關(guān)閉按鈕（或“取消”/“丟棄”/“最小化”/ ...）。當(dāng)用戶迷路時(shí)，可以輕松關(guān)閉疊加層并導(dǎo)航回App的頂層。

iOS和Android上的取消按鈕通常位于導(dǎo)航欄的左上角。Android更喜歡關(guān)閉/“x”圖標(biāo)，而iOS則喜歡“取消”文本，但是圖標(biāo)按鈕在ios也很常見，經(jīng)常使用ios設(shè)備的應(yīng)該都知道。

一般情況下，iOS和Android上的保存按鈕都位于導(dǎo)航欄的右上角。但是這種放置規(guī)則在大屏幕設(shè)備上是不可取的。所以在屏幕底部固定浮動或頁面末端的內(nèi)嵌是我個(gè)人推薦的放置位置。

多步模態(tài)

一旦模態(tài)對話框由多個(gè)步驟或子級頁面組成，事情就會變得更加復(fù)雜。一般情況下，繼續(xù)按鈕顯示在右上角。第二步不會打開新的模態(tài)屏幕，而是保留在當(dāng)前模態(tài)屏幕，并在現(xiàn)有模態(tài)上覆蓋非模態(tài)子屏幕。

當(dāng)在屏幕底部放置主要操作（“保存”，“應(yīng)用”或“繼續(xù)”）時(shí)，模態(tài)第二步的右上區(qū)域釋放了可選取消按鈕的空間。雖然會從左到右跳轉(zhuǎn)，但這種方案仍然比不能在子屏幕上直接關(guān)閉更好一些。

動畫

截止目前，iOS和Android在模態(tài)的使用方面非常相似。但是動畫方面并不是這樣的。

iOS：動畫在iOS中高度標(biāo)準(zhǔn)化。

非模態(tài)屏幕從右側(cè)進(jìn)入框架。標(biāo)簽欄在屏幕底部保持不變。頂部的導(dǎo)航欄也保持不變，但其內(nèi)容在自定義轉(zhuǎn)換中淡入淡出。此動畫還為用于返回的邊緣滑動手勢提供了基礎(chǔ)。

另一方面模態(tài)屏幕從框架的底部滑入并覆蓋整個(gè)界面（新的頂部導(dǎo)航欄）。他們不使用邊緣滑動手勢，如果沒有保存之類的重要操作，自定義下拉關(guān)閉手勢可能會好一些。

Android： Android上的動畫更加的豐富多樣。

Google建議在Material Design指南中使用“有意義的過渡” 。Android本身并不區(qū)分動畫是否為模態(tài)或者非模態(tài)。

總結(jié)

大部分設(shè)計(jì)師根據(jù)直覺來進(jìn)行產(chǎn)品設(shè)計(jì)。有時(shí)候直覺的確很重要。但是更重要的是要我們需要了解一些通用標(biāo)準(zhǔn)，以便于在特定的時(shí)候選擇更好的適應(yīng)或者改變。

在我看來模態(tài)的概念是當(dāng)今應(yīng)用設(shè)計(jì)中最被忽視的UX原則之一?？缙脚_和Web本地混合應(yīng)用并不能很好的使用模態(tài)的指南和規(guī)范。但是模態(tài)的基本規(guī)則你應(yīng)該了解，以便在必要的時(shí)候適應(yīng)或者改變它。