从零开始设计数据大屏—基于Vue ZT

虽然已经决定这个项目用Wyn来做了，但是，了解一下如何从头开始写一个数据大屏还是挺有好玩的。

 

-------------

 

为什么要做数据大屏？

现如今的大数据逐渐发挥出了它的力量，并无形的改变着我们的生活。但大数据在不是从事技术开发的人来说没有很明显的感受，很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上、知乎2017年解锁的知识成就、微信新年的个人社交分析、支付宝的年终账单等。其迫切的需要通过一些媒介展现数据的威力，而数据大屏作为大数据展示媒介的一种，广泛运用于各种展示厅、会展、发布会及各种狂欢节中，其中不乏一些通用的处理方案：阿里巴巴集团的DataV产品。其大屏有多种主题，提供多种模版，设计的非常的震撼，DataV也用于展现历年双十一的盛况。

而公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，因此需求孕育而生。下面的截图是产品迭代四次之后在公司大屏展示厅的照片，第五次迭代还在开发中。

 

公司数据大厅照片

用Vue做基础的框架是不是合适？

绝对合适，就现在运用的情况来说，Vue适合95%的网页应用开发，几乎任何的网页应用Vue都有对应的解决方案，而且开发效率极高，甚至由于它组件化的特性，尤其适合完成一些需求不明确、需求在应用开发的过程中一直会发生变化、需要快速迭代出一个新版本的开发。而最终参与制作的产品就是一个在需求不明确的情况下慢慢变成一个产品的。

程序员如何产生想法再落实到实际开发？

众所周知，程序员是码代码的，而设计产品不是程序员的强项，很不巧的是我就是那个码代码，不太会设计的程序员，但通过一些诀窍，还是能够设计出一款不错的大屏应用的。下面就来介绍一下里面的一些技巧，这些技巧其实还适用于其他的产品设计。

数据大屏设计归根结底就是一个在极端宽阔的屏幕上做应用的开发，因此大屏设计往往强调的是大数据迸发的一瞬间大量的数据信息通过一定的可视化形式瞬间冲入脑海的惊艳感。让人感觉数据距离大家不是这么的遥远，而给人一种触手可及的感觉。

数据大屏的设计其实是有诀窍的，掌握了一些诀窍，在知道了公司大数据组大概需要展示哪些内容之后，不需要UI，程序员自己也能配合产品经理、企划部和DBA完成一个数据大屏产品的设计。

步骤分为

确定基色->寻找灵感->思考实施->作出第一个原型->再次了解需求->多次修改产品->优化细节
后面的步骤需要循环多次，归根结底就是一个典型的需求不明确快速迭代的原型开发。

• 确定基色和寻找灵感
  确定基色不是很难，由于是大屏，采用深色做背景，最重要的是要有灵感，初期的需求分析了解到了需要在大屏上存放的内容如下：

1. 两块地图
2. 三个大数据数值的统计
3. 流程图展示
4. 实时提单详细展示
5. 收发报文统计展示

在确定了初期的需求之后，接下来就是思考如何把这些需求落实到页面上。如何在页面上展示这些内容。而数据大屏的展示，数据大屏的核心就是数据的拼接，具体到展示层可以归纳成数据块的拼接，由于公司大屏是8*4的32块屏，因此起初的寻找灵感就是从分块开始。

 

切分寻找灵感.jpg

这样做的好处是每个屏幕切分的很清晰，灵感也在切分中越来越清晰，到往后就是一个个模块的排列组合，和细节的优化，经过初期对需求的解读，初步划分如下图所示。

 

大屏模块划分.png

1. 地图1
2. 标题
3. 实时提单展示
4. 地图2
5. 全链路
6. 数据统计
   7-11：报文详细

• 思考实施
  在切分变的明显之后，就开始了细节的开发，前人的经验是要吸取的。因此可以在UI中国上寻找优秀的大屏设计，看看哪些内容可以被吸取到自己的产品内部。
  UI中国 - 大数据监控运营平台
  UI中国 - 人口、旅游 大数据可视化大屏展示
  UI中国 - 数据可视化大屏
  UI中国 - 可视化数据展示系统
  UI中国 - 雅培活动数据分析Dashboard
  

在开发上，归功于Vue的组件化思想，当设计出一个模块框和些许组件之后，后面的内容就是按照内容划分进行填充，极其的快速，马上，第一个原型孕育而生，而且出了图标采用开源解决方案，其他的内容都是自己从零开始开发的，维护效率也偏高，产品设计也更加统一。

• 第一个原型
  下图展示了第一个原型的诞生，运用Vue进行开发，圆环和统计图采用ECharts进行绘制，上面的实时提单展示会一直滚动，并且实时可以查看单子的详细。

 

第一个原型

• 再次了解需求

下面开始就是快速迭代中比较重要的一点：快速了解进一步的需求，在第一个原型诞生之后，必然带来第二稿的修改，因为模糊的需求并不能精确命中用户的真实需求，而用户的正式需求往往是设计人员在设计出第一个原型之后诞生的。

此时用户在见到了一些内容之后会有更加近一步的想法，甚至有些设计因为需求不明确和真实需求并不相符，不是用户真正想要的内容，就比如上图那个全链路的圆环，在进一步了解需求之后发现，有可能一天有多个步骤同时发生，那运用圆环表示比率的做法就没有任何的意义，而这些只有在第一个原型出来之后才能发现的。

于是配合用户、业务部门和DBA，诞生了第二个原型，和第一个原型比更加的丰富，业务也发生了相应的变化。

• 多次修改产品、优化细节

 

第二个原型

 

第三个原型

经过多次和用户、企划、公司大数据组人员进行沟通后，变成了最终文章开始的展示模式，原型确定之后的具体后端接口的开发了。

这其中最方便的一点是开发完原型后前端应用展示方面的内容无需修改分毫，因此运用假接口调用和后端确定规范就变得非常必要，只需要编写后端数据，编写完之后直接修改HOST就能做到，由于原型开发面临这不断的修改，而且后端也不清楚最后能够提供什么样的数据，这样沟通成本就变得很大，如何降低沟通成本，制定一个规范，就是我们必须要考虑的问题。

原先会通过原型变更后端的假接口也相应发生变化，让前端去调用，这样做非常低效，后端工程师的时间也浪费了，测试也要等到后端假接口写完之后，但得益于YAPI这个开源项目（这是由去哪儿的工程师开发的一套前后端开发规范管理系统）运用mockjs做假数据的生成，原型直接调用这套系统的接口。后端也无需考虑数据结构，前端把定义好的数据结构写成YAPI内部对应的一个个测试接口，当轮到后端开发的时候直接按照这套系统的API规范进行开发，降低了沟通成本，对于任何一个团队来说都非常便捷。

YAPI - 高效、易用、功能强大的 api 管理平台

代码结构设计

组件化拆分变的尤为重要，又是webpack打包的项目，因此模块也相对比较清晰，对于后期运维也相对好维护。

 

组件

• data-block：数据模块框组件
• data-link：全链路组件
• data-map：地图组件
• data-marquee：实时滚动组件
• data-step：嵌套在data-link内部的步骤条详细
• data-title：标题组件
• svg-circle：原型内部链路圆环（已被需求淘汰）

图表全在utils内部的chart.js内部维护，图标采用SVG，和链路项的顺序单独维护在配置文件内部，便于需求变化后的修改。样式运用less进行开发，统一配色、样式。

PS：用户就是领导?

作者：merjiezo
链接：https://www.jianshu.com/p/cbbf9fc80edc
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。