交互思考之【上传文件-图片】
此篇结合自己遇到的一些场景,总结了【上传文件】的各种交互解决方案~
在交互原型设计当中,会经常设计上传文件的场景。例如:上传图片,上传excel文档。这些上传的操作虽然看似很小的功能,深究起来也值得剖析一下,挺有意思的~阅读此文大概3分钟~
目录:
上传图片
上传excel文件
OCR的常见几种形式
上传图片/视频
比如在评价商品时,需要上传商品图片,供他人参考。上述常见的上传图片场景,想必大家都很熟悉。以下截取常用的App图片:
1、基础用法
上传单张和多张图片,其实从交互组件角度来看,是一个组件,只是要求的数量不一样。我们在设计的时候,除了要考虑实现业务需求,也要用组件设计的思维来做交互设计。
组件设计思维:简单描述为,将业务出现的各种场景下的类型,用模块化的方式进组合。要遵循统一化、拓展性等设计原则。
1、基础组件
一般图片上传会考虑上传前后的关系。上传前,需要有上传按钮,上传后,需要显示当前上传图片的缩略图。
如果是多张图片的,上传后依旧会显示上传按钮。
我之前做的项目,就面临这开发前后还原度不符,主要在于上传后的缩略图。开发未注意缩略图的样式。一般来说,在框定的显示区域内,缩略图会显示原图片正中心的位置,需要和研发沟通后即可调整。
多张照片的上传,一般业务上会规定最大可上传的数量,可以体现在上传当中,当如果已上传数量大于可上传最大数值时,不再显示上传按钮。
2、上传图片加载
图片上传时,图片一般比较大,普通拍照手机,拍一张图片的大小也是1M以上了。图片如果过大,上传时卡住了咋整?这时【加载状态】就该出现了,虽然是个很小的点,但是挺影响使用者体验的。如果设计的好,在加载图片时,对用户来说零感知。
普通的加载方式,一般来说,就是全局加载,但是弊端很明显,会导致页面卡死,无法操作,必须等待上传成功后才可以操作。
图片的加载,一般会放在图片显示区域进行加载,这样就不用影响页面中其他的功能。
当然这种上传图片时,也分为异步上传和同步上传。
同步:如果选中照片后即开始存储图片,会显示图片正在加载中
简单异步:比如上传照片图片后,前端向后端并未存储图片,在【提交】时一次向存储图片,就不会显示每个图片都会显示图片加载状态了,这个时候,需要等待【提交成功】才可使用其他功能。
复杂异步:提交时,即时告诉用户提交成功,提交的信息(包括图片)其实正在后台加载中,你无需等待即可使用其他功能。
2、特定场景下的上传图片
1、图形表象化,易理解
所有的设计都没法脱离场景、业务的背景,在特定的场景下,需要合理的利用设计要素去准备表达我们的目的。
实名认证场景,合理利用可视化图片,让用户更好理解。
2、文字描述,简单有效
业务场景大背景下,会对各种图片有具体的要求(B端业务要求会比较多),要求比较多又没有合适的具象化图形表达时,会使用文字表述,这样也比较简单有效。
总结
这一篇主要讲了【上传图片】的基础,文中不足处望能互相交流。下一篇开始讲【上传excel】等文件时,交互设计师常见的几种场景与解决方案~~~