8種引導方式，7個設計要點，讓你全面了解新手引導！

07-16

來自專欄 xiaopiu工坊14 人贊了文章

旅行時我們順利到達一個又一個的目的地；生病時我們快速地找到醫療科室；超市裡我們在數以萬計的商品中找到心儀的商品，完成這些事情我們不經意間藉助了無數的引導，可能是路邊的指示牌、手中的地圖、樓層號碼、指示箭頭等等，這些引導在無形中幫助我們高效正確地完成一件事情。

而產品中的新手引導是可以讓用戶在短時間內快速了解產品的特色以及產品的使用方式，輕鬆上手去體驗產品的功能，完成自己的目標。

由於文章略長，在正文開始之前，先在這裡插播一下小福利：

分享了這麼多的新手引導方式，怎麼能讓大家只能看不能用呢？所以，除了下面的分析之外我也給大家備好了下文中提到的多種新手引導的原型模板，方便大家在工作中參考和使用！

高低保真原型預覽~

高保真原型：預覽鏈接

低保真原型：預覽鏈接

原型下載：下載鏈接

哪些內容需要引導？

產品特色

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

產品操作

絕大部分產品做新手引導都是為了提示用戶如何進行操作，降低用戶的學習成本，幫助用戶快速上手。

但需要注意的是，並不是所有產品功能都需要新手引導。產品的頁面、功能和交互設計應該首先盡量做到自解釋，讓用戶自行探索也可以快速上手用起來。只有部分複雜功能和特殊交互需要對用戶進行引導。

產品新功能

產品上線新功能後，往往會給用戶一些提示，引導用戶去體驗新功能，不然在眾多功能中，用戶很難在短時間內發現更新了哪些內容。

可能在哪些時機出現？

首次打開產品時

大部分的新手引導都會出現在用戶首次打開產品時，讓用戶對產品功能或操作有個初步了解。

結合實際場景，在需要用到的時候出現

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

用戶主動點擊尋求幫助

還有很多產品為了用戶的使用體驗以及保留用戶自行探索的好奇心，並不會設置強制性的新手引導。但用戶在需要引導的時候可以主動點擊幫助按鈕，把選擇權交到用戶手中。

新手引導有哪些呈現方式？

蒙層引導

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

而蒙層引導又可以細分為以下兩個小的分類：

單頁蒙層引導

單頁蒙層引導的適用場景非常多，比如在展示新功能、說明界面中功能位置的改動、講解操作方式、體現特定的手勢交互劃分說明界面的整體結構等等。

分步引導

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

當然它的缺點也比較明顯，因為引導過程是連續的，用戶不可以自己控制步驟，所以有時候會讓用戶產生厭煩情緒。

氣泡提示引導

氣泡提示引導一般會出現在用戶初次進入頁面時，它的表現形式是在操作按鈕旁邊彈出一個氣泡提示框。

可不要小看它，它雖然很輕量但目的指向性卻極強，對用戶的干擾極小。常用於以下場景：告知用戶有新功能上線、引導用戶使用核心功能、或告知用戶一些隱藏菜單的內容。

動畫/視頻引導

動畫、視頻、GIF的共同優點是非常直觀並且具有吸引力。用戶可以根據動態演示，很快地理解整個產品。但這類引導方式內容不宜過長，尤其是動畫和GIF圖這類用戶無法自己控制演示進度的展示方式，最好控制在10秒以內，不然傳遞的信息量太大會導致用戶失去耐心或乾脆什麼也沒記住。

這一種方式適合操作比較複雜或動態演示比較有衝擊力的產品。

教學式引導

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

這種引導方式常見於工具類產品和遊戲。

引導頁

引導頁出現在用戶首次打開APP的時候，基本上由3-5個頁面組成。在用戶使用產品前先給用戶營造好產品的基調和氛圍，宣傳產品功能和亮點或告知用戶最核心的操作方式。引導頁的內容一定要仔細挑選，保證能帶給用戶新鮮感和吸引他們的注意力，否則對用戶來說反而是種干擾，只會直接選擇快速划過。

預載入任務

預載入任務是指在用戶進入產品後，自動為用戶創建了一些和產品形態相關的示例，而不是留給用戶一個空頁面。在引導的同時突出了產品的特色，借用本身的形態讓用戶沉浸在產品的真實場景中去學習，在後續產品的使用中上手速度更快。

此類引導最常用於工具類產品，比如原型工具、設計軟體、文檔、任務清單等產品。

空狀態引導

在新用戶初次進入產品後，會面臨很多頁面內容都為空的情況，此時我們就可以利用這些頁面的空狀態去很好地引導用戶從無到有的去創建內容。如果空狀態頁面只是簡單告知用戶『這裡沒有內容』，用戶往往會不知所措，不知道下一步該做什麼，所以這是一個非常棒的時機去引導用戶去嘗試對應的操作。

互動式引導

這種引導方式非常隱蔽，通常出現在用戶在與產品的特定交互過程中。比如滑鼠游標移動到相應的組件上，懸停時會相關的解釋文字；輸入框內容為空時會有文字提示；微信點擊錄入語音時會提示「手指上滑，取消發送」；sketch點擊C鍵時底部會出現相應的操作提示等等。

新手引導還有哪些設計要點？

文案精準，通俗易懂

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

一個人的短時記憶一般只能記得5個字，最多記得9個，文案字數過多用戶很容易遺忘和出現記憶的偏差，所以在新手引導中的文案要簡短、有效、突出重點！如果實在無法精簡的話可以考慮用文字分層、換行、標點、著重標註等視覺方式進行優化。

內容不要過多，明確顯示進度

不要填鴨式地給用戶一次灌輸過多的信息，用戶初次接觸這款產品，無論你的新手引導設計的多麼的精彩絕倫，也很少有用戶耐心地閱讀並且一次交代太多內容，很容易讓用戶產生「這款產品很複雜」的印象。

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

讓用戶有成就感

用戶完成引導中的任務或操作時，給予用戶及時的反饋，或者對用戶進行鼓勵，帶給他們成就感，比如可以給出較為誇張的讚美式反饋，如果是有涉及消費的產品可以以代金券、優惠券的形式給用戶獎勵。

在設計比較長的引導任務的時候記得要「用最短路徑讓用戶獲得最好的成果」，讓用戶產生「哇！我這麼厲害！」的感覺，比如在遊戲教學中常常會讓用戶迅速享受到滿血通關的快感！

與品牌相近的風格

新手引導的風格基調最好和品牌風格一致，例如：知乎的學術風格、豆瓣的小清新風格、簡書的簡潔風格、bilibili的二次元風格等等，這些產品都有自己的品牌基因。產品的每個部分如果都能傳達給用戶同樣的品牌形象，就可以加強品牌在用戶心理的認知。比如如果你的產品是bilibili這種帶有二次元風格的產品，那新手引導就不要選用金融產品的商務風格。