第一次做直播室礼物道具，是一种怎样的体验？

1.我们为什么要做直播室礼物道具？

那是2016年10月中旬我接到了一个来自于产品经理的需求，直播室要做打赏老师礼物道具的功能。前面其实也做了给老师打赏的功能，只是功能形式比较单一，只能以形式的红包打赏。

现在改成以道具的形式打赏给老师，第一是改用虚拟币金豆，而不是赤裸的金钱形式， 第二是通过增加互动的娱乐性来增加用户与直播室粘性，第三是当礼物道具打赏较多时也是对直播室老师专业的某种肯定，同时也是激励直播老师产出更好的策略。

2.如何做直播室礼物道具呢？

首先先研究了一下目前主流的直播平台：YY，映客，花椒，陌陌等。这类是做的比较成熟的平台，虽然不是同行业，但在礼物道具这块还是很有参考性的。同行业做礼物道具的很少，主流平台已足够作为此次项目的需要去研究。

在体验过几大主流平台赠送礼物道具后，总结赠送流程大致如下：

根据前面的分析研究设计赠送礼物的流程：

以及充值流程：

首先，大致的赠送流程以及充值流程是保持一致的。那在在交互细节上有什么区别呢？

1.直播页面与互动页面赠送礼物的区别

当赠送礼老师礼物之后，赠送纪录只能在互动页面显示，直播页面不显示。因为直播页面是比较重要的信息流，内容只有老师的发言，在用户打赏较多时赠送纪录会造成刷屏的现象，影响用户查阅老师对行情的解析内容，而互动页面是用户间的互动，比较频繁，赠送记录频繁显示会凸显直播室的的活跃度。另外，直播页面老师的头像及发言都在屏幕左边，所以赠送的礼物条会从屏幕右边出现，以免干扰直播内容。

2.礼物弹窗查看更多老师和礼物的交互方式

移动端屏幕有限，而且与别的平台不同的是我们的直播室有多位老师，在赠送礼物之前会先选择你想要送礼物的老师，所以在礼物弹窗上只有老师和礼物各一条的布局位置。一屏显示的老师和礼物数量有限，查看更多老师和礼物我们想了两种交互方式：

a.在中间分割线上加箭头表示滑动。这个方案有些同事反映看不出来是可以滑动的，自己斟酌后确实滑动表达不够强烈。

b.在老师和礼物下面加页面指示器。综合下来这个方案指示明确，滑动可以查看更多礼物和老师，而且视觉上也比较自然，较于前两个方案是最合适的。

3.连送button的交互方式

连送的交互，借鉴了一下陌陌直播的交互表达方式，将连送的button设计的炫酷一点，刺激用户去点击连送。用户赠送完某个礼物后，礼物会变成连送的button，在3s内若不点击连送，则连送button会消失。

但直播室礼物道具上线后，我们发现了一个问题，很少用户会去点击连送。后来我们总结下了原因，因为第一赠送按钮在送出礼物之后会变灰赠送按钮是不可点击的，第二连送按钮是从某礼物位置变化的而不是原先的赠送位置，所以导致大部分用户不知道那个连送动态button是可以点击的。

针对这个我们后面做了改进，在赠送礼物之后原位置变为连送button，而且button的设计更像可以点击的并加入了时间的倒计时，给用户一个连送按钮消失事件的预期。

其次，礼物道具的视觉设计

第一在礼物的icon设计上面，采用比较适中的设计表达形式，既不是太写实，精雕细琢，也不是看上去太简单，没有细节，第二在细节上面，比如礼物的button以及排行榜的排名icon都进行了细化。

最后是礼物的动效设计

礼物的大动效有瀑布、火箭、金牌讲师、别墅，根据她们的物理特性和价格设置而设计。比如像瀑布和火箭，模拟它们物理世界的真实效果，瀑布设计成快速的流水跌落效果，火箭在云的衬托下冲向天空，像别墅价格设置比较贵，打赏人数会比较少，动画设计的动静比较大，意境是拨开云雾，有别墅，有鸟，有云，表达世外桃源的境界感，满足花了大价钱打赏老师的用户心理。

3.如何与开发沟通上线

动画内存压缩与格式研究

在动画输出到开发那边碰到的最大问题就是内存和动画的格式问题，对于礼物的大动效来说，第一个提供png序列图片显然是不合适的，因为3s的动画png序列图片比较多，减帧的话导致动画不够流畅，而且图片累计内存还是很大。

第二个是gif格式，gif格式有一个弊端，导出的动态图形若选择不带杂边，则会有锯齿，不然就是带有杂边，其次在无数次的压缩内存与对比效果来看，所能接受的动态效果内存占比最低还是在1M左右（6p下），对app来说还是太大。

第三个就是研究到了一种新型的图片格式webp格式，谷歌开发的一种旨在加快图片加载速度的图片格式，在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%，最后权衡下来，提供给开发animated webp文件也就是动态的webp文件，先选择带相近背景色的gif文件，然后利用国外格式转换网站，转化成animated webp文件，同样的动画，内存占比到200k左右（6p下），而且视觉效果也可以接受。

总结：在这次直播室项目中也有一些遗憾存在，比如预先没有估计开发的难度，应该较前做比较精细的交互稿，可以加快开发的进度，动画效果还可以继续优化研究比较能出效果但规律的运动，现在显得不够统一，在这次项目中也收获了不少，比如看似不太复杂的流程其实还有很多细节的交互值得注意，对AE动画表现感觉又精进了一步，对不同格式的图片优缺点及适用范围又有了进一步的了解。