哈嘍，這里是設(shè)計(jì)夾，今天分享的是「新手引導(dǎo)設(shè)計(jì)」。

不知道大家是否有過相親經(jīng)歷？相親通常需要多見幾次面才能確定彼此是否合適，但初步印象基本上初見面就有了。第一印象好，才會(huì)想再見第二次。

產(chǎn)品和服務(wù)也是一個(gè)道理——用戶剛接觸新產(chǎn)品時(shí)，最初幾分鐘的感受特別關(guān)鍵，直接決定了他們是繼續(xù)使用還是離開。

所以，新手引導(dǎo)不能只停留在“教操作”的層面，更得想辦法留住用戶，讓他們?cè)敢庖恢庇孟氯?。今天就來聊聊，如何設(shè)計(jì)新手引導(dǎo)體驗(yàn)，確保產(chǎn)品能獲得用戶的認(rèn)可～

一、5 種新手引導(dǎo)界面模式

新手引導(dǎo)的關(guān)鍵，是讓剛接觸產(chǎn)品的用戶明白核心功能、用法，以及這個(gè)產(chǎn)品到底能帶來什么價(jià)值。新手引導(dǎo)不只是安裝 APP 時(shí)跳出的第一個(gè)頁面，也會(huì)在使用產(chǎn)品的過程中以各種形式出現(xiàn)。

①歡迎提示

用戶第一次進(jìn)入產(chǎn)品時(shí)看到的問候語，比如“你好”“歡迎使用”等。它能幫用戶快速適應(yīng)產(chǎn)品，心里有個(gè)預(yù)期，也能定下產(chǎn)品的整體風(fēng)格和氛圍。

②分步提示

一步一步介紹 APP 或服務(wù)的核心功能。通常一個(gè)屏幕講一個(gè)關(guān)鍵功能，用戶可以左右滑動(dòng)或者點(diǎn)“下一步”來看下一頁的內(nèi)容。

比如剛裝完 APP 時(shí)的入門教程、設(shè)置偏好的頁面，都屬于這種。

③氣泡提示

工具提示是以小氣泡形式出現(xiàn)在特定功能或按鈕的上方作為引導(dǎo)。主要作用是突出界面中的元素，在用戶操作的時(shí)候自然出現(xiàn)。

比如用戶第一次點(diǎn)某個(gè)區(qū)域或者剛進(jìn)入這個(gè)頁面時(shí)，彈出簡(jiǎn)短的說明，幫助用戶快速搞懂這個(gè)功能怎么用。

④彈窗提示

顯示在屏幕中間或底部的引導(dǎo)信息，主要是用于強(qiáng)提示用戶做某個(gè)操作或者傳達(dá)重要內(nèi)容。不過彈窗用多了會(huì)影響體驗(yàn)，需要謹(jǐn)慎使用。

⑤漫游式引導(dǎo)

在功能上方用氣泡進(jìn)行分步引導(dǎo)，專門在用戶第一次接觸這個(gè)功能時(shí)，結(jié)合場(chǎng)景進(jìn)行說明。

在產(chǎn)品推出新功能需要引導(dǎo)提示時(shí)常用到這種類型，引導(dǎo)的關(guān)鍵是要方便用戶容易理解，提示內(nèi)容又別太突兀。

二、4 種新手引導(dǎo)類型

根據(jù)產(chǎn)品的特點(diǎn)，新手引導(dǎo)的設(shè)計(jì)方式也不一樣。我們可以按“用戶參與度”和“場(chǎng)景貼合度”，分成四種引導(dǎo)類型：強(qiáng)制式引導(dǎo)、可選式引導(dǎo)、漸進(jìn)式引導(dǎo)、沉浸式引導(dǎo)。

上面介紹的界面模式，會(huì)根據(jù)不同的類型來搭配使用。

用戶參與度：用戶可以跳過入門引導(dǎo)或者自行探索；

場(chǎng)景貼合度：指在什么時(shí)候或者在什么情況下提供引導(dǎo)，能不能做到個(gè)性化。

①強(qiáng)制式引導(dǎo)

這種方法要求用戶先完成前置的步驟，才能進(jìn)入到產(chǎn)品中進(jìn)行使用。這種方式常用來強(qiáng)制用戶輸入必要的信息，以提高推薦的準(zhǔn)確性，例如靠偏好推薦內(nèi)容。

舉個(gè)例子

首次啟動(dòng) APP 時(shí)，必須看完引導(dǎo)教程或者提交內(nèi)容后才能進(jìn)入到 APP 內(nèi)部。

例如新用戶打開多鄰國，需要先注冊(cè)賬號(hào)、設(shè)定學(xué)習(xí)目標(biāo)，甚至完成第一個(gè)小課程，才算走完新手流程；第一次打開 Pinterest 時(shí)，必須選自己感興趣的內(nèi)容，這樣推薦算法才能啟動(dòng)。

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

雖然強(qiáng)制式引導(dǎo)對(duì)掌握基本信息有幫助，但要注意別讓用戶覺得累。如果引導(dǎo)步驟多，最好用可視化的方法讓用戶看到進(jìn)度(參考多鄰國/Pinterest 頁面頂部的進(jìn)度條)，清楚自己做到哪了。

②可選式引導(dǎo)

用戶可以自主選擇是否跳過引導(dǎo)，或者只在需要的時(shí)候查看引導(dǎo)。

舉個(gè)例子

例如首次進(jìn)入千牛后臺(tái)，會(huì)出現(xiàn)功能引導(dǎo)提示，這里的提示可以自主選擇“下一步”或者“跳過”。如果選擇跳過，后面還能從“幫助中心”找到詳細(xì)的功能說明。筆記軟件 Notion 也沒有提供一步步的引導(dǎo)，而是單獨(dú)提供一個(gè)包含詳細(xì)說明的聚合頁面。

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

對(duì)于經(jīng)驗(yàn)豐富的用戶來說，這可能是一個(gè)不必要的步驟，所以可以選擇省略。把幫助信息放在界面中合適的地方，方便用戶需要時(shí)能輕松找到。

③漸進(jìn)式引導(dǎo)

漸進(jìn)式引導(dǎo)是指只在用戶實(shí)際使用某個(gè)功能時(shí)，才提供需要的信息，并逐步引導(dǎo)用戶。這種由使用場(chǎng)景驅(qū)動(dòng)的引導(dǎo)，學(xué)起來更自然，特別適合功能復(fù)雜的產(chǎn)品中。

舉個(gè)例子

當(dāng)把鼠標(biāo)放到 PS 的功能圖標(biāo)上時(shí)，會(huì)彈出提示或彈窗來解釋功能。在 PS 新建的空白畫布中，當(dāng)用戶進(jìn)行某些操作 (比如添加新圖形) 時(shí)，會(huì)自然彈出幫助提示。

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

這種方式能讓用戶在實(shí)際操作中進(jìn)行學(xué)習(xí)，幫助用戶真正學(xué)會(huì)某個(gè)功能。

④沉浸式引導(dǎo)

提供一個(gè)接近真實(shí)的環(huán)境，讓用戶自由地嘗試和探索產(chǎn)品功能，在操作中學(xué)習(xí)。這種引導(dǎo)的自由度很高，能讓用戶在體驗(yàn)產(chǎn)品時(shí)無需擔(dān)心試錯(cuò)壓力，增強(qiáng)使用的沉浸感。

舉個(gè)例子

剛進(jìn)入到白板工具 Miro 中時(shí)，只顯示一張空白的頁面沒有任何的的引導(dǎo)提示，讓用戶隨便體驗(yàn)各種功能，在體驗(yàn)功能的過程中實(shí)現(xiàn)引導(dǎo)。

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

需要?jiǎng)?chuàng)造一個(gè)用戶能自己動(dòng)手學(xué)的環(huán)境。產(chǎn)品設(shè)計(jì)上，哪怕用戶操作錯(cuò)了，也能輕松改回來，這一點(diǎn)特別重要。

好的新手引導(dǎo)，能讓用戶快速明白產(chǎn)品的價(jià)值，輕松掌握核心功能，讓用戶覺得“這正是我想要的”，又不會(huì)覺得復(fù)雜。那么，在這么多界面模式和類型里，設(shè)計(jì)新手引導(dǎo)應(yīng)該遵循哪些原則呢？

三、4 個(gè)新手引導(dǎo)設(shè)計(jì)原則

①盡快讓用戶get到核心功能點(diǎn)

由于用戶的探索時(shí)間有限，所以在引導(dǎo)流程 (或者說“介紹階段”) 里，需要讓他們直觀感受到產(chǎn)品的核心功能點(diǎn)。這是留下好的第一印象的關(guān)鍵，也是讓他們“馬上想用”的動(dòng)力。

如果這種體驗(yàn)不能立即開始，用戶的興趣就會(huì)下降，導(dǎo)致產(chǎn)品留不住用戶。

②盡量減少用戶負(fù)擔(dān)

初次使用一個(gè)產(chǎn)品，要了解的東西非常多。冗長(zhǎng)的教程和過多的信息會(huì)增加用戶的入門門檻。

只展示必要的信息，還可以用圖片或視頻來輔助表達(dá)信息，這種圖文搭配的方式更方便用戶理解產(chǎn)品功能。如果需要展示更多信息，可以放個(gè)“了解更多”或“幫助”按鈕，減輕用戶的負(fù)擔(dān)。

③鼓勵(lì)用戶在自己的節(jié)奏里熟悉產(chǎn)品

很少有人會(huì)在使用新產(chǎn)品時(shí)仔細(xì)查閱產(chǎn)品說明書，通常都是在遇到問題或者想嘗試新功能時(shí)才會(huì)想起來查閱說明書。

因此，更有效的引導(dǎo)方法是是從簡(jiǎn)單的說明開始，等“用戶自己覺得需要”時(shí)再提供給詳細(xì)的指導(dǎo)。

④分析使用路徑，找對(duì)引導(dǎo)時(shí)機(jī)

這是第三點(diǎn)的延伸。想讓新手用戶的體驗(yàn)更加流暢自然，需要先好好分析用戶是怎么用產(chǎn)品、用的過程是什么樣的。

可以畫一個(gè)用戶旅程圖，理清楚“什么時(shí)候需要什么信息”、“哪種引導(dǎo)方式最自然”，找到這些關(guān)鍵的節(jié)點(diǎn)。在分析使用路徑的過程中，還能發(fā)現(xiàn)用戶體驗(yàn)不好、容易卡殼的地方，這樣就能確定引導(dǎo)應(yīng)該在哪些地方介入。

最后

新手引導(dǎo)不僅僅是在介紹功能，更是幫助用戶“適應(yīng)”產(chǎn)品的過程。新手引導(dǎo)體驗(yàn)的核心目標(biāo)是讓用戶自然地學(xué)習(xí)，逐步了解核心功能，不會(huì)打斷他們的使用流程，更不會(huì)感到“學(xué)習(xí)過程”的負(fù)擔(dān)。

慢慢來比較快，如覺得有幫助，

請(qǐng)點(diǎn)個(gè)贊&推薦，分享給更多的朋友，謝謝！

作者：Clip設(shè)計(jì)夾