UI界面设计中的图片比例

  • A+
所属分类:经验思维

本文来源: 风筝(公众号:海盐社), 共 931 字

当我们做UI界面设计时,往往很纠结图片应该做什么尺寸,实在拿不定主意就找参考,别人怎么做,也跟着做,但是是什么原因并不知道。其实图片设计也有他的比例,按照比例设计,不仅会让界面更统一,同时也方便后期维护。

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

图片比例2:3

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

UI界面设计中的图片比例

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

图片比例3:4

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

UI界面设计中的图片比例

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

图片比例1:1

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

UI界面设计中的图片比例

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

图片比例16:9

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

UI界面设计中的图片比例

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

黄金比例16:10

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

UI界面设计中的图片比例

打破常规比例

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

UI界面设计中的图片比例

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

总结

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

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

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



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: