互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的新手引導(dǎo)則，是讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式，輕松上手去體驗(yàn)產(chǎn)品的功能，完成自己的目標(biāo)。

一、新手引導(dǎo)是什么

《增長(zhǎng)黑客》中提到：

欲望-摩擦=轉(zhuǎn)化，摩擦是指阻礙人們完成他們想完成的行動(dòng)的令人心煩的障礙。摩擦的強(qiáng)弱直接影響到用戶的轉(zhuǎn)化，而最大的摩擦點(diǎn)就是用戶旅程的起點(diǎn)——“新用戶體驗(yàn)”。

新手引導(dǎo)的存在就是為了消除“新用戶體驗(yàn)”中的摩擦點(diǎn)。

回想我們初入公司時(shí)，公司都會(huì)給大家安排入職培訓(xùn)，讓新人快速融入新環(huán)境，開始新的工作，而這其實(shí)就是公司為我們安排的“新手引導(dǎo)”，新手引導(dǎo)英文onboarding，原意其實(shí)指的就是入職培訓(xùn)。

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中的新手引導(dǎo)則，是讓用戶在短時(shí)間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式，輕松上手去體驗(yàn)產(chǎn)品的功能，完成自己的目標(biāo)。

總的來說，新手引導(dǎo)有2個(gè)目的：

1. 讓新用戶掌握核心功能；
2. 提高產(chǎn)品留存率。

二、設(shè)計(jì)原則

根據(jù)工作中的項(xiàng)目總結(jié)出7項(xiàng)基本的設(shè)計(jì)原則，這些原則可為設(shè)計(jì)實(shí)踐提供準(zhǔn)則，也可作為評(píng)價(jià)設(shè)計(jì)的好壞的內(nèi)在標(biāo)準(zhǔn)：

1. 建立情感聯(lián)系

通過擬人化的形象和文案與用戶建立情感連接，讓用戶產(chǎn)生繼續(xù)走下去的欲望。

建立情感聯(lián)系是人的基本需求，當(dāng)人開始對(duì)事物付出自己的情感后，會(huì)變得更愿意去進(jìn)行深入的了解，也更難去舍棄。

2. 建立用戶目標(biāo)

提示用戶利益點(diǎn)和里程碑進(jìn)程，例如淘金幣的簽到，展示7天打卡進(jìn)程以及每天的獎(jiǎng)勵(lì)，從而吸引用戶每天都來簽到，為用戶建立每天簽到的目標(biāo)。

3. 及時(shí)反饋，強(qiáng)化利益點(diǎn)

在用戶進(jìn)行操作后及時(shí)給與反饋，突出利益點(diǎn)刺激用戶，讓用戶明確知道自己可以通過操作獲得什么。

4. 設(shè)計(jì)節(jié)奏感

通過階段性反饋刺激用戶，減少用戶的疲倦感，如果將新手引導(dǎo)的用戶歷程比作觀影，在不同階段給與用戶小高潮，最終在劇終將劇情推入最高峰，這樣的節(jié)奏感可以讓用戶在操作過程中更加有沉浸感。

5. 分級(jí)開放功能

在面對(duì)一些內(nèi)容繁多的產(chǎn)品時(shí)，我們往往會(huì)采用分級(jí)開放功能的方式，來避免用戶一次承受過大的學(xué)習(xí)量。按照功能的重要與核心程度，分前中后期分級(jí)開放功能，減少單次學(xué)習(xí)量，給用戶較長(zhǎng)的過渡期。同時(shí)還能避免用戶在前期不了解產(chǎn)品的情況下，會(huì)出現(xiàn)的誤操作，減少功能無法使用的束縛感。

6. 避免樣式單一

當(dāng)我們采用統(tǒng)一的引導(dǎo)樣式時(shí)，用戶很容易發(fā)現(xiàn)提示的位置，并歸納為重復(fù)點(diǎn)擊，從而形成“慣性思維”。而我們要做的，就是根據(jù)具體功能的不同來變換引導(dǎo)的樣式。打斷玩家的“慣性思維”，讓玩家多動(dòng)腦子想一想，真正的理解引導(dǎo)的內(nèi)容，而不是一直處于放空狀態(tài)的無意識(shí)的點(diǎn)點(diǎn)點(diǎn)。

7.精簡(jiǎn)文字表達(dá)

盡可能通過視覺化形式展示信息，若必須使用文字，則盡可能精簡(jiǎn)，通過分段、標(biāo)紅等幫助用戶查看到關(guān)鍵信息。

三、設(shè)計(jì)模式

設(shè)計(jì)模式一詞來源于《設(shè)計(jì)系統(tǒng)》這本書，用于指代任何可復(fù)用的界面組成要素，包括按鈕、文本框、圖標(biāo)、配色、字體，以及可復(fù)用的交互行為與功能流程等等。這些要素用于解決特定的設(shè)計(jì)問題，滿足特定的產(chǎn)品需求。

設(shè)計(jì)師可根據(jù)場(chǎng)景直接使用設(shè)計(jì)模式完成新手引導(dǎo)的界面設(shè)計(jì)，也可以設(shè)計(jì)模式為起點(diǎn)，衍生出更具業(yè)務(wù)場(chǎng)景的解決方案滿足個(gè)性化設(shè)計(jì)需求。

下文將以定義、組成元素、使用場(chǎng)景、使用規(guī)則以及示例，來介紹常用的6種新手引導(dǎo)的設(shè)計(jì)模式：

1. 引導(dǎo)頁(yè)

定義：

引導(dǎo)頁(yè)出現(xiàn)在用戶首次打開APP的時(shí)候，基本上由3-5個(gè)頁(yè)面組成。在用戶使用產(chǎn)品前先給用戶營(yíng)造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶最核心的操作方式。引導(dǎo)頁(yè)的內(nèi)容一定要仔細(xì)挑選，保證能帶給用戶新鮮感和吸引他們的注意力，否則對(duì)用戶來說反而是種干擾，只會(huì)直接選擇快速劃過。

組成元素：文字介紹+圖片介紹+操作引導(dǎo)。

使用場(chǎng)景：用戶首次APP，全面展示APP的功能。

使用規(guī)則：

1. 引導(dǎo)頁(yè)最多不超過5頁(yè)；
2. 圖片介紹盡可能符合真實(shí)的使用場(chǎng)景，并且有趣；
3. 有明確的操作引導(dǎo)用戶進(jìn)行下一步操作，例：翻頁(yè)指示、下一步按鈕。

2. 蒙層引導(dǎo)

定義：

蒙層引導(dǎo)，顧名思義，就是在產(chǎn)品的整個(gè)界面上方用一個(gè)黑色半透明蒙層進(jìn)行遮罩，蒙層上方對(duì)界面進(jìn)行圈注，旁邊配以手勢(shì)、文字、符號(hào)、插畫等。這種引導(dǎo)方式可以讓用戶聚焦了解被圈注的功能點(diǎn)或手勢(shì)說明，不被頁(yè)面中其他的元素所干擾。

組成元素：黑色蒙層+高亮內(nèi)容+內(nèi)容介紹+操作引導(dǎo)。

使用場(chǎng)景：展示新功能、說明界面中功能位置的改動(dòng)、講解操作方式、體現(xiàn)特定的手勢(shì)交互劃分說明界面的整體結(jié)構(gòu)。

使用規(guī)則：

1. 內(nèi)容聚焦：讓用戶一眼就能看到高亮內(nèi)容，切勿被其他元素干擾；
2. 內(nèi)容介紹必須保持與高亮內(nèi)容的親密性；
3. 操作按鈕顯而易見，可能的話將整個(gè)頁(yè)面都設(shè)置為點(diǎn)擊熱區(qū)。

3. 氣泡/彈窗提示

定義：一般會(huì)出現(xiàn)在用戶初次進(jìn)入頁(yè)面時(shí)，它的表現(xiàn)形式是在操作按鈕旁邊彈出一個(gè)氣泡提示框或者直接彈出彈窗。

組成元素：氣泡+文字；彈窗+圖文信息+按鈕。

使用場(chǎng)景：告知用戶有新功能上線、引導(dǎo)用戶使用核心功能、或告知用戶一些隱藏菜單的內(nèi)容，當(dāng)不想過多干擾用戶操作時(shí)使用氣泡，若當(dāng)前提示內(nèi)容較為重要，且內(nèi)容較多，建議使用彈窗。

使用規(guī)則：

1. 在用戶進(jìn)入相關(guān)場(chǎng)景后才出現(xiàn)；
2. 氣泡提示需采用較為突出的顏色吸引用戶，且用戶必須點(diǎn)擊指示內(nèi)容后才會(huì)消失，否則很容易被忽略；
3. 彈窗內(nèi)盡可能以圖文方式介紹。

4. 動(dòng)畫/視頻引導(dǎo)

定義：動(dòng)畫、視頻的共同優(yōu)點(diǎn)是非常直觀并且具有吸引力。用戶可以根據(jù)動(dòng)態(tài)演示，很快地理解整個(gè)產(chǎn)品。但這類引導(dǎo)方式內(nèi)容不宜過長(zhǎng)，不然傳遞的信息量太大會(huì)導(dǎo)致用戶失去耐心或干脆什么也沒記住。

組成元素：文字介紹+內(nèi)容+操作引導(dǎo)。

使用場(chǎng)景：適合操作比較復(fù)雜或動(dòng)態(tài)演示比較有直觀的產(chǎn)品。

使用規(guī)則：

1. 用戶無法自己控制演示進(jìn)度的展示方式，因此內(nèi)容演示最好控制在10秒以內(nèi)；
2. 只引導(dǎo)關(guān)鍵內(nèi)容，避免信息量過大；
3. 保證演示內(nèi)容的質(zhì)量，用戶可清晰觀察到演示內(nèi)容，否則建議圖文的形式。

5. 操作式引導(dǎo)

定義：

操作式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場(chǎng)景，一步一步地引導(dǎo)你進(jìn)行操作，鼓勵(lì)用戶參與其中，邊學(xué)邊用。這種方式很容易讓用戶沉浸其中、快速學(xué)習(xí)，并且因?yàn)橛屑皶r(shí)的操作反饋，所以用戶很容易獲得強(qiáng)烈的成就感。

組成元素：內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)。

使用場(chǎng)景：工具類產(chǎn)品和游戲。

使用規(guī)則：

1. 操作引導(dǎo)突出且明確指示出操作的方式，否則用戶很容易因?yàn)椴僮魇〉拇鞌「卸艞墸?/li>
2. 保持內(nèi)容與操作的親密性；
3. 操作成功后及時(shí)給予反饋。

6. 預(yù)設(shè)任務(wù)

定義：

預(yù)設(shè)任務(wù)是指在用戶進(jìn)入產(chǎn)品后，自動(dòng)為用戶創(chuàng)建了一些和產(chǎn)品形態(tài)相關(guān)的示例，而不是留給用戶一個(gè)空頁(yè)面。在引導(dǎo)的同時(shí)突出了產(chǎn)品的特色，借用本身的形態(tài)讓用戶沉浸在產(chǎn)品的真實(shí)場(chǎng)景中去學(xué)習(xí)，在后續(xù)產(chǎn)品的使用中上手速度更快。

組成元素：引導(dǎo)內(nèi)容+操作引導(dǎo)。

使用場(chǎng)景：此類引導(dǎo)最常用于工具類產(chǎn)品，比如原型工具、設(shè)計(jì)軟件、文檔、任務(wù)清單等產(chǎn)品。

使用規(guī)則：

1. 不要限制用戶的操作，應(yīng)用此類引導(dǎo)需要讓用戶自由探索；
2. 需要提前設(shè)計(jì)好用戶操作路徑；
3. 引導(dǎo)內(nèi)容要符合該產(chǎn)品實(shí)際核心使用場(chǎng)景。

四、進(jìn)階應(yīng)用

在平常設(shè)計(jì)時(shí)應(yīng)用以上的7個(gè)設(shè)計(jì)原則和6個(gè)設(shè)計(jì)模式，基本上就算掌握了新手引導(dǎo)的初階設(shè)計(jì)，那進(jìn)階應(yīng)用是啥呢？

就拿淘金幣最近的一次改版來說，最新版本的淘金幣頻道新人場(chǎng)景下取消了傳統(tǒng)的新手引導(dǎo)（什么？沒有新手引導(dǎo)算是進(jìn)階？？），取而代之的是鎖定的莊園、新人特有的兌換樓層和任務(wù)。淘寶為什么這么做，難道是數(shù)據(jù)指出新手引導(dǎo)沒有用？其實(shí)不然，仔細(xì)分析淘寶呈現(xiàn)給新人的內(nèi)容其實(shí)是對(duì)上文設(shè)計(jì)原則和模式的靈活運(yùn)用。

對(duì)于淘金幣新人來說，首先要學(xué)習(xí)金幣是什么，然后還要學(xué)習(xí)金幣莊園游戲的規(guī)則，學(xué)習(xí)量其實(shí)很大，因此相對(duì)于原來的操作式引導(dǎo)，淘金幣運(yùn)用了分級(jí)開放原則，先讓用戶學(xué)習(xí)什么是金幣，當(dāng)經(jīng)歷7天后，再去解鎖莊園然后再去學(xué)習(xí)什么是莊園的游戲玩法，在此之前一直用獎(jiǎng)勵(lì)金這個(gè)突出利益點(diǎn)吸引用戶每天來。

此外，這里還運(yùn)用到預(yù)設(shè)任務(wù)的引導(dǎo)模式，嚴(yán)格來說是預(yù)設(shè)任務(wù)的一種變體，這里其實(shí)預(yù)設(shè)了3種任務(wù)：1.簽到；2.金幣兌換；3.金幣任務(wù)。

一方面是培養(yǎng)用戶簽到習(xí)慣，另一方面通過兌換和任務(wù)的樓層讓用戶自己去試一試，直接體驗(yàn)金幣是什么，通過金幣任務(wù)去獲得金幣，獲得后兌換優(yōu)惠券，以此來理解金幣是什么。用戶就這樣在無意識(shí)地引導(dǎo)中學(xué)習(xí)逐漸學(xué)會(huì)淘金幣和莊園游戲。

寫在最后

新手引導(dǎo)的設(shè)計(jì)規(guī)范像是一本武功秘籍，跟著秘籍上的招式練習(xí)武功必將突飛猛進(jìn)，然而真正的高手練習(xí)到最后都是把所有招式融會(huì)貫通，做到無招勝有招。

希望大家能借此設(shè)計(jì)規(guī)范多加實(shí)踐，歡迎一起交流。

參考文獻(xiàn)：

《增長(zhǎng)黑客》——范冰

《Design System》——Alla Kholmatova

作者：章遷，蘇寧全產(chǎn)業(yè)會(huì)員研發(fā)中心，交互設(shè)計(jì)師

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

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