基于用戶體驗的直播電商平臺B 端界面設(shè)計

西華大學美術(shù)與設(shè)計學院 李沛蕓 李娟（通信作者） 周慧敏

互聯(lián)網(wǎng)、物聯(lián)網(wǎng)的高速發(fā)展，為新商業(yè)模式即直播電商創(chuàng)造了機遇，直播產(chǎn)業(yè)發(fā)展迎來爆發(fā)期。一場直播需要由主播、場控、運營等多個角色協(xié)同完成，而直播電商平臺作為連接觀眾與直播的媒介，可以輔助直播團隊進行直播全程的管理及配合工作[1]。隨著直播的興起，出現(xiàn)許多缺乏經(jīng)驗的個人主播，而直播B 端協(xié)同產(chǎn)品的好用與否會直接影響到直播是否成功，因此需要對直播平臺B 端的界面設(shè)計及使用流程進行優(yōu)化，形成基于用戶體驗的直播解決方案，以此提高直播團隊成員之間的合作及整體工作效率。

1 概念闡述

1.1 用戶體驗

用戶體驗，即結(jié)合整個流程中不同利益相關(guān)者的體驗感受，進行綜合性的設(shè)計考慮，在人機交互設(shè)計發(fā)展過程中具有重要的地位。用戶體驗具體是指用戶在使用某個產(chǎn)品的過程中，在使用前、中、后建立起的主觀心理感受，及由此產(chǎn)生的生理反應(yīng)[2]。如圖1 所示，用戶體驗要素分為戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層，通過自下而上的對各層要素進行梳理及設(shè)計，可構(gòu)建出一款符合用戶實際體驗及使用需求的設(shè)計方案。而在產(chǎn)品的整體設(shè)計過程中，各要素層級的設(shè)計步驟都需要設(shè)計師從體驗側(cè)出發(fā)，與用戶及產(chǎn)研團隊進行充分交流，綜合考慮完成用戶體驗設(shè)計[3]。

圖1 用戶體驗五要素

1.2 B 端

2015 年7 月4 日，國務(wù)院發(fā)布《國務(wù)院關(guān)于積極推進“互聯(lián)網(wǎng) +”行動的指導意見》，促進了實體產(chǎn)業(yè)逐步向數(shù)字化轉(zhuǎn)型，進一步推動互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)的融合，互聯(lián)網(wǎng) B 端產(chǎn)品發(fā)展進入藍海階段[4]。B 即Business，是企業(yè)、組織的簡稱，B 端產(chǎn)品即為企業(yè)中不同的用戶提供系統(tǒng)性服務(wù)的互聯(lián)網(wǎng)解決方案，因為B 端產(chǎn)品的客戶為具有一定規(guī)模的團體，而團體中各部門主要通過協(xié)作完成工作，因此B 端產(chǎn)品的使用體驗會直接影響部門內(nèi)外合作的工作效率。

B 端客戶是一個存在多角色用戶的多級組織，其中不同角色會綁定不同程度的操作權(quán)限，而一位用戶可以擁有多種角色，用戶作為組織中的個體，并不會獨立存在。在核心業(yè)務(wù)流程中不同角色各司其職，同時其工作行為會與其他層級用戶及部門相互影響，進而形成多層組織之間的工作協(xié)同。B 端產(chǎn)品所涉及的活動具有兩重性，對外有業(yè)務(wù)及商業(yè)活動，對內(nèi)則為管理及協(xié)同活動，并且不同行業(yè)之間存在著業(yè)務(wù)壁壘。

1.3 直播電商平臺B 端

如圖2 所示，將整個直播流程按先后順序分為直播前、直播中、直播后三個階段，根據(jù)階段或角色的不同可將整體流程拆分為階段流程與角色流程，其中階段流程為眾多用戶的行為串聯(lián)構(gòu)成，各角色獨立行為及協(xié)同節(jié)點相互交織，共同推進直播進程，其間涉及的角色、行為及場景繁瑣復(fù)雜。

圖2 直播電商業(yè)務(wù)泳道圖

直播電商平臺B 端，即基于直播電商業(yè)務(wù)泳道圖，構(gòu)建的輔助直播B 側(cè)角色進行直播管理及協(xié)同的互聯(lián)網(wǎng)解決方案，能夠有效提升直播團隊的整體工作效率。主要參與角色包括運營、場控、主播、客服，在流程中的主要行為分別為：運營負責數(shù)據(jù)分析及前期宣傳策劃，場控負責調(diào)度各方及帶動氣氛、主播負責帶貨及與觀眾互動，而客服負責對接觀眾咨詢及處理訂單，四種角色各司其職，并相互配合完成一場直播。

2 基于用戶體驗的B 端界面設(shè)計原則

2.1 一致性

相似的圖形引導及操作行為，可以提升用戶對產(chǎn)品功能的認知度與熟悉感，用戶可以根據(jù)以往的經(jīng)驗對新產(chǎn)品快速學習，進而提升操作效率及使用體驗感[5]。因此在同一產(chǎn)品中，不同頁面視覺元素、顏色質(zhì)感、字體大小、交互方式及各類組件的選擇上應(yīng)保持一致[6]。而對產(chǎn)品研發(fā)團隊來說，在多個設(shè)計師合作的狀態(tài)下，界面元素保持一致性可以統(tǒng)一設(shè)計風格，塑造產(chǎn)品品牌感，并在產(chǎn)品后續(xù)的更新迭代中提升開發(fā)效率。

2.2 可達性

用戶通過定位元素能夠到達并定位其所在位置，因此為加強頁面引導的準確度，應(yīng)配合全局導航合理設(shè)計局部導航。各局部導航的功能與使用要點不盡相同，例如面包屑導航可告知用戶所處位置，并幫助其返回上級頁面，但要注意其每一級都需要頁面承載。并且為配合不同局部導航的使用特性，應(yīng)注意選擇合適的交互及跳轉(zhuǎn)方式，來提高用戶操作的可達性。

2.3 可獲性

頁面中的信息及數(shù)據(jù)展示應(yīng)該被用戶快速獲取并易于理解，對數(shù)據(jù)進行信息降噪，加強圖標、圖示、文字的意象感，更易用戶理解。例如在表格設(shè)計中弱化分割線等干擾用戶視線的元素，采用對齊等方式形成信息集，引導用戶自主對信息進行分類，提高用戶獲取信息的效率。而圖標盡量選擇簡潔通俗的圖形，保證其表意清晰，從而提升用戶的信息認知度。

2.4 可控性

在使用界面時，用戶需要對所處位置及進程有足夠的感知，才能對產(chǎn)品產(chǎn)生信任感，對用戶操作的前、中、后進行設(shè)計引導，使用戶在使用過程中更具安全感[7]。例如在操作前增加文字及標簽等提示，可以降低用戶操作失誤率，防止二次返工。在操作中即時給予用戶當前狀態(tài)的反饋，例如操作按鈕的顏色、圖形等細節(jié)隨著當下操作狀態(tài)變化，并在重要操作時增加二次確認，讓用戶對操作結(jié)果有預(yù)知。而操作后應(yīng)該對操作結(jié)果進行反饋呈現(xiàn)，按照當前操作的工作量級以輕提示、結(jié)果頁等形式告知用戶操作結(jié)果，并提供撤銷或進行下一步的操作，使用戶對整個操作過程具有掌控感[8]。

3 設(shè)計實踐及方案

為提升用戶體驗，設(shè)計師需要從產(chǎn)品信息架構(gòu)、交互方式、視覺呈現(xiàn)等方面進行綜合考慮。根據(jù)用戶體驗五要素層級順序進行體驗設(shè)計，可以借助用戶的視角進行頁面優(yōu)化，以此提高用戶對產(chǎn)品的認知度與熟悉感[9]。

3.1 戰(zhàn)略層

調(diào)研用戶訴求，形成用戶畫像。直播主要參與角色分為主播、場控、運營，通過用戶訪談、行為觀察的調(diào)研方式觀察直播全過程，對不同角色的基本信息、工作場景及工作行為進行記錄梳理，重點區(qū)分不同角色用戶的崗位職責、工作目標、及使用期望，如圖3 所示形成用戶畫像。

圖3 用戶畫像圖

1）主播。主播的職責是進行商品講解與直播互動，在團隊開播時更注重與他人之間的協(xié)同效率，而在個人單獨開播時更期望能夠使直播創(chuàng)建流程簡易化。

2）場控。場控負責在直播全程中調(diào)度全場的人、事、物，會同時關(guān)注多個屏幕，進而與主播、運營進行多方協(xié)作。直播全程對平臺界面的操作密度大且繁瑣，操作流程復(fù)雜會給其工作增負。

3）運營。運營在直播前需要根據(jù)數(shù)據(jù)統(tǒng)籌直播活動，編寫直播腳本與主播、場控進行任務(wù)對接。并提前確定選品，管理商品倉庫。會隨時查看當天的粉絲流量數(shù)據(jù)，以方便制定后期的流量及渠道運營計劃，希望能夠得到多維度數(shù)據(jù)的直觀展現(xiàn)，對分析決策進行幫助，以此來提升直播效能。

3.2 范圍層

梳理業(yè)務(wù)場景，串聯(lián)用戶畫像及任務(wù)流程形成業(yè)務(wù)泳道圖。將3 個角色的用戶畫像及任務(wù)流程進行串聯(lián)構(gòu)建出業(yè)務(wù)泳道圖，明確整體的直播業(yè)務(wù)流程。如圖4 所示，構(gòu)建用戶體驗地圖找出直播核心場景即工作臺、直播管理、創(chuàng)建直播、中控臺、數(shù)據(jù)看板，及存在的用戶體驗問題，明確改版的設(shè)計目標。（1）直播創(chuàng)建階段，核心功能快速觸達，協(xié)助用戶立即開播。建立工作樞紐即工作臺頁面，提高不同角色用戶的核心操作觸達率。并整合高頻功能，縮短用戶的操作流轉(zhuǎn)鏈路。最終簡化直播創(chuàng)建流程，幫助用戶快速高效的開啟直播。（2）直播管理階段，直播全程高效管理，操作體驗適配各端。使各端的體驗保持一致性，并根據(jù)平臺特性進行適配。在直播過程中優(yōu)化場控的調(diào)度操作過程，從而提高直播管理效率。（3）直播復(fù)盤階段，選用合適的圖表，使數(shù)據(jù)多維度的直觀呈現(xiàn)，能夠被用戶高效讀取，提升用戶的數(shù)據(jù)感知度，助力運營進行數(shù)據(jù)提煉與決策。并根據(jù)用戶體驗地圖分析利益相關(guān)者的實際任務(wù)協(xié)同情況，基于用戶痛點得出設(shè)計機會點，依據(jù)各個業(yè)務(wù)流程階段的設(shè)計目標提出相應(yīng)的設(shè)計策略。

圖4 用戶體驗地圖

3.3 結(jié)構(gòu)層

明確產(chǎn)品定位，梳理產(chǎn)品功能及邏輯架構(gòu)。根據(jù)用戶需求、痛點以及設(shè)計策略，進行產(chǎn)品范圍層的邏輯梳理，明確產(chǎn)品定位為全行業(yè)全場景提供直播管理解決方案的直播平臺。確認產(chǎn)品的功能層級及內(nèi)容邊界，對各個功能之間的架構(gòu)層級及邏輯關(guān)系進行梳理，對產(chǎn)品功能的優(yōu)先級與包含關(guān)系進行排序，得出產(chǎn)品整體的信息及功能架構(gòu)，為產(chǎn)品后續(xù)的交互、視覺及體驗設(shè)計建立框架基礎(chǔ)。

3.4 框架層

產(chǎn)品功能模塊集成及布局設(shè)計。以工作臺頁面設(shè)計為例，主播、場控、運營為參與直播的主要人員，需要快速進入各自的核心工作場景，但老版工作臺功能缺失、布局混亂，并未實現(xiàn)各角色任務(wù)的有效分發(fā)。基于用戶關(guān)注度對功能模塊進行排序，并運用柵格重構(gòu)頁面布局，規(guī)范頁面各元素后進行工作臺頁面的原型設(shè)計[10]。串聯(lián)起9 個常用業(yè)務(wù)場景，重新建立工作樞紐，有效提高用戶觸達率，實現(xiàn)了各角色任務(wù)的快速分發(fā)。

3.5 表現(xiàn)層

建立工作樞紐，提高用戶觸達率。通過對表現(xiàn)層進行視覺設(shè)計，使用戶能夠通過視覺引導，正確讀取信息、知曉功能，從而進行正確的操作與交互。因此在保持B 端產(chǎn)品調(diào)性的基礎(chǔ)上，注重頁面視覺元素呈現(xiàn)清晰整潔，保證頁面各功能模塊布局的合理性，并增加情感化設(shè)計提高用戶使用體驗感。考慮到部分主播缺乏直播經(jīng)驗，對平臺的各項操作不夠熟悉，因此如圖5 所示，從以下三個方面建立新手版工作臺，使用戶能夠通過引導快速熟悉操作。（1）增加新手引導，將開播流程總結(jié)為三個步驟，使用插畫友善引導，減輕用戶初次使用的迷茫感。（2）將單條信息的公告欄拓展為公告信息模塊，展示更多重要信息，減少用戶信息錯失。（3）設(shè)置任務(wù)廣場模塊，將直播教程分解為系列任務(wù)，以完成任務(wù)形式，幫助用戶熟練各項核心操作。

圖5 工作臺新手引導版

而老用戶版工作臺設(shè)計，更注重于保持用戶原有的操作習慣，首先對高頻功能進行整合，使用戶能夠通過簡潔的操作快速進入工作場景。工作臺作為工作任務(wù)的中轉(zhuǎn)站，建立的目的是為實現(xiàn)各角色首頁任務(wù)的分發(fā)，不宜呈現(xiàn)過多不重要的信息，應(yīng)使用戶停留時間越短越好。但老版工作臺呈現(xiàn)過多無效信息，使用戶不能清晰高效的獲取核心信息。通過對有數(shù)據(jù)查看需求的主播與運營進行觀察訪談，提煉出用戶關(guān)注的數(shù)據(jù)類型，剔除不重要的干擾性數(shù)據(jù)，幫助他們更快聚焦核心內(nèi)容。

如圖6 所示，提取出主播、場控、運營三個角色的高頻操作，在工作臺設(shè)置相應(yīng)的快捷入口，幫助不同角色用戶高效進入目標場景，快速進行工作。而老版圖標風格不統(tǒng)一，圖形模糊表意不明，影響了用戶識別與操作的效率。因此對舊圖標進行重制，統(tǒng)一其線條、圓角等視覺元素，并選用清晰通俗的圖形，提高圖標的識別度與一致性。

圖6 常用功能快捷按鈕圖標

4 結(jié)論

互聯(lián)網(wǎng)發(fā)展重心由消費互聯(lián)網(wǎng)逐步轉(zhuǎn)向產(chǎn)業(yè)互聯(lián)網(wǎng)，B 端產(chǎn)品呈現(xiàn)出龐大的使用需求與發(fā)展?jié)摿Γ鳥 端產(chǎn)品面向的用戶群體具有多重層級性的復(fù)雜特點，在用戶體驗設(shè)計研究方面還存在許多值得探究的空間。產(chǎn)品良好的使用體驗不僅可以使用戶盡快熟悉其功能流程，還有利于提升用戶對產(chǎn)品的忠誠度。遵循的一致性、可達性、可獲性、可控性四個設(shè)計原則，并按照用戶體驗要素自上而下的順序進行界面及體驗設(shè)計的研究，能夠得出符合用戶操作習慣與使用需求的B 端產(chǎn)品。