UI設計中的新手引導，主要幫助用戶認識產品、捋清重要功能入口，降低后續使用過程中的認知成本，對于較為復雜的產品來說至關重要。本文作者對新手引導的設計進行了分析，一起來看一下吧。

很多時候，大家都覺得新手引導大可不必，對于大部分產品，用戶看都不看直接關掉，但對于一些較為復雜的產品，新手引導是不是比看長篇大論的說明書好多了。設想一下，我們生病后拿的藥品，可曾有過一次將說明書從頭到尾的看完過，我相信通常都是遵醫囑或者后續再咨詢吧，相比之下，如果購買的是一臺跑步機，除了看視頻操作之外，可能還會看一看說明書，雖然查看率較低，但不可否認的是遇到突發問題或許能起到關鍵作用。

UI設計中的新手引導主要幫助用戶認識產品、捋清重要功能入口，以幫助其快速上手、降低后續使用過程中的認知成本，同時也是產品作為拉新轉化的重要步驟，對于較為復雜的產品來說至關重要，不容忽視。那么在設計新手引導時要注意哪些問題、如何將引導的作用發揮到最大，接下來與大家一起了解。

一、了解新手引導

1. 什么是新手引導

當我們進入一家新的公司時，一般都會有人事帶著我們認識團隊中的每一個人、或者在會議上做自我介紹，我們很清楚，即便不這樣做，只需一定的時間也可以通過主動/被動溝通逐漸熟悉，但公司的安排無疑加速讓我們融入新的環境，更快進入最好的工作狀態，這就是顯示版的“新手引導”。

《增長黑客》中曾說過：欲望-摩擦=轉化，為了增加轉化，既可以增加用戶的欲望、也可以減少產品與用戶的摩擦，“新用戶體驗”作為用戶旅程的起點，必定有諸多摩擦點，新手引導就是為了消除這些摩擦點而存在。

產品中的新手引導能幫助用戶在短時間內快速了解產品特色以及使用方式，輕松體驗多種功能。站在產品角度，新手引導讓用戶掌握產品核心功能、提高留存率后，對提升轉化起到了至關重要的作用。

2. 需引導的功能/內容

首先，展示產品特色，讓用戶了解該產品相比同類產品中的優勢與亮點，給用戶留下良好的印象、或者說有想用下去的欲望；

第二，產品的更新迭代，不管是新功能的上線還是原有功能入口位置的變化，都應該及時提示用戶，避免用戶在之前版本的固有思維中、無法快速掃視到自身所需的入口而花費更多的時間成本；

第三，操作指引，這一點并不是所有產品都需要的，在正常情況下，產品要做到不讓用戶思考就能快速上手，但針對較為復雜的產品，則需要通過新手引導幫用戶快速掌握其操作方式與技巧，降低自行學習成本，例如部分B端、工具類應用。

3. 出現的時機

大部分新手引導出現在應用下載或版本更新后的首次打開時，這有助于用戶對產品的新功能/操作有基本了解。新手引導不求大而全，在介紹核心功能和特色后，可將出現過的引導進行隱藏，方便用戶在需要的時候手動喚出以尋求幫助。

另外，產品需要保持用戶對產品自行探索的好奇心，對于那些非必須但必要的新手引導，可在不干擾用戶的前提下，根據用戶的操作進行行為預判，在合適的時間主動給予提示，確保用戶的隱性需求能得以明確并及時解決。

二、使用場景及樣式分類

1. 頁面遮罩引導

頁面遮罩引導相當于把氣泡引導樣式進行了升級，區別在于頁面上方增加了一個黑色半透明蒙層進行遮罩，被引導的下層內容處鏤空設計，并在蒙版上配交互手勢、文字信息或插圖等內容進行輔助說明，用戶需要手動點擊“下一步/跳過/關閉”按鈕方能操作其他內容。

這種新手引導最大的優勢是能讓視覺聚焦于當前被指引的功能說明處，確保用戶不會被其他信息所干擾?；臼窃谙螺d或更新應用后的首次打開時出現，可顯示一個或多個（順序引導），信息傳達的有效性很高。

需要注意的是內容介紹必須與所引導的位置處保持親密性，關閉按鈕明顯、易操作。出現多個引導時，需同時提供“下一步”、“跳過”按鈕，這里不乏有一些老用戶二次下載或出于更新版本的目的，根本不需要新手引導，如果每次都要挨個點，對老用戶來說，這不是幫助、而是干擾了。

2. 對話框引導

對話框一種強引導，一般在用戶即將使用的某個功能被限制或在使用過程中主動尋求幫助時出現，對用戶來說有實際性的幫助。對話框的出現依然會打斷用戶操作，尤其是自動觸發的彈出時機要得當，彈出不及時或提前干擾用戶都會存在負面影響。對話框引導會在合適的時機由系統自動觸發或用戶主動觸發。

1）系統自動觸發

例如用戶需要使用某個功能時，系統自動彈出需升級到新版本或完成任務才能體驗，并提供快捷通道，方便用戶直達目標。另外，視頻類應用的付費影片可免費體驗5分鐘，到時間后，系統會自動暫停播放并彈出付費通道，引導用戶轉化。

2）用戶手動觸發

這類引導都會有一個操作入口，使用按鈕、“問號”圖標或文本超鏈接（說明/操作指引/幫助…）提示，用戶可隨時點擊喚出引導說明。例如，用戶在應用內主動開啟設備的通知、定位權限，激活信用卡時預留手機號碼的文本說明或卡背面的CVV/CVC圖文指引說明等。

3. 氣泡提示引導

這是一種較為輕量但指向性極強的引導方式，其表現形式是在需要的位置彈出一個帶尖角的氣泡容器加引導性的文案提示，用戶可跟隨引導操作、也可忽略氣泡直接操作其他內容，不會打斷用戶，其干擾性極小。

氣泡提示引導可用在新功能上線、核心功能定位、隱藏菜單提示等場景，可配合圖片素材、動畫效果，因帶有明確的指向性，可出現在頁面的任何位置，兼容性極強。

4. 操作欄引導

相比前面提到的對話框引導，操作欄與之有些相似，其都是阻斷式且沒有明確指向性的引導方式，唯一不同的是，操作欄雖然視覺重心稍弱于對話框，但彈出的位置在屏幕下方，利于用戶操作（靠近手指），尤其是單手操作更容易觸達。

另外，操作欄有更多的空間資源，對于內容較多的詳細指引比較適合，可通過圖文、背景組合營造出濃烈的視覺氛圍，還能增加突出的CTA按鈕提升轉化率。

5. 其他引導方式

除了上述提到的幾種新手引導之外，還有引導頁、缺省頁、偏好標簽等方式，但那些都是較為復雜且獨立的模塊體系，不是三言兩語能說清楚的，建議閱覽其他單獨的相關資料。

三、新手引導設計小技巧

1. 情感化鏈接

情感化是設計的利器，它將毫無感情的互聯網產品賦予生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。

在設計新手引導時，不妨加入擬人化的形象、深入人心的文案以及模擬現實世界的事物/事務，做一個有溫度的產品，更能拉近與用戶之間的距離。

2. 強化利益點、建立目標

對于活動促銷類新手引導，在用戶操作之前可告知操作后能得到什么、不操作會有什么損失，不乏使用一些如利益引誘、中斷警告、視覺氛圍等常規設計手段讓用戶有明確的使用目標，便于推動用戶做出正向的決策。操作之后著重突出利益點刺激用戶，給用戶留下深刻的印象或讓其期待下次的到來。

3. 多個功能分層引導

遵循一次只做一件事的原則，多個功能需按不同的優先級、跟隨用戶的操作依次呈現。還需要在每個層級都提供“跳過”入口，新手引導是為滿足用戶需求所提供的幫助，而不是強制用戶使用。

4. 復雜功能分時間段引導

較為復雜的功能可將信息進行拆分，根據其重要程度按不同的時間歷程分別開放，避免用戶一次性接受過多的信息量，也能降低單次學習成本，提高吸收效率。

例如：VIP功能，每個等級都可能會單獨開放新的服務、權限，系統應該在用戶每次升級后、把新的服務及時引導反饋，切不可在首次開通VIP時就一股腦的把所有增值服務都告知用戶，沒那耐心去記、也記不住。如有必要，可把不能使用的功能放出來置灰顯示或提供操作限制等。

5. 多樣化的視覺樣式

不同的新手引導，可設計出不同的視覺樣式，避免相同的樣式讓用戶形成“慣性思維”誤以為已經看過，不加思索的跳過而讓新手引導成為累贅。

四、常見問題及處理方式

1. “跳過”弱化處理

在UI界面中，只要不是用戶主動尋求幫助而彈出的信息，就會條件反射地去尋找關閉按鈕，直至內容消失。

雖然很多新手引導都有提供“跳過”操作，這無可厚非，但是不要設計的過于明顯，太過搶眼的“跳過”按鈕很容易激起用戶的條件反射，不管有無幫助、看見就點，這也就失去了新手引導的初衷。適度弱化“跳過”操作入口，用戶即便想要關閉，但在尋找操作的過程中，也許會被有趣的、有幫助的信息所干擾，或可持續瀏覽。

2. 使用淺色遮罩

很多時候，為了讓用戶按順序走完新手引導，會在氣泡后面添加一層遮罩，其不管是箭頭指示還是鏤空透底，遮罩的顏色（純黑不透明度）最好使用淺色，需要用戶在吸收新手指引內容的同時、還能看到界面整體的結構樣式，在新手引導結束后對操作路徑有一定的印象，太深的遮罩不利于用戶整體學習。

3. 最易理解的表達方式

引導文案必須言簡意賅，需要以最能吸引用戶注意、容易理解的表達方式有效的突出重點。切忌長篇大論，過多的文本內容，用戶容易忘記或出現記憶偏差，而且也沒那個耐心去看。

如果內容無法精簡的更短，可以考慮使用圖片/插圖代替部分文字，以圖文結合的方式體現，還可以用分段顯示的方式跟用戶進行互動，邊用邊學。

4. 內容較多要顯示進度

在設計新手引導時，不管內容有多么精彩，都不要想著一次給用戶灌輸過多信息。用戶初次使用產品，只需給予必要的功能及適當的幫助，多個引導的數量通?？刂圃?~5條即可。還需要讓用戶實時知道當前進度，避免用戶無法掌控內容量而產生焦慮感，如果被直接跳過就無法發揮出新手引導的作用。

5. 用戶要有選擇權

新手引導主要是為了幫助用戶快速上手，雖然最終的目標是為提升轉化，但不要意想天開的在新手引導中僅放置一個“去轉化”快捷入口。沒有關閉操作、強制用戶進入轉化流程的做法，除了極少少數的必用情況外，大概率會被用戶直接結束進程，既然無法關閉那就卸載吧！

不管內容有多么重要、有多么想提升收益，都不可強制用戶，我們可以利用設計手段去吸引用戶操作，但依然要提供后退的入口，就算不是多么的明顯也行，用戶應該要有自主選擇的權利。

6. 趣味化的內容

用戶在使用新手引導學習的過程中，本身是枯燥的，設計師可以根據產品的調性設計出趣味化的字體、插畫，還能配合動畫設計給用戶帶來趣味化的使用體驗。

五、結語

本文從基礎認識、樣式分類、設計技巧及常見問題處理四個方面介紹了新手引導在UI設計中的實踐，雖然它只是很小的一個環節、且不是所有的應用（如購物類、社交類、新聞類）都需要新手引導，可一旦涉及就顯得尤為重要。新手引導設計的是否合理易用，直接關系著用戶的使用體驗及產品轉化，如果你的新手引導只是擺設、甚至成為累贅，還不如去掉。

新手引導設計需根據產品自身特性結合業務場景，在合適的時機、以最合理的方式呈現給用戶，引導用戶快速熟悉產品、并使用產品。

筆者希望通過本文內容，讓初中級設計師對新手引導有一個系統化的認識，在日后的設計中，能結合實際應用場景給出最合適的方案，為用戶提供實際的幫助、為產品提升價值。