8種引導(dǎo)方式,7個設(shè)計要點,讓你全面了解新手引導(dǎo)!

16 評論 69561 瀏覽 302 收藏 17 分鐘

產(chǎn)品中的新手引導(dǎo),是可以讓用戶在短時間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式,輕松上手去體驗產(chǎn)品的功能,完成自己的目標(biāo)。所以,基本上每個產(chǎn)品都會有自己的新手引導(dǎo)。本文主要從8種引導(dǎo)方式,7個設(shè)計要點,讓你全面了解新手引導(dǎo)!

旅行時我們順利到達(dá)一個又一個的目的地;生病時我們快速地找到醫(yī)療科室;超市里我們在數(shù)以萬計的商品中找到心儀的商品。完成這些事情我們不經(jīng)意間借助了無數(shù)的引導(dǎo),可能是路邊的指示牌、手中的地圖、樓層號碼、指示箭頭等等,這些引導(dǎo)在無形中幫助我們高效正確地完成一件事情。

而產(chǎn)品中的新手引導(dǎo),是可以讓用戶在短時間內(nèi)快速了解產(chǎn)品的特色以及產(chǎn)品的使用方式,輕松上手去體驗產(chǎn)品的功能,完成自己的目標(biāo)。

哪些內(nèi)容需要引導(dǎo)?

(1)產(chǎn)品特色

展示產(chǎn)品的核心競爭力及最有特色的點,讓用戶清晰地了解該產(chǎn)品和同類產(chǎn)品相比最突出的優(yōu)勢,有一個良好的第一印象。

(2)產(chǎn)品操作

絕大部分產(chǎn)品做新手引導(dǎo)都是為了提示用戶如何進行操作,降低用戶的學(xué)習(xí)成本,幫助用戶快速上手。

但需要注意的是:并不是所有產(chǎn)品功能都需要新手引導(dǎo)。產(chǎn)品的頁面、功能和交互設(shè)計應(yīng)該首先盡量做到自解釋,讓用戶自行探索也可以快速上手用起來。只有部分復(fù)雜功能和特殊交互需要對用戶進行引導(dǎo)。

(3)產(chǎn)品新功能

產(chǎn)品上線新功能后,往往會給用戶一些提示,引導(dǎo)用戶去體驗新功能,不然在眾多功能中,用戶很難在短時間內(nèi)發(fā)現(xiàn)更新了哪些內(nèi)容。

可能在哪些時機出現(xiàn)?

(1)首次打開產(chǎn)品時

大部分的新手引導(dǎo)都會出現(xiàn)在用戶首次打開產(chǎn)品時,讓用戶對產(chǎn)品功能或操作有個初步了解。

(2)結(jié)合實際場景,在需要用到的時候出現(xiàn)

還有一些新手引導(dǎo)會在你需要的時候適時出現(xiàn),在不干擾到你正常操作的前提下,根據(jù)用戶行為預(yù)判你可能遇到的問題,及時給予提示。因為很多時候用戶在沒有感知到這個功能和自己當(dāng)前目標(biāo)有關(guān)聯(lián)之前是不會自己主動去看新手引導(dǎo)的,所以把握新手引導(dǎo)出現(xiàn)的時機非常關(guān)鍵。

(3)用戶主動點擊尋求幫助

還有很多產(chǎn)品為了用戶的使用體驗以及保留用戶自行探索的好奇心,并不會設(shè)置強制性的新手引導(dǎo)。但用戶在需要引導(dǎo)的時候可以主動點擊幫助按鈕,把選擇權(quán)交到用戶手中。

新手引導(dǎo)有哪些呈現(xiàn)方式?

1. 蒙層引導(dǎo)

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

而蒙層引導(dǎo)又可以細(xì)分為以下兩個小的分類:

(1)單頁蒙層引導(dǎo)

單頁蒙層引導(dǎo)的適用場景非常多,比如:在展示新功能、說明界面中功能位置的改動、講解操作方式、體現(xiàn)特定的手勢交互劃分說明界面的整體結(jié)構(gòu)等等。

(2)分步引導(dǎo)

分步引導(dǎo)就像上樓梯一樣,會一步一步由淺到深地引導(dǎo)用戶進行操作。這類引導(dǎo)方式常用于界面相對復(fù)雜或完整交互流程比較長的工具類產(chǎn)品,帶領(lǐng)用戶快速了解每個功能的收納位置,或讓用戶以最短路徑完整體驗一遍操作流程。

當(dāng)然它的缺點也比較明顯,因為引導(dǎo)過程是連續(xù)的,用戶不可以自己控制步驟,所以有時候會讓用戶產(chǎn)生厭煩情緒。

2. 氣泡提示引導(dǎo)

氣泡提示引導(dǎo)一般會出現(xiàn)在用戶初次進入頁面時,它的表現(xiàn)形式是在操作按鈕旁邊彈出一個氣泡提示框。

可不要小看它,它雖然很輕量但目的指向性卻極強,對用戶的干擾極小。常用于以下場景:告知用戶有新功能上線、引導(dǎo)用戶使用核心功能、或告知用戶一些隱藏菜單的內(nèi)容。

3. 動畫/視頻引導(dǎo)

動畫、視頻、GIF的共同優(yōu)點是非常直觀并且具有吸引力。用戶可以根據(jù)動態(tài)演示,很快地理解整個產(chǎn)品。但這類引導(dǎo)方式內(nèi)容不宜過長,尤其是動畫和GIF圖這類用戶,無法自己控制演示進度的展示方式,最好控制在10秒以內(nèi),不然傳遞的信息量太大會導(dǎo)致用戶失去耐心或干脆什么也沒記住。

這一種方式適合操作比較復(fù)雜或動態(tài)演示比較有沖擊力的產(chǎn)品。

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

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

這種引導(dǎo)方式常見于工具類產(chǎn)品和游戲。

5. 引導(dǎo)頁

引導(dǎo)頁出現(xiàn)在用戶首次打開APP的時候,基本上由3-5個頁面組成。在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍,宣傳產(chǎn)品功能和亮點或告知用戶最核心的操作方式。

引導(dǎo)頁的內(nèi)容一定要仔細(xì)挑選,保證能帶給用戶新鮮感和吸引他們的注意力,否則對用戶來說反而是種干擾,只會直接選擇快速劃過。

6. 預(yù)加載任務(wù)

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

此類引導(dǎo)最常用于工具類產(chǎn)品,比如:原型工具、設(shè)計軟件、文檔、任務(wù)清單等產(chǎn)品。

7. 空狀態(tài)引導(dǎo)

在新用戶初次進入產(chǎn)品后,會面臨很多頁面內(nèi)容都為空的情況,此時我們就可以利用這些頁面的空狀態(tài)去很好地引導(dǎo)用戶從無到有的去創(chuàng)建內(nèi)容。

如果空狀態(tài)頁面只是簡單告知用戶‘這里沒有內(nèi)容’,用戶往往會不知所措,不知道下一步該做什么?所以這是一個非常棒的時機去引導(dǎo)用戶去嘗試對應(yīng)的操作。

8. 互動式引導(dǎo)

這種引導(dǎo)方式非常隱蔽,通常出現(xiàn)在用戶在與產(chǎn)品的特定交互過程中。

比如:鼠標(biāo)光標(biāo)移動到相應(yīng)的組件上,懸停時會相關(guān)的解釋文字;輸入框內(nèi)容為空時會有文字提示;微信點擊錄入語音時會提示“手指上滑,取消發(fā)送”;sketch點擊C鍵時底部會出現(xiàn)相應(yīng)的操作提示等等。

新手引導(dǎo)還有哪些設(shè)計要點?

1. 文案精準(zhǔn),通俗易懂

好的文案和排版可以洞察用戶的心理,利用產(chǎn)品特性,以最能吸引用戶注意力的方式讓用戶迅速理解你所要表達(dá)的意思。

一個人的短時記憶一般只能記得5個字,最多記得9個,文案字?jǐn)?shù)過多用戶很容易遺忘和出現(xiàn)記憶的偏差。所以在新手引導(dǎo)中的文案要簡短、有效、突出重點!如果實在無法精簡的話可以考慮用文字分層。

2. 內(nèi)容不要過多,明確顯示進度

不要填鴨式地給用戶一次灌輸過多的信息,用戶初次接觸這款產(chǎn)品,無論你的新手引導(dǎo)設(shè)計的多么的精彩絕倫,也很少有用戶耐心地閱讀并且一次交代太多內(nèi)容,很容易讓用戶產(chǎn)生“這款產(chǎn)品很復(fù)雜”的印象。

所以我們在設(shè)計新手引導(dǎo)的過程中,確保只提供給用戶最適時和必要的幫助,保留用戶主動探索的權(quán)利和積極性。同時讓用戶實時知道自己的進度,否則很容易讓用戶失去控制感,產(chǎn)生焦躁情緒,從而直接選擇跳過。

3. 讓用戶有成就感

用戶完成引導(dǎo)中的任務(wù)或操作時,給予用戶及時的反饋,或者對用戶進行鼓勵,帶給他們成就感。比如:可以給出較為夸張的贊美式反饋,如果是有涉及消費的產(chǎn)品可以以代金券、優(yōu)惠券的形式給用戶獎勵。

在設(shè)計比較長的引導(dǎo)任務(wù)的時候記得要“用最短路徑讓用戶獲得最好的成果”,讓用戶產(chǎn)生“哇!我這么厲害!”的感覺。

比如:在游戲教學(xué)中常常會讓用戶迅速享受到滿血通關(guān)的快感。

4. 與品牌相近的風(fēng)格

新手引導(dǎo)的風(fēng)格基調(diào)最好和品牌風(fēng)格一致,例如:知乎的學(xué)術(shù)風(fēng)格、豆瓣的小清新風(fēng)格、簡書的簡潔風(fēng)格、bilibili的二次元風(fēng)格等等,這些產(chǎn)品都有自己的品牌基因。

產(chǎn)品的每個部分如果都能傳達(dá)給用戶同樣的品牌形象,就可以加強品牌在用戶心理的認(rèn)知。比如:如果你的產(chǎn)品是bilibili這種帶有二次元風(fēng)格的產(chǎn)品,那新手引導(dǎo)就不要選用金融產(chǎn)品的商務(wù)風(fēng)格。

5. 增加趣味性

嘗試讓自己的引導(dǎo)更有趣,讓用戶愿意看、喜歡看!

比如:使用卡通產(chǎn)品形象來和用戶進行對話,為形式和內(nèi)容都增加了更多的趣味性??蓯鄣膭赢嬓蜗?,擬人化、口語化的語言引導(dǎo)等等,這些方式都可以降低用戶對于被打擾這件事情的反感,在愉悅的心情下快速掌握引導(dǎo)內(nèi)容。

在這種引導(dǎo)風(fēng)格中做的比較優(yōu)秀的是bilibili、閑魚、自如、盒馬、這幾款A(yù)PP。

6. 在合適的時機出現(xiàn)

現(xiàn)在人們都講究界限感,新手引導(dǎo)是引導(dǎo)不是騷擾,所以并不需要一股腦兒地把所有東西都教給用戶。

我們需要確保引導(dǎo)不會打擾到用戶本身的操作,最好能仔細(xì)分析用戶行為預(yù)判他接下來可能需要的操作,在用戶恰好需要一些提示的時候適時出現(xiàn),無所適從的用戶會覺得這款產(chǎn)品很貼心,畢竟雪中送炭更好過錦上添花,讓用戶感覺“這幫助來的剛剛好!”

7. 可以跳過可以隨時忽略

并不是所有的用戶都是需要引導(dǎo)的,也并不是所有用戶都愿意被引導(dǎo),所以要給用戶選擇的余地,讓用戶根據(jù)自己的情況自行進行選擇。

寫在最后

本文從各個方面探討了新手引導(dǎo)方式,但并不是所有的產(chǎn)品都需要新手引導(dǎo),常態(tài)型產(chǎn)品不需要新手引導(dǎo)。例如:購物類、新聞類、信息社交類。它們的界面和操作流程我們已經(jīng)基本熟悉了,所以不需要過多的新手引導(dǎo)來浪費用戶的時間。

新手引導(dǎo)最重要的是要契合產(chǎn)品本身,在合適的時機,以恰當(dāng)?shù)姆绞?,在不剝奪用戶探索權(quán)利的情況下,去引導(dǎo)用戶更好地使用這款產(chǎn)品。

新手引導(dǎo)雖然是很小的一個環(huán)節(jié),但在產(chǎn)品設(shè)計中每個環(huán)節(jié)都是非常重要的,它們直接影響了用戶的使用感受。所以希望產(chǎn)品設(shè)計者都能像匠人一樣去打磨自己的產(chǎn)品,給用戶帶來高水準(zhǔn)的用戶體驗。

 

作者:大地,希望和大家一起探討運營工作。

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

題圖作者提供

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝大神分享

    回復(fù)
    1. ??

      來自安徽 回復(fù)
  2. 感謝您的分享,看得出您是一個留心細(xì)節(jié),善于總結(jié)的人呢!

    來自浙江 回復(fù)
  3. 寫的非常好,感謝分享

    來自北京 回復(fù)
  4. 感謝分享

    回復(fù)
  5. 很全面,大贊,還有原型鏈接,太貼心了??!

    來自北京 回復(fù)
  6. 最近正苦惱做新手引導(dǎo),看完啟發(fā)很大,謝謝!

    回復(fù)
  7. 很全面。。。

    來自北京 回復(fù)
  8. 很棒,學(xué)習(xí)了

    回復(fù)
  9. 新人小白學(xué)習(xí)了~!

    來自浙江 回復(fù)
  10. 附上我做的上述所有引導(dǎo)方式的原型鏈接,方便小伙伴們在工作中參考和使用。 ??

    高保真原型:https://www.xiaopiu.com/project?proid=5ad1e1264a8eef42a03e3550
    低保真原型:https://www.xiaopiu.com/editor?type=project&id=5ad1e1354a8eef42a03e3551
    原型下載:https://www.xiaopiu.com/square?searchText=新手引導(dǎo)

    來自北京 回復(fù)
    1. 真貼心,跪謝!

      來自北京 回復(fù)
    2. 你好

      來自安徽 回復(fù)
    3. 超贊,感謝!

      來自廣東 回復(fù)
    4. 十分感謝 ??

      來自北京 回復(fù)
    5. 厲害了!

      來自江蘇 回復(fù)