UI界面中的图片常见比例

当我们做UI界面设计时，往往很纠结图片应该做什么尺寸，实在拿不定主意就找参考，别人怎么做，也跟着做，但是是什么原因并不知道。

其实图片设计也有他的比例，按照比例设计，不仅会让界面更统一，同时也方便后期维护。

根据不同产品属性不同，用到的比例也有所差距。我们常见的图片比例有2：3、3：4、1：1、16：9、16：10这几种。下面分别针对这几种比例进行分析。

图片比例2：3

2：3≈0.666，较为靠近黄金比例，在相机拍照的全画幅尺寸比例即为2：3，其他尺寸均是通过裁切而成，因此在应用中看上去比较舒服。该比例多用于横图中，如商品列表、banner图中。

爱彼迎的界面体验模块和详情页面的图片，都是是使用2:3的比例

图片比例3：4

3：4的设计在界面中也很常见，相比于2：3，图像更为紧凑，多用于图片占比重较大的APP中，也多用于产品列表、banner中。

厨房故事相对于爱彼迎，美食需要更多的图片展示空间。

图片比例1：1

1：1也是正方形构图，这种构图图片占比比较大，因此多用于产品展示、头像、特写展示等场景的APP中，在电商设计中较为常见。

天猫也就是电商类的APP由于图片直接觉得用户的点击量，因此往往会采用1:1的这种可将图片展示最大化的方式。

图片比例16：9

16：9主要是电影中的常见构图，该构图给人视觉开阔的感受，多用于视频类APP中。

视频类APP大多使用这个比例，这是由于电影屏幕的尺寸比例，同时我们的设备大多也是这个比例。

黄金比例16：10

16：10=1.6是最接近黄金分割1：0.618=1.618的，因此现在一些设计也开始做16：10的设计。

打破常规比例

按照常规比例设计可以让我们设计更舒服，但是对于一些对设计把控比较好的，就算不按照比例设计也很出彩，因此我们在成长期可以遵循规则，在上升期也可以打破规则，如果规范得太死，所有界面都差不多了，毫无创意可言。

比如，IN他并没有按照我上面整理的比例进行设计但是界面照样统一舒服，因此我们需要灵活使用规则。

总结

1、根据产品自身特点选择对应图片比例。

2、界面设计中，不必拘泥于常规比例，有时候打破常规，会让界面更具创造力。

3、根据版面，结合其他设计原理，可将不同比例的图片搭配使用，这样会使界面更具节奏，让界面更活泼。