信息流如何把控頁面設(shè)計(jì)，減少廣告浪費(fèi)？
2018-03-19 點(diǎn)擊量：
一個(gè)能夠調(diào)動(dòng)用戶消費(fèi)欲的設(shè)計(jì)首先得是用戶愿意看的設(shè)計(jì)。否則，這個(gè)廣告就是浪費(fèi)了一大半廣告費(fèi)的廣告。本文要說的，就是如何通過把控頁面設(shè)計(jì)的色彩明度、排版、素材選擇等，做出讓用戶看得下去的廣告，進(jìn)而起到催促目標(biāo)用戶更快下單的作用，將廣告投放的性價(jià)比最大化。
色彩明快激發(fā)情緒
圖片的明度很容易影響我們的情緒。
大家都去過賣場(chǎng)，無論是超市、商場(chǎng)，還是柜臺(tái)……回憶一下，給我們留下的是什么樣的印象？
沒錯(cuò)，就是亮！
為什么商場(chǎng)都要采光好、燈光亮呢？
因?yàn)樵诿髁恋沫h(huán)境內(nèi)，用戶的情緒更放松，而人在放松狀態(tài)下更容易跳過理性思考，做出決策——這種根據(jù)環(huán)境自發(fā)調(diào)整狀態(tài)的行為，是我們?cè)谶M(jìn)化過程中習(xí)得的被動(dòng)技能。
我們?nèi)祟愡€在進(jìn)化過程中的時(shí)候，陽光明媚的天氣下，天敵不容易隱藏，我們可以放松的享受休閑時(shí)光，不需要繃緊神經(jīng)讓自己可以面對(duì)隨時(shí)需要面臨的決策；
而在陰沉、暗淡的天氣里，我們無法清晰的看到敵人，也不能判斷是否會(huì)有狂風(fēng)暴雨的降臨，這時(shí)候，如果我們走在外面，大腦就會(huì)高度緊張，隨時(shí)隨地進(jìn)行運(yùn)算，確保自己不會(huì)做出錯(cuò)誤決策。
所以一般賣場(chǎng)環(huán)境會(huì)試圖通過營造一個(gè)好的光線環(huán)境，讓用戶情緒放松、精神亢奮，以期達(dá)成用戶少過腦子、盡快決策的效果。
對(duì)應(yīng)到廣告頁面的設(shè)計(jì)上，當(dāng)我們想要看到頁面的用戶盡快做出決策時(shí)，最好采用高明度、高飽和度的色彩，也就是營造一個(gè)“光線很好”的狀態(tài)。
比如顏色越接近白色，則這個(gè)色彩明度越高；越接近黑色，則色彩明度越低；而顏色越濃烈，則色彩飽和度越高，比如正紅、正黃，都是飽和度很高的顏色，而相對(duì)應(yīng)的粉紅、暗黃的飽和度就偏低。
說一個(gè)大家都可以判斷的方法：在空氣清新，天氣好的自然光線下，我們看到的世界，就是一個(gè)高明度、高飽和度的世界——一起來回憶一下，是不是這樣的天氣下，天分外藍(lán)？花分外紅？光線分外明亮？心情分外舒暢？
同樣，面對(duì)類似的賣場(chǎng)環(huán)境、廣告頁面，人受到“好光線”氛圍的影響，思考似乎就不那么重要了，他會(huì)更在意心情和感受，也更容易受感性牽引做出決策。
這也是京東、淘寶等購物平臺(tái)的頁面采用高明度色彩的原因。
再比如下圖這個(gè)天貓主頁面，白色底的明度自然是最高的，而其他部位則是大面積的高、中飽和度的色彩，只有左側(cè)商品分類用了暗色調(diào)，占比較少。
這樣的頁面給人的總體感覺就是歡快的，明亮的，輕松的，對(duì)應(yīng)的，人的思考的需求就會(huì)被忽略，決策速度就會(huì)變快。
與明快相對(duì)的，是暗沉。
暗沉的顏色，會(huì)讓人心情下沉，這種下沉，可以是安靜，也可以是沉重。在暗沉的顏色下，我們往往會(huì)覺得時(shí)間變得更慢，于是我們會(huì)靜下來思考。
對(duì)應(yīng)的，當(dāng)廣告的目的，是需要用戶思考時(shí)，或者想讓用戶感覺到安靜時(shí)，設(shè)計(jì)應(yīng)當(dāng)以暗色調(diào)配色或圖片為主，同時(shí)輔以冷淡風(fēng)格的字體。
比如下面這張空氣凈化器的詳情頁首屏：
雖然色調(diào)是以暗色為主，但是對(duì)比度、飽和度搭配合理，就會(huì)讓人感覺冷靜，去思考頁面上給出的信息點(diǎn)（雖然思考了不見得懂），但是這些信息點(diǎn)是用戶本來就希望去看的，用戶希望通過這些數(shù)據(jù)自己去比對(duì)的這個(gè)機(jī)器好不好、值不值，那么用這樣的配色來襯托，讓用戶覺得自己的思考是理性的，就能更好的實(shí)現(xiàn)產(chǎn)品方的銷售目的。
再比如很多高端瑞士機(jī)械表會(huì)用暗色調(diào)背景凸顯產(chǎn)品，雖然用戶不見得懂，但是用戶會(huì)覺得有必要了解這個(gè)產(chǎn)品各方面的數(shù)值，當(dāng)你給他營造出深沉思考的場(chǎng)景，把他們似懂非懂的重點(diǎn)列出，用戶的“比較心”就部分得到了滿足，可以減少用戶猶豫的時(shí)間。
而下圖這種價(jià)格偏低的時(shí)尚智能手表，就適合選用明快的色調(diào)，一方面可以凸顯表的風(fēng)格，另一方面也是在用一種婉約的方式“催促”用戶盡快做出購買決定。
所以，如果你的產(chǎn)品是決策門檻較高的產(chǎn)品，那么無論創(chuàng)意怎樣煽動(dòng)用戶的購買情緒，用戶也仍然會(huì)去思考、比較，這個(gè)時(shí)候，不如干脆用暗色調(diào)營造高端感，把用戶可能會(huì)對(duì)比的重點(diǎn)列出。
因?yàn)榇蠖鄶?shù)的時(shí)候，用戶以為自己在獨(dú)立思考是否購買，但其實(shí)并沒有脫離設(shè)計(jì)和文案可以調(diào)控的范圍（但如果用戶存在超出設(shè)計(jì)和文案調(diào)控范圍的情緒了，我們就盡量不要去觸碰，避免引起的用戶反感）。
那么是否只要明度、飽和度對(duì)應(yīng)了產(chǎn)品特性就全對(duì)呢？并不是。上面我們給出的，都是用色正確的示范，而有的圖片的色調(diào)應(yīng)用錯(cuò)誤，無論是什么樣的產(chǎn)品，都無法調(diào)動(dòng)用戶的購買欲。
如果用明度、飽和度來解釋，可能很多人會(huì)覺得理解困難。我試著用更容易理解的方式講解一下下面這四個(gè)錯(cuò)誤案例。
我們前面說過了，之所以要用明度高、飽和度高的圖片，是為了調(diào)動(dòng)我們基因中對(duì)晴朗天氣比較安全的記憶，而黑暗、陰天、空氣不透亮的天氣里，危險(xiǎn)隨時(shí)可能出現(xiàn)，我們的大腦會(huì)本能的緊張，高速運(yùn)轉(zhuǎn)，抗拒。
所以我們看看上面這四個(gè)落地頁
左一，不僅整體色調(diào)暗沉，而且文字也很模糊，整體的感覺，是不是很像黑夜？左二，低明度、低飽和度、低對(duì)比度的色調(diào)，非常像霧霾天；左三，明度低的對(duì)比色搭配，就好像整個(gè)落地頁掉到了泥里；左四，艷粉、暗紅、草綠、灰、黑、米色的搭配，不僅感覺很亂，而且透出一股塑料假花的味道。
這四種配色，無論明度高低，我們都會(huì)說他的顏色用的“臟”，沒有讓我們感受到“靜謐美好”，而是讓人心情暗沉，甚至厭惡。
圖片相關(guān)增強(qiáng)興趣
很多信息流廣告，都是寫標(biāo)題的管標(biāo)題，配圖片的管配圖，即使這兩件事都是一個(gè)人完成的，這人在寫標(biāo)題和配圖的時(shí)候，用的也不是大腦的同一區(qū)域……簡直人格分裂。比如下面這張圖：
光看圖，你覺得這是什么廣告？（此處思考5S）
然后再來看完整版：
看完標(biāo)題，我們知道這是一個(gè)移民廣告。
但如果光看圖片，你會(huì)不會(huì)以為這是一個(gè)私人婦產(chǎn)醫(yī)院的廣告呢？
這就是這個(gè)入口創(chuàng)意（標(biāo)題+圖）的莫名之處。
我們都知道，信息流廣告入口創(chuàng)意由標(biāo)題和配圖組成。大部分優(yōu)化師都會(huì)非常重視標(biāo)題的寫法，卻忽略了可能起到更關(guān)鍵作用的圖片。
我們的祖先從幾萬年前就已經(jīng)會(huì)通過眼睛獲取圖像信息，而文字的發(fā)明最早只能追溯到三千多年前，我們的大腦對(duì)于圖像信息的編譯，比對(duì)文字信息要更快、更省力，也正因?yàn)槿绱耍?dāng)圖片和文字同時(shí)出現(xiàn)的時(shí)候，我們的視覺重心點(diǎn)會(huì)不自覺的落在圖片上。
比如上面這個(gè)案例。用戶通過圖片產(chǎn)生的聯(lián)想是：“婦產(chǎn)”，而這樣的聯(lián)想，很可能和廣告投放的帶有移民標(biāo)簽的人群沒多大關(guān)系，所以很自然的，他很可能就會(huì)忽略這個(gè)廣告。
再比如這個(gè)：
相信看到的用戶會(huì)像圖右的貓一樣，一臉懵逼。
空調(diào)地暖空氣不流通，如何能讓我們更舒適？看圖左，去戶外嗎？圖中和圖右干脆完全搞不清楚想表達(dá)什么……
我寫文章找案例這么仔細(xì)的看和揣摩都沒搞明白什么意思，憑什么認(rèn)為用戶能在看資訊時(shí)掃過的那2秒鐘會(huì)對(duì)一個(gè)不知所云的廣告產(chǎn)生興趣呢？
還有這個(gè)朋友圈廣告：
這是一個(gè)運(yùn)動(dòng)會(huì)所的店慶活動(dòng)廣告，目的應(yīng)該是讓目標(biāo)用戶來參加活動(dòng)，進(jìn)而辦卡成為會(huì)員。可是除非是我們這種找茬的廣告人，不然一眼望過去，沒人會(huì)認(rèn)為這個(gè)廣告跟運(yùn)動(dòng)會(huì)所有什么關(guān)系。
我就問問，正在看我文章的你，第一眼望過去覺得這是什么呢？是大商場(chǎng)活動(dòng)？新飯店開業(yè)？還是某個(gè)樓盤搞答謝？
需要用戶絞盡腦汁去揣摩的廣告，就已經(jīng)丟掉用戶了，用戶可沒有耐心在一個(gè)不知所謂的廣告上注目停留，所以，這樣的廣告設(shè)計(jì)也就無所謂產(chǎn)生更多效果了，更別提幫助銷售了。
就信息流廣告而言，圖文要一致，是入口創(chuàng)意最起碼應(yīng)該做到的。配圖就像打仗的先發(fā)部隊(duì)，需要先盡力吸引用戶的注意力，然后和標(biāo)題搭配做功，將用戶引至落地頁。
這就要求設(shè)計(jì)師在做入口創(chuàng)意圖的時(shí)候，需要考慮圖片如何配合標(biāo)題吸引用戶注意力，讓圖片成為標(biāo)題的助力，而不是拖累。
具體到配圖形式，不管是小（單）圖、大圖還是三（圖），不同的圖片位置、面積比重，都會(huì)給用戶不同的影響。以入口大圖為例，因?yàn)閳D片比重大，圖片會(huì)比標(biāo)題更容易抓住用戶的眼球，這個(gè)時(shí)候，如果我們的圖片跟標(biāo)題看起來完全不相關(guān)，那么極有可能吸引進(jìn)來的，是圖片給到用戶的直觀印象中用戶感興趣的重點(diǎn)，而不是我們希望的目標(biāo)用戶。
比如下圖：
這個(gè)廣告的標(biāo)題蠻有意思，圖片也符合雙11的氛圍。但問題在于，圖片和標(biāo)題完全無關(guān)。
上文我們說了，用戶往往是先看圖片，而此時(shí)如果標(biāo)題能跟圖片一致，在那一瞬間會(huì)有加強(qiáng)作用。而這個(gè)標(biāo)題和圖片單獨(dú)看都沒毛病，但是放在一起卻起了減弱作用。
再來對(duì)比下面的圖2，你就會(huì)清晰的感受到差距：
如你所見，上圖的標(biāo)題和圖片分開看其實(shí)很平常，但勝在有關(guān)聯(lián)，有關(guān)聯(lián)就能互相加分，為落地頁上的銷售助力。
排版齊整延長耐心
實(shí)操中還有一個(gè)影響用戶閱讀興趣的大問題就是設(shè)計(jì)排版混亂。
通俗來說，排版好比我們和用戶溝通的“語言”，設(shè)計(jì)排版規(guī)則就是你的語言邏輯的一個(gè)展現(xiàn)形式，混亂的排版規(guī)則會(huì)像你混亂的語言邏輯一樣，影響用戶get到你想要表達(dá)的點(diǎn)。
常見的頁面排版誤區(qū)有三：
（1）過度表達(dá)
即，試圖在一屏內(nèi)把所有想表達(dá)的內(nèi)容都排進(jìn)去，讓用戶找不到重點(diǎn)，失去耐心。
（2）沒有規(guī)則
具體指邊距、行距、段落間的隔斷、間距、圖文間距、標(biāo)題字體字號(hào)、內(nèi)容字體字號(hào)等，這些在一個(gè)頁面中應(yīng)當(dāng)有一個(gè)統(tǒng)一的規(guī)則。如果規(guī)則不統(tǒng)一，則視覺邏輯是混亂的，對(duì)應(yīng)的，用戶的閱讀體驗(yàn)也是混亂的。
（3）認(rèn)為視覺順序不重要
人腦有自己已形成的視覺權(quán)重順序，因此，哪個(gè)設(shè)計(jì)元素排列在哪個(gè)位置是非常重要的，決定了用戶會(huì)如何理解你所表達(dá)的內(nèi)容。
我們用一個(gè)典型案例來詳述上面的這些問題：
問題1：過度表達(dá)
我們來看看第一屏都表達(dá)了些什么？
先看文案部分，我們看到的是（根據(jù)視覺權(quán)重向下排列）：
旋轉(zhuǎn)小火鍋；誠招加盟；優(yōu)勢(shì)。
圖片部分，我們看到的是（根據(jù)視覺權(quán)重向下排列）：
熱騰騰的小火鍋；食材；logo；云朵元素。
內(nèi)容之多可以說是毫不節(jié)制。
作為想要?jiǎng)?chuàng)業(yè)的人來說，他們最關(guān)心的低成本、易選址、兩人即可開店等優(yōu)勢(shì)，但在這個(gè)頁面里，這些內(nèi)容被放的很小，而主文字“誠招加盟”四個(gè)字，因?yàn)樽煮w和色彩的緣故，雖然很大，卻并不是第一視覺落腳點(diǎn)。所以，文案部分最明顯，最容易被人意識(shí)到的，是旋轉(zhuǎn)小火鍋，配上調(diào)動(dòng)用戶食欲（而不是創(chuàng)業(yè)欲望）的圖片……是否會(huì)讓人以為是火鍋店推廣呢？
問題2：邊距、間距、行距過小
不管是設(shè)計(jì)一個(gè)頁面還是一個(gè)內(nèi)容區(qū)，都需要注意邊距、間距和行距。我們常說一個(gè)區(qū)域要留出左右天地來，而首屏底部這個(gè)旋轉(zhuǎn)火鍋的介紹，就是典型的不留天不留地：
再比如下面這一屏，投資優(yōu)勢(shì)底下的爆炸形底板，和上面的圖片、下面的圓角底板都緊緊挨在一起。圓角灰色底板內(nèi)，白色菱形板塊也是頂天立地不留空白，內(nèi)部的文字也沒有考慮留白：
整個(gè)給人的感受，就是一個(gè)字：“擠”，直接結(jié)果就是讓用戶閱讀困難，閱讀體驗(yàn)差，降低耐心，然后退出。
問題3：字體過多
還是以上圖為例。僅這一張圖內(nèi)就出現(xiàn)了造字工房悅黑體、幼圓體、宋體、隸書體4個(gè)字體，更別說整個(gè)落地頁里還有手寫體、粗宋繁體、圓體、綜藝體、楷書……落地頁上半部分的內(nèi)容字體，和下半部分也不一致，可想設(shè)計(jì)師在做的時(shí)候，腦袋里并沒有一個(gè)整體規(guī)劃。
用戶沒有受過專業(yè)訓(xùn)練，不會(huì)像我般知道問題所在，他只會(huì)覺得不舒服，無法抓到你的重點(diǎn)。
就好像你同別人溝通，即使說的內(nèi)容再好，但是如果你一會(huì)兒文言文，一會(huì)兒現(xiàn)代文，一會(huì)兒英語，一會(huì)兒法語，看起來很酷炫，但其實(shí)沒人明白你說了什么。
其實(shí)要想讓用戶看著舒服非常簡單，只要給自己制定一個(gè)排版規(guī)則：左右邊距留多少、段落間距留多少、行距多少……形成一個(gè)規(guī)則，大標(biāo)題、中標(biāo)題、小標(biāo)題、內(nèi)容文字、slogan文字有固定字體和字號(hào)……這些只要稍稍關(guān)注一下不難做到——概括一下就倆字：有序。
微信關(guān)注
手機(jī)網(wǎng)站