一個(gè)簡(jiǎn)單的新手引導(dǎo)流程的出現(xiàn)，不僅能讓新手用戶更快、更準(zhǔn)確的適應(yīng)產(chǎn)品的這些新變化，還將給用戶留下良好的第一印象。一個(gè)好的新手引導(dǎo)流程可以讓訪客一眼明白如何開(kāi)始、進(jìn)行和結(jié)束產(chǎn)品的體驗(yàn)和交互流程。

寫在前面

不管是老用戶還是新用戶，在發(fā)布新版本、有新功能上線、或是現(xiàn)有功能更新的場(chǎng)景下，都屬于“新手用戶”。

新手引導(dǎo)流程是將新手用戶融入到產(chǎn)品中的設(shè)計(jì)，優(yōu)質(zhì)的引導(dǎo)設(shè)計(jì)可以讓訪客與系統(tǒng)進(jìn)行深入的交互。

一個(gè)簡(jiǎn)單的新手引導(dǎo)流程的出現(xiàn)，不僅能讓新手用戶更快、更準(zhǔn)確的適應(yīng)產(chǎn)品的這些新變化，還將給用戶留下良好的第一印象。一個(gè)好的新手引導(dǎo)流程可以讓訪客一眼明白如何開(kāi)始、進(jìn)行和結(jié)束產(chǎn)品的體驗(yàn)和交互流程。

引導(dǎo)設(shè)計(jì)分類

（1）全局概覽式引導(dǎo)

（2）功能操作引導(dǎo)

• 蒙版說(shuō)明引導(dǎo)
• 彈窗引導(dǎo)
• 氣泡引導(dǎo)
• DIV提示引導(dǎo)

全局概覽式引導(dǎo)

全局概覽一般出現(xiàn)在用戶“第一次啟動(dòng)產(chǎn)品”時(shí)，或用戶“完成有效的身份認(rèn)證之前”的每次登陸時(shí)。

移動(dòng)端一般以引導(dǎo)頁(yè)為主要表現(xiàn)形式，PC端一般以彈窗式引導(dǎo)頁(yè)為主要表現(xiàn)形式，用戶可通過(guò)“左右滑動(dòng)”、“點(diǎn)擊下一步/上一步”或“自動(dòng)播放相應(yīng)流程視頻”等，對(duì)產(chǎn)品的核心功能有個(gè)大致的了解。

關(guān)鍵點(diǎn)：

• 在全局概覽的引導(dǎo)設(shè)計(jì)中，要給老用戶或想立馬上手的新用戶設(shè)計(jì)一個(gè)可以跳過(guò)引導(dǎo)直接使用產(chǎn)品的入口，最好提供一個(gè)可以實(shí)時(shí)反饋給用戶引導(dǎo)流程進(jìn)度的線索，讓用戶能有意識(shí)的作出對(duì)相應(yīng)操作的判斷；
• 在內(nèi)容或文案上，強(qiáng)調(diào)核心功能的同時(shí)，要保證其足夠簡(jiǎn)潔，用戶并沒(méi)有太多耐心查看過(guò)多的文字或描述，此外，盡可能的提供一份能吸引眼球的文案，讓用戶覺(jué)得雖然是與生硬的產(chǎn)品進(jìn)行交互，但感受依然是生動(dòng)和有趣的；
• 最好可通過(guò)場(chǎng)景化的動(dòng)畫/插畫，配以簡(jiǎn)潔的描述性文字，來(lái)介紹產(chǎn)品及其核心功能，加強(qiáng)引導(dǎo)的效果，提高引導(dǎo)的效率，注意動(dòng)畫時(shí)長(zhǎng)要盡可能簡(jiǎn)短；
• 一次展示一個(gè)特性，如一個(gè)引導(dǎo)頁(yè)或動(dòng)畫只介紹一個(gè)功能。

功能操作引導(dǎo)

功能操作引導(dǎo)是針對(duì)當(dāng)前頁(yè)面，或某一個(gè)特定的功能所進(jìn)行的引導(dǎo)說(shuō)明，目的是在當(dāng)前模塊快速了解當(dāng)前頁(yè)面或快速上手相應(yīng)的功能。

常見(jiàn)的形式有：

• 蒙版說(shuō)明引導(dǎo)
• 彈窗引導(dǎo)
• 氣泡引導(dǎo)
• DIV提示引導(dǎo)

1. 蒙版說(shuō)明引導(dǎo)

“蒙版說(shuō)明”這一引導(dǎo)方式，一般出現(xiàn)在用戶第一次進(jìn)入相應(yīng)頁(yè)面時(shí)，與頁(yè)面強(qiáng)關(guān)聯(lián)。

順序以操作的先后順序或信息的主次程度來(lái)排列（除特殊場(chǎng)景外，不建議同時(shí)顯示多個(gè)點(diǎn)的提示/說(shuō)明），前后之間可輔以動(dòng)畫，也可通過(guò)對(duì)出現(xiàn)次數(shù)的記錄或用戶主動(dòng)選擇“不再提醒”，來(lái)記錄顯示狀態(tài)。

因在引導(dǎo)完成之前無(wú)法進(jìn)行其他操作，所以需提供跳過(guò)引導(dǎo)/退出引導(dǎo)的操作。

蒙版通常為半透明狀，如60%透明度的#000000，需保證其上的文字、箭頭、插畫、操作等清晰可見(jiàn)。

2. 彈窗引導(dǎo)

“彈窗引導(dǎo)”通常依然會(huì)以半透明的蒙版增加對(duì)比度。

除了基礎(chǔ)的介紹功能外，還負(fù)責(zé)預(yù)測(cè)并引導(dǎo)用戶下一步操作或前往某些特定的頁(yè)面，如移動(dòng)端與系統(tǒng)權(quán)限相關(guān)的“打開(kāi)相應(yīng)權(quán)限”或WEB端常用的“解凍賬戶”等。

彈窗引導(dǎo)整體性較強(qiáng)，權(quán)重較高足夠引起用戶注意，可根據(jù)內(nèi)容形式及內(nèi)容多少調(diào)整大小，可以滿足較多場(chǎng)景下的引導(dǎo)。但是，彈窗的出現(xiàn)屬于強(qiáng)制跳出用戶當(dāng)前心流的操作，對(duì)于該形式的使用要做好評(píng)估，并提供“關(guān)閉”等功能。

特別需要注意的一點(diǎn)是，避免多層彈窗嵌套情況的發(fā)生。

3. 氣泡引導(dǎo)

“氣泡引導(dǎo)”用于突出顯示頁(yè)面特定部分的重要提示，使用它來(lái)引導(dǎo)用戶注意相關(guān)的可能容易錯(cuò)過(guò)的元素信息。

以”氣泡“形式出現(xiàn)在需要引導(dǎo)或提示的元素旁，指向性更強(qiáng)，同時(shí)又不會(huì)強(qiáng)行打斷目前用戶的操作流程（尺寸不易過(guò)大， 不能影響查看或操作其他重要元素）。

主要作為相關(guān)功能入口的引導(dǎo)或預(yù)測(cè)用戶行為（如微信中預(yù)測(cè)用戶可能會(huì)發(fā)送最新照片/圖片的功能）。

氣泡引導(dǎo)在設(shè)計(jì)中最為重要的一點(diǎn)是“如何消失”，這個(gè)問(wèn)題有兩種解決方案：

1. 第一種是必須用戶按照氣泡引導(dǎo)操作或點(diǎn)擊氣泡引導(dǎo)的“關(guān)閉”按鈕才會(huì)消失。這種形式雖然可以保證用戶一定看到了引導(dǎo)內(nèi)容，但是氣泡引導(dǎo)一直顯示在頁(yè)面中，會(huì)引起用戶的輕度負(fù)面情緒；
2. 第二種是氣泡引導(dǎo)默認(rèn)顯示5s后，自動(dòng)消失。這種形式的氣泡引導(dǎo)會(huì)出現(xiàn)在頁(yè)面內(nèi)容較多或視覺(jué)焦點(diǎn)較多的情況下，用戶未注意到或未識(shí)別完引導(dǎo)文字，氣泡引導(dǎo)就已消失的情況。所以，在氣泡引導(dǎo)的應(yīng)用中，要根據(jù)實(shí)際的使用場(chǎng)景，對(duì)比引導(dǎo)信息的權(quán)重和可識(shí)別度，選擇使用哪種消失形式。

4. DIV提示引導(dǎo)

“DIV提示引導(dǎo)”以提示為主（被動(dòng)式引導(dǎo)），輔以快捷入口（主動(dòng)式引導(dǎo)）。主要給用戶以警示作用，盡可能的讓用戶能自主選擇后續(xù)操作，不通過(guò)視覺(jué)方式主動(dòng)引導(dǎo)用戶選擇。一般以純文本為主，可作為提示類實(shí)時(shí)信息反饋，通過(guò)不同的顏色來(lái)進(jìn)行視覺(jué)效果及權(quán)重程度的區(qū)分。

DIV提示引導(dǎo)通常位于與待提示待引導(dǎo)元素靠近處，也可顯示在頁(yè)面較為顯眼處。

“成功、提示、警告、失敗”的樣式：

5. 其他功能操作引導(dǎo)

還有一些引導(dǎo)，不僅適用于新手用戶，對(duì)于老用戶也依然適用，因使用場(chǎng)景的不同，還有很多細(xì)分種類，如：

校驗(yàn)引導(dǎo)：對(duì)于表單輸入內(nèi)容的反饋并預(yù)示用戶正確操作。

提供邀請(qǐng)：用于交互期間，合理推斷用戶可能產(chǎn)生的需求。

過(guò)渡式引導(dǎo)：人腦灰質(zhì)（Gray Matter）會(huì)對(duì)動(dòng)態(tài)的事物（eg：移動(dòng)、形變、色變等）保持敏感。在界面中，適當(dāng)?shù)募尤胍恍┻^(guò)渡效果，能讓界面保持生動(dòng)，同時(shí)也能增強(qiáng)用戶和界面的溝通。

即時(shí)反應(yīng)：用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)就應(yīng)該立即有一個(gè)對(duì)應(yīng)的反饋，同時(shí)輸入量級(jí)越大、重要性越高，那么反饋量級(jí)越大、重要性越高。

• “提供邀請(qǐng)”的強(qiáng)大體現(xiàn)在交互之前給出反饋，解決易發(fā)現(xiàn)性問(wèn)題；
• “過(guò)渡式引導(dǎo)”的有用體現(xiàn)在它能夠在交互期間為用戶提供視覺(jué)反饋；
• “即時(shí)反應(yīng)”的重要性體現(xiàn)在交互之后立即給出反饋。

結(jié)束語(yǔ)

引導(dǎo)設(shè)計(jì)的目的，是讓用戶能更輕松、更快速的熟練使用我們的產(chǎn)品。

我們同樣不能盲目的去為每一個(gè)覺(jué)得需要添加引導(dǎo)的地方添加引導(dǎo)，應(yīng)該以實(shí)際需求及產(chǎn)品功能/元素等的權(quán)重進(jìn)行考慮，如何把握這個(gè)度，需要每個(gè)設(shè)計(jì)師或產(chǎn)品經(jīng)理一起權(quán)衡。

此外，關(guān)于文案的情感化設(shè)計(jì)也要視情況而定，根據(jù)產(chǎn)品所屬領(lǐng)域、調(diào)性和目標(biāo)用戶人群的特性而定。

本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議