filtered.ink: 使用SVG滤镜创建动态插图

文献标题

filtered.ink: Creating Dynamic Illustrations with SVG Filters

文献信息

• 主题领域: 人机交互、图形学、动态插图工具设计
• 关键词: 动态插图, SVG, 动画, 矢量图形, 动态纹理, 节点图接口, 创造力工具
• 发表会议: CHI 2023 - 人因计算系统国际年会
• 作者: Tongyu Zhou, Connie Liu, Joshua Kong Yang, Jeff Huang

研究背景与问题

• 背景:
  • 动态插图能够结合静止的背景与局部动画元素捕捉时间的临界印象，但传统的 GIF 或视频等栅格格式有分辨率限制，无法在大屏幕上放大显示或编辑细节。
  • 而矢量图如 SVG 格式具有无像素化和后期编辑能力，但其制作动态纹理和动画的工具支持不足。
• 问题:
  • SVG格式动态插图的创作门槛高，既需要编程知识，也缺乏直观的编辑工具。相比于栅格工具而言，矢量工具在动态纹理、艺术表达方面存在限制。
• 重要性:
  • 为艺术家提供动态矢量插图工具，不仅可以提升创作的表现力，还能推动矢量图在多媒体领域的广泛应用。
• 研究动机与相关工作:
  • 研究了现有矢量工具的不足，如 Adobe Illustrator 和 Inkscape 无法简便地制作动态纹理与动画，学术工具如 DeepSVG 专注自动生成矢量但限制了用户自由表达。
  • 动态插图领域的研究表明，健全的工具能快速生成由静止图像与动画结合的设计，但缺少支持矢量插图的解决方案。

解决方案

• 方法:
  • 提出一种名为 filtered.ink 的 web 应用，它通过基于节点图的界面和实时预览，简化了 SVG 过滤器的构建与动画的设计。
  • 过滤器由多个 SVG 基础原语（如 feTurbulence、feColorMatrix 等）和动画参数组合构成。
• 创新点:
  • 结合与扩展: 系统将绘图和动画融为一个流程，允许通过参数调整和节点图编辑制作复杂动态效果。
  • 基于预设与重混: 提供一系列可共享与重混的过滤器，让用户能够从社区设计的样本中快速获取灵感。
  • 低学习成本: UI 设计借鉴方块式编程，直接显示用户对图形特性的操作与对应效果，降低进入门槛。
  • 增强表现力: 实现了高质量、动态变化的矢量插图表达，填补了这一领域中的工具空白。
• 实现步骤与技术:
  • 过滤器编辑器: 提供直观图形化的节点接口，用户通过可交互模块管理原语、参数及动画。
  • 绘图界面: 用户可实时绘制矢量图，同时引入动态纹理与动画效果。
  • 分享与协作: 用户可以将设计的过滤器上传为预设供他人借用，通过重混功能，激发创意迭代。

研究成果

• 具体成果:
  • 设计了完整的系统，并通过任务型可用性研究分析了基于滤镜的动态插图创作过程。
  • 开发了新的用户工作流模型，包括四个阶段：观察（see）、探索（want）、再探索（rewant）和重混（remix）。
• 优势:
  • 支持基于矢量的动态插图工具，填补了现有矢量工具在动态纹理与动画设计上的空白。
  • 用户无需技术背景即可操作，兼顾直观性与灵活性，显著降低了创作门槛。
• 实验评估结果:
  • 参与用户通过工具表达了更丰富的动态效果，动画功能被认为是创新点。
  • 用户在使用过程中过渡到新的心智模型，学会了针对时间与动态表现重新构思他们的插图。
  • 动机通过即时报例（如预设滤镜）引发，重混行为广泛存在，并激发创作灵感。
• 不足与未来方向:
  • 隶属于独立平台，UI 功能（如图层、选择工具）偏基础，用户希望能作为插件功能集成到专业工具中。
  • 当前矢量动态文件（如 SVG 动画）的平台支持有限，如社交媒体和发布网站，只支持栅格格式。
  • 后续工作可探索在更复杂用户场景中的长期使用效果，扩展导出兼容格式以增强实际适用性。