VOICEVOX项目中钢琴卷帘编辑器的交互设计演进

背景介绍

VOICEVOX作为一款语音合成软件，其钢琴卷帘编辑器是音乐制作和语音参数调整的核心组件。近期开发团队针对编辑器的交互模式进行了深入讨论和多次迭代，旨在优化用户体验，特别是解决音符选择和编辑操作中的痛点问题。

初始问题分析

在默认编辑模式下，当用户选中音符后点击空白区域时，系统会自动创建新音符而非取消选择。这种设计导致两个主要问题：

1. 用户意图取消选择时意外创建多余音符
2. 不必要的音符增加影响工作流程流畅性

解决方案探索

开发团队提出了多种交互模式方案，通过实际实现和测试验证了每种方案的优缺点：

无工具模式方案

方案A：

• 点击创建音符并自动选中
• 空白处点击取消选择
• 优点：操作直观，符合多数DAW习惯
• 缺点：需要频繁取消选择

方案B：

• 点击创建音符但不自动选中
• 空白处点击取消选择
• 优点：连续操作流畅
• 缺点：即时修改不便

方案C：

• 点击创建音符但不自动选中
• 空白处点击取消选择
• 与B类似但修正了某些边界情况

方案D：

• 双击创建音符
• 拖拽进行选择
• 优点：专业用户熟悉
• 缺点：新手不易发现双击操作

工具选择模式方案

方案A：

• 提供编辑优先和选择优先两种多功能工具
• 优点：兼顾效率和易用性
• 缺点：需要用户主动切换

方案B：

• 独立的选择、编辑和擦除工具
• 优点：功能明确
• 缺点：操作效率较低

技术实现考量

在实现过程中，开发团队重点关注了以下技术架构问题：

1. 状态管理：将编辑目标和工具选择状态统一管理，避免状态分散
2. 行为定义：采用声明式方式定义各工具的行为特征
3. 事件处理：抽象出动作判定层，分离事件处理与具体实现
4. 上下文感知：考虑键盘状态、预览状态等上下文因素

最终设计方案

基于测试反馈和技术评估，团队确定了以下实现方案：

1. 默认工具：编辑优先工具作为默认
2. 工具切换：提供编辑和选择两种主要工具
3. 快捷键：采用数字键1/2切换工具，符合行业惯例
4. 音高编辑：增加专用擦除工具
5. 右键菜单：增强上下文相关功能

用户体验优化

方案特别考虑了不同用户群体的需求：

1. 新手用户：默认编辑模式降低学习曲线
2. 专业用户：提供高效的选择模式和快捷键
3. 鼠标用户：优化纯鼠标操作流程
4. 键盘用户：完善快捷键支持

技术实现亮点

1. 响应式设计：根据输入设备自动优化交互方式
2. 状态封装：使用Composition API封装复杂编辑逻辑
3. 行为配置：通过JSON配置定义各工具行为，便于扩展
4. 视觉反馈：优化光标状态提示当前模式

未来发展方向

1. 触控优化：针对平板设备优化手势操作
2. 模式记忆：记住用户偏好的工具设置
3. 高级选择：增加更多选择方式和过滤器
4. 性能优化：处理大规模音符编辑场景

这次交互优化展现了VOICEVOX团队对用户体验的深入思考和技术实现的严谨态度，为后续功能扩展奠定了良好基础。