模態(tài)是一個很多設(shè)計師沒有完全理解的UX概念

寫在翻譯之前：很早以前就有周譯這個想法，但一直沒有行動，也許有時翻譯還會和別人重復(fù)了，但也沒關(guān)系，就是要自己實際學(xué)到了這一個知識點就好了啊，加入翻譯的潮流，堅持下來，積累學(xué)習(xí)。

這篇文章以3W1H的方式討論了模態(tài)界面，從模態(tài)界面的角度討論了Apple的新APP Store設(shè)計，一個很好的思考點。下面開始正式翻譯：

 

 

很多設(shè)計師，主要是年輕的設(shè)計師，在創(chuàng)造數(shù)字產(chǎn)品時依靠的是他們的直覺。雖然在許多產(chǎn)品中這是起作用的，但是已經(jīng)證明通用標準能幫助你有邏輯的構(gòu)建良好的UI解決方案，而不是依靠你的直覺。

 

在這篇文章中，我們將探討模態(tài)在用戶界面中的通用標準，討論僅有兩種基本類型的界面的原因，分析APP和網(wǎng)頁在將信息架構(gòu)和用戶流程轉(zhuǎn)變成直觀的用戶界面方面是如何失敗的。哦，我們將討論關(guān)于小貓們。

 

讓我們以一個大膽的斷言開始探索：

 

界面只有兩種類型：

1. 模態(tài)界面

2. 非模態(tài)界面

 

就是這樣，讓我解釋一下。幾乎每個可以想象的視圖都可以歸進這兩種類型中。為了理解模態(tài)界面和非模態(tài)界面的差異，我們首先需要明確什么是模態(tài)界面。

 

什么是“模態(tài)界面”？

模態(tài)界面示例

 

模態(tài)界面可以是不同的形狀和大小：

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

• （2）彈出窗口

• （3）氣泡彈窗

• （4）燈箱效果

• （5）告警／通知

• （6）多步驟對話窗口

• （7）…

   

模態(tài)界面和非模態(tài)界面都是子視圖，這意味著它們都附屬于應(yīng)用的主窗口之下。但是這里有個重要的區(qū)別：

 

“【模態(tài)界面】是一種主窗口可見但不可用，模態(tài)界面作為子視圖在最前面的一種方式。用戶必須先和模態(tài)界面交互之后它們才能回到應(yīng)用的父級界面” — 維基百科

 

大多數(shù)的模態(tài)界面，尤其是桌面應(yīng)用，可以輕松識別，因為它們會可視的疊在主窗口上面：比如淡出背景主窗口的彈出窗口，彈出菜單、彈出對話框、燈箱廣告、告警……

 

然而，移動設(shè)備的屏幕空間有限，這也是為什么許多模態(tài)界面在移動設(shè)備上占據(jù)全屏的原因。它們不再保持底層主窗口可見，所以也使得它們和非模態(tài)界面更難區(qū)分：

 

IOS示例：移動設(shè)備上的模態(tài)窗口通常會完全隱藏APP的主窗口

 

主要的區(qū)別在于你和每個界面交互的方式。當一個非模態(tài)界面允許用戶輕易返回父級界面，而模態(tài)界面要求用戶在他們回到主界面之前必須完成操作（案例中的“保存”）或取消當前的操作。

 

視覺上最明顯的指示就是非模態(tài)界面中可以看到導(dǎo)航菜單（案例中的Tab Bar）。非模態(tài)界面允許用戶在主導(dǎo)航級別來回切換，即使恰好位于子頁面中。另一方面，在模態(tài)界面中，用戶如果想再次使用主導(dǎo)航必須關(guān)閉當前窗口（案例中的“保存”或“取消”）。這種區(qū)別是大多數(shù)APP失敗的原因之一，也是我撰寫文章“Tab Bars是新的漢堡菜單”的原因之一：

 

Tab Bars are the new Hamburger Menus
In this article we are going to talk about a navigation pattern that got out of hand.uxplanet.org

 

 

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

 

模態(tài)界面解決了一個簡單的問題：用戶很容易被分心，所以你需要抓住他們?nèi)康淖⒁饬?。模態(tài)界面正是這么做的：它要求用戶在繼續(xù)之前集中精神在一個單一任務(wù)上。

 

“模態(tài)通過創(chuàng)造聚焦區(qū)域阻止人們在完成任務(wù)或刪除消息或查看之前分心去做其它的事情”— 蘋果

 

 

什么時候使用模態(tài)？

 

現(xiàn)在我們知道一個模態(tài)界面是什么樣的，它和非模態(tài)界面的比較以及它的目的是什么，我們必須問自己“我們應(yīng)該在什么情況下使用它？”

 

來看我答應(yīng)過你們的小貓們，我們開始吧：讓我們來想象我們正在創(chuàng)作一個獨具匠心和創(chuàng)新精神的硅谷應(yīng)用：“purrrfect”——一個小貓數(shù)據(jù)庫，允許用戶上傳、查看和評論可愛貓咪GIF圖片。才華橫溢的概念。

 

Source: https://giphy.com/gifs/tDgXAst2PhIYw 

 

一個簡單的用戶流程圖可能看起來這樣：用戶打開APP，進入幾個可用tab選項之一（我們的小貓數(shù)據(jù)庫），點擊了其中一只小貓（進入了一只小貓的單獨詳情頁），接著點了評論部分（進入評論部分）

 

purrrfect用戶流程

 

此外，用戶可以在每個階段進行補充操作。例如，他可以添加另一個小貓的信息到數(shù)據(jù)庫中?；蛘咚梢栽谛∝埖脑斍轫摼庉嬓畔?。好東西。

 

現(xiàn)在，這些界面哪些是模態(tài)界面，哪些不是呢？這個分類一點也不簡單——這是我個人的經(jīng)驗法則：

 

對于自包含流程使用模態(tài)界面，對于其它所有流程使用非模態(tài)界面。

 

“自包含流程”是指每一個動作有一個明確的起點和重點。在這個操作的有限時間范圍內(nèi)，它將用戶從一般的用戶流中帶出，讓他們專注于當前的操作，然后再將他們帶回開始的地方。

 

谷歌有這樣一句話：使用模態(tài)界面（對話框）…

 

“關(guān)鍵在于需要一個特定的用戶任務(wù)、決策和確認"— 谷歌

 

在我們的purrrfect應(yīng)用中，這意味著關(guān)鍵用戶流（經(jīng)常瀏覽應(yīng)用）是非模態(tài)的。然而，一些特殊的有時間限制的操作，比如添加、編輯小貓信息和撰寫評論都是模態(tài)的。

 

 

在用戶返回主流之前，可以取消或成功完成所有模態(tài)操作。因此，模態(tài)界面使用取消和保存按鈕（或一些類似操作），而不是返回按鈕。如果在非模態(tài)界面你的返回按鈕同時觸發(fā)了保存操作，你可能會考慮將它轉(zhuǎn)換成有取消和保存的模態(tài)界面。這種矛盾通常也是正確的：如果兩個不同的操作，比如取消和保存在你的模態(tài)界面中無法起作用（因為它們會觸發(fā)相同的操作），你可能會想將它換成非模態(tài)視圖。在這種情況下，主導(dǎo)航（比如Tab Bar）也應(yīng)該在界面中保持可見。

 

讓我們回到改變游戲規(guī)則的APP， Purrrfect的界面可能是這樣的：

 

可能的purrrfect用戶界面

 

在現(xiàn)實中，模態(tài)和非模態(tài)界面的區(qū)別可能很不明顯。例如，一張圖片的全屏視圖在大多數(shù)APP中是模態(tài)界面，盡管它不是一個流程或?qū)υ?。為了讓用戶產(chǎn)生聚焦，模態(tài)界面在其它特殊情況下可能也有意義。在我們小貓的詳情界面(中間)是一個沒有其它操作（如編輯或評論）的終點視圖，我們可能已經(jīng)用了模態(tài)（全屏視圖）。但是，由于它允許用戶更深入的進入信息架構(gòu)并執(zhí)行各種附加的操作（顯示注釋、編輯…）,所以它不再具有明確的端點，因此它是主流程的一部分。因此，這是一種非模態(tài)視圖。

 

設(shè)計師有責(zé)任評估一個動作是自包含的還是應(yīng)用程序一般探索流程的一部分，并決定模態(tài)是否有意義。如果有疑問，請記住蘋果的話：

 

“盡量減少模態(tài)的使用。一般來說，用戶更喜歡以非線性的方式與應(yīng)用程序交互。只有在需要引起別人注意的關(guān)鍵時刻、必須完成或放棄某項任務(wù)才能繼續(xù)使用該APP或保存重要數(shù)據(jù)的時候，才考慮創(chuàng)建一個模態(tài)流程。”— 蘋果

 

說明：當然，無需嚴格區(qū)分模態(tài)和非模態(tài)視圖，界面就可以很好的工作。然而，模態(tài)概念已經(jīng)深入蘋果、谷歌、微軟和其它公司的界面生態(tài)系統(tǒng)中，并且用戶已經(jīng)形成了相應(yīng)的期望。

 

如果蘋果不時不時的打破自己的規(guī)則，它就不會是蘋果：例如，新的APP Store在Today選項卡中以模態(tài)界面的方式進行高亮打開顯示，但仍然允許用戶導(dǎo)航到屏幕底部獲得進一步推薦的內(nèi)容（沒有明確的終點）。通過這種方式，用戶無需固定端點就可以在模態(tài)界面中進行深入的探索。在這個過程中，他們失去了更改選項卡的能力，并且不能再關(guān)閉子頁面上的模態(tài)界面。從推薦之外的地方打開相同的APP界面會導(dǎo)致屏幕顯示為非模態(tài)界面。這將保留tab bar和返回操作（再次點擊當前的Tab Bar圖標能轉(zhuǎn)到其主界面）。

 

不一致的Apple UI

 

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

• A: 在非模態(tài)子界面中使用返回按鈕并高亮顯示，同時保留Tab Bar

• B: 在用戶點擊模態(tài)界面內(nèi)的連接時立即關(guān)閉模態(tài)界面，并在APP的父級繼續(xù)使用非模態(tài)界面

 

 

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

 

到目前為止，我們應(yīng)該對什么時候使用模態(tài)界面有了一個大致的了解。剩下的唯一問題就是“我們?nèi)绾卧O(shè)計它？”，這里有一個快速檢查清單：

 

• 始終在頂部導(dǎo)航欄中顯示關(guān)閉按鈕（或取消/放棄/最小化/…）當用戶迷失，他可以輕易的關(guān)閉彈窗，并回到APP的頂層界面。

   

• IOS和安卓上的取消按鈕通常位于導(dǎo)航欄的左上角。安卓更喜歡用關(guān)閉圖標，而蘋果則喜歡“取消”文本。但是，圖標按鈕在IOS上也很常見，并且被廣泛理解。

 

• 默認情況下，IOS和安卓的保存按鈕都位于導(dǎo)航欄的右上方。但是，這種布局在大屏設(shè)備上遙不可及。因此，屏幕底部固定浮動放置或在頁面底部內(nèi)嵌是我個人推薦的另一個位置。

 

 

多步驟模式

 

一旦模態(tài)對話框包含多個步驟或子界面，事情就會變得更加困難。默認情況下，繼續(xù)按鈕顯示在右上角。第二步并不會打開新的模態(tài)界面，而是停留在當前模態(tài)界面，并顯示為現(xiàn)有模態(tài)疊加的非模態(tài)界面。

 

當將主操作（保存、應(yīng)用、繼續(xù)）放置到屏幕底部時，模態(tài)的第二步右上角區(qū)域就可以為取消按鈕騰出空間。盡管它從左側(cè)跳到了右側(cè)，但這種位置仍然比不提供關(guān)閉子界面的模態(tài)界面的功能要好。

 

動畫

 

到目前為止，IOS和安卓在使用模態(tài)視圖方面都非常相似。然而，當你查看動畫時，這種情況就會改變。

 

• iOS:  動畫在IOS中是高度標準化的

   

  非模態(tài)界面從屏幕右側(cè)進入視圖中。Tab Bar保持在屏幕底部不變。頂部的導(dǎo)航欄也保持不變，但其內(nèi)容在自定義轉(zhuǎn)換中淡入淡出。這個動畫還為返回上一層級的邊緣滑動手勢提供了基礎(chǔ)，這也解決了返回按鈕不在單手可觸碰區(qū)域的問題。

  另一方面，模態(tài)界面從視圖底部進來，覆蓋整個界面（新的頂部導(dǎo)航欄）。他們不使用邊緣滑動手勢，如果沒有內(nèi)容可保存，自定義下拉手勢可能會有所幫助。

   

• Android: 安卓中的動畫會要豐富的多。谷歌在Material Design的設(shè)計指南中推薦使用”有意義的過渡”。子元素在觸摸時抬起并展開的同時，頂部導(dǎo)航欄內(nèi)容淡入淡出。然而，安卓并不區(qū)分模態(tài)動畫和非模態(tài)動畫。

 

 

結(jié)論

 

許多設(shè)計師根據(jù)直覺設(shè)計產(chǎn)品。有時候直覺比標準更重要。但是，重要的是了解公共標準，以便在有意義時適應(yīng)或忽略它。

 

在我看來，模態(tài)的概念是現(xiàn)在的APP設(shè)計中最容易被忽略的UX原則之一?？缙脚_APP或web本地混合應(yīng)用并不能使平臺和規(guī)范的使用變得更容易。但模態(tài)的一般概念是一個知道原則，你應(yīng)該熟悉，以便在必要時打破它。

 

PS: 原文鏈接限制100個字符是什么鬼，為什么定義是100個字符呢，文章鏈接長怎么了，麻煩想看原文的小伙伴手動粘貼一下吧，原文地址如下

https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1