編輯導(dǎo)語：結(jié)合引導(dǎo)設(shè)計(jì)，產(chǎn)品可以讓用戶在初次使用的過程中快速建立對品牌的認(rèn)知，并上手功能操作，減少這一過程中的用戶流失。而B端產(chǎn)品相對復(fù)雜，若想讓用戶快速上手操作B端產(chǎn)品，其引導(dǎo)設(shè)計(jì)又該遵循哪些設(shè)計(jì)原則？本篇文章里，作者就B端產(chǎn)品的新手引導(dǎo)設(shè)計(jì)做了總結(jié)，一起來看一下。

本人很早之前曾經(jīng)做過網(wǎng)絡(luò)管理系統(tǒng)的交互設(shè)計(jì)，各種網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)、配置流程、業(yè)務(wù)邏輯，搞得真是頭大，最終陷入了業(yè)務(wù)的汪洋大海。

那么連設(shè)計(jì)師都頭疼的B端產(chǎn)品，如何去讓用戶快速上手呢？新手引導(dǎo)可以說是不可或缺的設(shè)計(jì)手段，今天我們就來挖掘一下其中的設(shè)計(jì)奧秘。

主要內(nèi)容包括：

• 新手引導(dǎo)的內(nèi)容；
• 柔性引導(dǎo)設(shè)計(jì)；
• 引導(dǎo)設(shè)計(jì)的原則。

一、新手引導(dǎo)的內(nèi)容

根據(jù)內(nèi)容的顆粒度不同，新手引導(dǎo)可以分為3個(gè)層次。

1. 平臺亮點(diǎn)

更多的是用在新用戶首次登錄或者大版本升級的場景中，主要目的是為了展示平臺的核心功能亮點(diǎn)，引導(dǎo)用戶快速建立對產(chǎn)品的品牌認(rèn)知。一般采用多頁面輪播彈窗的形式，內(nèi)容上更注重圖文結(jié)合，希望通過可視化設(shè)計(jì)將引導(dǎo)信息傳遞給用戶。

2. 功能曝光

重點(diǎn)功能上線后，為了彰顯功能亮點(diǎn)，也需要通過一定的曝光引導(dǎo)，快速吸引用戶了解使用。

為了更好地演示操作信息，新人引導(dǎo)不再局限于靜態(tài)圖片，有時(shí)會(huì)加入動(dòng)圖。例如Windows 11中的使用技巧，采用動(dòng)圖方式更直觀地展示出功能的操作過程，用戶可以不需要查看詳情就可以理解功能操作技巧。

3. 操作指引

為了讓用戶更清晰地了解功能變化，減少用戶自我探索的成本，讓用戶更快地上手操作。最常見的就是采用懸浮提示框就近引導(dǎo)的方式，內(nèi)容較多時(shí)則會(huì)分步展開。

操作指引建立在系統(tǒng)界面中，用戶可以更直觀、清晰地了解到功能的頁面位置，操作細(xì)節(jié)等信息。不過步驟式引導(dǎo)只能展示同一個(gè)頁面中功能，無法跨頁面引導(dǎo)。

二、柔性引導(dǎo)

對于復(fù)雜B端業(yè)務(wù)場景，以上常見的引導(dǎo)類型是無法滿足用戶需求的，例如云類產(chǎn)品。因此新人引導(dǎo)需要與業(yè)務(wù)強(qiáng)綁定，采用更加柔性的方式嵌入在頁面中，建立用戶的專屬學(xué)習(xí)空間，讓用戶逐步去探索學(xué)習(xí)相關(guān)的業(yè)務(wù)功能，從而真正地提升產(chǎn)品的用戶體驗(yàn)。百度云專門增加了新人指引視圖，方便用戶隨時(shí)查看。

騰訊云則在業(yè)務(wù)功能中融入了新手教學(xué)。

三、引導(dǎo)設(shè)計(jì)的原則

新人引導(dǎo)的核心目標(biāo)是為了展示核心功能或者新功能，降低用戶的認(rèn)知成本。因此設(shè)計(jì)上需要簡潔、高效，我們可以總結(jié)下交互和視覺層面的原則。

1. 交互層面

1）簡潔

B端產(chǎn)品業(yè)務(wù)復(fù)雜、門檻高，需要真正的幫助用戶，實(shí)現(xiàn)業(yè)務(wù)操作快速上手。但是并不意味著就是簡單的“手把手”的功能教學(xué)。太多的引導(dǎo)信息對用戶的耐心是極大的考驗(yàn)，因此需要將關(guān)鍵的核心內(nèi)容傳遞給用戶即可。

我曾經(jīng)看過一個(gè)產(chǎn)品的新人引導(dǎo)，竟然超過了20步，后來我實(shí)在不想繼續(xù)點(diǎn)下去了。保守估計(jì)會(huì)超過30步。過多的引導(dǎo)步驟用戶根本沒耐心看下去，設(shè)計(jì)的有效性會(huì)大打折扣。即使用戶看完了，也很難記住所有的內(nèi)容，引導(dǎo)的價(jià)值很難保證。

2）利益點(diǎn)

利益點(diǎn)通常出現(xiàn)在C端產(chǎn)品中，但是同樣適用于B端產(chǎn)品。

一個(gè)功能的發(fā)布必須能夠讓用戶感受到對自己的價(jià)值，所以新手引導(dǎo)在信息傳遞時(shí)，不僅需要告知用戶功能是什么，還要告知通過功能可以獲得什么。例如拼多多新手引導(dǎo)時(shí)，為了讓用戶更有意愿綁定第三方店鋪，文案針對性地突出了“大幅度提升店鋪流量”。

3）可控性

新人引導(dǎo)其實(shí)是平臺的主動(dòng)行為，有點(diǎn)類似于頁面彈窗，在一定程度上打斷了用戶的操作流程。因此需要賦予用戶自主控制的權(quán)利，隨時(shí)中斷引導(dǎo)過程。此外引導(dǎo)信息中還要提示用戶總的引導(dǎo)步數(shù)，方便用戶做出決策，并且允許前后自由切換，增加引導(dǎo)的靈活性。

通常新手引導(dǎo)又都是臨時(shí)性的，流程結(jié)束后就不再出現(xiàn)了。但是對于功能復(fù)雜的B端產(chǎn)品，新手引導(dǎo)中的功能并不是立刻能夠用到的。為了有效發(fā)揮新手引導(dǎo)的作用，新手引導(dǎo)需要有冗余機(jī)制，方便用戶后期再次學(xué)習(xí)查看。例如巨量引擎中在頁面中會(huì)常駐新手引導(dǎo)，便于用戶隨時(shí)查看。

而操作系統(tǒng)級別的新手引導(dǎo)，甚至?xí)为?dú)建立產(chǎn)品應(yīng)用，例如Windows的使用技巧、iOS的Tips App等。

4）層次性

上文提到新手引導(dǎo)對用戶行為有一定的干擾，用戶為了優(yōu)先處理自己的工作任務(wù)，可能會(huì)不查看引導(dǎo)內(nèi)容直接關(guān)閉了引導(dǎo)浮窗。所以為了更好地保證新手引導(dǎo)的有效性，在設(shè)計(jì)時(shí)需要考慮到引導(dǎo)的層次性。

例如在飛書客戶端用戶打開頁面時(shí)，并沒有直接強(qiáng)引導(dǎo)，只是在引導(dǎo)內(nèi)容處增加了動(dòng)效元素吸引用戶視線。當(dāng)用戶鼠標(biāo)移動(dòng)到熱區(qū)后，才會(huì)顯示引導(dǎo)內(nèi)容。這種引導(dǎo)方式，讓用戶從被動(dòng)接受轉(zhuǎn)變?yōu)橹鲃?dòng)查看，用戶的閱讀意愿更強(qiáng)，或許可以提高引導(dǎo)的有效性。

2. 視覺層面

B端產(chǎn)品通常是PC端產(chǎn)品，屏幕更大，頁面顯示內(nèi)容更多。新手引導(dǎo)需要更加注重有效的信息傳遞。

另外有別于C端產(chǎn)品的個(gè)性化設(shè)計(jì)風(fēng)格，B端產(chǎn)品的新手引導(dǎo)在設(shè)計(jì)風(fēng)格上更多的是一致性。

1）優(yōu)先的視覺層級

大部分新人引導(dǎo)都會(huì)優(yōu)先采用遮罩蒙層形式，讓用戶更好地聚焦引導(dǎo)信息，排除頁面元素對用戶的干擾。即使不采用遮罩的，也會(huì)通過強(qiáng)化引導(dǎo)氣泡背景色的形式，將信息從頁面中有效地突出顯示出來。

2）風(fēng)格一致性

通常情況下，B端產(chǎn)品偏向嚴(yán)謹(jǐn)務(wù)實(shí)的視覺風(fēng)格，過于個(gè)性化的設(shè)計(jì)反而會(huì)影響整體的一致性。

以上就是我對新手引導(dǎo)的思考和總結(jié)，歡迎評論區(qū)留言討論~

#專欄作家#

子牧先生。公眾號：子牧UXD（HelloDesign），人人都是產(chǎn)品經(jīng)理專欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，擅長體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

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