我們都知道，大部分落地頁(yè)的任務(wù)是要促成轉(zhuǎn)化，而轉(zhuǎn)化的前提是要先留住客戶。也就是說(shuō)，從用戶點(diǎn)擊廣告進(jìn)入落地頁(yè)跳轉(zhuǎn)開(kāi)始，到提起興趣之前，不能令其產(chǎn)生關(guān)閉頁(yè)面的想法。

然而現(xiàn)實(shí)情況是，大部分用戶在進(jìn)入頁(yè)面后還沒(méi)正經(jīng)看兩個(gè)字就已經(jīng)被排版、圖片等造成的不舒適感煩得退出去了，哪里還等得到轉(zhuǎn)化……

尤其是下面這個(gè)落地頁(yè)。作為一個(gè)17年工齡的老廣告人，看到這個(gè)設(shè)計(jì)時(shí)，我的第一感覺(jué)是要珍惜——能在一個(gè)頁(yè)面里完美的跳入每一個(gè)設(shè)計(jì)忌諱的坑，也是難得一見(jiàn)的。不管是整體結(jié)構(gòu)、頁(yè)面排版，還是圖片選擇、色彩搭配等，都完美避開(kāi)了所有的正確做法。

設(shè)計(jì)邏輯vs美女邏輯

設(shè)計(jì)邏輯vs美女邏輯

落地頁(yè)給到人的第一眼感覺(jué)，可以理解成人正常情況下猛然看到一個(gè)事物時(shí)的整體感受。

就像我們對(duì)一個(gè)姑娘的第一印象是比較干凈、時(shí)尚、眉清目秀、氣質(zhì)良好，然后我們的印象里就會(huì)一直記得這姑娘是美女，實(shí)際上你沒(méi)有細(xì)看，她也許長(zhǎng)相一般。

展開(kāi)全文

落地頁(yè)設(shè)計(jì)也是如此，第一眼美很重要。類似排版亂、圖片沒(méi)有感覺(jué)、loading時(shí)間長(zhǎng)這些問(wèn)題都會(huì)給到用戶很糟糕的第一眼感覺(jué)。所以，一個(gè)想要吸引用戶留下來(lái)看到你銷售文案的落地頁(yè)，需要特別注意下列3個(gè)節(jié)點(diǎn)的設(shè)計(jì)：

第一眼喚起情緒

一個(gè)好的落地頁(yè)，給人的第一眼需要符合以下兩個(gè)條件：

1、不能雜亂無(wú)章。第一眼雜亂無(wú)章會(huì)增加閱讀壓力，有壓力自然會(huì)逃避。

2、幾乎在第一眼的同時(shí)，進(jìn)入用戶眼睛的圖片要能激發(fā)起用戶的認(rèn)同感，用戶才會(huì)產(chǎn)生興趣。

上面兩點(diǎn)都實(shí)現(xiàn)，也就是既看著不累，又有感覺(jué)，用戶才會(huì)暫時(shí)留下來(lái)。

第二眼展開(kāi)勾搭

第一眼過(guò)關(guān)之后，就是第二眼。

剛剛第一眼咱們只要是照顧用戶的情緒，先讓他穩(wěn)下來(lái)，現(xiàn)在第二眼要做的事情就是要把我們想要用戶看的東西，清晰的放在他們自然會(huì)看的地方，切記不要用多余無(wú)用的東西來(lái)影響他們。

第三眼搞定錢包

接下來(lái)就好辦了，人我們勾搭住了，只要及時(shí)給到他一個(gè)方便易懂好操作的引導(dǎo)方式，促成他們行動(dòng)就好了。

當(dāng)然，這個(gè)方便易懂好操作要看你推廣的是什么類型的用戶，比如針對(duì)年輕和年長(zhǎng)用戶考慮的就不一樣，還要看你的目的，是要指引咨詢還是要指引填表單，如果這時(shí)用戶找不到行動(dòng)的進(jìn)一步指引，可能他不會(huì)有耐心仔細(xì)再翻一遍，導(dǎo)致前功盡棄。

設(shè)計(jì)視角VS用戶視角

設(shè)計(jì)視角VS用戶視角

簡(jiǎn)單介紹了一下落地頁(yè)設(shè)計(jì)的要求，我們一起回到本文開(kāi)頭那個(gè)值得全行業(yè)人士珍藏的信息流廣告頁(yè)面，以他為案例，說(shuō)說(shuō)，究竟犯了哪些忌諱，應(yīng)該怎么調(diào)整。

品牌logo到底要不要放

這是某個(gè)廚房改造公司制作的廣告落地頁(yè)，用戶點(diǎn)擊廣告進(jìn)入后看到的第一眼是下面這個(gè)樣子的，出于人道主義的考慮，我們匿掉了品牌logo、名稱等信息。

這個(gè)落地頁(yè)的整體結(jié)構(gòu)包含頁(yè)頭、導(dǎo)航、頭圖、主體及底部轉(zhuǎn)化浮層——而這，其實(shí)是一個(gè)門戶網(wǎng)站的設(shè)計(jì)結(jié)構(gòu)。

事實(shí)上，用門戶網(wǎng)站的結(jié)構(gòu)去做信息流廣告的落地頁(yè)是一種很不討巧的方式。

信息流廣告落地頁(yè)設(shè)計(jì)重點(diǎn)是要在奇短無(wú)比的時(shí)間內(nèi)抓住用戶的痛點(diǎn)，狠抓猛打，直刺人心，大量?jī)?nèi)容的堆砌很容易讓用戶喪失掉那少得可憐的耐心。

比如導(dǎo)航。

因?yàn)殚T戶網(wǎng)站是對(duì)某個(gè)企業(yè)或產(chǎn)品的從整體到細(xì)節(jié)的詳細(xì)描述，信息流很大，且架構(gòu)復(fù)雜，需要多次跳轉(zhuǎn)，為了讓搜索進(jìn)來(lái)的用戶找到要跳轉(zhuǎn)的地方，就需要用“導(dǎo)航“來(lái)指引用戶。

而信息流廣告的前提并非是基于用戶的主動(dòng)搜索，他是不想看廣告的，在這樣一個(gè)心理背景下設(shè)置導(dǎo)航，顯然高估了用戶的耐心，以為”用戶會(huì)想了解我們更多呢！”事實(shí)上用戶只有在產(chǎn)生強(qiáng)烈興趣并且對(duì)產(chǎn)品有剛需時(shí)，才“也許”會(huì)想要多了解，在此之前，這些導(dǎo)航的設(shè)置除了讓用戶覺(jué)得繁雜凌亂，別無(wú)它用。

再比如頁(yè)頭。

這一頁(yè)的頁(yè)頭部分占掉了1/6那么大的屏幕，可惜，對(duì)于一個(gè)信息流廣告落地頁(yè)來(lái)說(shuō)，這1/6版面的logo展示的毫無(wú)意義。

為什么呢？還是從門戶網(wǎng)站說(shuō)起。

一般門戶網(wǎng)站的頁(yè)頭都會(huì)做logo，也不需要做很大，只要存在就好，反正用戶來(lái)回主頁(yè)都是會(huì)看到的，但是落地頁(yè)里用logo目的是要品牌露出，是要讓用戶知道你看的是我這個(gè)品牌的東西，那么就不如把logo放在主圖位置更醒目，更容易被人看到。

塞的內(nèi)容越多效果越糟

排版包含圖片的大小、位置、排列、文字的行距、邊距、間距等。從理論層面看，排版就像是設(shè)計(jì)師的邏輯，是一個(gè)已經(jīng)很成熟的系統(tǒng)理論，也就是說(shuō)，怎樣排更適合用戶體驗(yàn)是有規(guī)則可循的，然而，本案中的這個(gè)落地頁(yè)完美的避開(kāi)了所有正確排版的規(guī)則。

比如頭圖（見(jiàn)上一張圖的結(jié)構(gòu)說(shuō)明），占比很大，卻沒(méi)有表達(dá)出什么。

“夢(mèng)想中的廚房”部分，依然是門戶頁(yè)的設(shè)計(jì)習(xí)慣（當(dāng)然也可能是設(shè)計(jì)師直接搬了模板照抄），在那么逼仄的地方排了三張圖。

講真，不要妄想所有點(diǎn)擊你廣告的用戶都是在拿著iPhone Plus甚至是iPad看廣告，就算是Plus的屏寬，這么三張圖擠在那兒也會(huì)嚴(yán)重影響視覺(jué)舒適度和信息傳播度，就像此案中，完全沒(méi)有將“夢(mèng)想中的廚房”的感受傳達(dá)給用戶。

還有字體。整個(gè)頁(yè)面多達(dá)5種字體（還不包括斜體等變體），大標(biāo)題、標(biāo)題、正文、題圖字等的區(qū)分也很凌亂——設(shè)計(jì)師似乎完全沒(méi)有計(jì)劃，大概只是覺(jué)得：“嗯，剛剛用了這個(gè)字體了……那么，現(xiàn)在來(lái)?yè)Q一個(gè)吧！”這樣無(wú)規(guī)則的設(shè)計(jì)會(huì)給用戶傳遞一種混亂的信息，影響用戶看到有意義的內(nèi)容，導(dǎo)致用戶失去往下拉的興趣。

不僅如此，所有需要留出更多行間距、邊距的地方，設(shè)計(jì)師一概填滿了元素；填寫信息部分，兩個(gè)文字框和申請(qǐng)按鈕之間的間距都不一致……啊啊啊尷尬癌都要犯了……這些都會(huì)增加視覺(jué)上的擁擠感，增加用戶的閱讀門檻，讓用戶失去耐心，提高跳出率。

比如下面這個(gè)：左右兩邊邊距不等

比如“改造后”三個(gè)字幾乎占滿了藍(lán)綠色底圖：

比如這個(gè)表單，三個(gè)元素之間的間距不等：

圖片是用來(lái)傳達(dá)情緒的

圖片在落地頁(yè)中，往往起到喚起情緒、加強(qiáng)情緒、促進(jìn)行動(dòng)的作用，因此，圖片選擇的好壞非常重要。而本案中的很多圖片選擇稱得上詭異……

比如下面這張。為了指出用戶的痛點(diǎn)，設(shè)計(jì)師在臟亂差廚房圖集錦后，放了一張家庭主婦大聲呼喊的圖片，圖片上還配了文字：您，是否還在隱忍廚房的凌亂？？？

我把圖放大一些，大家一起來(lái)感受一下，有沒(méi)有覺(jué)得哪里不對(duì)？

主婦一臉崩潰，卻對(duì)你說(shuō)：“您，是否還在隱忍？“——這樣的對(duì)話……現(xiàn)實(shí)么？

但如果改成這樣呢？

是不是感覺(jué)主婦真誠(chéng)了許多？

再來(lái)看一組圖片。

為了說(shuō)明廚房改造后的“成功案例”，落地頁(yè)上放了一組這樣的圖片：

從設(shè)計(jì)角度看，圖片的內(nèi)容、形式、構(gòu)圖、角度都是在傳達(dá)情緒?？墒沁@張圖給到用戶的感覺(jué)是怎樣的呢？是會(huì)覺(jué)得“真的好贊哦！”，還是覺(jué)得“啊，這就是改造完的？還不如我家的呢……”

再比如這樣的一個(gè)廣角俯視圖：

既然是整理收納后的圖片，應(yīng)當(dāng)盡可能體現(xiàn)一個(gè)“完美”廚房的樣子，傳遞給用戶一種好想體驗(yàn)的感覺(jué)，可圖片中這滿滿的煙火氣……你是想讓我說(shuō)你實(shí)誠(chéng)呢？還是說(shuō)你不懂營(yíng)銷呢？

底線是不要擾亂用戶視線

依然是頭圖，這次我們來(lái)說(shuō)他的配色問(wèn)題（這個(gè)頭圖到底犯了多少錯(cuò)，感興趣的可以回頭去點(diǎn)點(diǎn)……）

我們把頭圖放到最大，發(fā)現(xiàn)依然需要定睛仔細(xì)看才能看清“不負(fù)好時(shí)光”那一堆字，直接手機(jī)上看的話，這幾個(gè)字就是花的，看不清楚。

也許設(shè)計(jì)師會(huì)說(shuō)：“本來(lái)就不需要看清啊，就是個(gè)擺設(shè)??！”

可是，一個(gè)設(shè)計(jì)元素，連看都看不清，留著它過(guò)年么？我們不指望一個(gè)元素既好看又能傳達(dá)有效信息，但它起碼不要擾亂用戶視線，影響用戶看到真正有效的信息。

還有這個(gè)：

同樣的綠色背景上，白色文字清晰可辨，而橘色則糊成一鍋。為什么？因?yàn)閳D片底色的明度和文字色的明度太過(guò)接近，明度接近會(huì)導(dǎo)致底色和文字沒(méi)有明確邊界，導(dǎo)致我們無(wú)法清楚的辨認(rèn)出文字。

不得不說(shuō)，在信息流廣告投放的過(guò)程中，設(shè)計(jì)的價(jià)值是被嚴(yán)重低估的。設(shè)計(jì)實(shí)則是營(yíng)銷重要的一部分，和營(yíng)銷一樣有套路可循，那就是以用戶為主導(dǎo)，從用戶的視角去看，他怎樣才更愿意看下去。今天之后，當(dāng)你再拿到設(shè)計(jì)任務(wù)時(shí)，希望你先別急著下手，去體會(huì)一下文案表達(dá)的意思，去感受一下圖片的調(diào)性，去想象一下用戶的心情，千萬(wàn)別做只會(huì)用關(guān)鍵詞搜索配圖的設(shè)計(jì)。