想知道圖片的比例該如何設(shè)定嗎？那進來看看吧~

大家在做UI設(shè)計時，是否遇到過圖片不知道如何設(shè)定比例的情況？我在做的時候就遇到過這個問題。

我在網(wǎng)上找了很多資料，同時通過體驗一些主流的APP，我歸納了一些常見的圖片比例，主要有：3 : 2、4 : 3、1 : 1、16 : 9這四種。

那么在設(shè)計時圖片比例又是如何設(shè)定的呢？

下面針對這四種比例具體為大家分析下：

一、3：2

3 : 2這個尺寸，其實源于135膠卷的比例，采用這一比例并不是因為它是黃金比例，而是由相機的像場大小決定的。

在早期徠卡鏡頭的成像圈大約為44mm，而膠卷的寬是24mm，因此如果在44mm的圓上截取一塊寬為24mm的長方形，那么邊長正好為36mm，也就是3比2的比例,。

同時由于徠卡幾乎是行業(yè)內(nèi)一家獨大的公司，因此其他品牌相機也紛紛效仿這一比例。

但是隨著移動設(shè)備的發(fā)展，手機很大程度上替代單反成為主流拍照設(shè)備，4 : 3和16 : 9的圖片數(shù)量占比追上了傳統(tǒng)攝影的3 : 2，半分天下，不過目前國外很多的APP還是用這一比例。

愛彼迎的熱門目的地和出游去處模塊，典型采用了3 : 2的比例。

大家可能想問：為什么圖片尺寸有單數(shù)？

其實這里是根據(jù)屏幕的（寬度-間距）/圖片數(shù)=圖片寬度，因此這個圖片不是固定的，而是等比例縮放的。高度根據(jù)比例在進行計算，有時候計算出來的數(shù)可能并不是一個整數(shù)，因此需要我們自己去選擇一個整數(shù)來運用，其他的尺寸比例也是一樣的。

二、4：3

4 比3是隨著攝影的發(fā)展，小型相機(例如微單)的出現(xiàn)而誕生的。

這是由于小型化低成本鏡頭上，大家最大的問題是像場不夠用了。而且由于當時傳感器技術(shù)有限，無法把CCD的長度做到很長，因此人們需要盡可能得在小體積上實現(xiàn)更高像素。

怎么辦？

最好的辦法就是把比例做的更方！大家知道，所有幾何圖形中，對角線距離相同，圖形越接近圓形，圖片占比面積也就越大。

在具體圖片設(shè)定中，圖片是選擇3 : 2還是4 : 3，在做設(shè)計時很容易混淆，這里我有一個簡單的方法讓你快速做決定，那就是看產(chǎn)品的目標定位——也就是看他是以內(nèi)容為主，還是以圖片主導(dǎo)的APP。

下面我分別從橫圖和豎圖的情況進行對比分析。

看上圖我們知道，同屏的情況下4 : 3圖片占比更大，因此在同屏顯示中這一比例相對于3 : 2展示的內(nèi)容就較少。

因此在設(shè)計中，我們也可以從產(chǎn)品目的定位來判斷，是以內(nèi)容為主還是以圖片為主。

例如：in大多為女性用戶，是以圖片為主的APP，因此他采用了4 : 3的比例。而Nice雖然和in類似，不過其產(chǎn)品目的定位是以內(nèi)容為主，因此他選擇可展示更多內(nèi)容的3 : 2的比例。

這里我用Nice和廚房故事來比較，Nice我們知道以展示內(nèi)容為主，因此他的圖片大多采用3 : 2的方式。其優(yōu)勢就是在同樣的橫屏大小中，這一比例可露出更多的圖片信息。

而廚房故事主要是以美食類的圖片為主，因此為了圖片更好的展示，因此他的圖片大多采用4 : 3的比例。

三、1：1

1 : 1是傳統(tǒng)的120膠片畫幅，也叫大畫副。因為相機結(jié)構(gòu)和其他一些原因，導(dǎo)致了膠片是方形的，一般為6×6厘米。

利用此比例更容易將構(gòu)圖歸整得簡單，突出主被攝體的存在感。

因此，這一比例多用于需要突出主體的圖片，比如：電商類以圖片促進銷售的APP，以及一些產(chǎn)品圖片，頭像等。

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

閑魚的產(chǎn)品圖由于多為用戶上傳，圖片的比例或者質(zhì)量都不統(tǒng)一，因此也多采用1 : 1比例進行設(shè)計，另外頭像往往也是以1:1的比例設(shè)計。

四、16：9

16 : 9根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人兩只眼睛的視野范圍是一個長寬比例為16 : 9的長方形，所以電視、顯示器行業(yè)根據(jù)這個的黃金比例尺寸設(shè)計產(chǎn)品。

在設(shè)計時，圖片的尺寸設(shè)定和這些拍攝器材有很大的關(guān)系，因此在視頻類的APP中大多用16 : 9的比例。

騰訊視頻他的視頻播放頁面，以及封面都是采用統(tǒng)一的16：9的比例?；旧夏壳拔覀兛吹降囊曨l，均是采用這種尺寸，因此這個目前在比例的設(shè)定上還沒有出現(xiàn)過問題。

五、總結(jié)

• 3 : 2由于他是由專業(yè)的相機拍攝而成，對設(shè)計的要求也相對較高，因此一般用于相對較專業(yè)的APP中。同時在產(chǎn)品定位上以內(nèi)容為主的APP，圖片相對占比較小，可承載更多的內(nèi)容。
• 4 : 3是由小型相機拍攝而成，這類相機用戶群體較大，因此目前還是有很多APP在使用，同時其圖片占比較3：2大，因此這一比例主要是產(chǎn)品以圖片為主的APP。
• 1：1 利用此比例，更容易將構(gòu)圖歸整得簡單，突出主被攝體的存在感。因此多用于電商類，需要用圖片引導(dǎo)用戶購買等情況，以及產(chǎn)品圖和頭像的設(shè)計。
• 16 : 9隨著移動設(shè)備的發(fā)展，16：9越來越普及，目前多運用在視頻的比例設(shè)計上。

參考：圖片比率進化史：3:2、4:3、16:9的區(qū)別

作者：風(fēng)箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。

本文由 @海鹽社 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議