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