其實圖片設計也有他的比例,按照比例設計,不僅會讓界面更統壹,同時也方便後期維護。
根據不同產品屬性不同,用到的比例也有所差距。我們常見的圖片比例有2:3、3:4、1:1、16:9、16:10這幾種。下面分別針對這幾種比例進行分析。
圖片比例2:3
2:3≈0.666,較為靠近黃金比例,在相機拍照的全畫幅尺寸比例即為2:3,其他尺寸均是通過裁切而成,因此在應用中看上去比較舒服。該比例多用於橫圖中,如商品列表、banner圖中。
愛彼迎的界面體驗模塊和詳情頁面的圖片,都是是使用2:3的比例
圖片比例3:4
3:4的設計在界面中也很常見,相比於2:3,圖像更為緊湊,多用於圖片占比重較大的APP中,也多用於產品列表、banner中。
廚房故事相對於愛彼迎,美食需要更多的圖片展示空間。
圖片比例1:1
1:1也是正方形構圖,這種構圖圖片占比比較大,因此多用於產品展示、頭像、特寫展示等場景的APP中,在電商設計中較為常見。
天貓也就是電商類的APP由於圖片直接覺得用戶的點擊量,因此往往會采用1:1的這種可將圖片展示最大化的方式。
圖片比例16:9
16:9主要是電影中的常見構圖,該構圖給人視覺開闊的感受,多用於視頻類APP中。
視頻類APP大多使用這個比例,這是由於電影屏幕的尺寸比例,同時我們的設備大多也是這個比例。
黃金比例16:10
16:10=1.6是最接近黃金分割1:0.618=1.618的,因此現在壹些設計也開始做16:10的設計。
打破常規比例
按照常規比例設計可以讓我們設計更舒服,但是對於壹些對設計把控比較好的,就算不按照比例設計也很出彩,因此我們在成長期可以遵循規則,在上升期也可以打破規則,如果規範得太死,所有界面都差不多了,毫無創意可言。
比如,IN他並沒有按照我上面整理的比例進行設計但是界面照樣統壹舒服,因此我們需要靈活使用規則。
總結
1、根據產品自身特點選擇對應圖片比例。
2、界面設計中,不必拘泥於常規比例,有時候打破常規,會讓界面更具創造力。
3、根據版面,結合其他設計原理,可將不同比例的圖片搭配使用,這樣會使界面更具節奏,讓界面更活潑。