图片比例，你还不知道如何设定？【升级版】

这篇文章主要是在《你还不知道图片比例该如何设定》做了升级，希望对大家有帮助。

在设计时，我们会注意界面的排版、文字的对比、图标图片的美观，但是图片比例却很容易被大家忽略。一些设计师会通过测量参考优秀APP的尺寸来设定，一些设计师直接凭感觉取个数值即可，并无规范可言。其实图片在设计时需要遵循一定的比例，这样会更符合产品定位以及方便后期维护，通过整理我总结了五种UI中常见的图片比例。

3 : 2

3 : 2这个尺寸其实源于135胶卷的比例，采用它并不是因为黄金比例的缘故，而是由相机的像场大小决定的。

在早期徕卡镜头的成像圈大约为44mm，而胶卷的宽是24mm，因此如果在44mm的圆上截取一块宽为24mm的长方形，那么边长正好为36mm，也就是3 : 2的比例，同时由于徕卡相机的用户群巨大，因此其他相机厂商也逐渐将尺寸统一为3 : 2。

因此在早期图片大多使用3 : 2的尺寸，但是随着移动设备的发展，手机很大程度上替代单反成为主流拍照设备，4 : 3和16 : 9的图片数量占比追上了传统摄影的3 : 2半分天下，目前我们看到一些租房、旅游类APP仍然采用该比例，比如爱彼迎和携程。

爱彼迎和携程的图片大多采用专业设备3 : 2的比例进行拍摄，因此采用该比例还可以最大化的展示图片信息，便于后期的维护。

4 : 3

4 : 3是随着小型相机（例如微单）的出现而诞生的。在追求小型化低成本镜头上，大家遇到最大的问题就是像场不够用了，同时由于当时传感器技术有限，无法把CCD的长度做到很长，因此人们需要尽可能的在小体积上实现更高像素，怎么办？最好的办法就是把比例做的更方，大家知道，所有几何图形中，对角线距离相同，图形越接近圆形，图片占比面积也就越大。

相比于3 : 2的图像来说可展示的信息更多，目前一些美食和图片类APP多采用该4 : 3的比例，比例厨房故事、in。

在图片比例的设定时，大家可能会纠结是选择4 : 3还是3 : 2呢？这里我有一个简单的方法，那就是看产品目标是以内容为主还是以图片主，比如Nice和厨房故事。

由于Nice的产品目标是以展示内容为主，因此它的图片采用3 : 2的方式，其优势就在同样的横屏大小中，可露出更多的图片信息。而厨房故事产品目标是以美食类的图片为主，因此它的图片采用4 : 3的比例，其优势是图片面积占比大，可展示更多的信息。

1 : 1

1 : 1是传统的120胶片画幅，也叫中画幅，因为相机结构和其他一些原因，导致了胶片是方形的，一般为6×6厘米，利用该比例可以将构图归整得简单，突出主被摄体的存在感。

因此该比例多用于需要突出主体的图片，比如电商类以图片促进销售的APP，以及推荐类的图片列表中，比如严选、网易云音乐。

严选等电商类的APP由于图片直接决定类用户的点击量，因此往往回采用1 : 1的比例突出商品主体从而促进销售。网易云音乐的首页推荐也是采用该比例，其优势是采用三列九宫格的布局可以展示更多的产品。

16 : 9

16 : 9根据人体工程学的研究，发现人两只眼睛的视野范围是16 : 9的长方形，所以电视、显示器行业都根据该比例来设计产品，iPhone5是首款屏幕比例为16 : 9的手机。

在设计时，图片的尺寸设定和这些拍摄器材有很大的关系，因此在视频类的 APP 中大多用16 : 9的比例，比如App Store、腾讯视频。

App Store的快照页在4.7英寸的手机（iPhone6、7、8）上均是采用16 : 9的比例，这是由于它们的分辨率是750×1334刚好是16 : 9；腾讯视频的列表图片也是采用该比例，这主要是因为电影、电视都是采用该比例。

3 : 1

3 : 1是聊天气泡框中图片适配的阈值比例，也就是当你发送的图片大于3 : 1时，其缩略图的展示范围仍然是3 : 1的展示范围，多余部分进行隐藏，从而让图片更有识别性。

上图我分别上传了4 : 1的横图和竖图，它们的缩略图展示范围均和3 : 1一致，像聊天界面图片比例往往比较多用，采用该阈值比例可以保证超长图适配之后具有好的识别性，比如微信。

微信在适配时就是采用这一比例，上图是我分别发送3 : 2、2 : 1、3 : 1、4 : 1、8 : 1几个尺寸，可以看到从第三张图开始，后面的几个比例展示效果均是3 : 1，这样可以避免直接适配出现一条极细图片的尴尬。

画重点

大家在设计时需要记住，图片比例在使用时最好有所规律，不要随意的设置尺寸，同时一个APP中图片的比例不易过多，最好不要超过3种，类似功能的图片采用同一比例。

另外在确定采用哪种图片比例时，先确定产品类型和产品目的。比如你的项目是电商类产品、主要目的是为了卖货，那么我们就选择1 : 1的比例可以突出商品主体；或者你是做视频类的APP，那么你的产品展示列表就可以采用16 :9 的比例。总之在选择时需要做到符合产品定位、考虑维护成本，做到有理有据。

参考引文：

既然16:9这么有大片范，过去为什么用3:2？http://h5ip.cn/iLEA