好的新手引導(dǎo)設(shè)計可以有效地降低用戶的使用門檻，并提升用戶體驗。筆者通過分析現(xiàn)有新手引導(dǎo)研究以及展開新手引導(dǎo)設(shè)計的反思，提煉了非常實用的價值點。

一、現(xiàn)有新手引導(dǎo)研究

為了讓新用戶更好地使（gong）用（xian）產(chǎn)（li）品（run），設(shè)計師往往會在用戶初次使用產(chǎn)品時給予引導(dǎo)，以幫助用戶熟悉產(chǎn)品功能及操作。

良好的新手引導(dǎo)可以降低用戶使用的門檻，給用戶留下用戶體驗良好的第一印象。因此，新手引導(dǎo)一般包括產(chǎn)品功能介紹和初次使用引導(dǎo)兩種功能，二者共同提升產(chǎn)品的用戶體驗。

那么新手引導(dǎo)設(shè)計應(yīng)該包含哪些內(nèi)容？設(shè)計時有哪些要注意的點？筆者試從產(chǎn)品功能介紹和初次使用引導(dǎo)兩個角度，結(jié)合用戶體驗，分別予以介紹。

1. 產(chǎn)品功能介紹

現(xiàn)有在新手引導(dǎo)中嵌入產(chǎn)品功能的常用方式有滑動展示引導(dǎo)頁和使用說明書引導(dǎo)兩種。

滑動展示引導(dǎo)頁

是指在用戶初次使用產(chǎn)品時提供一系列可滑動展示的、介紹應(yīng)用功能的引導(dǎo)頁，這種引導(dǎo)頁的缺陷在于它橫亙在用戶和APP之間，即使頁面設(shè)計得精美有趣，用戶也很難充滿耐心地仔細(xì)閱讀完。

因為絕大多數(shù)的用戶在下載APP前多是事先了解過產(chǎn)品的功能的，當(dāng)他打開APP時，再次出現(xiàn)功能說明就顯得重復(fù)；而且用戶多傾向于自己探索APP，即使教程對他們有所助益，但是這本身是偏離用戶初衷的。因此不建議做純粹的以產(chǎn)品功能介紹為內(nèi)容的新手引導(dǎo)頁。

使用說明書引導(dǎo)

它會在用戶使用產(chǎn)品后看到的第一個界面中詳細(xì)介紹產(chǎn)品的功能，并且多數(shù)帶有鼓勵用戶嘗試使用的文字說明。比如下圖顯示的APP，“Welcome Board”是用戶使用任務(wù)管理面板時看到的第一個界面，其中涵蓋了預(yù)填充的代辦事項列表，說明了程序中不同控件的交互和功能。

以這種方式進(jìn)行功能介紹把看還是不看、仔細(xì)看還是粗略看的選擇權(quán)還給了用戶，具有更好的用戶體驗。而且使用說明書引導(dǎo)的方式常常是功能介紹與使用引導(dǎo)結(jié)合在一起，讓用戶在使用中進(jìn)一步了解產(chǎn)品的功能，用戶學(xué)習(xí)起來也更高效。

整體而言，在產(chǎn)品的新手引導(dǎo)中嵌入產(chǎn)品功能的行為是比較少的，多數(shù)產(chǎn)品會選擇在官網(wǎng)上進(jìn)行功能介紹，這樣的介紹方式受限少，更具整體性和系統(tǒng)性，形式也更靈活。

2. 初次使用引導(dǎo)

如上文所述，多數(shù)新手引導(dǎo)更著重使用方法方面的說明，致力于降低用戶的使用門檻，提升用戶體驗。初次使用引導(dǎo)的方式有多種，常見的有滑動展示引導(dǎo)頁、遮罩式引導(dǎo)、彈窗式引導(dǎo)、氣泡/浮層式引導(dǎo)以及內(nèi)嵌式引導(dǎo)。這五種方式引導(dǎo)的強(qiáng)度依次降低，對用戶的干擾程度也依次減小。

1. 滑動展示引導(dǎo)頁

在新手引導(dǎo)中是比較常見的方式，比如APP Store上好評如潮的Clear，由于其簡潔的操作對新用戶來說使用難度較高，所以在用戶首次使用時Clear會提供7屏教程來引導(dǎo)用戶使用，教會他們常用的交互手勢。但這種方式缺陷依然存在，強(qiáng)制用戶在使用前觀看復(fù)雜的教程，可能會讓嘗試使用的用戶立刻就打了退堂鼓。

2. 遮罩式引導(dǎo)

這也是一種強(qiáng)引導(dǎo)，通過直接蓋住界面來強(qiáng)調(diào)當(dāng)前需要引導(dǎo)的內(nèi)容。

這種提示讓用戶將注意力集中到某個特定功能上，通常出現(xiàn)在用戶首次操作的時候，一次顯示一個或多個。引導(dǎo)內(nèi)容只有當(dāng)用戶看到提示內(nèi)容并且執(zhí)行相應(yīng)操作比如點擊遮罩或點擊“×”時才會消失，這就確保了信息傳達(dá)的有效性。注意這里的首次操作并不一定是用戶首次使用此產(chǎn)品，即使是老用戶，只要他之前沒有到達(dá)過這個頁面，那么當(dāng)他首次到達(dá)時就會顯示新手引導(dǎo)。這種引導(dǎo)方式非常常見，既可以在用戶首次使用時用來做全局引導(dǎo)，也可以埋在產(chǎn)品的各個功能點等待用戶的發(fā)現(xiàn)。

使用遮罩式引導(dǎo)時要注意兩點：

首次使用的全局引導(dǎo)信息量不應(yīng)過大，否則就像滑動展示引導(dǎo)一樣會讓用戶失去耐心；使用過程中的引導(dǎo)要保證是在用戶需要幫助時出現(xiàn)，否則就不是引導(dǎo)而是干擾了。

3. 彈窗式引導(dǎo)

這也是一種強(qiáng)引導(dǎo)，指在用戶即將使用到某功能或某交互方式時跳出彈窗予以解釋并介紹相應(yīng)的操作。這里要注意的是彈窗觸發(fā)的條件要清晰，時機(jī)要得當(dāng)。

比如知乎在用戶打開某答案后會彈窗提示“左劃切換回答”。這種即時的提醒方式在用戶即將使用到某功能時提供相應(yīng)的操作引導(dǎo)，對用戶而言是切實的幫助，有利于提升產(chǎn)品的用戶體驗。但彈窗雖然內(nèi)容量不大，但仍會打斷用戶原有的使用流程，在體驗上仍有改進(jìn)的空間。

4. 氣泡/浮層式引導(dǎo)

這是一種量級輕但是目的性很強(qiáng)的引導(dǎo)方式，一般是結(jié)合文案的半透明浮層的設(shè)計模式，顯示3-5秒后自動消失，對用戶的干擾較小。

大部分浮層模式帶有指向性的箭頭，可以用來提示重要功能或者隱藏操作。這種引導(dǎo)方式下，用戶可以自行選擇是否進(jìn)行相應(yīng)操作，而且即使不進(jìn)行任何操作對當(dāng)前進(jìn)程也沒有影響。氣泡/浮層式引導(dǎo)對用戶的干擾小，引導(dǎo)強(qiáng)度也較小，偏向于內(nèi)容、功能及使用方式上的提醒。

5. 內(nèi)嵌式引導(dǎo)

這是將幫助引導(dǎo)直接嵌入到界面里，在需要引導(dǎo)的時候起到引導(dǎo)幫助的作用，如某瀏覽器在進(jìn)入主頁以及新建標(biāo)簽頁后會在沒有添加網(wǎng)頁九宮格位置上顯示空白，并加以數(shù)字和“點擊添加你喜歡的網(wǎng)站”的文字提示，以此引導(dǎo)用戶。

內(nèi)嵌式引導(dǎo)設(shè)計巧妙，在不打擾用戶的情況下給予用戶可能需要的操作提示，相較于前面介紹的幾種方式，對用戶的干擾最小。

二、新手引導(dǎo)設(shè)計反思

唐·諾曼在《設(shè)計心理學(xué)3·情感設(shè)計》中寫道：設(shè)計分為三個層次：本能、行為和反思。

1. 本能層次的設(shè)計指的是產(chǎn)品外觀，是第一印象形成的基礎(chǔ)；
2. 行為層次的設(shè)計指的是產(chǎn)品使用過程中的效率和愉悅感，著重于可用性和易用性；
3. 反思層次的設(shè)計指的是產(chǎn)品的合理性和智能性，是體驗思想和情感的完全交融。

對應(yīng)到新手引導(dǎo)的設(shè)計上，筆者認(rèn)為：

1. 本能層次的設(shè)計要求新手引導(dǎo)有良好的UI，包括提示的形式、配色、圖案和文字等等；
2. 行為層次的設(shè)計要求新手引導(dǎo)出現(xiàn)的時機(jī)要恰當(dāng)，保證引導(dǎo)的出現(xiàn)正好解決了用戶的燃眉之急；
3. 反思層次的設(shè)計要求新手引導(dǎo)要有特色，無論是設(shè)計別具一格還是形式標(biāo)新立異，能給用戶留下印象，即使不再使用想起來也會會心一笑。

由前文的舉例可以看出，新手引導(dǎo)的強(qiáng)度和其對用戶的干擾程度是正相關(guān)的。這并不難理解，畢竟要讓用戶看到引導(dǎo)，就必須打斷他，讓他從當(dāng)前的活動轉(zhuǎn)向引導(dǎo)的內(nèi)容。無論是使用前的引導(dǎo)，還是使用過程中的引導(dǎo)，一定程度上都“阻礙”了用戶的使用，用戶體驗并不好。

那么怎么做才能兼顧引導(dǎo)強(qiáng)度與用戶體驗，設(shè)計出情感設(shè)計三個層次上都優(yōu)秀的新手引導(dǎo)呢？

筆者認(rèn)為要深入理解用戶真正的需求，增加巧妙引導(dǎo)，減少“強(qiáng)行”引導(dǎo)。

新手引導(dǎo)設(shè)計的初衷是好的，但實際效果往往并不理想，根本原因還是設(shè)計者想當(dāng)然，并未get到用戶的實際需求。

有研究表明：即使一個簡短的分步解讀（3步）或者一個視頻演示也會讓用戶產(chǎn)生困擾，并不能提高他們參與的積極性。測試顯示用戶會跳過或者直接忽略對話框/分步解讀/視頻演示/透明層解讀。有被測者說道：“我只是想進(jìn)入并開始探索這個APP而已?！?/p>

針對這種情況，這位研究者給出了5個建議，以期以最小的用戶體驗損失來達(dá)到最大的新手引導(dǎo)效果。筆者認(rèn)為如果說情感設(shè)計的三個層次是內(nèi)功心法，那這5個建議就是武功招式?，F(xiàn)摘錄如下：

1. 盡量少用文字；
2. 需要的時候再出現(xiàn)；
3. 讓它有趣；
4. 讓用戶邊玩邊學(xué)；
5. 傾聽你的用戶。

規(guī)則1：盡量少用文字

用文字來介紹產(chǎn)品詳盡、準(zhǔn)確，但信息單一、節(jié)奏太慢。

用戶本能上偏愛看圖，且沒什么耐心，大段的文字將會被直接忽略。用圖片和動作來代替文字說明，跟用戶互動起來，讓用戶邊用邊學(xué)。

左圖的引導(dǎo)為純文字介紹，9頁信息讓用戶只看不做，是對用戶耐心的一次考驗；右圖采用了文字、圖標(biāo)和動效示意圖，并引導(dǎo)用戶親自動手操作，用戶接受起來就更容易些。

規(guī)則2：需要的時候再出現(xiàn)

提前加載教程，一開始就告知用戶所有的事情，他們會被困在大量的信息中，更重要的是這對用戶當(dāng)下的活動并沒有什么幫助，在行為層次上是失敗的。

可以考慮在用戶需要的時候，提供簡短、易理解的信息，而不要讓用戶在一開始就掩埋在大量信息中。

左圖的APP在用戶打開后就準(zhǔn)備了一場11頁引導(dǎo)組成的講座；右圖的APP在用戶打開后就進(jìn)入使用界面，引導(dǎo)用戶創(chuàng)建第一個list 。

規(guī)則3：讓它有趣

盡管讓學(xué)習(xí)APP變有趣很難，但確實有一些方法能激勵用戶去好好體驗一下，比如在反饋方式上給用戶好玩的感覺。

左圖的引導(dǎo)采用了透明層注釋和趣味化字體，但是5頁純文字教程看起來仍像是一場講座。

而右圖的APP在第一步被打開時沒有任何說明性的文字，打開Flipboard之后，頁面的下半部分會調(diào)皮地向上翻轉(zhuǎn)一下，在翻轉(zhuǎn)回來前，會讓用戶看到一些內(nèi)容。之后，用戶可能會向上翻轉(zhuǎn)以查看隱藏的內(nèi)容，如果用戶沒有翻轉(zhuǎn)，則會看到一個提示“向上翻轉(zhuǎn)以繼續(xù)“。一邊翻轉(zhuǎn)，一邊探索，這個過程加強(qiáng)了新手用戶對于這個特殊手勢的使用，有趣且有價值。而且這種新穎的引導(dǎo)方式在千篇一律的新手引導(dǎo)中標(biāo)新立異，讓用戶在學(xué)會之后想起也會覺得有趣，說不定還會向朋友炫耀，是反思層面上的優(yōu)秀設(shè)計。

規(guī)則4：讓用戶邊用邊學(xué)

回想一下中學(xué)學(xué)習(xí)科學(xué)概念時，老師會在做實驗前稍微講解一下，但只有當(dāng)自己通過實驗得出相關(guān)結(jié)論時，才會真的理解，心里感覺美滋滋的。這種邊做邊學(xué)的學(xué)習(xí)方法可以用在新手引導(dǎo)的設(shè)計當(dāng)中。簡單來說，可以通過在用戶操作過程中加入一些視覺、聽覺的反饋，以此讓用戶和APP互動起來，這樣不僅可以提高用戶的耐心，也會加深他們的印象。

規(guī)則4和規(guī)則2是相輔相成的。不需要在一開始展示APP的所有特點，而是邀請用戶去循序漸進(jìn)地探索它。慢慢地揭開APP的神秘面紗，讓用戶在使用過程中不斷地獲得驚喜，這樣用戶才會流連忘返。下圖的APP會在用戶答完一些題之后告知用戶如何跳過不感興趣的；當(dāng)用戶掌握一些技能后，給予用戶一定的激勵，同時提升他們的等級。

規(guī)則5：傾聽你的用戶

適當(dāng)?shù)挠脩魷y試將會揭示用戶在使用過程中遇到的障礙。在測試過程中，你需要觀察用戶在哪兒犯了錯、對哪兒存在疑惑，傾聽他們在使用過程中的發(fā)言。等到測試結(jié)束后，再進(jìn)行一場深入的訪談。因為如果在使用過程中進(jìn)行訪談，你可能會不自覺地引導(dǎo)他們?nèi)フf你想聽到的答案。

通過用戶測試，Snap Payroll的設(shè)計師們最終得出：循序漸進(jìn)的引導(dǎo)或者在使用過程中給予相關(guān)提示，得到的用戶反饋是最好的。這個結(jié)論，在RetailMeNot的4輪用戶測試中也得到了驗證。

總結(jié)

好的設(shè)計是不需要新手引導(dǎo)的，這句話在一定程度上是有道理的。

雖然我們可以設(shè)計新手引導(dǎo)來幫助新用戶，但更重要的是整個產(chǎn)品的設(shè)計要清晰易懂，易學(xué)易記。這樣既能減少新用戶使用產(chǎn)品時的困難，減輕新手引導(dǎo)設(shè)計的壓力，又能提高用戶使用產(chǎn)品的熱情，畢竟這才是用戶體驗的根本。

?參考文章

1. 淺析產(chǎn)品新手引導(dǎo)設(shè)計?
2. 新手引導(dǎo)設(shè)計，這樣改善太棒了！
3. 來設(shè)計個新手引導(dǎo)吧！
4. 手機(jī)游戲新手引導(dǎo)的設(shè)計研究
5. 怎么設(shè)計移動應(yīng)用的新手引導(dǎo)更好？
6. 網(wǎng)站產(chǎn)品功能設(shè)計：如何設(shè)計新手用戶引導(dǎo)
7. [譯文]反思手機(jī)app使用教程的設(shè)計：哪些模式才真的有用？?
8. 新用戶引導(dǎo)設(shè)計模式
9. 更生層次的交互設(shè)計——情感化設(shè)計
10. 《設(shè)計心理學(xué)3：情感設(shè)計》Donald Arthur Norman / 何笑梅 / 歐秋杏 / 中信出版社
11. 《移動應(yīng)用UI設(shè)計模式》Theresa Neil / 田原 / 人民郵電出版社

本文由 @Tzufeng 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議