您的位置:首頁>正文

8種引導方式,7個設計要點,全面瞭解新手引導!

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

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

文末附有我做的相關原型資源可下載, 方便大家在工作中參考和使用。

一、哪些內容需要引導?

1. 產品特色

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

2. 產品操作

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

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

3. 產品新功能

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

二、可能在哪些時機出現?

1. 首次打開產品時

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

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

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

3. 使用者主動點擊尋求説明

還有很多產品為了使用者的使用體驗以及保留用戶自行探索的好奇心, 並不會設置強制性的新手引導。

但使用者在需要引導的時候可以主動點擊説明按鈕, 把選擇權交到用戶手中。

三、新手引導有哪些呈現方式?

1. 蒙層引導

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

而蒙層引導又可以細分為單頁蒙層引導和分步引導。

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

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

當然它的缺點也比較明顯,

因為引導過程是連續的, 使用者不可以自己控制步驟, 所以有時候會讓用戶產生厭煩情緒。

2. 氣泡提示引導

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

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

3. 動畫/視頻引導

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

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

4. 教學式引導

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

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

5. 引導頁

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

6. 預載入任務

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

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

7. 空狀態引導

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

8. 互動式引導

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

四、新手引導還有哪些設計要點?

1. 文案精准,通俗易懂

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

一個人的短時記憶一般只能記得5個字,最多記得9個,文案字數過多用戶很容易遺忘和出現記憶的偏差,所以在新手引導中的文案要簡短、有效、突出重點。如果實在無法精簡,可以考慮用文字分層。

2. 內容不要過多,明確顯示進度

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

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

3. 讓用戶有成就感

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

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

4. 與品牌相近的風格

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

5. 增加趣味性

嘗試讓自己的引導更有趣,讓用戶願意看、喜歡看!

比如使用卡通產品形象來和使用者進行對話,為形式和內容都增加了更多的趣味性。可愛的動畫形象,擬人化、口語化的語言引導等等,這些方式都可以降低使用者對於被打擾這件事情的反感,在愉悅的心情下快速掌握引導內容。

在這種引導風格中做得比較優秀的是 bilibili、閑魚、自如、盒馬這幾款 APP。

6. 在合適的時機出現

現在人們都講究界限感,新手引導是引導,不是騷擾,所以並不需要一股腦兒地把所有東西都教給用戶。

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

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

並不是所有的使用者都是需要引導的,也並不是所有用戶都願意被引導,所以要給用戶選擇的餘地,讓使用者根據自己的情況自行進行選擇。

寫在最後

本文從各個方面探討了新手引導方式,但並不是所有的產品都需要新手引導,常態型產品不需要新手引導,例如:購物類、新聞類、資訊社交類。它們的介面和操作流程我們已經基本熟悉了,所以不需要過多的新手引導來浪費用戶的時間。

新手引導最重要的是要契合產品本身,在合適的時機,以恰當的方式,在不剝奪使用者探索權利的情況下,去引導使用者更好地使用這款產品。

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

最後附上我做的有關以上提到的所有引導形式的原型模版,方便大家在工作中參考和使用。

高保真原型:預覽連結 https://www.xiaopiu.com/editor?type=project&id=5ad1e1264a8eef42a03e3550

低保真原型:預覽連結 https://www.xiaopiu.com/editor?type=project&id=5ad1e1354a8eef42a03e3551

原型下載:下載連結

https://www.xiaopiu.com/square?searchText=%E6%96%B0%E6%89%8B%E5%BC%95%E5%AF%BC

------

作者: Ms.Piu,原創發佈,如需轉載請聯繫原文作者

商業轉載請聯繫作者獲得授權,非商業轉載請注明出處!

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

3. 動畫/視頻引導

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

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

4. 教學式引導

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

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

5. 引導頁

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

6. 預載入任務

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

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

7. 空狀態引導

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

8. 互動式引導

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

四、新手引導還有哪些設計要點?

1. 文案精准,通俗易懂

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

一個人的短時記憶一般只能記得5個字,最多記得9個,文案字數過多用戶很容易遺忘和出現記憶的偏差,所以在新手引導中的文案要簡短、有效、突出重點。如果實在無法精簡,可以考慮用文字分層。

2. 內容不要過多,明確顯示進度

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

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

3. 讓用戶有成就感

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

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

4. 與品牌相近的風格

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

5. 增加趣味性

嘗試讓自己的引導更有趣,讓用戶願意看、喜歡看!

比如使用卡通產品形象來和使用者進行對話,為形式和內容都增加了更多的趣味性。可愛的動畫形象,擬人化、口語化的語言引導等等,這些方式都可以降低使用者對於被打擾這件事情的反感,在愉悅的心情下快速掌握引導內容。

在這種引導風格中做得比較優秀的是 bilibili、閑魚、自如、盒馬這幾款 APP。

6. 在合適的時機出現

現在人們都講究界限感,新手引導是引導,不是騷擾,所以並不需要一股腦兒地把所有東西都教給用戶。

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

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

並不是所有的使用者都是需要引導的,也並不是所有用戶都願意被引導,所以要給用戶選擇的餘地,讓使用者根據自己的情況自行進行選擇。

寫在最後

本文從各個方面探討了新手引導方式,但並不是所有的產品都需要新手引導,常態型產品不需要新手引導,例如:購物類、新聞類、資訊社交類。它們的介面和操作流程我們已經基本熟悉了,所以不需要過多的新手引導來浪費用戶的時間。

新手引導最重要的是要契合產品本身,在合適的時機,以恰當的方式,在不剝奪使用者探索權利的情況下,去引導使用者更好地使用這款產品。

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

最後附上我做的有關以上提到的所有引導形式的原型模版,方便大家在工作中參考和使用。

高保真原型:預覽連結 https://www.xiaopiu.com/editor?type=project&id=5ad1e1264a8eef42a03e3550

低保真原型:預覽連結 https://www.xiaopiu.com/editor?type=project&id=5ad1e1354a8eef42a03e3551

原型下載:下載連結

https://www.xiaopiu.com/square?searchText=%E6%96%B0%E6%89%8B%E5%BC%95%E5%AF%BC

------

作者: Ms.Piu,原創發佈,如需轉載請聯繫原文作者

商業轉載請聯繫作者獲得授權,非商業轉載請注明出處!

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示