且杂乱无章，围绕这些数据进行可视化设计即使在最好的情况下也是一项挑战。受响应式界面设计最新趋势的影响，以及出于可视化实时和社交媒体数据的需求，当今的信息设计师采用了各种技术来设计针对一系列设备比例的不可预测数据的可视化效果。 什么是响应式设计？响应式设计为不同的用例和环境创造了最佳用户体验，并且全部内置在一个网站中。例如，一个可以自动缩放和重新排列以适应移动设备而不是全尺寸显示器的界面就是使用响应式设计。 什么是响应式信息设计？响应式信息设计非常相似，但它也涉及对传入数据的响应。它定义了一组用于设计数据可视化和信息图表的最佳实践，其中在设计时无法 100% 了解所可视化数据的性质。换句话说：
响应式信息设计的目的是针对具有不同形式、形状和大小的信息提供强大的视觉表现。
响应式信息设计原则存在于日常产品中，例如汽车的转速表，其中根据汽车发动机的当前转速，采用不同的设计处理来引起对不同范围的值的注意。 在 Visual.ly，我们使用响应式信息设计原则构建Visual.ly Create。Create上可以生成的许多信息图表都是由来自社交网络和其他数据 API 的动态数据驱动的。其中一些信息图表所使用的数据来自 Facebook 和 Twitter。用户的个人资料通常存在不完整或缺失的字段，而在一个信息图表设计中找到适应这些不同边缘情况的方法可能是一个巨大的挑战。问题的解决方案在于编程、设计、数据分析和数据可视化的交叉点。响应式信息设计可以在此交叉点提供帮助。响应式信息设计原则有许多不同的应用。以下是它们与动态生成的信息图形设计的关系。
原则一：响应式扩展
包含信息的元素的响应式缩放是交互式和静态信息图表设计师常用的一种技术。 通常，所使用的数据大小不定。在这种情况下，一种选择是省略数据点，但这并不理想，因为它可能会通过错误采样而歪曲集合。另一种选择是更改可视化类型，尽管这可能会导致传达不同的概念。通常，最好的选择是缩小表示数据的视觉对象的大小，但这仅在结果在可 墨西哥移动数据库 视化中的 最大元素数量范围内时才有效。在这里，数据驱动元素占据了其父容器的整个高度，但当有更多行数据需要可视化时，就会出现问题。 解决方案是开发可视化，以便随着更多元素的添加，元素可以缩放以适应其容器。这可以保持可视化的完整性，而不会改变原始设计的整体布局或解释。请注意，条形的宽度是根据数据中的定量值缩放的，而条形的高度是根据数据中的值数量缩放的。这是一个使用 d3.js 编写的代码片段，它应用了根据元素的宽度和高度缩放元素的概念。
后备方案
视觉回退是响应式信息设计的另一个重要方面。由于数据可能不会以预期的格式返回（或根本不返回），因此需要有视觉回退来适应不同的边缘情况。
原则2：动态讲故事
数据驱动的标注可以成为一种有用的工具，用于将注意力吸引到可视化中有趣或独特的数据片段上。它们也可能特别具有挑战性，因为很难提前知道可视化的哪些部分值得标注。为了实现这一点，必须将分析阶段的一部分内置到数据可视化中。此区域图标出了主题标签出现次数最多的一天。此视觉处理特别关注了主题标签信息图中的这一天。
原则3：快速成型
应对未知和可变数据挑战的最佳方法是从深入了解数据源开始设计过程。尝试快速确定从您使用的信息源中“可能”实现的可视化。例如，在设计Facebook Monsterizer时，第一步是确定哪些用户数据可以通过 Facebook API 访问，哪些不能。尽快找到数据和设计的第一个交汇点是加快开发过程的关键。数据与设计的交汇点是一切崩溃的地方。此时必须协商数据约束和设计规范，以确保每个组合都有可接受的结果。有关响应式信息设计的更多信息，请参阅我们的幻灯片演示。
Adam Breckler是Visual.ly的产品开发副总裁。当 Adam 不忙于开发产品功能来取悦客户时，他会在Instagram上发布快照，并在自己的网站上写博客。Nils Schlomann是 Visual.ly 的初级软件开发人员，也是一名狂热的排版爱好者。您可以在 Twitter 上关注他@BausOfTheNauf。
分享