1.0.47

交互思考之【上传文件-图片】

亮亮lianggg
上海/UX设计师/3年前/1861浏览
交互思考之【上传文件-图片】
亮亮lianggg

此篇结合自己遇到的一些场景,总结了【上传文件】的各种交互解决方案~

在交互原型设计当中,会经常设计上传文件的场景。例如:上传图片,上传excel文档。这些上传的操作虽然看似很小的功能,深究起来也值得剖析一下,挺有意思的~阅读此文大概3分钟~


目录:

  • 上传图片

  • 上传excel文件

  • OCR的常见几种形式


上传图片/视频

比如在评价商品时,需要上传商品图片,供他人参考。上述常见的上传图片场景,想必大家都很熟悉。以下截取常用的App图片:


1、基础用法

上传单张和多张图片,其实从交互组件角度来看,是一个组件,只是要求的数量不一样。我们在设计的时候,除了要考虑实现业务需求,也要用组件设计的思维来做交互设计。


组件设计思维:简单描述为,将业务出现的各种场景下的类型,用模块化的方式进组合。要遵循统一化、拓展性等设计原则。


1、基础组件

一般图片上传会考虑上传前后的关系。上传前,需要有上传按钮,上传后,需要显示当前上传图片的缩略图。

如果是多张图片的,上传后依旧会显示上传按钮。


我之前做的项目,就面临这开发前后还原度不符,主要在于上传后的缩略图。开发未注意缩略图的样式。一般来说,在框定的显示区域内,缩略图会显示原图片正中心的位置,需要和研发沟通后即可调整。


多张照片的上传,一般业务上会规定最大可上传的数量,可以体现在上传当中,当如果已上传数量大于可上传最大数值时,不再显示上传按钮。

2、上传图片加载

图片上传时,图片一般比较大,普通拍照手机,拍一张图片的大小也是1M以上了。图片如果过大,上传时卡住了咋整?这时【加载状态】就该出现了,虽然是个很小的点,但是挺影响使用者体验的。如果设计的好,在加载图片时,对用户来说零感知。

普通的加载方式,一般来说,就是全局加载,但是弊端很明显,会导致页面卡死,无法操作,必须等待上传成功后才可以操作。

图片的加载,一般会放在图片显示区域进行加载,这样就不用影响页面中其他的功能。


当然这种上传图片时,也分为异步上传和同步上传。

同步:如果选中照片后即开始存储图片,会显示图片正在加载中



简单异步:比如上传照片图片后,前端向后端并未存储图片,在【提交】时一次向存储图片,就不会显示每个图片都会显示图片加载状态了,这个时候,需要等待【提交成功】才可使用其他功能。


复杂异步:提交时,即时告诉用户提交成功,提交的信息(包括图片)其实正在后台加载中,你无需等待即可使用其他功能。


  



2、特定场景下的上传图片

1、图形表象化,易理解

所有的设计都没法脱离场景、业务的背景,在特定的场景下,需要合理的利用设计要素去准备表达我们的目的。

实名认证场景,合理利用可视化图片,让用户更好理解。


2、文字描述,简单有效

业务场景大背景下,会对各种图片有具体的要求(B端业务要求会比较多),要求比较多又没有合适的具象化图形表达时,会使用文字表述,这样也比较简单有效。


总结

这一篇主要讲了【上传图片】的基础,文中不足处望能互相交流。下一篇开始讲【上传excel】等文件时,交互设计师常见的几种场景与解决方案~~~


11
举报
15
分享
原创文章 UI 网页 交互设计 用户体验 解决方案
声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。
评论
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
登录注册
侵权申诉 企业服务 帮助中心
京网文[2023]1747-060号 京公网安备11010502000501号 京ICP备11017824号-4 京ICP证130164号Copyright © 2006-2024 ZCOOL站酷

天下网TXWEB德阳网络推广哪家专业宿州市网站优化报价宁德网站推广铜仁seo按天扣费哪家好平湖网站制作报价杭州网站改版宿州定制网站公司清远市网站优化公司莱芜市建网站哪家专业大庆市seo按天计费报价南阳品牌网站设计多少钱鹤岗品牌网站设计推荐宜春seo按天扣费多少钱铜仁优化贵港市建站哪家专业安康市品牌网站设计报价自贡市建站多少钱廊坊关键词排名推荐德州市seo优化推荐巴中建站无锡市品牌网站设计推荐太原网页设计多少钱西宁市seo太原网站推广报价湛江网站定制哪家专业海口网页制作推荐开封市关键词排名多少钱辽源网页制作公司铜仁市seo排名报价株洲网站制作报价香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

天下网TXWEB XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化