9種設(shè)計(jì)模式，幫你全面認(rèn)識(shí)新手引導(dǎo)

點(diǎn)擊 ▲ 三分設(shè) 關(guān)注，和 10 萬(wàn)設(shè)計(jì)師一起成長(zhǎng)

三分設(shè) x SUXA

正文共：4205 字 19 圖 預(yù)計(jì)閱讀時(shí)間：12 分鐘

中國(guó)每年有 50 萬(wàn)的設(shè)計(jì)畢業(yè)生，相比之下，能夠進(jìn)入大廠的寥若晨星。但所有投身于設(shè)計(jì)的設(shè)計(jì)師，都有一顆渴望成長(zhǎng)的心。

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

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

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

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

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

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

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

1、新產(chǎn)品剛上線(xiàn)或是上線(xiàn)觀察一段時(shí)間后，用戶(hù)的核心行為完成量未達(dá)到預(yù)期，這種情況下，新手引導(dǎo)一定是對(duì)核心功能的教育引導(dǎo)。

2、產(chǎn)品表現(xiàn)穩(wěn)定后，希望引導(dǎo)不同生命周期的用戶(hù)去完成差異化的行為。

3、產(chǎn)品不斷更新上線(xiàn)新功能，此時(shí)可能是對(duì)新的邊緣功能的引導(dǎo)。

 ▲圖1 · 新手引導(dǎo)場(chǎng)景

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

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

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

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

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

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

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

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

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

引導(dǎo)位置：?jiǎn)?dòng)單頁(yè)

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

 ▲圖2· 餓了么引導(dǎo)頁(yè)（圖片來(lái)源：https://www.vyouke.net/6797.html）

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

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

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

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

1、圖示為主，文字要簡(jiǎn)潔、易理解、強(qiáng)調(diào)核心價(jià)值

2、數(shù)量控制在 3 個(gè)左右，一個(gè)單頁(yè)只展示一個(gè)特性

3、必須有醒目的進(jìn)度和跳過(guò)操作

4、可以融入有沖擊力和吸引力的插畫(huà)或動(dòng)效

2、動(dòng)畫(huà)引導(dǎo)

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

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

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

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

▲圖3· 動(dòng)畫(huà)教學(xué)引導(dǎo)

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

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

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

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

3、單頁(yè)蒙層

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

 ▲圖4· 單頁(yè)蒙層示意

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

引導(dǎo)位置：?jiǎn)雾?yè)全局 / 操作按鈕或模塊旁邊 / 全局多個(gè)位置

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

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

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

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

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

1、以圖示為主，文字簡(jiǎn)潔易理解，確保在短短的幾秒內(nèi)用戶(hù)能夠獲取有效信息

2、盡量設(shè)計(jì)醒目的關(guān)閉按鈕，同時(shí)蒙層區(qū)域需要支持點(diǎn)擊跳出

4、分步引導(dǎo)

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

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

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

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

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

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

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

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

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

1、需以圖示為主，文字簡(jiǎn)潔易理解，確保用戶(hù)在幾秒內(nèi)能夠獲取有效信息

2、盡量控制分步的數(shù)量在 3 步左右

3、盡量設(shè)計(jì)醒目的關(guān)閉按鈕和引導(dǎo)進(jìn)度，點(diǎn)擊蒙層蒙層區(qū)域會(huì)進(jìn)入下一步或消除蒙層

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

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

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

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

適用場(chǎng)景：游戲、工具類(lèi)產(chǎn)品、營(yíng)銷(xiāo)活動(dòng)

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

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

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

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

1、反饋要明顯且及時(shí)，突出引導(dǎo)教學(xué)的成果

2、教學(xué)步驟盡量控制在 3 步左右

6、彈窗引導(dǎo)

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

 ▲圖7·拼多多中的彈窗引導(dǎo)

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

引導(dǎo)位置：?jiǎn)雾?yè)全局

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

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

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

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

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

1、要提供明顯的關(guān)閉或跳過(guò)功能，同時(shí)蒙層區(qū)域需要支持點(diǎn)擊跳出

2、特別要注意避免多層彈窗嵌套的情況

7、氣泡/ toast

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

 ▲圖8·氣泡引導(dǎo)

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

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

組成元素：氣泡+文字

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

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

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

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

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

 ▲圖9·召喚式引導(dǎo)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▲圖12·開(kāi)始使用新功能場(chǎng)景

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

▲圖13·開(kāi)始使用之后場(chǎng)景

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

▲圖14·使用場(chǎng)景速查表

六、寫(xiě)在最后

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

1、“非必要不引導(dǎo)”。不要陳述顯而易見(jiàn)的事情，要選擇合適的引導(dǎo)，確保引導(dǎo)對(duì)用戶(hù)的價(jià)值大于對(duì)用戶(hù)的干擾。

2、 “一目了然”。讓用戶(hù)在第一時(shí)間能夠理解引導(dǎo)內(nèi)容，降低認(rèn)知成本和操作成本。

附錄：系列課程主題

—— END ——

我們相信設(shè)計(jì)師和創(chuàng)造者一樣是思想家

三分設(shè)

一個(gè)開(kāi)放的設(shè)計(jì)師共創(chuàng)學(xué)習(xí)型社區(qū)

助力全球 1 億設(shè)計(jì)師成長(zhǎng)

好書(shū)推薦

深度鏈接

歡迎添加 ??  星標(biāo) · 獲取每天推薦知識(shí)分享

每天閱讀充電 · 養(yǎng)成終身學(xué)習(xí)

「資訊」「文章」「活動(dòng)」「招聘」「課程」

共創(chuàng)計(jì)劃·成員招募

「合伙人計(jì)劃」

「翻閱計(jì)劃」

「分享行動(dòng)」

「項(xiàng)目共創(chuàng)」

「新媒體聯(lián)盟」

??????

期待與更多優(yōu)秀產(chǎn)品設(shè)計(jì)師一起成長(zhǎng)

掃碼進(jìn)群

星球共創(chuàng)資料庫(kù)

全年住主力設(shè)友建立設(shè)計(jì)知識(shí)體系

「體系化知識(shí)研討」

「設(shè)計(jì)·管理書(shū)籍共讀」「線(xiàn)上職場(chǎng)討論」

「實(shí)戰(zhàn)項(xiàng)目共創(chuàng)」「大會(huì)活動(dòng)交流」

分享設(shè)計(jì)/管理/職場(chǎng)/心得，定期直播，答疑解惑

↓↓↓點(diǎn)開(kāi)『閱讀原文』，關(guān)注星球資料庫(kù)