好玩的B端组件 丨 上传组件

32 评论 11181 浏览 90 收藏 11 分钟

在工作生活中,我们常常能够见到各种各样的组件,当用户需要把本地数据发布到远程服务器时,就需要用到组件。那么组件该如何上传呢?本文从五个方面讲述,希望对你有所帮助。

当用户需要把本地数据发布到远程服务器时,就需要用到上传组件,比如上传头像,上传视频、提交资料等。它是B端产品中比较常见的组件。

在工作和生活中我们看到过各种各样的上传组件,有图片上传、视频上传、文档上传、点击上传、拖拽上传、单文件上传、批量上传等等等等。

各式各样的上传组件,都是为了满足大家传输数据时的不同需求而产生。

做B端产品时,如何判断当前页面使用哪种上传组件?这是产品经理或交互设计师面临的一个问题。在思考这个问题前,有必要先来系统的了解一下上传组件。了解它,才能用好它。

仔细分析下来会发现,不管如何千变万化,上传组件都会有三个基本结构:选择上传内容、管理上传内容、展示上传状态。如下图:这是最典型、最常见的几种上传组件,大家可以体验一下流程。

https://gevoaf.axshare.com/start.html#p=%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6_%E9%AB%98%E4%BF%9D%E7%9C%9F&id=aa4gij&g=1

一、选择上传内容

选择上传内容,是上传流程的第一步。一般是由一个按钮或者一个视觉icon来触发上传动作。在触发按钮的旁边,可以显示一段提示信息,告知用户上传的文件类型、大小或数量方面的限制。
根据需求场景不同,可以选择是单选还是多选。需要批量上传时,一般选择支持多选,方便用户操作。

还有一个小细节,触发按钮的文案会在选择上传内容后发生变化:

  • 选择上传内容前,触发按钮的的初始化文案都是“选择文件”。
  • 当选择上传内容后,单文件组件的触发按钮文案会改为“重新上传”。多文件组件的按钮文案会改为“继续上传”。

如下图:

几种常见的触发按钮样式:

(1)按钮式

这种触发按钮适用场景很多,支持各种文件格式,是最常见的一种形式。按钮周围可以增加一些必要的提示文案,使用起来很方便。

(2)图标式

图标式的触发icon,主要用于图片格式的文件上传。上传后的内容直接覆盖触发icon,节省页面空间。

(3)拖拽框式

拖拽框式的上传组件,可以给用户一种更直接更加可视化的交互体验。图片压缩网站tinypng就是用的拖拽上传的方式。

这是使用Axure模拟的拖拽上传的交互,大家可以体验一下拖拽的交互效果,真的很“爽”。

https://7ozhas.axshare.com

二、管理上传内容

互联网产品对内容的管理,无非四个动作:增、删、改、查。用户在选择内容后,会有两方面的需求:

  1. 看看自己选择了哪些内容,是不是选对了。
  2. 对于漏选、多选、错选的内容,进行增、删、改的操作。

根据这两方面的需求,内容管理部分我们需要解决两个问题:

1. 内容如何展示

首先需要确定需要展示哪些信息,是否需要展示文件名、文件大小、文件格式、上传时间?是否需要给文件重命名?重命名的规范是什么?是否需要展示缩略图,缩略图的选取规则是什么?对于多文件上传时,文件如何排序?对于超出限制是如何对用户进行提醒。

确定了需要展示的信息后,就需要思考如何把这些信息清晰简洁的展示给用户。在这里可以遵循两个原则 :

  1. 分清主次。比如根据此场景的信息重要程度,可以将文件名突出显示,文件大小、上传时间弱化显示,有突出有弱化,给用户梳理出一个清晰的视觉节奏。
  2. 分清类别。将同一类或者关联性较强的信息放到一个视觉区域,防止用户“找来找去”,提升用户的信息获取效率。

几种常见的内容展示样式:

2. 内容的管理

内容管理,就是对用户漏选、多选、错选而进行增、删、改的操作。

  • 增:增加文件数量。一般用于批量上传和图片墙。单选的上传组件不涉及这个操作。
  • 删:删除已选文件或者已上传文件。根据上传节点来分,上传组件可以分为选择文件后立即上传和手动上传两类。选择后立即上传的组件,因为数据已经发布到远程服务器,需要删除远程服务器的文件。对于选择后手动上传的数据,因为还未发布到远程服务器,在本地删除即可,不需要与服务器产生数据交互。
  • 改:修改已上传或已选择的内容。使用新数据替换原来的数据,不需要对原有数据删除。比如用户修改头像,或者替换图片墙中的某张图片等。

以下是几种常见的内容管理样式:

三、上传状态展示

著名的尼尔森十大可用性原则中排在首位的就是状态可见原则:用户的任何操作,页面都应该及时给出反馈。特别是对于上传这种持续时间较长的操作,更需要清晰直观的状态展示。传输状态需要展示两个维度的信息:上传进度和上传状态。

  • 上传进度是指单个文件传输的进度。一般用进度条、进度环和进度百分比来展示。
  • 上传状态是指文件是否已经成功发布到远程服务器,分为上传成功和上传失败两种。一般由成功图标和失败图标来展示。

几种常见的上传状态展示案例:

四、如何选择合适的上传组件

明白了上传组件的结构,在判断自己产品使用什么样的上传组件时就有了依据。可以遵循一下几条规则:

  • 单文件上传,可以使用按钮样式。按钮样式适用场景较多,图片、文件都可以使用。
  • 图片上传,使用缩略图可以提升用户体验。
  • 多文件上传时,可以选择文件列表或者表格,上传内容展示清晰。
  • 展示上传进度和选择使用进度套、进度环、进度百分比或者它们的组合。
  • 如果产品对用户体验要求较高,可以选择使用拖拽上传。

五、从实战中整理出来的常用B端组件

这是作者在工作中整理出来的常用B端组件。高保真、低保证和静态组件都有,可以用于不同交互要求的项目。感兴趣的小伙伴可以看一下。

https://gevoaf.axshare.com/

小结

对于大部分初学者来说,上传组件就只是一个带有“选择文件”的按钮,并不会深入思考按钮背后的内容。而能否进行深入思考,能否在别人的思想尽头再细分出各种逻辑和可能性,是每个产品经理和交互设计师进化成长的标志。

熟练掌握B端组件,打好扎实的基本功,你的B端之路会走的更加平稳、从容。

专栏作家

原木森林,人人都是产品经理专栏作家。专注于用户增长相关的逻辑、方法和案例分享。

本文原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 大佬!同求RP源文件,1343203720@qq.com

    来自福建 回复
  2. 大佬!同求RP源文件,1223922609@qq.com

    来自上海 回复
  3. 大佬!同求RP源文件,1085620998@qq.com

    来自广东 回复
  4. 大佬,同求rp源文件,1970893143@qq.com, 感谢!🙏

    来自上海 回复
  5. 大佬可以发RP源文件,2622749883@qq.com,谢谢🙏

    来自四川 回复
  6. 大佬同求RP源文件,yhxdtc@163.com,感谢感谢!!🙏

    来自上海 回复
  7. 大佬同求RP源文件,625207764@qq.com,大谢~大谢🙏

    来自浙江 回复
  8. 同求rp源文件,751019803@qq.com

    来自江苏 回复
  9. 大佬,跪求RP源文件,minfirfly@163.com,十分感谢~~

    来自北京 回复
  10. 大佬,求RP源文件,xugm.wh@qq.com,感谢~~

    来自山东 回复
  11. 大佬,求RP源文件,1169147305@qq.com,感谢!!

    来自福建 回复
  12. 大佬同求rp源文件2970734391@qq.com

    来自中国 回复
  13. 大佬,求rp源文件,packpage@163.com , 谢谢🙏

    来自河南 回复
  14. 大佬。同求源文件,tsaicici@163.com,感谢感谢

    来自江苏 回复
  15. 大佬。同求源文件,1010099848@qq.com,感谢感谢!!!!

    来自北京 回复
  16. 大佬,求RP源文件,1464234544@qq.com

    来自江苏 回复
  17. 大佬,跪求rp源文件

    来自四川 回复
  18. 大佬,同求RP源文件,zhengguohao20@163.com

    来自广东 回复
  19. 大佬,同求RP源文件,1414254379@qq.com

    来自浙江 回复
  20. 大佬~同求RP源文件,1244707355@qq.com

    来自江苏 回复
  21. 大佬~同求RP源文件,1439558087@qq.com

    来自北京 回复
  22. 大佬 求RP源文件,360774582@qq.com

    来自河北 回复
  23. 大佬,同求RP源文件,2935622254@qq.com
    非常感谢.
    【上一个写错了,再发一遍(嘿哈)】

    来自广东 回复
  24. 大佬! 求源rp文件,597127908@qq.com 感谢!

    来自广东 回复
  25. 大佬同求RP源文件,617656710@qq.com

    来自广东 回复
  26. 大佬同求RP源文件,354046390@qq.com

    来自广东 回复
  27. 同求rp源文件,964738742@qq.com

    来自江苏 回复
  28. 大佬,求.rp源文件

    来自山东 回复
    1. 留个邮箱,私发你~

      来自上海 回复
    2. 大佬,求rp源文件,蟹蟹!hsusaline2015@163.com

      来自北京 回复
    3. 您好 可以转发给我嘛 1229030978@qq.com 感激不尽(担心大佬发不过来…

      来自北京 回复
  29. 👍

    来自北京 回复