如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
想要設計出高質量的banner，首先你得了解什么是banner？banner是網(wǎng)絡廣告中最常見的廣告形式。一般也被人們稱之為網(wǎng)幅廣告、旗幟廣告、橫幅廣告以及大標題廣告等等，它可以是靜態(tài)的圖形，也可以是動畫的圖像。其作用就是為了體現(xiàn)產(chǎn)品的中心意旨，利用鮮明的內容去表達最主要的情感思想, 從而給整個產(chǎn)品起到宣傳的效果！
在如今炙手可熱的互聯(lián)網(wǎng)領域，banner被廣泛運用在各個不同類型的互聯(lián)網(wǎng)平臺間，例如網(wǎng)頁設計，APP設計中都經(jīng)常會使用banner這一載體來展現(xiàn)商家的活動以及的產(chǎn)品等等，因此banner在如今的互聯(lián)網(wǎng)行業(yè)里越來越被很多的公司重視，對設計的要求也就越來越高，那么初入行的設計師該如何設計出高質量的banner呢？
一.首先了解你的banner設計需求
1.確定banner文案的內容，以及將會涉及到的設計素材、包括準備投放在什么平臺以及它的尺寸大小，這些前期的工都是需要我們和需求方溝通確認定奪下來的。因為這些基本的因素如果沒有被確定下來，1.會阻礙設計師的設計靈感！2.在設計的過程中也會給設計師帶來很多不確定的因素，導致大大增加改稿的幾率，所以前期的準備工作我們一定要做好。
2.確定banner是為了實現(xiàn)什么目的而設計
例如需求方給到的信息是「秒殺」，那我們首先需要了解的就是這個秒殺活動針對的產(chǎn)品是哪一類產(chǎn)品，針對的人群又是哪些，這些不同的因素都會影響到設計的整體風格以及使用元素的搭配。同時還需要考慮到需求方希望這個banner，它能起到什么樣的效果以及作用，是引流還是曝光新品又或者是促進交易等等，這些需要和需求方在前期全部確定好，以免在設計的過程中走很多不必要的冤枉路。
二. 確定banner的設計風格
在這里我們可以單獨把設計風格理解成小說里各個人物的性格特點，不同性格特點的人物所散發(fā)出來的魅力也是不相同的。沉著，緊張，外向，陽光，憂傷等等，這些詞語代表著不同的族群，也代表著不同的情緒狀態(tài)。每一種狀態(tài)的表現(xiàn)手法肯定也是不一樣的，下面就簡單介紹幾種常見的風格。
1.典型詞語：冷傲、時尚
這一風格最大的特點就是文案特別精辟。色系基本都以黑白灰為主。拍攝的素材呈現(xiàn)很高逼格的感覺。
2.典型詞語：活力、年輕
這一風格最大的特點就是朝氣蓬勃。整個視覺的色彩感和飽和度，純度都很高。版式的設計也非常的多樣化
3.典型詞語：素雅、安逸
這一風格最大的特點就是大面積的留白。色彩以灰色以及白色系為主，多運用在一些茶品、家居，紡織棉麻用品等等。
4.典型詞語：節(jié)假、促銷
這一風格最大的特點就是熱情洋溢，色彩大多以紅、黃、橙偏多，畫面很少有留白的空間，大多數(shù)都非常豐富飽滿，文字剛硬，有菱有角，視覺的沖擊感很強
5.典型詞語：萌萌噠、甜蜜
這種風格的banner使用點綴和矢量手繪的元素相對于其他類型的banner會較多，整體色感也大多呈現(xiàn)暖色調，給人一種很軟的感覺。
6.典型詞語：智能、科技
這一風格最大的特點就是概念感和未來感特別強烈，整體顏色多用于藍，黑色等偏冷的色系，同時光暈、金屬、線條和點等元素都是這一類型banner常用的點綴方式
三. 搭建banner的構圖框架
確定好需求和設計風格之后，首先要做的就是內容確定一個大概的構圖樣式之后再去豐富版式里的設計細節(jié)
1.左右構圖
這種構圖在所有banner的設計中最為常?也最易掌握，同時也最不易出錯，它分為2種形式，一種是左圖右字，另一種是右圖左字
2.左中右構圖
這種構圖相比較左右構圖形式上會更加豐富些，但是比較難把握。它也分為2種形式，一種是左圖中字右圖，另一種是左字中圖右字，有時我們想要重點突出?物，也可以把文案放在畫面兩側讓人物居中
3.上下構圖
這一類型的banner一般為上字下圖，雖簡潔但卻有很多的局限性
4.以?字居中的構圖
這一類型的banner更多的是為了突出文字的內容，多用于大促一類的banner，同時對字體的設計也非常講究，好的字體設計往往會更加發(fā)揮出這一構圖的優(yōu)勢
5.多角度構圖
多角度構圖最難把握，他屬于一個不規(guī)則的構圖，但卻最具有設計感的層次感。這一類型的構圖豐富的視覺感給人眼前一亮的感覺，也更容易吸引住人的眼球
四.確定配色方案
好的配?一定程度上決定了這個banner質量的好壞，一般運色最基本的方法大致可以分為2種：
一種按照配色規(guī)則進行配色：同色系、類似色、補色系。
1.同色系
同色系也稱為單色，這種色系的搭配在產(chǎn)品本身顏色比較統(tǒng)一的情況下，可以吸取產(chǎn)品上面較近的顏色，再針對產(chǎn)品特性添加一些合適產(chǎn)品調性的輔助元素，讓畫面的整體變得統(tǒng)一和協(xié)調。
2.類似色
類似色 相比較單一的顏色，它的豐富性和可變化性都比較大，在基于banner整體的主色調以后通過添加輔助的與主色相似的顏色，使整個畫面變得豐富活躍起來同時這些配色方式也相對比較好掌握一些
3.補色系
所謂補色，就是在色相環(huán)上相距180°的色相，如紅色與青色、黃色與藍色、綠色與品紅色等色組。補色之間的調和搭配能夠給畫面帶來華麗、跳躍、濃郁的視覺美感，然而，若補色以高純度、高明度、等面積搭配，會產(chǎn)生比對比色組更強烈的刺激感，使人無法接受。所以相對于類似色，往往我們利用補色做設計時會考慮補色之間的面積比例，純度比例，明度比例和空間間隔的比例，平衡畫面之間的視覺感！
另一種就是將畫面做反差的設計
一般我們會把素材變成黑色感的照片，在然后根據(jù)文案內容和整體banner的氣質選擇一個合適的顏色，已達到突出畫面視覺點的目的，讓主要的東西可以凸顯出來，保證一個視覺沖擊感。
五.字體設計
設計banner時候，千萬不要把一行文字直接放上去，這樣會使你的banner看起來特別的愚蠢，整體的視覺效果也會看上去很無趣、很僵硬。因此我們需要給不同的banner做不同的文字設計，去吸引我們的用戶。下面就教大家?guī)讉€字體設計的方法。(注意商用字體的版權，這很重要）
1.選擇合適的系統(tǒng)字體
好的系統(tǒng)字體有時候也可以讓banner更具有觀賞性，但前提是字體的氣質必須和banner的整體視覺氣質統(tǒng)一，例如素雅、安逸的banner風格就不適合用粗獷硬朗的字體，而宋體和細黑體這一類字體則表達了文藝、品質的氣質。
2.文字排列的傾斜與斜切
有時候設計banner，需要更有視覺沖擊力的表現(xiàn)方式，我們可以嘗試將文字進行傾斜或斜切透視等處理，因為普通的文字排列形式有時候過于平穩(wěn)，過于有矩，反而凸顯不出來整個banner的動感和層次感。
3.在相對獨立的區(qū)域中表現(xiàn)文字
在背景顏色比較復雜，或者背景有較多產(chǎn)品需要呈現(xiàn)的時候，我們可以嘗試將文字放在一個相對獨立的區(qū)域或色塊中，這樣更便于文字閱讀，也可以突出主題內容。
4.字體變形的魅力設計banner的時候，設計師經(jīng)常用到文字變形，將原有的系統(tǒng)字體進行2次加工設計出一種新的字體。這種變形的手法可以大大提升文字的視覺性和趣味性，讓整個畫面的氣氛被烘托得相得益彰。
5.中國風文字
有時候我們設計一些歷史文化題材的banner，或者中國傳統(tǒng)節(jié)日的banner，經(jīng)常會用到一些中國風的元素，例如毛筆字、粉筆字、鋼筆字，書法字等，而這些元素我們也可以把它運用在banner的設計當中，讓banner的特性感更加的明顯
六.畫面內元素的點綴
點綴的元素常見于點、線、面或者一些手繪矢量元素，在確定基本成形的banner后適當?shù)募尤脒@種出彩的小元素會讓畫面的設計細節(jié)感和層次感更加豐富，可以提升整個畫面一定程度上的品質感和細膩入微的美
備注（本分享中所有的圖只用作于文字說明，不產(chǎn)生任何商業(yè)用途）
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。