起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識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 空間小，不適合斜線和曲線排布。
參考鏈接
本文由 @姜正 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
