矢量图形的交互式灵活风格转移

文献标题

Interactive Flexible Style Transfer for Vector Graphics

文献信息

• 主题领域: 人机交互 (HCI)，计算图形学，矢量图形设计工具
• 关键词: 矢量图形, 风格迁移, 图形设计, 创意支持工具, 人工智能和人类协作, 计算设计工具

研究背景与问题

• 问题与挑战:

  • 设计师需要在保留现有设计结构的同时改进或统一设计风格，这通常涉及大量手动操作。
  • 当前流行的设计工具（如 Adobe Illustrator、Figma 等）不够灵活，难以支持风格迁移任务。
  • 全自动化的风格迁移工具由于算法精度限制以及设计风格的主观性，可能无法满足设计师的具体需求。

• 研究重要性:

  • 矢量图形作为行业标准，广泛应用于图形设计，具有高编辑灵活性和扩展性。开发能够简化风格迁移的新工具有助于提高设计师效率和创意表达能力。
  • 风格迁移任务的自动化和交互化处理可以大幅减轻设计师的繁琐重复劳动。

• 研究动机与相关工作:

  • 现有方法（如 CSS 样式表、视觉对应算法等）虽然能部分实现视觉风格迁移，但在灵活性和易用性上存在严重不足。
  • 在过去的研究中，有关设计结构推断、自动迁移技术以及矢量图形设计工具的工作提供了工具开发的理论和实践基础。

解决方案

• 提出的解决方案:

  • 开发了一款名为 VST（Vector Style Transfer）的设计工具，它允许设计师以互动方式在矢量图形之间灵活迁移视觉风格。
  • VST 提供动态的元素样式列表，允许设计师选择、重置并自定义各种元素的样式属性，同时支持从多个来源提取风格。

• 创新之处:

  • 集成自动化与交互控制：将设计元素对应与风格属性复制的自动化计算与用户定制化能力相结合，允许设计师在多个层次上编辑风格迁移。
  • 提供实时的视觉反馈：输出画布会即时重绘迁移后的目标设计，让设计师能够实时检视结果。
  • 拓展传统的样式复制与粘贴功能至群组元素，使风格迁移更加高效。

• 实施步骤与底层技术:

  1. 使用 ReactJS 构建用户界面，FabricJS 渲染矢量图形。
  2. 采用基于多图的自动化设计对应算法，生成本体设计之间的元素对应关系。
  3. 设计师通过交互界面调整所选元素之间的映射关系，定制风格迁移模式。
  4. 实时更新目标设计的外观并支持矢量图导出。

研究成果

• 具体成果:

  • VST 工具允许设计师有效地从复杂风格的设计中提取并迁移风格。
  • 通过实验表明，设计师能够使用 VST 在多种设计场景下灵活地完成风格迁移任务。

• 优势:

  • 减少设计师在风格迁移过程中所需的时间和工作量，与使用传统行业工具（如 Adobe Illustrator）相比有明显优势。
  • 提供强大的风格自定义能力，使工具适应不同设计师的具体需求。

• 实验与评估结果:

  • 在用户研究中，参与者能够使用 VST 成功完成任务并生成满意的新设计。
  • 实验表明，与手动工具相比，使用 VST 进行风格迁移的时间通常减少了约75%。
  • 新设计生成的质量与设计师的手动复刻结果相比，具有相当的视觉一致性。

• 局限性与未来方向:

  • VST 当前针对矢量图形设计，尚未支持从图像直接提取风格。
  • 初次使用 VST 的设计师需要时间适应工具界面，而现有算法对于复杂设计的匹配精度仍需进一步优化。
  • 未来研究可拓展至混合图像与矢量图形的风格迁移，并尝试在设计工具中实现多模板风格统一功能。