編輯導(dǎo)語：一些復(fù)雜的B端系統(tǒng)，在用戶用起來時(shí)會(huì)比較困難，總能聽到用戶說學(xué)不會(huì)，不會(huì)用，為了減低用戶的使用成本，搭建一個(gè)全局的幫助系統(tǒng)是很有必要，本文從三大幫助系統(tǒng)類型出發(fā)，進(jìn)行詳細(xì)拆解。

一些復(fù)雜的B端產(chǎn)品，因?yàn)槠涮厥獾臉I(yè)務(wù)屬性和復(fù)雜度操作使用上門檻不低，總是會(huì)聽到用戶反饋不會(huì)用、學(xué)不會(huì)、記不住。為了降低用戶使用成本，保證用戶在一個(gè)大型業(yè)務(wù)系統(tǒng)的可用性，引入一個(gè)在全局系統(tǒng)層面用戶幫助體系對(duì)于提升用戶體驗(yàn)是非常有必要的。

Jakob Nielsen于1994年提出的十大可用性原則中，其最后一條原則Help and documentation（幫助性指導(dǎo)原則）是搭建B端用戶幫助體系的核心準(zhǔn)則，在理想情況下，沒有幫助文檔就可以使用系統(tǒng)是最好的，但在某些情況下（尤其是B端系統(tǒng)），提供一些引導(dǎo)性的幫助其實(shí)是必要的。本文從三種 B 端幫助體系的三種類型主動(dòng)式幫助、被動(dòng)式幫助、自動(dòng)式幫助進(jìn)行詳細(xì)拆解說明。

一、主動(dòng)式幫助

什么是主動(dòng)式幫助呢？回歸到生活的場(chǎng)景中，進(jìn)入地鐵站的方向指示牌，馬路上的路標(biāo)，都是讓行人們可以根據(jù)指示找到想去的地方；剛剛參加工作，一般都會(huì)有前輩帶著你學(xué)習(xí)工作流程，進(jìn)行教學(xué)指導(dǎo)；機(jī)場(chǎng)和車站的展示大屏，告訴我們目前車次的檢票口和車輛狀況，這些都是我們生活中主動(dòng)幫助的例子。

沿用到互聯(lián)網(wǎng)產(chǎn)品中也是一樣的，同樣也是主動(dòng)幫助向用戶提供幫助，讓用戶盡快熟悉系統(tǒng)。

1. 在系統(tǒng)中的使用場(chǎng)景

對(duì)于第一次接觸系統(tǒng)或者第一次接觸系統(tǒng)中某個(gè)模塊的新用戶，剛開始使用產(chǎn)品的時(shí)候，需要快速熟悉并嘗試系統(tǒng)中的某一功能，這個(gè)時(shí)候系統(tǒng)提供一些主動(dòng)的功能介紹或者操作引導(dǎo)可以讓用戶快速了解。

下面是一款室內(nèi)裝修設(shè)計(jì)師畫圖使用的系統(tǒng)，屬于操作復(fù)雜的工具類型，對(duì)于新用戶來說在第一次進(jìn)入系統(tǒng)主動(dòng)出現(xiàn)一個(gè)彈窗介紹完成渲染出圖的步驟，可以讓用戶快速學(xué)習(xí)到什么使用這款產(chǎn)品做一個(gè)設(shè)計(jì)效果圖，也讓用戶清楚了解每個(gè)步驟之間的先后順序。

對(duì)于老用戶當(dāng)系統(tǒng)新上線了功能需要告知哪里更新了，更新了什么內(nèi)容?；ò旮铝它c(diǎn)擊頭像下拉后展示更多信息的功能，在改版后第一次進(jìn)入系統(tǒng)，出現(xiàn)了提示引導(dǎo)，引導(dǎo)用戶快速點(diǎn)擊進(jìn)行體驗(yàn)，當(dāng)然也可以選擇關(guān)閉。

使用主動(dòng)幫助有 2 個(gè)核心場(chǎng)景，「對(duì)新用戶幫助教學(xué)」和「新功能上線后對(duì)老用戶的提示」； 總結(jié) 5 種交互形式：引導(dǎo)頁、模態(tài)彈窗、向?qū)问健⒐ぞ咛崾?、文字提示，需要設(shè)計(jì)師根據(jù)不同的場(chǎng)景，去適配不同的引導(dǎo)方式。

2. 引導(dǎo)頁

在用戶首次進(jìn)入產(chǎn)品或者產(chǎn)品中某個(gè)獨(dú)立功能的時(shí)候，將產(chǎn)品最核心的功能加入一些品牌基調(diào)展示給用戶，可以加入一些插畫或者視頻吸引用戶，另外需要注意在文字部分不要長篇大論，提煉最核心的內(nèi)容傳達(dá)給用戶。

3. 模態(tài)彈窗

讓用戶聚焦當(dāng)前內(nèi)容，在用戶第一次打開某個(gè)特定頁面時(shí)出現(xiàn)，缺點(diǎn)是用戶容易忽略或者無視，直接關(guān)掉，引導(dǎo)的效果差一點(diǎn)，所以彈窗教程建議保留二次進(jìn)入的入口，當(dāng)用戶需要的時(shí)候可以順利找到。應(yīng)用場(chǎng)景有「版本更新提示」「新功能介紹」「常規(guī)通告」。

設(shè)計(jì)形式上可以在文本的基礎(chǔ)上加入圖片、插畫、動(dòng)畫、視頻講解和實(shí)例演示等視覺表現(xiàn)形式，不管用什么形式，其目的都是幫助用戶快速理解系統(tǒng)的功能特性。也可以使用一些視覺元素烘托氛圍，并在文案上注入情緒化的表達(dá)，從而提升用戶的關(guān)注度。

承載內(nèi)容上可以師簡單業(yè)務(wù)邏輯的功能說明或單頁面功能，采用讓用戶一次性進(jìn)行學(xué)習(xí)。復(fù)雜業(yè)務(wù)邏輯的功能說明或多頁面功能聯(lián)動(dòng)，通常會(huì)進(jìn)行分步講解，通過循序漸進(jìn)的形式將所有知識(shí)點(diǎn)逐漸披露出來，讓用戶有充裕時(shí)間進(jìn)行信息的接收和理解。

4. 向?qū)б龑?dǎo)

在用戶首次進(jìn)入相關(guān)頁面，且無操作時(shí)出現(xiàn)。有明確的指向性，提前告知用戶具體功能的使用場(chǎng)景，因此它會(huì)具體指向界面中的某些特定區(qū)域，同時(shí)會(huì)隨著具體操作的具體位置發(fā)生變化，讓用戶實(shí)際感知到功能的整個(gè)運(yùn)轉(zhuǎn)邏輯和流程。針對(duì)局部功能升級(jí)的提示說明，一般與元素綁定關(guān)系較強(qiáng)，可讓用戶直觀了解關(guān)注點(diǎn)，提升功能觸達(dá)率。

設(shè)計(jì)組成元素蒙層（可選）+ 文字 + 插圖/GIF（可選）。向?qū)е饕獓@某個(gè)操作的引導(dǎo)說明，與元素綁定關(guān)系較強(qiáng)，核心功能和操作在視覺上突出顯示。

為了讓用戶高效獲取信息，一次僅顯示一條。如果需要用戶聚焦了解功能或說明，不被頁面中其他元素干擾使用蒙層，注意蒙層的透明度要比彈窗蒙層淺，向?qū)У拿蓪有枰脩艨梢钥吹皆卦陧撁嬷械奈恢?。具體使用過程中有三種交互方式隨著提示強(qiáng)度由強(qiáng)到弱依次是：「分布引導(dǎo)」「氣泡提示」「閃點(diǎn)提示」

分步式引導(dǎo)（重）：常用于頁面多個(gè)功能升級(jí)的引導(dǎo)組。當(dāng)頁面有多個(gè)升級(jí)點(diǎn)，直接平鋪會(huì)讓頁面臃腫不聚焦。通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。

氣泡式（輕）：相對(duì)輕量的引導(dǎo)，有足夠的提示性但不影響其他功能操作。

閃點(diǎn)提示（弱）：微輔助型提示，常與氣泡引導(dǎo)配合使用。在需要關(guān)注的地方閃爍，點(diǎn)擊閃點(diǎn)后喚出關(guān)聯(lián)氣泡提示。不對(duì)用戶造成視覺干擾，又能引起一定的關(guān)注。

5. 文字提示

文字提示作為最直觀的信息展示，一般會(huì)采用直接平鋪的展示方式，針對(duì)一些功能較多邏輯較為復(fù)雜的頁面，將對(duì)用戶有幫助的信息直接放在頁面上從而指導(dǎo)用戶的行為不失為一種簡單粗暴的設(shè)計(jì)方法。對(duì)重點(diǎn)或復(fù)雜功能提供直觀描述或建議。

帶有引導(dǎo)性的文案處理，會(huì)促進(jìn)用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。關(guān)于文案設(shè)計(jì)的詳細(xì)延展查看https://www.zcool.com.cn/work/ZNjA3NzU1ODA=.html這篇文章非常詳細(xì)的拆解了文案設(shè)計(jì)原則以及使用場(chǎng)景。具體的使用場(chǎng)景有：「頁面功能輔助說明」「占位提示」。

6. 工具提示

工具提示比文字直接展示要更簡潔降噪，沒有直接進(jìn)行展示，在用戶需要的時(shí)候通過懸浮或者點(diǎn)擊元素以氣泡的形式呼出，Material Design在對(duì)工具提示（Tooltip）的官方定義是這樣的：“When activated, tooltips display a text label identifying an element, such as a description of its function.”工具提示僅僅起到提示的作用，它會(huì)出現(xiàn)在當(dāng)用戶激活某一控件的時(shí)候，針對(duì)某一特定的元素通過簡要的文字來闡述其功能特性。

在設(shè)計(jì)形式上有短暫性、匹配性、簡明性的特點(diǎn)：短暫性指工具提示出現(xiàn)和消失的時(shí)機(jī)需要恰當(dāng)和短暫；匹配性指工具提示需要出現(xiàn)在與之關(guān)聯(lián)的元素附近；簡明性則是對(duì)工具提示承載的文本內(nèi)容提出了要求，要盡可能具備簡短性和描述性。

二、被動(dòng)式幫助

被動(dòng)引導(dǎo)映射到我們生活中的場(chǎng)景下可以看作是手機(jī)地圖導(dǎo)航軟件，當(dāng)你不知道該怎么走或者迷路的時(shí)候才會(huì)主動(dòng)去打開地圖軟件進(jìn)行導(dǎo)航。

另一個(gè)生活中的場(chǎng)景是產(chǎn)品說明書，在使用前或者再遇到不會(huì)用的功能的時(shí)候才會(huì)去查閱說明書，無論是導(dǎo)航軟件還是說明書它不會(huì)自動(dòng)把全部內(nèi)容展示在你眼前，都需要你去進(jìn)行查找。沿用到互聯(lián)網(wǎng)產(chǎn)品中是指用戶遇到問題的時(shí)候系統(tǒng)能夠提供一些幫助，去指導(dǎo)用戶接下來怎么做。

1. 在系統(tǒng)中的使用場(chǎng)景

被動(dòng)式幫助一般會(huì)依托于主動(dòng)式幫助，產(chǎn)品發(fā)展的初期階段，主動(dòng)式幫助是必須的，當(dāng)產(chǎn)品發(fā)展到一定規(guī)模具備一定成熟度后，被動(dòng)式幫助的引入就可以極大的提高整體產(chǎn)品的使用體驗(yàn)。常用的被動(dòng)引導(dǎo)有：幫助中心/幫助文檔、客服支持、全局常駐性功能。

2. 全局提示

重點(diǎn)信息的匯總或提示。此類提示完美融合于頁面，醒目且對(duì)操作無干擾，用戶可根據(jù)披露內(nèi)容判斷是否處理。常用的交互形式是全局提示、徽標(biāo)，向用戶傳達(dá)信息的變化并提供快速觸達(dá)的能力，無形中提升用戶響應(yīng)效率。

全局提示：不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當(dāng)前操作，又足夠明顯，一般需手動(dòng)關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍(lán)色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯(cuò)誤或異常等情況。

徽標(biāo)：形態(tài)各異的小紅點(diǎn)。常出現(xiàn)在圖標(biāo)、按鈕右上角的紅色圓點(diǎn)、數(shù)字或文字，簡單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準(zhǔn)傳達(dá)提示意圖。使用時(shí)注意無數(shù)字與有數(shù)字的應(yīng)用場(chǎng)景。有數(shù)字的徽標(biāo)給用戶帶來的心理壓力會(huì)更大，也會(huì)更吸引用戶注意力，同時(shí)需注意數(shù)字長度控制。

3. 客服中心

客服中心是B端產(chǎn)品的服務(wù)團(tuán)隊(duì)和客戶建立聯(lián)系的平臺(tái)，目前大部分客服采用智能客服+人工客服的組合，通過智能客服先過濾已經(jīng)在幫助中心的問題，可以解決 80%以上的共性簡單的問題，剩下沒有辦法通過智能客服解決的問題會(huì)轉(zhuǎn)接到人工客服。

在設(shè)計(jì)上通常懸浮在右下角以入口或者懸浮窗口的形式，可以加入品牌形象IP、情感化來提升存在感，吸引用戶關(guān)注拉近平臺(tái)與用戶的距離。

4. 幫助中心

幫助中心是全平臺(tái)信息文檔的匯總，提供一個(gè)快捷入口，幫助用戶了解他想了解的問題，在幫助文檔中需要注意方便用戶直接進(jìn)行搜索。文檔內(nèi)容要針對(duì)用戶的核心任務(wù)，描述要盡量步驟化和流程化，另外由于大部分用戶實(shí)際上都不喜歡閱讀大篇幅文字，如何在文檔中直接傳達(dá)重要的信息也很重要。

在設(shè)計(jì)上為保證用戶高效獲取信息，需突出內(nèi)容本身，不要度裝飾?？蚣茉O(shè)計(jì)清晰將頁面氛圍導(dǎo)航區(qū)和內(nèi)容展示區(qū)，讓用戶通過導(dǎo)航快速定位到想要查找的內(nèi)容。一般幫助中心會(huì)由三部分組成：產(chǎn)品介紹，產(chǎn)品入門和使用，常見問題的匯總。

三、自助式幫助

自助式幫助就就像我們?nèi)コ宰灾?，不用自己買菜、處理食材、烹飪，飯店直接把我們可能會(huì)喜歡的食物準(zhǔn)備好了，直接來選擇自己喜歡的食物就可以了。在系統(tǒng)中也是一樣提前預(yù)判用戶的預(yù)期，直接為用戶提供建議和幫助，或者直接幫用戶自動(dòng)執(zhí)行一些任務(wù)，減少用戶的決策壓力，不過前提是需要產(chǎn)品設(shè)計(jì)師考慮非常周全并配合大量數(shù)據(jù)支撐。

1. 在系統(tǒng)中的使用場(chǎng)景

針對(duì)一些用戶操作風(fēng)險(xiǎn)較小且系統(tǒng)能力能夠支持的場(chǎng)景，可以直接交付系統(tǒng)來自動(dòng)完成。一些用戶操作風(fēng)險(xiǎn)較大且系統(tǒng)能力也能夠勉強(qiáng)支持的場(chǎng)景，可以提供部分選項(xiàng)供用戶進(jìn)行選擇，同時(shí)提供必要的容錯(cuò)能力。常用的自助式幫助引導(dǎo)有智能推薦、錯(cuò)誤校驗(yàn)。

2. 智能推薦

系統(tǒng)自動(dòng)提供內(nèi)容供用戶進(jìn)行選擇，幫助用戶做出決策，不過這種設(shè)計(jì)的前提是平臺(tái)有足夠的數(shù)據(jù)積累，系統(tǒng)通過字段自動(dòng)為用戶預(yù)置內(nèi)容。

3. 模版設(shè)計(jì)

用戶新建每一個(gè)內(nèi)容都需要從頭到尾重新填寫一遍內(nèi)容，成本極高，可以把高頻的類型變?yōu)槟０孢M(jìn)行選擇。

4. 錯(cuò)誤校驗(yàn)

當(dāng)操作出現(xiàn)輸入錯(cuò)誤時(shí)，為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的修改內(nèi)容。設(shè)計(jì)的時(shí)候需要注意反饋的時(shí)機(jī)做到及時(shí)反饋，將發(fā)生了什么，接下來怎么調(diào)整告知用戶。常見的有以下類型：toast、表單錯(cuò)誤校驗(yàn)、模態(tài)彈窗、根據(jù)不同的場(chǎng)景適配不同的交互方式。

最后

任何的引導(dǎo)都要注意任何事情都是過尤不及，適當(dāng)?shù)慕o用戶提供幫助當(dāng)然是好的，但是在用戶不需的時(shí)候過多的進(jìn)行引導(dǎo)和幫助反而會(huì)適得其反，我們?cè)谑褂靡龑?dǎo)和幫助的時(shí)候一定要合理的進(jìn)行判斷，避免適得其反。

本文由@郭大毛毛設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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