上传图片流程中的细节

用户上传图片是一个很普通的使用场景，其流程并不复杂，选择照片-----编辑照片-----上传照片。但就是在这简单的流程中，存在一些细节值得大家在具体的设计时多加雕琢。

在此和大家探讨以下两个细节：

1、选择图片的路径

苹果在iOS9版本中增加了短信发送图片功能。选择照片的路径除了通常的进入相册选择和立即拍摄以外，增加了快捷预览选择模块，直接点击小图即选中，下方的选项按钮也相应改变，随着小版本9.1的更新，在原来的基础上又增加了点选图片后，图片浏览模块放大的细节。

很多涉及到发图片的产品在流程中都采用了类似这种增加快捷选择图片模块的交互方式，比如Messenger、QQ、same等。针对用户需要选择的照片在相册中排序靠前的场景下，这样确实减少了页面的跳转，使整个流程更加轻盈。

但当用户要选择的目标照片位置很靠后时，在这样有限的区域内滑动寻找是很低效的，另外当用户需要控制照片的发布顺序时，这种方式显然也缺乏了对全局的控制力。有这两种需求的用户还是需要择进入相册选择照片。

Twitter将输入面板和相册结合在一个页面里，外露的5张图片可以直接点击选择，向上滑动即进入到相册页面。虽然本质上没有完全解决之前提到的方式中所存在的问题（1.若进入相册，页面跳转大；2.若在快捷选择区域操作，损失对全局的掌控力，且目标照片靠后时效率低），但向上滑动即进入相册的交互方式，比点击进入新页面打开相册更加流畅轻盈。

2、照片发布的顺序

用户从相册选择了多张图片发布后，图片的展示顺序应该是怎样的？

目前存在这样几种排序方式：

a、按上传进度，先上传的先显示；

b、按图片在相册中的顺序；

c、按点击顺序展示。

当用户发送单张图片或者对多图的顺序没要求的时候是可以忽略这个细节的，但对于精心编辑了多张图，准备依次排序发布的用户来说，如果是前两种排序方式，将会非常虐心…

因此很多产品采用的是按点击的顺序排序，不过细节上的处理各有不同。

微信，在选择图片时，图片右上角标有选中提示，此时用户对选中后究竟是什么排布顺序是没有任何预知的，点击选择完成后，才能通过图片排列顺序得知是按照点击的先后顺序排序的。

对于这一点，Facebook和Twitter的解决方案是在点选图片时在右上角直接用数字标注图片顺序，如此一来用户对多图发布的操作整体掌控感更强。

nice也用了同样的处理方式，而且从其页面结构上也能看出nice正在尝试一种更高效的方式，使其能在一个页面上兼顾多图的选择及单图编辑。

细节打动人心，看似简单的图片上传流程，经过对用户使用场景的揣摩细化，也能做出很多令人泪流满面的细节。