关于上传图片功能的案例与思考
梁, 晓明发表于2016-04-05
类别:
一.上传图片的流程
上传图片是比较常见和被用户熟知的功能模块,从使用者角度,上传图片可分为查找图片—选择图片—编辑图片—上传图片几个步骤。
对应到界面设计上,目前提供给用户查找图片的方式有拍摄或上传相册已有图片,选择图片的方式有选择所拍的图片或挑选相册中的图片,编辑图片的方式有截取/处理/预览图片,具体如下图所示,现有上传图片功能还有哪些可以优化的地方?对照流程依次来看:
1.查找图片流程:还有其它查找图片的方式吗?且看几个案例:
QQ用户在更换头像的时候可能会考量好久,有反复对比之前的头像和新头像的需求,故将“历史头像”入口外置,方便查找
Ios短信新增“最近图片”的快捷入口,将最近拍摄的一些图片列出来,方便查找。关于如何查找,Ios又开辟了一条新路径,流程图里需要补充了,如下图蓝色流程。
除了新增查找入口或方式,还有其它思路吗?从图片本身思考,图片难找到的原因是什么,太多太乱了吗?那就整理一下。
百度旅游:增加了“智能整理”功能,智能识别图片拍摄地,将用户本地的图片按照拍摄地点进行分类整理,这样有利于根据地点查找图片,在上传过程之前就有了参考,而不是上传后再进行编辑选择地点。
整理不止空间上的,还有时间上的,在上传相册图片这条路径(流程图中黄线部分),通常有两种做法:一种是显示本地所有相册列表,选择具体的某个相册后,再选择里面的图片。特别说明下ios系统的“时刻“相册,将图片按照拍摄地和拍摄时间进行了整理,如下图
另一种做法是直接显示某一个相册的图片,用户可以切换相册。(安卓app常采用该方式)
去哪儿攻略“上传游记图片功能“采用的是第二种做法。默认显示本地的图片,对本地图片按照时间进行了整理,用户可以按时间(年月日)选择所需的图片,如下图
2. 选择图片流程:还有优化的余地吗?
通常单选图片和多选图片是不同的两个流程。单选流程:选择完一张图片后会跳转页面,完成上传或在当前页提示用户只能选择一张图片。多选流程:用户勾选1张或多张,确认后跳转页面。lofter做了一个尝试,将单选和多选融合到了一个流程,在选择图片时,若点选图片,即为单选;若长按图片,切换到多选模式,可以选择多张图片 ,点击右上角可退出多选模式,另外视觉层级上没有满屏的勾选框,清爽了不少。
3.编辑图片流程:单选图片可支持裁切、处理、预览功能,多选图片一般只支持预览功能,若对每张图片都可编辑,过于复杂。本文暂对图片的处理不做分析。
二.上传图片的应用场景
功能需要应用于场景,上传图片功能的应用场景主要为:信息补充、信息反馈场景(如个人头像/上传凭证/投诉证明/点评图片)和社交场景(如上传图片至朋友圈/空间或分享游记)。这两类场景的上传图片有哪些不同点呢?首先信息补充/反馈场景所需上传的图片数量相对较少,社交场景上传的图片数量相对较多。其次社交场景的上传图片用户更多趋向处理图片(各种滤镜,大家懂得)。第三,信息补充/反馈类的上传频率低于社交场景的上传。两种不同应用场景,上传图片的流程分别有需要强调的部分。举例:天猫上传头像,属于信息补充场景。该场景只允许上传一张图片,操作频率不高。因而流程非常简短:调取本地图片—选择图片(可切换相册)—上传,去掉了图片确认的流程,操作起来简单快捷。
三. 总结
1.信息补充、信息反馈场景的上传图片功能:流程可以尽量缩短,让用户更快查找图片,选择图片,完成上传。
2.社交场景:lofter多选图片的方式可以参考,但长按操作相对隐藏,需要加以引导,游记里的上传图片代入拍摄时间、地点等,满足用户分享的心理。
本文作者:梁, 晓明 转载请注明来自:携程设计委员会