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

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

一、為什么要設計banner

不以轉化為目的的banenr都是耍流氓。

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

1、信息傳達

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

快— 一瞥即見

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

左圖引導線路：一元吃火鍋－火鍋圖案－送流量－看起來不錯，進去看下～

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

2、吸引點擊

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

準—一針見血

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

狠－刀刀見血

戳中痛點的文案。 如果上面是喊出了口號，這里就是要口號響亮！如果打的就是低價、折扣、滿減、服務，請讓他們夠醒目，一瞥既見！

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

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

3、商業(yè)價值

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

二、怎么樣設計banner

1、中心思想

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

2、合適的風格

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

3、合理的構圖

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

4、字體的性格

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

5、背景素材的呼應搭建

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

6、最后的調整

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

1. 眼睛離開畫面一會，再次回到畫面的時候有沒有一眼獲取重要信息。
2. 黑白模式下對比黑白灰關系。

三、設計的一般原則

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

四、從web到app的移植

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

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

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