如何让用户更愉快的分享图片——图片上传环节中设计师们不得不思考的问题

在信息传播中，声音、文字、图片、视频是最为常见的4种载体形式，每种载体的制作成本也都各有不同，同时也都有各自适用的最佳场景。

俗话有“一图胜千文”的说法，图片在信息传播中的价值兼具内容价值和形式价值，也是应用场景最广泛的载体形式。我们熟知的购物类app中、微信的朋友圈、主打图片分享的Instagram及flickr等，图片都占据了大量的位置空间。在用户上传图片的环节中，怎样让用户获得更佳良好的体验是app设计中不可绕过的问题，我们尝试从图片上传流程的角度上去做更进一步的分析。我们把整个流程拆分为4个环节来看：查找图片——选择图片——预发布——发布。

1、查找图片阶段。用户需要的是快速且正确的查找到自己想要的图片。

在这个环节上有两种比较主流的方式，一种是全屏缩略图的浏览方式，比如说微信、微博，Twitter和Facebook，另一种半屏缩略图的浏览方式，同时在屏幕上方有大图和下方的缩略图做联动展示，比如ins。

在第一种方式中，用户可以在同一个页面内去看更多的图片，方便用户快速选择自己想要找到的图片，这种浏览方式适用于用户需要同时查找多张图片，并且这几张图片的特征都比较明显，可以一眼通过缩略图识别；在第二种展示方式中，用户可以通过页面上半部分的大图去观察所选图片的更多细节，帮助自己判断是不是要找的图，这种方式可以帮助用户在面对多张相似图片的时候快速查找想要的图片，但下半部分展示的缩略图数量就有限，对于查找时间跨度大的图片不是很友好。以iPhone X为例，在全屏缩略图方式中，每行3张图的话可以展示18张图，每行4张图的话可以展示28张图；在半屏缩略图的方式中，每行4张图的话仅可以展示12张图。

在缩略图的排列顺序上也出现了截然不同的两种方式，第一种是以微信为代表的正序排列方式（通iOS系统相册的排列方式），用户需要向下滑动浏览更多图片；第二种是倒叙的排列方式，用户需要向上滑动浏览更多图片（微博、Twitter、Facebook、ins都是采用的这种方式）；同时这两种不同排序逻辑在页面功能按钮的布局上也有比较大的差异，第一种逻辑中，触发下一步的button位于右下角；在第二种逻辑中，触发下一步动作的button位于右上角（请看上图左1）。

在切换相簿选择图片的场景中，微信又是一个特例。微信的触发是点击左上角的“返回”，跳到一个全新的页面；而其他几个app都是点击顶部中间位置的“相机胶卷”，通过上拉或下拉弹窗的方式展示。在这里我要吐槽一下twitter的展示方式，点击顶部后会先由底部弹出一个半屏的，如果向上滑动会变成全屏，小编认为把半屏弹窗的状态去掉，直接展示全屏弹窗在大多数场景下会更友好一些。

2、选择图片阶段。用户需要清晰的知道哪些是自己已选的、自己总共选了多少张、自己还可以选择多少张、控制最终的展示顺序，以上这些都是用户最为共性的需求。

在这个环节上也同样有2种主流的处理方式，第一种是明确的在已选图片上做标记符号，并且用数字标记处用户的选择顺序（下图左1、左2、左3）；第二种是只在已选图片上标记选中符号，不标记用户的选择顺序（下图左4）。在下面的两种方式中，第一种对于那些对图片展示顺序有要求的人来讲是比较有好的方式，这种方式能够让用户的控制力更强。

3、预发布阶段。进入预发布界面，用户需要最后确认图片是否已经选择正确、图片的排序是否正确、图片的效果是否需要美化等。

在这个阶段，大多数app都提供了相对一致的功能点，比如大图预览模式，微信、微博和Twitter都有提供；比如给图片加滤镜、贴纸等美化图片的功能，微博、Twitter都有提供；比如增加和删除已选择的图片；在与发布的界面上，几个主流app难得一致的一个点是触发“发布”的button都统一在了屏幕的右上交。

4、发布阶段。帮助用户发布成功是这个阶段最主要的诉求，在网络出状况的情况下该怎么处理是我们必须要考虑的一个因素。

我们先来看微信的处理方式：当你点击发布之后，微信会直接跳到朋友圈的页面并把发布结果展示出来，让用户直观看到最终的成果，就算是在弱网的情况下，微信也是采用这种逻辑处理方式，制造一种“发布成功的假象”，用户自己看到发布成功，在别人的朋友圈暂时还看不到。

微博在点击发布之后，会出一个“已发送”的toast提示，然后直接跳转到微博浏览页面。但是在网络不好的情况下，微博的处理方式就有些让人崩溃：点击”发布“之后，toast提示”已发送（下图左2、左3），然后跳转到主页，弹出”发送失败”的toast提示，最重要的是刚刚编辑的内容并没有保存，需要重新来过。Twitter和Facebook的逻辑方式基本一致，点击“发布”之后都会跳转到主页，并且在主页有一个发送进度条告知用户发送状态。

在上传图片的这个功能点中，快速查找图片、编辑图片并且成功发布是用户的主要核心诉求，如果能做到进一步细分用户的场景，我们也就能找到进一步优化用户体验的方式。比如ins的内置滤镜，帮助用户美化图片，提升用户发布图片的成绩感，刺激用户分享（下图左1）；twitter的预发布界面，会自动展示相机胶卷里最近新添加的几张图片，满足用户用相机胶卷新添加图片快速发推的需求（下图左2）；微信发圈在网络不好的状况下制造一种发圈成功的“假象”（下图左3），这些都是细分用户场景带来的进一步用户体验提升的小例子。

针对这个课题，小编还有三个问题希望大家来讨论一下，大家可以在留言中互动：

1、为什么微信里面切换相薄的时候要点左上角的“返回”，而不像其他app（微博）那样直接把切换button放在Nav bar的中间？

2、微信发朋友圈的时候为什么不提供美化图片或滤镜的功能？

3、在图片上传过程中前端和后台的交互怎样处理会更好？