每年都有許多的設(shè)計(jì)畢業(yè)生進(jìn)入設(shè)計(jì)行業(yè)，能夠進(jìn)入大廠的人都是有限的。作者在本文中對新手引導(dǎo)的設(shè)計(jì)進(jìn)行介紹，將9種設(shè)計(jì)模式都講解了一遍，如果對設(shè)計(jì)感興趣的話一起繼續(xù)看下去吧~

首先在開始前，我們要明確一個(gè)原則：新手引導(dǎo)設(shè)計(jì)雖然對于幫助新用戶熟悉產(chǎn)品和操作十分重要，但并不是所有的場景和功能都需要新手引導(dǎo)，需謹(jǐn)記非必要不引導(dǎo)。接下來我們進(jìn)入主題，本文將從新手引導(dǎo)的定義、價(jià)值、設(shè)計(jì)模式以及適用場景，來和大家探討如何設(shè)計(jì)新手引導(dǎo)。

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

因?yàn)榛ヂ?lián)網(wǎng)產(chǎn)品在上線后會(huì)不斷更新迭代，所以對互聯(lián)網(wǎng)產(chǎn)品來說，“新手”泛指的是對系統(tǒng)或者系統(tǒng)內(nèi)某一具體功能不熟悉的用戶，而非剛下載注冊的用戶。

“引導(dǎo)”是指通過某種手段或方法，干預(yù)用戶的決策和操作，促使其嘗試并完成某任務(wù)。

新手引導(dǎo)設(shè)計(jì)的好，可以有效幫助用戶更快地熟悉產(chǎn)品操作，傳遞產(chǎn)品的實(shí)際價(jià)值，從而提升用戶活躍度、留存率與付費(fèi)率。

二、When | 什么時(shí)候需要新手引導(dǎo)？

新手引導(dǎo)可以涵蓋用戶心智模型中接觸、了解、使用這三個(gè)環(huán)節(jié)。通常新手引導(dǎo)的場景可以劃分為以下三種：

1. 新產(chǎn)品剛上線或是上線觀察一段時(shí)間后，用戶的核心行為完成量未達(dá)到預(yù)期，這種情況下，新手引導(dǎo)一定是對核心功能的教育引導(dǎo)。
2. 產(chǎn)品表現(xiàn)穩(wěn)定后，希望引導(dǎo)不同生命周期的用戶去完成差異化的行為。
3. 產(chǎn)品不斷更新上線新功能，此時(shí)可能是對新的邊緣功能的引導(dǎo)。

三、Why | 新手引導(dǎo)的意義

新手引導(dǎo)不是必需品，只有能夠同時(shí)為用戶和產(chǎn)品帶來價(jià)值的引導(dǎo)，才是有意義的。簡單來說，新手引導(dǎo)有以下意義：

對用戶來說：新手引導(dǎo)可以讓用戶聚焦并理解產(chǎn)品/功能，或者幫助用戶更快捷地達(dá)成目標(biāo)。

對業(yè)務(wù)來說：可以向用戶傳遞產(chǎn)品的價(jià)值和差異競爭點(diǎn)，刺激用戶投入更多的情感和精力。

四、How | 新手引導(dǎo)的設(shè)計(jì)模式

接下來我們來介紹9種常見的設(shè)計(jì)模式，我們會(huì)從組成元素、出現(xiàn)時(shí)間、位置、場景以及優(yōu)缺點(diǎn)等方面來描述這些設(shè)計(jì)模式。

1. 引導(dǎo)頁

引導(dǎo)頁出現(xiàn)在用戶首次進(jìn)入產(chǎn)品時(shí)，在用戶使用前將產(chǎn)品的功能亮點(diǎn)或最核心的操作方式告知用戶，并在用戶心中塑造產(chǎn)品品牌的基調(diào)。引導(dǎo)頁的內(nèi)容一定要仔細(xì)挑選，保證能帶給用戶新鮮感，否則容易對用戶造成干擾。

出現(xiàn)時(shí)間：進(jìn)入產(chǎn)品系統(tǒng)時(shí)

引導(dǎo)位置：啟動(dòng)單頁

組成元素：大標(biāo)題+副標(biāo)題+場景化插圖+輪播點(diǎn)+跳過按鈕

適用場景：新產(chǎn)品冷啟動(dòng)或重大改版升級(jí)

優(yōu)點(diǎn)：在表達(dá)產(chǎn)品價(jià)值和差異化競爭點(diǎn)上有很大的優(yōu)勢，并且這種引導(dǎo)方式在用戶側(cè)的感知非常強(qiáng)，可以在用戶剛接觸產(chǎn)品時(shí)就進(jìn)行用戶動(dòng)機(jī)的培養(yǎng)，強(qiáng)化產(chǎn)品價(jià)值認(rèn)知

缺點(diǎn)：場景聯(lián)系性弱，不能準(zhǔn)確對具體的功能模塊做出解釋和教育

設(shè)計(jì)要點(diǎn)：

• 圖示為主，文字要簡潔、易理解、強(qiáng)調(diào)核心價(jià)值
• 數(shù)量控制在3個(gè)左右，一個(gè)單頁只展示一個(gè)特性
• 必須有醒目的進(jìn)度和跳過操作
• 可以融入有沖擊力和吸引力的插畫或動(dòng)效

2. 動(dòng)畫引導(dǎo)

當(dāng)遇到的產(chǎn)品有非常復(fù)雜的操作時(shí)，有些產(chǎn)品會(huì)選擇通過一段動(dòng)畫來進(jìn)行教學(xué)。

出現(xiàn)時(shí)間：進(jìn)入產(chǎn)品系統(tǒng)或者觸發(fā)相關(guān)功能

引導(dǎo)位置：產(chǎn)品啟動(dòng)單頁/ 相關(guān)頁面

組成元素：動(dòng)畫視頻+跳過/ 關(guān)閉

?動(dòng)畫教學(xué)引導(dǎo)

適用場景：工具類產(chǎn)品、復(fù)雜的操作

優(yōu)點(diǎn)：動(dòng)畫吸引力很強(qiáng)，也非常直觀

缺點(diǎn)：阻斷行為，教學(xué)不是即時(shí)的

設(shè)計(jì)要點(diǎn)：必須控制動(dòng)畫的內(nèi)容和時(shí)長，盡量控制在10s以內(nèi)，避免信息過多造成學(xué)習(xí)負(fù)擔(dān)

3. 單頁蒙層

蒙層就是在產(chǎn)品的整個(gè)界面上方用一個(gè)半透明蒙層進(jìn)行遮罩，上方對界面進(jìn)行圈注，旁邊配以手勢、文字、符號(hào)、插畫等，如下圖所示的應(yīng)用中就運(yùn)用了單頁蒙層的引導(dǎo)，幫助用戶了解新功能該如何使用。

?單頁蒙層示意

出現(xiàn)時(shí)間：首次進(jìn)入相關(guān)頁面，且無操作時(shí)

引導(dǎo)位置：單頁全局/操作按鈕或模塊旁邊/全局多個(gè)位置

組成元素：蒙層+文字+插圖/ GIF

適用場景：功能上新或改動(dòng) / 頁面結(jié)構(gòu)更新 / 交互操作引導(dǎo)

優(yōu)點(diǎn)：蒙層設(shè)計(jì)的內(nèi)容形式多樣，視覺焦點(diǎn)突出，并且場景聯(lián)系性很強(qiáng)

缺點(diǎn)：阻斷行為，對用戶行為干擾較強(qiáng)

設(shè)計(jì)要點(diǎn)：

• 以圖示為主，文字簡潔易理解，確保在短短的幾秒內(nèi)用戶能夠獲取有效信息
• 盡量設(shè)計(jì)醒目的關(guān)閉按鈕，同時(shí)蒙層區(qū)域需要支持點(diǎn)擊跳出

4. 分步引導(dǎo)

分步引導(dǎo)和單頁蒙層的相似之處在于都是蒙層+內(nèi)容的形式，但它會(huì)按照流程依次出現(xiàn)。例如下圖中蘇寧益起走的活動(dòng)中就運(yùn)用了分布引導(dǎo)，它和單頁蒙層最大的差別是分步引導(dǎo)會(huì)出現(xiàn)跳頁引導(dǎo)的情況。

蘇寧益起走活動(dòng)引導(dǎo)

出現(xiàn)時(shí)間：首次進(jìn)入相關(guān)頁面，且無操作時(shí)

引導(dǎo)位置：按流程/優(yōu)先級(jí)出現(xiàn)在頁面上方

組成元素：蒙層+內(nèi)容

適用場景：頁面結(jié)構(gòu)改動(dòng)較多 / 流程較長的交互 / 復(fù)雜功能

優(yōu)點(diǎn)：可以一步一步地教育用戶，控制單次傳遞的信息，讓用戶快速了解每個(gè)功能的收納位置，并以最短路徑體驗(yàn)流程

缺點(diǎn)：過程連續(xù)不可預(yù)期，會(huì)持續(xù)地干擾用戶，容易讓用戶產(chǎn)生厭煩心理

設(shè)計(jì)要點(diǎn)：

• 需以圖示為主，文字簡潔易理解，確保用戶在幾秒內(nèi)能夠獲取有效信息
• 盡量控制分步的數(shù)量在3步左右
• 盡量設(shè)計(jì)醒目的關(guān)閉按鈕和引導(dǎo)進(jìn)度，點(diǎn)擊蒙層區(qū)域會(huì)進(jìn)入下一步或消除蒙層

5. 教學(xué)式引導(dǎo)

出現(xiàn)時(shí)間：真實(shí)的使用過程中，邊用邊學(xué)

引導(dǎo)位置：預(yù)判操作，在觸點(diǎn)的旁邊展示

組成元素：蒙層 / 氣泡 / 動(dòng)效等

適用場景：游戲、工具類產(chǎn)品、營銷活動(dòng)

游戲中的教學(xué)式引導(dǎo)

優(yōu)點(diǎn)：可以結(jié)合實(shí)際使用場景，并且在完成引導(dǎo)后給予及時(shí)的實(shí)際反饋，例如游戲中常見的教學(xué)式引導(dǎo)就可以直觀的幫助用戶了解游戲玩法

缺點(diǎn)：用戶不可以跳過，必須完成引導(dǎo)的內(nèi)容

設(shè)計(jì)要點(diǎn)：

• 反饋要明顯且及時(shí)，突出引導(dǎo)教學(xué)的成果
• 教學(xué)步驟盡量控制在3步左右

6. 彈窗引導(dǎo)

彈窗引導(dǎo)一般在進(jìn)入相關(guān)模塊或觸發(fā)功能時(shí)出現(xiàn)在單頁全局去介紹對應(yīng)的操作與信息，例如拼多多中運(yùn)用的彈窗引導(dǎo)可以讓用戶快速聚焦當(dāng)前內(nèi)容，引導(dǎo)用戶達(dá)成設(shè)計(jì)目標(biāo)。

拼多多中的彈窗引導(dǎo)

出現(xiàn)時(shí)間：首次進(jìn)入產(chǎn)品或相關(guān)模塊

引導(dǎo)位置：單頁全局

組成元素：蒙層+對話框（標(biāo)題、說明文案、示意圖、按鈕）

適用場景：版本更新 / 新功能上線 / 后續(xù)操作引導(dǎo)等

優(yōu)點(diǎn)：彈窗在操作和視覺上都非常聚焦，是某個(gè)時(shí)間點(diǎn)上優(yōu)先級(jí)最高的事情

缺點(diǎn)：強(qiáng)制阻斷了用戶的正常操作，容易對用戶造成打擾

設(shè)計(jì)要點(diǎn)：

• 要提供明顯的關(guān)閉或跳過功能，同時(shí)蒙層區(qū)域需要支持點(diǎn)擊跳出
• 特別要注意避免多層彈窗嵌套的情況

7. 氣泡/toast

氣泡是一種非常輕量的引導(dǎo)，當(dāng)用戶首次進(jìn)入相關(guān)頁面時(shí)會(huì)出現(xiàn)在引導(dǎo)對象的旁邊，例如QQ音樂、支付寶等產(chǎn)品在頁面中運(yùn)用了氣泡引導(dǎo)，指示性比較強(qiáng)，并且對用戶的打擾比較弱。

氣泡引導(dǎo)

出現(xiàn)時(shí)間：首次進(jìn)入相關(guān)頁面，無操作時(shí)

引導(dǎo)位置：按鈕/ 入口旁邊

組成元素：氣泡+文字

適用場景：版本更新 / 新功能上線 / 功能引導(dǎo) / 隱藏內(nèi)容引導(dǎo)

優(yōu)點(diǎn)：很輕量，但目標(biāo)指向性極強(qiáng)，對用戶的干擾較小

缺點(diǎn)：容易被忽略，通常我們會(huì)在氣泡的出現(xiàn)邏輯或形式上進(jìn)行設(shè)計(jì)，以確保氣泡不是無效引導(dǎo)

8. 召喚式引導(dǎo)

召喚式引導(dǎo)主要指的是一些動(dòng)效，通常出現(xiàn)在一些從未操作過的或新上線的重要功能上，例如在游戲或活動(dòng)中的新手引導(dǎo)可以采用召喚式引導(dǎo)的方式，激發(fā)用戶的點(diǎn)擊欲望。

召喚式引導(dǎo)

優(yōu)點(diǎn)：以動(dòng)態(tài)效果為主，有較強(qiáng)的視覺效果，容易形成視焦點(diǎn)

缺點(diǎn)：無法對功能或內(nèi)容進(jìn)行適當(dāng)?shù)慕忉屨f明，需要?jiǎng)有П旧碛斜容^明確的教學(xué)效果

9. 預(yù)設(shè)任務(wù)引導(dǎo)

最后一種新手引導(dǎo)也比較輕量，就是預(yù)設(shè)任務(wù)引導(dǎo)，例如有道云筆記的產(chǎn)品中就通過設(shè)置新手任務(wù)達(dá)到教學(xué)的作用。

預(yù)設(shè)任務(wù)引導(dǎo)

出現(xiàn)時(shí)間：在相關(guān)板塊無操作歷史 / 空態(tài)

引導(dǎo)位置：空態(tài)頁面 / 空態(tài)模塊

適用場景：工具向產(chǎn)品或模塊 / 任務(wù)列表 / 文檔列表

優(yōu)點(diǎn)：借用本身的產(chǎn)品形態(tài)讓用戶沉浸在真實(shí)場景中去學(xué)習(xí)，在后續(xù)產(chǎn)品的使用中更容易上手，同時(shí)突出了產(chǎn)品的特色和核心價(jià)值。

五、How to Choose | 如何選擇合適的設(shè)計(jì)模式

介紹完這么多設(shè)計(jì)模式，那在具體的使用過程中該如何進(jìn)行選擇呢？我們可以根據(jù)用戶的不同使用場景選擇不同的設(shè)計(jì)模式，我們還是把用戶場景分為剛接觸系統(tǒng)，使用新功能和使用之后三個(gè)場景。

首先剛接觸產(chǎn)品系統(tǒng)時(shí)，用戶需要能快速理解產(chǎn)品可以干什么，為我解決什么問題，需要我付出什么。所以我們在這一階段設(shè)計(jì)新手引導(dǎo)時(shí)就需要強(qiáng)調(diào)出產(chǎn)品差異化的價(jià)值、競爭點(diǎn)與核心場景使用路徑，同時(shí)切忌在用戶剛接觸產(chǎn)品時(shí)就給出過多強(qiáng)硬的教育引導(dǎo)?；谶@樣的原則，我們可以選擇引導(dǎo)頁、動(dòng)畫引導(dǎo)、教學(xué)式引導(dǎo)、預(yù)設(shè)任務(wù)以及彈窗引導(dǎo)的模式。

剛接觸產(chǎn)品系統(tǒng)場景

當(dāng)用戶對產(chǎn)品整體有了一定認(rèn)知時(shí)，大概率還是會(huì)遇到很多沒有使用過的新功能。此時(shí)新功能能為用戶帶來什么價(jià)值、使用成本有多高對用戶來說是最關(guān)心的。這一場景下可以使用的設(shè)計(jì)模式有很多，在選擇時(shí)要依據(jù)引導(dǎo)內(nèi)容的重要性（比如用戶價(jià)值、業(yè)務(wù)價(jià)值以及引導(dǎo)內(nèi)容的學(xué)習(xí)難度）來決定使用模態(tài)引導(dǎo)還是非模態(tài)引導(dǎo)。

開始使用新功能場景

最后，用戶已經(jīng)使用過某一功能后不等于用戶不再是新用戶，如果前后流程或再次使用的路徑比較特殊，都應(yīng)該在用戶使用之后做出相應(yīng)的引導(dǎo)說明。比如微信語音輸入，在用戶點(diǎn)擊使用語音功能后，還會(huì)有松開取消和松開轉(zhuǎn)文字的新手引導(dǎo)，因?yàn)檫@兩步的操作在用戶點(diǎn)擊語音的預(yù)期之外，比較特殊。

開始使用之后場景

這里附上一個(gè)速查表，方便大家在設(shè)計(jì)時(shí)可以快速地根據(jù)用戶場景和業(yè)務(wù)場景選擇設(shè)計(jì)模式。

使用場景速查表

寫在最后

新手引導(dǎo)在設(shè)計(jì)的過程中我們要時(shí)刻記住以下兩點(diǎn)：

1. “非必要不引導(dǎo)”。不要陳述顯而易見的事情，要選擇合適的引導(dǎo)，確保引導(dǎo)對用戶的價(jià)值大于對用戶的干擾。
2. “一目了然”。讓用戶在第一時(shí)間能夠理解引導(dǎo)內(nèi)容，降低認(rèn)知成本和操作成本。