品牌标志设计：数据视觉化的乐趣与挑战

数据视觉化正在成为新的潮流。全世界的出版者—个人博主也好，大型在线出版机构也好---都已经意识到：形象化的图表地图在传达信息上远比传统的数字有效。从简单的信息表到效果绚丽的信息图再到更为复杂的动画，视觉化的数据在互联网上随处可见。然而，一个现象一旦成为潮流，要想再脱颖而出就相当困难。只需看一眼下面谷歌分析（Google Analytics）实时监测图，就能明白数据视觉化的魅力所在：

 

 

或者可以看一下纽约时报制作的“世界石油分布图”（ Map of the Oil World）。但我相信你一定看过比这张图更出色的图表，在这种图表中，各个气泡并不彼此重叠，而是排列成一张世界地图。就像下面这张同样是由纽约时报制作的视觉数据图表一样：

 

这种视觉化数据图表在仅需展现少数几个“上榜”国家时尤其适用。如果图中的每个气泡都严格按照现实中各个国家的位置排列，那么就会失去它应有的魅力。

 

我曾在数据视觉库 amCharts工作过很多年，并一直在寻找既能有效地传达信息，又能在视觉上吸引用户的数据呈现方式。显然，像我们上面列举的的图表能够很好地传达地理-数量一类的数据。 amCharts图表库的默认图表风格-- JavaScript Maps—能够让用户很轻松地制作标准的“气泡”型数据图表，如下图所示：

 

尽管上面的图标已经称得上相当美观了，执行起来也很容易，但它还存在气泡重叠的问题。让我们来试着解决它。

 

我可以通过改写script来检查和解决图形冲突的问题（操作起来并不容易）。根据我在游戏行业工作的经验，我知道所有仿物理文件库中都有内置的冲突监测功能。我们不妨就利用这一功能。不止如此，既然我们决定利用文件库的功能，何不利用得更充分一些呢？我们可以赋予视觉图表动画效果，以便它能毫无疑问地抓住观看者的注意力。

 

已经有一些制作好的JavaScript仿物理运动文件可供使用。我选择的是最为著名的一个模板， box2dweb。我的理由也很简单，我们有一张气泡图，也有一张同样的大小的，布满同样气泡的box2d世界地图（用户不可见）。

 

我们可以使用（不可见的）box2d世界地图来模仿气泡的活动及互动，并用它来监视气泡的位置及对它们的位置进行动态调整。这里我不想详细描述其中的技术细节—如果你愿意的话，可以自行查看源代码。为了防止气泡“坠落”，我们只需将重力（gravity）设置为 0。最终效果如下：

 

看起来还不错吧？现在，我想要在实际演示时改变某些气泡的大小，同时也让其它气泡做相应调整。为了实现这一点，我们需要对box2d世界地图中的气泡和气泡图中的气泡同时调整大小。在经过一些测试之后，我发现通过增加气泡的空间—而不是减小—可以实现这一效果。在其他较大的气泡变小之前就已经改变位置的气泡无法回归原位。如下图所示：

 

 

因此我们需要更为复杂的解决之道。在经过一些尝试后，我认识到：

1. 首先，需要创建一个静态的基准点，这个基准点位于每个国家（即气泡）的中心，位置固定不变。

2. 把这个基准点设置成“感应器”，别的目标不得与之冲突

3. 在位置固定的“感应器”与气泡之间设置一个“关节”，调整这个“关节”的属性，让它在允许气泡进行一定程度的活动的同时，又始终受到“感应器”的牵制。

 

这样一来，整个图表就更为完美了:

 

为了更好地展示仿物理引擎的作用，我在下面列出了另一张我们制作的视觉化数据图，它显示的全世界咖啡消费的情况：

 

从技术角度讲，这张图与上面所讨论的最后一张图十分近似。唯一的不同是，这张图中的气泡最初并不是位于设定好的位置，而是位于图标的中央，也就是咖啡壶的正上方。咖啡壶由box2d模板中的三个正方形组成。如果对“调试信息”（共两处，一处位于JavaScript源代码中，一处位于HTML的画布元素中）中的所有线条都取消注释，便可获得box2d的调试信息视图模式：

 

 

 

效果很棒，对吧？实现这种效果也仅仅只需500行左右的代码。

结语

 

物理引擎不只对于游戏和特效模仿有用。借助它，我们还可以创造出惊人的动画效果，而且只需少量代码，就能解决原本可能需要耗费大量时间的几何问题。

 

在这篇文章中，我们关注的主要是box2d引擎，它的确非常强大，但在运行速度较慢的设备上反应也会变慢。除这个引擎之外还有许多其他的引擎。我建议你试一下别的引擎，以找出与你的任务最相匹配的引擎。

 

视觉化数据图表的潜力是巨大的。利用物理引擎，你可以创建像多米诺骨牌一样倒下的柱式图表，也可以创建可以卷曲，变形的地图式图表。无论哪种图表，都是为了更迅速地吸引用户的注意力，为用户提供更有效的互动方式。

【设汇主义】

 

设计，不仅需要非同一般的创意，更需要默默的积累与学习。设汇主义，汇聚与设计有关的一切，从行业精英的经验心得，到最实用最解渴的设计技巧，从国际前沿的设计新动向，到设计的历史与趣事，“设汇主义”专栏内容将为你提供源源不绝的灵感，助你早日钻破束缚的茧，化为五彩斑斓的蝶！

品牌标志设计：数据视觉化的乐趣与挑战，标志帝国资料由标志帝国官方网站提供www.logodiguo.com, 标志帝国是一家定位人文精神的创意型品牌设计策划机构，全国统一热线400-6568-221 13213019308,公司自2007年成立以来，一直秉承着以设计的力量为大众提供新价值的使命，专心致力于郑州LOGO设计、郑州标志设计、郑州VI设计、品牌设计策划、商标注册等服务。标志帝国多年来凭借着顶尖的设计团队、创新的思维、完美的作品，已经为数千家企业及产品成功设计了各种LOGO、标志等等，得到了广大用户的一致好评。标志帝国，创立logo领导品牌！欢迎广大企业前来咨询，客服qq：172067251 176371869 178315071 179109875 190377813。