用戶對產(chǎn)品的應(yīng)用周期經(jīng)歷前、中、后三個階段，每個階段的設(shè)計目標都各不相同：操作前注重提升用戶的全局認知，深化理解，助力精準觸達；操作中助力提效，讓用戶知道做什么，怎么做；操作后明確反饋，幫助用戶明確結(jié)果。

操作前：引導(dǎo)用戶深化理解，提升全局認知

用戶有新老之分，對系統(tǒng)的熟悉程度及應(yīng)用訴求不同。因此針對不同用戶各階段的使用訴求進行場景化的拆分，提供差異化幫助。

幫助用戶深入自主的認知平臺

我們到陌生的地方會找導(dǎo)視標識或者找人尋求幫助，新用戶到平臺內(nèi)也會面臨同樣的困境，遇到問題無從下手時會尋找含有【幫助】【客服】字樣的內(nèi)容，那么幫助中心、智能助手這類有明顯特性的功能則會成為用戶遇到問題時的第一選擇。通過業(yè)務(wù)思考及行業(yè)調(diào)研，以簡潔、高效、情感化為目標最大化的發(fā)揮其屬性優(yōu)勢，讓用戶在使用過程中更易理解和接受，平穩(wěn)有效的幫助用戶渡過新手期。

1、幫助中心

幫助中心，一個時常被忽略并被嚴重低估的功能。它是平臺全量信息集合地，不僅能幫助用戶系統(tǒng)了解平臺概況，也能引導(dǎo)用戶行為，樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息，在頁面表現(xiàn)上需突出內(nèi)容本身，忌過度裝飾。從設(shè)計角度來看，一個好的幫助中心應(yīng)該符合以下條件：框架簡潔清晰、信息突出并輔以錨點定位。在框架設(shè)計上一般將頁面分為導(dǎo)航區(qū)、內(nèi)容展現(xiàn)區(qū)兩部分，導(dǎo)航與幫助內(nèi)容對應(yīng)性強，層級簡單，能讓用戶在短時間內(nèi)了解平臺能力構(gòu)成；幫助文檔內(nèi)容一般復(fù)雜冗長，錨點定位可以充當文章大綱，輔助用戶精準定位。

2、智能助手

通過內(nèi)置的幫助和指導(dǎo)性說明來解答用戶使用產(chǎn)品過程中遇到的簡單、共性問題，降低人工客服響應(yīng)成本。智能助手包含兩部分：入口與懸浮窗口。入口一般懸浮于頁面右下角，點擊后觸發(fā)懸浮窗口。

市面很多助手能力較單一，僅能機械處理通用問題，無法提供多樣化幫助，很容易讓人覺得是個沒啥用的擺設(shè)，對它慢慢失去信任。為重新喚起用戶的信任，需要在設(shè)計上注入一定的生命力，讓用戶覺得易接受、有選擇、有溫度，從而真正用起來。

1）懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口，優(yōu)化方向有以下三點：首先，智能助手與用戶的交流不再局限于單純的問答，而是根據(jù)賬戶屬性向用戶提供高頻問題集合，并根據(jù)用戶的回應(yīng)拓展更多問題，提供多維化的幫助。這個主動性的幫助不僅讓用戶感受平臺的溫度，無形中也降低了用戶的思考成本，更快的熟悉平臺能力。

其次，每個問題旁邊都提供“是否有用”的按鈕供用戶評判。此功能不僅為平臺答案提供了優(yōu)化空間，也強化了用戶對平臺建設(shè)的參與度，讓助手與用戶共同成長。

最后，對話窗口也可拓展輔助能力，例如常見問題、快訊、快捷入口等，為用戶所想的同時也提供更便捷的站內(nèi)流動通路。

2）入口形象IP化、情感化。除了自身能力外，入口的設(shè)計則會提升功能的存在感，從而吸引用戶的關(guān)注。首先品牌ip形象的植入會讓入口更生動，在喚起用戶注意的同時強化品牌印象。其次擬人化的主動問候能提升平臺的親切感，拉近與用戶的距離。

助力用戶精準觸達

新用戶對平臺相對陌生，恰當?shù)囊龑?dǎo)能讓他們快速關(guān)注重點。老用戶對平臺的定位及能力相對熟悉，目標性更強，但在應(yīng)用同時也抱有更高期待。因此恰當?shù)囊龑?dǎo)能幫助他們快速了解平臺變化并精準觸達。作為產(chǎn)品設(shè)計者，也希望對用戶行為進行有意識引導(dǎo)，讓用戶能發(fā)現(xiàn)、探索平臺新能力，或能夠按照我們的希望使用產(chǎn)品。公告彈窗、新手引導(dǎo)、全局提示這三類方法可幫助用戶高效獲取信息并助力精準觸達。

1、公告彈窗

常用于系統(tǒng)升級告知，以模態(tài)彈窗表達，讓用戶聚焦當前內(nèi)容并支持跳轉(zhuǎn)了解詳情。公告樣式根據(jù)內(nèi)容細分為三類：版本更新提示、重點升級告知、常規(guī)通告，不同類型需根據(jù)信息量多寡差異化表達。設(shè)計時可輔以插圖或其他視覺元素烘托氛圍，并在文案上注入情緒化的表達，從而提升用戶的關(guān)注度。

1）「版本更新提示」承載簡單介紹內(nèi)容，讓用戶關(guān)注且快速獲取變更信息。

2）「重點升級」當有若干重要功能更新或新增時，可用此形式突出重點。

重點內(nèi)容露出建議2-4組為佳，彈窗寬度可根據(jù)內(nèi)容適配。

3）「常規(guī)通告」常用于文案較多的場景。設(shè)計上需要弱化視覺氛圍，突出內(nèi)容本身。

2、引導(dǎo)類

針對局部功能升級的提示說明，一般與元素綁定關(guān)系較強，可讓用戶直觀了解關(guān)注點，提升功能觸達率。雖然此類引導(dǎo)輕量便捷，容易幫產(chǎn)品提升數(shù)據(jù)指標，但要注意適度應(yīng)用。根據(jù)功能重要度、操作復(fù)雜度將引導(dǎo)總結(jié)為分步式、氣泡、閃點、操作示意4類。

1）「分步式引導(dǎo)」常用于頁面多個功能升級的引導(dǎo)組。當頁面有多個升級點，直接平鋪會讓頁面臃腫不聚焦。為了讓用戶高效獲取信息，建議一次僅顯示一條，通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。

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

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

4）「操作示意」當無法用圖文清晰描述操作路徑時，以動態(tài)形式表達。

3、全局提示

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

1）「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當前操作，又足夠明顯，一般需手動關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯誤或異常等情況。另外，也可作為反饋應(yīng)用在一些需要明確指示的操作后場景，此處暫不展開討論。

2）「徽標」形態(tài)各異的小紅點。常出現(xiàn)在圖標、按鈕右上角的紅色圓點、數(shù)字或文字，簡單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準傳達提示意圖。

使用時注意無數(shù)字與有數(shù)字的應(yīng)用場景。有數(shù)字的徽標給用戶帶來的心理壓力會更大，也會更吸引用戶注意力，同時需注意數(shù)字長度控制。

操作中：具體的提示，助力高效填單

存在于操作的具體任務(wù)中，通過提示、推薦、預(yù)置信息等方式降低用戶的認知及操作成本，提升填單效率。

提示說明

1、文案提示  

平鋪在元素附近，對重點或復(fù)雜功能提供直觀描述或建議。帶有引導(dǎo)性的文案處理，會促進用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。應(yīng)用類型有三：重點提示、輔助說明、占位提示。重點提示與輔助說明使用戶無需猜測；占位提示可使用戶能夠快速明確輸入規(guī)則。因表達側(cè)重不同，表單設(shè)計時三者搭配效果更佳。

2、工具提示

此類信息作為文本解釋層級較低，無需直接展示。通過懸浮或點擊元素觸發(fā)對應(yīng)說明，以氣泡形式出現(xiàn)。觸發(fā)式的展現(xiàn)既能避免非必要信息堆疊導(dǎo)致的頁面臃腫，又能保證需要的時候有跡可循。

智能化

當一個系統(tǒng)背后的產(chǎn)品設(shè)計者考慮足夠全面，能夠預(yù)判用戶的預(yù)期，那么它就能主動的給用戶提供建議和幫助，甚至幫助用戶自動執(zhí)行一些任務(wù)，最大化減輕用戶的決策壓力。但值得注意的是，“智能化”需要一定的產(chǎn)品能力及豐富的數(shù)據(jù)作為支撐，設(shè)計時需結(jié)合實際情況應(yīng)用。

1、信息預(yù)置

系統(tǒng)根據(jù)賬戶屬性自動為用戶預(yù)置內(nèi)容。如下左圖可見，僅需要填寫一條內(nèi)容，其他對用戶利益無損的內(nèi)容可通過預(yù)置選項來提升填單效率。

2、智能推薦

此類設(shè)計的前提是平臺有足夠的數(shù)據(jù)積累，通過大數(shù)據(jù)或業(yè)務(wù)特色為備選內(nèi)容打標簽建標識。常用的設(shè)計方法有兩種-為用戶提供可視化標簽，助力用戶快速決策；交互手段簡化，由多信息錄入變?yōu)橹苯舆x擇，強化推薦內(nèi)容展示性，從而降低操作中的思考和錄入成本。

場景一：「幫助決策」

表單中有大量需要用戶錄入的字段，在無任何參考的情況下用戶用于決策的時間及輸入內(nèi)容的合規(guī)性無疑對填單效率造成一定影響。下圖可見推薦標簽?zāi)軒陀脩籼峁┓较蚣斑吔?，輔助用戶決策，降低思考成本。

場景二：「提升填單效率」

以單元創(chuàng)建為例，傳統(tǒng)路徑如下：新建>填寫表單>保存>再次新建>再次填寫表單…以此往復(fù)。用戶每建立一個單元均需要把同類型的內(nèi)容填寫一遍，耗時費力。而智能推薦將常規(guī)表單輸入變?yōu)槟０孢x擇，僅需2步就可完成多個內(nèi)容創(chuàng)建：輸入關(guān)鍵詞>選擇模版。選擇和瀏覽的成本遠遠低于數(shù)據(jù)的頻繁輸入，模版設(shè)計則通過簡潔的樣式及內(nèi)容層次化的展現(xiàn)提升信息獲取效率。通過路徑及交互方式的轉(zhuǎn)變，上線后數(shù)據(jù)反饋操作效率大幅提升。

3、預(yù)覽能力

當操作過程較為復(fù)雜或結(jié)果難以預(yù)測時，可視化的預(yù)覽可及時展現(xiàn)結(jié)果樣式，方便用戶實時調(diào)整，提升操作安全感。

操作后：及時有效的反饋

及時響應(yīng)操作成果，將功能的運行情況、數(shù)據(jù)的對錯反饋給用戶，及時有效的幫助修復(fù)輸入中的問題。常見的反饋有以下四類：toast、表單錯誤校驗、模態(tài)彈窗、獨占式頁面，每種樣式因干預(yù)強度不同而適用不同的場景。

1、Toast：一般3s左右消失，因體積小、展示位置靠上、自動消失等特點時常被用戶忽視。常用于操作結(jié)果、系統(tǒng)性等等無明確后續(xù)指引的反饋，例如“提交成功”、“操作失敗”、“服務(wù)器無反應(yīng)”。

2、錯誤校驗：當表單出現(xiàn)輸入錯誤時，按照就近原則在錯誤附近為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的輸入內(nèi)容。

3、彈窗提示：提示性和阻斷性都很強，能夠讓用戶聚焦信息本身。通常提示內(nèi)容可為用戶提供指向性引導(dǎo)，需要強關(guān)注。

4、獨占式反饋：提交后頁面切變?yōu)楠毩⒄故镜捻撁婕墵顟B(tài)反饋。比彈窗的阻斷性更強，信息獲取更沉浸。在設(shè)計時建議搭配狀態(tài)插圖強化氛圍，并提供操作按鈕為用戶提供通路。

章尾總結(jié)

幫助體系的出發(fā)點就是在盡量降低人為干預(yù)的基礎(chǔ)上，減少用戶在不同使用階段中的刻意思考與尋找，從而提升操作的順暢性及用戶的認可度。綜上就是在不同操作階段可用到的設(shè)計方法，盡管有些手段并不起眼，但也正是這些點滴的聚集和系統(tǒng)的應(yīng)用為用戶帶來無聲的幫助，讓B端產(chǎn)品使用體驗變得高效且富有溫度。

原文地址：百度MEUX（公眾號）

作者：商業(yè)用戶體驗部

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》B端幫助體系二三事

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司