关于上传图片功能的案例与思考

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

anlisikao

一.上传图片的流程

上传图片是比较常见和被用户熟知的功能模块,从使用者角度,上传图片可分为查找图片—选择图片—编辑图片—上传图片几个步骤。

99

对应到界面设计上,目前提供给用户查找图片的方式有拍摄或上传相册已有图片,选择图片的方式有选择所拍的图片或挑选相册中的图片,编辑图片的方式有截取/处理/预览图片,具体如下图所示,现有上传图片功能还有哪些可以优化的地方?对照流程依次来看:

100

1.查找图片流程:

还有其它查找图片的方式吗?且看几个案例:

QQ用户在更换头像的时候可能会考量好久,有反复对比之前的头像和新头像的需求,故将“历史头像”入口外置,方便查找

QQ20161102114849

iOS短信新增“最近图片”的快捷入口,将最近拍摄的一些图片列出来,方便查找。关于如何查找,iOS又开辟了一条新路径,流程图里需要补充了,如下图蓝色流程。

QQ20161102114906

5

除了新增查找入口或方式,还有其它思路吗?从图片本身思考,图片难找到的原因是什么,太多太乱了吗?那就整理一下。

百度旅游:增加了“智能整理”功能,智能识别图片拍摄地,将用户本地的图片按照拍摄地点进行分类整理,这样有利于根据地点查找图片,在上传过程之前就有了参考,而不是上传后再进行编辑选择地点。

QQ20161102114917

整理不止空间上的,还有时间上的,在上传相册图片这条路径(流程图中黄线部分),通常有两种做法:一种是显示本地所有相册列表,选择具体的某个相册后,再选择里面的图片。特别说明下iOS系统的“时刻“相册,将图片按照拍摄地和拍摄时间进行了整理,如下图

QQ20161102114930

另一种做法是直接显示某一个相册的图片,用户可以切换相册(安卓app常采用该方式)。

1476237383362812

去哪儿攻略“上传游记图片功能“采用的是第二种做法。默认显示本地的图片,对本地图片按照时间进行了整理,用户可以按时间(年月日)选择所需的图片,如下图

QQ20161102114951

2. 选择图片流程:

还有优化的余地吗?

通常单选图片和多选图片是不同的两个流程。单选流程:选择完一张图片后会跳转页面,完成上传或在当前页提示用户只能选择一张图片。多选流程:用户勾选1张或多张,确认后跳转页面。lofter做了一个尝试,将单选和多选融合到了一个流程,在选择图片时,若点选图片,即为单选;若长按图片,切换到多选模式,可以选择多张图片 ,点击右上角可退出多选模式,另外视觉层级上没有满屏的勾选框,清爽了不少。

QQ20161102115005

3.编辑图片流程:

单选图片可支持裁切、处理、预览功能,多选图片一般只支持预览功能,若对每张图片都可编辑,过于复杂。本文暂对图片的处理不做分析。

二.上传图片的应用场景

功能需要应用于场景,上传图片功能的应用场景主要为:

  • 信息补充、信息反馈场景(如个人头像/上传凭证/投诉证明/点评图片)
  • 社交场景(如上传图片至朋友圈/空间或分享游记)。

这两类场景的上传图片有哪些不同点呢?

首先信息补充/反馈场景所需上传的图片数量相对较少,社交场景上传的图片数量相对较多。

其次社交场景的上传图片用户更多趋向处理图片(各种滤镜,大家懂得)。

第三,信息补充/反馈类的上传频率低于社交场景的上传。两种不同应用场景,上传图片的流程分别有需要强调的部分。

举例:天猫上传头像,属于信息补充场景。该场景只允许上传一张图片,操作频率不高。因而流程非常简短:调取本地图片—选择图片(可切换相册)—上传,去掉了图片确认的流程,操作起来简单快捷。

QQ20161102115020

1476237487979338

三. 总结

1.信息补充、信息反馈场景的上传图片功能:流程可以尽量缩短,让用户更快查找图片,选择图片,完成上传。

2.社交场景:lofter多选图片的方式可以参考,但长按操作相对隐藏,需要加以引导,游记里的上传图片代入拍摄时间、地点等,满足用户分享的心理。

 

作者:梁晓明

来源:携程设计委员会

原文地址:http://ued.ctrip.com/blog/4590.html

您的赞赏,是对我创作的最大鼓励。
2人打赏

评论( 1

登录后参与评论
  1. 我想知道你多大了

    回复
加载中