## ##

        你還不知道圖片比例應該如何設定?

        2018-04-04 14:59:29 閱讀 262910 本文來源: 風箏 海鹽社
        分享至:

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

        之后我去網上找了很多資料,同時通過體驗一些主流的APP,我歸納了一些常見的圖片比例,主要有3: 2、4 : 3、1 : 1、16 : 9這四種,那么在設計時圖片比例又是如何設定的呢?下面我具體為大家分析下。

        那么在設計時圖片比例又是如何設定的呢?下面針對這四種比例具體為大家分析下。


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

        在早期徠卡鏡頭的成像圈大約為44mm,而膠卷的寬是24mm,因此如果在44mm的圓上截取一塊寬為24mm的長方形,那么邊長正好為36mm,也就是3比2的比例,同時由于徠卡幾乎是行業內一家獨大的公司,因此其他品牌相機也紛紛效仿這一比例。

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

        愛彼迎的熱門目的地和出游去處模塊,典型采用了3 : 2的比例,大家可能想問為什么圖片尺寸有單數,其實這里是根據屏幕的(寬度-間距)/圖片數=圖片寬度,因此這個圖片不是固定的而是等比例縮放的,高度根據比例在進行計算,有時候計算出來的數可能并不是一個整數,因此需要我們自己去選擇一個整數來運用。其他的尺寸比例也是一樣的。


        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是傳統的120膠片畫幅,也叫大畫副,因為相機結構和其他一些原因,導致了膠片是方形的,一般為6×6厘米。利用此比例更容易將構圖歸整得簡單,突出主被攝體的存在感。

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

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

        閑魚的產品圖由于多為用戶上傳,圖片的比例或者質量都不統一,因此也多采用1 : 1比例進行設計,另外頭像往往也是以1:1的比例設計。


        16 : 9根據人體工程學的研究,發現人兩只眼睛的視野范圍是一個長寬比例為16 : 9的長方形,所以電視、顯示器行業根據這個的黃金比例尺寸設計產品。

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

        騰訊視頻他的視頻播放頁面,以及封面都是采用統一的16:9的比例,基本上目前我們看到的視頻均是采用這種尺寸,因此這個目前在比例的設定上還沒有出現過問題。


        3 : 2由于他是由專業的相機拍攝而成,對設計的要求也相對較高,因此一般用于相對較專業的APP中,同時在產品定位上以內容為主的APP,圖片相對占比較小,可承載更多的內容。

        4 : 3是由小型相機拍攝而成,這類相機用戶群體較大,因此目前還是有很多APP在使用,同時其圖片占比較3:2大,因此這一比例主要是產品以圖片為主的APP。

        1:1 利用此比例更容易將構圖歸整得簡單,突出主被攝體的存在感。因此多用于電商類,需要用圖片引導用戶購買等情況,以及產品圖和頭像的設計。

        16 : 9隨著移動設備的發展,16:9越來越普及,目前多運用在視頻的比例設計上。 


        作者:風箏,做個正能量的小太陽,不拖延,不偷懶,勵志為孩子做個好榜樣。
        責任編輯:大同

        認可我的創作,就鼓勵一下吧

        0人打賞
        分享至:

        聯系客服

        故障反饋