工作中接觸了一些banner設(shè)計(jì)的工作，借著本次整理思路的機(jī)會(huì)順便和大家分享下，不周之處歡迎溝通指正。

從場(chǎng)景上來說，pc－室內(nèi)－長(zhǎng)時(shí)間－相對(duì)沉溺，移動(dòng)端－隨時(shí)隨地－隨時(shí)可能離開－碎片化。在設(shè)計(jì)banner的時(shí)候使用場(chǎng)景也是必須要考慮的因素之一，本文主要就移動(dòng)端的場(chǎng)景淺談筆者的一些個(gè)人見解。 相信每一篇文章的命題都有一定的時(shí)代意義，做banner也是一樣，擁有自己的使命，下面先了解下：

一、為什么要設(shè)計(jì)banner

不以轉(zhuǎn)化為目的的banenr都是耍流氓。

粗俗點(diǎn)概括上圖就是：一看二點(diǎn)三買。 正常來說就是通過真實(shí)有效的信息傳達(dá)來吸引用戶點(diǎn)擊購(gòu)買繼而不斷的實(shí)現(xiàn)商業(yè)價(jià)值。

1、信息傳達(dá)

其實(shí)就是告訴別人你是干什么的。對(duì)于電商來說就是告訴受眾是賣什么的。要求信息正確、真實(shí)有效（新法規(guī)）、傳達(dá)視覺的路線清晰明了。

快— 一瞥即見

強(qiáng)調(diào)第一眼，鮮明的視覺中心。如果一眼望去都沒能明白這個(gè)圖片在訴說什么，很多情況下受眾就會(huì)轉(zhuǎn)身離開。 想要一眼有所得，就需要有清晰的視覺層次，換個(gè)角度說你希望受眾第一眼看什么，接下來看什么，然后是什么……一般來說用戶在一個(gè)畫面的停留也就幾秒鐘，所以建議內(nèi)容不要太多不然很難抓到重點(diǎn)而錯(cuò)失良機(jī)。 左圖引導(dǎo)線路：一元吃火鍋－火鍋圖案－送流量－看起來不錯(cuò)，進(jìn)去看下～ 右圖引導(dǎo)線路：2013－雙肩包－花－99元－這到底在說什么呢？再見吧～

左圖引導(dǎo)線路：一元吃火鍋－火鍋圖案－送流量－看起來不錯(cuò)，進(jìn)去看下～

右圖引導(dǎo)線路：2013－雙肩包－花－99元－這到底在說什么呢？再見吧～

2、吸引點(diǎn)擊

首先漂亮的圖片不一定就是好banner。就像是好看的界面不一定是好產(chǎn)品一樣（不能跑題）。 什么樣的banner才能引得用戶去點(diǎn)呢？

準(zhǔn)—一針見血

了解用戶群，迎合他們的期待，摸清楚他們的興趣點(diǎn)。 越來越多的人選擇在互聯(lián)網(wǎng)上購(gòu)物多半是足不出戶，還可以得到更多的優(yōu)惠或者服務(wù)。那就放出優(yōu)惠和服務(wù)，喊出口號(hào)來。

狠－刀刀見血

戳中痛點(diǎn)的文案。 如果上面是喊出了口號(hào)，這里就是要口號(hào)響亮！如果打的就是低價(jià)、折扣、滿減、服務(wù)，請(qǐng)讓他們夠醒目，一瞥既見！

另一種事件營(yíng)銷類，組織、策劃利用新聞熱點(diǎn)、人物、事件，吸引媒體或者消費(fèi)者的注意和興趣，以提升企業(yè)名譽(yù)、服務(wù)、銷售的方式。（如下圖）

其實(shí)在寫作中，我們通過中心思想告訴讀者道理和內(nèi)涵那么banner就是通過視覺告訴受眾賣什么和怎么賣！

3、商業(yè)價(jià)值

互聯(lián)網(wǎng)有句老話，只要你能實(shí)現(xiàn)用戶價(jià)值，就一定能帶來商業(yè)價(jià)值！ 話題大，內(nèi)容多， 以后專項(xiàng)論述。

二、怎么樣設(shè)計(jì)banner

1、中心思想

一般來說拿到一個(gè)需求建議不要立即就做，你需要分析項(xiàng)目的目標(biāo)受眾，客戶的年齡，性別，收入，職業(yè)，位置和生活方式。 了解你的受眾是確保你傳達(dá)正確信息的關(guān)鍵。然后就是想怎么樣才能突出想表達(dá)的主題，這就需要一個(gè)中心思想。既是我們想要表現(xiàn)的主題。

2、合適的風(fēng)格

文章中為了表達(dá)中心思想會(huì)運(yùn)用擬人、排比、對(duì)比等修飾手法，在設(shè)計(jì)中為了突出主題，也會(huì)運(yùn)用一些視覺表現(xiàn)手法： 民族風(fēng)－古典的、復(fù)古的的、文化底蘊(yùn)的； 扁平風(fēng)－活潑的、簡(jiǎn)單的； 寫實(shí)風(fēng)－場(chǎng)景再現(xiàn)，增加真實(shí)和代入感； 小清新－色彩清爽，氣氛輕盈； 手繪風(fēng)－個(gè)性，隨意，趣味性； 舞臺(tái)風(fēng)－大促或者頒獎(jiǎng)的鎂光燈聚集感； 不管是寫作還是設(shè)計(jì)banner目的其實(shí)都是一樣，都是為了更好的烘托主題，表達(dá)出想要的氣氛、抒發(fā)的情感。

3、合理的構(gòu)圖

設(shè)定好風(fēng)格之后，開始考慮畫面的結(jié)構(gòu)，這個(gè)多數(shù)會(huì)根據(jù)使用場(chǎng)景的寬比決定，越來越多的電商首頁輪播位是比較扁的，所以在布局這類圖片時(shí)不建議太復(fù)雜，文案盡量醒目。 下面是最常用的三種結(jié)構(gòu)：左右，左中右、居中。

4、字體的性格

字體性格的把握就像我們文章中人物性格的塑造。鮮明的性格反應(yīng)筆者不同的立場(chǎng)觀點(diǎn)。 我們可以通過提問的方式找到答案：什么樣的字體適合這個(gè)主題？字體變形是為了表達(dá)什么？變形后好識(shí)別嗎？受眾看到這種字體會(huì)想到什么？字體大小是否合適？…… 由于使用場(chǎng)景和閱讀習(xí)慣，要求一級(jí)文案明顯，賣點(diǎn)加強(qiáng)。

5、背景素材的呼應(yīng)搭建

不要為了裝飾而裝飾，所有的裝飾都要有意義！ 素材是為了襯托主題，增加聯(lián)系，豐富血肉。 文章中有動(dòng)靜結(jié)合的手法，設(shè)計(jì)中也有虛實(shí)相間的處理。 大家肯定會(huì)經(jīng)常看到很多banner上有飄落的樹葉、飛鳥、花瓣之類的有的沒的小元素來增加畫面的生氣，作文中叫做動(dòng)靜結(jié)合。 細(xì)心的朋友還會(huì)發(fā)現(xiàn)有些景物的模糊處理。焦點(diǎn)是清晰的，周邊是模糊的。這樣就有了遠(yuǎn)近、虛實(shí)關(guān)系，作文中叫詳細(xì)和粗略描寫。 ……

6、最后的調(diào)整

從整體到局部，再由局部到整體。 常用的二個(gè)方法：

1. 眼睛離開畫面一會(huì)，再次回到畫面的時(shí)候有沒有一眼獲取重要信息。
2. 黑白模式下對(duì)比黑白灰關(guān)系。

三、設(shè)計(jì)的一般原則

1. 以內(nèi)容為主，裝飾為輔，拱托的氣氛與中心思想一致；
2. 視覺風(fēng)格統(tǒng)一；
3. 視覺層次分明；
4. 構(gòu)圖合理；

四、從web到app的移植

上面提到很多，這里再?gòu)?qiáng)調(diào)下，希望對(duì)新入手做移動(dòng)端的童鞋有所幫助。 巴掌大的手機(jī)，占據(jù)冰上一角的banner，想想看確實(shí)容不下web端上的眾多素材、特效、樣式，必須做減法。少就是多，一樣適用在這里。

層次清晰：前景文案＋背景素材，色相分開。

文案2次提?。?/strong>pc端由于空間較大，文案相對(duì)會(huì)多些，移植到app文案需要2次提取。