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

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

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

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

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

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

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

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

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

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

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

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

1. 彈窗指引

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

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

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

優(yōu)秀案例：

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

2. 蒙層指引

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

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

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

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

3. 氣泡指引

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

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

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

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

優(yōu)秀案例：

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

4. 浮層指引

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

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

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

優(yōu)秀案例：

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

5. 流程面板

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

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

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

優(yōu)秀案例：

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

6. 向?qū)ЫM件

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

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

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

7. 空態(tài)指引

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

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

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

優(yōu)秀案例：

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

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

加載態(tài)也是系統(tǒng)必備的狀態(tài)之一，但在這狀態(tài)下做指引比較少見(jiàn)，在游戲或大型產(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á)到指引用戶(hù)的目的。

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

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

優(yōu)秀案例：

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

10. 動(dòng)畫(huà)

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

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

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

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

指引模式的使用場(chǎng)景

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

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

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

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

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

一些思考點(diǎn)

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

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

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

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

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

你會(huì)發(fā)現(xiàn)這個(gè)邏輯非常合理：正常情況的音量調(diào)幅不會(huì)過(guò)大→突然調(diào)大音量是異常動(dòng)作→猜測(cè)是因?yàn)橛脩?hù)不能聽(tīng)見(jiàn)聲音→原因可能是靜音或連上了耳機(jī)→提出建議。這個(gè)設(shè)計(jì)背后其實(shí)是對(duì)用戶(hù)場(chǎng)景的合理推敲，不僅不會(huì)打擾用戶(hù)更能讓用戶(hù)感到貼心。

3. 允許用戶(hù)隨時(shí)跳過(guò)

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

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

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

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

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

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

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

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

6. 給予明顯的正向反饋

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

最后

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

thanks~

#專(zhuān)欄作家#

Genrry，公眾號(hào)：設(shè)計(jì)師阿余，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。關(guān)注用戶(hù)體驗(yàn)，擅長(zhǎng)多端交互設(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)載

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