編輯導語：當我們第一次使用某一APP產品時，都會有新手引導這一功能出現，其目的是可以使用戶快速上手產品，降低用戶熟悉產品的時間。那么對于新手引導的設計形式也越發多樣化，本文將對新手引導的設計本質和關鍵類型進行分析，值得閱讀學習。

說到新手引導，大家腦海中第一時間想到的是什么？是第一次打開 APP 時的開屏介紹，亦或是功能說明的氣泡提示？

其實都沒錯，新手引導作為連接設計師和用戶的一種重要手段，其擔負的使命是降低用戶在使用APP時的學習成本，從初學者盡快成為使用者。而在當下，新手引導的使用場景早已跳出首次進入應用的介紹，形式也更加多樣，甚至延伸出線索引導的高級形式，潛移默化地引導用戶，以至于用戶學會時都沒有意識到自己已經被引導。以下我們將走進新手引導的世界，掌握新手引導的設計本質和關鍵類型。

一、為什么需要新手引導？

新手引導，英文術語為OnBoarding。其實在沒有手機互聯網的時代就已經存在于企業管理中，而且到現在也還一直存在著 [1]。是的，它就是我們入職公司時的新員工入職培訓，這個培訓過程上至企業文化，下至日常技能，可以幫助新員工快速進入工作狀態，融入公司環境。

有研究表明，好的入職培訓甚至可以提高員工的對工作的滿意度和公司忠誠度 [2]脫胎于入職培訓，在互聯網發展期間，相對于員工的滿意度和忠誠度而言，APP則開始關心用戶的激活率、留存率和轉化率。而硅谷分析師 Andrew Chen 的研究中表明，平均APP在安裝后的三天內會失去 77% 的用戶 [3]。這就促使APP需要在用戶進入的第一時間傳遞自己的價值和必要的使用技巧，以保證用戶不會因為感知不到APP的用處，或者使用過程中遇到困難而卸載APP。

在這個背景下，新手引導便被廣泛提倡和運用，Facebook和Google也均將新手引導體驗納入設計規范之中 [4] [5]。使用場景也逐漸地從首次進入APP開屏介紹，拓展至新功能上線、日常使用幫助等整個用戶使用旅程中。

二、新手引導有哪些類型？

我們前文所說的開屏介紹，氣泡提示其實都只是引導的一種表現手段，從信息傳達角度來看，引導可分為三種類型，即圖文引導、交互引導和線索引導，這三種類型用戶完成的概率逐一降低，學習效果卻逐一增強。我們要結合實際業務場景靈活搭配使用。

1.? 圖文引導

作為日常設計中接觸最多的形式，圖文引導即通過視頻、圖片、文字等形式直接呈現給用戶，以引導用戶了解APP和告知用戶功能的更新。其載體多種多樣，常用的幾種形式中，從對用戶的干擾性上依次可以為全屏式、彈窗式、氣泡式。

全屏介紹作為干擾性最大的一種形式，會覆蓋全部的APP畫面，僅推薦在用戶在首次進入APP時使用。如Layout from Instagram 是一款Instagram旗下幫助用戶剪輯布局圖片的工具型APP，用戶在下載進入APP的第一時間內，Layout利用簡易的四步動畫全屏介紹幫助用戶快速了解了該APP的主要使用技巧，在給用戶留下APP簡單易用的第一印象后，最后自然地鏈接到APP歡迎頁，以一句詢問句“準備創建自己的布局？”為引子，既表明了該APP的定位是照片布局，又激起了用戶想要自己上手試試剛剛學到技巧的欲望。

彈窗引導跟全屏引導相同，也是一種會打斷用戶正常操作的形式。但由于其畫面占比較小，會利用蒙版稍微露出后面的界面，不至于完全打斷用戶的使用流程，陷入我不知道在哪的境地，一般會用在產品迭代的新功能引導。而為了更好地幫助用戶掌握新的功能，推薦在用戶實際想要使用該功能或者到達該功能頁面的時候進行引導，這樣用戶會有更強的學習意愿。而用戶正在進行其他任務，強制進行引導打斷，可能會引起用戶的負面情緒，請謹慎使用。

相比于彈窗提示，還有一種更輕量的引導方式，它就是氣泡提示。氣泡提示是在用戶使用過程中，通過氣泡方式進行功能引導的表現形式。這種方式不會打斷用戶的正常使用流程，因此幾乎不會干擾到用戶，還能起到新功能提示的作用，但是也正因為不會打斷用戶，頁面占比也很小，用戶很容易忽視，建議在小功能迭代時使用。

需要注意的是，一個頁面最多有一個氣泡提示，如果同時出現多個不同的氣泡，反而會讓用戶產生迷惑，還會有廣告彈窗的既視感，降低用戶對該產品在其心中的品質。為了避免這種情況，就需要在設計時統籌把握所有氣泡提示的出現時機，約束其出現的唯一條件，以免跟其他氣泡提示撞車。

2. 交互引導

從前文可以看出，圖文引導由于其直接，單刀直入的特點，適合在用戶使用APP初期，幫助用戶構建APP使用理念，以及新功能上線時使用。同時也正因為表述過于直白，用戶在引導過程中幾乎全靠記憶，因此從傳遞給用戶信息到用戶真正上手的間隔時間不應過長，否則用戶容易出現實際上手又忘記的情況。

簡道云是一款線上應用搭建平臺，在用戶使用前期會通過圖文引導的方式引導用戶了解該平臺如何使用，每一步都包含了一個功能介紹視頻，一共六大步，信息量過大，導致用戶看完想自己嘗試的時候往往只記得其中一兩個知識點，還留下操作復雜的第一印象。

因此當我們無法通過簡潔明了的信息引導用戶時，這時候就應該引入交互引導。顧名思義，相對于圖文短平快的引導方式，交互引導是一種需要用戶參與其中，邊學邊操作的引導模式，這種方式一般將核心的技巧拆分成幾個關鍵任務，讓用戶可以在引導之后立刻上手操作，加深知識的印象，在工具型產品中被廣泛運用。

Framer是一款交互原型工具，支持使用代碼做動效，在它的前期新手引導中就采用了交互引導的方式。在它的布局中，直接將實際的畫布呈現給用戶，左邊放置了教學視頻，右邊則放置了同樣的畫板給用戶，用戶可以實時地跟隨用戶進行實操，而在最下方則展示了具體的知識點和步驟點。整個引導下來，用戶基本可以上手這款軟件。

?3. 線索引導

如果說圖文引導和交互引導，用戶在其中是被動地接受信息，那么線索引導則是用戶主動跟隨設計者留下的線索自主發現的方式。就好比同樣地介紹一棵樹，圖文式是拿著圖片告訴用戶，交互式是帶著用戶去觸摸，而線索式則是用戶聽到樹葉被風吹動的聲音，自己找到。其中哪種更有成就感和記憶更深刻自然不言自明。

而在iOS的系統設計之中，為了保持整體設計的克制簡潔，線索引導這種方式就被廣泛地應用。設計手法主要表現為動畫線索[6]和經驗線索。

動畫線索是將元素的出場和入場動畫作為線索，并通過一種常見的手段作為觸發條件。比如從A點到B點一般我們會走道路一，但是現在又支持更加快捷的道路二，如何不露聲色地告訴用戶呢？就需要在用戶走道路一的途中，讓用戶自己看到道路二。

上面可能說得有點抽象，我們舉個具體的例子。Safari是iOS自帶的瀏覽器軟件，它支持同時創建多個網頁，而在其管理網頁的頁面，用戶想要刪除一個網頁，但又沒有任何提示，用戶會下意識地去點擊縮略圖右上角的“×”，而移除縮略圖的過程則采用一個向左移動出屏幕的動畫，從而傳遞了線索給到用戶。這時候如果用戶嘗試左滑縮略圖會驚喜地發現刪除縮略圖的第二種方式。這里我們可以對比看下夸克APP，夸克同樣支持兩種移除方式，但是當用戶點擊“×”時是原地消失，如果不引入其他引導，用戶很難學會第二種滑動移除的方式。

無獨有偶，iPhone的音量調節引導也是采用了這個原理。在IOS 13中為了降低對用戶的干擾，將音量反饋改到了側邊，而在這一版里，音量調節除了支持按鍵，也新增了手勢上下拖動，但是蘋果是如何教會用戶這個新的交互方式的呢？具體如下：用戶通過按鍵調節音量時先顯示寬邊音量條，繼續調整時向左縮小為窄邊條，從而在認知層面告知用戶音量是有兩種寬度，且兩者之間是可以互相切換的，而部分用戶就會嘗試向右拖動控制音量條，從而學會這種方式。

以上我們可以看到，動畫線索一般來說會有兩種方式實現用戶的意圖，一種是基礎的常識性操作，一種是更高級的操作。而在蘋果的App Store應用商店中，用戶退出一個頁面則包含了三種實現方式，這個留給各位讀者自己發現。除了動畫線索，在蘋果系統中還有一種線索引導方式 — 經驗線索。這種方式就好比你已經知道如何從A到B的經驗，那么以后在類似的場景中，你會優先使用之前的操作經驗達成目的。

還是以Safari舉例，在iOS 15的改版中，用戶想要進入網頁管理頁面，除了支持點擊圖標，也支持用戶上滑網址進入，而這個交互操作是映射了用戶進入系統任務管理后臺的上滑操作經驗。

雖然線索引導沒有過多的干擾，將自由都留給了用戶，但是我們可以看出來這種方式較為隱晦，基本上是留給愛探索，想要更便捷操作的用戶，而對于普通用戶也保留了基本的交互方式，因此從另一個角度來看，蘋果之所以不做單獨的介紹，一方面是為了系統的簡潔，另一方面是目標群體數量不大的原因。

三、如何設計出恰到好處的新手引導？

通過上一部分，我們了解了新手引導的三種類型及其使用場景。那在實際業務中需要注意什么，才能設計出恰到好處的引導設計呢？這里我總結了三問，幫助大家更好地理解和運用。

1. 為什么要引導？（why）

雖然說這個話在我這篇文章里是有點廢話的感覺，但是我還是希望大家能意識到使用引導的必要性。真正好的設計是不需要引導的，它應該是基于用戶日常生活中的經驗，用戶可以自己摸索學會。就像喬布斯發布iPhone 4的時候一樣，觸屏交互這種自然合理的交互方法并沒有進行刻意的教學，因為用戶下意識地看到圖標在那里就會去點，就像看到桌子上有個蘋果，拿起來一樣自然。而當時使用按鍵交互的方式才是增加了用戶的學習成本。

因此希望在明確使用引導前，你需要知道為什么要引導？是因為功能指標，還是為了改善用戶體驗，并對癥下藥，畢竟無需必要，勿增實體。

2. 為什么要用這種引導？（how）

當我們明確要使用引導后，我們要時刻問自己當下使用的引導是不是合適的，我建議從兩個維度去判斷，一個是復雜度，要知道用戶是懶惰的，也是沒耐心的，多一點的時間成本和理解成本對用戶來說都是阻礙。另外一個是干擾度，我們最好從干擾最小的方案開始設計，實在不行再去考慮干擾較大的方案，并時常將自己代入其中，問自己如果看到這個引導是覺得貼心還是糟心。

3. 為什么要在這時候用引導？（when）

到這里我們已經基本明確了引導的表現形式，這一步相對來說最簡單，但是考慮的場景可能也最復雜。用戶使用你的產品是整體使用，因此我們不能單點地去考慮將該設計放在該場景是否合適，而應該梳理用戶使用產品的整個旅程，遍歷所有用戶需要該引導的可能場合，甚至在不同的場景需要不同的表現方式，覆蓋引導前的告知、引導中的可退出、引導后的可找回，一次性將用戶的試錯成本降到最低。

四、結語

恭喜你看到了這里，通過這篇文章我們了解了新手引導的來源，包含圖文引導、交互引導和線索引導三大類型，并說明了新手引導在實際設計時的建議，希望在今后的設計中如果遇到引導的設計，可以更加游刃有余，結合實際業務場景給出最合適的提案。如果你還覺得意猶未盡的話，這里有個網站（https://www.reallygoodux.io/），里面收納了很多產品的新手引導，可以再去看看~

參考資料：

[1] Bauer, T. N., & Erdogan., B. (2011)，Organizational socialization: The effective onboarding of new employees

[2] Ashford, S. J., & Black, J. S. (1996). Proactivity during organizational entry: The role of desire for control.

[3] https://andrewchen.com/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/

[4] https://developers.facebook.com/docs/facebook-login/userexperience/

[5] https://material.io/design/communication/onboarding.html#usage

[6] 洋爺. Apple 的設計哲學 · 交互篇

本文由 @為何 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 unsplash，基于CC0協議。