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

《从零开始设计数据大屏—基于vue》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

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

2、大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息，因此需求孕育而生。下面的截图是产品迭代四次之后在公司大屏展示厅的照片，第五次迭代还在开发中。用Vue做基础的框架是不是合适?绝对合适，就现在运用的情况来说，Vue适合95%的网页应用开发,几乎任何的网页应用Vue都有对应的解决方案,而且开发效率极高，甚至由于它组件化的特性，尤其适合完成一些需求不明确、需求在应用开发的过程中一直会发生变化、需要快速迭代出一个新版本的开发。而最终参与制作的产品就是一个在需求不明确的情况下慢慢变成一个产品的。程序员如何产生想法再落实到实际开发?众所周知，程序员是码代码的，而设计产品不是程序员

3、的强项，很不巧的是我就是那个码代码，不太会设计的程序员，但通过一些诀窍，还是能够设计出一款不错的大屏应用的。下面就来介绍一下里面的一些技巧，这些技巧其实还适用于其他的产品设计。数据大屏设计归根结底就是一个在极端宽阔的屏幕上做应用的开发，因此大屏设计往往强调的是大数据迸发的一瞬间大量的数据信息通过一定的可视化形式瞬间冲入脑海的惊艳感。让人感觉数据距离大家不是这么的遥远，而给人一种触手可及的感觉。数据大屏的设计其实是有诀窍的，掌握了一些诀窍，在知道了公司大数据组大概需要展示哪些内容之后，不需要UI,程序员自己也能配合产品经理、企划部和DBA完成一个数据大屏产品的设计。步骤分为确定基

4、色-〉寻找灵感-〉思考实施-〉作出第一个原型-〉再次了解需求->多次修改产品->优化细节后面的步骤需要循环多次，归根结底就是一个典型的需求不明确快速迭代的原型开发。确定基色和寻找灵感确定基色不是很难，由于是大屏，采用深色做背景，最重要的是要有灵感，初期的需求分析了解到了需要在大屏上存放的内容如下：两块地图三个大数据数值的统计流程图展示实时提单详细展示收发报文统计展示在确定了初期的需求之后，接下来就是思考如何把这些需求落实到页面上。如何在页面上展示这些内容。而数据大屏的展示,数据大屏的核心就是数据的拼接,体到展示层可以归纳成数据块的拼接，由于公司大屏是8*4的32块屏,因此起初的

5、寻找灵感就是从分块开始。这样做的好处是每个屏幕切分的很清晰，灵感也在切分中越来越清晰，到往后就是一个个模块的排列组合，和细节的优化，经过初期对需求的解读，初步划分如下图所示。地图1标题实时提单展示地图2全链路数据统计7-11：报文详细思考实施在切分变的明显之后，就开始了细节的开发，前人的经验是要吸取的。因此可以在UI中国上寻找优秀的大屏设计,看看哪些内容可以被吸取到自己的产品内部。UI中国-大数据监控运营平台UI中国-人口、旅游大数据可视化大屏展示UI-数据可视化大屏UI中国-可视化数据展示系统UI中国-雅培活动数据分析Dashboard在开发上，归功于Vue的组件化思想，当设

6、计出一个模块框和些许组件之后，后面的内容就是按照内容划分进行填充，极其的快速，马上，第一个原型孕育而生，而且出了图标采用开源解决方案，其他的内容都是自己从零开始开发的，维护效率也偏高，产品设计也更加统一。第一个原型下图展示了第一个原型的诞生，运用Vue进行开发，圆环和统计图采用ECharts进行绘制，上面的实时提单展示会一直滚动，并且实时可以查看单子的详细。再次了解需求下面开始就是快速迭代中比较重要的一点：快速了解进一步的需求，在第一个原型诞生之后，必然带来第二稿的修改，因为模糊的需求并不能精确命中用户的真实需求，而用户的正式需求往往是设计人员在设计出第一个原型之后诞生的。此时

7、用户在见到了一些内容之后会有更加近一步的想法，甚至有些设计因为需求不明确和真实需求并不相符，不是用户真正想要的内容，就比如上图那个全链路的圆环，在进一步了解需求之后发现，有可能一天有多个步骤同时发生，那运用圆环表示比率的做法就没有任何的意义，而这些只有在第一个原型出来之后才能发现的。于是配合用户、业务部门和DBA,诞生了第二个原型,和第一个原型比更加的丰富，业务也发生了相应的变化。多次修改产品、优化细节经过多次和用户、企划、公司大数据组人员进行沟通后,变成了最终文章开始的展示模式，原型确定之