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

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

 

 

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

 

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

 

讓我們以一個(gè)大膽的斷言開(kāi)始探索：

 

界面只有兩種類(lèi)型：

1. 模態(tài)界面

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

 

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

 

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

模態(tài)界面示例

 

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

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

• （2）彈出窗口

• （3）氣泡彈窗

• （4）燈箱效果

• （5）告警／通知

• （6）多步驟對(duì)話(huà)窗口

• （7）…

   

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

 

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

 

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

 

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

 

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

 

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

 

視覺(jué)上最明顯的指示就是非模態(tài)界面中可以看到導(dǎo)航菜單（案例中的Tab Bar）。非模態(tài)界面允許用戶(hù)在主導(dǎo)航級(jí)別來(lái)回切換，即使恰好位于子頁(yè)面中。另一方面，在模態(tài)界面中，用戶(hù)如果想再次使用主導(dǎo)航必須關(guān)閉當(dāng)前窗口（案例中的“保存”或“取消”）。這種區(qū)別是大多數(shù)APP失敗的原因之一，也是我撰寫(xiě)文章“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)界面解決了一個(gè)簡(jiǎn)單的問(wèn)題：用戶(hù)很容易被分心，所以你需要抓住他們?nèi)康淖⒁饬ΑＤB(tài)界面正是這么做的：它要求用戶(hù)在繼續(xù)之前集中精神在一個(gè)單一任務(wù)上。

 

“模態(tài)通過(guò)創(chuàng)造聚焦區(qū)域阻止人們?cè)谕瓿扇蝿?wù)或刪除消息或查看之前分心去做其它的事情”— 蘋(píng)果

 

 

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

 

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

 

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

 

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

 

一個(gè)簡(jiǎn)單的用戶(hù)流程圖可能看起來(lái)這樣：用戶(hù)打開(kāi)APP，進(jìn)入幾個(gè)可用tab選項(xiàng)之一（我們的小貓數(shù)據(jù)庫(kù)），點(diǎn)擊了其中一只小貓（進(jìn)入了一只小貓的單獨(dú)詳情頁(yè)），接著點(diǎn)了評(píng)論部分（進(jìn)入評(píng)論部分）

 

purrrfect用戶(hù)流程

 

此外，用戶(hù)可以在每個(gè)階段進(jìn)行補(bǔ)充操作。例如，他可以添加另一個(gè)小貓的信息到數(shù)據(jù)庫(kù)中。或者他可以在小貓的詳情頁(yè)編輯信息。好東西。

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

可能的purrrfect用戶(hù)界面

 

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

 

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

 

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

 

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

 

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

 

不一致的Apple UI

 

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

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

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

 

 

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

 

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

 

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

   

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

 

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

 

 

多步驟模式

 

一旦模態(tài)對(duì)話(huà)框包含多個(gè)步驟或子界面，事情就會(huì)變得更加困難。默認(rèn)情況下，繼續(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ū)域就可以為取消按鈕騰出空間。盡管它從左側(cè)跳到了右側(cè)，但這種位置仍然比不提供關(guān)閉子界面的模態(tài)界面的功能要好。

 

動(dòng)畫(huà)

 

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

 

• iOS:  動(dòng)畫(huà)在IOS中是高度標(biāo)準(zhǔn)化的

   

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

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

   

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

 

 

結(jié)論

 

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

 

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

 

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

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