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

一.上传图片的流程

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

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

1.查找图片流程：

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

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

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

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

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

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

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

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

2. 选择图片流程：

还有优化的余地吗？

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

3.编辑图片流程：

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

二．上传图片的应用场景

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

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

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

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

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

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

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

三. 总结

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

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

 

作者：梁晓明

来源：携程设计委员会

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