星巴克玫瑰图终极解密：数据可视化的原子设计方法论

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财经可视化设计师。