当我们做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、根据版面,结合其他设计原理,可将不同比例的图片搭配使用,这样会使界面更具节奏,让界面更活泼。