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

一、新手引導是什么

《增長黑客》中提到：

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

新手引導的存在就是為了消除“新用戶體驗”中的摩擦點。

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

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

總的來說，新手引導有2個目的：

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

二、設(shè)計原則

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

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

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

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

2. 建立用戶目標

提示用戶利益點和里程碑進程，例如淘金幣的簽到，展示7天打卡進程以及每天的獎勵，從而吸引用戶每天都來簽到，為用戶建立每天簽到的目標。

3. 及時反饋，強化利益點

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

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

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

5. 分級開放功能

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

6. 避免樣式單一

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

7.精簡文字表達

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

三、設(shè)計模式

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

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

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

1. 引導頁

定義：

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

組成元素：文字介紹+圖片介紹+操作引導。

使用場景：用戶首次APP，全面展示APP的功能。

使用規(guī)則：

1. 引導頁最多不超過5頁；
2. 圖片介紹盡可能符合真實的使用場景，并且有趣；
3. 有明確的操作引導用戶進行下一步操作，例：翻頁指示、下一步按鈕。

2. 蒙層引導

定義：

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

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

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

使用規(guī)則：

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

3. 氣泡/彈窗提示

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

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

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

使用規(guī)則：

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

4. 動畫/視頻引導

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

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

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

使用規(guī)則：

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

5. 操作式引導

定義：

操作式引導會結(jié)合產(chǎn)品實際使用場景，一步一步地引導你進行操作，鼓勵用戶參與其中，邊學邊用。這種方式很容易讓用戶沉浸其中、快速學習，并且因為有及時的操作反饋，所以用戶很容易獲得強烈的成就感。

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

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

使用規(guī)則：

1. 操作引導突出且明確指示出操作的方式，否則用戶很容易因為操作失敗的挫敗感而放棄；
2. 保持內(nèi)容與操作的親密性；
3. 操作成功后及時給予反饋。

6. 預設(shè)任務

定義：

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

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

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

使用規(guī)則：

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

四、進階應用

在平常設(shè)計時應用以上的7個設(shè)計原則和6個設(shè)計模式，基本上就算掌握了新手引導的初階設(shè)計，那進階應用是啥呢？

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

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

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

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

寫在最后

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

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

參考文獻：

《增長黑客》——范冰

《Design System》——Alla Kholmatova

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

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

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