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