落地頁設(shè)計(jì)有問題,無法達(dá)成轉(zhuǎn)化,如何修改?

不要迷信設(shè)計(jì)師是哪個(gè)院校、哪個(gè)專業(yè)畢業(yè)的,美院畢業(yè)的只能說明他曾經(jīng)在繪畫及相關(guān)課程上比普通人受過更多的訓(xùn)練。然而宣傳推廣的視覺效果不僅需要這些基礎(chǔ)訓(xùn)練,更多的是經(jīng)驗(yàn)積累,系統(tǒng)學(xué)習(xí),以及對人性的把握,對市場的了解。
通過眼睛看世界,是我們每個(gè)人與生俱來的能力。審美能力雖然有高下之分,但實(shí)際上也是人人皆具的。
然而,是否只要會(huì)看、有審美、有用戶視角,就可以解決宣傳推廣中遇到的視覺效果問題呢?
要知道,一個(gè)頁面的設(shè)計(jì)水平,一定程度上決定了頁面的轉(zhuǎn)化率。尤其是在信息流廣告界,頁面設(shè)計(jì)的好壞,一定程度上也決定了廣告賣貨能力的高低。
作為一個(gè)從事視覺品牌工作的人,我?guī)缀趺刻於济媾R咨詢客戶們的關(guān)于視覺效果的各種各樣的問題。而我賴以解決這些問題的技能,不僅僅是基礎(chǔ)審美和用戶視角,甚至也不止是我曾經(jīng)在高校學(xué)習(xí)過美術(shù)基礎(chǔ)課程,以及擁有大部分設(shè)計(jì)類軟件的使用技能等。
那么,解決宣傳推廣中視覺效果的問題到底需要什么技能呢?到底給出怎樣的建議,才是真正具備可操作性的呢?
作為一個(gè)有著大量的案例實(shí)操的從業(yè)者,我對各種各樣的視覺理解角度有一定的了解,所以今天我們就來聊一聊,不同的人,看到同樣的視覺類問題時(shí),都會(huì)給出怎樣的答案吧!
這是關(guān)于來自一個(gè)社群的討論截圖。有一位童鞋往群里發(fā)了他們正在推廣的店鋪首頁,希望群里的小伙伴們可以給一些建議:
很快,群里的小伙伴就有一搭沒一搭的回復(fù)起來,大體的畫風(fēng)是像下圖這樣的:
PS:因?yàn)橥惢卮鹛嗔?,就不一一放出了?/p>
上述這些回復(fù),屬于
類型一:圍觀群眾
所謂圍觀群眾:
大多數(shù)人都有基礎(chǔ)的審美能力,當(dāng)他們站在用戶視角審美時(shí),總是可以感受到這個(gè)設(shè)計(jì)的“基調(diào)”,但卻說不清是哪些元素或構(gòu)架導(dǎo)致他們產(chǎn)生這樣的“感覺”。
就像上圖中,大家都看出了這個(gè)頁面“刺激不了消費(fèi)者的購買欲望”、“沒有逼格”,卻無法指出更具體的問題。
眾多圍觀群眾中,有一位小哥提出了這樣幾個(gè)方向的修改意見:
建議1總結(jié)一下就是:用二類電商的頁面模板。
但是在我看來,這個(gè)頁面本身(下面會(huì)放出原始頁面)就是用的某一個(gè)模板,只是屬于改模板改毀了的范疇。
小哥繼續(xù)給建議:
所以建議2總結(jié)一下就是:增加品牌故事,調(diào)整排版、配色和設(shè)計(jì)。
可是在我看來并沒有明確指出問題在哪,怎么改。
小哥很熱心,建議一條追著一條,這次是投放方向:
就我個(gè)人的看法,小哥說的這個(gè)方向沒有問題,但是,這是個(gè)店鋪首頁……并不是廣告落地頁,落地頁還是應(yīng)該更有針對性的設(shè)計(jì)才好……
最后小哥說:
如圖,小哥的最終建議方案是:找個(gè)某美院的學(xué)平面的學(xué)生,花幾千塊做一下。
實(shí)際上看一下整段對話,對于提問者來說,小哥只給了他一個(gè)信息:網(wǎng)頁不行,找人重做。
作為一個(gè)非視覺專業(yè)的人,我覺得這位小哥能提到這些,說明在這方面應(yīng)該是有一定悟性的,所以他屬于:
類型二:有悟性的
所謂有悟性的:
往往能夠憑借感覺和部分自己行業(yè)的經(jīng)驗(yàn),指出問題“來自哪里”,但往往沒有解決方案,或者給出并不具備指導(dǎo)意義的所謂“建議”。
就像上面這位小哥,從幾個(gè)不同的角度都給出了解決方案,但是這些建議對客戶的實(shí)際操作,沒有任何指導(dǎo)意義。
這是一個(gè)很尷尬的事情,我們常常需要用戶視角,但是無論從提問方還是回答方,如果沒有專業(yè)人士把控的話,最后這許多的“用戶視角”其實(shí)并不能幫到客戶什么。
我們來看看被批的一塌糊涂的這個(gè)頁面長什么樣吧:
先上第一屏,匿掉企業(yè)信息
如果這個(gè)提問者是我的客戶,當(dāng)他把這個(gè)頁面展示在我面前時(shí),我們的解決思路常常是這樣:
- 這個(gè)頁面是什么用途?
- 從頁面邏輯來看,它是否符合用戶認(rèn)知?
- 從設(shè)計(jì)層面(排版、配色、字體、字號、間距)看,它是否能夠服務(wù)于頁面的“目標(biāo)”,而不是干擾目標(biāo);
- 最后,將問題整理出來,給出詳細(xì)的、可執(zhí)行的解決建議方案。
對應(yīng)的,這是
類型三:專業(yè)人士
所謂專業(yè)人士:
同上兩種人一樣,都可以看到這個(gè)頁面能給予用戶什么樣的感受;同時(shí),專業(yè)人士會(huì)分析,這種感受是由于頁面中的哪一部分造成的,以及預(yù)判這種感受會(huì)令用戶采取怎樣的行動(dòng)。隨后,給出有針對性的解決方案,及修改建議。
那么我們就按照這個(gè)思路依次來看一下這個(gè)案例頁面到底是否符合標(biāo)準(zhǔn)吧:
1. 頁面的用途
先來談?wù)勥@類電商頁面的出現(xiàn)場景。
該頁面的網(wǎng)址是:http://wx.balbala……(balabla開始就是我編的了)
前面是“wx”,代表這個(gè)店鋪是依附于微信公眾號的。
這說明:
- 一方面,它通過公眾號內(nèi)容引流,沉淀粉絲,從公眾號推送或者底部導(dǎo)航入口可以進(jìn)入店鋪,產(chǎn)生購買。
- 另一方面,它通過微信朋友圈轉(zhuǎn)發(fā)引流,并產(chǎn)生購買。
也就是說,這個(gè)頁面,應(yīng)該兼具引流、吸粉、品牌認(rèn)知植入、產(chǎn)品宣傳、銷售這些功能。
當(dāng)然,這些功能中,除了銷售是需要該頁面主力完成之外,其它幾項(xiàng)都是應(yīng)該由公眾號和店鋪頁合作完成的。
也就是說,在其它功能性上,該頁面應(yīng)該起到輔助作用。
那我剛剛為什么會(huì)說,這像是一個(gè)淘寶店移動(dòng)端的模板改的呢?
原因如下:
我們能看到這個(gè)排版有一個(gè)明顯的問題:
- 第一屏沒有清晰的表達(dá)“我是誰”,“我是干嘛的”,“我能給你什么”。這個(gè)帶來的首要問題,就是無法很好的完成銷售功能。其次對于品牌認(rèn)知植入、產(chǎn)品宣傳、引流、吸粉也有影響;
- 頭圖部分金發(fā)美男彈鋼琴,再加上旁邊的黑膠唱片元素,會(huì)給人一種賣樂器或唱片的感覺。這個(gè)帶來的首要問題是品牌認(rèn)知植入上,增加了用戶的門檻;
- 然后莫名的出現(xiàn)一個(gè)搜索,用戶連你賣什么都不知道,基本上這個(gè)搜索是用不到的。任何多余的元素,如果沒有存在意義,就不應(yīng)該出現(xiàn)。
- 再然后什么都不說,很粗暴的上了三張看不清楚內(nèi)容的優(yōu)惠券。賣家主觀的認(rèn)為優(yōu)惠券可以帶來銷量,然而這里出現(xiàn)優(yōu)惠券不僅不能起到增加銷量的作用,反而會(huì)分散用戶注意力,讓用戶有限的耐心無法集中在產(chǎn)品上。
而上面這些,都像是淘寶店的做法。
淘寶店可以這么做(雖然我們也不推薦不合品類的胡來設(shè)計(jì)),因?yàn)樵陔娚藤徫锲脚_這個(gè)環(huán)境中,我們大概率并不是由首頁進(jìn)入店鋪,而是有目的的搜索寶貝;并且從寶貝頁面中的店鋪鏈接進(jìn)入首頁,我們很清楚我們在找什么。
而首屏店鋪類別不夠明確這件事就顯得不那么重要了,并且在用戶知道他們要買什么的情況下,三張優(yōu)惠券也恰到好處的切中了用戶的痛點(diǎn)。
如上述,以這個(gè)設(shè)計(jì)師的情況,從挑模板就開始出錯(cuò)了;那么即使換個(gè)模板,改完也可以很糟糕。
所以圍觀群眾們給出的“直接用模板”的建議,并不適合這個(gè)店鋪,因?yàn)?strong>設(shè)計(jì)師的問題在于:沒有意識到不同環(huán)境下的店鋪頁面應(yīng)該做針對性的設(shè)計(jì)。
對這個(gè)頁面來說,最先應(yīng)該調(diào)整的,是頁面設(shè)計(jì)的整體思路。即:我賣什么,我能給你什么,我的東西多好……這類信息應(yīng)當(dāng)放在首屏。
2. 頁面的邏輯
從排版邏輯上講,應(yīng)當(dāng)遵循這個(gè)店鋪的環(huán)境:微信店鋪
建議如下:
①“頁頭”,包含logo和能體現(xiàn)店鋪風(fēng)格的美圖。不需要品牌故事,但是需要強(qiáng)調(diào)logo,以增加品牌識別度,盡可能讓用戶對品牌形成概念。進(jìn)而沉淀粉絲。
是的,這個(gè)品牌連logo都沒有放,打碼的時(shí)候我都有點(diǎn)不適應(yīng),差點(diǎn)把slogan給匿掉。
②“橫欄展示”,主打產(chǎn)品、新品在場景中的展示圖,或者面積較大的優(yōu)惠信息等。
優(yōu)惠券這種東西在一個(gè)百分百寬橫幅優(yōu)惠信息中體現(xiàn)就好。例如:秋季開學(xué)折扣橫幅海報(bào)。更多對新品、主打品的大圖展示、以及橫幅海報(bào)式的折扣信息,都能有效提升用戶的購買沖動(dòng)。
③“主要類目導(dǎo)航”,從這個(gè)頁面設(shè)計(jì)上可以看出,該店鋪并沒有很復(fù)雜的分類類目,沒必要把“類目”作為一個(gè)單獨(dú)的導(dǎo)航按鈕。
不妨按照常用場景分類為(我編的)“宴會(huì)”“上班”“休閑”“定制”……這一類的,方便用戶根據(jù)場景進(jìn)入挑選,降低選擇障礙,提高銷售量。
④“產(chǎn)品展示”,根據(jù)銷量、加購數(shù)量、新品推廣計(jì)劃等進(jìn)行產(chǎn)品排放,主打好賣的產(chǎn)品以大圖形式展示……讓用戶最先看到經(jīng)過市場篩選的最受歡迎的產(chǎn)品,進(jìn)一步增加加購和下單。
等等等等。限于篇幅這里就不一一列出了。
3. 頁面設(shè)計(jì)
具體到設(shè)計(jì),需要調(diào)整的地方也很多。先一起看下截圖:
3.1 配色過于雜亂
深淺藍(lán)、灰紫、紅、橙、黃……(真的,這個(gè)設(shè)計(jì)太勇敢了);
導(dǎo)致結(jié)果:增加用戶閱讀難度,提高跳出率;
建議:主色調(diào)不要超過三個(gè),并且符合整體調(diào)性。同色系輔助色調(diào)可適當(dāng)增加。明度接近的灰底紅字這種增加閱讀困難的配色一定要摒棄。
3.2 字體過于雜亂
一眼望去就有6種以上的字體,完全沒有規(guī)則;
導(dǎo)致結(jié)果:增加用戶閱讀難度,提高了跳出率;
建議:海報(bào)字體統(tǒng)一、大標(biāo)題統(tǒng)一、內(nèi)容字體統(tǒng)一,不要換一個(gè)地方就換一個(gè)字體。
3.3 字體識別性太差
導(dǎo)致結(jié)果:增加用戶閱讀難度,降低用戶對推廣信息的關(guān)注,提高跳出率,降低購買數(shù)量。
建議:類似方正剪紙?bào)w這類字體,且不說方正的版權(quán)問題,但從視覺角度講,識別性太低(還是在下單立減的重要位置)并且風(fēng)格調(diào)性與整體不符(男士襯衫就不用這么Q彈可愛了)
3.4 排版沒有邏輯
很明顯這個(gè)設(shè)計(jì)師不能做到掌控基礎(chǔ)的對齊、間距等設(shè)計(jì)因素。那么他操作設(shè)計(jì)時(shí),想要用圖片流的形式參差排版時(shí),就會(huì)十分混亂,毫無邏輯(設(shè)計(jì)師對頁面把控能力太弱,沒有整體概念,這種情況下,只能是給出十分明確的指導(dǎo)需求,才有改善的可能性。)
導(dǎo)致結(jié)果:用戶閱讀體驗(yàn)差,找不到想要的產(chǎn)品,喪失耐心,提高跳出率,降低加購及購買行為概率
建議:先根據(jù)頁面邏輯整理框架,注意設(shè)置頁面規(guī)則,包括邊距、間距、參差規(guī)則、圖文搭配規(guī)則等等。
就不一一說明了。
關(guān)于群眾提出的“在校美校生”建議
我相信經(jīng)常需要同設(shè)計(jì)打配合的人都知道,以上這個(gè)落地頁里涉及的問題,極有可能就是某個(gè)美術(shù)院校畢業(yè)的學(xué)生工作一年半載之后做出來的結(jié)果。
我之前的一個(gè)外包小姑娘,就是某美院在校生,我可以交代給她的工作不能是需要整體思考能力的工作,即使交代到十分清楚,即使我給出樣式讓她一模一樣照抄,結(jié)果依然需要反復(fù)修改——因?yàn)樗鵪et不到我需要她抄的重點(diǎn)是什么,就會(huì)在小細(xì)節(jié)上出錯(cuò),這就是經(jīng)驗(yàn)的問題。
也曾經(jīng)有一個(gè)老客戶找我做咨詢,咨詢前先告訴我,他們新招來了一個(gè)我國一流美院畢業(yè)的設(shè)計(jì)師。當(dāng)時(shí)我身邊認(rèn)識的設(shè)計(jì)師,但凡是從這個(gè)美院出來的,必然先經(jīng)歷了三星廣告奧美電通等500強(qiáng)4A公司的洗禮,作品都不俗。
所以我的第一反應(yīng)是:客戶所說的這個(gè)設(shè)計(jì)師做的東西,最多經(jīng)驗(yàn)不足,應(yīng)該不會(huì)有大問題。
然而!當(dāng)我真正拿到這個(gè)設(shè)計(jì)師做的設(shè)計(jì)稿的時(shí)候,排版配色依然無語到超乎了我的想象。
我清晰的記得我第一句提問不是平時(shí)的“你希望達(dá)到什么樣的效果”,而是不由自主的問了一句:“這孩子是版畫系的么?”(注:因?yàn)榘娈嬌视玫谋容^少)
當(dāng)然,我不是批評某個(gè)院校的水平,或是批評所有的在校學(xué)生,而是有些問題,非多年經(jīng)驗(yàn)的專業(yè)從業(yè)者,即使可以感受到“有問題”,也依然無法給出有效答案,畢竟很多問題需要的是經(jīng)驗(yàn)和全局思考把控的能力。
當(dāng)然,我們不排除少數(shù)天生悟性高對自己要求高的學(xué)生可以做得好,但是大概率上,你碰不到。
所以,不要迷信設(shè)計(jì)師是哪個(gè)院校畢業(yè)的,學(xué)的什么專業(yè),他是美術(shù)院校畢業(yè)的,只能說明他曾經(jīng)在繪畫及相關(guān)課程上比普通人受過更多的訓(xùn)練。
然而宣傳推廣的視覺效果不僅需要這些基礎(chǔ)訓(xùn)練,更多的是經(jīng)驗(yàn)積累,系統(tǒng)學(xué)習(xí),以及對人性的把握,對市場的了解。
所以,找對頁面的茬、并解決視覺效果問題,并不像你想象的,會(huì)看、有審美、學(xué)過平面就可以了。
作者:微微(微信號公眾號:信息流廣告精準(zhǔn)投放),17年廣告人,曾任三星品牌設(shè)計(jì)師、MTV線上宣推主管,現(xiàn)任斯通傳媒副總裁、英國 Bird eGo 跨境物流外聘運(yùn)營顧問。
本文由 @微微 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash ,基于 CC0 協(xié)議
設(shè)計(jì)很豐滿,落地很骨感。豐滿與骨感之間應(yīng)找一個(gè)平衡點(diǎn),而這個(gè)平衡點(diǎn)的把握來自于所接觸的項(xiàng)目經(jīng)驗(yàn)。文中提到的設(shè)計(jì)審美,有一點(diǎn)我不認(rèn)可!在設(shè)計(jì)前應(yīng)做充分的設(shè)計(jì)調(diào)查,通過調(diào)查的結(jié)論,引導(dǎo)設(shè)計(jì)!這才是科學(xué)有效的!
。。。。
寫的很好,受益良多,求多發(fā)關(guān)于產(chǎn)品設(shè)計(jì)的實(shí)踐貼?。。?!贊