Banner設計為什麼鍾愛這3種構圖形式
構圖設計種類豐富，為什麼 Banner 的構圖形式確趨向於單一？現在我們最常用的 3種構圖形式分別是對稱式構圖、局中構圖、左右構圖，今天我們就分享一下為什麼 Banner 的構圖形式趨向於這三種構圖。
一、目錄
- 最常見的三種構圖形式
- Banner 區域變小
- 自身優勢
- 為什麼其它構圖不合適
- 總結
二、最常見的三種構圖形式
我們最常見的三種構圖方式： 對稱式構圖、居中式構圖、左右構圖。
我們可以仔細觀察現在線上 app 中的 banner 設計，多數採用這三種構圖形式。我們以網易雲音樂首頁一些系列的 Banner 為例：
大家可能費解，在平面視覺設計中構圖方式多種多樣，為什麼在 banner 設計的時候就剩下這三種？其他的為什麼不適用？
二、Banner 區域變小
導致構圖形式可選範圍縮小的最直接原因就是： banner區域變小！ 由於產品結構的變化，業務的成熟與增多，首頁第一屏需要呈現更多的“業務”，所以我們不得到不縮小“Banner”的面積，以節省出更大的空間來服務其他業務的使用。
Banner 設計尺寸由原來通用的 4：3 的比例大小逐漸縮小至 5：3 或 5：4 的比例尺寸大小（均四捨五入選取近似值）。
我們以線上產品為例進行分析測量，如美團、轉轉、淘寶、網易雲音樂的 Banne r比例：
以上我們均採用四捨五入取近似值的方式，我們可以發現 Banner 區域不同程度的縮小，在頁面中所佔的比例較少，節省出更多的空間以便其他業務模組的使用。
1. Banner變小的原因主要有兩點
首先：是產品結構的日益成熟，業務增多或者結構變更，需要在首頁第一屏展示更多內容。
其次：視覺上有助於保持頁面平衡，縮小 Banner 有效的避免了頭重腳輕的情況發生。
三、自身優勢
1. 構圖簡單
這三種構圖的最大優點就是：構圖簡單！接下來我們逐一對三種構圖形式進行分析：
對稱式構圖：通過對畫面的平均分割能夠保證畫面的平衡，對稱式構圖給人簡潔、有力、穩固的視覺感受。
居中式構圖：居中式構圖是將主體放置畫面的中心進行構圖。這種構圖方式這種構圖方式的最大優點就在於主體突出、明確，而且畫面容易取得左右平衡的效果。
左右式構圖：左右構圖一般參考黃金比例分割線的原理，並根據實際狀況進行調整，將文字標題元素和主體物按照比例分割進行位置安排。
2. 空間利用率高
這三種構圖形式對空間的利用比較高，無論是對稱式構圖、居中式構圖還是左右式構圖都採用了 X、Y 軸的直線排布，儘量避免了斜線線或曲線構圖的方式。
直線排布可以有效的節省空間，避免產生多餘的空間縫隙；而斜線排布或者曲線排布無可避免的會產生多餘的空間縫隙，無法充分使用。
3. 能夠快速複用
構圖簡單，易於修改，我們通過修改主體物和標題資訊，可以快速複用到其他運營活動中，大大節省了設計成本，提高工作效率。
例如網易雲音樂和鬥魚 Banner 系列：
通過圖例，我們可以發現三種構圖形式均可以快速複用到其他運營互動中，這樣做大大節省了設計成本，提高了工作效率。
四、其它的構圖形式為什麼不適合
1. 空間小，不適合結構複雜的構圖
由於空間小，在排版的時候我們更多的要考慮到使用者對標題資訊的識別度，採用直線排布的構圖可以節省空間，能夠儘可能的放大字型；如果採用斜線或曲線排布的構圖會產生多餘的空間縫隙，會導致標題文字壓縮減小，降低資訊識別度。
例如對角線構圖和曲線構圖，在小面積的情況下很難適用，因為我們需要讓使用者儘可能的獲取資訊，所以我們需要將資訊在 banner 中儘可能放大，這樣一來很難形成對角線和曲線動勢，所以不適用於這類對空間要求成本高的構圖。
2. 不符合使用者的閱讀習慣
由於 Banner 面積小，選用直線排布符合使用者自左到右、自上而下的閱讀習慣，能夠幫助使用者快速獲得資訊。而曲線排布和斜線排布需要使用者耗費一定的精力去識別資訊，學習成本高，不適合小面積的構圖。
五、總結
- 由於產品結構體系的日益成熟，構圖形式也更加追求實際效用，最終篩選出3種最為實用的構圖的構圖形式，分別是對稱式構圖、局中構圖、左右構圖。
- 導致 Banner 構圖形式由多變少的主要原因：首頁結構變換，Banner區域變小；三種構圖的自身優勢，構圖結構簡單、空間利用率高、能夠快速複用。
- 其它構圖不合適的主要原因：構體結構複雜，不夠簡單；Banner 空間小，不適合斜線和曲線排布。
參考連結
ofollow,noindex">《版式設計從入門到精通》讀書筆記
本文由 @姜正 原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。