产品如何进行大屏数据可视化.md
最近接到一个需求,需要给公司的竞赛平台面对省/校/竞赛进行大屏的可视化话数据展示,闲暇之余对自己最近的工作进行一些总结;
一.数据可视化的定义
数据可视化主要是关于数据_视觉表现形式的科学技术研究 --百度百科
用通俗的解释进行描述就是通过 图表,图像,视频等可视化的手段将原有存在于数据库中的进行属性归类,数据变化规律在某一载体上进行展示的过程称之为数据可视化;
例如:
二.实现数据可视化的几个关键步骤
1.明确需求,和需求方明确业务场景
在进行第一次接收到数据可视化需求时,我们一定需要明确是将什么进行可视化,以及我们展示的对象是谁;举个实际的例子,我们之前的高校MOOC平台数据可视化,到底是展示教学进度可视化还是课程汇总的可视化,我们展示对象是教育厅?教务处?还是只是我们平台内部的数据监控?展示对象的不同往往也决定了我们在大屏设计时重点展现的信息不同;
2.进行数据可视化的维度确认,开发需加入
在明确了业务场景后,我们接下来需要进行开始考虑可视化展示的维度,这里我建议用xmind进行维度梳理,梳理后我们一定要和开发进行交流确认,因为我们所有维度的数据源是来自于开发的数据库查询,如果某类维度的统计和增长变化根本无法在现阶段进行技术实现,则我们需要在设计时进行一定程度的调整;
3.确定载体和载体的具体尺寸
确认完基础维度之后,需要进行确定大屏的载体,其实主要是确定大屏展示时的分辨率和长宽比,因为一般需要进行大屏展示时都有一个特定显示器,如果是定制显示器,我们就需要在规划阶段避免掉因分辨率,长宽比图像显示不全.甚至在特殊情况下我们需要进行多套分辨率的UI的设计,去适配不同的显示器;
4.根据维度进行产品原型图设计,选定可视化控件
在进行可视化控件的时候比较依赖个人审美和技术能力;可视化控件有很多,现在很多前端比较懒,只知道用轮子,连改造轮子都不愿意,不知道是懒还是不会.所以产品在设计时,如果为了更高效率的出图,使用技术人员常用的EChart进行控件描绘;或者使用成熟的商业模板进行,这里推荐百度数据可视化 Suga,方便又实用,基本上满足百分之九十以上的需求;
在进行原型图设计时,我们要遵从一些设计原则,就是最重要的模块一定要放在最显眼的位置,并且通过页面模块之间的关联让整个屏幕层次分明;如果你不太擅长这些,可以用文字标记出哪些是最要,哪些是次要,排版就交给设计师吧,让专业的人做专业的事;
5.进行UI配色动效确认-设计师
接下来就是针对大屏进行模块配色和区域调整,达到视觉最佳,重点突出,层次分明,在某些展示模块,如果公司技术人员有实力的话,可以进行动效展示,没实力当我没说;
6.开发后进行实际展示微调
任何产品开发后一定需要进行调试,有条件的话最好实用实际的载体进行调试,因为不到最后一步,开发在自己的电脑上模拟永远会有小瑕疵
7.交付确认
三.注意事项
1.以用户为中心设计
我们千万不能想当然的进行业务场景的模拟,一定要让终端用户参与进来,在原型图出来后,一定要和需求提出方进行交流确认;做好交互和展示设计;
2.选择正确数据进行展示;
同一套系统中,我们衡量某一指标的变化和统计一定要明确,不要出现可视化一套数据,后台系统一套数据;
设计师方面我这里推荐一个好文链接 他讲的更多是细节确认,比如设计图要切几倍率,设计师如何排版;文章链接如下:[http://www.woshipm.com/pd/1782868.html]
产品如何进行大屏数据可视化.md的更多相关文章
- vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
- Qt编写数据可视化大屏界面电子看板13-基础版
一.前言 之前发布的Qt编写的可视化大屏电子看板系统,很多开发者比较感兴趣,也收到了很多反馈意见,纵观市面上的大屏系统,基本上都是B/S结构的web版本,需要在后台进行自定义配置模块,绑定数据源等,其 ...
- 基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言 在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
- 一招教你轻松使用数据可视化BI软件创建旅游消费数据可视化大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以旅游消费数据可视化大屏为 ...
- 不会用数据可视化大屏?一招教你轻松使用数据可视化BI软件创建农业公司运营数据分析大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以农业公司运营数据分析大屏 ...
- 干货!手把手教你使用数据可视化BI软件创建企业变更流程监控大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以企业变更流程监控大屏为例 ...
- 手把手教你快速使用数据可视化BI软件创建互联网用户数据分析大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以互联网用户数据分析大屏为 ...
- 不懂怎么创建可视化大屏?手把手教你使用数据可视化BI软件创建工厂车间数据监控大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以工厂车间数据监控大屏为例 ...
- 学会这一招,小白也能使用数据可视化BI软件创建医院数据实时展示大屏
灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件. 本文以医院数据实时展示大屏为例 ...
随机推荐
- 水题:51Nod 1163-最高的奖励
最高的奖励 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 Description 有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该任 ...
- Liunx将私密代理添加到环境变量
.bash_profile文件存在于用户主目录下,绝对路径为/home/$name/.bash_profile.bash_profile文件是隐藏文件,里面包含的是用户的用户的环境变量. 注意: 这个 ...
- 关于前台jsp页面的js取值问题
在后程序中传一个字符串到前台页面上,后台代码model.addAttribute("ccc", "cccc"); 在页面js上用下面两种方法取值 1. var ...
- Mysql之查看数据库版本
Mysql版本: 登入数据库的时候: select @@version; select version(); mysql> select @@version; +-----------+ | @ ...
- WIN 备份 重装
title: WIN 备份 重装 date: 2018-09-01 22:35:31 updated: tags: [windows,记录,折腾] description: keywords: com ...
- luogu2893 [USACO08FEB]修路Making the Grade
ref #include <algorithm> #include <iostream> #include <cstring> #include <cstdi ...
- 大数据学习——spark学习
计算圆周率 [root@mini1 bin]# ./run-example SparkPi [root@mini1 bin]# ./run-example SparkPi [root@mini1 bi ...
- css各属性浏览器的兼容情况
- 我们为什么要研究docker
一.docker整体概述 Docker会是改变世界的那只"箱子"吗? 是什么:世界领先的软件容器平台: 开发者使用docker可以解决"在我的机器上没问题" ...
- 让Android软键盘默认进入英文键盘
今天在做一个功能的 时候,需要输入法软键盘弹出后,需要进入英文输入界面. 可以通过设置EditText的输入类型为EMAIL来实现. //将输入法切换到英文 edit.setInput ...