数据可视化的企业级应用，我也想有一个“贾维斯”

Posted 2021-04-28 梓豪破壳手记

正正好一年前的这个时候，我了解到了这个概念，上个月我阅读了一篇“DesOps - 设计中的下一波浪潮”的文章，也有了更多的思考和想象，作为总结篇，这周我们就再来聊一聊这个话题。

原子设计是由Bradforst提出：是分层级、有条理地创建设计系统的方法。

在《钢铁侠》中，除了炫酷的战甲，最令人羡慕的一定就是他的好伙伴“贾维斯”。贾维斯是一款智能系统，以妮妮的老管家埃德温·贾维斯命名。他帮助妮妮处理各种事务，计算各种信息，战甲的开发以及方舟反应炉的更新。

一切都是为了做更多设计

在设计领域，过往设计作为视觉力量以“style guide（样式指南）的形式存在从而制造视觉形态上的一致性，配合大规模的营销活动为企业树立品牌形象。

现在，设计更作为企业的“力量”我们可以看到，现在每一个大厂背后都有强劲的“design system”作支撑。

比如：Google的Material design；IBM的IBM design language和应用于cloud业务的carbon design；苹果的Human Interface Guidelines；蚂蚁金服的Ant Design等等。都在试图创建一个应用于大规模产品开发和设计人员协同的体系规则。

这是一个有趣的十字路口，产品交付的下一个重点是为创作过程带来可扩展性和自动化。

之所以有这样的演化，我觉得还是可以用原子设计的概念去解释。

我们设想一个设计组织创立之初，可能只有一个设计师，有设计需求，直接对接完成就OK。在一段时间后，随着知名度的提升，有更多的设计需求出现，原来的一两个设计师无法完成的时候，就会要找更多的人来完成任务。这个阶段我觉得可以对应品牌营销的“扩大营销”的概念，我们这里称之为“扩大设计”。随着工作量的进一步提升，社会化分工就很有必要了，即便是在极小的细分领域都会有分工。而将不同的设计工作能够整合在一个稳定的体系中还需要一定的管理。也就是目前大多数设计组织发展的一个稳定结构。

但是，一旦这个组织进一步扩张的时候，比如上述的几个“大厂”他们的服务都是遍及全球的品牌和用户。因此，设计师甚至可能分布在全球各地，大家都有时差、地方差异、文化差异。因此就需要一个system的概念来支撑整个设计科学。

在这里我用贾维斯在电影中的形象刻画一下“system”体现出了强于一般style guide（样式指南）的以下几个特征：

1、高效，可以规模化应用，在贾维斯的帮助下，妮妮从孤军奋战支到拥有了一整支钢铁军团。

2、易用性，在复联中，贾维斯和星期五从来都不是只有妮妮能指挥的私人管家，只要口令得当，雷神也能开飞船。同理，设计系统也应该被所有的相关人员操作，为他们预留接口，在向他们提供服务的同时能够接收相关领域知识的反馈。

3、可进化，在复联2中，贾维斯最终战胜奥创并在心灵宝石的护驾下诞生了幻视。所以，设计系统也应该可以不断进化的。

独特的挑战

作为可视化设计师，工作中我遇到了“信息点传达”，“数据图表优化”，数据新闻中的数据可视化三个方面的考验。作为数据新媒体，dt财经在过去的3年中，整个团队制作了超过数以千计的图、表，讨论话题包括了，产品量化对比、品牌间量化、基于城市地理位置商圈选址对比。

这些大量的信息点而不仅仅是数据点需要设计师将他们组织成易于阅读消化的信息单元，处理完全不同的数据结构，数据格式，数据列表长度、信息模块组合。如果进一步放大这种规模化且存在差异化的设计需求，我们就需要逻辑和设计系统来集体生成可视化。

设想的目标是：这个design system能够涵盖目前我自己在工作中涉猎的所有问题，并能够在未来的学习工作中帮助到我，成为我进一步学习的Jarvis。

“原子设计不仅仅是模块化，更在于它具备层级属性，层与层之间互相影响，从而成为一个整体。”——zihaoself

因此，结构的打造最为核心，它决定了所有的层级和资源是否能够形成一个强大的整体。

Design System 与style guide的关系

设计系统是管理产品组成和不断发展的规则，样式指南用于创建可视化的层次结构，用于对整个系统内最小单元（atoms）的定义。设计系统与样式指南、组件、块是父子关系，样式指南与组件、块是兄弟关系，兄引导弟。

https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/

在这个Design System 中style guide与components、blocks的关系

blocks被视作web设计中距离完稿最后一步的页面结构，是组装的最后骨架。它的灵活性也最强，由之前定义的atoms级别symbol和components、基础的blocks灵活配置。就像乐高玩具一样。

团队协style guide领导数据可视化的产出。

设计师负责回答“why”，为什么“长这样”的问题，结合具体需求（品牌属性、概念）抽象问题，并在style guide的原子层封装阶段注入很强的风格，并对所有设计资源实现管理。可视化设计内容（blocks）服从于完稿的视觉表达，并结合style guide在compenents撰写时与其他设计资源保持一致性。

结构化数据从根本上决定了可视化的结果，所以设计师需要充分理解数据结构，在数据分析和结构重组的阶段做早期设计。

数据可视化的起点是数据，准确的说是“结构化数据”，有准确的数据维度、字段，列表形式呈现。数据结构与可视化一一对应。最终的结构化数据表本质上承接了内容框架（主题）和设计作品。在其中找到最吻合的点，可以帮助分析师，也从根本上优化了设计产出。

以chord diagram图为例，虽然都是相同的三个字段的数据结构，我在《》这篇文章中做了数据结构的再次调整的尝试，以圆形布局结构为基础做了切分，更为美观。

就好像优质的平面设计成果背后有极为复杂的视觉层次一样，美丽的数据展现背后是来自于相当复杂的数据结构。

现在，blocks层级的问题基本上建立了，也有了最初始状态的一个基本结构，后面的工作就是结合平面设计的本质创建style guide和不断创建components来添砖加瓦啦。