Banner本身是橫幅的意思。在App中,banner是壹個非常重要的資源位,是壹個頁面中最吸引眼球的地方,也是流量較大的位置。
Banner通常采用圖文結合的表現方式,用於展示重點內容,也常被作為廣告資源販售。
1._範ǜ縷蕩
根據banner的位置確認更新頻次。通常流量越大的banner更新頻次越高。盡量做到日更,最多不應超過三天。
如果banner的流量很差,運營辛辛苦苦做的上去的內容沒有流量,就需要積極和產品經理反饋溝通,從banner的位置設計、展示入口方面進行改善。
2.確定欄目
我給我運營的產品banner設置了如下三類欄目(1)優質內容展示(2)用戶互動專題(3)重點推廣的產品/商品。
每周的banner展示盡量涵蓋以上三個欄目,以保持內容的靈活性和新鮮度。提前壹周準備好banner內容並確定排期。
3.通過排期表進行管理
1.統壹設計模板
下圖是某酒店App的Banner位今天展示的三幅banner
雖然每壹幅的圖象都有精心設計過,但看起來很亂。這種風格我不喜歡。Banner呈現的內容和視覺效果,影響著整個產品的調性。所以我認為大部分的banner應該有統壹的設計風格。
比如以下產品的banner,基本采用了統壹模板。
以上app都對banner做了模板化設計,整體看起來更加劃壹和清爽。有了統壹模板後,也不需要每次更新banner都請設計去做圖了,運營可自行修改文案和配圖即可。
所以,常規欄目的banner設計模板很重要。需要和設計溝通,確認以下:
(1)banner的整體視覺風格,選擇背景圖的色域範圍和圖片風格(這裏壹定要註意圖片的版權問題)
(2)文字的排版方式,確認字體、字號、顏色和位置。
有了這個模板做基本保證,運營可以快速的做出合適的banner圖了。
另外還需要註意的是:
(1)定期更換模板,避免審美疲勞。
(2)除固定模板以外,也接受多樣的設計方式。仍要註意設計風格的統壹。
如何用PS軟件設計出優秀的banner圖設計banner主要有以下幾個重點:
(1)顏色搭配壹定要搭配,視覺上壹定要協調。
(2)元素要簡單、突出、明了,突出設計主題,避免復雜、繁冗的元素。
(3)空間規劃上要合理,避免元素之間過密過疏的現象。
(4)銜接、過度自然而有張力,避免突兀現象。
具體的設計還要看設計者對設計主題的把握,還有對設計的見解,以及過往經驗,加強這些方面的鍛煉並將它們結合在壹起,就可以設計出比較吸引人的作品。
Banner制作的套路分析以下內容是我在制作banner時的簡略分析,以及平日素材的積累和應對突發任務時的思考。
作為設計師,在工作中我們可能會遇到下午給方案,下班之前出banner的需求。也許我們對於制作banner的方法輕車熟路,但突發的情況總會讓我們措手不及。
措手不及的結果就會導致我們設計產出物的質量有所下降。畢竟,合理的時間保障對於設計來說還是非常重要的。
下面提到的快速制作banner的方法,需要我們平時的積累,以及對設計軟件合理的運用。
banner的結構大致分為三層:背景層、裝飾層、文案層。背景層會確立整體banner的風格或配色;裝飾層起到點綴作用,並可以控制整體版式的平衡;文案層是核心內容的展示,以展示主要文字為主。三層級互相組合搭配,從而支撐起整個banner。
banner的常見版式:①左右排版、②居中排版。
受到文案字數限制、所選搭配元素、產品的屬性等原因,版式的選擇需要根據實際情況進行判斷。
常見的banner構圖樣式組合有:平鋪樣式、環繞樣式、傾斜樣式、斜切樣式、放射樣式、isometric樣式、三角樣式等。
背景層、裝飾層、文案層,三者之間有著密切的關系。
比如:背景層設計的過於復雜,那麽內容文字的處理就要傾向於簡潔,反之亦然;而裝飾層也並不是必須要存在於每壹個banner當中。當背景層中內容已經很豐富的時候,裝飾的內容可以刪去。
當背景為純色時,需要適當的添加點綴物。而且可以對文字進行處理增加吸引力,避免整體的單調。
背景的種類大致分為適量圖形、字體、顏色和圖片四種。
圖片包括寫實圖片和卡通圖片等;顏色分為純色或漸變;字體放大也可以當做背景;矢量圖包含的組合有很多。簡單的圓形、方形。甚至是點、線的組合都可以運用在背景中。每當節日臨近,也可以匹配壹些節日風格的適量圖形進行設計。
裝飾的點綴應該是錦上添花的。不能盲目的因為視覺效果而添加過多的裝飾,這樣反而會誤導用戶,造成混亂的感覺。不利於文案內容的傳達。
適當的點綴和修飾,可以讓頁面避免單調;也可以使banner的元素之間達到平衡,視覺效果更加和諧。同時,文字的運用也是裝飾點綴的關鍵。
根據產品屬性的不同,舉例說明:金融類的banner可以使用較小或較細的字體進行搭配。同時,使用點狀分布排列營造高端感;電商類的banner可以使用漸變的圓形或線條進行修飾。目的是搭建出歡快的、促銷的感覺,吸引用戶點擊。
①banner的設計當中,文案字數的多少也至關重要。過多字數或復雜的內容非但不能讓用戶清楚文案要表達的事情,反而會讓用戶感到麻煩。我明白交給設計師內容的小夥伴想把活動解釋清楚的初衷。但在註重用戶體驗的當下,人們的耐心顯然是無法接受過多文字的圖片。
因此,當我們接收到的文案字數過多的話,要第壹時間果斷提出自己的想法。文案中的賣點和痛點是最重要的兩個部分,其他內容都可以省略。
同時,過多的字數也是我們設計當中的困難。較小尺寸的圖片,可能單單放幾行文字就已經無法再安排其他的布局設計了。
②字體方面主要分為襯線字體和非襯線字體。襯線字體的筆畫有修飾,且粗細不同,參考宋體;而非襯線字體就比較橫平豎直,筆畫粗細相同。襯線字體大多用在古典風格或民族風格的banner設計當中。非襯線字體適用的範圍就比較廣,可以說絕大多數的banner中都可以運用。
③文案分為主標題和副標題。主標題自然是最精簡也是最搶眼的部分,而副標題可以是主標題的解釋說明,也可以是接主標題的新文案。區別搭配有助於用戶第壹時間分辨出文案的主次,讓頁面更加協調。
好的配色需要壹定的配色基礎以及日常練習的積累。但是當遇到特殊狀況時,顯然並不會在顏色上留給我們有太多的時間。所以,我們就需要壹些輔助的方式來完成顏色的搭配工作。
這裏我推薦兩個網站:①
/
②
第壹個網站會推薦許多不錯的顏色搭配,其中有不少是我個人比較喜歡的;第二個網站是materialdesign官網中的color部分。其中的Colorpalettes在我們輸入顏色之後自動生成搭配。
有了這兩個網站的配色加持,會大大縮短我們設計banner的時間。
當banner設計完成後,我們的工作可能並沒有就此結束。在設計APP產品之初,如果我們在不同頁面的很多地方都設計了不同尺寸的,便於運營做推廣的banner區域的話,那麽後期我們在修改這些尺寸的時候就會非常頭疼。可能壹張圖我們需要改成七八張banner。並且有的圖片的尺寸並沒有規律可言。
因此,我們在設計APP之初,就要想到這樣的情況。在設計banner時,設定好統壹比例,方便後期更改;同時,要運用photoshop中的智能對象等功能,快速修改尺寸。
要在極短的時間內設計出效果不錯的banner,除非能力強悍或是胸有成竹,我能想到的方法就在於平日的“積累”。
文中提到的背景、裝飾,都是碎片化可拼接的內容。我們在工作或平日裏可以設計出足夠的素材,那麽在時間緊迫的時候進行拼接就好。
文字字體方面我們可以分析出平時所給文案中的壹些“套路”;分析裏面總是會提到的幾個字或者是相似度很高的標題,來進行字體的設計。
無論是簡單也好、復雜也好,把平日裏制作的元素素材進行整理歸納,建立自己的素材庫。這樣,在面對措手不及的任務時才不至於慌亂。花瓣或者Eagle就是兩個不錯的素材整理工具。
提到臨摹,我們就不得不提到另壹個詞“抄襲”。其實,抄襲的認定是見仁見智的。每個人都有自己的認定界限。而我能想到的避免抄襲的方法,就是“刻意改變”。以下面的小人為例。
提到臨摹,我們就不得不提到另壹個詞“抄襲”。其實,抄襲的認定是見仁見智的。每個人都有自己的認定界限。而我能想到的避免抄襲的方法,就是“刻意改變”。以下面的小人為例。
和日常的元素搜集整理壹樣,模板也需要我們提前進行準備。我們需要找準產品定位,和往期banner的規律為其量身設計模板。可以參考原型圖的形式制作黑白排版樣式。
上文中提到的尺寸問題,我們可以用置入鏈接智能對象的方法,來快速批量修改banner的尺寸。
①篩選出尺寸相似或形狀相似的banner;
②找出關鍵banner尺寸,以此作為基準作圖;
③banner中的文案文字的上下高度範圍,要在眾多尺寸中的最小高度banner的尺寸範圍內。
④在基準尺寸圖中進行設計。打開PS其他尺寸的文件,選擇文件--置入鏈接的智能對象--調節大小。這樣我要需要調整時,只需要修改基準banner圖壹張就夠了。
作為設計師而言,我相信都不願意碰到要求臨時出圖的情況出現。但我們也需要為這種情況而做準備,以確保在時間緊迫的時候來保證自己設計產出物的質量。因此,日常的收集和積累就尤為重要。