今天跟大家聊下销售数据实时统计大屏的功能设计。

01 整体方案

我们可以分四步。

1）背景

大屏的背景，这里可以有两种方法去处理。

一是采取一个成型的背景，图片和视频都可以，技术获取展示即可；

二是前端代码写一个背景，里面的内容是由代码完成展示的。

2）文案

大屏上的文案，包括了主题文案、辅助文案和区域文案。

主题文案，比如天猫“双十一”的销售额统计，主题文案就是：“2020年天猫双11全球狂欢季”和主要展示的成交额数据。

图片来源：2020天猫双11数据

辅助文案就是下面的一些辅助描述等，比如显示的时间，有些大屏内容比较多，这一类可能会省掉，看具体需求就好。

区域文案就是每个区域的内容比如下面的销售数据统计大屏，分了几个区域，每个区域的文案就是区域文案。

图片来源：网络

3）区域

很多销售大屏要展示多个信息，比如会分几个品牌区域展示，或者分平台、国家等，或者分销售额、销量、增长趋势，都是可能的。

因为这些需求，就会将一个大屏划分为多个区域，每个区域就需要单独去设计功能。

4）数据

也就是计算规则。即大屏需要展示的数据是由怎样的规则定义产生的，如果说划分为多个区域，或者多条文案数据，就会对应多个计算规则。

比如上面提到的2020年天猫双11狂欢季的大屏，成交额是一个计算规则，右边的每个数据也都有一个计算规则。

02 详细方案

按照上述整体方案的步骤来拆分下。

1）确定大屏框架

首先需要确定整体框架，对于大屏，你希望是怎样的展示，要有哪些数据展示等。

比如公司的抖音电商数据大屏，框架包括成交额、成交趋势图、流量来源等。当你确定好这些框架内容，就可以逐个拆分处理。

图片来源：网络

2）划分区域

第一步的框架确定好了，第二步就可以划分区域了。

区域有两部分：主区域和其他区域。

主区域位于大屏中间偏上的位置，一般内容较少，维度较高，只展示主要内容，文字相对偏大；

其他区域分布在主区域周围，一般内容较多，维度较细，文字也相对偏小。

图片来源：网络

3）确定背景&文案

背景和文案放在一起来看，需要搭配处理的。

前面有简单提到，背景有两种方案，成型的背景和技术代码。

直接采取一个成型的背景，对于技术端要求要低很多，更多的要求在设计这里。尤其是需要一个动态背景的时候，需要很高的设计要求了。

如果用动态背景，也就是放一个视频，这里可以采取放在局域网，加载快很多；如果线上就要考虑下加载缓存问题，毕竟视频还是很大的。

用前端的语言写一个背景很考验前端开发，耗时可能会更久，对于开发成本要考虑下，但是当开发完成后，灵活性会强很多。同时对于代码展示的背景，加载体验就好很多了。

4）计算规则

计算规则需要注意每个数值会对应一个规则，这里具体看待就好，对于销售数据大屏来说，这个算比较简单的。

比如2021年天猫双11的成交额，按规则就是：

下单日期：2021-11-11 00:00:00到2021-11-11 23:59:59；

订单状态：估计应该没有过滤，统计准确的可以去掉“取消”等状态；

成交额：汇总下单日期为上面的所有销售额（估计只是商品金额，不是最终用户的付款金额，我猜的）的合计，结果保留整数，如果到亿级别展示，结果保留到亿。

像我们公司Amazon黑五的销售额，是会去掉订单状态为“Cancelled”和销售渠道为“Non-amazon”的数据，并且销售额也不是商品金额，会加上一些税，减掉一些优惠金额，也就是客户实际付款金额。

5）设置定时任务&关键节点提示

这个数据是有定时任务脚本执行才出来的，节点如到10w展示庆祝画面。

一个原则：频次越快、间隔越短，数据越准确、及时。

举个例子：

设置定时任务，从2022年6月18号0点0分0秒开始执行，统计下单日期大于2022年6月18号0点0分0秒的全平台销售额字段合计，结果保留两位小数，展示在大屏的成交额位置，脚本每隔一分钟执行一次。

6）适配调整

这个需要设计和前端去处理，因为每个大屏的尺寸不一样，需要做成可适配调整的，如果内容比较多还是需要一定技术的。

最简单的就是直接在要展示的大屏上调整，把要展示的内容写完，前端开发按照大屏调整就好。

如果技术比较好的，就做个可以适配不同大小的屏幕的，灵活性会更强。

希望简单的一些文字对大家产品方面的学习有些帮助。