UI界面中图片的常用比例

我们在做UI界面设计的时候,经常会对图片应该是多大尺寸感到困惑。我们实在下不了决心,找参考。其他人也会效仿,但我们不知道为什么。

其实画面设计也有他的比重。按照比例设计,不仅让界面更加统一,也方便后期维护。

根据产品属性不同,使用的比例也不同。我们常见的画面比例是2: 3,3: 4,1: 1,16: 9,16: 10。下面分别针对这些比例进行分析。

图像比例2: 3

2: 3 ≈ 0.666,接近黄金分割比例。相机拍摄中的全画幅尺寸比例为2: 3,其他尺寸都被裁掉了,应用起来看起来更舒服。这种比率多用于水平图表,如商品列表和横幅图。

Airbnb的界面体验模块和详情页的图片都采用了2:3的比例。

图像比例3: 4

3: 4的设计在界面上也很常见。相比2: 3,图像更紧凑,多用于图像比例较大的app,也用于产品列表和banner。

与Airbnb相比,厨房的故事需要更多的图片展示空间来摆放食物。

图片比例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: 18。

打破常规比例

按照常规的尺度设计可以让我们的设计更加舒适,但是对于那些更擅长设计控制的人来说,即使不按照尺度设计,他们也是辉煌的,所以我们可以在成长期循规蹈矩,在上升期打破常规。如果标准太死,所有界面都差不多,一点创意都没有。

比如在he中没有按照我上面编的比例来设计,但是界面还是统一舒适的,需要灵活运用规则。

摘要

1.根据产品自身特点选择相应的画面比例。

2.在界面设计上,不必拘泥于常规尺度,有时候打破常规会让界面更有创意。

3.根据版面等设计原则,不同比例的图片可以搭配使用,会让界面更有节奏感,更生动。