直播间状态

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

直播间权限

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

直播间视觉

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

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