來人人都是産品經理【起點學院】，BAT實戰派産品總監手把手系統帶你學産品、學運營。

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

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

一、為什麼要設計banner

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

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

1、信息傳達

其實就是告訴别人你是幹什麼的。對于電商來說就是告訴受衆是賣什麼的。要求信息正确、真實有效（新法規）、傳達視覺的路線清晰明了。

快— 一瞥即見

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

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

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

2、吸引點擊

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

準—一針見血

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

狠－刀刀見血

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

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

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

3、商業價值

互聯網有句老話，隻要你能實現用戶價值，就一定能帶來商業價值！ 話題大，内容多， 以後專項論述。

二、怎麼樣設計banner

1、中心思想

一般來說拿到一個需求建議不要立即就做，你需要分析項目的目标受衆，客戶的年齡，性别，收入，職業，位置和生活方式。 了解你的受衆是确保你傳達正确信息的關鍵。然後就是想怎麼樣才能突出想表達的主題，這就需要一個中心思想。既是我們想要表現的主題。

2、合适的風格

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

3、合理的構圖

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

4、字體的性格

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

5、背景素材的呼應搭建

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

6、最後的調整

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

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

三、設計的一般原則

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

四、從web到app的移植

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

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

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

從pc的豎版式－app橫版式－提取關鍵文案、突出賣點、優化圖片 拒絕擁擠：很多童鞋做完了pc端會要求再做一份放到app，如果直接縮小尺寸放上去就會發現文案其實就是一團模糊的漿糊。

整體性：banner的整體性、色塊化會加強app首頁的模塊感。另外一般的app頂端有狀态欄和搜索區域，設計時要考慮減少這部分素材對視覺的幹擾。位于搜索區域的背景色要與白色的字保持較大的反差。

五、一張圖看懂本文

如果說文章的三要素是：人物＋故事情節＋時代背景 那麼banne三要素就是：文字＋色彩＋場景素材 思路順序總結：

以寫文章的視角分析設計banner個人認為一是二者确有很多相同之處。文章通過文字，表達思想，設計通過視覺圖像表達思想；再者那都是滿滿的回憶，不至于新手童鞋們讀起來太過于陌生和畏懼。

作者：湖湖 途牛UED

本文由 @湖湖 原創發布于人人都是産品經理。未經許可，禁止轉載。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部