第10 章 -可视化中的交互-SDU

1、山东大学计算机科学与技术学院 & 软件学院 蒋志方目录一般交互系统可视化交互的主要类型/分类典型交互范式概览+细节焦点+上下文对偶界面动画过渡可视化技术和方法的用户评估一般人机交互系统一般人机交互系统Command-line interfaceWIMPPen UIMulti-touch interactionGesture interactionWearable computingTangible user interface60年代的交互Sketchpad Ivan Sutherland 1963Direct-touchMulti-touchMulti-touchMicrosoft

2、KinectKinect GameLeap MotionGoogle Glass其它交互工具MYO 腕带Oculus Rift 头戴式虚拟现实设备G-Speak手套可视化交互类型可视化交互类型表示与交互信息可视化的两个主要成分表征交互表示(representation)是用户的关注对象交互(interaction)提供用户可操作的手段交互的类型Dix and Ellis (AVI 1998) 提出高亮和焦点搜索更多信息- drill down和超链接概况与上下文，缩放与鱼眼同一个表示，不同参数选择链接不同的表示/征：提供时间上的过渡（如淡入淡出）交互类型Daniel Keim (TVCG 20

3、02) 投影/映射过滤缩放失真变形Brushing & linking最新的分类(user intent)选择(Select): mark something as interesting探索(Explore): show me something else再布局(Reconfigure): show me a different arrangement视觉编码(Encode): show me a different representation抽象化/具体化(Abstract/Elaborate): show me more or less detail 过滤(Filter): s

4、how me something conditionally链接(Connect): show me related itemsYi J S, ah Kang Y, Stasko J T, et al. Toward a deeper understanding of the role of interaction in information visualization. TVCG 2007.1. 选择标记感兴趣的区域或特征追踪这些区域或特征的变化实例： 在谷歌地图中添加地标并且快速返回在TableLens聚焦功能方法一：信息提示悬停鼠标光标显示项目的详情Word tree方法二：鼠标选择单

5、击选择一个项目，并显示数据点的属性选择时的视觉混乱(visual clutter)解决办法：放大标签选择的挑战与目标如何可视化标签？当很多实体存在时，逐一做标记很困难归结为字符串在有限空间排列的问题理想中的标签可解读具有指引性：明确地指向它的标签对象互相不遮挡对所有对象给出标签是理想状况，但并不总是可行的偏心标签(Excentric Labeling) 偏心标签要素在用户鼠标接触到数据点之前不可见采用名称描述每个数据点可视地连接数据点和标签为标签排序，以显示数据点的布局Demo: /hcil/excentric/dist/bin/test7.html2.

6、 探索显示不同的数据部分或属性允许用户检查不同的数据子集克服显示尺寸的限制实例在数字医疗系统中改变视点词典的互相链接直接跳转凭借两个对象之间的联系从一个跳转到另外一个跳转方式：网页上的超链接http:/ navigation3. 再布局显示一个不同的排列通过改变空间排列提供不同的角度实例在TableLens中排序和重组更改在散点图的属性方法一：重组视图保持基本表述和数据显示不变，重组元素的位置顺序TableLens中，可以左右移动表示属性的列方法二：重新排序TableLens中可以选择某种属性进行排序TableLensDust&Magnet4. 视觉编码显示一个不同的表示方式（visu

7、al representation）是可视化的核心要素改变视觉外观实例改变颜色编码更改大小改变方向更改字体改变形状Many eyes举例在软件底部选择不同的显示模式NodeTrix5. 抽象化/具体化显示更多或更少的数据细节调整抽象级别（概观和细节）实例展开子类别，提供互动的可视化方法展开TreeMapSunburst中的Details-on-demand缩放（缩放几何）Details-on-Demand可视化术语，指提供给观察者关于某些数据的更多信息或细节可能是关于一个事件的更多信息可能从一个聚类视图转到单独的视图应用场合由于尺寸问题而不能显示整个数据显示一组对象的抽象表达展开数据组以显示更

8、多细节，或显示单个数据6. 过滤显示符合条件的某些数据子集基于某些特定的条件改变显示的数据集实例动态查询属性浏览器NameVoyager中的按键过滤QuerySketch方法一：过滤/限制改变数据集的显示方式聚焦缩小/扩大Baby name方法二：动态查询(dynamic query)可视化中最有用、最有名的技术DB查询通常得到的结果FilmFinder Music Filtering动态查询优势 加快工作效率 促进反向、撤销、探索 非常自然的交互方式 显示数据动态查询劣势操作过于耦合难以制定任意的布尔表达式吗？!(A1 V A2) A3 V (A4 V A5 A6) V 设置会产生全局影响设

9、置条件必须提前确定当数据尺寸变大时，动态查询无法达到实时存储问题线性数组均匀网格Kd-树向量量化直方图刷取（Brushing Histogram）Brushing技术在直方图上的特殊情况在直方图中表示的数据值可以点击并选择（控制对应的数据区域）当选择某个柱块（bin），其对应的数据在主视图窗口中被高亮显示应用三维体数据场的传输函数设计BH举例7. 链接显示相关的项目高亮（highlight）关联和关系显示与特定数据项目有关的被隐藏的项目实例Vizster，直接高亮连接的节点InfoScope，brushing高亮连接性观察者可以同时观察数据的不同属性相反地，观察者也可以在不同的角度和不同的显示

10、方式下观察数据必须清楚数据的位置Brushing（刷取）可视化常用技术在一个视图选择数据，另一个视图高亮适用范围：同一个数据的多个视图集合各类技术的系统典型交互范式典型交互范式概览+细节焦点+上下文对偶界面动画过渡概览概览+ +细节细节概览+细节(overview+details)尺度问题数据太大，不能在屏幕上显示可能包含太多的事例可能包含太多的变量屏幕上只能显示部分数据，但观者焦点随时而变潜在的解决方案数据的表达用户交互两者兼用通常的解决方案滚动提供一个大的虚拟屏幕，允许用户在不同的区域移动比较笨拙只能看到一片区域放大和缩小DOT上下文 + 焦点为什么成为鱼眼？鱼眼相机镜头Fisheye V

11、iew, 1992 Fisheye View, 1992 GraphLensThe magic volume lens多焦点显示 透视墙计算机实现的3D双焦点显示将表映射到图上x轴表示时间y轴表示数据项DataLens, 2003 Focus & Context Screen Focus+Context ScreenMaps“Overview first, zoom and filter, and details on demand.” -Ben Schneiderman 对偶界面模型对偶界面模型对偶界面模型对同一数据同时采用两种不同方式的可视化允许用户在两个视窗内进行可视化交互操作和

12、交互结果的关联Chen W, Ding Z, Zhang S, et al. A novel interface for interactive exploration of DTI fibers. TVCG, 2009.Animation动画效果FocusChange叙事动画HansRosling 可视化方法可视化方法/ /技术的用户评估技术的用户评估目的目的可视化方法或技术解决实际问题可能有明确的目标用户和使用场景可能有针对的具体任务需要考虑其他领域的应用可视化方法或技术的用户评估包含几个目的：对比新方法和已有方法确定方法的有效性（目标用户、任务和情景）明确新的应用领域，关键应用定量评估研究假设 + 验证（证实或证伪）步骤基于已有理论和前人研究列出评估假设设计评估实验执行实验方案分析结果