經過一個春節假期,闊別一個月的落地頁優化課程又和大家見面了,歡迎大家繼續關注LPO系列教程的第五彈,第五篇文章要跟大家聊的是落地頁網頁優化中跟設計有關的那些事兒。

LPO課程安排

首先有句話要說在前頭,那就是筆者本人並沒有設計相關的背景和實際技能,Photoshop的水平也就是裁個圖打個碼的程度,所以在這裡討論的設計確切點兒說是從統籌一個項目或管理者的角度看待網頁設計這件事兒,跟大家介紹一些跟網頁設計有關的基本原則,幫助大家避免和設計、美工打交道的時候話說不到點兒上或者滿嘴都是外行話。相信大家如果在實際工作中需要管理設計人員或需要和設計人員協作的話,那麼本節課介紹的很多內容會對大家有幫助。

言歸正傳,很多人都認為設計的一大要務就是要確保「好看」、「漂亮」,而且覺得這跟設計師本人的審美關係非常大,很多人甚至認為審美是可以培養的,但以我多年和設計打交道的經驗來看,

審美

以清朝的雍正皇帝和他兒子乾隆皇帝為例,兩人雖然是兩代人,但考慮到都是生於皇家,而且再考慮到當時清朝實行閉關鎖國的政策,可以粗略判斷兩人所受到的熏陶和教育大體相當,但仍然在審美情趣上大相徑庭,一個追求淡雅的性冷淡風,另一個則是大紅大綠農家樂風。可見審美這種事情真不是勉強得來的。

那麼到底哪些是能夠控制的呢?我們要從設計的定義上來入手,設計,是把一種設想,通過合理的規劃、周密的計劃,通過各種感覺形式傳達出來的過程。在這個定義中,「感覺」肯定是靠審美,而「合理的規劃」和「周密的計劃」則不管是不是設計人員都是可以實踐的。

那麼具體到我們可以干預的領域,主要是兩大領域,那就是風格配色

風格和配色

風格(Style)是一個抽象概念。而一個網站或落地頁的風格是指站點的整體形象給瀏覽者或訪客的綜合感受。這個「整體形象」包括站點的CI(標誌、色彩、字體、標語)、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

而在網頁的風格上,是有章可循的,因為已經有足夠的前人經驗可以作為參考,接下來就給大家介紹幾個目前常用的網站設計風格:

風格1

風格2

風格3

風格4


風格5

風格6

選擇了適合自己的業務的落地頁風格之後,我們再來看配色,配色的小技巧非常好掌握:

  1. 用一種色彩:這裡是指先選定一種色彩,然後調整透明度或者飽和度,這樣的頁面看起來色彩統一,有層次感;
  2. 用兩種色彩:先選定一種色彩,然後選擇它的對比色;
  3. 用一個色系:簡單的說就是用一個感覺的色彩。

這些小技巧的共同點就是,顏色要少。就像我們圖片中模特身上穿的職業裝一樣,顏色的選擇一定不能太多。另外解釋下什麼叫做對比色色系

我們看下下面這個色盤,在這個色盤中有三原色:紅、黃和藍,三個原色彼此混合就誕生了三間色:橙、綠和紫,原色和間色的過渡就是複色:

一種顏色在這個色盤上對面120?到180?之間的顏色就是它的對比色,而相鄰的幾種顏色就構成一個色系。

在顏色的辨認上不但專業人士與非專業人士之間有很大區別,就連男女之間都有天然的鴻溝存在,下圖就是網上一個流傳非常廣的圖片,形象地闡述了在男女眼中顏色的數量的差別,相比之下,男性眼中的顏色種類其實非常匱乏:

男女差異

而不同的顏色在市場營銷領域也都有約定俗成的具體含義,例如不同的公司都會在自己公司logo的顏色選擇上煞費苦心,甚至不惜豪擲千金去聘請頂級設計師給自己設計最符合自身理念的logo,原因就在於此。

logo顏色

下圖就非常清晰地介紹了不同顏色在營銷領域所代表的不同意思:


有了對於風格和配色的了解,相信這個時候大家已經對於和設計溝通有些自信了,至少不會滿嘴外行話了,但畢竟我們不是專業設計人員,所以在於設計溝通的過程中,不要妄想提出「畫龍點睛」的「真知灼見」,更靠譜地做法是要」不求有功,但求無過「,因此,在落地頁設計過程中的幾個大坑我們一定要耳熟能詳,並且務必避開。

接下來就和大家介紹下落地頁設計中容易犯的,但同時也是要盡量避免的幾個重大錯誤:

落地頁設計重大錯誤之1:模糊的行動號召(CTA)

模糊的行動號召意味著訪客不知道或不清楚到底這個頁面是想讓自己做什麼。當然隨著互聯網推廣的逐漸深入,目前犯這樣低級錯誤的已經是越來越少了,但仍然在一些細節處部分存在。

這裡找了兩家外語培訓機構的落地頁來舉例,當然已經隱去了品牌信息。

第一家的按鈕上的文字是」立即行動「,其實這就是一句毫無價值的廢話,應該在這麼重要的視覺焦點上簡明扼要地告訴訪客提交個人信息之後到底能夠獲得什麼。

第二家左側通過一些設計元素比較模糊地告訴了訪客提交申請之後可以獲得一些諸如」英語水平測試「之類的福利,但仍然讓人不知道具體都是什麼,英語水平測試是個很模糊的概念,到底測試的是什麼?是聽力?是口語?還是單詞量?

落地頁設計重大錯誤之2:選擇障礙

第二個重大錯誤就是落地頁上元素或行動號召太多,讓人無從下手,這種情況在軟體下載行業居多,下面就是一個軟體下載網站上SPSS的下載頁面:

在這個頁面上,明顯的下載按鈕就有5個之多,很多人可能認為這樣的做法是區分不同的下載渠道,確保用戶能至少通過一個好用的渠道下載到相應的軟體,但實際操作的時候我們經常發下有些按鈕只是將大家引導到另一個下載頁面,甚至有時候居然會繞了一個圈後再次回到原來的頁面,這樣做只能是為自己的網站憑空增加一些不必要的pageview,但對於用戶體驗來說是巨大的傷害,除非是故意這麼做……

落地頁設計重大錯誤之3:視覺分散

視覺分散的罪魁禍首往往是以下幾個:

  1. 狂野的背景色;
  2. 花哨的文字;
  3. 過度的視覺裝飾;
  4. 動畫或視頻。

其中最為完美符合這些特點的其實是一種不太正經的網站,在這裡給大家截一張經過了複雜打碼處理的截圖,感謝Doge的友情出鏡,讓大家免於尷尬。

落地頁設計重大錯誤之4:掛羊頭賣狗肉

這類的錯誤產生的原因往往和不恰當的推廣創意有關,有的時候因為過於在意獲量,或者在廣告的匹配方式上沒有把握好,會把訪客帶到一個與他們預期完全不同的一個落地頁,例如下面就是一個讓人啼笑皆非的案例。

當搜索」比賽方案「的時候我們看到了兩條比較搞笑的廣告,從關鍵詞的飄紅來看,應該是針對關鍵詞採取了廣泛匹配,所以這個廣告的出現除了不是很精準之外倒也沒有什麼不妥之處,不過讓人注意的是這個文案的撰寫確實是很奇葩,在這個時候,雖然這個廣告結果與網民的需求」比賽方案「大相徑庭,但也不排除一部分人忍不住好奇點擊了這些廣告。

結果點擊之後看到的是什麼呢?真的是一個奇葩比賽的方案嗎?非也,不出意外是一些不可描述的、難辨真偽優劣的藥品描述,為了不誤導大家,我已經對所有文字都做了遮蓋處理。

接下來的三個重大錯誤:

落地頁設計重大錯誤之5:文字太多

落地頁設計重大錯誤之6:表單過長

落地頁設計重大錯誤之7:缺少信任和信譽

因為比較好理解,所以不做過多描述,請大家自行想像。

落地頁設計重大錯誤之8:不符合平台規則

最後這條必須跟大家明確地解釋一下,眾所周知,各家媒體平台都有自己的相關廣告政策,其中針對落地頁幾乎都有類似的規定,那就是在收集用戶信息的時候必須出示《隱私條款》和《使用條款》,同時在落地頁底部必須提供實體地址信息以及ICP備案號,如果是金融相關的內容還必須有類似」投資有風險,入行需謹慎「的警示語,也就是下面截圖的這些:

沒有這些的話,就不是投放效果好不好的問題了,而是媒體平台根本就不可能讓你投放(當然偶爾有漏網之魚)。

以上就是本次課程的主要內容,再次強調下,本人並沒有設計相關的背景和技能,本文涉及觀點都是站在統籌一個項目或管理者的角度,希望能夠對於大家避免滿嘴外行話或提升與設計人員協作的效率有所幫助。

推薦閱讀:

相关文章