指引并不是在產(chǎn)品設(shè)計(jì)完之后才打上去的“補(bǔ)丁”，而是在開始設(shè)計(jì)的時(shí)候就需要思考的事情。在設(shè)計(jì)核心功能的時(shí)候，不要忘了去消滅用戶觸達(dá)核心功能前的層層障礙。

“ 無論你使用一樣工具的時(shí)間有多長，無盡的升級(jí)都會(huì)把你變成一個(gè)菜鳥——也就是說，你會(huì)變成笨手笨腳的新用戶。在這個(gè)“形成”的時(shí)代里，所有人都會(huì)成為菜鳥?！?/p>

以上這句話摘自凱文·凱利的《必然》。這看似危言聳聽，作為從業(yè)者的我們可能不以為然。但事實(shí)上，新產(chǎn)品過高的學(xué)習(xí)成本正一次次地將新手拒之門外。更可怕的是，我們并沒有拿它當(dāng)回事。

優(yōu)秀的指引帶來的極致體驗(yàn)

故事要從一個(gè)NS游戲說起。當(dāng)時(shí)正在玩《超級(jí)馬里奧：奧德賽》的某個(gè)關(guān)卡，我需要走過一條長長的樓梯去打大龍，在樓梯上面插滿著閃閃發(fā)光的鑰匙。出于好奇，我把鑰匙拔了出來，發(fā)現(xiàn)拔鑰匙會(huì)得到金幣獎(jiǎng)勵(lì)，當(dāng)時(shí)只覺得是一個(gè)游戲的小套路沒有在意。

到了打大龍的時(shí)候，我被它巨大的形態(tài)給整懵了，一個(gè)小小的馬里奧怎么能拿下這條刀槍不入的大龍呢！？

突然，我發(fā)現(xiàn)了它的頭上插著三把鑰匙。這讓我靈光一閃意會(huì)到了打大龍的秘訣：先把鑰匙拔出來，才能對(duì)龍?jiān)斐蓚Α?/p>

鑰匙，其實(shí)是一個(gè)指引。假如在樓梯上沒有鑰匙，假如鑰匙不會(huì)發(fā)光，假如拔出的鑰匙沒有獎(jiǎng)勵(lì)，我就不會(huì)嘗試去把鑰匙，也不能意識(shí)拔鑰匙是戰(zhàn)勝大龍的關(guān)鍵。假如，想象一下，在我打大龍的時(shí)候直接在屏幕上提示“需要拔鑰匙才能戰(zhàn)勝大龍”，那么這個(gè)游戲是怎樣的索然無味。

“鑰匙”驚艷的地方在于：讓玩家在這無意間學(xué)習(xí)了游戲機(jī)制，指引和游戲融為一體。一個(gè)好的指引，能讓用戶感知不到它的存在，它不言自明，讓用戶在無意識(shí)的體驗(yàn)瞬間中習(xí)得所需。

界面設(shè)計(jì)中的指引模式

在人與系統(tǒng)的交互過程中，信息傳遞是會(huì)損失的。用戶不一定能接收或感知到系統(tǒng)的全部信息，而這可導(dǎo)致系統(tǒng)無法被正常使用。而界面中的指引模式，就是為了避免用戶錯(cuò)失這些的信息。

與其他界面模式一樣，指引模式也著有不少約定俗成的樣式。當(dāng)然這些模式無法達(dá)到上述例子的神奇效果，雖然不夠優(yōu)雅，但至少也能解決問題。下面來逐一梳理一下。

1. 彈窗指引

彈窗指引即以彈窗的形式將指引信息呈現(xiàn)在用戶眼前。

優(yōu)缺點(diǎn)/特性：

1. 彈窗指引可以承載各種各樣的內(nèi)容：文本、圖片、動(dòng)圖、插畫和視頻等，呈現(xiàn)巨大的信息量。
2. 由于在彈窗模式下用戶不能進(jìn)行其他操作，所以對(duì)任務(wù)的打斷性很強(qiáng)。
3. 占用著較多的界面空間和占據(jù)著視覺中心區(qū)域，有很強(qiáng)的吸引性，但同樣也可能打擾到用戶。

優(yōu)秀案例：

微軟Edge瀏覽器的做法比較值得被借鑒：在版本更新后，會(huì)有彈窗告知用戶新版本的特性——可以切換主題。同時(shí)可直接讓用戶切換選擇主題，所見即所得，在指引的過程中即完成了配置。

2. 蒙層指引

蒙層指引指在用戶界面上覆蓋一層黑色的透明層，然后在透明層上做一些信息的解釋。同樣地，用戶不能在這狀態(tài)下做其他操作。蒙層所指引的信息必須跟當(dāng)前界面相關(guān)，所以才會(huì)用半透明的方式呈現(xiàn)信息。

優(yōu)缺點(diǎn)/特性：

個(gè)人對(duì)這種方式?jīng)]有什么好感，在我看來它是一種比較雞肋的指引方式。

1. 如果一個(gè)蒙層上有太多信息，會(huì)導(dǎo)致界面非?；靵y。信息的承載量有限。
2. 如果一個(gè)蒙層只展現(xiàn)一個(gè)信息，那么就必然會(huì)有蒙層接連地出現(xiàn)。打斷感和干擾性太強(qiáng)，讓人十分抓狂。
3. 如果非要使用蒙層，我覺得需符合以下條件之一：A.信息可用圖像化表達(dá)而非文字描述。B.被指引的信息是用戶難以意會(huì)的交互動(dòng)作（長按、拖拽之類）。C.假如用戶沒有學(xué)會(huì)就無法正常使用系統(tǒng)。

3. 氣泡指引

氣泡是一個(gè)流行的指引方式。它以氣泡的方式呈現(xiàn)信息，并指向著被指引的界面元素。

優(yōu)缺點(diǎn)/特性：

相對(duì)于蒙層，我更傾向于氣泡指引。

1. 跟彈窗和蒙層不同，氣泡指引允許用戶執(zhí)行其他操作，打斷性比較弱。
2. 因?yàn)檎加玫拿娣e不大，所以也不會(huì)過于吸引用戶注意。
3. 但承載的信息量有限，信息類型單一，通常只能是文本類型。
4. 有些氣泡提示可以結(jié)合品牌IP，以一種更像“對(duì)話”的方式呈現(xiàn)在界面上。

優(yōu)秀案例：

國外B端產(chǎn)品Odoo的氣泡指引做得非常出色。在一些需要指引的地方，浮動(dòng)著一個(gè)“小水滴”的標(biāo)記，這能很好地吸引用戶，但又不會(huì)有很強(qiáng)的干擾。當(dāng)鼠標(biāo)懸停在“水滴”上時(shí)，會(huì)展開變成一個(gè)帶有解釋內(nèi)容的氣泡。當(dāng)用戶完成指引的步驟后，水滴就會(huì)消失。過程安靜自然，完全沒有系統(tǒng)把我當(dāng)傻瓜的感覺。

4. 浮層指引

浮層指引更像是氣泡指引的一種獨(dú)特呈現(xiàn)方式。

優(yōu)缺點(diǎn)/特性：

1. 繼承了氣泡的弱打斷、弱干擾等特性。
2. 可以承載更多的信息量，以及除文本外的更多信息類型。
3. 浮層可帶有操作按鈕，而且所指引的功能可以是非當(dāng)前頁的功能，這可以讓用戶直達(dá)功能。

優(yōu)秀案例：

在蝦米APP的播放器中（上圖右），連續(xù)切換5首歌時(shí)就會(huì)出現(xiàn)浮層指引用戶收聽其他推薦歌曲。值得借鑒的是，蝦米考慮到了用戶更細(xì)致的行為并做了自己的預(yù)判，讓指引更適時(shí)地出現(xiàn)。

5. 流程面板

流程面板更多出現(xiàn)在復(fù)雜的B端系統(tǒng)中。在面板上描繪著用戶需要操作的流程，并表明一二三步該做什么，還會(huì)有一些按鈕或鏈接，讓用戶直達(dá)功能。用戶只要一步步按流程操作就可以順利讓系統(tǒng)跑起來。

優(yōu)缺點(diǎn)/特性：

1. 可以應(yīng)對(duì)復(fù)雜且巨大信息量的場景。
2. 可以讓用戶更容易地理解系統(tǒng)架構(gòu)和關(guān)鍵任務(wù)。
3. 但占用太多的界面空間，當(dāng)用戶熟悉系統(tǒng)時(shí)或者對(duì)于老手用戶是個(gè)雞肋。

優(yōu)秀案例：

國外財(cái)務(wù)處理系統(tǒng)Intuit Quickbooks的流程面板有著精美的插圖和流暢的動(dòng)效，在用戶完成每個(gè)流程節(jié)點(diǎn)時(shí)都有明顯的正向反饋。而且允許用戶隱藏面板（左紅框），隱藏之后會(huì)有一個(gè)小小的進(jìn)度條提示（右紅框），并且能讓用戶輕易地找回來。

6. 向?qū)ЫM件

向?qū)ЫM件可以算是流程面板的簡化版，在很多C端系統(tǒng)也可以看到它。通常在一些操作流程較長任務(wù)中使用到，若同時(shí)此任務(wù)出現(xiàn)頻率很低，那么向?qū)ЫM件就尤為重要。

優(yōu)缺點(diǎn)/特性：

1. 能讓用戶有全局概覽和心理預(yù)期，不會(huì)迷失在一個(gè)長長的任務(wù)鏈條中。
2. 能把任務(wù)拆分，簡化每個(gè)任務(wù)難度。
3. 但值得注意的是，向?qū)ǔＶ皇且环N信息的展示，不具有可交互的操作。

7. 空態(tài)指引

空白狀態(tài)是系統(tǒng)必備的狀態(tài)之一，是指當(dāng)前情況下系統(tǒng)無數(shù)據(jù)的狀態(tài)?？諔B(tài)指引是指在空白狀態(tài)下給予一些操作引導(dǎo)，一方面可避免出現(xiàn)一個(gè)尷尬的空白頁面，另一方面可讓用戶直觀地知道下一步應(yīng)該干嘛。

優(yōu)缺點(diǎn)/特性：

1. 空白的頁面留出了大量的空間，所以可讓空態(tài)指引玩出各種花樣。
2. 但用戶未必會(huì)細(xì)心閱讀空態(tài)下的內(nèi)容，而是選擇自己摸索。
3. 空態(tài)指引的適用場景比較局限，一旦系統(tǒng)有了數(shù)據(jù)，就不能作其他指引。

優(yōu)秀案例：

一款筆記工具Notion上的指引比較有意思。它在指引上直接用了筆記的方式，上面列了一條條ToDoList，用戶通過ToDoList就可學(xué)習(xí)工具上的主要功能，而ToDoList本身也是此工具的功能之一。（這種做法感覺有點(diǎn)接近那個(gè)馬里奧游戲了呢?。?/p>

8. 加載態(tài)指引

加載態(tài)也是系統(tǒng)必備的狀態(tài)之一，但在這狀態(tài)下做指引比較少見，在游戲或大型產(chǎn)品上出現(xiàn)較多。因?yàn)榧虞d時(shí)間通常很短，根本不能閱讀完里面的內(nèi)容。

優(yōu)秀案例：

一個(gè)熟悉的例子就是王者榮耀在加載的時(shí)候，有一小段文字提示游戲的小技巧。

9. 控件狀態(tài)切換

控件可以在某些條件下切換自身狀態(tài)，新的狀態(tài)表現(xiàn)出更強(qiáng)引導(dǎo)性，從而達(dá)到指引用戶的目的。

優(yōu)缺點(diǎn)/特性：

1. 控件狀態(tài)切換是一種比氣泡更為優(yōu)雅的指引方式，因?yàn)樗麤]有額外增加新的界面元素。
2. 但它的適用場景就更為苛刻，并不是所有控件都可以這樣搞。

優(yōu)秀案例：

卡噗APP的編輯按鈕有兩種狀態(tài)（上圖）：當(dāng)剛切入頁簽時(shí)為展開態(tài)，從而解釋按鈕的功能并吸引點(diǎn)擊；當(dāng)上滑屏幕時(shí)，按鈕收起為普通狀態(tài)，可以避免內(nèi)容遮擋。

10. 動(dòng)畫

優(yōu)秀的動(dòng)畫能讓產(chǎn)品品質(zhì)提升不少。例如：網(wǎng)易云音樂7.0進(jìn)入后，會(huì)有動(dòng)效告知用戶界面布局的變化，同時(shí)解釋了橫向滑動(dòng)查看更多的交互，相對(duì)于以上的各種引導(dǎo)模式都優(yōu)雅一大截。

11. 預(yù)置任務(wù)

預(yù)置任務(wù)是游戲里特有的模式，它強(qiáng)制性地給用戶安排了一個(gè)極為簡單的任務(wù)或關(guān)卡，只有通關(guān)了才可以真正地展開游戲。當(dāng)然，通關(guān)了也基本會(huì)了解游戲機(jī)制。之所以游戲敢這么搞，是因?yàn)橛螒蛑型婕业娜萑潭缺容^高，其次是雖然游戲系統(tǒng)復(fù)雜，但往往可以抽象出最簡單的邏輯。

這方式在產(chǎn)品中很難運(yùn)用，但不妨可以作為開拓腦洞的思路。

指引模式的使用場景

一般來說需要用到引導(dǎo)模式的場景會(huì)有一下幾種：

• 上新說明：當(dāng)有新的內(nèi)容或功能上線，需要讓用戶知道時(shí)。
• 信息告知：當(dāng)需要告知用戶一些隱藏功能或亮點(diǎn)功能時(shí)。
• 行為誘導(dǎo)：當(dāng)需要刺激用戶執(zhí)行某個(gè)操作時(shí)。
• 障礙輔助：當(dāng)用戶可能無法進(jìn)行下一步時(shí)。而系統(tǒng)剛啟用時(shí)的新手指引就是一個(gè)典型場景。
• 概覽提供：當(dāng)需要讓用戶全局了解某個(gè)對(duì)象時(shí)。

場景一到三，用戶的心理模式是一致的：如果用戶不知道被指引的信息，大概率不妨礙正常使用。用戶對(duì)這些信息的需求不高，更多的是產(chǎn)品業(yè)務(wù)希望能讓用戶看到。此場景下，如果用戶知道這些功能后能提升他的使用體驗(yàn)，那么對(duì)指引的容忍度會(huì)較高。如果接連的指引沒有讓他感知價(jià)值，就會(huì)造成反感。

場景四和五反而更需要我們關(guān)注。因?yàn)槲覀兒茈y預(yù)判用戶什么時(shí)候會(huì)無法進(jìn)行下一步，這需要我們更多地調(diào)研和用戶測(cè)試去挖掘用戶行為和痛點(diǎn)。而且，此場景下的指引模式需要更容易發(fā)現(xiàn)。

所以，不同場景下應(yīng)有不同的指引模式，而每個(gè)場景下可以使用的引導(dǎo)模式如下圖?？盏母褡颖硎緯簳r(shí)沒有找到實(shí)例，說不定用好了是一個(gè)創(chuàng)新方式。

一些思考點(diǎn)

1. 減少不必要的打擾，使用合適的信息載體

我前一篇文章也說過，盡管是一個(gè)很顯眼的東西，只要它頻繁地打擾用戶，用戶就會(huì)將其視而不見。所以最好的策略應(yīng)該是讓重要但強(qiáng)打擾的模式盡量低頻出現(xiàn)。另外，指引的作用就是傳遞信息，能傳達(dá)多少信息量也是一個(gè)重要維度。所以可從干擾度和信息量兩個(gè)維度來選擇合適的引導(dǎo)模式。

2. 適時(shí)地出現(xiàn)，合理地消失

出現(xiàn)的邏輯有很多種：首次打開時(shí)出現(xiàn)、基于某個(gè)動(dòng)作觸發(fā)、基于某個(gè)狀態(tài)觸發(fā)、一直顯示、用戶主動(dòng)打開等等。消失的邏輯也有很多：持續(xù)某個(gè)時(shí)長后消失、用戶執(zhí)行操作后消失、用戶主動(dòng)關(guān)閉等等。還有其他邏輯：是否允許再現(xiàn)、超過幾次后不再現(xiàn)等等。無論如何，在設(shè)計(jì)的時(shí)候都應(yīng)該結(jié)合用戶場景的上下文考慮。

舉個(gè)例子，在游戲《光·遇》中，當(dāng)玩家突然地調(diào)大音量時(shí)，會(huì)出現(xiàn)指引告訴玩家可能手機(jī)調(diào)了靜音，幾秒過后或調(diào)小音量時(shí)，指引消失。

你會(huì)發(fā)現(xiàn)這個(gè)邏輯非常合理：正常情況的音量調(diào)幅不會(huì)過大→突然調(diào)大音量是異常動(dòng)作→猜測(cè)是因?yàn)橛脩舨荒苈犚娐曇簟蚩赡苁庆o音或連上了耳機(jī)→提出建議。這個(gè)設(shè)計(jì)背后其實(shí)是對(duì)用戶場景的合理推敲，不僅不會(huì)打擾用戶更能讓用戶感到貼心。

3. 允許用戶隨時(shí)跳過

“用戶經(jīng)常會(huì)在使用功能的時(shí)候發(fā)生誤操作，這時(shí)需要一個(gè)非常明確的“緊急出口”來幫助他們從當(dāng)時(shí)的情境中恢復(fù)過來?！?/p>

這是尼爾森十大可用性原則之一，用戶可控原則。同樣地，指引模式的突然出現(xiàn)其實(shí)是用戶沒有預(yù)期的情境，在這種狀態(tài)下需要允許用戶隨時(shí)跳過或取消指引。特別是，那種會(huì)接二連三出現(xiàn)的或者持續(xù)時(shí)間比較久的指引，如果沒有一個(gè)“緊急出口”，用戶可能會(huì)因此抓狂。

4. 保持風(fēng)格的一致性

努力回想一下，我們?cè)谙到y(tǒng)中遇到的彈出層有哪一些？

一些選擇浮層、一些反饋的彈窗、一些錄入的表單，還有今天介紹的指引……我們的用戶已經(jīng)需要辨別這么多東西，如果還要他們?nèi)フJ(rèn)知各種風(fēng)格迥異的指引模式，那是怎樣的一場災(zāi)難？

保持一致，是讓他們最低限度地減少認(rèn)知負(fù)擔(dān)。

5. 精煉的文案，更可視化地表達(dá)

用戶閱讀指引的時(shí)間非常短暫，所以文案必須精煉簡潔。最好使用插圖和動(dòng)效等輔助，將信息更可視化地表達(dá)出來。避免在用戶的主任務(wù)上打斷太久。

6. 給予明顯的正向反饋

指引用戶完成某個(gè)任務(wù)階段時(shí)，給予一些積極的反饋能夠建立信心，從而更好地執(zhí)行下一任務(wù)。這個(gè)做法在游戲中特別常見，例如，完成后會(huì)有等級(jí)提升積分獎(jiǎng)勵(lì)等等。為用戶設(shè)置符合其水平的任務(wù)，并給予正向反饋幫助他成長，能更容易形成心流效應(yīng)。

最后

指引并不是在產(chǎn)品設(shè)計(jì)完之后才打上去的“補(bǔ)丁”，而是在開始設(shè)計(jì)的時(shí)候就需要思考的事情。在設(shè)計(jì)核心功能的時(shí)候，不要忘了去消滅用戶觸達(dá)核心功能前的層層障礙。

thanks~

#專欄作家#

Genrry，公眾號(hào)：設(shè)計(jì)師阿余，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注用戶體驗(yàn)，擅長多端交互設(shè)計(jì)、界面設(shè)計(jì)。曾負(fù)責(zé)大型B端產(chǎn)品及VR游戲產(chǎn)品體驗(yàn)設(shè)計(jì)，制定設(shè)計(jì)規(guī)范，打磨細(xì)節(jié)體驗(yàn)，探索創(chuàng)新交互體驗(yàn)。

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

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