2022-7-14 純純
業(yè)務(wù)性強(qiáng)，內(nèi)容復(fù)雜度高是To B產(chǎn)品的典型特征。新用戶需要快速認(rèn)知平臺(tái)能力并順利上手，老用戶則需感知信息的變化、功能的拓展并迅速響應(yīng)。體系化的幫助是通過在操作的不同階段提供差異化的引導(dǎo)及反饋，助力用戶在應(yīng)用中成長。
通過大量的案例積累及系統(tǒng)調(diào)研，發(fā)現(xiàn)“幫助”并不是單一的某個(gè)功能，而是一種體系化的能力，需要通過不同手段來實(shí)現(xiàn)。概括來說就是“在產(chǎn)品使用不同階段為用戶提供恰當(dāng)?shù)奶崾九c指引，通過組件的靈活應(yīng)用及能力創(chuàng)新，幫助用戶降低認(rèn)知成本，提升操作效率。”
用戶對產(chǎn)品的應(yīng)用周期經(jīng)歷前、中、后三個(gè)階段，每個(gè)階段的設(shè)計(jì)目標(biāo)都各不相同：操作前注重提升用戶的全局認(rèn)知，深化理解，助力精準(zhǔn)觸達(dá)；操作中助力提效，讓用戶知道做什么，怎么做；操作后明確反饋，幫助用戶明確結(jié)果。
用戶有新老之分，對系統(tǒng)的熟悉程度及應(yīng)用訴求不同。因此針對不同用戶各階段的使用訴求進(jìn)行場景化的拆分，提供差異化幫助。
我們到陌生的地方會(huì)找導(dǎo)視標(biāo)識(shí)或者找人尋求幫助，新用戶到平臺(tái)內(nèi)也會(huì)面臨同樣的困境，遇到問題無從下手時(shí)會(huì)尋找含有【幫助】【客服】字樣的內(nèi)容，那么幫助中心、智能助手這類有明顯特性的功能則會(huì)成為用戶遇到問題時(shí)的第一選擇。通過業(yè)務(wù)思考及行業(yè)調(diào)研，以簡潔、高效、情感化為目標(biāo)最大化的發(fā)揮其屬性優(yōu)勢，讓用戶在使用過程中更易理解和接受，平穩(wěn)有效的幫助用戶渡過新手期。
1、幫助中心
幫助中心，一個(gè)時(shí)常被忽略并被嚴(yán)重低估的功能。它是平臺(tái)全量信息集合地，不僅能幫助用戶系統(tǒng)了解平臺(tái)概況，也能引導(dǎo)用戶行為，樹立品牌形象。為保證用戶高效、便捷的獲取幫助信息，在頁面表現(xiàn)上需突出內(nèi)容本身，忌過度裝飾。從設(shè)計(jì)角度來看，一個(gè)好的幫助中心應(yīng)該符合以下條件：框架簡潔清晰、信息突出并輔以錨點(diǎn)定位。在框架設(shè)計(jì)上一般將頁面分為導(dǎo)航區(qū)、內(nèi)容展現(xiàn)區(qū)兩部分，導(dǎo)航與幫助內(nèi)容對應(yīng)性強(qiáng)，層級簡單，能讓用戶在短時(shí)間內(nèi)了解平臺(tái)能力構(gòu)成；幫助文檔內(nèi)容一般復(fù)雜冗長，錨點(diǎn)定位可以充當(dāng)文章大綱，輔助用戶精準(zhǔn)定位。
2、智能助手
通過內(nèi)置的幫助和指導(dǎo)性說明來解答用戶使用產(chǎn)品過程中遇到的簡單、共性問題，降低人工客服響應(yīng)成本。智能助手包含兩部分：入口與懸浮窗口。入口一般懸浮于頁面右下角，點(diǎn)擊后觸發(fā)懸浮窗口。
市面很多助手能力較單一，僅能機(jī)械處理通用問題，無法提供多樣化幫助，很容易讓人覺得是個(gè)沒啥用的擺設(shè)，對它慢慢失去信任。為重新喚起用戶的信任，需要在設(shè)計(jì)上注入一定的生命力，讓用戶覺得易接受、有選擇、有溫度，從而真正用起來。
1）懸浮窗口能力多元化。作為承載智能助手核心能力的懸浮窗口，優(yōu)化方向有以下三點(diǎn)：首先，智能助手與用戶的交流不再局限于單純的問答，而是根據(jù)賬戶屬性向用戶提供高頻問題集合，并根據(jù)用戶的回應(yīng)拓展更多問題，提供多維化的幫助。這個(gè)主動(dòng)性的幫助不僅讓用戶感受平臺(tái)的溫度，無形中也降低了用戶的思考成本，更快的熟悉平臺(tái)能力。
其次，每個(gè)問題旁邊都提供“是否有用”的按鈕供用戶評判。此功能不僅為平臺(tái)答案提供了優(yōu)化空間，也強(qiáng)化了用戶對平臺(tái)建設(shè)的參與度，讓助手與用戶共同成長。
最后，對話窗口也可拓展輔助能力，例如常見問題、快訊、快捷入口等，為用戶所想的同時(shí)也提供更便捷的站內(nèi)流動(dòng)通路。
2）入口形象IP化、情感化。除了自身能力外，入口的設(shè)計(jì)則會(huì)提升功能的存在感，從而吸引用戶的關(guān)注。首先品牌ip形象的植入會(huì)讓入口更生動(dòng)，在喚起用戶注意的同時(shí)強(qiáng)化品牌印象。其次擬人化的主動(dòng)問候能提升平臺(tái)的親切感，拉近與用戶的距離。
新用戶對平臺(tái)相對陌生，恰當(dāng)?shù)囊龑?dǎo)能讓他們快速關(guān)注重點(diǎn)。老用戶對平臺(tái)的定位及能力相對熟悉，目標(biāo)性更強(qiáng)，但在應(yīng)用同時(shí)也抱有更高期待。因此恰當(dāng)?shù)囊龑?dǎo)能幫助他們快速了解平臺(tái)變化并精準(zhǔn)觸達(dá)。作為產(chǎn)品設(shè)計(jì)者，也希望對用戶行為進(jìn)行有意識(shí)引導(dǎo)，讓用戶能發(fā)現(xiàn)、探索平臺(tái)新能力，或能夠按照我們的希望使用產(chǎn)品。公告彈窗、新手引導(dǎo)、全局提示這三類方法可幫助用戶高效獲取信息并助力精準(zhǔn)觸達(dá)。
1、公告彈窗
常用于系統(tǒng)升級告知，以模態(tài)彈窗表達(dá)，讓用戶聚焦當(dāng)前內(nèi)容并支持跳轉(zhuǎn)了解詳情。公告樣式根據(jù)內(nèi)容細(xì)分為三類：版本更新提示、重點(diǎn)升級告知、常規(guī)通告，不同類型需根據(jù)信息量多寡差異化表達(dá)。設(shè)計(jì)時(shí)可輔以插圖或其他視覺元素烘托氛圍，并在文案上注入情緒化的表達(dá)，從而提升用戶的關(guān)注度。
1）「版本更新提示」承載簡單介紹內(nèi)容，讓用戶關(guān)注且快速獲取變更信息。
2）「重點(diǎn)升級」當(dāng)有若干重要功能更新或新增時(shí)，可用此形式突出重點(diǎn)。
重點(diǎn)內(nèi)容露出建議2-4組為佳，彈窗寬度可根據(jù)內(nèi)容適配。
3）「常規(guī)通告」常用于文案較多的場景。設(shè)計(jì)上需要弱化視覺氛圍，突出內(nèi)容本身。
2、引導(dǎo)類
針對局部功能升級的提示說明，一般與元素綁定關(guān)系較強(qiáng)，可讓用戶直觀了解關(guān)注點(diǎn)，提升功能觸達(dá)率。雖然此類引導(dǎo)輕量便捷，容易幫產(chǎn)品提升數(shù)據(jù)指標(biāo)，但要注意適度應(yīng)用。根據(jù)功能重要度、操作復(fù)雜度將引導(dǎo)總結(jié)為分步式、氣泡、閃點(diǎn)、操作示意4類。
1）「分步式引導(dǎo)」常用于頁面多個(gè)功能升級的引導(dǎo)組。當(dāng)頁面有多個(gè)升級點(diǎn)，直接平鋪會(huì)讓頁面臃腫不聚焦。為了讓用戶高效獲取信息，建議一次僅顯示一條，通過「下一步」操作，逐步喚出剩余引導(dǎo)。為避免步驟過多導(dǎo)致用戶疲勞，建議最多不超過5步。
2）「氣泡式」相對輕量的引導(dǎo)，有足夠的提示性但不影響其他功能操作。
3）「閃點(diǎn)提示」微輔助型提示，常與氣泡引導(dǎo)配合使用。在需要關(guān)注的地方閃爍，點(diǎn)擊閃點(diǎn)后喚出關(guān)聯(lián)氣泡提示。不對用戶造成視覺干擾，又能引起一定的關(guān)注。
4）「操作示意」當(dāng)無法用圖文清晰描述操作路徑時(shí)，以動(dòng)態(tài)形式表達(dá)。
3、全局提示
重點(diǎn)信息的匯總或提示。此類提示完美融合于頁面，醒目且對操作無干擾，用戶可根據(jù)披露內(nèi)容判斷是否處理。通過警示、徽標(biāo)的應(yīng)用向用戶傳達(dá)信息的變化并提供快速觸達(dá)的能力，無形中提升用戶響應(yīng)效率。
1）「警示」不同顏色的提示條。常作為前置提示存在于頁面或模塊頂部，為用戶順利操作提供指引性幫助。既不打斷用戶當(dāng)前操作，又足夠明顯，一般需手動(dòng)關(guān)閉或事件結(jié)束后自行消失。不同顏色屬性不同：一般藍(lán)色代表消息通知、綠色代表成功、橙色代表警示、紅色代表錯(cuò)誤或異常等情況。另外，也可作為反饋應(yīng)用在一些需要明確指示的操作后場景，此處暫不展開討論。
2）「徽標(biāo)」形態(tài)各異的小紅點(diǎn)。常出現(xiàn)在圖標(biāo)、按鈕右上角的紅色圓點(diǎn)、數(shù)字或文字，簡單且醒目。表示內(nèi)容更新或有待處理的信息，此類提示符合用戶心智，無需教育就能向用戶精準(zhǔn)傳達(dá)提示意圖。
使用時(shí)注意無數(shù)字與有數(shù)字的應(yīng)用場景。有數(shù)字的徽標(biāo)給用戶帶來的心理壓力會(huì)更大，也會(huì)更吸引用戶注意力，同時(shí)需注意數(shù)字長度控制。
存在于操作的具體任務(wù)中，通過提示、推薦、預(yù)置信息等方式降低用戶的認(rèn)知及操作成本，提升填單效率。
1、文案提示
平鋪在元素附近，對重點(diǎn)或復(fù)雜功能提供直觀描述或建議。帶有引導(dǎo)性的文案處理，會(huì)促進(jìn)用戶優(yōu)化填寫方案，輸入更合適的內(nèi)容。應(yīng)用類型有三：重點(diǎn)提示、輔助說明、占位提示。重點(diǎn)提示與輔助說明使用戶無需猜測；占位提示可使用戶能夠快速明確輸入規(guī)則。因表達(dá)側(cè)重不同，表單設(shè)計(jì)時(shí)三者搭配效果更佳。
2、工具提示
此類信息作為文本解釋層級較低，無需直接展示。通過懸浮或點(diǎn)擊元素觸發(fā)對應(yīng)說明，以氣泡形式出現(xiàn)。觸發(fā)式的展現(xiàn)既能避免非必要信息堆疊導(dǎo)致的頁面臃腫，又能保證需要的時(shí)候有跡可循。
當(dāng)一個(gè)系統(tǒng)背后的產(chǎn)品設(shè)計(jì)者考慮足夠全面，能夠預(yù)判用戶的預(yù)期，那么它就能主動(dòng)的給用戶提供建議和幫助，甚至幫助用戶自動(dòng)執(zhí)行一些任務(wù)，最大化減輕用戶的決策壓力。但值得注意的是，“智能化”需要一定的產(chǎn)品能力及豐富的數(shù)據(jù)作為支撐，設(shè)計(jì)時(shí)需結(jié)合實(shí)際情況應(yīng)用。
1、信息預(yù)置
系統(tǒng)根據(jù)賬戶屬性自動(dòng)為用戶預(yù)置內(nèi)容。如下左圖可見，僅需要填寫一條內(nèi)容，其他對用戶利益無損的內(nèi)容可通過預(yù)置選項(xiàng)來提升填單效率。
2、智能推薦
此類設(shè)計(jì)的前提是平臺(tái)有足夠的數(shù)據(jù)積累，通過大數(shù)據(jù)或業(yè)務(wù)特色為備選內(nèi)容打標(biāo)簽建標(biāo)識(shí)。常用的設(shè)計(jì)方法有兩種-為用戶提供可視化標(biāo)簽，助力用戶快速?zèng)Q策；交互手段簡化，由多信息錄入變?yōu)橹苯舆x擇，強(qiáng)化推薦內(nèi)容展示性，從而降低操作中的思考和錄入成本。
場景一：「幫助決策」
表單中有大量需要用戶錄入的字段，在無任何參考的情況下用戶用于決策的時(shí)間及輸入內(nèi)容的合規(guī)性無疑對填單效率造成一定影響。下圖可見推薦標(biāo)簽?zāi)軒陀脩籼峁┓较蚣斑吔纾o助用戶決策，降低思考成本。
場景二：「提升填單效率」
以單元?jiǎng)?chuàng)建為例，傳統(tǒng)路徑如下：新建>填寫表單>保存>再次新建>再次填寫表單…以此往復(fù)。用戶每建立一個(gè)單元均需要把同類型的內(nèi)容填寫一遍，耗時(shí)費(fèi)力。而智能推薦將常規(guī)表單輸入變?yōu)槟０孢x擇，僅需2步就可完成多個(gè)內(nèi)容創(chuàng)建：輸入關(guān)鍵詞>選擇模版。選擇和瀏覽的成本遠(yuǎn)遠(yuǎn)低于數(shù)據(jù)的頻繁輸入，模版設(shè)計(jì)則通過簡潔的樣式及內(nèi)容層次化的展現(xiàn)提升信息獲取效率。通過路徑及交互方式的轉(zhuǎn)變，上線后數(shù)據(jù)反饋操作效率大幅提升。
3、預(yù)覽能力
當(dāng)操作過程較為復(fù)雜或結(jié)果難以預(yù)測時(shí)，可視化的預(yù)覽可及時(shí)展現(xiàn)結(jié)果樣式，方便用戶實(shí)時(shí)調(diào)整，提升操作安全感。
及時(shí)響應(yīng)操作成果，將功能的運(yùn)行情況、數(shù)據(jù)的對錯(cuò)反饋給用戶，及時(shí)有效的幫助修復(fù)輸入中的問題。常見的反饋有以下四類：toast、表單錯(cuò)誤校驗(yàn)、模態(tài)彈窗、獨(dú)占式頁面，每種樣式因干預(yù)強(qiáng)度不同而適用不同的場景。
1、Toast：一般3s左右消失，因體積小、展示位置靠上、自動(dòng)消失等特點(diǎn)時(shí)常被用戶忽視。常用于操作結(jié)果、系統(tǒng)性等等無明確后續(xù)指引的反饋，例如“提交成功”、“操作失敗”、“服務(wù)器無反應(yīng)”。
2、錯(cuò)誤校驗(yàn)：當(dāng)表單出現(xiàn)輸入錯(cuò)誤時(shí)，按照就近原則在錯(cuò)誤附近為用戶展示明確的提示性消息，糾正和引導(dǎo)用戶的輸入內(nèi)容。
3、彈窗提示：提示性和阻斷性都很強(qiáng)，能夠讓用戶聚焦信息本身。通常提示內(nèi)容可為用戶提供指向性引導(dǎo)，需要強(qiáng)關(guān)注。
4、獨(dú)占式反饋：提交后頁面切變?yōu)楠?dú)立展示的頁面級狀態(tài)反饋。比彈窗的阻斷性更強(qiáng)，信息獲取更沉浸。在設(shè)計(jì)時(shí)建議搭配狀態(tài)插圖強(qiáng)化氛圍，并提供操作按鈕為用戶提供通路。
幫助體系的出發(fā)點(diǎn)就是在盡量降低人為干預(yù)的基礎(chǔ)上，減少用戶在不同使用階段中的刻意思考與尋找，從而提升操作的順暢性及用戶的認(rèn)可度。綜上就是在不同操作階段可用到的設(shè)計(jì)方法，盡管有些手段并不起眼，但也正是這些點(diǎn)滴的聚集和系統(tǒng)的應(yīng)用為用戶帶來無聲的幫助，讓B端產(chǎn)品使用體驗(yàn)變得高效且富有溫度。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系
作者：百度MEUX 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn