在线设计大屏-web端数据可视化（大屏）设计

原创：找图网 2023-04-07 13:44:55

做大屏幕可视化展示系统的公司，哪家好

近年来,数据可视化是一个热度比较高的词,数据可视化大屏投放的需求也越来越多。

数据可视化是指将数据以视觉形式来呈现,如图表或地图,以帮助人们了解这些数据的意义。

数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类、数据分析类及监控预警类。数据可视化大屏,有两个要点:展现效果的酷炫;数据之间的层次关系。好的数据可视化大屏是布局、色彩、图表、动效的综合运用。

下面介绍几款比较优秀并具有代表意义的数据可视化大屏工具。

网易有数(

网易有数是网易大数据下一款大数据可视化分析产品,产品的定位不仅仅是数据可视化大屏,数据可视化大屏只是其产品中的一个功能。在大屏制作方面,网易有数提供了常用的大屏模板,也可以自定义大屏展现,图表丰富,使用简单,支持本地部署。Saas旗舰版每年每个账户3888元,本地部署版本40万/年。

作为一款大数据可视化分析产品,如果仅用作数据可视化大屏,有点大材小用。数据建模、数据分析是该产品的核心。在大屏方面布局色彩都不错,但是像弹层这种功能,觉得很鸡肋。大屏和报表的一个显著区别就是大屏是需要投放的,而报表是需要在电脑上查看、操作。像数据钻取弹层这种在报表上是正常需求,在大屏投放上,是伪需求。在大屏投放中谁去触发这个钻取弹层的事件呢?希望网易有数的产品经理看到我的评价不要喷我。纯属个人理解。

DataV(

Datav是阿里旗下的数据可视化产品。提供了丰富的大屏模板和丰富的图表。在色彩布局方面也很出色。产品的使用简单,提供了两种配置大屏的方式,基于模板创建与自定义创建。

Datav产品设计是基于画布图层的概念,相比于传统的基于表格的布局方式更灵活,图表间也可以覆盖。目前主流的数据可视化大屏产品都是基于这个模式设计的。

目前datav提供4个版本。基础版、企业版、开发者版、本地部署版本。

基础版:提供8个模板、可创建5个大屏项目、提供常规图表、不支持局域网数据库,每年51元。基本用于研究使用,商用的可能性比较低。

企业版:提供所有模板、可创建20个大屏项目、提供图表和地图、不支持局域网数据库需要单独购买、每年5100元。可用于部署在阿里云上的应用的大屏项目,部署其他互联网服务器或者局域网内的应用大屏项目需要单独购买本地部署的license。

开发者版本:售价每年3万元,主要是为了开发者上传自己开发的组件,审核通过后,可以选择卖给阿里云。不针对企业用户。

本地部署版本:datav的本地部署采用的是“公网样式编辑+本地数据配置”的方式,并不是将datav的程序包部署在本地,而是需要在线设计编辑大屏,编辑好后下载到本地,在本地启动本地数据源组件程序包,将编辑好的大屏展现和本地数据源进行关联。账号到期后,线上账号收回,已经编辑好的大屏项目不受影响。每年140万,续费每年42万。

在同类产品中,阿里云datav提供的大屏模板最丰富,产品成熟度较高。但是可能阿里云本身就是一家互联网公司,产品对基于互联网的服务或者应用支持度很好,特别是部署在阿里云上的服务或者应用支持度更好(自家一体化服务吧,O(∩_∩)O)。但是对部署在企业内网,通过公网网关对外提供访问服务的企业级应用的支持度不是很友好,甚至苛刻。不仅价格高的离谱,而且对于本地部署也做了诸多限制。

FineReport(

帆软报表工具,也可以用来制作大屏数据可视化。FineRoport不是B\S架构应用,需要下载其客户端到本地(大约300多M)。使用FineReport制作大屏,首先需要自定义布局,基于表格的布局方式。在布局好的区域内配置需要展现的图表元素,最后调整色彩。使用很简单。

FineReport是一款优秀的报表工具,但没有独立的大屏组件。FineReport进行大屏的制作实质还是进行报表的制作。基于表格的布局方式明显落后于主流的基于图层的大屏图表配置方式。FineReport的报表很成功,但是在数据可视化大屏这方面,没有走出报表的格局,技术落后于同类产品。

Sugar(

Sugar是百度的数据可视化产品,提供了报表+大屏的解决方案。图表丰富,提供多套大屏模板,基于画布图层的设计模式,所见即所得的配置方式,使用简单,支持saas服务和本地部署。目前该产品处于公测阶段。

License费用 :

30账户: 30 * 3000 * 0.3 = 2.7万/年

50账户: 50 * 3000 * 0.3 * 0.9 = 4.05万/年

80账户: 80 * 3000 * 0.3 * 0.9 = 6.48万/年

100账户:100 * 3000 * 0.3 * 0.85 = 7.65万/年

不限账户数: 10万/年

Sugar是本人推崇的产品,各方面做的都很不错,没有明显的不足。如果非说不足,第一是大屏模板的数量比较少,第二就是企业级应用本地化部署每年都要收费,投入稍大。

SaCa DataViz (

SaCa DataViz是图表秀的一款数据分析可视化产品。简单易用,提供了丰富的可视化图表,多种行业数据分析报告模板,多种格式导入等。图表秀目前已经被东软收购。Saas服务每年5000元。本地部署每个项目30万。

SaCa DataViz与网易有数很像,都是可视化数据分析产品。大屏展现只是其中一部分功能,数据可视化分析产品的核心是可视化分析,重点是算法、性能、准确性等。

Rokect (

Rokect是一款数据可视化产品,提供报表+大屏+服务解决方案。所见即所得的拖来式的配置方式,使用简单;支持多种数据源;内置丰富的图表及大屏模板;支持采用模板和自定义两种方式进行大平制作;设计采用的是主流的滑板图层布局方式。是一款非常优秀的数据可视化工具。本地部署一次性费用20万元,终身提供新版本的免费升级。

Rocket集其他几款数据可视化大屏工具的优势于一身,并增加了其他几款数据可视化工具没有的实用功能。比如大屏轮播、视频大屏、仪表盘快速继承等。超大品牌产品的品质,更低廉的价格,更重要的是因为是小团队开发的产品,在售后服务、新需的响应上要优于大品牌公司的产品(大品牌的产品是不会做定制化内容,会影响产品的产品化)。对于有报表、大屏需求的企业或者有报表、大屏开发需求的开发团队都是一款不可多得数据可视化工具。值得推荐。

除了以上这些具有代表性的数据可视化大屏工具外,还有一些数据可视化工具,其中有一部份也可以用于数据可视化大屏的制作。因其不具有代表性或者存在一些缺陷,就不一一分享了。有兴趣的可以深入研究一下。比如:文图、创客贴、Qlik Sense、润乾、数字冰雹等。

web端数据可视化（大屏）设计

目前流行数据可视化大屏设计,为了方便大家,我把各个行业的数据大屏进行了整合设计。

作品包括两部分:数据可视化模板和图表组件

数据可视化模板:医防融合数据大屏、慢病患者数据大屏、公卫体检数据大屏、公卫随访数据大屏、家医签约数据大屏、医院数据大屏、医院运营数据大屏、互联网医院数据大屏、电商数据分析大屏、药店销售数据大屏、餐饮数据分析大屏、在线教育数据大屏、网站流量访问数据分析大屏、酒店数据大屏、店铺交易数据统计、运动健康数据分析、个人健康后台数据分析、创作中心数据分析、电商后台数据分析

图表组件:数据卡片,折线图、柱状图、饼图及其他全图表

支持软件版本:Axure8.1(兼容Axure9、Axure10)

点击此处预览完整设计

部分设计展示:

怎样制作淘宝店铺大屏背景？？急求。。在线等。。。

大多数卖都看到很多商城卖家的首页那漂亮大气的全屏(宽屏)背景大图了吧,有没有想自己的店里也弄一个?只要你会一点PS,错!只要你有个PS软件,我就教你做出来,但前提是你的旺铺版本支持,设置背景图片据我了解应该是新旺铺以上才可以的。如果你的版本是新旺铺以上的,那我们现在开始动手做吧!因为商城跟集市的制作有点不一样,现在我们以集市店的为例,集市店2012新旺铺最终效果展示:

一、准备工作

一个PHOTOSHOP图片处理软件,一张你准备做店铺首页背景宣传的大图片,建议图片宽度是大于或等于1440PX,没有PHOTOSHOP的朋友,可以去下载一个哦,(安装很容易的,所以安装的步骤我也不详说了。不要怕麻烦,凡事都要自己动手了,能才从中学到东西,学到经验。

二、图片处理

1、安装好PS后,打开界面

接着点击"文件""打开",

把你要的制作的图片打开到PS里面

2、把图片裁成宽度大于或等于1440像素的宽度,高度取决于你自己的要求,一般是600-750像素就可以了。首先打开剪裁工具,

然后操作就跟QQ软件里的的剪图类似,裁出来的图片如果宽度跟1440像素相差不大的话,就可以通过图像大小来调整一下,

在宽度里输入1440,后面的记得是像素,不是厘米哦!还有下面的约束比例也要勾上,这样图片就不会变形了。

3、1440像素宽度的图片剪裁完后,接着在这个图片里剪裁出950像素的图片,因为淘宝全通栏的大小是950像素。至于950的图片怎么剪裁,这里就比较重要了。

首先我们可以把图片1440像素分成三份,245+950+245=1440!245是19寸宽屏两侧背景其中一边的像素。

4、我们新建一个PS文件

宽度是245像素的新文件,高度可以随便。

在左侧工具栏,切换到“矩形选框工具”,

选中新建的文件“未标题-1”按着CTRL+A键,会有虚线显示全选了这个空白的图像, 点着鼠标左键不放,把虚线边框接到左边的宣传图片,并如左边边缘对齐。

在这里需要把标尺调出来作为参考

接着在工具栏里选择“移动工具”,在标尺里面拉出一条浅蓝色的辅助线,跟虚线边框右边缘对齐,那么宣传图片左边边缘到辅助线的宽度就是245像素了,右边的操作同样,这里就不再详说了。

两边的辅助线出来后,就使用“剪裁工具”,两边对齐辅助线

按一下回车,就可以把950宽度的图片剪裁出来了。

然后把950像素宽度700像素高度的图片保存成JPG格式的图片。

5、按编辑,后退一步。把图片恢复成没有剪裁前的1440像素的宽度。前面的工作,无论商城或集市店都是一样的。那么下面的两侧的背景图,就有点不一样了。因为商城上面有一栏是红色信息置顶,所以背景图不会覆盖到上面,但集市店就不样了。集市店头部导航上面,还会显示背景图片的。所以这两个地方有点不一样,这个也只是大同小异,原理还是一样的!

6、背景图,以集市店拓展版为例,新建一个宽是1440像素,高是934像素的。

图片上面的1是顶部112PX的高度,2是我本店导航的高度135PX,3是分隔线的高度10PX,一共是257PX,这个你们可以根据自己的导航高度调整,不是固定死的。然后用”移动工具“把1440宽度的图片拖动过来。淘―巧―网,淘宝开背景图有限制大小是100K,因为白色像素是最小的,所以背景图不显示的地方弄成白色可以减少图片的大小。

如何添加那块白色呢?点击“矩形选框工具”,把要填充白色的地方选中,出现虚线后就右击“填充”选择填充白色就可以了,

然后保存为JPG格式的图片,注意大小不能大于100K哦,这样背景图片就完成了。

三、店铺装修上传

1、打开”我的淘宝“里面,我是卖家的“店铺装修”

点击添加店铺中部的添加模块,就显示在最上面的那个自定义内容区了,

这里要注意的一点,不要搞错添加了页头模块哦。然后把剪裁好的那个950PX宽度的宣传图片上传到图片空间再放进自定义模块里面, 本文内容来自淘巧网

我们在自定义内容里面不需要写标题,如果写了标题会出现一个设置的背景底色,影响我们的整体效果。然后点击添加图片把商品或其它地址写到里面。

再确定保存就可以了。

注意:淘宝里面所有的图片链接只能写淘宝的地址有效,写外部的网站是没有用的。

2,同样在店铺装修里,点击”模板“进入到模板管理区,

再点击“背景设置”。

在这里大家可以看到有“页面背景”,“页头背景”,这两个是不一样的哦。淘巧好,好淘巧