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

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

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

基本每個(gè)可視化窗口幾乎都屬于這兩類(lèi)中的一個(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)屏幕這兩種類(lèi)型看起來(lái)似乎很好理解，它們都從屬于App的主窗口。但是有一個(gè)重要的區(qū)別：

模態(tài)窗口

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

 —— 維基百科

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

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

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

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

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

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

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

“模態(tài)通過(guò)阻止人們?cè)谕瓿扇蝿?wù)或解除消息或視圖之前做其他事情來(lái)創(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ù)庫(kù)，它允許用戶(hù)上傳，查看和評(píng)論可愛(ài)的貓咪GIF。

資料來(lái)源：https：//giphy.com/gifs/tDgXAst2PhIYw

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

Purrrfect用戶(hù)流程

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

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

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

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

——Google

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

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

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

Purrrfect用戶(hù)界面

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

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

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

——? Apple

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

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

不一致的Apple UI

左邊的不一致可以通過(guò)....來(lái)解決

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

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

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

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

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

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

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

多步模態(tài)

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

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

動(dòng)畫(huà)

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

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

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

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

Android： Android上的動(dòng)畫(huà)更加的豐富多樣。

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

總結(jié)

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

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