从零开始设计数据大屏—基于Vue ZT
虽然已经决定这个项目用Wyn来做了,但是,了解一下如何从头开始写一个数据大屏还是挺有好玩的。
-------------
为什么要做数据大屏?
现如今的大数据逐渐发挥出了它的力量,并无形的改变着我们的生活。但大数据在不是从事技术开发的人来说没有很明显的感受,很多人对大数据的概念只是停留在每年网易云音乐对个人听歌的汇总上、知乎2017年解锁的知识成就、微信新年的个人社交分析、支付宝的年终账单等。其迫切的需要通过一些媒介展现数据的威力,而数据大屏作为大数据展示媒介的一种,广泛运用于各种展示厅、会展、发布会及各种狂欢节中,其中不乏一些通用的处理方案:阿里巴巴集团的DataV产品。其大屏有多种主题,提供多种模版,设计的非常的震撼,DataV也用于展现历年双十一的盛况。
而公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息,因此需求孕育而生。下面的截图是产品迭代四次之后在公司大屏展示厅的照片,第五次迭代还在开发中。

用Vue做基础的框架是不是合适?
绝对合适,就现在运用的情况来说,Vue适合95%的网页应用开发,几乎任何的网页应用Vue都有对应的解决方案,而且开发效率极高,甚至由于它组件化的特性,尤其适合完成一些需求不明确、需求在应用开发的过程中一直会发生变化、需要快速迭代出一个新版本的开发。而最终参与制作的产品就是一个在需求不明确的情况下慢慢变成一个产品的。
程序员如何产生想法再落实到实际开发?
众所周知,程序员是码代码的,而设计产品不是程序员的强项,很不巧的是我就是那个码代码,不太会设计的程序员,但通过一些诀窍,还是能够设计出一款不错的大屏应用的。下面就来介绍一下里面的一些技巧,这些技巧其实还适用于其他的产品设计。
数据大屏设计归根结底就是一个在极端宽阔的屏幕上做应用的开发,因此大屏设计往往强调的是大数据迸发的一瞬间大量的数据信息通过一定的可视化形式瞬间冲入脑海的惊艳感。让人感觉数据距离大家不是这么的遥远,而给人一种触手可及的感觉。
数据大屏的设计其实是有诀窍的,掌握了一些诀窍,在知道了公司大数据组大概需要展示哪些内容之后,不需要UI,程序员自己也能配合产品经理、企划部和DBA完成一个数据大屏产品的设计。
步骤分为
确定基色->寻找灵感->思考实施->作出第一个原型->再次了解需求->多次修改产品->优化细节
后面的步骤需要循环多次,归根结底就是一个典型的需求不明确快速迭代的原型开发。
- 确定基色和寻找灵感
确定基色不是很难,由于是大屏,采用深色做背景,最重要的是要有灵感,初期的需求分析了解到了需要在大屏上存放的内容如下:
- 两块地图
- 三个大数据数值的统计
- 流程图展示
- 实时提单详细展示
- 收发报文统计展示
在确定了初期的需求之后,接下来就是思考如何把这些需求落实到页面上。如何在页面上展示这些内容。而数据大屏的展示,数据大屏的核心就是数据的拼接,具体到展示层可以归纳成数据块的拼接,由于公司大屏是8*4的32块屏,因此起初的寻找灵感就是从分块开始。
这样做的好处是每个屏幕切分的很清晰,灵感也在切分中越来越清晰,到往后就是一个个模块的排列组合,和细节的优化,经过初期对需求的解读,初步划分如下图所示。

- 地图1
- 标题
- 实时提单展示
- 地图2
- 全链路
- 数据统计
7-11:报文详细
- 思考实施
在切分变的明显之后,就开始了细节的开发,前人的经验是要吸取的。因此可以在UI中国上寻找优秀的大屏设计,看看哪些内容可以被吸取到自己的产品内部。
UI中国 - 大数据监控运营平台
UI中国 - 人口、旅游 大数据可视化大屏展示
UI中国 - 数据可视化大屏
UI中国 - 可视化数据展示系统
UI中国 - 雅培活动数据分析Dashboard
在开发上,归功于Vue的组件化思想,当设计出一个模块框和些许组件之后,后面的内容就是按照内容划分进行填充,极其的快速,马上,第一个原型孕育而生,而且出了图标采用开源解决方案,其他的内容都是自己从零开始开发的,维护效率也偏高,产品设计也更加统一。
- 第一个原型
下图展示了第一个原型的诞生,运用Vue进行开发,圆环和统计图采用ECharts进行绘制,上面的实时提单展示会一直滚动,并且实时可以查看单子的详细。

- 再次了解需求
下面开始就是快速迭代中比较重要的一点:快速了解进一步的需求,在第一个原型诞生之后,必然带来第二稿的修改,因为模糊的需求并不能精确命中用户的真实需求,而用户的正式需求往往是设计人员在设计出第一个原型之后诞生的。
此时用户在见到了一些内容之后会有更加近一步的想法,甚至有些设计因为需求不明确和真实需求并不相符,不是用户真正想要的内容,就比如上图那个全链路的圆环,在进一步了解需求之后发现,有可能一天有多个步骤同时发生,那运用圆环表示比率的做法就没有任何的意义,而这些只有在第一个原型出来之后才能发现的。
于是配合用户、业务部门和DBA,诞生了第二个原型,和第一个原型比更加的丰富,业务也发生了相应的变化。
- 多次修改产品、优化细节


经过多次和用户、企划、公司大数据组人员进行沟通后,变成了最终文章开始的展示模式,原型确定之后的具体后端接口的开发了。
这其中最方便的一点是开发完原型后前端应用展示方面的内容无需修改分毫,因此运用假接口调用和后端确定规范就变得非常必要,只需要编写后端数据,编写完之后直接修改HOST就能做到,由于原型开发面临这不断的修改,而且后端也不清楚最后能够提供什么样的数据,这样沟通成本就变得很大,如何降低沟通成本,制定一个规范,就是我们必须要考虑的问题。
原先会通过原型变更后端的假接口也相应发生变化,让前端去调用,这样做非常低效,后端工程师的时间也浪费了,测试也要等到后端假接口写完之后,但得益于YAPI这个开源项目(这是由去哪儿的工程师开发的一套前后端开发规范管理系统)运用mockjs做假数据的生成,原型直接调用这套系统的接口。后端也无需考虑数据结构,前端把定义好的数据结构写成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的更多相关文章
- 企业级数据大屏设计如何实现,div+html+echarts
大屏是什么? 大屏设计是最近比较流行的概念,一般按照功能来分有几种: 1. 可交互的触摸屏,大多运用在互动教学课程或者报告演示现场,用户可结合交互操作来阐述具体内容.设计师需要对交互形式和传达内容作统 ...
- 海量大数据大屏分析展示一步到位:DataWorks数据服务对接DataV最佳实践
1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟 ...
- .NET Core开发的iNeuOS工业互联网平台,发布 iNeuDA 数据分析展示组件,快捷开发图形报表和数据大屏
目 录 1. 概述... 2 2. 演示信息... 2 3. 简单介绍... 3 4. 产品特点... 4 5. 价值体现... 5 1. ...
- 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示(2.Azure Functions实战)
本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...
- 15分钟构建超低成本数据大屏:DataV + DLA
第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本数据存储的优选方案 DLA(https://www.aliyun. ...
- 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践
1. 概述 数据服务(https://ds-cn-shanghai.data.aliyun.com) 是DataWorks产品家族的一员,提供了快速将数据表生成API的能力,通过可视化的向导,一分钟“ ...
- 手把手教你轻松使用数据可视化BI软件创建某疾病监控数据大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以某疾病监控数据大屏为例为 ...
- 设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示(1.准备工作)
本案例适用于开发者入门理解Azure Functions/ IoT Hub / Service Bus / Power BI等几款产品. 主要实战的内容为: 将设备遥测数据上传到物联网中心, 将遥测数 ...
- Qt编写大数据大屏UI电子看板系统
前言 目前大屏大数据可视化UI这块非常火,趁热也用Qt来实现一个,Qt这个一站式超大型GUI超市,没有什么他做不了的,大屏电子看板当然也不在话下,有了QSS和QPainter这两个无敌的工具组合,借用 ...
随机推荐
- .Net #if DEBUG调试模式代码使用
#if DEBUG Console.WriteLine("DEBUG:11111111111"); #else Console.WriteLine(" ...
- 【Java提高】---通过UUID、SHA-1、Base64组合加密
通过UUID.SHA-1.Base64组合加密 该篇文章实现的最终效果是: 1)加密是不可逆的. 2)相同字符串加密产生后的字符串都不一样 3)所以要想比较两个字符串是否相等,需要用已经加过密的字符串 ...
- vue内置指令与自定义指令
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- [android学习]__使用百度地图开放api编写地图定位app
前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...
- Apache-Flink深度解析-DataStream-Connectors之Kafka
Kafka 简介 Apache Kafka是一个分布式发布-订阅消息传递系统. 它最初由LinkedIn公司开发,LinkedIn于2010年贡献给了Apache基金会并成为顶级开源项目.Kafka用 ...
- Unity3D中利用Action实现自己的消息管理(订阅/发布)类
引言 一般的软件开发过程中,为了方便对项目进行管理.维护和扩展,通常会采用一种MVC框架,以将显示逻辑.业务逻辑和数据进行分离. 这在传统企业软件的开发中很常见,但我在使用Unity做游戏开发的时候却 ...
- iptables防火墙常用配置介绍
参考地址 http://www.cnblogs.com/metoy/p/4320813.html http://netfilter.org/ iptables http://man.chinaunix ...
- NiftyNet开源平台的使用 -- 配置文件
NiftyNet开源平台的使用 NiftyNet基础架构是使研究人员能够快速开发和分发用于分割.回归.图像生成和表示学习应用程序,或将平台扩展到新的应用程序的深度学习解决方案. 详细介绍请见: ...
- JavaScript 系列博客(二)
JavaScript 系列博客(二) 前言 本篇博客介绍 js 中的运算符.条件语句.循环语句以及数组. 运算符 算术运算符 // + | - | * | / | % | ++ | -- consol ...
- 自定义input文件上传样式
前言 文件上传是我们经常会用到的功能,但是原生的input样式太丑了,能不能自定义一个input文件上传样式呢?我这里写了两种方法,form表单提交跟ajax异步提交都没有问题,自动上传或者点击上传按 ...