虽然已经决定这个项目用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:报文详细

在开发上,归功于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:用户就是领导

从零开始设计数据大屏—基于Vue ZT的更多相关文章

  1. 企业级数据大屏设计如何实现,div+html+echarts

    大屏是什么? 大屏设计是最近比较流行的概念,一般按照功能来分有几种: 1. 可交互的触摸屏,大多运用在互动教学课程或者报告演示现场,用户可结合交互操作来阐述具体内容.设计师需要对交互形式和传达内容作统 ...

  2. 海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践

    1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com)  是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟 ...

  3. .NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏

    目       录 1.      概述... 2 2.      演示信息... 2 3.      简单介绍... 3 4.      产品特点... 4 5.      价值体现... 5 1. ...

  4. 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示(2.Azure Functions实战)

    本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...

  5. 15分钟构建超低成本数据大屏:DataV + DLA

    第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本数据存储的优选方案 DLA(https://www.aliyun. ...

  6. 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践

    1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟“ ...

  7. 手把手教你轻松使用数据可视化BI软件创建某疾病监控数据大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以某疾病监控数据大屏为例为 ...

  8. 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示(1.准备工作)

    本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...

  9. Qt编写大数据大屏UI电子看板系统

    前言 目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合,借用 ...

随机推荐

  1. 大道至简第一章--java伪代码读后感

    import java.大道至简.编程的精义; //愚公移山 public class 愚公移山 { public static void main(String[] args) { //惩山北之塞, ...

  2. PyTorch-Adam优化算法原理,公式,应用

    概念:Adam 是一种可以替代传统随机梯度下降过程的一阶优化算法,它能基于训练数据迭代地更新神经网络权重.Adam 最开始是由 OpenAI 的 Diederik Kingma 和多伦多大学的 Jim ...

  3. Linux 下 pushd,popd,cd- 用法

    一,为何要使用这几个命令? 可能大家会有疑问,为何要使用这几个命令,   难道用cd不就可以切换目录了吗?   没错,使用cd就可以切换到需要访问的目录,   但是有时会是一个路径很长,层次很多的目录 ...

  4. H5拖动实现代码

    原理以后有空再说现在嘛先上代码.... ;} html,body { width: 100%; height: 100%; ; } #dragBoxContainer{ width: 150px; p ...

  5. 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org

    RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...

  6. 使用freemarker生成xml模板

    今天在java交流群里有个人问我如何用freemarker生成xml模板文件,可以手动配置参数,于是我到网上百度了一下.发现有一位同行的博文写的很nice,于是我就照着他的代码敲了一遍,最后实现了,本 ...

  7. SHOW INDEX 你用过吗???

    mysql中 show 包含了很多指令,例如show table status, show innodb 等等等, 今天来讲讲mysql中SHOW  INDEX FROM tableName 本例中用 ...

  8. java提高(1)---异常

    异常 一.异常与错误的区别 再讲异常之前我们就应该要知道异常和错误的区别 Error类和Exception类的父类都是throwable类,他们的区别是: Error类一般是指与虚拟机相关的问题,如系 ...

  9. mysql 开发进阶篇系列 22 磁盘I/O问题(从linux操作系统上优化)

    1. 使用Symbolic Links分布I/O mysql的数据库名和表名是与文件系统的目录名和文件名对应的,默认情况下,创建的数据库和表都存放在参数datadir定义的目录下.如果不使用RAID或 ...

  10. .NET Core + Abp踩坑和填坑记录(1)

    1. Net Core 的DI和Abp的DI并存 Startup中 ConfigureServices返回值改为IServiceProvider 在ConfigureServices最后调用retur ...