起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識你還不知道圖片比例該如何設定？
想知道圖片的比例該如何設定嗎？那進來看看吧~
大家在做UI設計時，是否遇到過圖片不知道如何設定比例的情況？我在做的時候就遇到過這個問題。
我在網上找了很多資料，同時通過體驗一些主流的APP，我歸納了一些常見的圖片比例，主要有：3 : 2、4 : 3、1 : 1、16 : 9這四種。
那么在設計時圖片比例又是如何設定的呢？
下面針對這四種比例具體為大家分析下：
一、3：2
3 : 2這個尺寸，其實源于135膠卷的比例，采用這一比例并不是因為它是黃金比例，而是由相機的像場大小決定的。
在早期徠卡鏡頭的成像圈大約為44mm，而膠卷的寬是24mm，因此如果在44mm的圓上截取一塊寬為24mm的長方形，那么邊長正好為36mm，也就是3比2的比例,。
同時由于徠卡幾乎是行業內一家獨大的公司，因此其他品牌相機也紛紛效仿這一比例。
但是隨著移動設備的發展，手機很大程度上替代單反成為主流拍照設備，4 : 3和16 : 9的圖片數量占比追上了傳統攝影的3 : 2，半分天下，不過目前國外很多的APP還是用這一比例。
愛彼迎的熱門目的地和出游去處模塊，典型采用了3 : 2的比例。
大家可能想問：為什么圖片尺寸有單數？
其實這里是根據屏幕的（寬度-間距）/圖片數=圖片寬度，因此這個圖片不是固定的，而是等比例縮放的。高度根據比例在進行計算，有時候計算出來的數可能并不是一個整數，因此需要我們自己去選擇一個整數來運用，其他的尺寸比例也是一樣的。
二、4：3
4 比3是隨著攝影的發展，小型相機(例如微單)的出現而誕生的。
這是由于小型化低成本鏡頭上，大家最大的問題是像場不夠用了。而且由于當時傳感器技術有限，無法把CCD的長度做到很長，因此人們需要盡可能得在小體積上實現更高像素。
怎么辦？
最好的辦法就是把比例做的更方！大家知道，所有幾何圖形中，對角線距離相同，圖形越接近圓形，圖片占比面積也就越大。
在具體圖片設定中，圖片是選擇3 : 2還是4 : 3，在做設計時很容易混淆，這里我有一個簡單的方法讓你快速做決定，那就是看產品的目標定位——也就是看他是以內容為主，還是以圖片主導的APP。
下面我分別從橫圖和豎圖的情況進行對比分析。
看上圖我們知道，同屏的情況下4 : 3圖片占比更大，因此在同屏顯示中這一比例相對于3 : 2展示的內容就較少。
因此在設計中，我們也可以從產品目的定位來判斷，是以內容為主還是以圖片為主。
例如：in大多為女性用戶，是以圖片為主的APP，因此他采用了4 : 3的比例。而Nice雖然和in類似，不過其產品目的定位是以內容為主，因此他選擇可展示更多內容的3 : 2的比例。
這里我用Nice和廚房故事來比較，Nice我們知道以展示內容為主，因此他的圖片大多采用3 : 2的方式。其優勢就是在同樣的橫屏大小中，這一比例可露出更多的圖片信息。
而廚房故事主要是以美食類的圖片為主，因此為了圖片更好的展示，因此他的圖片大多采用4 : 3的比例。
三、1：1
1 : 1是傳統的120膠片畫幅，也叫大畫副。因為相機結構和其他一些原因，導致了膠片是方形的，一般為6×6厘米。
利用此比例更容易將構圖歸整得簡單，突出主被攝體的存在感。
因此，這一比例多用于需要突出主體的圖片，比如：電商類以圖片促進銷售的APP，以及一些產品圖片，頭像等。
天貓——也就是電商類的APP，由于圖片直接決定用戶的點擊量，因此往往會采用1 : 1的這種，可將圖片展示最大化的方式。
閑魚的產品圖由于多為用戶上傳，圖片的比例或者質量都不統一，因此也多采用1 : 1比例進行設計，另外頭像往往也是以1:1的比例設計。
四、16：9
16 : 9根據人體工程學的研究，發現人兩只眼睛的視野范圍是一個長寬比例為16 : 9的長方形，所以電視、顯示器行業根據這個的黃金比例尺寸設計產品。
在設計時，圖片的尺寸設定和這些拍攝器材有很大的關系，因此在視頻類的APP中大多用16 : 9的比例。
騰訊視頻他的視頻播放頁面，以及封面都是采用統一的16：9的比例?；旧夏壳拔覀兛吹降囊曨l，均是采用這種尺寸，因此這個目前在比例的設定上還沒有出現過問題。
五、總結
- 3 : 2由于他是由專業的相機拍攝而成，對設計的要求也相對較高，因此一般用于相對較專業的APP中。同時在產品定位上以內容為主的APP，圖片相對占比較小，可承載更多的內容。
- 4 : 3是由小型相機拍攝而成，這類相機用戶群體較大，因此目前還是有很多APP在使用，同時其圖片占比較3：2大，因此這一比例主要是產品以圖片為主的APP。
- 1：1 利用此比例，更容易將構圖歸整得簡單，突出主被攝體的存在感。因此多用于電商類，需要用圖片引導用戶購買等情況，以及產品圖和頭像的設計。
- 16 : 9隨著移動設備的發展，16：9越來越普及，目前多運用在視頻的比例設計上。
作者：風箏，做個正能量的小太陽，不拖延，不偷懶，勵志為孩子做個好榜樣，公眾號：海鹽社。
本文由 @海鹽社 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
謝謝分享！
謝謝，幫到我了！