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