大厂出品！「上传」组件设计优化指南

回顾我们设计系统中的Upload组件，尽管已经有一定的基础组件和能力，但在实际使用过程中，逐渐暴露出一些影响用户体验和设计开发效率的问题。

更多组件设计干货：

一、怎么个事儿

痛点1：上传之后的操作交互及样式不统一

上传完成后的操作交互是用户与组件接触最频繁的部分，然而，我们发现这一环节存在明显的体验割裂：

1. 操作位置不一致：相同功能的操作按钮在不同页面中位置不同，不符合统一性。

2. 同一操作样式不一致：比如“重新上传”按钮，使用的图标不统一，有的使用带底色的按钮，有的使用不带底色的按钮...

3. 同一页面同一交互触发功能不一致：比如点击已经上传成功的upload，有的是预览，有的进入编辑...

痛点2：Upload组件在不同场景下的尺寸和适应问题

Upload组件的尺寸灵活性直接影响了其在业务场景中的适配能力，而我们的现状是：现设计组件只支持72*72、96*96、74*99、96*128的尺寸，只能满足一行多个横滑的情况

尺寸限制导致灵活性不足：现设计组件不能灵活满足业务场景，需要调整展示尺寸时只能将组件解组，导致“组件”开始千人千面，比如一行一个撑满、一行三个撑满等情况

二、对症下药‍‍

针对上文提到的交互不统一、尺寸适配等问题，我们决定从统一交互设计、灵活的尺寸和布局以及增强用户体验三个方向入手，对Upload组件进行全面优化。

统一交互设计：降低用户学习成本

统一操作位置：将「删除」和「重新上传」这两个互斥的操作按钮统一放置在容器的右上角。无论是图片、视频还是文件上传场景，用户都能在相同的位置找到操作入口，减少学习成本。

统一操作样式：对常见操作（如删除、重新上传、点击预览等）的按钮样式和交互表现进行标准化设计，确保用户能够快速识别操作功能，避免认知负担。

优化 Loading 状态：在Upload容器内显示Loading状态。这种方式既能让用户清楚了解上传状态，又不阻碍其他操作（如继续添加图片），提升操作效率。

灵活的尺寸和布局：满足多样化业务需求

支持更多尺寸：在现有固定尺寸（72*72、96*96等）的基础上，扩展支持更多常见尺寸选项，如54*54，并增加一行一个、一行三个、一行多个的布局组件，使用时可直接调用，满足不同场景需求。

自适应布局：增强组件的可扩展性，支持自定义尺寸，以应对未来业务需求的变化，避免频繁解组和二次开发。

增强用户体验：从细节入手提升操作效率

实时反馈：在用户操作过程中提供即时反馈。例如，选择文件后立即显示预览图；上传失败时弹出明确错误提示，并提供重新上传或删除的选项，帮助用户快速解决问题。

补充扩展功能：- 支持拖拽调整顺序，使Upload组件能够适应更复杂的多文件上传场景，增强通用性和灵活性；- 支持拖拽到底部删除文件，避免在有限区域内堆积过多操作按钮导致热区冲突。这种方式不仅更安全可靠，还能让界面更加简洁美观。

三、使用指南

1. 定义

用于相册读取或拉起相机的上传功能

2. 基础用法‍

Upload 触发：通过 Upload 容器占位用以唤起相册或相机，也可使用 按钮（Button）作为触发器。选择视频或图片进行上传。

Upload 的帮助文本：保留了旧组件中在容器下的requirement文本，由于容器宽度有限，若展示太长的帮助文本则会撑高组件；大部分情况下大家使用容器内的文本用以提示，若长文本则以帮助文档等其他方式进行展露。

Upload 的四种状态：

Upload 的热区操作：一个Upload内尽可能不要超过两个操作，避免热区重叠或热区太小影响点击。默认点击上传的图片或视频则跳转预览，让用户对已上传的文件进行快速查看。容器内可承载「删除」「重新上传」「更改封面」等至多不超过一个操作。

限制上传大小：例如当用户选择的视频超过1G时，跳过上传并提示用户。

限制图片数量：例如限制用户最多上传9张图片，当到达最大数量时隐藏上传占位容器。

删除前校验：当用户删除图片/视频时进行确认，确认后可删除。

3. 扩展用法

支持拖拽调整文件顺序，以及拖拽到底部删除文件，提升多图片上传场景下的操作效率。‍‍‍‍‍‍‍‍‍

拖拽调整顺序：

拖到底部删除：

结语

在优化Upload组件的过程中，我意识到，设计的第一步永远是发现问题、定义问题。无论是交互不统一还是尺寸适配不足，这些问题的背后都反映了用户（包括设计师）真实的使用痛点和业务的实际需求。作为设计师，我们需要跳出“完成任务”的思维，回归到用户和业务的本质，才能真正找到优化的方向。希望这篇文章能够为大家带来一些启发，也期待与大家一起，在设计的世界里创造更多可能性！