前實(shí)習(xí)公司是一個(gè)生鮮B2B類電商公司，運(yùn)營(yíng)需求較多，尤其是APP的banner設(shè)計(jì)，本篇文章我將自己制作電商類banner常用的方法與之前設(shè)計(jì)的具有代表性的banner結(jié)合做一個(gè)階段性的思考總結(jié)。
一、設(shè)計(jì)前
為啥要做banner？當(dāng)然是因?yàn)橛行枨罄?。banner需求往往來(lái)源于運(yùn)營(yíng)同學(xué)，為了配合某個(gè)運(yùn)營(yíng)活動(dòng)而做的一個(gè)面向用戶的展示圖片。banner一般是一個(gè)活動(dòng)頁(yè)面的入口，假如這個(gè)banner能夠清晰表達(dá)活動(dòng)主題并足以吸引用戶點(diǎn)擊時(shí)，我們這個(gè)設(shè)計(jì)就算成功一大半了。
那么，接到一個(gè)需求時(shí)，是不是就可以馬上打開PS開干啦？當(dāng)然也不是，一般我們需要問清楚以下幾點(diǎn)具體內(nèi)容：
1. banner的作用。
每個(gè)運(yùn)營(yíng)活動(dòng)都有相應(yīng)的業(yè)務(wù)需求，我們只有清楚運(yùn)營(yíng)活動(dòng)的目的，才能知道設(shè)計(jì)banner的作用是什么，而不是自嗨似的為“自我”而設(shè)計(jì)。
2. PC端 or 移動(dòng)端？
這個(gè)不用多說(shuō)，至少在尺寸上兩者相差甚大。
3. 投放位置。
不同的位置也會(huì)影響到banner的設(shè)計(jì)效果。
4. 所需文案。
Banner文案要精煉地表達(dá)出活動(dòng)主題，收到來(lái)自運(yùn)營(yíng)同學(xué)的文案后，能夠根據(jù)活動(dòng)主題對(duì)文案進(jìn)行審核甚至進(jìn)一步地修飾，也是設(shè)計(jì)師的能力體現(xiàn)。
5. 有無(wú)產(chǎn)品素材。
根據(jù)運(yùn)營(yíng)需求的類別，對(duì)新上線商品作廣告宣傳的話，一般需要運(yùn)營(yíng)同學(xué)提供相應(yīng)商品素材圖。如果是對(duì)某個(gè)新上線活動(dòng)做通知提醒的話，設(shè)計(jì)師們一般就要尋找素材或者自己制作素材了。
6. 上線時(shí)間。
抑制設(shè)計(jì)師們發(fā)揮想象力創(chuàng)作的一大敵人就是時(shí)間，創(chuàng)意很美好，落地很一般，唯有緊盯著deadline，才能夠與time達(dá)成共贏。
我們都知道，其實(shí)無(wú)論任何需求，在開干前肯定是要先與需求方溝通清楚再做，乃至于反向推動(dòng)需求方思考問題，這樣既降低了返工率，也能讓banner在上線后達(dá)到預(yù)定的業(yè)務(wù)效果。溝通，溝通，溝通！何樂而不為？
二、設(shè)計(jì)中
到了激動(dòng)人心正式打開Photoshop開干的時(shí)候了，設(shè)計(jì)的過程也是有據(jù)可循的，下面將結(jié)合本人的制作與應(yīng)遵循的要點(diǎn)進(jìn)行思路分享。
1. banner大?。▽捀咴O(shè)定）。
應(yīng)用里一般都會(huì)有專門放置banner的位置，而且寬高是設(shè)定好了的，不同的位置預(yù)留的寬高是不一樣的。我便是按照設(shè)定好的寬高進(jìn)行設(shè)計(jì)。
圖一是放在商品列表頁(yè)的頭圖banner，設(shè)計(jì)時(shí)定好寬高為750*328；
圖二為“我的”頁(yè)面里放置活動(dòng)宣傳廣告，由于空間有限，定好的寬高為750*200；
當(dāng)然以上banner的大小只是我所遇到的，大小設(shè)定具體要看活動(dòng)重要級(jí)別、以及頁(yè)面空間等來(lái)制定，同時(shí)也有比例指導(dǎo)，常見的有16:9、5:3等。
2. 圖文版式。
常見的banner版式最常見的是圖文左右排版、文字居中排版。筆者接觸最多的是圖文左右排版，這次分享下這兩種的設(shè)計(jì)思路。
我們知道選擇哪種排版方式要看banner所要傳達(dá)的內(nèi)容主要是什么。圖左文右或者文左圖右，一般是考慮到這符合人們從左至右的閱讀習(xí)慣，能讓用戶快速接受信息。
若是商品廣告，重點(diǎn)在于商品圖的話，通常是圖在左，右邊搭配文案主標(biāo)或副標(biāo)題，起到說(shuō)明商品的作用（如圖一）。
文左圖右的情況通常用于宣傳某個(gè)運(yùn)營(yíng)活動(dòng)，文案是主要傳達(dá)內(nèi)容，而右邊配圖是起到裝飾美化整個(gè)banner的作用，同時(shí)與文案有一定關(guān)聯(lián)性，讓用戶更加形象地理解banner傳達(dá)的含義（如圖二）。
3. 字體選擇。
字體的選擇也是一門學(xué)問，下面從字體的常見分類與字體樣式對(duì)于banner的設(shè)計(jì)有什么要求作分享。
a. 中文字體常見分類。
有襯線體，非襯線體，手寫體。這里我們不說(shuō)如何區(qū)分這幾類字體，百度肯定說(shuō)得比我好。典型的襯線體有宋體等、非襯線體有黑體等、手寫體有手書體等，由于各種字體形狀上的差異，帶給人的直觀感受也有講究。襯線體裝飾性較強(qiáng)，帶給人活潑、輕松的感覺，用在較為活潑跳躍性的banner上較為合適（如圖一）；而非襯線體形狀簡(jiǎn)潔、視覺效果更為直接，易讀性強(qiáng)，尤其多用在科技類型的banner中（如圖二）；手寫體也叫書法體，因其特性，多用在文藝主題的banner中（如圖三）。
b. 字體樣式。
這里主要考慮到大小、粗細(xì)、顏色。文案有主要內(nèi)容與輔助內(nèi)容之分，也就是要有對(duì)比性，而對(duì)比性就體現(xiàn)在文字與文字之間的大小與粗細(xì)的區(qū)別上（如下圖中很明顯的對(duì)比）。字體顏色的選擇會(huì)考慮到與背景顏色的搭配效果、banner主題間的關(guān)聯(lián)等，選對(duì)顏色能夠凸顯文案效果。
注意：字體商用的前提是要取得相關(guān)版權(quán)，很重要的一點(diǎn)。
4. 圖片元素選擇。
圖片元素是banner中的重要組成部分，尤其是在商品廣告圖中，所以進(jìn)行適當(dāng)精修過的商品圖就顯得很重要，會(huì)給用戶呈現(xiàn)出一種品質(zhì)、信任感，提高點(diǎn)擊率（如圖一，精致的洗衣液套裝讓人有想買的沖動(dòng)）。
而在運(yùn)營(yíng)活動(dòng)宣傳banner中，主角雖然不是圖片元素，但找尋或者設(shè)計(jì)跟活動(dòng)主題相關(guān)的素材也很有必要，這樣能夠形象地傳達(dá)主題，讓用戶更容易理解枯燥的文案（如圖二，這是商品列表頁(yè)頭圖banner，充滿豐富感的圖形元素較好地契合了主題）。
5. 背景顏色選擇。
每種顏色都有特定的心理學(xué)含義，所以banner背景采用何種顏色要具體問題具體分析。下面將筆者之前設(shè)計(jì)的兩張banner作為例子來(lái)分享背景顏色的選擇。
圖一banner是筆者為當(dāng)時(shí)公司新上線了用戶服務(wù)評(píng)價(jià)功能而設(shè)計(jì)的，背景選擇橙色有兩層含義：一是符合公司品牌VI色，這是很多設(shè)計(jì)場(chǎng)景用色的出發(fā)點(diǎn)，二是橙色暖色調(diào)具備的親切感帶給人一種信任感，符合banner主題；同時(shí)這里我也拉了一層漸變來(lái)豐富畫面層次感，不讓畫面太“平”。
圖二banner主題是上線了一項(xiàng)金融服務(wù)功能，背景色選擇了黑金，黑金代表尊貴、財(cái)富，給予用戶一種高貴的感覺，符合活動(dòng)主題。
可以看到：1. 顏色選擇需考慮到企業(yè)VI色；2. 顏色心理學(xué)對(duì)于指導(dǎo)設(shè)計(jì)有很大幫助；3. 顏色飽和度不宜過高，不然就“喧賓奪主”了，背景只是背景；4. 可以考慮添加漸變效果來(lái)豐富畫面層次感。
6. 點(diǎn)綴元素。
到了該添加點(diǎn)綴元素時(shí)，banner主體就已基本完成了，點(diǎn)綴元素能夠起到豐富畫面細(xì)節(jié)，增加美感，甚至是畫龍點(diǎn)睛的作用，同時(shí)也能起到激發(fā)用戶點(diǎn)擊，起到營(yíng)銷上的轉(zhuǎn)化。點(diǎn)綴元素的形式多種多樣，只有想不到，沒有做不到，常見的類型有幾何元素、實(shí)物、色塊、紋理、光元素等。
如圖，banner左上角的條紋跟下方的英文字母是點(diǎn)綴元素，試想如果沒有這些點(diǎn)綴元素，banner會(huì)不會(huì)感覺缺點(diǎn)什么？
到這里，一個(gè)設(shè)計(jì)好的banenr就新鮮出爐上線啦！最后附上一張思維導(dǎo)圖。
三、設(shè)計(jì)后
那么，banner設(shè)計(jì)好并且上線后，我們的需求是不是就完成了？嚴(yán)格來(lái)說(shuō)并沒有。設(shè)計(jì)不等同于藝術(shù)，它本質(zhì)上是一種商業(yè)行為，做設(shè)計(jì)自然是為了服務(wù)于公司業(yè)務(wù)需要，banner也一樣。在設(shè)計(jì)圖上線后，我們最好能夠與后臺(tái)人員溝通然后跟蹤并檢驗(yàn)一下banner的點(diǎn)擊量或者轉(zhuǎn)化量有沒有達(dá)到預(yù)期的業(yè)務(wù)效果，哪些的點(diǎn)擊量高一些，哪些低一些，知道相關(guān)數(shù)據(jù)的目的是“以數(shù)據(jù)指導(dǎo)設(shè)計(jì)”，只有真正了解用戶需求，知道用戶“口味”，才能更少地為“自我”而設(shè)計(jì)，服務(wù)于商業(yè)需求。
四，總結(jié)
本篇文章是筆者第一段實(shí)習(xí)期中對(duì)于所接觸工作內(nèi)容的思考總結(jié)，分“設(shè)計(jì)前”、“設(shè)計(jì)中”、“設(shè)計(jì)后”，相信對(duì)于今后的設(shè)計(jì)工作具有普遍的指導(dǎo)作用，banner設(shè)計(jì)只是筆者最常遇到的一個(gè)典型例子。此文談不上教程，因?yàn)檫€夠不到教程的級(jí)別，寫banner教程的優(yōu)秀文章多了去了，本文只是一篇純粹的分享，文中不少設(shè)計(jì)時(shí)需要注意的要點(diǎn)都源自于我在前實(shí)習(xí)公司的兩位老大，這是兩位非常優(yōu)秀的設(shè)計(jì)師，非常感謝他們對(duì)我的耐心指導(dǎo)。當(dāng)然了，師父領(lǐng)進(jìn)門修行在個(gè)人，不斷的思考總結(jié)并有效指導(dǎo)工作才是一個(gè)職場(chǎng)人能夠形成持續(xù)戰(zhàn)斗力的根本。
第一次寫文章，沒有多好，感謝您的耐心閱讀。
