當我們做UI界面設(shè)計時，往往很糾結(jié)圖片應(yīng)該做什么尺寸，實在拿不定主意就找參考，別人怎么做，也跟著做，但是是什么原因并不知道。

其實圖片設(shè)計也有他的比例，按照比例設(shè)計，不僅會讓界面更統(tǒng)一，同時也方便后期維護。

根據(jù)不同產(chǎn)品屬性不同，用到的比例也有所差距。我們常見的圖片比例有2：3、3：4、1：1、16：9、16：10這幾種。下面分別針對這幾種比例進行分析。

圖片比例2：3

2：3≈0.666，較為靠近黃金比例，在相機拍照的全畫幅尺寸比例即為2：3，其他尺寸均是通過裁切而成，因此在應(yīng)用中看上去比較舒服。該比例多用于橫圖中，如商品列表、banner圖中。

愛彼迎的界面體驗?zāi)K和詳情頁面的圖片，都是是使用2:3的比例

圖片比例3：4

3：4的設(shè)計在界面中也很常見，相比于2：3，圖像更為緊湊，多用于圖片占比重較大的APP中，也多用于產(chǎn)品列表、banner中。

廚房故事相對于愛彼迎，美食需要更多的圖片展示空間。

圖片比例1：1

1：1也是正方形構(gòu)圖，這種構(gòu)圖圖片占比比較大，因此多用于產(chǎn)品展示、頭像、特寫展示等場景的APP中，在電商設(shè)計中較為常見。

天貓也就是電商類的APP由于圖片直接覺得用戶的點擊量，因此往往會采用1:1的這種可將圖片展示最大化的方式。

圖片比例16：9

16：9主要是電影中的常見構(gòu)圖，該構(gòu)圖給人視覺開闊的感受，多用于視頻類APP中。

視頻類APP大多使用這個比例，這是由于電影屏幕的尺寸比例，同時我們的設(shè)備大多也是這個比例。

黃金比例16：10

16：10=1.6是最接近黃金分割1：0.618=1.618的，因此現(xiàn)在一些設(shè)計也開始做16：10的設(shè)計。

打破常規(guī)比例

按照常規(guī)比例設(shè)計可以讓我們設(shè)計更舒服，但是對于一些對設(shè)計把控比較好的，就算不按照比例設(shè)計也很出彩，因此我們在成長期可以遵循規(guī)則，在上升期也可以打破規(guī)則，如果規(guī)范得太死，所有界面都差不多了，毫無創(chuàng)意可言。

比如，IN他并沒有按照我上面整理的比例進行設(shè)計但是界面照樣統(tǒng)一舒服，因此我們需要靈活使用規(guī)則。

總結(jié)

1、根據(jù)產(chǎn)品自身特點選擇對應(yīng)圖片比例。

2、界面設(shè)計中，不必拘泥于常規(guī)比例，有時候打破常規(guī)，會讓界面更具創(chuàng)造力。

3、根據(jù)版面，結(jié)合其他設(shè)計原理，可將不同比例的圖片搭配使用，這樣會使界面更具節(jié)奏，讓界面更活潑。