雷火UX | GDC2022演讲实录：助力游戏策划分析，如何开发一个在线透视图表工具

GDC 2022

今年3月21日至3月25日，全球游戏行业最具规模、最有权威、最有影响力的专业峰会GDC2022在旧金山莫斯康中心盛大召开。本届GDC中，雷火UX共获邀17场演讲，分布在9个核心演讲以及8个峰会演讲，再度刷新中国游戏行业纪录，领跑全球。

接下来雷火UX公众号将陆续为大家进行介绍。本篇为大家介绍的是来自雷火UX资深工具开发工程师易初&雷火UX项目经理越后的演讲——“助力游戏策划分析：如何开发一个在线透视图表工具”，以下是演讲实录。

摘要 ❂

本篇演讲主要针对很多工作室都会存在的一个问题展开：游戏策划往往需要游戏数据支持决策，但获取数据本身将消耗大量数据工程师的时间实现个性化拉取。该过程将耗费大量的时间和人力成本。为了培养策划的数据思维，同时节约成本，我们提出了一个解决方案：开发一个在线自主取数平台，使得一位不熟悉数据库编程的策划也能够快速自主获取想要的数据。同时解放数据工程师，使他们投入更有价值的工作。本篇演讲将从设计思路和工程实现两个方面详细介绍该工具如何节省人力和时间成本，以及如何利用工具帮助策划建立数据思维，激励设计师创新。此外，演讲也将分享如何用最小的时间成本高效开发一个相似技术栈的工具，以及一些开发时的经验心得。最后，演讲将向听众提出如何在小型工作室复用类似工具的一些建议。

我们遇到的问题

在我们的工作流程中，数据驱动决策对于策划而言已是常规行为。数据是能够最直接客观反馈大规模用户使用习惯的因素。策划往往也会向工程师提出大量数据需求支持决策。但我们的数据工程师需要时间去处理更有价值的工作，频繁的数据需求将耗费团队大量的人力资源处理取数需求。在我们团队，三种传统方式都需要策划、数据产品经理和数据工程师通力合作。都将耗费大量人力成本。

我们工具设计的核心思路是，将原始数据与策划进行直接桥接，跳过中间复杂的沟通流程。让策划能够可定制化地获取到想要的数据并在线进行分析。在半小时内完成数据需求，并驱动决策。

设计思路

对于部分不熟悉数据库实现逻辑和语句的策划，让他们直接手写数据库代码是不现实的。我们已经订立了一些数据表格的中间规范，以规范策划的需求格式，降低中间成本。但我们希望更进一步，将策划的可定制化的需求从自然语言形式直接转化为可查询的SQL语句。做到无需任何沟通，由策划快速高效独立完成数据拉取，分析，最终决策等一系列流程。

在这个目标下，我们制定了5W规则来形式化处理策划的数据需求。我们的5W包括：

Who：查询的对象
Whom：对于对象的描述和限制
What：需要查询的信息
When：查询的时间范围
Where：查询的服务器范围

通过5W模式，我们将策划口语化的数据需求转化为需要在数据库内查询的字段。通过逐步提出5个问题，让策划回头思考需求逻辑。反向培养策划的数据思维和对问题的分析能力。

同时，我们通过透视表的形式呈现数据，让策划直观地查看自己的查询结果，并在工具中完成数据的在线分析和决策。

开发部分

在明确了我们工具的设计思路之后就开始开发了，我们这是个Web类型的工具，所以我们的工具栈都是采用比较主流的Web技术，前端用的React、TypeScript、 immer、Redux、Ant-Design等，后端用的Django框架。

关于透视表，一开始打算的想要找一个开源的透视表组件来快速完成开发，但是在Github等社区寻找后发现并没有合适我们开源组件，之后便快速决定用 Ant-Design 的Table组件来扩展实现透视表效果。

但任何技术都不是完美的，在实现透视表的过程中我们也遇到了一些问题，其中前端后端都遇到一些挑战，这里挑几个前端的问题分享出来。

第一个问题是如何实现表格顶部和左侧的序号

很多开源的透视表组件都没有透视表格的序号，但是Excel有序号，我们的策划也想要序号。Ant-design实现这个很简单，我们只需要把第一列设置成数字序号列，数字大小根据数据长度进行递增就能实现数字序号。顶部的顺序，我们把字母设置成表头的值就可以了，如果超过26列我们就使用 AA, BB 这种形式。

第二个问题是表头设置和数据处理

透视表一般都是查看row, column,value三维数据的，普通的表格只能看二维的数据，所以我们需要让antd-design这个Table组件可以查看多维的数据。利用ant-design Table组件表头可以嵌套的特性，我们通过表头嵌套把column的值放到表头里，row和value的数据就正常显示，这样很快就把透视表最基本的row, column, value数据展示在我们的表格里了。很多人可能觉得表头只能放标题这些静态数据，但是我们要打破常规思维，这样能实现你意想不到的效果。

第三个问题是需要冻结表格的行和列

当表格数据很多的时候，选中某个数据后能冻结当前这一行和这一列，方便查看数据。这也是为什么我不选用其他开源透视表组件的原因，因为他们不提供这个功能，而且要实现起来很麻烦。ant-design Table组件默认支持冻结列，我们只需要通过监听点击事件，利用css代码就可以冻结这一行了。下面这个图就是我们添加冻结行列之后的效果，不用担心数据太多滚动之后找不到我们要看的数据了。