好玩的 B 端组件

栏目:成人教育  时间:2023-05-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. 内容的管理

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

  增:增加文件数量。一般用于批量上传和图片墙。单选的上传组件不涉及这个操作。

  删:删除已选文件或者已上传文件。根据上传节点来分,上传组件可以分为选择文件后立即上传和手动上传两类。选择后立即上传的组件,因为数据已经发布到远程服务器,需要删除远程服务器的文件。对于选择后手动上传的数据,因为还未发布到远程服务器,在本地删除即可,不需要与服务器产生数据交互。

  改:修改已上传或已选择的内容。使用新数据替换原来的数据,不需要对原有数据删除。比如用户修改头像,或者替换图片墙中的某张图片等。

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

  三、上传状态展示

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

  上传进度是指单个文件传输的进度。一般用进度条、进度环和进度百分比来展示。

  上传状态是指文件是否已经成功发布到远程服务器,分为上传成功和上传失败两种。一般由成功图标和失败图标来展示。

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

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

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

  单文件上传,可以使用按钮样式。按钮样式适用场景较多,图片、文件都可以使用。

  图片上传,使用缩略图可以提升用户体验。

  多文件上传时,可以选择文件列表或者表格,上传内容展示清晰。

  展示上传进度和选择使用进度套、进度环、进度百分比或者它们的组合。

  如果产品对用户体验要求较高,可以选择使用拖拽上传。

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

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

  https://gevoaf.axshare.com/

  小结

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

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

  专栏作家

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

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

  题图来自 Unsplash,基于 CC0 协议

上一篇:gmat有必要培训吗?GMAT培训班怎么正确选择?
下一篇:2024考研数学:概率论与数理统计的解题技巧

最近更新成人教育