论可视化设计师的自我修养

DT财经 2017-09-30 13:28 阅读:247
摘要:文/数据侠张梓豪DT君前阵子写了一篇《公司楼下竟然没有星巴克,你想过为什么吗?》,里面有一张玫瑰图引来了数据可视化技术大牛们的推演还原,比如之前数据侠杜雨的《DT君的星巴克门店分布玫瑰图,被数据侠“破

文/数据侠 张梓豪

DT君前阵子写了一篇《公司楼下竟然没有星巴克,你想过为什么吗?》,里面有一张玫瑰图引来了数据可视化技术大牛们的推演还原,比如之前数据侠杜雨的《DT君的星巴克门店分布玫瑰图,被数据侠“破解”了!》,以及来自数据侠刘万祥的《半圈式玫瑰图》。

看过大家不同版本的解读,DT君终于按捺不住了,请来了我们的设计师小哥哥,dei,也就是这张图的创作者本人,梓豪童鞋,为大家来一波这张图最原汁原味的数据可视化构思。一起来看看精巧的数据图表背后,包含着设计师怎样的“小心思”吧~

十只老鼠等于一头大象

日常工作中我对接的业务线是DT君的数据内容生产,及构建数据社群,这决定了我们工作的基础是围绕“沟通”展开的,设计的出发点,是确保我们的可视化目标是传达数据而非提供功能。

与独立设计师不同,在公司中的设计更强调协作,往往一张很小的图也会有很多人的参与,单纯从制图来说无疑是降低工作效率,但是团队协作的优点也在于此,集中大家的智慧可以做到更好。

打个不恰当的比方“一个人如果是一只老鼠的话,那么十个人加在一起可能就是一只大象。”而原子设计的方法,可以使每一个产品(作品)具备增量小、可迭代的特点,发挥团队价值。

玫瑰图背后的原子设计理念

在平面设计领域,我们常用的三大软件,PS、AI和Sketch。

这三款软件功能相仿,很多新手会简单地理解为“对应不同的需求使用不同的软件啊”,这就是以“工具”的视角来看待“工具”的特点。

实际上,这三款软件在我看来代表了三种不同的设计模式,PS体现的是“层级”概念,AI则是“形状和板式”的侧重点,而Sketch就是我说的“原子设计”的概念。

原子设计,顾名思义,就是将设计需求拆解到“原子级别”,相关概念大家可以自己百度,不多赘述。我尝试将这一设计模式引入日常的数据可视化工作中,这里就以这个引发大家讨论的“半圈式玫瑰图”为例来拆解:

上面展示的就是原子设计在这张可视化图中的使用,我们把图拆解为颜色模式(colors)、字体标准(fontstyle)、排版标准(margin,padding)、布局模式(layout)和基本图表(chart modal),这里用的是一个饼图。

当我们用设计的视角来看待这张图的时候,我们不仅仅是让读者看到数据,而是让读者看清这组数据的分布模式(layout),看见数值之间的关系(饼图属性),因为大家关心的是数据背后的意义而并非数据本身——这也是我可视化设计的出发点。

我们说设计与创造不能画等号,但设计可以创新,在原子设计模式下,任何一个组成部分的“创新”,都可以推动可视化作品的创新,同时保持我们团队的出图风格的一致性。

组织协作模式下的数据可视化

数据可视化实际上从数据的获取就开始了,之后需要清洗,整理,挖掘,可视化展示,一直到为读者提供更好的阅读体验,这是一个跨学科的过程。

对数据可视化稍有了解的人都知道,其实可视化只是其中10%的工作量,还好我们是一个团队,之前90%的苦力活都被DT的小伙伴完成了。

作为其中设计输出的完稿设计师,接触到数据的反应是这个数据是真的吗?可信吗?

所以,“信任”变的非常重要,信任不仅来自于人与人之间,更来自于团队对于可视化工作的支持,在这个业务体系中,从设计的角度探索团队价值的放大更重要。

还是以这张玫瑰图为例,其实是很简单的一组数据,根据视觉编码的原则,我们确定了两种赋值模型。

DT君告诉我,使用饼图的基础图表还可以表达它们(不同城市星巴克门店数量)的对比关系。

这样,也就确定了这张图的定义:1,数值对比表达;2,数值常量表达。

最后我使用D3完成了这张图的基本定义输出。这里也解释一下为什么要用D3,而不是其他的看起来可能更为高效的软件和库,其实原因就是我们的“原子设计”模式的协作优势。D3作为可视化的基础图表库,可以为我们提供最原始的基础图形:

这时的图还是很丑的,有点光秃秃的感觉,如何让它更好看,更是DT视觉风格?

这就是颜色样式和排版样式的套用,这些元素在我们的设计中都已经积累下来了,我这次做图只需要复用即可。

确定数据赋值逻辑>确定基本图表类型>样式叠加,必要时还可以添加交互,这样的一个协作流程,我们通过原子设计分解到每一个点,比如我们这个大家描述的“半圈式玫瑰图”就是我们之前在“地铁1公里”项目中使用的玫瑰图的积淀,在这次做图中成为我们的“分子”。

每一次日常稿件的出图积累下的颜色模式,在被结构化后也称为我们的原子。这样的协作模式增量小、可迭代,让我们的团队协作每一次产出得到积淀,不断成长。

期待更多数据侠干货分享、话题讨论、福利发放?在公众号DT数据侠(ID:DTdatahero)后台回复“数据社群”,可申请加入DT数据社群。

数据侠门派

本文数据侠张梓豪,DT财经可视化设计师。

加入数据侠

“数据侠计划”由第一财经数据新媒体DT财经发起的数据人社群平台,旗下有数据侠专栏、数据大咖及爱好者社群、线上线下“数据侠实验室”系列活动等项目,了解数据侠计划详情请关注DT数据侠点击“阅读原文”。

版权声明
本文仅代表作者观点,不代表百度立场。
本文系作者授权百度百家发表,未经许可,不得转载。
阅读量: 247
0