2023-3-26 ui設(shè)計(jì)分享達(dá)人
在如今用戶為王的時(shí)代，用戶體驗(yàn)成為一種新的品牌競爭力。隨著技術(shù)進(jìn)步和體驗(yàn)意識(shí)的普及，習(xí)慣了C端產(chǎn)品流暢愉悅的體驗(yàn)，用戶對(duì)B端產(chǎn)品體驗(yàn)的期望也越來越高。
B端C化的概念也由此產(chǎn)生，但B、C端有著本質(zhì)區(qū)別，C端的設(shè)計(jì)思維無法完全復(fù)用到B端，那是否可以基于B端產(chǎn)品特征，融合C端體驗(yàn)設(shè)計(jì)思維，即“B+C”來幫助提升B端產(chǎn)品體驗(yàn)?zāi)兀勘疚木劢乖谔剿魅绾瓮ㄟ^“B+C”的設(shè)計(jì)思維，提升B端產(chǎn)品體驗(yàn)。
我們先簡單了解下B、C端產(chǎn)品各自的定義。B、C端其實(shí)是以使用對(duì)象的類型，來代指的產(chǎn)品類型，C指個(gè)人消費(fèi)者 (Customer) ，B指組織 (Business) ，這個(gè)組織可以是個(gè)人、公司、政府或機(jī)構(gòu)，因此B端模式也是多樣的，除了B2B，還有B2C、B2G等。
C端產(chǎn)品幫助個(gè)人解決生活場景中的需求痛點(diǎn)，提供人們消費(fèi)的物質(zhì)、信息和情感。常見產(chǎn)品類型有工具類、內(nèi)容類、社交類、游戲類等，如滴滴、知乎、微信、王者榮耀等。
B端產(chǎn)品幫助組織實(shí)現(xiàn)其商業(yè)目的，提供商業(yè)的工具、方法和服務(wù)。常見的產(chǎn)品類型有：CRM 客戶關(guān)系管理、ERP 企業(yè)資源計(jì)劃、OA辦公等，如企業(yè)微信、金蝶、釘釘?shù)取?/span>
下面我將從產(chǎn)品設(shè)計(jì)的角度，分析B、C端的差異化。
1、設(shè)計(jì)原則的差異
C端產(chǎn)品主要通過流量轉(zhuǎn)化獲得收益，因此人的注意力和使用頻率是關(guān)鍵，所以設(shè)計(jì)原則為“UCD”（User Center Design）以用戶為中心的設(shè)計(jì)。
B端產(chǎn)品主要是為了能高效解決行業(yè)業(yè)務(wù)問題而存在的，所以其設(shè)計(jì)原則是以效率為中心。
2、功能流程的差異
C端產(chǎn)品主打一個(gè)滿足用戶核心痛點(diǎn)的功能，通過這個(gè)核心功能明確產(chǎn)品的特性和定位，附加N個(gè)增值功能，提高用戶粘性，加之創(chuàng)新和趣味性，保持與競品之間的差異化。
B端產(chǎn)品功能重全面，為的是能滿足組織的各種業(yè)務(wù)需求，組織的業(yè)務(wù)邏輯通常就是產(chǎn)品邏輯，功能流程也由業(yè)務(wù)場景轉(zhuǎn)化而來。
3、交互邏輯的差異
C端產(chǎn)品是單線程操作，完成一項(xiàng)任務(wù)后才能進(jìn)行另一項(xiàng)。碎片化的使用場景和廣泛的用戶群體，使得C端產(chǎn)品必須信息簡潔、容易上手、操作路徑短，否則將會(huì)導(dǎo)致用戶流失影響收益。
B端產(chǎn)品是多線程操作，支持多個(gè)任務(wù)并行。交互以優(yōu)化業(yè)務(wù)流程，提升用戶操作效率為主，關(guān)注信息架構(gòu)，清晰的信息架構(gòu)能幫助用戶在呈網(wǎng)狀的功能和交織的流程中，定位到自己所在功能頁面，找到所需的有效信息。
4、視覺表現(xiàn)的差異
C端產(chǎn)品視覺設(shè)計(jì)風(fēng)格多樣，如賽博朋克、孟菲斯、3D、酸性設(shè)計(jì)等，注重情感化表達(dá)和氛圍的渲染，加上短視頻和直播，讓用戶沉浸其中。
B端產(chǎn)品視覺服務(wù)于功能和信息的傳遞，視覺元素較為簡潔，常用色彩對(duì)比的形式，建立內(nèi)容邊界和視覺層次。
無論是在設(shè)計(jì)原則、功能流程、交互和視覺方面，B端產(chǎn)品與C端產(chǎn)品都有比較明顯的差異?；谝陨喜町?，結(jié)合B端產(chǎn)品特征和C端體驗(yàn)設(shè)計(jì)思維，我們可以從以下三個(gè)方面提升B端體驗(yàn)：
視覺—降低認(rèn)知負(fù)荷
B端產(chǎn)品講究屏效，看得多通常比看的美重要，信息密度高，則屏效高，卻也相應(yīng)的會(huì)增加用戶的認(rèn)知負(fù)荷，因此我們需要為用戶認(rèn)知減負(fù)。
交互—以用戶效率為中心
從用戶的行為和感知出發(fā)，本著以用戶為中心的原則提升操作效率。
情感—關(guān)注情緒感受
關(guān)注體驗(yàn)過程的“峰”與“終”，提升用戶整體的體驗(yàn)感受。
下面我將結(jié)合實(shí)際工作案例，講述如何用“B+C”的設(shè)計(jì)思維，提升B端產(chǎn)品體驗(yàn)。
Speedshop Omnichannel（下面簡稱為Omnichannel）是款針對(duì)國內(nèi)及東南亞中小商家，統(tǒng)一管理多渠道商品、訂單、交易、會(huì)員的ERP系統(tǒng)。
目前共支持Lazada、Shopee、Tokopedia、抖音等7個(gè)渠道，最多可管理100個(gè)線上店，集訂單管理、產(chǎn)品管理、會(huì)員管理、聊天、導(dǎo)入導(dǎo)出等功能為一體，服務(wù)超40,000商家。
視覺 — 降低認(rèn)知負(fù)荷
對(duì)信息的識(shí)別和處理是認(rèn)知負(fù)荷的主要來源，在視覺層，我們主要解決的是信息識(shí)別帶來的負(fù)荷，信息識(shí)別就是用戶看到內(nèi)容并選擇的過程，B端產(chǎn)品有信息量大，選擇多的特點(diǎn)，降低認(rèn)知負(fù)荷也將圍繞這兩點(diǎn)進(jìn)行。
1、優(yōu)化信息展示
/ 符合用戶訴求
B端產(chǎn)品根據(jù)用戶規(guī)模的大小，可以分為大B (一定規(guī)模的中大型企業(yè)) 和小B (小微企業(yè)、個(gè)人創(chuàng)業(yè))，兩者對(duì)信息的關(guān)注點(diǎn)和訴求不同。
表格是B端產(chǎn)品最常用的信息展現(xiàn)形式，且能將信息有序、高效、直觀的傳達(dá)給用戶，避免信息堆砌帶來的認(rèn)知負(fù)荷。
比如同樣是訂單頁，大B用戶的訂單數(shù)據(jù)量龐大，且訂單通常是自動(dòng)流轉(zhuǎn)的，無需手工操作，所以針對(duì)大B用戶，表格信息展示有兩個(gè)側(cè)重點(diǎn)，一是增加信息密度，二是幫助用戶能夠快速精準(zhǔn)過濾信息。
小B用戶的訂單數(shù)據(jù)量相對(duì)較小，且以手工處理為主，所以在展示訂單時(shí)，可以將關(guān)鍵信息整合，通過將信息進(jìn)行分層、分組的展示形式，降低單頁面信息的復(fù)雜度，還可以通過各模塊之間字體大小、顏色、圖標(biāo)、間距等手段將信息層次區(qū)分開。
/ 豐富信息展示維度
還可以通過圖形化、可視化和視頻的形式，豐富信息的內(nèi)容維度，化抽象為具象，讓信息能更高效的傳達(dá)。
在Omnichannel中，用戶需要完成新手配置后才能使用產(chǎn)品，進(jìn)入首頁看到的是任務(wù)型的引導(dǎo)，通過圖形輔助任務(wù)說明，豐富畫面的同時(shí)還能增加產(chǎn)品的親和力。
B端產(chǎn)品由于業(yè)務(wù)的復(fù)雜性和技術(shù)的局限性，通常操作沒有那么靈活，需要遵守一定的使用規(guī)則，傳統(tǒng)的做法會(huì)通過文字說明的方式傳達(dá)給用戶，面對(duì)一長段的規(guī)則說明，讀幾遍還不一定能理解。
比如在導(dǎo)入產(chǎn)品時(shí)，規(guī)則內(nèi)容多且邏輯復(fù)雜，可以將內(nèi)容可視化，使其易于傳達(dá)和理解。
視頻比文字的畫面感更豐富，傳播的內(nèi)容也更加具體，在幫助中心，圖文的基礎(chǔ)上增加視頻，幫助用戶更高效的獲取幫助信息。
2、提供個(gè)性化配置
B端產(chǎn)品通常包含多種用戶角色，每個(gè)角色的需求關(guān)注點(diǎn)不同，為了滿足各角色的需求，單頁面信息往往會(huì)出現(xiàn)超負(fù)荷的情況。
我們可以借鑒C端的個(gè)性化，對(duì)于非業(yè)務(wù)性的功能，允許用戶根據(jù)自己的需求和工作習(xí)慣進(jìn)行自定義。
比如下圖，在列表頁，我們?yōu)橛脩籼峁┝俗远x篩選條件和表格字段的設(shè)置。
3、提供有效決策信息
由于業(yè)務(wù)復(fù)雜，保障功能的全面，帶來的結(jié)果通常是操作和選項(xiàng)較多，如果沒有任何指引，B端產(chǎn)品的用戶通常無法做出合適的選擇。
比如下圖的添加商品，根據(jù)不同的使用場景，產(chǎn)品為用戶提供了三種添加商品的方式：
只有三個(gè)選擇，看似沒有任何操作難度，但用戶面對(duì)未知功能時(shí)，通常會(huì)根據(jù)自己過往的工作經(jīng)驗(yàn)，選擇熟悉的功能，這樣一來，可能會(huì)誤增了工作量，因此在設(shè)計(jì)上，要提供輔助介紹說明，幫助用戶決策。
我們?cè)诖嘶A(chǔ)上，為第一次使用該功能的用戶又做了優(yōu)化，除了消息提示框，還通過標(biāo)簽強(qiáng)化視覺重點(diǎn)，推薦最適合新用戶的選擇，添加商品的文案也改的更通俗易懂。
交互 — 以用戶效率為中心
1、 提升用戶行為效率
無論B端還是C端產(chǎn)品，都有一個(gè)共同的體驗(yàn)?zāi)繕?biāo)：提升操作效率，高效率意味著用戶通過更少的操作，更少的時(shí)間完成任務(wù)，實(shí)現(xiàn)降低成本的目標(biāo)。在C端產(chǎn)品中，常見的提升效率的方式有：1、根據(jù)用戶行為的流程分析，推薦相應(yīng)功能；2、聚合用戶行為，縮短操作路徑；3、轉(zhuǎn)移用戶操作成本，讓產(chǎn)品承擔(dān)更多的用戶引導(dǎo)、行為判斷和行為記憶，我們可以從以上幾點(diǎn)切入優(yōu)化B端操作效率。
/ 引導(dǎo)用戶操作
在C端產(chǎn)品中，經(jīng)常會(huì)有根據(jù)用戶的操作行為，產(chǎn)品給出相應(yīng)的推薦操作，如截屏后，在用微信發(fā)信息時(shí)，系統(tǒng)會(huì)提示是否要發(fā)送截圖，這種在操作過程中增加相關(guān)功能的曝光或引導(dǎo)，提高用戶操作效率的同時(shí)也不影響流程的順暢進(jìn)行。
下圖是商品管理頁，用戶首次進(jìn)入時(shí)，可以根據(jù)用戶觸發(fā)的操作推薦相關(guān)的幫助引導(dǎo)。
手動(dòng)創(chuàng)建商品時(shí)，需要完善很多商品信息，可以為經(jīng)常出錯(cuò)的內(nèi)容預(yù)設(shè)提示，先發(fā)的避免用戶出現(xiàn)錯(cuò)誤。
在收起/展開菜單欄時(shí)，提示快捷鍵功能。
/ 優(yōu)化任務(wù)路徑
B端產(chǎn)品中通常會(huì)有一個(gè)任務(wù)關(guān)聯(lián)一些子任務(wù)，如果用戶在子任務(wù)中遇到困難，往往會(huì)造成整個(gè)任務(wù)效率的降低甚至任務(wù)中斷。
比如在手動(dòng)創(chuàng)建商品的流程中，需要將商品信息推送到渠道線上店才算創(chuàng)建成功，所以在創(chuàng)建商品前，需要完成渠道線上店的創(chuàng)建。針對(duì)這種關(guān)鍵子任務(wù)，我們可以嘗試并行任務(wù)，在選擇線上店時(shí)，增加創(chuàng)建線上店的入口，將任務(wù)連貫起來。還可以通過操作的合并，比如保存和添加同步進(jìn)行，提升整體的任務(wù)效率。
2、弱化低效感知
好的產(chǎn)品體驗(yàn)，不止強(qiáng)調(diào)功能，還會(huì)在意體驗(yàn)中的感受，設(shè)計(jì)也可以左右用戶感知產(chǎn)品效率的快與慢。
/ 等待時(shí)間可感知
用戶對(duì)等待的耐受度是有限的，等待時(shí)間在2s內(nèi)是相對(duì)愉悅的，在時(shí)間不可控或時(shí)間較長的情況下，我們應(yīng)盡可能縮短用戶的感知時(shí)間。
比如在下圖中，用戶完成新手配置后，產(chǎn)品有個(gè)加載的過程，通過加載動(dòng)畫和加載步驟的分解，告知用戶系統(tǒng)在運(yùn)行中，縮短感知時(shí)間的同時(shí)消除用戶的負(fù)面情緒。
/ 容錯(cuò)性設(shè)計(jì)
在產(chǎn)品使用過程中，經(jīng)常會(huì)出現(xiàn)因用戶“犯錯(cuò)”而導(dǎo)致的任務(wù)中斷或失敗，這里的“犯錯(cuò)”，通常是因?yàn)橛脩舨僮髌x產(chǎn)品的使用要求，但這并不是用戶的錯(cuò)，人不是精密的儀器，好的體驗(yàn)應(yīng)該包含這部分“錯(cuò)誤”。
比如錄入數(shù)據(jù)時(shí)，應(yīng)給予實(shí)時(shí)的提醒，讓用戶可以及時(shí)更正，而不是等到提交時(shí)才拋出錯(cuò)誤提示，還有比如在數(shù)字輸入框中誤輸入其他字符時(shí)，自動(dòng)幫用戶清除等。
在涉及對(duì)用戶影響較大、重要且不可挽回的操作時(shí)，給出提示。
情感 — 關(guān)注情緒感受
在整段體驗(yàn)感受中，情緒最強(qiáng)烈和結(jié)束時(shí)的感受影響著用戶對(duì)整個(gè)體驗(yàn)好與壞的判斷，這個(gè)現(xiàn)象就是峰終定律，因此我們可以通過關(guān)注這些關(guān)鍵時(shí)刻，來確保用戶對(duì)整段體驗(yàn)是感到愉悅的。
1、減少負(fù)峰
消極的情緒，不僅影響用戶對(duì)產(chǎn)品的體驗(yàn)感受，最終還會(huì)落到降低效率上，因此在設(shè)計(jì)時(shí)，我們要考慮減少用戶的消極情緒。
/ 提供明確反饋
用戶使用產(chǎn)品的過程就像是與產(chǎn)品進(jìn)行“對(duì)話”，良好明確的反饋能幫助用戶理解和使用產(chǎn)品，在工作完成時(shí)，應(yīng)告知用戶已完成，出錯(cuò)時(shí)，告知用戶哪個(gè)環(huán)節(jié)錯(cuò)了，如何改進(jìn)或提供幫助，不要讓用戶去猜，而是主動(dòng)為用戶提供解決方案，提供確定感。
比如在創(chuàng)建商品的流程中，商品創(chuàng)建完成后要推送到渠道線上店，中間有一段較長時(shí)間的等待，在設(shè)計(jì)時(shí)，根據(jù)推送中、推送完成、推送失敗，分別提供了3種對(duì)應(yīng)場景的提示，讓用戶知道當(dāng)前任務(wù)進(jìn)展，以及展示相關(guān)對(duì)應(yīng)的操作，即使任務(wù)失敗，用戶也知該如何處理，增加用戶的控制感。
/ 任務(wù)中斷可回溯
在B端產(chǎn)品中，經(jīng)常會(huì)出現(xiàn)決策信息多，處理鏈路長，需反復(fù)多次進(jìn)入任務(wù)流程的情況，當(dāng)任務(wù)被迫中斷時(shí)，用戶情緒會(huì)受到影響，且用戶對(duì)未完成或中斷的任務(wù)往往比已完成的記憶更深刻，針對(duì)這類情況，我們需提供可回溯的設(shè)計(jì)，幫助用戶順利完成任務(wù)。
比如在將商品推送到渠道線上店時(shí)，同步過程中，用戶可以離開當(dāng)前頁面進(jìn)行其他操作，系統(tǒng)會(huì)將推送結(jié)果展示在列表頁，用戶可以通過列表頁，重新推送或者編輯修改后再推送，直至完成任務(wù)。
2、結(jié)束于正峰
在完成任務(wù)后，可以觸發(fā)氛圍動(dòng)效反饋成就，給用戶積極的結(jié)尾。
以上就是我基于B端產(chǎn)品特征，和C端產(chǎn)品的體驗(yàn)思維，用“B+C”的設(shè)計(jì)思維嘗試探索優(yōu)化B端產(chǎn)品體驗(yàn)的一些方案嘗試?！癇+C”的設(shè)計(jì)思維，其本質(zhì)是想找到業(yè)務(wù)與體驗(yàn)的平衡，作為B端設(shè)計(jì)師，好的用戶體驗(yàn)一定是與業(yè)務(wù)緊密結(jié)合的，與業(yè)務(wù)匹配的體驗(yàn)優(yōu)化才有其意義和價(jià)值。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn