教你从0到1，搭建直播电商的直播间模块

 

直播间是直播的核心模块，也是基于直播场景的所有互动和展示的承载模块。直播随着发展已经逐步演化成“直播+”的模式，传统秀场都纷纷加入了游戏、电商、综艺、会场等直播内容。但秀场直播和电商直播本身就有着基因上的区别。本文主要想基于直播电商的产品形态跟大家分享下如何搭建直播电商的直播间模块。

直播电商和传统秀场直播有很大的不同，主要体现在

1. 用户诉求不同
2. 直播场景不同
3. 产品形态不同

用户诉求上，传统秀场直播更多倾向于社交互动，用户主要围绕主播的来观看直播，其核心在主播上。直播电商更多是在社交基础上的电商交易，用户主要围绕商品来观看直播，其核心在商品上。

直播场景上，传统秀场直播更多需要依靠主播的“秀”和“演”才能维持直播内容。直播电商更多是需要对商品的“讲解”和“展示”来跟用户互动及解答，加上促销和游戏的玩法来对用户进行激励。

产品形态上，传统秀场直播更多需要思考如何将用户留在直播间。直播电商更多考虑是如何让用户边看边买，打造从看直播到浏览商品，从浏览商品到购买完成再回到直播间的一站式购物体验。

基于上面的分析我们可以看到，直播电商其直播间模块的核心是要思考如何为用户营造边看边买的一站式购物体验。我们依旧基于用户场景出发，来探索如何设计直播电商的直播间功能。本文主要分为以下两个部分：

1. 探索直播电商的用户场景
2. 设计直播电商的直播间模块

直播电商的用户场景

先来看下直播电商解决的问题有哪些？

传统电商解决商品接入和在线展示的问题，通过搜索、分类、商品详情页 三大利器让人们能在网上进行购物，随着商品类目的越来越多，商品内容同质化越来越严重，人们筛选的难度逐步增加。之后，筛选就变成了传统电商平台解决的第一大难题。

如何让用户快速的筛选到自己想要的商品，又能快速经过判断下单购买。于是推荐系统是大家常玩的手法了，你能在淘宝上搜索到想要购买的商品，淘宝在背后的算法已经帮助你做了很多事情。但尽管如此，淘宝还没有从根本上解决下面几个问题：

• 用户购买商品时横向对比的困扰。我们根据商品详情图、根据评论、根据打分很多因素综合评价该买哪一件衣服，对于选择困难症患者来说简直是要命。
• 用户购买到商品后的买家秀问题。明明网上图片那么好看，为什么我穿在身上就是大妈级别的。
• 商家店铺成效率头部效应问题。成交量多的商家越来越多，少的商家一直都少。

而直播电商正好是解决这几个问题的。

首先，直播电商让用户从自主筛选变成达人推荐选择，就像你要买车，没有专业的人告诉你每个车的差别，你又怎么能找到自己的定位呢？比如买衣服，如果没有一个穿衣达人直播告诉你今年夏天最流行的搭配方式是什么，你是不是又买了去年的流行款了呢。

其次，直播电商中，主播大都是各领域的达人，都会在直播中展示商品，通过直播可以全方位了解商品的特点，还可以实时互动答疑。比如衣服 直播时会找不同身材比例的模特亲自试穿，你可以根据自己的身材选择挑选尺码，甚至还可以直接问主播自己适合什么。

最后，直播电商是以直播间为核心的“移动式电商平台”，每个直播间都是一个小中心。不存在卖得少就没有展示的机会。当然直播电商还有解决很多其他方面场景购物的问题，这里就不一样详述了。

那直播电商的用户场景包括哪些呢？我在另一篇文章《如何设计直播电商的场景状态》中有写过，感兴趣的同学可以去读一下。这里只列举跟直播间有关的场景。

我们从主播端和观众端分开来看。

主播端：

1. 直播时，能让我快速上架商品，对某些商品进行展示。提醒用户一键购买。
2. 直播时，能让我实时了解直播间用户数据，包括直播售卖的情况。根据数据来调整讲解内容的策略。
3. 直播时，能让我看到用户提问的问题，能实时给他们解答。
4. 直播时，能给我提供一些活跃房间的游戏或者玩法。比如发优惠券、红包等。
5. 直播时，能让我进行营销活动，比如秒杀、拼团等玩法，促进转化。
6. 直播时，能让直播间用户关注我成为我的粉丝，下次直播还能通知他们。最好能让他们知道我的微信/微博，加为好友。
7. 未直播时，能让用户知道我下一场直播提前预约，也能观看我历史回放，或者直接在直播间购买。

……

观众端：

1. 能给我推荐感兴趣的分类，让我知道这个直播的主题是什么？
2. 能让我知道这个直播间在卖哪些商品？有哪些人再看？哪些人再买？大家对这个商品评价怎么样？
3. 能让我跟主播互动，让他解答我的问题，能实时展示我想买的商品给我看。
4. 能让我关注这个主播，成为她的好友。
5. 能让我购买时不要关闭直播，直接购买

……

当然观众的场景诉求还有很多的…

设计直播电商直播间模块

直播间模块是相当复杂的部分，它包括的细节有很多。为了直播间的可扩展性和可维护性，我们要在初期就搭建好直播间框架。在具体设计直播间模块前，我们要先定义几个层面的问题，这些问题是解决直播间交互设计的基础。

1. 直播间状态问题
2. 直播间权限问题
3. 直播间视觉问题
4. 直播间模块问题
5. 直播间层级问题
6. 直播间交互问题

直播间状态

直播间分为直播中、直播回放、未直播三种状态，每种状态显示的元素和交互都是不同的。而且直播间几种状态间是可以相互转变的，比如主播直播结束，正在看的直播变成了未直播状态，正在看直播回放，系统提醒该主播正在直播，点击切换到直播中状态等等。

直播间权限

直播间权限主要指操作权限，主播端一般根据角色分配功能权限，用户端会根据是否登录、用户等级、用户身份等判断是否有操作功能权限，与下面的直播间视觉有关联性。比如关联主播才可以领红包。（我在另一篇文章《当直播和红包结合，会碰撞出怎样的火花》中有介绍过)

直播间视觉

直播间一般分为主播端和观众端，有时主播端还要基于角色和权限进行细分，不同的权限可使用的功能也是不同的。一般主播端可有的功能包括：

1. 对商品的管理
2. 对交易的查看
3. 对直播间用户的管理
4. 对直播间互动玩法的控制
5. 对直播间的设置和数据查看

观众端可以有的功能包括：

1. 聊天、点赞、打赏等
2. 商品浏览、购买等
3. 对直播间活动的参与等

直播间模块

接下来就要对直播间模块进行划分了，不论是怎样用户角色，我们在定义和设计直播间模块时，要考虑技术维护角度和用户认知角度。保证直播间视觉展示的模块统一。除此之外，受到直播设备和操作行为的影响，直播间的模块和布局也会有些不同，比如主播用摄像机直播或电脑直播，画面在手机上显示是半截，又比如用户用横屏观看直播等。这些因素我们暂不在这篇文章考虑，这里只讨论手机直播且无横屏的情况。

在直播间模块划分上，我们可以定义了11个模块，他们分别是：

1. 基本信息展示区域
2. 收益统计展示区域
3. 活动位展示区域
4. 动效位展示区域
5. 商品消息提醒展示区域
6. 任务互动展示区域
7. 互动消息展示区域
8. 商品快捷推荐展示区域
9. 直播间按钮操作区域
10. 购买及打赏动效区域
11. 点赞互动区域

每个区域代表什么意思呢，先别急，我们后面再介绍，先看完其他几个问题的定义。

直播间层级

直播间还有层级？那是肯定有的。技术角度上，实现这么多功能都是一层层开发的，尤其上面这些模块很多元素都会有重叠的部分，在遇到重叠时肯定要定义谁上谁下的问题。比如动效和直播画面谁在上，这个答案肯定是动效要在直播画面上面飞，在下面就看不到动效了。在定义层级时我们要根据元素重要性来判断，一般遵循的原则是：

1. 重要信息在上，次要信息在下
2. 按钮操作大于展示信息
3. 商品类大于互动类大于统计类

所以，我们建议的规则是如下：

直播画面最底层＜直播间基本数据＜直播间聊天消息＜直播间动画消息＜直播间可点击按钮

在直播间可点击按钮上，又会有细分。

基本点击按钮（关注等）＜统计点击按钮（收益等）＜互动点击按钮（秒杀红包等）＜商品点击按钮（商品展示等）＜弹框点击按钮（输入框/商品列表等）

当然，在技术实现上，有时还需单独处理当A在B上面，但A属于展示，B属于操作的情况。此时点击A区域应该触发下面的B操作。比如 当有个购买动画在关注按钮上时，此时为了视觉不能让按钮悬浮在动画上面 – 影响视觉体验！于是就要让动画在按钮上面展示，但点击时其实动画无点击行为，所以触发的是底部关注按钮。

直播间交互

直播间交互的设计要尽量保证直播间内展示和操作，不要跳出直播间。想象下当你在看电影时，弹出来一个广告，点击下跳到第三方页面，视频没了，你是什么感受？所以尽量保证查看资料，点击操作等都是在直播间内进行，最好的方式就是在直播间上弹框，不中断直播。

一般直播间的弹框又分成三种：

1. 底部弹框：只显示在底部，一般占据整 屏幕 1/3 或1/2的位置。这样的设计优势时仍能看到主播的展示画面，弊端是看不到底部的消息了。
2. 中间弹框：在直播正中间展示，大小根据需要进行调整。这样展示的好处时能看到底部的消息模块，但是主播展示的画面看不到。当然可以做成半透明的来降低影响。
3. 全剧弹框：覆盖在直播间上面，这样的弊端不用说，啥都看不到了。好处在于能展示更多信息，跟浏览一个新页面一样的体验。

一般商品展示、直播间互动操作等连贯性长时间操作都采用第一种方式；消息提醒、基本资料等一次性或短时间展示都采用第二种；第三种一般是活动介绍、个人主页展示、第三方网站展示等才会使用。

小屏幕播放

除了这些外，还有一种特别重要说明的交互行为，那就是商品下单，如何实现边看直播边下单的一站式购物体验？当我们需要对商品详情进行浏览时，采用上面第三种弹框方式固然是好，但商品浏览涉及到多种交互模式，用户随时可能在商品详情查看大图，点击跳转到其他页面等操作。再者下单过程也涉及到不可遇见的交互体验，如填写收货地址、选择优惠券、支付等。用这种方式实现不能说不可能，但代价很高，几乎是不可能了。

所以在这里就是要介绍“小屏幕”模式来实现。直播视频可以跟着播放器变大变小，悬浮在页面上方，可拖动。这种切换小屏幕的场景触发由用户是否浏览商品详情决定，整个过程不影响直播进行。在浏览页面时随时都可以点击小屏幕切换回直播间。

ok，定义完上面的问题后，我们接下来回到上面提到的11个直播间模块中，详细看看每个模块都包含哪些信息。

1、基本信息展示区域

这里主要说清楚三件事，谁在直播、直播什么，直播数据即可。所以这里会有以下几个元素

• 主播信息：一个头像和直播间id即可，点击头像能弹框展示更多信息。
• 直播主题：包括分类和直播状态，让用户直播这个直播间在讲什么。
• 直播数据：观看数，点赞数。让主播和用户知道这个房间在线数，主播能根据人数进行互动和直播策略调整。
• 分享入口：可分享到第三方社交平台在网页端浏览观看。

2、收益统计展示区域

这里主要给主播和用户看到该直播购买状况，这里收益包括打赏和订单收益一起。用户当然愿意对买的人多和热闹的直播感冒，主播看到收益也会激励自己好好去播。

因为是社交电商，这里点开后会出现排行榜，排行榜能促成买家对高销量衣服进行跟风，也能互相关注彼此成为好友。

3、活动位展示区域

活动位主要指在直播间配置的活动内容。一般由平台统一控制，用户可点击直接在直播间内浏览参加活动。每个直播间都充当了宣传入口，试想一下，直播间是可以分享移动的，如果每个直播有10万人在线观看，100个直播就是1000万人。后台配置一个活动和广告就能被曝光1000万次，这是何等重要的流量和变现位置，也方便平台活动推广的参与度。

这里的交互可以做成轮播滚动，将app 的banner入口缩小放到这里。

4、动效位展示区域

这里的动效指在直播间飞出的动画效果，用以提醒强化。一般是打赏动效和购买动效。

5、商品消息提醒展示区域

这里的交互是动态变化的，用以对商品的提示。主播端点击某个商品时，用户就能快速在这个位置看到这个商品，点击后即可浏览详情进行购买。一般持续几十秒就消失。

6、任务互动展示区域

直播间有很多互动玩法和促销玩法，但这些功能需要由主播端开启才会展示。比如主播发起了一个商品的拼团活动，这个区域就会出现该拼团入口。直播本身是一种工具，帮助主播更好的进行互动和变现，所以越丰富的互动玩法和促销手段越能帮助主播更好的维护粉丝用户。

7、互动消息展示区域

直播消息是一个比较复杂的交互行为，对于消息的设计要注意以下几个方面：

1. 消息样式展示
2. 消息类型划分
3. 消息重要性划分
4. 消息提醒频率
5. 消息点击交互
6. 消息发送主体

直播电商的消息不像秀场需要热闹，不断滚动刷屏，更多需要重点突出问答内容和商品购买。对打赏和其他提醒都可以弱化处理。

8、商品快捷推荐展示区域

这里可以根据商品上新的时间或者购买热度进行推荐展示，可上下滑动展示更多。目的是能让用户快捷看到上新和热门的商品，点击浏览。

9、直播间按钮操作区域

直播间的操作基本都在底部位置，区分主播端和观众端。主播端更多是设置类，观众端更多是互动参与类。

比如主播端可划分为

1. 聊天：有时候关键信息 打字更容易记下来。
2. 私信：总有人想跟主播私信聊天，不要问我为什么！
3. 设置：直播的设置入口
4. 互动：直播间互动玩法开启入口
5. 促销：直播间促销玩法开启入口
6. 上架：快速在直播时上架新商品
7. 商品库：快速管理直播间商品，从店铺关联其它商品

10、购买及打赏动效区域

这个位置表示整个直播间区域，为了突出购买和打赏的动效，体验购买者和打赏者的土豪面子，总得加一些重要的提醒。

11、点赞互动区域

为了方便用户点赞，只要手指点击屏幕即可，不需要找到某个按钮才可以点击。

就这样，整个直播间从模块布局到功能交互逻辑基本就搭建完成，接下来就需要你根据公司具体的业务需求，在直播间各个模块上定义不同的功能实现了。我们学会了怎么搭建和设计直播间后，可以基于直播间框架去设计出更多的功能玩法，把直播玩的淋漓尽致。

最后再总结下，本文基于直播电商的的特殊场景，从定义直播间的状态、权限、视觉、模块、层级、交互开始分析，再根据模块分类及原则具体分析了每个模块的信息设计思路，从而实现完整直播电商的直播间框架搭建。

 

作者：水度力子

来源：jdccPM