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

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

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

1 概念闡述

1.1 用戶體驗

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

圖1 用戶體驗五要素

1.2 B 端

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

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

1.3 直播電商平臺B 端

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

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

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

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

2.1 一致性

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

2.2 可達性

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

2.3 可獲性

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

2.4 可控性

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

3 設計實踐及方案

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

3.1 戰(zhàn)略層

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

圖3 用戶畫像圖

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

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

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

3.2 范圍層

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

圖4 用戶體驗地圖

3.3 結構層

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

3.4 框架層

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

3.5 表現(xiàn)層

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

圖5 工作臺新手引導版

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

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

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

4 結論

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