前實習公司是一個生鮮B2B類電商公司，運營需求較多，尤其是APP的Banner設計，本篇文章我将自己制作電商類banner常用的方法與之前設計的具有代表性的banner結合做一個階段性的思考總結。

一、設計前

為啥要做banner？

當然是因為有需求啦。banner需求往往來源于運營同學，為了配合某個運營活動而做的一個面向用戶的展示圖片。banner一般是一個活動頁面的入口，假如這個banner能夠清晰表達活動主題并足以吸引用戶點擊時，我們這個設計就算成功一大半了。

那麼，接到一個需求時，是不是就可以馬上打開PS開幹啦？當然也不是，一般我們需要問清楚以下幾點具體内容：

（1）banner的作用

每個運營活動都有相應的業務需求，我們隻有清楚運營活動的目的，才能知道設計banner的作用是什麼，而不是自嗨似的為“自我”而設計。

（2）PC端 or 移動端？

這個不用多說，至少在尺寸上兩者相差甚大。

（3）投放位置

不同的位置也會影響到banner的設計效果。

（4）所需文案

Banner文案要精煉地表達出活動主題，收到來自運營同學的文案後，能夠根據活動主題對文案進行審核甚至進一步地修飾，也是設計師的能力體現。

（5）有無産品素材

根據運營需求的類别，對新上線商品作廣告宣傳的話，一般需要運營同學提供相應商品素材圖。如果是對某個新上線活動做通知提醒的話，設計師們一般就要尋找素材或者自己制作素材了。

（6）上線時間

抑制設計師們發揮想象力創作的一大敵人就是時間，創意很美好，落地很一般，唯有緊盯着deadline，才能夠與time達成共赢。

我們都知道，其實無論任何需求，在開幹前肯定是要先與需求方溝通清楚再做，乃至于反向推動需求方思考問題，這樣既降低了返工率，也能讓banner在上線後達到預定的業務效果。溝通，溝通，溝通！何樂而不為？

二、設計中

到了激動人心正式打開Photoshop開幹的時候了，設計的過程也是有據可循的，下面将結合本人的制作與應遵循的要點進行思路分享。

1. banner大小（寬高設定）

應用裡一般都會有專門放置banner的位置，而且寬高是設定好了的，不同的位置預留的寬高是不一樣的。我便是按照設定好的寬高進行設計。

• 圖一是放在商品列表頁的頭圖banner，設計時定好寬高為750*328；
• 圖二為“我的”頁面裡放置活動宣傳廣告，由于空間有限，定好的寬高為750*200。

當然以上banner的大小隻是我所遇到的，大小設定具體要看活動重要級别、以及頁面空間等來制定，同時也有比例指導，常見的有16:9、5:3等。

2. 圖文版式

常見的banner版式最常見的是圖文左右排版、文字居中排版。筆者接觸最多的是圖文左右排版，這次分享下這兩種的設計思路。

我們知道選擇哪種排版方式要看banner所要傳達的内容主要是什麼，圖左文右或者文左圖右，一般是考慮到這符合人們從左至右的閱讀習慣，能讓用戶快速接受信息。

若是商品廣告，重點在于商品圖的話，通常是圖在左，右邊搭配文案主标或副标題，起到說明商品的作用（如圖一）。

文左圖右的情況通常用于宣傳某個運營活動，文案是主要傳達内容，而右邊配圖是起到裝飾美化整個banner的作用，同時與文案有一定關聯性，讓用戶更加形象地理解banner傳達的含義（如圖二）。

3. 字體選擇

字體的選擇也是一門學問，下面從字體的常見分類與字體樣式對于banner的設計有什麼要求作分享。

（1）中文字體常見分類

有襯線體，非襯線體，手寫體。這裡我們不說如何區分這幾類字體，百度肯定說得比我好。典型的襯線體有宋體等、非襯線體有黑體等、手寫體有手書體等，由于各種字體形狀上的差異，帶給人的直觀感受也有講究。

• 襯線體裝飾性較強，帶給人活潑、輕松的感覺，用在較為活潑跳躍性的banner上較為合适（如圖一）；
• 而非襯線體形狀簡潔、視覺效果更為直接，易讀性強，尤其多用在科技類型的banner中（如圖二）；
• 手寫體也叫書法體，因其特性，多用在文藝主題的banner中（如圖三）。

（2）字體樣式

這裡主要考慮到大小、粗細、顔色。文案有主要内容與輔助内容之分，也就是要有對比性，而對比性就體現在文字與文字之間的大小與粗細的區别上（如下圖中很明顯的對比）。字體顔色的選擇會考慮到與背景顔色的搭配效果、banner主題間的關聯等，選對顔色能夠凸顯文案效果。

注意：字體商用的前提是要取得相關版權，很重要的一點。

4. 圖片元素選擇

圖片元素是banner中的重要組成部分，尤其是在商品廣告圖中，所以進行适當精修過的商品圖就顯得很重要，會給用戶呈現出一種品質、信任感，提高點擊率（如圖一，精緻的洗衣液套裝讓人有想買的沖動）。

而在運營活動宣傳banner中，主角雖然不是圖片元素，但找尋或者設計跟活動主題相關的素材也很有必要，這樣能夠形象地傳達主題，讓用戶更容易理解枯燥的文案（如圖二，這是商品列表頁頭圖banner，充滿豐富感的圖形元素較好地契合了主題）。

5. 背景顔色選擇

每種顔色都有特定的心理學含義，所以banner背景采用何種顔色要具體問題具體分析。下面将筆者之前設計的兩張banner作為例子來分享背景顔色的選擇。

圖一banner是筆者為當時公司新上線了用戶服務評價功能而設計的，背景選擇橙色有兩層含義：

• 一是符合公司品牌VI色，這是很多設計場景用色的出發點；
• 二是橙色暖色調具備的親切感帶給人一種信任感，符合banner主題。

同時這裡我也拉了一層漸變來豐富畫面層次感，不讓畫面太“平”。

圖二banner主題是上線了一項金融服務功能，背景色選擇了黑金，黑金代表尊貴、财富，給予用戶一種高貴的感覺，符合活動主題。

可以看到：

1. 顔色選擇需考慮到企業VI色；
2. 顔色心理學對于指導設計有很大幫助；
3. 顔色飽和度不宜過高，不然就“喧賓奪主”了，背景隻是背景；
4. 可以考慮添加漸變效果來豐富畫面層次感。

6. 點綴元素

到了該添加點綴元素時，banner主體就已基本完成了，點綴元素能夠起到豐富畫面細節，增加美感，甚至是畫龍點睛的作用，同時也能起到激發用戶點擊，起到營銷上的轉化。點綴元素的形式多種多樣，隻有想不到，沒有做不到，常見的類型有幾何元素、實物、色塊、紋理、光元素等。

如圖，banner左上角的條紋跟下方的英文字母是點綴元素，試想如果沒有這些點綴元素，banner會不會感覺缺點什麼？

到這裡，一個設計好的banenr就新鮮出爐上線啦！

最後附上一張思維導圖：

三、設計後

那麼，banner設計好并且上線後，我們的需求是不是就完成了？

嚴格來說并沒有。設計不等同于藝術，它本質上是一種商業行為，做設計自然是為了服務于公司業務需要，banner也一樣。

在設計圖上線後，我們最好能夠與後台人員溝通然後跟蹤并檢驗一下banner的點擊量或者轉化量有沒有達到預期的業務效果，哪些的點擊量高一些，哪些低一些，知道相關數據的目的是“以數據指導設計”，隻有真正了解用戶需求，知道用戶“口味”，才能更少地為“自我”而設計，服務于商業需求。

四、總結

本篇文章是筆者第一段實習期中對于所接觸工作内容的思考總結，分“設計前”、“設計中”、“設計後”，相信對于今後的設計工作具有普遍的指導作用，banner設計隻是筆者最常遇到的一個典型例子。

此文談不上教程，因為還夠不到教程的級别，寫banner教程的優秀文章多了去了，本文隻是一篇純粹的分享，文中不少設計時需要注意的要點都源自于我在前實習公司的兩位老大，這是兩位非常優秀的設計師，非常感謝他們對我的耐心指導。

當然了，師父領進門修行在個人，不斷的思考總結并有效指導工作才是一個職場人能夠形成持續戰鬥力的根本。

第一次寫文章，沒有多好，感謝您的耐心閱讀。

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

題圖作者提供

,

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

查看全部