當前位置:
首頁 > 設計 > Banner設計這些事兒!

Banner設計這些事兒!

文/袁希晨

Banner由於其表現方式直接、簡單被廣泛應用於移動手機端和網頁端界面設計中,Banner作為信息傳播的關鍵環節,使命不再只是單純地表達信息,而是需要在快節奏的網路環境中迅速抓住用戶眼球,提高用戶點擊率,要讓 Banner在短時間內表現出效果,其視覺表現形式就顯得尤為重要。

Banner有以下幾個特點:

像素受限。Banner應用於軟體首頁,需要滿足不同手機不同尺寸的要求,所以設計師在設計Banner的時候往往受到尺寸像素的限制。

短暫性。Banner一般多用於促銷廣告,現今Banner往往只在特定一天或者兩天出現。

內容受限。每張Banner所要傳達的內容不一樣,這就要求設計師在設計的時候,充分考慮到需求方要傳達的信息,不能任由自己意願發揮。

時尚雜誌風。此類型的Banner用雜誌常用的版面,力求通過雜誌的風格,營造出高端大氣的感覺。這類型的 Banner都有共同的特點:大標題、模特。例如:Banner右邊放模特,左邊放文字文字大小之間形成鮮明的對比,突出文案的中心內容,文字排版和雜誌排版基本相同,整體畫面呈現出高貴的感覺。

復古風。現出復古的氛圍。在Banner設計中,傳統元素的應用主要是漢字的應用和傳統圖案的應用,在設計濃厚中國風色彩的 Banner時,往往採用此類風格。

清新簡約風。清新簡約風的風格就是自然、清新,畫面清爽和唯美。此風格在家裝和家居中常見,色調上多採用綠色、白色等自然色調,給人清麗、透亮的感覺。

炫酷風。這種風格多用深色背景,再帶有一些質感的元素和光影效果處理。在客戶端大型促銷類Banner,這種風格應用較多。

好的Banner設計必須要讓用戶在短時間內產生共鳴和興趣,讓用戶在第一時間能迅速抓住中心思想。所以Banner的整體布局排版必須遵循一定的規律,符合主題要求,以免混淆用戶的第一視覺,可遵循以下原則:

對齊。Banner設計中相關內容要對齊。這樣方便用戶實現快速移動。讓用戶在瀏覽網頁時。一眼看到重要的信息。

聚攏原則。用戶在觀看畫面時更容易被聚集的東西所吸引,設計師在設計的時候可以將內容劃分為幾個區域,將相關信息都集中在一個區域里,合理的布局排列和停頓節奏,有利於用戶抓住信息的重點。

留白原則。留白又稱「余玉」,畫面上適當的留白,使畫面不阻塞、不凝滯,彷彿天地間之靈氣自由往來其中,給人無限遐想。在 Banner設計中亦是如此,畫面留出一定空間,既可減少 Banner的壓迫感,又可引導讀者視線,突出重點內容。

降噪原則。Banner的本身就是一個小型的廣告海報設計,受大小像素限制,不能任由設計師發揮,不宜顏色過多、字體過多、圖形過多。這些都分散了用戶的注意力,給用戶帶來了閱讀障礙。

重複原則。設計師在排版時,需要注意整個設計的一致性。

對比。在設計中,強烈的對比會讓人視覺甚至心靈上產生衝擊,從而形成用戶記憶,有利於設計的傳播與轉化。Banner設計中,加大不同元素的視覺差異,既增加了Banner的活潑,又突出了視覺重點,方便用戶一眼瀏覽到重要的信息。

文字排版。Banner中的文字信息傳達應與口語表述相似,需要抑揚頓挫、重點突出地進行。在文字排版上,要求重點突出,大小粗細錯落有致。字與字之間的結構、布局、留白、組織、呼應等要疏密有序。字體保持在兩種左右,加入一些跟內容有關聯的元素或者形狀,可以很好地表達整個設計的情緒。

文字設計。Banner的文字信息是其表達中心思想的靈魂,如果在設計文字的時候全部使用自帶字體,會使 Banner顯得太過生硬,不富有情感,應該更多地採用字體變形,重新組合。通過不同的筆觸粗細和寬高比例,展現 Banner的視覺衝擊力和活力。

作為信息的載體,色彩不僅僅是一個獨立的主體,也承載著信息的傳遞。每種色彩都會因為色相、明度、純度的不同表現出不同的色彩感,不同的色彩有不同的情感和象徵性,所以它們傳遞給用戶的感知信息也會有所差異。例如:紅色是引人注目的色彩,具有強烈的感染力,它是火的色、血的色,象徵著熱情、喜慶和幸福;藍色則是天空的顏,象徵著和平、安靜、純潔和理智,另一方面又有消極、冷淡、保守等意味。

Banner的色彩選擇上,電器類 Banner主色調主要應用藍色和黑色,藍色給人科技感,而黑色又給人以神秘的感覺;護膚品類Banner常採用綠色和白色,綠色像大自然的顏色,被視為生命的顏色,給用戶帶來清新自然的感覺;商品類 Banner則經常選用暖色調色系,暖色系給人溫暖,誘人的感覺,讓用戶有點擊的慾望;而在一些奢侈品 Banner中,設計師會運用金色和銀色,這兩種顏色象徵著富貴和財富,潛移默化中體現產品的檔次;食品類 Banner會使用橙色,橙色是豐收的感覺,勾起用戶的味蕾。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!


請您繼續閱讀更多來自 設計智造 的精彩文章:

淺顯易懂的創意腦洞
漢字「造形」技法!你會了嗎?