微信缩略图的微交互

前言

本文主要分享自己在微信朋友圈中缩略图的一些使用体验，并分析其微交互的效果。

缩略图排版

关于缩略图的排版，其实微信做了比较丰富的设计，其在1张，2张，3张以及更多的时候做了不同的排版。其设计是为了让图片较少了有较好的展示效果。

那么其是如何控制超过9张图片的情况呢？通过选择控制只能选择9张图片，选择时加提示，并且并且在选择之后，如果判断发现已经满足九张，那么就移除增加选择图片的按钮。

特别的是：当上传为2，4张图片时，其会按照每排2张显示。

当是2张，符合两张都是长图时，按照两张长图显示；但是一长一宽时，还是正方向缩略图，宽度的部分进行裁剪。

图片的显示顺序

选择时明确出显示的顺序

在之前的微信版本中，其实用户并不知道自己选择的顺序会影响显示的顺序，而且选择完之后的图片也不支持调整顺序，但是在较新的版本中，微信支持了这一功能。主要设计点如下：

选择图片的时候：按照选择的顺序，标识一个数字，这个数字就代表显示的顺序，但是这个数字以及界面中并没有提示这个数字代表什么，这部分是通过用户习惯培养认知的。并且，针对过程中可能移除的图片，数字标识做了即时的调整顺序的显示，这一点非常友好。

选择后可换顺序

选择之后可拖动：为了进一步让用户可以方便的调整顺序，在选择图片之后，微信也设置了缩略图可拖动顺序，拖动到的位置就是显示的位置，并且会将原来之后的图片顺序位移。这里面的位移其实是有一定交互逻辑的：当移动到一张图片的左边，这张图片以及其后的图片向后移动一位；当其移动到其右边，其他图片先向前位移，剩下的图片是先完成位移然后在具体识别你移动到哪个位置。也就是说，这种交互适合相邻图片换位置，以及某张图插到某个位置，但并不适合两张图交互位置。

缩略图裁剪

在一般的缩略图处理中，一般都是把原图进行相应尺寸的所放，或者专门提供其合适尺寸的缩略图。但是微信针对图片裁剪的缩略图是符合一定规则的。

微信缩略图针对两张以上才开始裁剪，而针对一张图片时，是原图的比例缩放。

符合1:1,或者接近的

缩略图默认的宽高比是1：1，所以当符合1：1或者接近这个宽高比，显示会更加友好，否则就会变成图片显示缺失。

大于1：1，说明属于较宽的图片

对于一定比例允许范围内，仍然是不做裁剪；

对于符合一定比例但没有超过宽高比限制的，开始进行裁剪，按照图片中心区域裁剪不同比例，宽高比越大，裁剪的中间区域越小，比如宽高比是10：1，可能裁剪到的中心区域也就只有20%-30%左右.

小于1：1，说明属于较高的图片

由于是手机缩略图，所以针对这种比例的图片，微信对宽高比限度上给了更多的允许空间，也就是说中心部分裁剪的几率会更大。但这种就有个问题，如果人物处于不是中心而是偏下的位置，是不是意味着人物只能显示一个头呢？验证结果是的，所以一般我们传或者拍人物照的时候为了显示，一般都是尽量让人物占据中间的位置。

并且有一点是需要注意的，虽然是取中间，并不意味着两边不会做裁剪，其两边的区域也是会做一定的裁边的。

预览显示

因为预览显示的最大空间为手机全图，所以手机的宽高比决定了部分预览的效果，也就是说不通宽高比的手机即使是一样的图片预览效果看到的也是不同的

宽的图片

所谓的宽的图片就是指，宽高比大于手机的宽高比的，这种预览显示都是宽度取100%，然后高度自适应的。然后垂直方向是居中的。

高的图片，这种我们一般称为长图

预览效果是宽度也是手机宽度，不同的是图片是顶部开始显示的，然后可以向上拖动看到其他部分。

也有一种效果是属于细长的图片，但符合一定的比例区间，微信的预览是会按照高度为100%，然后宽度自适应，这种的显示效果就是两边留黑。

相册组概念

在同一缩略图组中的图片，是可以通过切换进行显示，哪怕其还没有显示在页面中。

但无论切换到哪张，当其返回页面时，都不会影响页面的位置。

返回页面的闪烁:有一点不好的体验就是，如果看的相册图片如果不在视图中，会出现一个比较难看的闪烁。

不循环的设置：为了避免循环切换相册造成的交互困扰，相册均设置为了不循环滚动。

当前指针：针对朋友圈缩略图以及上传时的缩略图的相册预览，显示的交互是不同的，前者是通过点也就是指示器实现的，而后者是更加明确的数字指示，这也与上传图片时的数字指针实现了统一。

记录用户缩放比例

当你不断缩放用户比例时，微信会记录这一过程，当你缩放并移动到屏幕边缘，微信会认为你想看下一张图，于是切换到下一张图，当你再次返回这张图片时，保存了你上次查看的缩放比例。

关于相册的生命周期，之所以我们认为这个相册是有生命周期的是因为其对用户操作的记录会在用户返回页面或者是重新进入缩略图界面时重新初始化。

实际上，我们在设计任何一个小的交互时，都要考虑周期这一点，在周日内，用户的交互是被记忆的，周期外，用户打开时，是一个全新的开始。只不过，大多数时候，前端工程师把这个过程理解为页面刷新进入时。其实你完全可以自定义进行init初始化，destroy销毁等交互周期让自己的交互更人性化。

至于是否需要记忆用户的缩放比例，一定要分析用户这样做的目的是什么，场景是什么，更多时候是期望保留还是重置，又或者你默认提供的是保留，为用户提供重置的快捷键。

删除缩略图

因为删除属于有风险的交互，所以在设计时，考虑到降低风险交互，以及考虑到交互的友好性，微信的设置是吧删除做成了拖拽的底部区域，只有长按才会出现，只有拖动到底部才能真的删除，然后又会恢复到默认状态，而不是我们一般的设置，设置为每个图片都可以点击这个图片的删除。

怎么验证微信认为删除图片是有风险的交互呢？其在预览时也提供了删除，但删除是点击之后还有一个actionSheet来让你进一步确认是否删除。

当删除之后，其会自动显示上一张图片；
那么如果前面没有图片呢？显示其后面的一张图片；
如果其实唯一的一张，那么会返回到传图片的页面（这里没有做额外的交互或者提示）。

不好的地方：不能删除多张图片，也就是说你想删除多张，只能一张张移除。