tldraw项目中文件上传失败时的用户体验优化方案

背景介绍

在tldraw这个开源绘图工具中，用户经常会遇到需要上传图片或视频文件到画布中的场景。然而，在实际使用过程中，我们发现了一个值得优化的用户体验问题：当文件上传失败时，系统仍然会在画布上创建一个图像形状，这可能会给用户造成上传成功的错觉。

问题分析

tldraw在处理文件上传时采用了"乐观创建"的设计模式。这意味着系统会先在画布上创建图像形状，然后再尝试上传文件。这种设计有以下几点考虑：

1. 即时反馈：给用户快速响应，避免等待上传完成才显示形状
2. 复杂场景处理：考虑到复制粘贴等操作可能涉及多个形状和关联关系
3. 绑定关系维护：确保其他形状(如箭头指向)不会因为图像形状不存在而出现错误

然而，当上传失败时，这种乐观创建策略会导致画布上留下一个无法正常显示的图像形状，虽然系统会显示错误提示，但用户可能会忽略这个提示，误以为上传成功。

解决方案探讨

开发团队和社区贡献者经过深入讨论，提出了两种可能的解决方案：

1. 删除乐观创建的形状：在上传失败后，删除之前创建的图像形状
2. 显示破损图标：保留形状但显示一个明显的破损图标标识

经过技术评估和用户体验考量，团队最终选择了第二种方案，原因如下：

• 避免用户困惑：直接删除形状会让用户感觉系统不稳定，特别是当用户已经看到形状出现又突然消失
• 提供明确反馈：破损图标提供了直观的视觉反馈，比短暂出现的错误提示更有效
• 维护关联关系：保留形状可以确保其他关联形状(如箭头、组等)不会因此受到影响

技术实现细节

在技术实现上，这个优化方案涉及以下几个关键点：

1. 上传流程重构：保持原有的乐观创建流程，但在上传失败时修改形状状态
2. 破损图标设计：设计一个清晰可见的破损图标，确保用户能立即识别上传失败
3. 状态管理：在形状数据中添加上传状态字段，用于控制破损图标的显示
4. 错误处理：完善错误处理机制，确保上传失败时能正确触发状态变更

用户体验提升

这一优化显著提升了tldraw在文件上传场景下的用户体验：

1. 更直观的反馈：用户能立即通过视觉提示识别上传失败
2. 更稳定的体验：避免了形状突然消失带来的困惑
3. 更友好的交互：保留了用户的操作上下文，方便重新尝试上传

总结

tldraw团队通过这次优化，展示了如何平衡技术复杂度和用户体验。在保持系统稳定性和功能完整性的同时，通过巧妙的视觉提示解决了文件上传失败时的用户困惑问题。这种解决方案不仅适用于tldraw，也为其他需要处理文件上传的图形应用提供了有价值的参考。