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

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

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

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

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

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

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

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

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

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

2、干凈，更簡(jiǎn)單，更有效率的用戶界面

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

3、出錯(cuò)率

因?yàn)樾率钟脩舾菀咨鲜郑鞑襟E可控性強(qiáng)，所以會(huì)出現(xiàn)更少的錯(cuò)誤。

三、了解你的用戶

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

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

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

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

1、過(guò)程管理

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

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

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

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

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

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

YouTube安卓端App中的遮罩層

3、動(dòng)畫(huà)提示

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

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

信息逐級(jí)呈現(xiàn)模式能給App帶來(lái)簡(jiǎn)單和豐富的特性

4、攻略提示

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

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

五、結(jié)論

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

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

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

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

譯者@三達(dá)不留點(diǎn)gpj

來(lái)源@簡(jiǎn)書(shū)

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