缩略图的那些事儿

UI界面中，经常会展示一些图片。看似很平常简单的一步，很多设计师都是去找参考，照搬比例。如果发布图片比例设计好，不仅会让界面统一，而且在提供预览功能的时候，还节约了屏幕展示空间。也方便了后期维护。产品属性的不同，图片比例选取也会有差异。

在做最右优化体验过程中，做了一些UI界面中缩略图比例分析。

首先，根据用户使用发图习惯，常出现在UI界面的图片类型大致有以下几种：

1. 表情包

2. 截屏

3. 相册照片

4. 长篇文章

5. 偶像明星拼接图

…

这类图片所涉及到的图片比例为：1:1正方形，16:9常见截屏，2:3相机拍照的全画比例，超长图，和超宽图片。而在市面上经常见的图片比例大致有1:1，2:3，3:4，10:16，9:16和超级长的9:21。

用缩略图展示的目的：

1.提供一定的预览功能

2.节省屏幕展示空间，节省流量

想达到的体验效果：

1.单张图片更多的信息内容的展示

2.多张图片的快速高效浏览和定位

测试图片规格选取：

常见照片的 4:3 比例，2:3比例，也有常见截图的 16:9 比例，16:10的黄金比例，还有 21:9 这样超长/超宽图片，选取市场

比较主流的比例图片进行测试。

测试app选取

结合国内外比较受欢迎的社交媒体挑选四个进行测试分析。

1.新浪微博国际版（中国最受欢迎的社交媒体网站之一）

2.微信（最受中国欢迎的通讯app）

3.qq空间

4.Twitter（再国外几个app中体验了facebook，Tumblr，只选取twitter比较贴合国内主流的app）

ps：在选取的APP中，发送了以下测试图片，我由于删帖不及时，很多人以为我被盗号了。（ps：之前找资料有看到用此方法进行聊天缩略图测试，所以借鉴到UI界面中也很适用）

新浪微博（国际版）测试效果展示：

结果分析：

单张图展示尺寸方面（横向4:3，竖图3:4）：

对于竖向图：高度固定，是两排小图高度。宽度固定，取两张图情况的单张宽度

对于横向图：宽度固定，两或三排小图的情况下，两列小图的高度

单张图裁切阈值方面：

新浪微博在做超比例图处理的时候，做了图片色块对比度的识别（如最后两组红线框图）

第一排长图取了顶部区域，而具有明显色块对比的第二排则裁取了中间部分（多图裁剪也遵循这个规律）

对于没有明显对比色块的情况下

竖向图，微博国际版设定了一个比例的阈值，长图超出 3:4 比例取上半部份

对于横向图，宽图超过 4:3 两头会被裁切。未超过这个比例值，图片的内容

将被完整缩放。

多张图展示尺寸和裁切方面（没有明显对比色块情况下）：

对于竖向图：宽度固定，图片等比缩放。超过部分被裁切，取中间部分

对于横向图：高度固定，图片等比缩放，超过部分被裁切，取中间部分

QQ空间测试效果展示：

结果分析：

单张图展示尺寸方面

对于竖向图：宽度固定，4:3图片大小的宽度，高度根据缩放比例而定

对于横向图：超过4:3的宽度，等比缩放到宽度极限值

单张图无图片裁切情况

2～9张图展示尺寸和裁切方面（两种固定尺寸，没有根据色块对比度进行特殊处理）：

对于竖向图：宽度固定，图片等比缩放。超过部分被裁切，取中间部分

对于横向图：高度固定，图片等比缩放，超过部分被裁切，取中间部分

微信测试效果展示：

结果分析：

单张图展示尺寸方面

对于竖向图：高度固定，宽度等比缩放到1：1区域内

对于横向图：宽度固定，高度等比缩放到1：1区域内

单张图无图片裁切情况

2～9张图展示尺寸和裁切方面（1:1固定尺寸，没有根据色块对比度进行特殊处理）：

对于竖向图：宽度固定，图片等比缩放。超过部分被裁切，取中间部分

对于横向图：高度固定，图片等比缩放，超过部分被裁切，取中间部分

Twitter测试效果展示：

结果分析：

单张图展示尺寸方面

对于竖向图：宽度固定为极限值，高度按照宽度等比缩放区域内

对于横向图：宽度固定为极限值，高度按照宽度等比缩放区域内

单张图无图片裁切情况

2张图展示尺寸和裁切方面（1:1固定尺寸）：

对于横／竖向图：宽度固定，图片等比缩放。超过部分被裁切，取中间部分

2～5张图展示尺寸和裁切方面（1:1固定尺寸）：

在固定的区域内进行自由排列，超过五张的图进行隐藏

对比分析：

1.新浪微博国际版：在图片展示比较多的情况下比较整齐，并且做了颜色色域对比度识别，大大增加缩略图展示的美观性，缺点就是单张正方形图片会按照4；3进行裁切，由于缩略图取顶部，在长图展开动效的过渡效果会有影响

2.微信：单张图给定了1：1区域，对单张图信息展示更有利，在两张图以上的情况下节省了内容展示空间，缺点是在图片形    态多的情况下，视觉呈现比较散。

3.qq空间：单张长图的信息呈现会比较全面，但是图片会有过长的现象，图片多的情况下，整体排列比较散

4.Twitter：宽度是固定的，整体显示会比较整齐，结构比较自由，但是单张长图的情况下图片显示效果不佳。

总结效果展示：

设定发布流共四个尺寸：1:1大尺寸和小尺寸，3:4尺寸和4:3，GIF图虽没在分析案例中，呈现方式遵循图片比例，而由于视频比较特殊，处理方式按照3:4或者4:3发布。

1. 单图双图：1:1固定相同的大尺寸，图片所占内容面积适宜，图片呈现相对完整

2. 3～9图：1:1固定小尺寸

对于竖向图宽度固定，图片等比缩放。超过部分被裁切，取中间部分，在做预览动效的时候，过渡也会比较自然对于横向图高度固定，图片等比缩放，超过部分被裁切，取中间部分

3. 对于单张竖向图：高度固定，是两排小图高度。宽度固定，取两张图情况的单张宽度。对于单张横向图：宽度固定，两或三排小图的情况下，两列小图的高度。

特别感谢看到最后的小伙伴～

比例分析其实比较绕，尽量简化了文字总结，但还是需要去自己理解其中的规律，可能有分析不到位的地方希望大神指出，第一次写文章，感谢大家观看～