Banner 設計尺寸由原來通用的 4：3 的比例大小逐漸縮小至 5：3 或 5：4 的比例尺寸大?。ň纳嵛迦脒x取近似值）。

?我們以線上產(chǎn)品為例進行分析測量，如美團、轉轉、淘寶、網(wǎng)易云音樂的 Banne r比例：

以上我們均采用四舍五入取近似值的方式，我們可以發(fā)現(xiàn) Banner 區(qū)域不同程度的縮小，在頁面中所占的比例較少，節(jié)省出更多的空間以便其他業(yè)務模塊的使用。

1. Banner變小的原因主要有兩點

首先：是產(chǎn)品結構的日益成熟，業(yè)務增多或者結構變更，需要在首頁第一屏展示更多內(nèi)容。

其次：視覺上有助于保持頁面平衡，縮小 Banner 有效的避免了頭重腳輕的情況發(fā)生。

?

三、自身優(yōu)勢

1. 構圖簡單

這三種構圖的最大優(yōu)點就是：構圖簡單！接下來我們逐一對三種構圖形式進行分析：

對稱式構圖：通過對畫面的平均分割能夠保證畫面的平衡，對稱式構圖給人簡潔、有力、穩(wěn)固的視覺感受。

居中式構圖：居中式構圖是將主體放置畫面的中心進行構圖。這種構圖方式這種構圖方式的最大優(yōu)點就在于主體突出、明確，而且畫面容易取得左右平衡的效果。

?左右式構圖：左右構圖一般參考黃金比例分割線的原理，并根據(jù)實際狀況進行調(diào)整，將文字標題元素和主體物按照比例分割進行位置安排。

2. 空間利用率高

這三種構圖形式對空間的利用比較高，無論是對稱式構圖、居中式構圖還是左右式構圖都采用了 X、Y 軸的直線排布，盡量避免了斜線線或曲線構圖的方式。

直線排布可以有效的節(jié)省空間，避免產(chǎn)生多余的空間縫隙；而斜線排布或者曲線排布無可避免的會產(chǎn)生多余的空間縫隙，無法充分使用。

3. 能夠快速復用

構圖簡單，易于修改，我們通過修改主體物和標題信息，可以快速復用到其他運營活動中，大大節(jié)省了設計成本，提高工作效率。

例如網(wǎng)易云音樂和斗魚 Banner 系列：

通過圖例，我們可以發(fā)現(xiàn)三種構圖形式均可以快速復用到其他運營互動中，這樣做大大節(jié)省了設計成本，提高了工作效率。

四、其它的構圖形式為什么不適合

1. 空間小，不適合結構復雜的構圖

由于空間小，在排版的時候我們更多的要考慮到用戶對標題信息的識別度，采用直線排布的構圖可以節(jié)省空間，能夠盡可能的放大字體；如果采用斜線或曲線排布的構圖會產(chǎn)生多余的空間縫隙，會導致標題文字壓縮減小，降低信息識別度。

例如對角線構圖和曲線構圖，在小面積的情況下很難適用，因為我們需要讓用戶盡可能的獲取信息，所以我們需要將信息在 banner 中盡可能放大，這樣一來很難形成對角線和曲線動勢，所以不適用于這類對空間要求成本高的構圖。

2. 不符合用戶的閱讀習慣

由于 Banner 面積小，選用直線排布符合用戶自左到右、自上而下的閱讀習慣，能夠幫助用戶快速獲得信息。而曲線排布和斜線排布需要用戶耗費一定的精力去識別信息，學習成本高，不適合小面積的構圖。

五、總結

1. 由于產(chǎn)品結構體系的日益成熟，構圖形式也更加追求實際效用，最終篩選出3種最為實用的構圖的構圖形式，分別是對稱式構圖、局中構圖、左右構圖。
2. 導致 Banner 構圖形式由多變少的主要原因：首頁結構變換，Banner區(qū)域變??；三種構圖的自身優(yōu)勢，構圖結構簡單、空間利用率高、能夠快速復用。
3. 其它構圖不合適的主要原因：構體結構復雜，不夠簡單；Banner 空間小，不適合斜線和曲線排布。

參考鏈接

《版式設計從入門到精通》讀書筆記

詳解設計構圖技巧！如何穩(wěn)中求勝？

本文由 @姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議。