信息逐級呈現(xiàn)的模式是一種管理信息復(fù)雜性的策略。信息逐級呈現(xiàn)在交互中具有非常多的優(yōu)點：重要信息優(yōu)先呈現(xiàn)；界面也會更加干凈；減少用戶使用的出錯率等等。那么該如何去設(shè)計信息逐級呈現(xiàn)呢？

在開始之前，我們先快速的明確一下什么是設(shè)計模式。設(shè)計模式最早出自Christopher Alexander，他是一位建筑工程師和設(shè)計理論家，他注意到我們活動中的許多事情都是按著一定的模式發(fā)生：模式描述一個問題然后提供一種解決方案。他將自己的發(fā)現(xiàn)融入應(yīng)用到工作中并依此出版了一部巨著《模式語言》。從那之后，設(shè)計模式就找到了在我們生活中的用武之地，同時作用于設(shè)計和開發(fā)用戶界面的時候。

不同的設(shè)計模式幫助我們提供那些所有設(shè)計人員和開發(fā)人員在他們工作中最常見問題的解決方案。在本文中，我們將探索信息逐級呈現(xiàn)模式以及如何將其應(yīng)用到你的App原型設(shè)計中去。

一、什么是信息逐級呈現(xiàn)？

信息逐級呈現(xiàn)的模式是一種管理信息復(fù)雜性的策略。當(dāng)你使用這種模式時，你能夠只在用戶需要的時候呈現(xiàn)出相應(yīng)的信息。隨著用戶的交互，再逐級呈現(xiàn)出用戶界面中更多的高級功能。這是個簡單但依然強大的設(shè)計模式：

1. 一開始，只向用戶呈現(xiàn)很少一部分最重要的選項（信息）。
2. 只在用戶發(fā)起請求的時候再向其呈現(xiàn)更多具體的選項（信息）。

就像俄羅斯套娃你打開一個看到另一個一樣，信息逐級呈現(xiàn)允許信息一級一級的呈現(xiàn)

二、信息逐級呈現(xiàn)的益處

1、重要信息優(yōu)先

在一個遵循信息逐級呈現(xiàn)的原則的設(shè)計中，毫無疑問地，那些出現(xiàn)在應(yīng)用程序初始頁面的內(nèi)容告訴用戶這部分信息是極其重要的。對于全新的小白用戶來說，這有助于將他們的注意力集中在對他們最為有用的那部分功能上。對于科技內(nèi)行來說，這些初始信息節(jié)省了他們的時間，因為他們不同花費大把時間去翻查那些很少會用到的功能，他們能很快搞清楚程序的主要功能，而不用一一去試用那些實際可能并不會常用的功能再去得出結(jié)論。

2、干凈，更簡單，更有效率的用戶界面

通過隱藏更多低頻功能，你能夠刪除那些界面上的混亂，而功能并未減少。我們認(rèn)為，應(yīng)用程序允許用戶通過某種類型的輸入（通常是輕叩）來表達自己更加中意于某項功能、某些內(nèi)容。當(dāng)用戶看到一個界面元素，然后可能會決定想要了解關(guān)于它更多的信息或者跟它相關(guān)的信息。如果他們真的這樣做，他們就在無形中放大了自己的偏好。

3、出錯率

因為新手用戶更容易上手，各步驟可控性強，所以會出現(xiàn)更少的錯誤。

三、了解你的用戶

信息逐級披露模式的主要危險是不正確的假設(shè)您了解什么是最受歡迎的、常見的或者重要的任務(wù)。在設(shè)計一款A(yù)pp的時候，你很容易陷入人人都跟你一樣的臆想。你顯然了解你的App很多，因為你對它是充滿熱情的。但是大多數(shù)時候，你的用戶并不會關(guān)心那么多。正如Jakob Nielsen所言：可用性測試最來之不易的教訓(xùn)之一是“你不是用戶”。

這就是為什么你的用戶體驗設(shè)計應(yīng)該最優(yōu)化的面向外部用戶，而非內(nèi)部（向你或者你們團隊）的原因。用戶是有目標(biāo)的，他們希望使用你的App來做或者解決某想事情。為了設(shè)計出一個良好的信息逐級呈現(xiàn)的模式，你需要了解你的用戶，將他們拉入到設(shè)計過程中來，并和他們進行互動。

四、在手機App中的信息逐級呈現(xiàn)

信息逐級呈現(xiàn)的例子無處不在。一個簡單的指向更多信息的“了解更多”的鏈接就是個很好的例子。但還有更多復(fù)雜和有趣的案例，比如下面將要提及的：

1、過程管理

交互式的過程管理是個很好的例子。它是這樣的過程：提示信息只在用戶到達相應(yīng)觸發(fā)點的時候再呈現(xiàn)。因此，對不同的用戶，提示可能會按著不同的順序顯現(xiàn)。

Duolingo 使用一個交互式的信息逐級呈現(xiàn)的方式來告訴用戶這款A(yù)pp如何使用：用戶被鼓勵進入并使用所選的語言做一組快速測試。

Duolingo 有一個由快速測試構(gòu)成的用戶指導(dǎo)流程

2、遮罩層的引導(dǎo)

在任何你要隱藏重要功能的時候，很重要的一項事情就是你要給用戶提示，來告訴他們說他們依然能使用該功能。當(dāng)這種隱藏的特性被應(yīng)用程序使用到位的時候，用戶就會對這款A(yù)pp的交互作用非常滿意。而信息逐級呈現(xiàn)的方式則能夠被用來呈現(xiàn)正確的信息，尤其在用戶需要它們的時候。

例如，YouTube的安卓端App，使用一個遮罩層的引導(dǎo)教學(xué)來向用戶解釋尚不熟悉的交互。這些提示在新用戶首次啟動并到達相關(guān)區(qū)域的時候出現(xiàn)。

YouTube安卓端App中的遮罩層

3、動畫提示

在游戲中，有一種更常用的方法用來處理信息的主機呈現(xiàn)，就是在你推進游戲的時候展現(xiàn)其中用到的力學(xué)結(jié)構(gòu)。這樣的提示只有當(dāng)用戶達到適當(dāng)?shù)捏w驗點時才觸發(fā)。

例如，Pudding Monsters 使用一只頗富生氣的手來解釋滑動的動作，非常清晰的告訴用戶下一步怎么做。

信息逐級呈現(xiàn)模式能給App帶來簡單和豐富的特性

4、攻略提示

一段攻略提示是游戲行業(yè)中常見的另一個例子，它就像一個經(jīng)驗指南一樣，將用戶帶入一個專注的流程中去完成代表主要交互的動作/任務(wù)。攻略提示通常是預(yù)先建立一個目標(biāo)動作/任務(wù)（如“讓我們建造一所房子”），然后引導(dǎo)用戶按著App中的標(biāo)準(zhǔn)交互結(jié)合上下文環(huán)境來執(zhí)行。用戶遵從他們自己的步伐向前，而用戶界面則指導(dǎo)他們并自然的帶動他們學(xué)習(xí)。

在植物大戰(zhàn)僵尸中，攻略提示使用關(guān)卡和文本提示的組合來指導(dǎo)新用戶

五、結(jié)論

我們總是試圖充分利用我們的用戶界面，并最大化使用一切可用的空間。信息逐級呈現(xiàn)是一個很強大的設(shè)計模式，它能夠幫助保持用戶界面的干凈整齊，并讓用戶在不產(chǎn)生困惑和挫敗感的情況下掌控那些App中復(fù)雜的一面。

當(dāng)你要設(shè)計一個信息逐級呈現(xiàn)的模式，請試著去遵循一個簡單的規(guī)則——呈現(xiàn)更少，提供更多。為了達到良好的用戶體驗，你必須恰當(dāng)?shù)貐^(qū)分開首要和次要功能。你必須揭露出那些用戶在一開始之前就需要的信息，這樣他們就只需要在很少場合再去查看第二遍。主列表不能包含太多選擇。

最后但同樣重要的是，當(dāng)設(shè)計遮罩層引導(dǎo)或任何其他類型的提示時，要記得最主要的是讓它們盡可能的短。應(yīng)該專注于用戶任務(wù)上，并為最大化的可瀏覽性而設(shè)計。

譯自：https://uxplanet.org/design-patterns-progressive-disclosure-for-mobile-apps-f41001a293ba#.yzba432ks

譯者@三達不留點gpj

來源@簡書

本文由 @三達不留點gpj 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉(zhuǎn)載。