基于Who，Where，What思考的项目目标

▲  数据是什么？

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

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

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

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

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

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

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

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

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

通过联系使用场景，将目标用户进行梳理分类

▲  我们该给用户怎样的体验？

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

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

b.明确，用视觉手段将各模块内容区分开，使各模块数据明确展示；

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

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

基于用户分类，我们提取出设计关键词“清晰，明确，迅捷”

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

▲  色彩的视觉牵引

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

不断完善的配色方案

最终呈现的配色方案

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

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

页面的结构布局

▲  形的感知与精准表达

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

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

好的图表细节样式，便于用户短时间内捕捉内容

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

线与面的平衡

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

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

▲  辅助图形的视觉引导

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

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

通过丰富但不喧宾夺主的装饰细节联结各模块的内容

▲  动效的舒适体验      

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

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

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

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

       但是在增加动态设计的同时，仍需考虑服务器在大量数据涌入时的承载力，以及渲染效果的承载力。因此在前期设计出动效样稿后，我们与技术同学一同分析画面与数据情况，对动效部分进行适当取舍。使效果不必喧宾夺主，只为画面中的重点进行突出展示。

（注：文中附图所有数据均非真实数据，仅为效果呈现）

 第一屏电视及其动态展示

第二屏电视及其动态展示

第三屏电视及其动态展示

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

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

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

声明

本文由58HRG原创，LUX出品

如需转载需标明出处并转发头图及缩略图

并和本公众号取得联系

往期回顾：

滴滴出行聊设计：当神奇工厂邂逅小桔科技

动效实战派｜做交互动效你一定要知道“这三点”（独家原创）