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

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

一、What | 新手引導是什么？

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

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

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

二、When | 什么時候需要新手引導？

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

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

三、Why | 新手引導的意義

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

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

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

四、How | 新手引導的設計模式

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

1. 引導頁

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

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

引導位置：啟動單頁

組成元素：大標題+副標題+場景化插圖+輪播點+跳過按鈕

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

優(yōu)點：在表達產(chǎn)品價值和差異化競爭點上有很大的優(yōu)勢，并且這種引導方式在用戶側的感知非常強，可以在用戶剛接觸產(chǎn)品時就進行用戶動機的培養(yǎng)，強化產(chǎn)品價值認知

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

設計要點：

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

2. 動畫引導

當遇到的產(chǎn)品有非常復雜的操作時，有些產(chǎn)品會選擇通過一段動畫來進行教學。

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

引導位置：產(chǎn)品啟動單頁/ 相關頁面

組成元素：動畫視頻+跳過/ 關閉

?動畫教學引導

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

優(yōu)點：動畫吸引力很強，也非常直觀

缺點：阻斷行為，教學不是即時的

設計要點：必須控制動畫的內(nèi)容和時長，盡量控制在10s以內(nèi)，避免信息過多造成學習負擔

3. 單頁蒙層

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

?單頁蒙層示意

出現(xiàn)時間：首次進入相關頁面，且無操作時

引導位置：單頁全局/操作按鈕或模塊旁邊/全局多個位置

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

適用場景：功能上新或改動 / 頁面結構更新 / 交互操作引導

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

缺點：阻斷行為，對用戶行為干擾較強

設計要點：

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

4. 分步引導

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

蘇寧益起走活動引導

出現(xiàn)時間：首次進入相關頁面，且無操作時

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

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

適用場景：頁面結構改動較多 / 流程較長的交互 / 復雜功能

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

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

設計要點：

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

5. 教學式引導

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

引導位置：預判操作，在觸點的旁邊展示

組成元素：蒙層 / 氣泡 / 動效等

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

游戲中的教學式引導

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

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

設計要點：

• 反饋要明顯且及時，突出引導教學的成果
• 教學步驟盡量控制在3步左右

6. 彈窗引導

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

拼多多中的彈窗引導

出現(xiàn)時間：首次進入產(chǎn)品或相關模塊

引導位置：單頁全局

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

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

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

缺點：強制阻斷了用戶的正常操作，容易對用戶造成打擾

設計要點：

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

7. 氣泡/toast

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

氣泡引導

出現(xiàn)時間：首次進入相關頁面，無操作時

引導位置：按鈕/ 入口旁邊

組成元素：氣泡+文字

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

優(yōu)點：很輕量，但目標指向性極強，對用戶的干擾較小

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

8. 召喚式引導

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

召喚式引導

優(yōu)點：以動態(tài)效果為主，有較強的視覺效果，容易形成視焦點

缺點：無法對功能或內(nèi)容進行適當?shù)慕忉屨f明，需要動效本身有比較明確的教學效果

9. 預設任務引導

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

預設任務引導

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

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

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

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

五、How to Choose | 如何選擇合適的設計模式

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

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

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

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

開始使用新功能場景

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

開始使用之后場景

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

使用場景速查表

寫在最后

新手引導在設計的過程中我們要時刻記住以下兩點：

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