@胡桃子:大家在做信息流設計的時候,是否遇到過圖片不知道如何設定比例的情況?我在做的時候就遇到過這個問題。
查看一些資料,體驗一些主流的APP,發現無論是圖片流還是文字流,線上圖片最流行的無非是?1:1、4:3、3:2、16:9 這幾種。很多設計師直接用這個比例,不去了解它們背后的緣由,很難去運用它們。
這里主要分析移動端的設計,設計前期應該如何規定圖片的展示比例,其實最關鍵的決定要素是列表圖片的應用場景和來源用戶。
一、1:1?
1:1是傳統的120膠片畫幅,也叫大畫副。因為相機結構和其他一些原因,導致了膠片是方形的,一般為6×6厘米。
利用此比例更容易將構圖歸整得簡單,突出主被攝體的存在感。并且正方形對于非1:1圖片的適配也最為容易,能夠找到一個普適的適配方案來最大化地保留主體關鍵信息,頭像往往也是以1:1的比例設計。
1:1的圖像展示往往是希望圖像在橫向與縱向上展示的信息盡量完整化,布局盡量規整化,圖片直接決定用戶的點擊量,所以我們能看到大部分電商平臺展示商品圖片都是遵循1:1比例。
?二、4:3 & 3:2?
3:2是由專業的相機拍攝而成,4:3是由小型相機(手機、微單等)拍攝而成。
大家知道,所有幾何圖形中,對角線距離相同,圖形越接近圓形,圖片占比面積也就越大。同相機像素下,4:3的面積會比3:2的面積大。
目前市場上的主流手機攝影的照片尺寸一般都為4:3。如果要展示的是UGC內容,圖片主要來源是平臺用戶,那么用戶最可能的圖像來源渠道就是手機攝影了。這時候設置圖片比例為4:3是比較合理的。
比如58同城,房東大部分的圖像可能都是由手機拍攝的,所以設置為4:3對于用戶圖像的適配裁剪損失最小。
馬蜂窩和愛彼迎是兩款主打旅行衍生業務的產品,大多數生產內容的用戶可能在旅行過程中對于攝影都有所涉獵。所以UGC圖像來源的渠道很可能是相機,對于相機設備輸出的圖像,采用3:2的比例對用戶圖像的適配裁剪損失便是最小的了。
?三、16:9??
16:9是一個非常典型的視頻比例尺寸了,根據人體工程學的研究,發現人兩只眼睛的視野范圍是一個長寬比例為16 : 9的長方形,一般視頻類列表會根據這個的黃金比例尺寸設計產品,例如愛奇藝、優酷這樣的視頻類產品,基本都是采用16:9的尺寸來展示圖像。
?總結?
3:2由于它是由專業的相機拍攝而成,對設計的要求也相對較高,因此一般用于相對較專業的APP中。同時在產品定位上以內容為主的APP,圖片相對占比較小,可承載更多的內容。
4:3是由小型相機拍攝而成,這類相機用戶群體較大,因此目前還是有很多APP在使用,同時其圖片占比較3:2大,因此這一比例主要是產品以圖片為主的APP。
1:1 利用此比例,更容易將構圖歸整得簡單,突出主被攝體的存在感。因此多用于電商類,需要用圖片引導用戶購買等情況,以及產品圖和頭像的設計。
16:9隨著移動設備的發展,16:9越來越普及,目前多運用在視頻的比例設計上。
當列表展示的是PGC內容,圖像來源主要是由團隊內部運營,那么圖像比例就可以自由一些,上傳的圖片可以得到內部的把控。
也不是說圖像的比例一定要遵循以上這幾種,只能說這幾個比例覆蓋了大多數的圖像場景。
希望上述內容能有所幫助~~
原文地址:胡謅青年(公眾號)
作者:胡桃子
轉載請注明:學UI網 » Feed流 – 圖片比例設計(二)