直播電商與傳統(tǒng)秀場(chǎng)有著基因上的區(qū)別，直播間是直播的核心模塊，在直播電商中，直播間就是一個(gè)可移動(dòng)的電商平臺(tái)。那么我們?nèi)绾稳ゴ罱ㄟ@樣一個(gè)直播電商的直播間模塊呢？讓我們一起來(lái)探索下。

直播間是直播的核心模塊，也是基于直播場(chǎng)景的所有互動(dòng)和展示的承載模塊。直播隨著發(fā)展已經(jīng)逐步演化成“直播+”的模式，傳統(tǒng)秀場(chǎng)都紛紛加入了游戲、電商、綜藝、會(huì)場(chǎng)等直播內(nèi)容。但秀場(chǎng)直播和電商直播本身就有著基因上的區(qū)別。本文主要想基于直播電商的產(chǎn)品形態(tài)跟大家分享下如何搭建直播電商的直播間模塊。

直播電商和傳統(tǒng)秀場(chǎng)直播有很大的不同，主要體現(xiàn)在

1. 用戶訴求不同
2. 直播場(chǎng)景不同
3. 產(chǎn)品形態(tài)不同

用戶訴求上，傳統(tǒng)秀場(chǎng)直播更多傾向于社交互動(dòng)，用戶主要圍繞主播的來(lái)觀看直播，其核心在主播上。直播電商更多是在社交基礎(chǔ)上的電商交易，用戶主要圍繞商品來(lái)觀看直播，其核心在商品上。

直播場(chǎng)景上，傳統(tǒng)秀場(chǎng)直播更多需要依靠主播的“秀”和“演”才能維持直播內(nèi)容。直播電商更多是需要對(duì)商品的“講解”和“展示”來(lái)跟用戶互動(dòng)及解答，加上促銷和游戲的玩法來(lái)對(duì)用戶進(jìn)行激勵(lì)。

產(chǎn)品形態(tài)上，傳統(tǒng)秀場(chǎng)直播更多需要思考如何將用戶留在直播間。直播電商更多考慮是如何讓用戶邊看邊買，打造從看直播到瀏覽商品，從瀏覽商品到購(gòu)買完成再回到直播間的一站式購(gòu)物體驗(yàn)。

基于上面的分析我們可以看到，直播電商其直播間模塊的核心是要思考如何為用戶營(yíng)造邊看邊買的一站式購(gòu)物體驗(yàn)。我們依舊基于用戶場(chǎng)景出發(fā)，來(lái)探索如何設(shè)計(jì)直播電商的直播間功能。本文主要分為以下兩個(gè)部分：

1. 探索直播電商的用戶場(chǎng)景
2. 設(shè)計(jì)直播電商的直播間模塊

直播電商的用戶場(chǎng)景

先來(lái)看下直播電商解決的問(wèn)題有哪些？

傳統(tǒng)電商解決商品接入和在線展示的問(wèn)題，通過(guò)搜索、分類、商品詳情頁(yè) 三大利器讓人們能在網(wǎng)上進(jìn)行購(gòu)物，隨著商品類目的越來(lái)越多，商品內(nèi)容同質(zhì)化越來(lái)越嚴(yán)重，人們篩選的難度逐步增加。之后，篩選就變成了傳統(tǒng)電商平臺(tái)解決的第一大難題。

如何讓用戶快速的篩選到自己想要的商品，又能快速經(jīng)過(guò)判斷下單購(gòu)買。于是推薦系統(tǒng)是大家常玩的手法了，你能在淘寶上搜索到想要購(gòu)買的商品，淘寶在背后的算法已經(jīng)幫助你做了很多事情。但盡管如此，淘寶還沒(méi)有從根本上解決下面幾個(gè)問(wèn)題：

• 用戶購(gòu)買商品時(shí)橫向?qū)Ρ鹊睦_。我們根據(jù)商品詳情圖、根據(jù)評(píng)論、根據(jù)打分很多因素綜合評(píng)價(jià)該買哪一件衣服，對(duì)于選擇困難癥患者來(lái)說(shuō)簡(jiǎn)直是要命。
• 用戶購(gòu)買到商品后的買家秀問(wèn)題。明明網(wǎng)上圖片那么好看，為什么我穿在身上就是大媽級(jí)別的。
• 商家店鋪成效率頭部效應(yīng)問(wèn)題。成交量多的商家越來(lái)越多，少的商家一直都少。

而直播電商正好是解決這幾個(gè)問(wèn)題的。

首先，直播電商讓用戶從自主篩選變成達(dá)人推薦選擇，就像你要買車，沒(méi)有專業(yè)的人告訴你每個(gè)車的差別，你又怎么能找到自己的定位呢？比如買衣服，如果沒(méi)有一個(gè)穿衣達(dá)人直播告訴你今年夏天最流行的搭配方式是什么，你是不是又買了去年的流行款了呢。

其次，直播電商中，主播大都是各領(lǐng)域的達(dá)人，都會(huì)在直播中展示商品，通過(guò)直播可以全方位了解商品的特點(diǎn)，還可以實(shí)時(shí)互動(dòng)答疑。比如衣服 直播時(shí)會(huì)找不同身材比例的模特親自試穿，你可以根據(jù)自己的身材選擇挑選尺碼，甚至還可以直接問(wèn)主播自己適合什么。

最后，直播電商是以直播間為核心的“移動(dòng)式電商平臺(tái)”，每個(gè)直播間都是一個(gè)小中心。不存在賣得少就沒(méi)有展示的機(jī)會(huì)。當(dāng)然直播電商還有解決很多其他方面場(chǎng)景購(gòu)物的問(wèn)題，這里就不一樣詳述了。

那直播電商的用戶場(chǎng)景包括哪些呢？我在另一篇文章《如何設(shè)計(jì)直播電商的場(chǎng)景狀態(tài)》中有寫過(guò)，感興趣的同學(xué)可以去讀一下。這里只列舉跟直播間有關(guān)的場(chǎng)景。

我們從主播端和觀眾端分開(kāi)來(lái)看。

主播端：

1. 直播時(shí)，能讓我快速上架商品，對(duì)某些商品進(jìn)行展示。提醒用戶一鍵購(gòu)買。
2. 直播時(shí)，能讓我實(shí)時(shí)了解直播間用戶數(shù)據(jù)，包括直播售賣的情況。根據(jù)數(shù)據(jù)來(lái)調(diào)整講解內(nèi)容的策略。
3. 直播時(shí)，能讓我看到用戶提問(wèn)的問(wèn)題，能實(shí)時(shí)給他們解答。
4. 直播時(shí)，能給我提供一些活躍房間的游戲或者玩法。比如發(fā)優(yōu)惠券、紅包等。
5. 直播時(shí)，能讓我進(jìn)行營(yíng)銷活動(dòng)，比如秒殺、拼團(tuán)等玩法，促進(jìn)轉(zhuǎn)化。
6. 直播時(shí)，能讓直播間用戶關(guān)注我成為我的粉絲，下次直播還能通知他們。最好能讓他們知道我的微信/微博，加為好友。
7. 未直播時(shí)，能讓用戶知道我下一場(chǎng)直播提前預(yù)約，也能觀看我歷史回放，或者直接在直播間購(gòu)買。

……

觀眾端：

1. 能給我推薦感興趣的分類，讓我知道這個(gè)直播的主題是什么？
2. 能讓我知道這個(gè)直播間在賣哪些商品？有哪些人再看？哪些人再買？大家對(duì)這個(gè)商品評(píng)價(jià)怎么樣？
3. 能讓我跟主播互動(dòng)，讓他解答我的問(wèn)題，能實(shí)時(shí)展示我想買的商品給我看。
4. 能讓我關(guān)注這個(gè)主播，成為她的好友。
5. 能讓我購(gòu)買時(shí)不要關(guān)閉直播，直接購(gòu)買

……

當(dāng)然觀眾的場(chǎng)景訴求還有很多的…

設(shè)計(jì)直播電商直播間模塊

直播間模塊是相當(dāng)復(fù)雜的部分，它包括的細(xì)節(jié)有很多。為了直播間的可擴(kuò)展性和可維護(hù)性，我們要在初期就搭建好直播間框架。在具體設(shè)計(jì)直播間模塊前，我們要先定義幾個(gè)層面的問(wèn)題，這些問(wèn)題是解決直播間交互設(shè)計(jì)的基礎(chǔ)。

1. 直播間狀態(tài)問(wèn)題
2. 直播間權(quán)限問(wèn)題
3. 直播間視覺(jué)問(wèn)題
4. 直播間模塊問(wèn)題
5. 直播間層級(jí)問(wèn)題
6. 直播間交互問(wèn)題

直播間狀態(tài)

直播間分為直播中、直播回放、未直播三種狀態(tài)，每種狀態(tài)顯示的元素和交互都是不同的。而且直播間幾種狀態(tài)間是可以相互轉(zhuǎn)變的，比如主播直播結(jié)束，正在看的直播變成了未直播狀態(tài)，正在看直播回放，系統(tǒng)提醒該主播正在直播，點(diǎn)擊切換到直播中狀態(tài)等等。

直播間權(quán)限

直播間權(quán)限主要指操作權(quán)限，主播端一般根據(jù)角色分配功能權(quán)限，用戶端會(huì)根據(jù)是否登錄、用戶等級(jí)、用戶身份等判斷是否有操作功能權(quán)限，與下面的直播間視覺(jué)有關(guān)聯(lián)性。比如關(guān)聯(lián)主播才可以領(lǐng)紅包。（我在另一篇文章《當(dāng)直播和紅包結(jié)合，會(huì)碰撞出怎樣的火花》中有介紹過(guò))

直播間視覺(jué)

直播間一般分為主播端和觀眾端，有時(shí)主播端還要基于角色和權(quán)限進(jìn)行細(xì)分，不同的權(quán)限可使用的功能也是不同的。一般主播端可有的功能包括：

1. 對(duì)商品的管理
2. 對(duì)交易的查看
3. 對(duì)直播間用戶的管理
4. 對(duì)直播間互動(dòng)玩法的控制
5. 對(duì)直播間的設(shè)置和數(shù)據(jù)查看

觀眾端可以有的功能包括：

1. 聊天、點(diǎn)贊、打賞等
2. 商品瀏覽、購(gòu)買等
3. 對(duì)直播間活動(dòng)的參與等

直播間模塊

接下來(lái)就要對(duì)直播間模塊進(jìn)行劃分了，不論是怎樣用戶角色，我們?cè)诙x和設(shè)計(jì)直播間模塊時(shí)，要考慮技術(shù)維護(hù)角度和用戶認(rèn)知角度。保證直播間視覺(jué)展示的模塊統(tǒng)一。除此之外，受到直播設(shè)備和操作行為的影響，直播間的模塊和布局也會(huì)有些不同，比如主播用攝像機(jī)直播或電腦直播，畫面在手機(jī)上顯示是半截，又比如用戶用橫屏觀看直播等。這些因素我們暫不在這篇文章考慮，這里只討論手機(jī)直播且無(wú)橫屏的情況。

在直播間模塊劃分上，我們可以定義了11個(gè)模塊，他們分別是：

1. 基本信息展示區(qū)域
2. 收益統(tǒng)計(jì)展示區(qū)域
3. 活動(dòng)位展示區(qū)域
4. 動(dòng)效位展示區(qū)域
5. 商品消息提醒展示區(qū)域
6. 任務(wù)互動(dòng)展示區(qū)域
7. 互動(dòng)消息展示區(qū)域
8. 商品快捷推薦展示區(qū)域
9. 直播間按鈕操作區(qū)域
10. 購(gòu)買及打賞動(dòng)效區(qū)域
11. 點(diǎn)贊互動(dòng)區(qū)域

每個(gè)區(qū)域代表什么意思呢，先別急，我們后面再介紹，先看完其他幾個(gè)問(wèn)題的定義。

直播間層級(jí)

直播間還有層級(jí)？那是肯定有的。技術(shù)角度上，實(shí)現(xiàn)這么多功能都是一層層開(kāi)發(fā)的，尤其上面這些模塊很多元素都會(huì)有重疊的部分，在遇到重疊時(shí)肯定要定義誰(shuí)上誰(shuí)下的問(wèn)題。比如動(dòng)效和直播畫面誰(shuí)在上，這個(gè)答案肯定是動(dòng)效要在直播畫面上面飛，在下面就看不到動(dòng)效了。在定義層級(jí)時(shí)我們要根據(jù)元素重要性來(lái)判斷，一般遵循的原則是：

1. 重要信息在上，次要信息在下
2. 按鈕操作大于展示信息
3. 商品類大于互動(dòng)類大于統(tǒng)計(jì)類

所以，我們建議的規(guī)則是如下：

直播畫面最底層＜直播間基本數(shù)據(jù)＜直播間聊天消息＜直播間動(dòng)畫消息＜直播間可點(diǎn)擊按鈕

在直播間可點(diǎn)擊按鈕上，又會(huì)有細(xì)分。

基本點(diǎn)擊按鈕（關(guān)注等）＜統(tǒng)計(jì)點(diǎn)擊按鈕（收益等）＜互動(dòng)點(diǎn)擊按鈕（秒殺紅包等）＜商品點(diǎn)擊按鈕（商品展示等）＜彈框點(diǎn)擊按鈕（輸入框/商品列表等）

當(dāng)然，在技術(shù)實(shí)現(xiàn)上，有時(shí)還需單獨(dú)處理當(dāng)A在B上面，但A屬于展示，B屬于操作的情況。此時(shí)點(diǎn)擊A區(qū)域應(yīng)該觸發(fā)下面的B操作。比如 當(dāng)有個(gè)購(gòu)買動(dòng)畫在關(guān)注按鈕上時(shí)，此時(shí)為了視覺(jué)不能讓按鈕懸浮在動(dòng)畫上面 – 影響視覺(jué)體驗(yàn)！于是就要讓動(dòng)畫在按鈕上面展示，但點(diǎn)擊時(shí)其實(shí)動(dòng)畫無(wú)點(diǎn)擊行為，所以觸發(fā)的是底部關(guān)注按鈕。

直播間交互

直播間交互的設(shè)計(jì)要盡量保證直播間內(nèi)展示和操作，不要跳出直播間。想象下當(dāng)你在看電影時(shí)，彈出來(lái)一個(gè)廣告，點(diǎn)擊下跳到第三方頁(yè)面，視頻沒(méi)了，你是什么感受？所以盡量保證查看資料，點(diǎn)擊操作等都是在直播間內(nèi)進(jìn)行，最好的方式就是在直播間上彈框，不中斷直播。

一般直播間的彈框又分成三種：

1. 底部彈框：只顯示在底部，一般占據(jù)整 屏幕 1/3 或1/2的位置。這樣的設(shè)計(jì)優(yōu)勢(shì)時(shí)仍能看到主播的展示畫面，弊端是看不到底部的消息了。
2. 中間彈框：在直播正中間展示，大小根據(jù)需要進(jìn)行調(diào)整。這樣展示的好處時(shí)能看到底部的消息模塊，但是主播展示的畫面看不到。當(dāng)然可以做成半透明的來(lái)降低影響。
3. 全劇彈框：覆蓋在直播間上面，這樣的弊端不用說(shuō)，啥都看不到了。好處在于能展示更多信息，跟瀏覽一個(gè)新頁(yè)面一樣的體驗(yàn)。

一般商品展示、直播間互動(dòng)操作等連貫性長(zhǎng)時(shí)間操作都采用第一種方式；消息提醒、基本資料等一次性或短時(shí)間展示都采用第二種；第三種一般是活動(dòng)介紹、個(gè)人主頁(yè)展示、第三方網(wǎng)站展示等才會(huì)使用。

小屏幕播放

除了這些外，還有一種特別重要說(shuō)明的交互行為，那就是商品下單，如何實(shí)現(xiàn)邊看直播邊下單的一站式購(gòu)物體驗(yàn)？當(dāng)我們需要對(duì)商品詳情進(jìn)行瀏覽時(shí)，采用上面第三種彈框方式固然是好，但商品瀏覽涉及到多種交互模式，用戶隨時(shí)可能在商品詳情查看大圖，點(diǎn)擊跳轉(zhuǎn)到其他頁(yè)面等操作。再者下單過(guò)程也涉及到不可遇見(jiàn)的交互體驗(yàn)，如填寫收貨地址、選擇優(yōu)惠券、支付等。用這種方式實(shí)現(xiàn)不能說(shuō)不可能，但代價(jià)很高，幾乎是不可能了。

所以在這里就是要介紹“小屏幕”模式來(lái)實(shí)現(xiàn)。直播視頻可以跟著播放器變大變小，懸浮在頁(yè)面上方，可拖動(dòng)。這種切換小屏幕的場(chǎng)景觸發(fā)由用戶是否瀏覽商品詳情決定，整個(gè)過(guò)程不影響直播進(jìn)行。在瀏覽頁(yè)面時(shí)隨時(shí)都可以點(diǎn)擊小屏幕切換回直播間。

ok，定義完上面的問(wèn)題后，我們接下來(lái)回到上面提到的11個(gè)直播間模塊中，詳細(xì)看看每個(gè)模塊都包含哪些信息。

1、基本信息展示區(qū)域

這里主要說(shuō)清楚三件事，誰(shuí)在直播、直播什么，直播數(shù)據(jù)即可。所以這里會(huì)有以下幾個(gè)元素

• 主播信息：一個(gè)頭像和直播間id即可，點(diǎn)擊頭像能彈框展示更多信息。
• 直播主題：包括分類和直播狀態(tài)，讓用戶直播這個(gè)直播間在講什么。
• 直播數(shù)據(jù)：觀看數(shù)，點(diǎn)贊數(shù)。讓主播和用戶知道這個(gè)房間在線數(shù)，主播能根據(jù)人數(shù)進(jìn)行互動(dòng)和直播策略調(diào)整。
• 分享入口：可分享到第三方社交平臺(tái)在網(wǎng)頁(yè)端瀏覽觀看。

2、收益統(tǒng)計(jì)展示區(qū)域

這里主要給主播和用戶看到該直播購(gòu)買狀況，這里收益包括打賞和訂單收益一起。用戶當(dāng)然愿意對(duì)買的人多和熱鬧的直播感冒，主播看到收益也會(huì)激勵(lì)自己好好去播。

因?yàn)槭巧缃浑娚?，這里點(diǎn)開(kāi)后會(huì)出現(xiàn)排行榜，排行榜能促成買家對(duì)高銷量衣服進(jìn)行跟風(fēng)，也能互相關(guān)注彼此成為好友。

3、活動(dòng)位展示區(qū)域

活動(dòng)位主要指在直播間配置的活動(dòng)內(nèi)容。一般由平臺(tái)統(tǒng)一控制，用戶可點(diǎn)擊直接在直播間內(nèi)瀏覽參加活動(dòng)。每個(gè)直播間都充當(dāng)了宣傳入口，試想一下，直播間是可以分享移動(dòng)的，如果每個(gè)直播有10萬(wàn)人在線觀看，100個(gè)直播就是1000萬(wàn)人。后臺(tái)配置一個(gè)活動(dòng)和廣告就能被曝光1000萬(wàn)次，這是何等重要的流量和變現(xiàn)位置，也方便平臺(tái)活動(dòng)推廣的參與度。

這里的交互可以做成輪播滾動(dòng)，將app 的banner入口縮小放到這里。

4、動(dòng)效位展示區(qū)域

這里的動(dòng)效指在直播間飛出的動(dòng)畫效果，用以提醒強(qiáng)化。一般是打賞動(dòng)效和購(gòu)買動(dòng)效。

5、商品消息提醒展示區(qū)域

這里的交互是動(dòng)態(tài)變化的，用以對(duì)商品的提示。主播端點(diǎn)擊某個(gè)商品時(shí)，用戶就能快速在這個(gè)位置看到這個(gè)商品，點(diǎn)擊后即可瀏覽詳情進(jìn)行購(gòu)買。一般持續(xù)幾十秒就消失。

6、任務(wù)互動(dòng)展示區(qū)域

直播間有很多互動(dòng)玩法和促銷玩法，但這些功能需要由主播端開(kāi)啟才會(huì)展示。比如主播發(fā)起了一個(gè)商品的拼團(tuán)活動(dòng)，這個(gè)區(qū)域就會(huì)出現(xiàn)該拼團(tuán)入口。直播本身是一種工具，幫助主播更好的進(jìn)行互動(dòng)和變現(xiàn)，所以越豐富的互動(dòng)玩法和促銷手段越能幫助主播更好的維護(hù)粉絲用戶。

7、互動(dòng)消息展示區(qū)域

直播消息是一個(gè)比較復(fù)雜的交互行為，對(duì)于消息的設(shè)計(jì)要注意以下幾個(gè)方面：

1. 消息樣式展示
2. 消息類型劃分
3. 消息重要性劃分
4. 消息提醒頻率
5. 消息點(diǎn)擊交互
6. 消息發(fā)送主體

直播電商的消息不像秀場(chǎng)需要熱鬧，不斷滾動(dòng)刷屏，更多需要重點(diǎn)突出問(wèn)答內(nèi)容和商品購(gòu)買。對(duì)打賞和其他提醒都可以弱化處理。

8、商品快捷推薦展示區(qū)域

這里可以根據(jù)商品上新的時(shí)間或者購(gòu)買熱度進(jìn)行推薦展示，可上下滑動(dòng)展示更多。目的是能讓用戶快捷看到上新和熱門的商品，點(diǎn)擊瀏覽。

9、直播間按鈕操作區(qū)域

直播間的操作基本都在底部位置，區(qū)分主播端和觀眾端。主播端更多是設(shè)置類，觀眾端更多是互動(dòng)參與類。

比如主播端可劃分為

1. 聊天：有時(shí)候關(guān)鍵信息 打字更容易記下來(lái)。
2. 私信：總有人想跟主播私信聊天，不要問(wèn)我為什么！
3. 設(shè)置：直播的設(shè)置入口
4. 互動(dòng)：直播間互動(dòng)玩法開(kāi)啟入口
5. 促銷：直播間促銷玩法開(kāi)啟入口
6. 上架：快速在直播時(shí)上架新商品
7. 商品庫(kù)：快速管理直播間商品，從店鋪關(guān)聯(lián)其它商品

10、購(gòu)買及打賞動(dòng)效區(qū)域

這個(gè)位置表示整個(gè)直播間區(qū)域，為了突出購(gòu)買和打賞的動(dòng)效，體驗(yàn)購(gòu)買者和打賞者的土豪面子，總得加一些重要的提醒。

11、點(diǎn)贊互動(dòng)區(qū)域

為了方便用戶點(diǎn)贊，只要手指點(diǎn)擊屏幕即可，不需要找到某個(gè)按鈕才可以點(diǎn)擊。

就這樣，整個(gè)直播間從模塊布局到功能交互邏輯基本就搭建完成，接下來(lái)就需要你根據(jù)公司具體的業(yè)務(wù)需求，在直播間各個(gè)模塊上定義不同的功能實(shí)現(xiàn)了。我們學(xué)會(huì)了怎么搭建和設(shè)計(jì)直播間后，可以基于直播間框架去設(shè)計(jì)出更多的功能玩法，把直播玩的淋漓盡致。

最后再總結(jié)下，本文基于直播電商的的特殊場(chǎng)景，從定義直播間的狀態(tài)、權(quán)限、視覺(jué)、模塊、層級(jí)、交互開(kāi)始分析，再根據(jù)模塊分類及原則具體分析了每個(gè)模塊的信息設(shè)計(jì)思路，從而實(shí)現(xiàn)完整直播電商的直播間框架搭建。

作者：水度力子，微信公眾號(hào)：jdccPM，一年咨詢顧問(wèn)，兩年產(chǎn)品經(jīng)驗(yàn)。曾就職世界500強(qiáng)外企，兩年創(chuàng)業(yè)經(jīng)歷。產(chǎn)品，運(yùn)營(yíng)，咨詢分析。

本文由 @水度力子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS，基于 CC0 協(xié)議