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

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

视觉:温六六 动效:软饼干

一、调研

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

如何从零开始做出数据可视化的动效图,PS<a href=/photoshop/ target=_blank class=infotextkey>教程</a>,

数据是什么?

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

展现场景是怎样的?我们的用户是谁?

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

1.专业展示:参与商务活动、分享或为某些团体进行讲解及展示使用。

2.普通展示:主办公区域或前台大厅实时数据展示。

这样我们则更能准确定位出我们的用户是谁,并将用户分为3类人群:

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

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

c.普通用户:即匆匆过往的人群。这部分用户可能只会在屏幕前短暂停留。

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

我们该给用户怎样的体验?

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

a.清晰

目的是使繁杂多项的数据能够清晰展现,达到图与数据的完美结合;

b.明确

用视觉手段将各模块内容区分开,使各模块数据明确展示;

c.迅捷

再次明确用户群体及展示内容,针对不同场景及用户的差异化需求,让用户更加迅捷找到兴趣内容.

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

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

二、设计

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

1. 色的视觉牵引

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

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

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

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

2. 构图的层级划分与视觉平衡

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

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

3. 形的感知与精准表达

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

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

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

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

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

1.色块形式。颜色过深或过浅都会使画面显得突兀,中度色则易于背景混淆,无法恰当的突出主体;

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

4. 辅助图形的视觉引导

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

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

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

5、动效的舒适体验

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

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

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

(省地图动态展示)

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

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

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

(饼图切屏)

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

三、呈现

注:文中附图所有数据均非真实数据,仅为效果呈现。

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

第一屏电视及其动效展示

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

第二屏电视

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

第三屏电视

四、结语

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

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

在此特感谢数据、设计、动效、技术小伙伴们的共同努力和支持。