用寫(xiě)文章的思路設(shè)計(jì)banner

5 評(píng)論 17563 瀏覽 165 收藏 11 分鐘

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

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

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

用寫(xiě)作文的思路做banner_0455

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

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

1、信息傳達(dá)

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

快— 一瞥即見(jiàn)

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

未標(biāo)題-1_09

左圖引導(dǎo)線(xiàn)路:一元吃火鍋-火鍋圖案-送流量-看起來(lái)不錯(cuò),進(jìn)去看下~

右圖引導(dǎo)線(xiàn)路:2013-雙肩包-花-99元-這到底在說(shuō)什么呢?再見(jiàn)吧~

2、吸引點(diǎn)擊

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

準(zhǔn)—一針見(jiàn)血

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

狠-刀刀見(jiàn)血

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

未標(biāo)題-1_06

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

未標(biāo)題-1_22

其實(shí)在寫(xiě)作中,我們通過(guò)中心思想告訴讀者道理和內(nèi)涵那么banner就是通過(guò)視覺(jué)告訴受眾賣(mài)什么和怎么賣(mài)!

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

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

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

1、中心思想

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

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

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

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

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

未標(biāo)題-1_13
4、字體的性格

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

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

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

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

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

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

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

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

四、從web到app的移植

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

層次清晰:前景文案+背景素材,色相分開(kāi)。

用戶(hù)_17

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

未標(biāo)題-1_19

未標(biāo)題-1_21

從pc的豎版式-app橫版式-提取關(guān)鍵文案、突出賣(mài)點(diǎn)、優(yōu)化圖片 拒絕擁擠:很多童鞋做完了pc端會(huì)要求再做一份放到app,如果直接縮小尺寸放上去就會(huì)發(fā)現(xiàn)文案其實(shí)就是一團(tuán)模糊的漿糊。

未標(biāo)題-1_12

整體性:banner的整體性、色塊化會(huì)加強(qiáng)app首頁(yè)的模塊感。另外一般的app頂端有狀態(tài)欄和搜索區(qū)域,設(shè)計(jì)時(shí)要考慮減少這部分素材對(duì)視覺(jué)的干擾。位于搜索區(qū)域的背景色要與白色的字保持較大的反差。

未標(biāo)題-1_17

五、一張圖看懂本文

如果說(shuō)文章的三要素是:人物+故事情節(jié)+時(shí)代背景 那么banne三要素就是:文字+色彩+場(chǎng)景素材 思路順序總結(jié):

用寫(xiě)作文的思路做banner_04-15

以寫(xiě)文章的視角分析設(shè)計(jì)banner個(gè)人認(rèn)為一是二者確有很多相同之處。文章通過(guò)文字,表達(dá)思想,設(shè)計(jì)通過(guò)視覺(jué)圖像表達(dá)思想;再者那都是滿(mǎn)滿(mǎn)的回憶,不至于新手童鞋們讀起來(lái)太過(guò)于陌生和畏懼。

 

作者:湖湖 ?途牛UED

本文由 @湖湖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 豁然開(kāi)朗,

    回復(fù)
  2. 學(xué)到了。

    來(lái)自廣東 回復(fù)
  3. 虛構(gòu)

    回復(fù)
  4. 我自己做的小海報(bào)放在朋友圈里效果不好 ? ,看了您寫(xiě)的,覺(jué)得這句很受用:“眼睛離開(kāi)畫(huà)面一會(huì),再次回到畫(huà)面的時(shí)候有沒(méi)有一眼獲取重要信息?!?br /> 感謝!

    來(lái)自法國(guó) 回復(fù)
    1. 很受用

      來(lái)自北京 回復(fù)