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

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

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

一、了解新手引導(dǎo)

1. 什么是新手引導(dǎo)

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

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

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

2. 需引導(dǎo)的功能/內(nèi)容

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

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

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

3. 出現(xiàn)的時機

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

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

二、使用場景及樣式分類

1. 頁面遮罩引導(dǎo)

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

這種新手引導(dǎo)最大的優(yōu)勢是能讓視覺聚焦于當前被指引的功能說明處，確保用戶不會被其他信息所干擾。基本是在下載或更新應(yīng)用后的首次打開時出現(xiàn)，可顯示一個或多個（順序引導(dǎo)），信息傳達的有效性很高。

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

2. 對話框引導(dǎo)

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

1）系統(tǒng)自動觸發(fā)

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

2）用戶手動觸發(fā)

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

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

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

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

4. 操作欄引導(dǎo)

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

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

5. 其他引導(dǎo)方式

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

三、新手引導(dǎo)設(shè)計小技巧

1. 情感化鏈接

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

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

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

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

3. 多個功能分層引導(dǎo)

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

4. 復(fù)雜功能分時間段引導(dǎo)

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

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

5. 多樣化的視覺樣式

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

四、常見問題及處理方式

1. “跳過”弱化處理

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

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

2. 使用淺色遮罩

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

3. 最易理解的表達方式

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

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

4. 內(nèi)容較多要顯示進度

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

5. 用戶要有選擇權(quán)

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

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

6. 趣味化的內(nèi)容

用戶在使用新手引導(dǎo)學(xué)習(xí)的過程中，本身是枯燥的，設(shè)計師可以根據(jù)產(chǎn)品的調(diào)性設(shè)計出趣味化的字體、插畫，還能配合動畫設(shè)計給用戶帶來趣味化的使用體驗。

五、結(jié)語

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

新手引導(dǎo)設(shè)計需根據(jù)產(chǎn)品自身特性結(jié)合業(yè)務(wù)場景，在合適的時機、以最合理的方式呈現(xiàn)給用戶，引導(dǎo)用戶快速熟悉產(chǎn)品、并使用產(chǎn)品。

筆者希望通過本文內(nèi)容，讓初中級設(shè)計師對新手引導(dǎo)有一個系統(tǒng)化的認識，在日后的設(shè)計中，能結(jié)合實際應(yīng)用場景給出最合適的方案，為用戶提供實際的幫助、為產(chǎn)品提升價值。

專欄作家

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

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

題圖來自 Unsplash，基于 CC0 協(xié)議。

該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。