58 LUX丨如何从零开始做出数据可视化的动效图? - 优设网 - UISDC

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

2016/12/08 29157评论区

dynamic-infographic-design-skills-1

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

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

一、调研

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

uisdc-58-201612081

数据是什么?

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

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

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

1.专业展示:参与商务活动、分享或为某些团体进行讲解及展示使用。
2.普通展示:主办公区域或前台大厅实时数据展示。

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

a.专业用户:即参加商务活动、分享等,需了解具体数据内容的用户。此类用户会较为细致的查看每项数据;
b.兴趣用户:即无论数据在何处展示,其对数据都有浓厚的兴趣,会去驻足停留,仔细观看及分析数据。
c.普通用户:即匆匆过往的人群。这部分用户可能只会在屏幕前短暂停留。

uisdc-58-201612082

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

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

a.清晰

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

b.明确

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

c.迅捷

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

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

uisdc-58-201612083

二、设计

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

1. 色的视觉牵引

uisdc-58-201612084

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

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

uisdc-58-201612085

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

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

uisdc-58-201612086

3. 形的感知与精准表达

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

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

uisdc-58-201612087

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

uisdc-58-201612088

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

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

4. 辅助图形的视觉引导

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

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

uisdc-58-201612089

5、动效的舒适体验

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

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

uisdc-58-2016120817

(省地图动态展示)

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

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

uisdc-58-2016120816

(饼图切屏)

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

三、呈现

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

uisdc-58-2016120810

第一屏电视及其动效展示

uisdc-58-2016120813

第二屏电视

uisdc-58-2016120814

第三屏电视

四、结语

从立项到如今的成功上线,收获颇丰,在这个过程中,我们站在用户的角度,提出问题,解决问题;再提出问题,再解决问题…本着通过自己的方案,减少用户的观看时间与思考成本为原则,共同探讨解决方法,共同向着同一个方向努力。
我们期待通过我们的努力,让每个人都能够对58有新的了解与体验。58在发展,LUX也在进步,我们会继续本着用户第一的原则,继续脚踏实地的走好每一步。

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

欢迎关注58集团LUX的公众号~

58luxqr2

「信息可视化绘制指南」

  1. 类型:《超全面!一份详尽实用的信息可视化绘制指南》
  2. 工具:《堪称神器!有哪些不为人知的超实用数据可视化工具?》
  3. 配色:《3个技巧搞定可视化信息图的色彩搭配》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/dynamic-infographic-design-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

界面设计 设计圈干货 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里