干貨！如何使你的素材設計從優秀到卓越（中）

上一篇作者詳細從素材規劃層面給我們列了個規劃三元素，許多童鞋表示太棒了，今天這篇上升到設計層面，特別針對banner設計，對急切想提高banner的轉化率和點擊率的童鞋來說絕對是神兵利器！

@劉津legene （網易UED主管）：第一篇是九月份優設分享了的如何使你的素材設計從優秀到卓越（上），全文都是沉甸甸的干貨，上次讀完意猶未盡的童鞋們趕緊集中精神來給續文點個贊吧 ^_^

一篇幫你較少犯錯，一篇幫你應燃眉之急 : ）
BANNER設計不得不看的六大原則
教你簡單快速的設計BANNER

一、開始設計前要注意什么

在開始真正設計前，設計師應該弄清楚三個問題，并依此確定設計目標：

• 從規劃層得到了什么信息？
• 要轉化還是要點擊？
• 重效果宣傳還是重品牌宣傳

這里要特別說說第三點，為什么還要考慮效果或品牌宣傳？這是因為不同的目的會得到不同的設計風格。

舉個例子，假如說現在要做一個車險的廣告，那么就可以先整理一下思路。主要考慮大眾興趣、產品人群、投放環境如何結合，并且這個廣告希望達到一個什么目標：

這樣就大致得出了車險素材的設計目標及計劃：突出車險內容，熱點作為輔助元素（一般來說轉化比點擊更重要），在汽車頻道投放，設計風格較高端（重品牌宣傳）。

接下來就可以開始具體的設計工作了。

二、文案設計

在設計文案時，需要注意以下幾點：

• 了解目標用戶的核心需求（產品人群）
• 深入了解投放環境（投放環境）
• 三秒鐘讓用戶看得懂并吸引用戶（大眾興趣）

2.1 了解目標用戶的核心需求

以上是一組和車險有關的素材，這些素材點擊尚可，但轉化較一般。可以看出，它們主打的都是各種優惠信息。經過對用戶的定性訪談我們了解到：被調研的用戶提到理賠、品牌、方便、價格的很多，這些是購買車險的必要元素，只有滿足了這些，禮品等元素才有資格成為加分項。之前的推銷路線，包括產品設計，一味強調禮品，有可能沒有解決用戶最關注的需求。

后來設計師又做了一個新的素材，里面沒有提到任何禮品，但轉化卻很高（見下圖）。因此正確把握目標用戶的核心需求是非常重要的。

（不了解車險的人有很大的好奇心去點擊它）

2.2 深入了解投放環境

網易彩票曾經做過兩個活動：一個是在郵箱中派發"滿2元減1元"優惠券，一個是在大話西游2官網中派發"滿10元減5元"優惠券。后者的效果要好很多，這是為什么呢？

首先郵箱用戶的消費需求及消費能力均不如游戲用戶，其次郵箱用戶不一定有網易寶余額，支付起來非常麻煩，為了1元錢的優惠覺得劃不來；而游戲用戶不僅有較強的消費需求及能力，且網易寶余額較多，支付起來方便。

所以了解投放環境及對應的用戶情況，再決策相應的活動主題及文案，會得到事半功倍的效果。

2.3 三秒鐘讓用戶看得懂并吸引用戶

要想讓文案吸引用戶，首先要保證用戶能看懂文案。如果理解起來都有困難，那就很難吸引住用戶。并且用戶在瀏覽網站時一般都是匆忙的掃視，含糊不清的文案會讓人直接忽略掉。

比如下圖的文案：1元+1積分=1000萬夢想。這是什么意思？很難理解。

下面這兩個素材的文案就要清晰很多。因此網站上的素材推廣文案一定要簡明易懂、開門見山。

三、內容設計

在設計內容時，可以注意以下幾點：

• 三秒鐘找到重點（大眾興趣）
• 詼諧而不低俗（產品人群、投放環境）
• 利用人物視線引導（大眾習慣）

3.1 三秒鐘找到重點

上圖這三個素材，第一個素材的點擊率是最低的，而第三個素材的點擊率是最高的。運營推廣人員在設計素材內容時，總是怕"浪費"空間，要求設計師不斷的往里面塞東西：大段的文案一個字都舍不得刪掉，內容元素滿滿當當，恨不得把想要說的東西一股腦都塞給用戶，其實用戶卻并不會買帳。繁冗的內容反而會讓用戶找不到重點，白白錯失推廣機會。

3.2 詼諧而不低俗

有的時候推廣人員為了提升點擊率，會考慮放一些標題黨、或比較敏感的內容，但是這樣的效果真的一定好嗎？

上面這兩個素材，第一個素材的效果是比較好的，而第二個很差。

第一個素材通過對文字的特殊視覺處理，達到吸引眼球的目的。由于處理巧妙，用戶并不會覺得庸俗和低劣，反而會覺得幽默有趣。可以說，這個素材的熱點和產品本身結合的還是比較好的。車險是比較高端、嚴肅的產品，不太適合過于庸俗的設計，因此第二個素材的形式會增加用戶對網站的不信任，得不償失。它的失敗就在于熱點和產品沒有結合好。

3.3 利用人物視線引導

這個圖想必大家不會陌生，它是Usable World網站做的一項非常著名的嬰兒視覺圖片引導注意力的測試。當嬰兒臉朝正面時，人們的目光更多的關注嬰兒臉部，對產品關注較少；而當嬰兒側身，臉朝向商品介紹時，人們的目標就會隨之轉移。

這個技巧很棒，在這篇10個提高網站可用性的經驗指南中也提到了，同學們可以閱讀這篇擴展知識。

我們在設計素材時，也可以使用同樣的方式，通過人臉的視線引導用戶去關注重要內容。

比如這個素材效果就比較好：我們可能首先會注意到人臉，然后順著他的目標看到手中的槍，從槍中射出一顆子彈，這顆子彈穿過"低價看大片"的文案，整個過程非常符合從左到右的閱讀習慣，一氣呵成。

四、視覺設計

在做視覺設計時，需要考慮以下幾點：

• 顏色吸引人（考慮大眾興趣、投放環境）
• 營造膨脹感（考慮投放環境）
• 設計風格與投放位置相匹配（考慮投放環境）
• 加載速度快

4.1 顏色吸引人

投放廣告當然希望能吸引人的眼球，所以廣告的banner顏色很重要。但到底什么顏色更好不是絕對的，不僅要看是否和主題呼應，還要看是否和投放環境相沖突。

比如這個廣告就非常不明顯，沒有從背景中"跳"出來，所以在設計廣告banner時，一定要放在正式的投放環境中看一下，而不是單獨看banner的效果。

4.2 營造膨脹感

面積越大的banner越容易引人注意，這個是大家都知道的常識。但是遺憾的是，面積和位置往往是固定的，那怎么辦呢？這個時候，就要靠設計來幫忙了。

上面這兩個素材，哪個更好？大部分人更喜歡第一個，當然也有人喜歡第二個。別急，我們放在實際的投放環境中再看一下。

很明顯，第二個素材給人感覺面積更大，更有視覺沖擊力。因此判斷一個素材是否合適，一定要放在實際的投放環境中來觀察。

4.3 設計風格與投放位置相匹配

很多設計師在設計素材時，只關心素材尺寸、內容要求，而不考慮具體投放在什么位置，這樣就可能出現這種情況：

比如網易女人頻道，本來是非常清新時尚的風格，但是頭部插了一個并不美觀的綠色保險廣告，中間又放了一個年味十足的喜慶風格廣告，讓這個頁面顯得非常不倫不類。且不說女人頻道的用戶是否會對這種題材、風格的廣告感興趣，單說這種"混搭"的風格，對頻道形象也是種傷害。

所以建議需求方、投放方、設計師都要注意具體的投放環境，做出更有針對性、更和諧統一的設計。

4.4 加載速度快

用戶在瀏覽網頁時是非常迅速的，過大的文件會導致廣告banner不能立即顯示，從而有可能失去曝光機會。一般常規尺寸的banner廣告文件最好不要超過30KB。

五、用A/B測試來檢驗效果

可以使用A/B測試的方式來解決banner設計中一些不太確定的問題（比如文案、內容、顏色等），使用這種方法很容易大幅度提升素材的效果。

比如一個電影廣告素材，是放男主角的頭像好，還是放一個更知名的男配角效果好呢？這就可以通過這種方式來進行測試。我們共設計了三版素材，并同時發布，保持相同的曝光量。

最后發現第三版的素材點擊效果遠高于第一版（轉化率差異不大），因此選擇了使用第三版甘道夫的頭像。

在做A/B測試時，需要注意以下幾點：

• 首先是測試點盡量單一，并保證其它因素完全一致。不能又要測按鈕顏色，又要測文案內容。比如上例，我們只測banner背景中的頭像，其余部分保持一致。
• 其次要保證相同時間、相同位置、相同曝光量。不能先放一天A版，再放一天B版，認為這樣就是在做A/B測試了。一定要保證兩版同時發布。

未完待續……

第一篇回顧：如何使你的素材設計從優秀到卓越（上）

原文地址：blog.sina
作者：@劉津legene

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量57萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：