58作为中国最大的分类信息网站,其服务覆盖了生活的各个领域及中国所有大中城市。在58高速平稳发展的今天,我们希望用数据可视化的效果来整合展现58集团的数据资源,让大家全方位了解58的价值。由此,我们启动了“城市脉动”项目。(注:文中附图所有数据均非真实数据,仅为效果呈现)
视觉:温六六 动效:软饼干
一、调研
我们对“城市脉动”项目的整体定位进行了思考,如何展现数据?展现场景是怎样的?我们的用户是谁?我们该给用户怎样的体验?围绕着这些问题,整个项目的核心目标也愈发清晰。
![uisdc-58-201612081](https://i-blog.csdnimg.cn/blog_migrate/04a1c039a1a057181c4689de3753b99b.jpeg)
数据是什么?
是信息的表现形式和载体(定义中摘取)。那么抛开狭义理解的数字本身,从表现形式和载体入手,只专注于各类数据应用于不同环境下最优的表现形式,让展现更具有目标性,让设计“有理有据”。
展现场景是怎样的?我们的用户是谁?
有展示场景才会有用户,因而我们将用户与展现场景放在一起进行分析。整体项目是利用大屏设备进行相关数据及图表展示,我们预想将项目应用的场景分为两种情况:
1.专业展示:参与商务活动、分享或为某些团体进行讲解及展示使用。
2.普通展示:主办公区域或前台大厅实时数据展示。
这样我们则更能准确定位出我们的用户是谁,并将用户分为3类人群:
a.专业用户:即参加商务活动、分享等,需了解具体数据内容的用户。此类用户会较为细致的查看每项数据;
b.兴趣用户:即无论数据在何处展示,其对数据都有浓厚的兴趣,会去驻足停留,仔细观看及分析数据。
c.普通用户:即匆匆过往的人群。这部分用户可能只会在屏幕前短暂停留。
![uisdc-58-201612082](https://i-blog.csdnimg.cn/blog_migrate/b3172877021087e38901d2b033fac596.jpeg)
我们该给用户怎样的体验?
基于对整体项目的分析,数据部的同学对数据内容与表现形式进行了专业化的归类,我们从用户体验及设计角度,与数据部同学进行探讨并优化内容,最终为“城市脉动”定了三个关键词:清晰、明确、迅捷。以确保给用户更为良好的体验。
a.清晰
目的是使繁杂多项的数据能够清晰展现,达到图与数据的完美结合;
b.明确
用视觉手段将各模块内容区分开,使各模块数据明确展示;
c.迅捷
再次明确用户群体及展示内容,针对不同场景及用户的差异化需求,让用户更加迅捷找到兴趣内容.
通过分析定位,我们的目标也渐渐清晰:让设计服务于数据内容,给各类用户以最为清晰明确迅捷的数据展示。即,通过视觉与动效的结合,能够给ab两类细致观看的用户良好的视觉呈现及专业的数据展示;能够给c类用户深刻的印象,从而转化为a、b类用户。真正达到让每个人,全方位的了解58集团的价值。
![uisdc-58-201612083](https://i-blog.csdnimg.cn/blog_migrate/ac74c0811bb019efb2380fbf98eb30e6.jpeg)
二、设计
“城市脉动”整个项目是以展示为主,在确保视觉效果的同时,信息的有效传递是设计重点。需构建清晰的层级关系,运用准确的视觉语言。就展示载体而言,因载体为大屏,如用浅色背景会有拖影的情况,因而在整体设计上,运用深色背景。
1. 色的视觉牵引
![uisdc-58-201612084](https://i-blog.csdnimg.cn/blog_migrate/c5049bf14d4afbc67137109e35151074.jpeg)
色彩是最能给人直观感受的,能够直接的牵引用户去寻找有效信息。在运用色彩的过程中,最初设计将数据的颜色与58logo的色彩相近,但是对于数据的同学来说,红色代表数据异常,因而整体给人紧张感;而蓝色数据则使人加以冷静,从而给人良好的视觉感受。
整体色彩确定后,便运用色彩来划分信息的层级关系,用主色调强调重点内容,以引导用户能够清晰、明确、迅捷的识别重要信息。
![uisdc-58-201612085](https://i-blog.csdnimg.cn/blog_migrate/5f38ab4ded9355158cdeb252c3d7fff5.png)
2. 构图的层级划分与视觉平衡
除色彩的视觉牵引外,用构图的方式来突出信息重点,用比例关系的手法来使视觉达到平衡,让用户在瞬间捕捉到视觉点,建立明确的信息层级,从而能够使用户迅捷的了解我们希望用户感知到的信息。
![uisdc-58-201612086](https://i-blog.csdnimg.cn/blog_migrate/64cfc0884e8e30c05581d0cc88f00cb0.jpeg)
3. 形的感知与精准表达
形的样式能够使数据给用户不一样的感知效果,用准确的形态来给用户准确的感知,减少用户在视觉层面的思考和时间,直击内容本身,使用户在能够在短时间内捕捉兴趣内容。
如柱状图中,分格样式的数据表达,则给人感受数据不够精准,复杂且无意义的设计语言形成了对用户的视觉干扰;而柱状样式的数据表达,则更为直观准确。
![uisdc-58-201612087](https://i-blog.csdnimg.cn/blog_migrate/cc4b86215b6ed091a0888fe54a3bc215.jpeg)
在三屏画面中,地图会在两屏中出现,一屏为省/直辖市地图,另一屏为中国地图,且在画面中的占比都很重。在地图样式的选择上,采用对比法来进行选择。
![uisdc-58-201612088](https://i-blog.csdnimg.cn/blog_migrate/6701dab16ba0b469d288297ca2cd35c6.jpeg)
1.色块形式。颜色过深或过浅都会使画面显得突兀,中度色则易于背景混淆,无法恰当的突出主体;
2.描边形式则更加凸显地图,依附图形自身与背景元素所产生的空间感,配合实时点击的效果,整个画面更加清晰伶俐,且精确的表达出实时点击的效果。
4. 辅助图形的视觉引导
辅助图形的运用,对画面和信息,都存在引导关系。在干扰视觉的同时,引导用户对某些数据内容进行无意识的知识补给。如图所示,左图:在省/直辖市地图为主的屏幕中,加一较小的中国地图,意为让用户更明确的感知到此省在我国的位置(或此位置为我国哪省)。
中图的时间轴形式则为统一相同时间内数据变化而设;右图中,用标尺进行内容分割,使数据模块的划分更为清晰。
![uisdc-58-201612089](https://i-blog.csdnimg.cn/blog_migrate/871f146755651a550f0a54fe79a2eadd.jpeg)
5、动效的舒适体验
整个项目中有许多数据都是实时变化的,为了减少数据变化刷新时的突然性,动效设计必不可少。在整个动效设计的过程中,除过场动画、数据的变化外,动效还肩负起增添空间感、平衡画面和整合信息的作用。
a.增添空间感:第一屏中内容较少,省/直辖市地图占据中心较大面积,但各省地图形状各具特点,大小不一,为平衡地图形状的不同,则在地图后面加以多个虚线圈使画面丰富,并使其转动起来,增添了画面的空间感。
![uisdc-58-2016120817](https://i-blog.csdnimg.cn/blog_migrate/a9f4693af5759a4da5a69a707e395b68.gif)
(省地图动态展示)
b.平衡画面:第三屏中可动数据为画面中心的中国地图及右下数据,为不忽视其它内容区,动效童鞋为左下及右上部分数据增添了光影效果,使整个画面的动态视觉感受平衡;
c.整合信息:第二屏的右下部分数据为5个模块的饼状图,若全部放于画面中则过于累赘,用倒计时的模式将其进行切屏,使信息更加聚合。
![uisdc-58-2016120816](https://i-blog.csdnimg.cn/blog_migrate/54d820bb621dabe82d19cd1a6592e8ae.gif)
(饼图切屏)
但是在增加动效的同时,仍需考虑服务器在承载大量数据涌入的同时,是否能够承载较多的动效。因而在增加动效过后,我们与技术同学一同分析画面与数据量,对动效部分进行适当取舍。使动效不必喧宾夺主,明确画面中的重点进行展示。
三、呈现
注:文中附图所有数据均非真实数据,仅为效果呈现。
![uisdc-58-2016120810](https://i-blog.csdnimg.cn/blog_migrate/370608fa69833b20ad0cff7566bbb26a.gif)
第一屏电视及其动效展示
![uisdc-58-2016120813](https://i-blog.csdnimg.cn/blog_migrate/5d1302cbe1d47ccb15b4fe5ed9adb0c3.gif)
第二屏电视
![uisdc-58-2016120814](https://i-blog.csdnimg.cn/blog_migrate/3524448d23c259da141f9fda3749beec.gif)
第三屏电视
四、结语
从立项到如今的成功上线,收获颇丰,在这个过程中,我们站在用户的角度,提出问题,解决问题;再提出问题,再解决问题…本着通过自己的方案,减少用户的观看时间与思考成本为原则,共同探讨解决方法,共同向着同一个方向努力。
我们期待通过我们的努力,让每个人都能够对58有新的了解与体验。58在发展,LUX也在进步,我们会继续本着用户第一的原则,继续脚踏实地的走好每一步。
在此特感谢数据、设计、动效、技术小伙伴们的共同努力和支持。