缩略图的逻辑

说到缩略图,我在实际项目中只遇到过一两次,印象比较深的是为公司做一个论坛。后来主要做公司真正的产品,也就没再接触过缩略图的设计。
最近下班回家没事干,练习练习基本功,过程中又发现了这个看似简单但大有文章的细节。
缩略图通常用在文章列表页面中,将正文中的图片内容进行缩小呈现,主要有两个目的,一是告知用户正文里存在图片,然后就是提供一定的预览功能。
用户上传的图片五花八门,有正方形的,有长方形的,有非常长的,也有非常短的,甚至还有不规则的。有上传一张的,也有上传好多张的。如何才能满足需求,又不影响整体布局整齐美观?
研究这个真的很劳神费时(┬_┬),我一共测试了知乎、新浪微博、以及百度贴吧的设计。
首先是知乎:
只显示第一张图片;
宽>高的图片,以180px的固定宽缩小高,即180*X;
宽<高的图片,以100px的固定高缩小宽,即X*100;
宽=高的图片,以100*100显示;
宽高都小于100的,以原尺寸显示;
知乎的逻辑相对比较简单粗暴。但很遗憾,不好的地方也在所难免。一是当图片宽高比非常大时,缩略图就像一根细长细长的竹子,显得非常尴尬,图片变得无法阅读。二是用户看不出正文里究竟有多少张图片,因此还是没有起到足够好的“预览”效果,导致很多知乎用户需要手动在回答的开头写“多图预警”。
接着是新浪微博:
最多上传9张图片,2张及以上图片时,统一以80*80显示缩略图,原图宽/高小于80的将被拉伸,大于80且非正方形的,显示图片的中间部分;
当只有一张图片时:
宽>高的图片,以120px的固定宽缩小高,即120*X;
宽<高的图片,以120px的固定高缩小宽,即X*120;
宽小于36或缩小后小于36的,将在图片外围添加一个宽为36的可点击热区;
宽小于15或缩小后小于15的,将在图片外围添加一个高为15的可点击热区;
新浪微博缩略图
微博的逻辑相对知乎要复杂一些,特意为宽高差别很大的图片增加热区的设计一定程度解决了图片太小难以点击的尴尬。
最后是百度贴吧,
具体如何缩放不再细说了,摘几点与上述不一样的地方:
最多显示3张缩略图;
只显示1楼的图片;
1楼超过3张图片时,在第一张缩略图左上角显示“共xx张”;
百度贴吧缩略图
最后一点解决了前面知乎遇到的问题:无法知道正文中有多少图片。
案例研究完了,总结一下。回到开头,缩略图无非是要承载这两个功能:1.告知用户正文中有图片;2.提供一定的预览功能。第一点肯定是没有问题的,大多数不好的缩略图设计的问题也就出在第二点。
“预览”又指的是什么呢?它可以包括预览图片信息和预览图片数量等(目前我能想到的也就这两个最有价值,其他的信息价值不大)。知乎和新浪微博对于宽高差距很大的图片的缩略图处理,导致这张缩略图根本无法阅读,基本算是完全丧失了“预览”的功能。对于这一点,微信朋友圈的处理似乎更进一步——如果图片是狭长的,那么缩略图不再完整显示图片,而是只显示该图片的正中间部分。这样一来,该缩略图还是能够被肉眼阅读,起到了部分预览图片的功能,同时也避免了缩略图过于细长而变得难以点击的情况,不用额外加上一个底座热区。
最后值得学习的是百度贴吧的“共xx张”功能,如果知乎也带上这个功能,很多体贴的答主就不必再手动敲“多图预警”了。

在 “缩略图的逻辑” 上有 1 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注