如何从零开始做出数据可视化的动效图

  

  58作为中国最大的分类信息网站,其服务覆盖了生活的各个领域及中国所有大中城市。在58高速平稳发展的今天,我们希望用数据可视化的效果来整合展现的数据资源,让大家全方位了解58的价值。由此,我们启动了“城市脉动”项目。(注:文中附图所有数据均非真实数据,仅为效果呈现)

  我们对“城市脉动”项目的整体定位进行了思考,如何展现数据?展现场景是怎样的?我们的用户是谁?我们该给用户怎样的体验?围绕着这些问题,整个项目的核心目标也愈发清晰。

  是信息的表现形式和载体(定义中摘取)。那么抛开狭义理解的数字本身,从表现形式和载体入手,只专注于各类数据应用于不同环境下最优的表现形式,让展现更具有目标性,让设计“有理有据”。

  有展示场景才会有用户,因而我们将用户与展现场景放在一起进行分析。整体项目是利用大屏设备进行相关数据及图表展示,我们预想将项目应用的场景分为两种情况:

  a.专业用户:即参加商务活动、分享等,需了解具体数据内容的用户。此类用户会较为细致的查看每项数据;

  b.兴趣用户:即无论数据在何处展示,其对数据都有浓厚的兴趣,会去驻足停留,仔细观看及分析数据。

  基于对整体项目的分析,数据部的同学对数据内容与表现形式进行了专业化的归类,我们从用户体验及设计角度,与数据部同学进行探讨并优化内容,最终为“城市脉动”定了三个关键词:清晰、明确、迅捷。以确保给用户更为良好的体验。

  通过分析定位,我们的目标也渐渐清晰:让设计服务于数据内容,给各类用户以最为清晰明确迅捷的数据展示。即,通过视觉与动效的结合,能够给ab两类细致观看的用户良好的视觉呈现及专业的数据展示;能够给c类用户深刻的印象,从而转化为a、b类用户。真正达到让每个人,全方位的了解58集团的价值。

  “城市脉动”整个项目是以展示为主,在确保视觉效果的同时,信息的有效传递是设计重点。需构建清晰的层级关系,运用准确的视觉语言。就展示载体而言,因载体为大屏,如用浅色背景会有拖影的情况,因而在整体设计上,运用深色背景。

  色彩是最能给人直观感受的,能够直接的牵引用户去寻找有效信息。在运用色彩的过程中,最初设计将数据的颜色与58logo的色彩相近,但是对于数据的同学来说,红色代表数据异常,因而整体给人紧张感;而蓝色数据则使人加以冷静,从而给人良好的视觉感受。

  整体色彩确定后,便运用色彩来划分信息的层级关系,用主色调强调重点内容,以引导用户能够清晰、明确、迅捷的识别重要信息。

  除色彩的视觉牵引外,用构图的方式来突出信息重点,用比例关系的手法来使视觉达到平衡,让用户在瞬间捕捉到视觉点,建立明确的信息层级,从而能够使用户迅捷的了解我们希望用户感知到的信息。

  形的样式能够使数据给用户不一样的感知效果,用准确的形态来给用户准确的感知,减少用户在视觉层面的思考和时间,直击内容本身,使用户在能够在短时间内捕捉兴趣内容。

  如柱状图中,分格样式的数据表达,则给人感受数据不够精准,复杂且无意义的设计语言形成了对用户的视觉干扰;而柱状样式的数据表达,则更为直观准确。

  在三屏画面中,地图会在两屏中出现,一屏为省/直辖市地图,另一屏为中国地图,且在画面中的占比都很重。在地图样式的选择上,采用对比法来进行选择。

  2.描边形式则更加凸显地图,依附图形自身与背景元素所产生的空间感,配合实时点击的效果,整个画面更加清晰伶俐,且精确的表达出实时点击的效果。

  辅助图形的运用,对画面和信息,都存在引导关系。在干扰视觉的同时,引导用户对某些数据内容进行无意识的知识补给。如图所示,左图:在省/直辖市地图为主的屏幕中,加一较小的中国地图,意为让用户更明确的感知到此省在我国的位置(或此位置为我国哪省)。

  中图的时间轴形式则为统一相同时间内数据变化而设;右图中,用标尺进行内容分割,使数据模块的划分更为清晰。

  整个项目中有许多数据都是实时变化的,为了减少数据变化刷新时的突然性,动效设计必不可少。在整个动效设计的过程中,除过场动画、数据的变化外,动效还肩负起增添空间感、平衡画面和整合信息的作用。

  a.增添空间感:第一屏中内容较少,省/直辖市地图占据中心较大面积,但各省地图形状各具特点,大小不一,为平衡地图形状的不同,则在地图后面加以多个虚线圈使画面丰富,并使其转动起来,增添了画面的空间感。

  b.平衡画面:第三屏中可动数据为画面中心的中国地图及右下数据,为不忽视其它内容区,动效童鞋为左下及右上部分数据增添了光影效果,使整个画面的动态视觉感受平衡;

  c.整合信息:第二屏的右下部分数据为5个模块的饼状图,若全部放于画面中则过于累赘,用倒计时的模式将其进行切屏,使信息更加聚合。

  但是在增加动效的同时,仍需考虑服务器在承载大量数据涌入的同时,是否能够承载较多的动效。因而在增加动效过后,我们与技术同学一同分析画面与数据量,对动效部分进行适当取舍。使动效不必喧宾夺主,明确画面中的重点进行展示。

  从立项到如今的成功上线,收获颇丰,在这个过程中,我们站在用户的角度,提出问题,解决问题;再提出问题,再解决问题…本着通过自己的方案,减少用户的观看时间与思考成本为原则,共同探讨解决方法,共同向着同一个方向努力。

  我们期待通过我们的努力,让每个人都能够对58有新的了解与体验。58在发展,LUX也在进步,我们会继续本着用户第一的原则,继续脚踏实地的走好每一步。

  作为一名交互设计师在进行数据可视化时,就是要把这些宝贵的数据资产变得触手可及,从而充分发挥数据的力量。数据可视化好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的,最终让数据变得更加简单,...博文来自:网易云社区博客

  我多次被炫目的数据可视化或信息可视化震惊,在我知道这些图片背后的数据来源和创造历程后,更是为之诧异不止。它涉足制图学、图形绘制设计、计算机视觉、数据采集、统计学、图解技术、数型结合以及动画、立体渲染、...博文来自:eclipse_xu

  数据可视化都有一个共同的目的,那就是准确而高效、精简而全面地传递信息和知识。可视化能将不可见的数据现象转化为可见的图形符号,能将错综复杂、看起来没法解释和关联的数据,建立起联系和关联,发现规律和特征,...博文来自:数智集的博客

  数据可视化是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,并进行交互处理的理论、方法和技术。数据可视化的实质是借助图形化手段,清晰有效的传达与沟通信息,使通过数据表达的内容更...博文来自:的博客

  数据可视化是数据分析中最后一个步骤,我们做的所有数据分析工作需要把工作内容呈献给领导或者给客户,所以这就需要我们重视数据可视化。那么我们如何做好数据可视化的工作呢?我们就在这篇文章中给大家介绍一下数据...博文来自:CDA数据分析师

  导语:今天我们带来一篇来自Adobe工程师RohitBoggarapu的文章。他在文章中介绍了一些适合网页开发者的数据可视化和绘图工具,让你不必再花大力气与枯燥的数据抗争。部分工具不要求写代码也可以使...博文来自:大数据

  @十萬個為什麽 :“仪表板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业,开始运用他们的数据来做一些有趣的事情。在我的职业生涯中,有幸参与一大批数据为重的界面设计,我要在此分享一些观...博文来自:tom0008668的博客

  高维指数据具有多个独立属性,多元指数据具有多个相关属性。怎样在视觉空间(三维空间/二维平面)上表达?...博文来自:中科院计算所培训中心

  ECharts,一个使用JavaScript实现的开源可视化库,百度出品,底层依赖轻量级的矢量图形库ZRender,兼容大部分PC和移动端的浏览器,提供直观,交互丰富,可高度个性化定制的数据可视化图表...博文来自:m0_37837159的博客

  1、python中数据可视化1.1、seaborn库python中最常用的绘图工具包是matplotlib库,但是matplotlib中很多参数需要自己设置,灵活但繁琐,而且常常不知道如何设置(太多要...博文

  来源: TalkingData本文共1085字,建议阅读5分钟。本文中我们将与你一同进入数据可视化的世界,探索不为人知的冷知识和黑科技,发现数据可视化的魅力与价值。你眼中......博文来自:THU数据派

  什么是DataV数据可视化相比于传统图表与数据仪表盘,如今的数据可视化致力于用更生动、友好的形式,即时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察。无论在零售、物流、电力、水利、环保、还是交通领域,通过...博文来自:lsj960922的博客

  关于使用DataV制作实时销售数据可视化大屏的详细教程:使用DataV制作实时销售数据可视化大屏(数据可视化,可以将业务数据通过可视化大屏以直观、易懂、Story-Telling的方式展现。本课程可以...博文来自:lsj960922的博客

  现在我们看新闻总是能看到这样的可视化大屏其实这个是可以免费,并且迅速制作的(当然不付费,某些功能是不能用的)开始制作我们可以下载一些免费版的大屏制作软件比如帆软的Finereport 大家可以点击链接...博文来自:syThinkCool的博客

  如何做Python的数据可视化?pyecharts是一个用于生成Echarts图表的类库。Echarts是百度开源的一个数据可视化JS库。主要用于数据可视化。一、安装pyecharts兼容Python...博文来自:youzhouliu的博客

  导读开发人员应该能够使用他们最需要的工具,同时又让社区能够带来积极影响,帮助那些工具日臻完善,从而满足不断变化的要求。1.D3Stars:46561,Forks:12465D3是一个JavaScrip...博文来自:snow2know的博客

  大数据时代,数据是非常重要的,怎样把它的重要之处就展示出来是我们需要掌握的,这就是大讲台老师本文要讲的重点数据可视化。通过观察数字和统计数据的转换以获得清晰的结论并不是一件容易的事。必须用一个合乎逻辑...博文来自:大数据前沿

  Echarts数据可视化开发代码注释全解Echarts数据可视化开发参数配置全解点击进入其他功能详解:Echarts数据可视化title详解Echarts数据可视化tooltip详解Echarts数据...博文来自:全栈工程师开发手册(原创)

  现如今,数据可视化由于数据分析的火热也变得火热起来,不过数据可视化并不是一个新技术,虽然说数据可视化相对数据分析来说比较简单,但是数据可视化却是一个十分重要的技术。在这篇文章中我们就给大家介绍一下关于...博文来自:weixin_34168700的博客

  分类1,图形元素的可视化表达2,要素的可视化表达3,栅格数据的可视化表达4,TIN可视化表达颜色对象1.RGB(红色,绿色,蓝色)颜色模型:RGBColor2.HSV(色调,纯度,亮度)颜色模型:HS...博文来自:weixin_41340063的博客

  授权转载自大数据文摘ID:BigDataDigest原文作者VolodymyrFedak翻译:胡雯思想像阅读书本一样阅读数据流?这只有在电影中才有可能发生。在现实世界中,企业必须使用数据可视化工具来读...博文来自:大数据

  前言数据的世界正在发生急剧变化,任何人都应该访问自己需要的数据,并具备获取任何数据的洞察力,而tableau正是帮我们洞察数据的好帮手。Tableau作为BItoolleader(2016Gartne...博文来自:数据分析

  第一步:在photoshop制作应用界面,(注意图层要分开)第二部:安装,并打开ae软件,(最好选用应版本,因为比较稳定) 第三部:点击composition新建合成文件,设置大小,将大小设置成750...博文来自:技术研发部官方博客

  我们常常迷失在数据中,纷繁复杂的数据让我们无所适从。可视化作为解决这问题的有效手段,通过视觉的方式让数字易于理解。数据可视化和信息可视化都是可视化的一种方式,数据可视化将......博文来自:数据分析

  全球顶级的5个数据可视化案例摘要:当数据进行可视化后,就有了参考点,可以用各种合适的方法重新处理数据或进行测试,这能使企业能够更快、更平稳、更有效地发展。这也可以让它们在利益和名声受损之前排除一些问题...博文来自:yangtu9418的博客

  数据可视化正在帮助全球的公司识别模式,预测结果并提高业务回报。可视化是数据分析的一个重要方面。简而言之,数据可视化以可视格式传达表格或空间数据的结果。图像有能力清晰地捕捉注意力并传达想法。这有助于决策...博文来自:假的鱼的博客

  大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力、更好的决策力以及更强的自动化处理能力,数据可视化......博文来自:数据与算法之美

  借助于图形化的手段,清晰、快捷有效的传达与沟通信息。从用户的角度,数据可视化可以让用户快速抓住要点信息,让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点:准确性、创新性和简...博文来自:cocacola456的博客

  前言数据可视化,是指将相对晦涩的的数据通过可视的、交互的方式进行展示,从而形象、直观地表达数据蕴含的信息和规律。早期的数据可视化作为咨询机构、金融企业的专业工具,其应用领域较为单一,应用形态较为保守。...博文来自:数据分析

  为什么数据可视化如此重要?数据可视化能把枯燥的数据变得有趣起来,不用再成千上万的数据面前焦头烂额。这里小结了下21中常见的图表。附图有的是我从excel生成的,有的是比较懒直接百度找的。柱状图最常使用...博文来自:卡小基的博客

  随着笔者所在的IT业务行业的基础系统越来越健全,数据越来越全,越来越多;业务指标的分析需要越来越多,所以开发一套高大上的业务指标分析系统越来越迫切了。考虑到业务指标的随意性及展现样式的多变性,必定需要...博文

  伦敦时间11月28日晚,2017年“信息之美奖”揭晓。今年,评委们重新设计了作品分类方式——根据作品的表现主题进行分类,大体上分为艺术、时政、环境、人文、科学、体育等。下面,让我们一同目睹这些美轮美奂...博文来自:大数据周刊

  数据可视化在维基百科上是这样定义的:指一种表示数据或信息的技术,它将数据或信息编码为包含在图形里的可见对象,如点、线、条等,目的是将信息更加清晰有效地传达给用户,是数据分析或数据科学的关键技术之一。简...博文来自:wzy0623的专栏

  还记得我写的那篇《给设计师写的XCode5指南》吗?最近,我发现在设计师圈子里,大家会经常讨论一个话题:那就是动效。邂逅CanvasCanvas是一个非常简单的Xcode库,非常强力,同时也非常的轻量...博文来自:的博客

  Jannchie基于d3.js做的一个将历史数据排名转化为动态柱状图图表的数据可视化项目。源码下载地址:1. 博文来自:的博客

  在数字经济时代,人们需要对大量的数字进行分析,帮助用户更直观的察觉差异,做出判断,减少时间成本。当然,你可能想象不到这种数据可视化的技术可以追溯到2500年前世界上的第一张地图,但是,如今利用各种形态...博文来自:多智时代的博客

  1计算宇宙的年龄【主要效果】他的计算结果与宇宙的接受年龄相比只有-0.187%。【数据源】Hyperleda【可视化工具】R【源代码的下载地址】博文来自:数据分析

  为什么想做数据可视化工程师?结合自己15年毕业到现在,对自己的职业发展方向算是一次比较清晰的认识吧。其实以前也有一两次想明确一下自己到底想做什么,适合做什么?想了很多,但后来没有坚持下来。要有一个明确...博文来自:秋天未成熟的博客

  前言:写得比较粗浅,后面会对数据分析专题进行深入,做数据可视化的时候发现没有数据来源,接下来要准备爬虫的教程了.安装环境matplotlib个人前面也说了强烈建议使用Pycharm作为Python初学...博文来自:移动开发砖家-扫地僧

  本篇文章是根据我的上篇博客,给出的改进版,由于时间有限,仅做了一个简单的优化。相关文章:将excel导入数据库2018年4月1日,新增下载地址链接:点击打开源码下载地址十分抱歉,这个链接地址没有在这篇...博文来自:Lynn_Blog

  最近比较有空,大四出来实习几个月了,作为实习狗的我,被叫去研究Docker了,汗汗! Docker的三大核心概念:镜像、容器、仓库 镜像:类似虚拟机的镜像、用俗话说就是安装文件。 容器:类似一个轻量...博文来自:我走小路的博客

  链表是数据结构中最基本常用的,C++语言中单链表是利用指针操作实现的,python作为面向对象编程的,可以使用创建一个Node类来实现链表,利用类的属性引用来代替指针操作。 下面我们创建了一个...博文来自:令狐公子的博客

  在实际的项目中,我们可能需要保存一些数据,希望下次启动的时候数据还可以使用。在这里介绍使用STM32内部flash来保存数据的方法。 在这里我使用STM32F103C8T6这款芯片做介绍。flash大...博文来自:oJianZhiTianYa1的博客

  帐号相关流程注册范围 企业 政府 媒体 其他组织换句话讲就是不让个人开发者注册。 :)填写企业信息不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的。填写公司机构信息,对公账...博文来自:小雨同学的技术博客

  相信学习编程的同学,或多或少都接触到算法的时间复杂度和空间复杂度了,那我来讲讲怎么计算。        常用的算法的时间复杂度和空间复杂度 一,求解算法的时间复杂度,其具体步骤是: ⑴ 找出算法...博文来自:杨威的博客

  用以前以前写过的自定义课表软件 ,Android 自定义View课程表表格 原生View截图合成分享的图片 看到的是图片只显示到11节处,下面的没有...博文来自:ShallCheek

  jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js ...博文来自:Websites

  强连通分量: 简言之 就是找环(每条边只走一次,两两可达) 孤立的一个点也是一个连通分量   使用tarjan算法 在嵌套的多个环中优先得到最大环( 最小环就是每个孤立点)   定义: int Ti...博文来自:九野的博客

  在MATLAB中,可以注释一段程序。 使用“%{”和“%}”。 例如 %{ 。。。 %} 即可。 经典方法是用 if 0,但缺点是不够直观,注释掉的内容仍然保持代码的颜色。现在可以用 ...博文来自:知识小屋

  TimeIsChoice:写的太好了,博主有时间能再写一些关于需求分析的文章吗?最好有实际例子,容易理解。

 
 
 
 
 
 
 
 
 
 
 
 
本类最新

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

我设置了参数

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

如何从零开始做出数据可视化的动

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

技术指标和技术参数

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

技术参数比较表 英文

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

CAK产品参数及技术要求doc

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

九阳JYL-F10参数

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

SKG DG2086榨汁机参数

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

兴发娱乐手机版
 
 
 
 
 
 
本类热门

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

冰薯加工设备的主要技术参数及配

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

砝码铸铁砝码厂家—什么是电梯电

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

悦博体育20日世界杯推荐:阿根廷将

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

继电器主要产品技术参数是什么?

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

中电兴发荣获中国电子信息行业创

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

技术偏离表

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

深圳市罗湖区财政局政府采购投诉

产品类型:[!--pbrand--] 涵盖功能:[!--intro--] 主要功能:编辑

兴发集团上半年业绩近百亿 但营
 
 
 
 
 
 
推荐新闻