24.3. 可视化与交互

可视化可以将数据和信息转化为易于理解和分析的视觉表示形式，以放大人类的认知能力，帮助人们发现数据中隐藏的模式、趋势、异常等特征，从而获得新的洞见和知识。 然而，静态的可视化图表往往难以完全展现大规模、高维、复杂数据的全貌，也无法满足用户探索数据、揭示信息、验证假设的需求，因此，交互式可视化便应运而生。

24.3.1. 什么是交互式可视化？

24.3.1.1. 交互的定义与发展

交互在可视化中扮演着至关重要的角色。可视化中的交互是指用户与可视化表示之间的对话与操作过程，旨在帮助用户主动探索数据，揭示数据中隐藏的信息，构建对数据的心智模型。 通过对可视化数据的交互操作，用户能够动态控制可视化视图，调整数据表示方式，筛选感兴趣的数据子集，深入分析数据的不同方面，进而大大提升可视化的表达力和分析力。

交互式可视化的发展可以追溯到20世纪60年代。 1962年，Ivan Sutherland在他的博士论文《Sketchpad, A Man-Machine Graphical Communication System》中提出了交互式计算机图形学的概念。 Sketchpad被公认为是第一个真正的交互式图形用户界面和可视化系统，奠定了人机交互领域的基础。 Sketchpad引入了诸如几何约束、面向对象、视图与对象分离等重要概念，用户可以通过光笔在屏幕上直接绘制和操纵图形对象，展现了交互对可视化的重要作用。

图1 Sketchpad界面图 ![Sketchpad界面示意图]

20世纪70-80年代，随着计算机图形学、GUI、面向对象编程等技术的发展，以及个人计算机的普及，交互式可视化迎来了蓬勃发展的时期。一系列里程碑式的可视化系统和技术相继出现：

1975年，Xerox PARC的Alto计算机首次将鼠标引入人机交互，开创了WIMP（Windows, Icons, Menus, Pointers）范式的先河。 1987年，Ben Shneiderman提出了”直接操作”（Direct Manipulation）的概念，强调交互应该让用户直接操纵可视化对象，并实时反馈，从而提高交互的自然感（naturalness）、掌控感和参与感。 1988年，George Robertson等人开发的Information Visualizer系统，集成了多种交互式可视化技术，如3D透视墙、锥形树、超立方体等，展示了高维数据的可视化和探索能力。 1991年，Becker和Cleveland发表了关于交互式动态图形（Interactive Dynamic Graphics）的开创性文章，阐述了交互、联动对统计数据可视化的重要性，引发了交互式数据分析的研究热潮。

进入21世纪以来，人机交互技术不断突破，为交互式可视化注入了新的活力。 一方面，传统的桌面交互范式得到了延伸和提升。 另一方面，全新的交互范式和技术也不断涌现，为可视化提供了更广阔的设计空间。 此外，移动互联网、可穿戴设备、物联网等新兴技术也在推动交互式可视化的发展，使其走出专业领域的围墙，渗透到人们生活的方方面面。 与此同时，交互式可视化的应用领域也不断扩展，从早期的科学计算、统计分析，逐渐渗透到地理信息、金融商业、社交媒体、医疗健康、数字人文、体育竞技、教育学习等各行各业，推动了行业的变革发展。

可以预见，随着人工智能、大数据、云计算、物联网等新技术的加速演进和融合创新，未来交互式可视化将在智慧城市、智能制造、自动驾驶、智慧医疗等领域扮演更加关键的角色，推动数据价值的充分释放和行业变革的深入发展

24.3.1.2. 交互的重要性

在当今海量且动态的数据世界里，“交互”从单纯的界面操作手段，演变成支撑人机协同分析的重要桥梁。 我们将从以下三个主要方面，进一步探讨交互在可视化中的核心价值。

1. 交互促进数据探索与洞见发现

传统的静态可视化图表虽然能够揭示数据的某些特征和规律，但其探索能力有限。大规模、高维、复杂的数据往往难以在单一的静态视图中完全展现。交互式可视化允许用户动态地探索数据空间，从不同角度、不同层次、不同粒度审视数据。 用户可以通过交互操作（如平移、缩放、筛选、联动等）深入挖掘数据，发现数据中隐藏的模式、趋势、异常、关联等特征，从而获得新的洞见和知识。 Shneiderman (1996) 提出的”信息检索箴言”（Visual Information-Seeking Mantra）高度概括了交互对数据探索的促进作用： Overview first（概览为先）：交互应该首先提供数据的总体概览，让用户对数据有一个全局印象； Zoom and filter（缩放过滤）：交互应该允许用户聚焦感兴趣的数据子集，并排除无关数据； Details-on-demand（按需细节）：交互应该支持在保持上下文的同时，按需查看数据的详细信息。 交互式可视化系统通过提供灵活、直观的交互机制，鼓励和引导用户主动探索数据，发现数据中隐藏的洞见，推动数据驱动的知识发现过程。

2. 交互增强用户理解与决策

复杂的数据和可视化对用户的认知能力提出了挑战。静态的可视化图表可能难以被用户正确理解和解释，导致错误的判断和决策。交互式可视化通过提供多种视角和表示，以及丰富的交互手段，帮助用户深入理解数据内涵，建立正确的心智模型。 交互对增强用户理解的作用体现在以下几个方面：

• 多视角探索：交互允许用户从不同的视角和维度观察数据，如切换数据属性、调整数据聚合层次、改变视觉编码等，帮助用户全面认识数据。

• 视图操作：交互支持对视图的平移、缩放、旋转、过滤等操作，让用户能够聚焦感兴趣的数据区域，排除干扰因素，深入分析局部特征。

• 细节查询：交互提供按需查看数据详细信息的能力，如通过鼠标悬停、点击等操作查看单个数据点的属性值，帮助用户理解数据背后的语义。

• 多视图联动：交互支持在多个视图之间建立联动和协同，如在一个视图中的操作（如选择、过滤）自动同步到其他视图，帮助用户理解数据的不同侧面以及视图之间的关联。

• 上下文保持：交互在提供局部细节的同时，始终保持对全局上下文的追踪，如通过概览+细节（Overview+Detail）、聚焦+上下文（focus+context）等交互模式，帮助用户将局部特征与整体背景联系起来。 交互式可视化增强了用户对数据和分析过程的掌控感，提高了用户的信心和参与感，从而促进数据驱动的决策过程。 一方面，可视化交互将用户的注意力引导到最相关的数据和视觉线索上，降低认知负荷，减少错误理解的风险。另一方面，可视化交互允许用户动态地模拟不同情景和假设，评估不同决策的潜在影响，进而做出明智的选择。

3. 交互支持协同分析与知识共享

现实世界中的数据分析任务往往需要多人协作。不同背景和专业的人（如数据分析师、领域专家、决策者等）需要在分析过程中交换意见、共享洞见。交互式可视化为这种协同分析提供了有效的平台和媒介。 协作型可视化交互具有以下优势：

• 意见交流：协作型交互允许多个用户同时或先后对可视化视图进行操作和标注，如进行选择、过滤、重构等，并通过图形、文本等方式标注自己的见解，支持不同用户之间的观点交流和碰撞。

• 分工协作：协作型交互支持将复杂的分析任务分解为多个部分，由不同的用户并行处理，提高分析效率。视图的分离与联动机制确保各个用户的分析视角可以相互补充又不失同步。

• 知识整合：协作型交互提供公共和私有的工作空间，允许用户在独立探索的基础上，将个人的洞见和知识贡献到群体的分析成果中。版本管理和记录回放等机制有助于追踪群体知识的演化过程。

• 跨地域协作：分布式协作型交互支持远程的多个用户通过网络参与到同一个可视化分析过程中。共享的视觉表示和交互状态确保各地用户拥有一致的上下文理解。 协同可视分析不仅能够汇聚不同用户的智慧，加速洞见的发现和知识的积累，还能培养用户的团队意识和协作精神，提升用户体验。

24.3.2. 常见的交互技术

根据不同的交互意图，可以将可视化交互技术归纳为以下七种类型（Yi et al. [YaKSJ07]）：

• 选择（Select）：标记感兴趣的数据项，以便进一步检查。

• 探索（Explore）：以某种方式改变可视化视图，探索数据的不同子集或不同表示。

• 重构（Reconfigure）：改变数据的表示方式，如排序、重新布局等。

• 编码（Encode）：改变数据到视觉元素的映射方式，如改变颜色、大小、形状等视觉通道。

• 抽象/精细化（Abstract/Elaborate）：调整数据聚合和抽象的层次，在概览和细节之间切换。

• 过滤（Filter）：根据某些条件，将数据分为关注点和非关注点两部分。

• 联系（Connect）：揭示数据项之间的关系，如关联、相关性、因果关系等。

这些交互意图并非相互独立，在实际的可视化系统中往往会组合使用，形成复合的交互模式。高级的交互模式如概览+细节、聚焦+上下文、多视图协同等，都是由多个基本交互意图组合而成。

如果以技术实现为核心，更加关注交互的操作对象与实现手段，那么根据操作对象与目标可将交互技术分为视图操作、数据操作与叙事构建三类，具体如下：

• 视图操作（View Manipulation）

  • 基础导航：

    • 平移与缩放：通过拖拽画布（桌面端）或手势滑动（移动端）调整可视区域。缩放操作常采用对数尺度应对长尾分布数据（如网络流量中的极少数大流量节点）。

    • 3D视图控制：在三维可视化中，用户可通过轨道旋转（绕目标点旋转模型）、第一人称漫游（WASD键盘控制移动）或VR手柄交互探索复杂结构（如分子模型、建筑BIM）。

  • 视图布局调整：

    • 动态排序：点击表头按某列升序/降序排列表格数据，或拖动维度轴调整平行坐标的变量顺序。

    • 视图切换：在折线图、柱状图、热力图间动态切换，适配不同分析场景。

• 数据操作（Data Manipulation）

  • 数据筛选与聚焦：

    • 属性过滤：通过多选下拉菜单勾选类别（如产品类型：手机、平板），或使用滑块设置数值范围（如价格0-5000元）。

    • 时空范围选择：在地图上框选地理区域，或通过时间轴选择特定时间段（如2020-2023年）。

  • 数据关联与钻取：

    • 刷选联动（Brushing & Linking）：在散点图中选中一组点，其他视图（如平行坐标、数据表）自动高亮对应条目。

    • 下钻（Drill-down）：点击汇总显示项（如国家GDP）展开下级明细（如各省GDP贡献比例）。

• 叙事构建（Storytelling）

  • 用户驱动叙事：

    • 视图状态保存：用户可将特定筛选条件、视图缩放状态保存为“书签”，构建个性化分析路径。

    • 注释与标注：添加文字说明、箭头标记或手绘草图，引导观众关注关键结论（如标注折线图中的拐点并解释成因）。

  • 系统辅助叙事：

    • 自动故事生成：工具根据数据特征生成叙事框架（如“销售额在Q4显著上升，主要由华东地区驱动”），用户可编辑补充细节。

    • 动态演示模式：预定义动画序列逐步展开分析逻辑（如先展示全局趋势，再聚焦异常点，最后对比解决方案效果）。

图2. 交互技术示意图 ![交互技术示意图]

尽管分类维度不同，两者在具体交互技术上存在重叠与映射：

用户意图（Yi et al.）	技术实现	示例
Explore（探索）	视图操作	平移、缩放三维模型
Reconfigure（重新配置）	视图操作	切换图表类型（如折线图→柱状图）
Encode（编码）	视图操作	调整颜色映射或标记形状
Select（选择）	数据操作	点击数据点高亮显示
Filter（过滤）	数据操作	滑动条筛选数值范围
Connect（关联）	数据操作	多视图联动（选中地图区域，同步更新折线图）
Abstract/Elaborate（抽象/细化）	数据操作	下钻查看明细数据
——	叙事构建	保存视图状态、添加注释、生成故事板

24.3.2.1. 交互设计原则

交互设计原则是确保可视化系统易用性、有效性与用户满意度的核心准则，具体包括：

1. 一致性（Consistency）

交互逻辑、视觉反馈与操作习惯需在系统内及跨平台间保持统一，降低用户学习成本。

• 界面逻辑一致性：相似功能采用统一交互模式。例如，所有图表均支持拖拽平移、滚轮缩放，而非部分使用按钮控制。

• 跨平台一致性：在桌面、移动端与大屏设备间保持操作习惯一致。例如，触屏设备中双指捏合缩放对应桌面端的滚轮缩放。

• 语义一致性：交互反馈需符合用户预期。例如，红色表示警告/错误，绿色表示通过/安全；点击柱状图应默认展示该柱子对应数据详情。

2. 渐进性（Progressive Disclosure）

按用户需求分层披露信息与功能，避免界面过载。

• 信息分层披露：初始界面仅展示核心指标，用户通过交互逐步获取细节。例如，仪表盘首页显示总销售额，点击区域后弹出该区销售明细。

• 功能按需加载：高级功能（如高级筛选、自定义计算字段）默认隐藏，用户明确需要时再展开，避免界面拥挤。

• 复杂度渐进提升：新手引导模式仅展示基础操作（如平移、缩放），熟练用户可解锁高级功能（如脚本编辑、API接入）。

3. 反馈即时性（Immediate Feedback）

用户操作后，系统需在100ms内提供可感知的响应，维持操作流畅感。

• 视觉反馈：用户操作后，系统需在100ms内提供可视响应。例如，按钮按下时颜色变深，拖拽元素时显示半透明预览。

• 状态指示：明确传达系统当前状态。例如，数据加载时显示进度条，计算中显示旋转图标。

• 错误预防与恢复：实时验证输入有效性（如过滤值超出范围时高亮提示），并提供撤销（Undo）功能纠正误操作。

4. 可逆性（Reversibility）

允许用户回退操作至任意历史状态，降低错误操作的心理负担。

• 操作回退：提供撤销（Ctrl+Z）与重做（Ctrl+Y）功能，允许用户回溯至任意历史状态。

• 状态保存与恢复：自动保存用户会话（如筛选条件、视图比例），意外退出后可恢复至最近状态。

• 重置选项：一键恢复默认设置（如重置所有筛选器、缩放至初始视图），避免用户陷入不可逆的复杂配置。

5. 可及性（Accessibility）

确保所有用户（包括残障人士）均能有效使用系统。

• 键盘导航：为所有交互功能提供键盘快捷键（如方向键平移、+/-键缩放），服务残障用户与高效操作场景。

• 色盲友好设计：避免仅依赖颜色区分数据（如红绿色盲模式），结合形状、纹理差异编码信息。

• 屏幕阅读器兼容：为图表添加ALT文本描述，确保视障用户通过读屏软件理解可视化内容。

6. 用户控制与自由度（User Control and Freedom）

赋予用户灵活的操作路径与个性化配置权。

• 多路径达成目标：同一任务支持多种交互方式。例如，筛选数据可通过输入框、滑块或直接点击图例。

• 自定义配置：允许用户调整交互灵敏度（如缩放速度）、界面布局（如面板位置）与视觉主题（如深色模式）。

• 退出自由：随时取消耗时操作（如大数据导出），避免用户陷入“无响应”等待。

7. 容错性（Error Tolerance）

系统需预防、容忍并协助用户从错误中恢复。

• 输入容错：自动校正合理范围内的输入错误。例如，输入“2023/13/01”自动转换为“2024/01/01”。

• 友好错误提示：用非技术语言解释问题并提供解决方案。例如，“未找到匹配结果，建议扩大筛选范围”而非“Error 404”。

• 防误触设计：关键操作（如删除数据）需二次确认，防止意外触发。

8. 认知负载优化（Cognitive Load Reduction）

通过设计降低用户信息处理负担，提升分析效率。

• 焦点+上下文（Focus+Context）：高亮关键区域（焦点）同时保留全局信息（上下文），如鱼眼视图或渐进式披露。

• 渐进式动画：复杂状态变化（如网络布局调整）通过平滑过渡帮助用户追踪变化逻辑。

• 减少视觉噪音：避免过度使用颜色、纹理，通过留白与分组提升界面可读性。

图3. 鱼眼视图示例​ ![鱼眼效果示意图]

通过上述交互设计原则，人们可以构建了高效、直观且包容的可视化系统，使复杂数据转化为用户可探索、可理解、可信任的知识。