Haijun Xia博士2016-2018交互设计论文总览

发布于 作者:

Haijun Xia博士2016-2018交互设计论文总览

在近期对信息图交互设计的论文总览中，我们很早就看到了Dataink这篇论文，进而发现了Haijun Xia博士在多伦多大学读博期间，从Object-Oriented Drawing(CHI 2016，以下简称OOD)、Collection Object(CHI 2017，以下简称CO)、Dataink(CHI 2018，一下称之为Dataink)的科研轨迹。

这几篇论文都描述的是在支持手势输入的触摸屏上开发的绘图应用程序，旨在以更高的交互效率完成以前很繁琐甚至不可能的交互，从而提高设计师绘制SVG图形的交互体验。这三篇论文清晰的连续发展脉络，首先，OOD提出了一种改良UI，用于呈现传统上只能用按钮、互动条、输入框表示的抽象属性（例如透明度、亮度等等），并且可以直接用手势来移动、复制、链接这些抽象属性；接下来，CO在OOD的基础上，集中探讨如何解决对多个图元进行操作，并在OOD原有UI的基础上增加了多对象选择、赋值、分组、组内导航等功能；最后的Dataink，以绘制数据驱动的信息图为目标。dataink操作的内核还是CO，并将重点放在数据绑定功能上。接下来本文将讨论每篇论文的一些细节及个人感想。

1.Object-Oriented Drawing（OOD）

长期以来，研究人员将交互化为图形化人机交互界面（GUI），例如使用按钮或菜单，来使计算机命令或工具成为可以由用户直接操纵的GUI对象。

在以鼠标为主要交互设备的PC时代，形成了以windows图标菜单和用户界面（简称WIMP UI）为代表的工业标准。现如今，爆发式普及的触摸屏设备提供了对WIMP UI的改良，即可以让用户对屏幕上显示的图形对象进行直接的物理操作。例如屏幕上显示一个苹果，用户可以通过“触摸”来选中它，“左右滑动”来平移它，“两点滑动”来缩放它，而不需要借助传统的WIMP UI控件如按钮、工具栏来实现这一点。这既节省了屏幕空间，也令交互变得更加生动有趣和易学：因为基于触摸屏手势交互可以借助用户对于物理世界的知识，来与数字世界进行交互。

但有的属性，如照片的亮度或不透明度，缺乏物理世界对应的抽象经验，以至于用户难以猜测改变此类属性应该使用何种手势。这清楚地证明了人机交互没有通用的自然手势集。所以只能把这些属性用最简单的数字或文本配合传统的WIMP UI来交互。现如今很多支持触摸屏设备的应用程序，往往退回到WIMP UI的设计范式中。例如adobe photoshop\illustrator、adobe line for ipad等程序，依然保留属性例如上图所示的按钮、滑动条等组成的控制面板，而大多数高级触摸交互都被删除，只剩下基本的画笔绘制功能还在使用触摸交互（如上图所示）。

因此，本文的目标是设计一种新的交互机制Object-Oriented Drawing(简称OOD)，既不要求用户学习新手势，还有别于现有的WIMP UI。即设计受直接物理操纵隐喻约束的交互代替传统WIMP UI中的控制面板，从而使用户能够快速执行以前很繁琐甚至是不可能的交互。

为了实现这一点，本文的基本思路是将所有图元的属性（填充色、线宽、透明度等等）都当做对象，让手势可以直接操作这些对象。就好比原来是拟物化设计，要求把所有属性都找一个对应的象征物表示，实在找不到象征物的就用通用按钮表示。而这个思路相当于扁平化设计，把所有的属性都当做一个包裹，可以通用的手势去交互这个包裹，不关心这些包裹所代表的属性究竟对应何种物理现实。

这种方式增加了灵活性，所有属性对象都可以用通用手势被复制、链接、粘贴、移动，令很多操作流程变得简化。例如在WIMP UI中，用一种用户希望先使用“画笔”绘制，然后再使用“标记”绘制，两次绘制的尺寸相同。用户需要​​选择第一个工具，打开其属性，记下尺寸值，然后打开第二个工具，然后手动设置所需的尺寸。使用OOD，用户可以简单地将size属性当作本身是一个对象，然后将其拖放到“ Marker”对象上即可。

依据此理论，OOD的UI被card卡片模式。如上图所示，左侧是海鸥型图元，其对应的OOD为一系列卡片，每个卡片指代一种属性，如图显示了shape、fill、stroke、dropshadow四个属性。某些属性还会有层析结构，例如stroke属性包括color、stroke width两部分。这些卡片上用文字和图形描述了其所代表的属性和值，可以使用触摸对它们直接进行物理操作，例如tap, hold, drag, stretch（单点、按住、单点拖拽、两点拉伸）。

在OOD的card上的典型操作包括：添加或删除属性、实例化新属性、复制属性、链接属性（以属性共享的方式快速传播样式）等等。如上图（b）所示，用户可以hold海豚的stroke卡片，然后tap海鸥的stroke区域，从而将海鸥的stroke属性克隆到海豚的stroke属性上。如上图(c，d)所示，用户想给海鸥添加一个新属性dropshadow，则她可以滑动最后的小方块，把影藏的其他属性（dropshadow、opactity等）实例化。值得一提的是对于position属性，也可以通过此类操作达成快速的对齐等效果。此外，每个属性卡片还会记录其值的历史记录，以便用户以后访问。

使用OOD修改属性值这一操作变得更为简单直观。按住想要修改的属性卡片，然后物理操作手势会直接改变这个属性的值。如上图(a)，安装storke属性卡片然后在屏幕上左右滑动，即可修改stroke宽度；如上图(b)，按住dropshadow然后在图元上拖拽阴影方向，就可以直接调节阴影位置和粗细。这些手势操作符合用户对直接操作物理对象的期望，同时能够消除大多数用于属性值选择的表单UI。

OOD也支持pen+ touch结合的输入模式。就像上一个例子按住属性卡片将会进入修改属性的准模式一样，如果用户使用了触摸笔，那么系统就会进入笔输入的准模式。默认情况下，笔可以绘制一条带有当前填充和笔触属性的路径。通过按住其他图元或是该图元的shape属性，还可以快速绘制具有相同形状的新笔画。如上图所示。

本文作者在OOD基础上制作了一个SVG绘图程序如上图所示。除了OOD，还有Cursor(光标)和canvas(画布)。在“一切都是对象”的口号下，Cursor和canvas也有着类似OOD的UI。例如Cursor也拥有shape, fill等属性，可以像其他OOD那样添加、复制或链接。canvas的属性卡稍微不太一样，它的每个属性卡代表一个图层。然后这个图层又拥有子属性。默认情况下canvas至少有2个图层，背景层和一个前景层。然后canvas属性卡的操作与其他OOD相同。例如，可以通过调整canvas的fill属性来更改其背景层颜色。调整canvas图层卡的位置来调整前景背景关系等等。

最后，作者将其软件程序进行了专家访谈。参与者普遍共识包括：

  1. 使用WIMP UI的软件如illustrator常常以为复杂的按钮和多级菜单而饱受诟病。与之相比，OOD能够更直接地访问和操作属性，使得属性影藏程度降低了。
  2. 专家普遍表示使用该软件画画就像就像做饭时在案板上操作各种物品一样，每个属性都是一个可操作的物理对象，这种隐喻将数字世界的优势（例如数字世界的笔触精确定义宽度，但现实世界中无法精细定义）带入了模拟现实的环境中。
  3. 更复杂的手势（例如拉伸卡片以查看其历史记录）必须观看操作演示后才能学会（ Ken Hinckley, Koji Yatani, Michel Pahud, NicoleCoddingotn, Jenny Rodenhouse, Andy Wilson, HrvojeBenko, and Bill Buxton. Pen + touch = new tools. ）。
  4. 就像动画公司的员工绘画前都会指定一套配色方案一样，很多画家会优先配置一些通用图形对象，然后再画画。利用OOD的属性复制和链接机制，配置通用图形对象变得更加轻松。有的用户还会试图复制cursor对象以获得一批具有不同样式的笔刷。
  5. 通过link共享属性的功能虽然强大，但灵活性太强会让部分用户不知如何下手，可以适度降低可用性以增强灵活性。

个人体会：

历史上经常出现新的人机交互设备，但很多设备因为缺乏UI设计探索，没能培养出用户使用习惯最后湮灭无闻。最近一个典型例子就是PS4手柄上面的触摸板，除了早期有几个索尼第一方的游戏偶尔使用一下以外，现在已沦为摆设。触摸设备火爆铺货的那几年，手势交互看得人天花乱坠，但最后大众普遍接受的手势只有最简单的“物理直接操作”。这足以证明除了硬件之外，合理的交互软件设计是多么重要。

触摸输入相对于鼠标输入的优势：

  1. 减少了对按钮、表单等传统WIMP UI的依赖
  2. 不需要额外的控制区域，从而节省了屏幕空间，使屏幕完全专注于内容
  3. 可以将多个命令和操作表达为一个手势动作，并且利用运动反馈，利用弹簧加载模式的手势可以减少错误率。

触摸手势的缺点：

  1. 缺乏通用的自然手势集。研究表明，对于WIMP UI通用命令集，用户只能猜测出一种手势：直接物理操作（即基本的点击、滑动操作）。
  2. 增加手势词汇量的方法是提供手势教学系统，例如UI小部件或单独的工具。但一般而言用户学习兴趣了了。
  3. 当前手势交互系统倾向于拟物化的设计，但对于缺乏物理世界对应的属性，用户难以猜测操作手势。

OOD提供了一种触摸屏下使用的UI，可以快速操作图元对象。既不需要用户学习新手势，也不需要传统的MIMP UI，靠的是把不好拟物化的属性直接当做普通对象来处理，使用最简单的手势集“直接物理操作”来处理。虽然看起来改变不多，但却可以大大增加在选中图元属性、在不同图元之间复制属性的便捷程度，而这恰恰是绘图中最常见最耗时的操作。

OOD的UI是以可拖动、拉伸的2D卡片方式展现的。但其实也可以换成其他展现模式，例如Dataink中的环形呈现模式，或者在VR中常见的3D卡片或球型展示。不同的展示方式与不同的物理隐喻对应，例如当属性卡是个球型的时候，就可以考虑把球的滚动、碰撞等物理隐喻赋予某种交互上的意义。所以，探索对属性对象的直接物理操作依然是可以研究的领域。

OOD的示例软件是一个画图程序。该概念也可以扩展到其他应用中，例如图像/音乐/视频编辑，布局设计，动画，3D建模等。如果用于Photoshop，则应支持各种选择技术，以及支持动画工具。比如两个变量之间的关系曲线可以与其他变量共享，以实现一致的动画速度。这一点在Draco等论文中有所体现，可以做结合。不过，作者下一篇论文CO选取的方向更为基础，探讨了OOD的UI方案与选择技术结合的可能扩展。

2. Collection Object(CHI 2017，CO)

这篇论文是上一篇论文OOD的扩展，主要从画图程序的角度，探讨了以类似OOD的UI解决多图元对象的操作优化问题。

在常见的图形编辑软件比如photoshop, illustrator, 甚至powerpoint当中，对多个图形对象的选择依然是挑战，主要问题包括：

  1. 传统GUI中选中是一个过渡状态。每个新做出的选择都会替换前一个选择。当选择对象很多而又丢失选择时，会让用户产生强烈挫败感。虽然有一个解决办法是将当前选择保存为组以供以后重用，但是僵化的组结构无法进行跨组的流式选择，经常迫使用户不断选择和重新选择，以及取消分组和重新分组，这种工作既繁琐又容易让用户丢失注意力从而中断心流。
  2. 传统GUI中选中多个对象时属性的显示存在问题。通常的做法是选中一个对象会显示这个对象的属性值。但选中多个对象时，通常只显示多个对象之间共享的属性值，其他属性值则通常不显示。这对精细操作显然不利。
  3. 传统GUI中多个对象的属性赋值也存在命令效率问题。例如，用户想将对象A的颜色共享给一组选定的对象B+，则她将必须1）取消当对象集，2）选择具有颜色的对象A，3）查找并复制其颜色值，4）重新选择对象B+，5）最后应用更改。

本文作者开发了“Collection Objects”（CO），将图元选择集定义为对象，然后使用类似上文OOD的UI，将选中对象及其属性显示为一系列卡片，这些卡片可以直接用手势进行移动，复制，链接，过滤等操作。这样，选择不再是对象的过渡状态，而是可以被过滤，重叠和共同操纵的对象的集合。 此外，分组不再是僵化的封闭结构，而是可以自由添加，删除，导航和直接访问的一组对象。

CO具有两方面的优势：其一是触摸屏的直接物理操作可以降低错误选择的处罚并简化重用操作（就像OOD中那样）；其二是将各种选择、分组操作都封装到一个UI对象中，以便用户将注意力集中到其关键操作步骤上，而不是浪费在频繁的上下文切换中。从而大大提升效率和使用体验。

Collection Ojbect UI和使用说明

如上图所示，CO的UI可以理解为，包括一个菱形的中心部分及其四周的附件。菱形左边直指其选择的图元对象，上侧为属性过滤器，右侧是属性操作列表。属性过滤器和属性操作列表都OOD的卡片模式呈现多个属性。

基于Collection Ojbect的选择操作

Collection Objects支持各种选择技术，例如套索/交叉选择，按属性选择，建议性选择和模糊选择。

1.套索/交叉选择：如上图所示，新建一个CO对象，然后一手按住其菱形UI，一手通过笔输入套索选择指定区域，即可完成对兔子头部的选择。

2.按属性选择；图元的各种属性也可以作为选择条件，以便在拥挤的图元中减少选择交互的成本。例如在上面这个羊驼的例子里，先选择羊驼的嘴部形状作为一个过滤器，从而方便地选择该形状边界内的所有图元。

3.模糊选择：这个功能便于快速定位相似的对象并集体更改它们。如上图例子中，用户在地图上首先选择一个绿色一个淡黄色的区块(a),然后可以将这两种颜色作为过滤器，选择地图上所有拥有相似颜色的区块(b)。以上这些还只是按属性选择，但最后这一步就有趣了，还能调节过滤器中颜色的模糊性（fuzziness）从而选中所有具有相似颜色的区块(c).这个模糊属性，是根据过滤器中的属性自动生成的。例如颜色属性对应色相调节，线条粗细对应粗细调节。

4. 建议性选择：在某些情况下，系统可以按照格式塔原则，根据用户输入提供建议性选择。例如用户已经选择了一组图元，用户添加新图元时，CO会检查它们的公共属性并显示一个临时的过滤器选项卡，以建议用户选择。如上图的例子，用户一开始选择的是黄色蛋上的一小部分红花纹(a),然后使用过滤器选中了所有红花纹，包括下面紫色蛋上的红花纹(b)。用户可以复制黄色蛋并且把该图元拖拽入CO，从而将选择范围缩小到黄色蛋上的全部红花纹(c)。注意这时CO的过滤器产生了一个临时选项卡boundary，它是操作(c)所带来的建议性选择，代表蛋的边界这个公共属性。用户可以点击这个临时选项卡，从而将选择范围缩小到紫色蛋的红色花纹，还是黄色蛋的红色花纹(d)。

多个CO的直接操作

 

同时选中两个CO可以在他们之间生成一个新的CO，在他们之间的连线显示了一些布尔操作，如并交补，用户可以通过手势来选择某种布尔操作来确定新的CO的内容。以上布尔操作进一步实现了现有选择范围的更高层次组合。

分组操作

 

在现有应用程序中，用户可以将所选对象保存成分组以保存所选内容。 但是，这种刚性结构也给选择其中的物体带来了困难。 要跨组选择对象，则必须首先将其取消组合。 如果她打算保存该组以供以后重用，则必须重新分组。 作为对比，在CO中，创建组只需将CO垂直翻转，即可将选定的对象转换为一个组。 翻转完成后，其菱形中会出现一个图标，指示其分组状态。 再次翻转将其取消组合。 并且仍然可以使用上述选择技术将对象自由添加到组中或从组中删除，而不需要。

组内导航：CO创建的分组是树形结构的。因为树形结构有助于减少对象数量并且易于理解。为了便于用户浏览组内图元对象，CO有独特的交互。首先，用户要按住他想查看的图元，然后另一只手垂直滑动CO的菱形图标（a）。然后，不同的层次元素将随之显示（b-e）。

跨组选择对象：使用分组时遇到的一个UI问题是无法轻易选择组内或组间的对象。 但是在CO里不存在这个问题。例如，用户想创建一个新的CO，添加另一个已创建好的分组内的某个图元，只需要像触摸所需对象，向下拖动以导航该级别，然后在要选择该对象的级别上松开手指。在释放手指以将（子）组添加到选择中之前，还可以像在标记菜单中一样向右滑动，以将该级别下某个对象添加到选择中，而不是将该层次下所有对象都添加过去。

选中对象的属性操作

CO的选中对象属性的操作继承自OOD：用户需要一只手按住目标属性卡，然后另一只手在屏幕上滑动来直接操作属性。在此基础上，CO进一步增加在快速调整单个对象或对象集合的操作。例如上面这个东京地铁的例子中，用户一只手按住“stroke“属性卡，然后另一只手在目红色线条上滑动（a），那么就只改变该红色线条的粗细。如果另一只手是在空白区域上滑动（b）,则改变的是全部线条的粗细。这样，用户就可以同时操作多个对象的属性，二不需要像传统UI那样频繁地在单个选择对象和多个选择对象之间其切换。

CO在多个对象的属性展示方面也有独到之处。选中多个图元，CO的UI将显示所有属性值（而不是只显示公共属性）。当有些属性内容太多时，将以可伸缩的方式显示。如上图所示，选中了两个千纸鹤，所有属性都显示在了菱形右侧的属性选项卡中。属性选显卡一开始以图标显示色域信息(a)，用户可以展开该选项卡，将显示汇总信息，如图中所显示的渐变（b）；用户还可以进一步地展开，完整地显示当前标量的最大值，最小值，均值(c)，如此可以帮助用户快速查找、复制或更改属性值。例如用户可以用另一种颜色替代当前色域最小值（淡蓝），那么所有图形对象的该种颜色属性都将被更新。

给集合赋值：如果用户要将一个颜色应用于其他所有对象，可以一手按住对象集合CO的fill属性，然后点击任何其他对象来获取填充色以轻松实现目标。类似地，持有位置属性并点击一个对象表示他希望整个集合与之对齐。相对于传统方法（用户将必须单独选择该对象，查找其填充属性值，记住或复制该值，然后多选其他对象，然后设置选择的值）要快得多。

最后，作者将其软件程序进行了6人组的用户研究。参与者普遍共识包括：

  1. 参与者强烈赞成按属性进行过滤，快速的组导航以及在组之间进行直接选择。
  2. 使用CO意味着更少的上下文切换，不需要把注意力临时投放到工具栏、菜单中去，更有助于心流的保持。
  3. 使用Illustrator，有一半时间在管理组。而 CO开放的组结构和组的快速导航，减少了管理图形结构的工作量。
  4. 对选定对象的聚合属性的丰富操作，这实际上是在考虑支持复杂设计

一些改进意见：

  1. CO本身占的屏幕面积很大，多个CO浮动在工作区，不仅混乱还会带来互相遮盖的问题。 因此将来的系统可以提供一个侧面板来组织“CO”
  2. 未来的工作还可以探索将其他选择技术包含到集合对象中。 例如，格式塔原理可以不使用特定的样式属性作为搜索过滤器，而可以直接用作选择过滤器，其权重可以通过模糊属性进行访问和调整。 可以通过类似于过滤器属性的方式直接向用户建议潜在的选择结果。
  3. 与现有WIMP工具进行比较。 这可能揭示了用户为实现某个目标可能采取的不同策略以及性能的差异，例如所需的步骤数量。
  4. 创建大量对象本身既困难又耗时。 未来的工作可能会探索集合对象如何能够轻松快速地生成某些模式的多个对象。 这在计算机辅助设计，数据可视化和基于纹理的绘图方面可能很有用。

个人体会：

OOD系统允许用户将对象自由分解为更小的单元-属性对象，从而提供了对象的微观视图。 作为补充，CO探索了对象集合的宏操作，这为探索更高层次的交互提供了机会。个人通过看视频和论文感觉这种交互设计还是挺友好的。例如选中一组对象的同时，还能在不丢失当前所选的情况下修改其中某一个对象的值，令人很想尝试。可以想见这种交互设计将能更好地发挥触摸设备的优势，让用户精力专注于设计。可惜没有开源代码让我们部署。

个人认为其中的一些研究思路可以继续做扩展。例如基于用户输入的推荐选择、推荐布局等功能。另外如同作者在文中写得那样，创建大量对象本身既困难又耗时，所以他的下一篇论文就是以数据驱动生成基于某些模式的多个对象为目的的工作，dataink。在dataink中，继承了OOD的UI操作，保留了CO的对象属性展示方式（可以展开的汇总信息）。此外增加了数据绑定功能：用了一个新的双环型UI来进行数据绑定。