Banner設計的視覺導向原則分析

來自專欄 UI設計師成長營

?

• Banner的布局方式

常見的Banner布局方式有五種，以下分別給出大致樣式：

兩欄式：

三欄式：

組合式：

一體式：

對角線式：

以上幾種布局方式不分好壞，對於不同的主題、素材和文案可以自行選用適合的方案。

• 視覺組成部分

雖然Banner的風格種類眾多，但是就目前來看，廣大受眾的偏好和心理動線是大致相同的，人們往往會被靚麗的色彩和醒目的標題所吸引，這就為我們突出主題，吸引受眾提供了指導。

Banner（海報）的視覺組成部分有三大塊內容：

• 第一視覺（主視覺）

第一視覺在整個視覺導向中起吸引作用，而吸引受眾眼球的方法主要有誇張、擬人、寓言故事、性和特效五種。

• 第二視覺

在第一視覺起到吸引作用之後，第二視覺用來告訴受眾「這是什麼」，常見的表現方法是文案。

• 第三視覺

第三視覺的作用是「告訴你我是誰，怎麼找我」，其表現方法同第二視覺，一般也是文案。

註：以上三種視覺在大部分情況下都適用，但在少數海報中，會出現沒有第二視覺或第三視覺的現象。

以這張Banner為例，它的第一視覺是一個場景，場景中一位男士打扮比較休閑、大方，我們第一反應是還挺好看的，那麼他是誰呢，坐在這裡做什麼。

接著我們會去尋找答案，隨即發現了第二視覺，也就是Banner右側的文字，他告訴我們這是男裝促銷廣告，有什麼樣的優惠

最後關注到這是什麼品牌，於是找到了第三視覺，即左上角的品牌LOGO。

整個Banner視覺導向很完整，能夠清楚地表達主旨。

• 色彩搭配

在製作Banner的過程中，我們常常會因為配色的問題而糾結很久，反覆比對。配色需要參考Banner的主題，我們都有一些思維慣性，例如看到藍色會想到海，心情比較平靜，看到黃色會想到火，會興奮等等，這說明顏色是有心理屬性的。

上圖是以大數據為主題的Banner,選用了深藍色作為主色，中調偏暗，很契合「大數據」的感覺，給人以較強的科技感。

對比非常明顯，此類Banner通常適用於電商平台輪播，節奏快，更新快，加上促銷的主題，更適合採用紅色、橙色等較為明快的顏色。一方面暖色更容易吸引眼球，另一方面這種積極的色調更容易激發人們購買的慾望，從而在有限的時間內實現最大的點擊量。

• 總結

在接到Banner設計的任務後，我們需要充分了解受眾的心理導向，考慮到布局、視覺組成、色彩搭配等問題，將統一的元素恰如其分地組合起來，才能夠做出一個較為認可的作品。這需要我們不斷賞析他人作品，取精華、棄糟粕，同時善於審視自己的作品，才能日益進步。