图片比率进化史

2015-05-20 本文已影响1288人 LynetteL

Fibonacci Blocks

常用比率

195x年开始的信息时代，最显著的特征是模拟技术转向数字技术，平面设计也从以纸为媒介逐渐由电子设备主导，颗粒度单位同样发生变化，但这对设计师而言影响并不那么大，问题在于比率。

Aspect ratio即宽高比，这里只讨论最常见的三大类：摄影、视频和显示设备。

摄影常用比率有：1:1、5:4、4:3、3:2，其中135胶卷的比率为3:2。近年来因为消费型相机的普及16:9也变得常见。

视频常用比率有：4:3、16:9、21:9；传统电视屏幕比率为4:3，高清电视则为16:9，2009年后出现的21:9超宽频电视比率与影院宽屏比率2.39:1最为接近。

显示器常用比率有：5:4、4:3、16:10、16:9，高于4:3的皆被称为宽屏。2008年之后，显示器逐渐从4:3和16:10转向16:9。以下为显示器常见分辨率：1024x768（4:3）、1280x1024（5:4）、1280x800（16:10）、1680x1050（16:10）、1920x1080（16:9）。

从小到大合并同类项后则有：1:1、5:4、4:3、3:2、16:10、16:9、21:9，对比如下；

不同比率比较

他们怎么展示图片

综合看互联网流量大户，使用1:1是一个较明显的趋势，不管是社交媒体还是线上购物。诚然，1:1的处理在跨多平台的今天是相对简易且一致的。

不同网站比率对比

值得注意的是，纵向比例（portrait）相对少见，但由于fashion类天生的特性，即服装多由模特穿着在身进行展示，越来越多的电子商务类产品青睐于使用瀑布流（Pinterest style waterfall）结构，使得纵向的图片显示也多了起来。

而在视频类产品中，16:9处于王者地位，一是HD的普及，二是易于兼容21:9甚至更大的超宽屏比率。

又见黄金分割

题图的费波那契黄金矩形（Fibonacci Blocks）揭示了个人对1:1在移动平台上成为主流的另一个主观论点。随着智能手机显示屏往16:9靠拢，图文混排页面采用黄金矩形既平衡了图片和文字两者的主次关系，同时也具形式美感。

图片的补偿处理

Youtube

非1:1比率的处理，一类是用card layout进行比率补偿，比如youtube；

Farfetch

另一类，图片比率为纵向4:3的如farfetch，没有采用底色填充（如etsy）的做法，将上下图片的轮播（carousel）直接展示出来。

小结

被显示物和显示设备互为因果。Flickr的一组数据显示，随着iPhone很大程度上替代单反成为主流拍照设备，4:3和16:9的图片数量占比追上了传统摄影的3:2，半分天下。跨平台的互联网产品一直试图在pc和无线间一碗水端平，但现实很残酷，成熟产品的两个平台必然是此消彼长，用户时间资源有限。Mobile First的逻辑是，保证移动端展示操作最优化的基础上再考虑如何移植并延展到更大屏幕上。在先有pc再有移动端和反向行之的产品间，可以看到有趣的对比。就和生物一样，有着利益关系的不同物种倾向于趋同进化。

Next Part：Waterfall Effect

Fin.