UI設(shè)計(jì)商戶網(wǎng)頁落地頁的差距

　　頁面的設(shè)計(jì)水平在一定程度上決定了頁面的轉(zhuǎn)換率。特別是在信息流廣告領(lǐng)域，頁面設(shè)計(jì)的質(zhì)量，在一定程度上也決定著廣告銷售能力的高低，本文AAA教育的武老師對不同商戶處理落地頁的差距來分析。
 

　　文本
 

　　來源：準(zhǔn)確傳遞信息流廣告
 

　　用眼睛看世界是我們每個(gè)人與生俱來的能力。審美能力雖然可以分為高層次和低層次，但它實(shí)際上是每個(gè)人都擁有的。
 

　　但是，只要你能看到，有審美和用戶視角，我們能不能解決宣傳推廣中的視覺效果問題?
 

　　要知道，頁面的設(shè)計(jì)水平在一定程度上決定了頁面的轉(zhuǎn)換率。特別是在信息流廣告領(lǐng)域，頁面設(shè)計(jì)的質(zhì)量，在一定程度上也決定著廣告銷售能力的高低。
 

　　作為一個(gè)視覺品牌人，我?guī)缀趺刻於家鎸ψ稍兛蛻絷P(guān)于視覺效果的各種問題。我所依靠的解決這些問題的技巧，不僅是基本的美學(xué)和用戶視角，而且我在高校學(xué)習(xí)過基礎(chǔ)藝術(shù)課程，并掌握了大多數(shù)設(shè)計(jì)軟件的使用技巧。
 

　　那么，解決宣傳推廣中的視覺效果問題，需要哪些技巧呢?什么樣的建議真正具有可操作性?商戶落地頁為什么有差別呢？
 

　　作為一個(gè)擁有大量案例的從業(yè)者，我對各種視覺理解角度都有一定的了解，所以今天我們就來談?wù)劜煌娜嗽诳吹酵瑯拥囊曈X問題時(shí)會給出什么樣的答案!
 

　　這是一個(gè)信息流研討會的討論截圖。一位信息流廣告優(yōu)化器將他們正在推廣的店面主頁發(fā)給了集團(tuán)，希望集團(tuán)內(nèi)的合作伙伴能給出一些建議：
 

　　很快，群里的朋友開始回復(fù)。一般的繪畫風(fēng)格屬于有一搭沒一搭說話吐槽。
 

　　以上反應(yīng)屬于第一類：旁觀者
 

　　所謂圍觀者，大多具有基本的審美能力。站在用戶的角度，總能感受到設(shè)計(jì)的“基調(diào)”。然而，目前還不清楚是什么因素或結(jié)構(gòu)導(dǎo)致了這種“感覺”。
 

　　如上圖所示，我們可以看到這個(gè)頁面“不能刺激消費(fèi)者的購買欲望”和“沒有強(qiáng)迫”，但它不能指出更具體的問題。
 

　　在眾多的圍觀者中，有一個(gè)朋友向以下方向提出了修改意見：
 

　　建議一：使用二類電子商務(wù)頁面模板。
 

　　但是，在我看來，頁面本身(原始頁面將在下面發(fā)布)是一個(gè)使用的模板，它只是在更改模板和銷毀的類別中。
 

　　朋友繼續(xù)給出建議：增加品牌故事、調(diào)整排版、配色和設(shè)計(jì)。
 

　　然而，在我看來，問題出在哪里，如何糾正，我還不清楚。
 

　　我很熱情。我建議我們互相趕上。這次，是發(fā)射方向：
 

　　在我看來，這個(gè)方向沒有問題，但這是一家商店的頭版，不是廣告的登陸頁，但登陸頁的設(shè)計(jì)應(yīng)該更有針對性
 

　　其實(shí)，如果你看整個(gè)對話，對于提問者，弟弟只給他一個(gè)信息：如果網(wǎng)頁不好，請別人重做。
 

　　作為一個(gè)非視覺專業(yè)人士，我覺得這個(gè)朋友可以提到這些，這說明他在這方面應(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è)人士會分析，這種感受是由于頁面中的哪一部分造成的，以及預(yù)判這種感受會令用戶采取怎樣的行動(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)該起到輔助作用。
 

　　那我剛剛為什么會說，這像是一個(gè)淘寶店移動(dòng)端的模板改的呢?原因如下：
 

　　我們能看到這個(gè)排版有一個(gè)明顯的問題：
 

　　第一屏沒有清晰的表達(dá)“我是誰”，“我是干嘛的”，“我能給你什么”。這個(gè)帶來的首要問題，就是 無法很好的完成銷售功能 。其次 對于品牌認(rèn)知植入、產(chǎn)品宣傳、引流、吸粉也有影響;
 

　　頭圖部分金發(fā)美男彈鋼琴，再加上旁邊的黑膠唱片元素，會給人一種賣樂器或唱片的感覺。這個(gè)帶來的首要問題是 品牌認(rèn)知植入上，增加了用戶的門檻 ;UI用戶體驗(yàn)要注意。
 

　　然后莫名的出現(xiàn)一個(gè)搜索，用戶連你賣什么都不知道，基本上這個(gè)搜索是用不到的。任何多余的元素，如果沒有存在意義，就不應(yīng)該出現(xiàn)。
 

　　再然后什么都不說，很粗暴的上了三張看不清楚內(nèi)容的優(yōu)惠券。賣家主觀的認(rèn)為優(yōu)惠券可以帶來銷量，然而這里出現(xiàn)優(yōu)惠券不僅 不能起到增加銷量的作用 ，反而 會分散用戶注意力，讓用戶有限的耐心無法集中在產(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)?設(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)境： 微信店鋪
 

　　建議如下：
 

　?、?ldquo;頁頭”，包含logo和能體現(xiàn)店鋪風(fēng)格的美圖。不需要品牌故事，但是需要強(qiáng)調(diào)logo，以 增加品牌識別度，盡可能讓用戶對品牌形成概念。進(jìn)而沉淀粉絲。
 

　　是的，這個(gè)品牌連logo都沒有放，打碼的時(shí)候我都有點(diǎn)不適應(yīng)，差點(diǎn)把slogan給匿掉。
 

　?、?ldquo;橫欄展示”， 主打產(chǎn)品、新品 在場景中的展示圖，或者面積較大的優(yōu)惠信息等。
 

　　優(yōu)惠券這種東西在一個(gè)百分百寬橫幅優(yōu)惠信息中體現(xiàn)就好。例如： 秋季開學(xué)折扣 橫幅海報(bào)。更多對新品、主打品的大圖展示、以及橫幅海報(bào)式的折扣信息，都能有效 提升用戶的購買沖動(dòng) 。
 

　?、?ldquo;主要類目導(dǎo)航”，從這個(gè)頁面設(shè)計(jì)上可以看出，該店鋪并沒有很復(fù)雜的分類類目，沒必要把“類目”作為一個(gè)單獨(dú)的導(dǎo)航按鈕。
 

　　不妨 按照常用場景分類 為(我編的)“宴會”“上班”“休閑”“定制”……這一類的，方便用戶根據(jù)場景進(jìn)入挑選， 降低選擇障礙，提高銷售量 。
 

　?、?ldquo;產(chǎn)品展示”，根據(jù)銷量、加購數(shù)量、新品推廣計(jì)劃等進(jìn)行產(chǎn)品排放，主打好賣的產(chǎn)品以大圖形式展示……讓用戶最先看到經(jīng)過市場篩選的最受歡迎的產(chǎn)品，進(jìn)一步 增加加購和下單。
 

　　等等等等。限于篇幅這里就不一一列出了。
 

　　3、頁面設(shè)計(jì)
 

　　具體到設(shè)計(jì)，需要調(diào)整的地方也很多。先一起看下截圖：
 

　　1、配色 過于雜亂
 

　　深淺藍(lán)、灰紫、紅、橙、黃……(真的，這個(gè)設(shè)計(jì)太勇敢了);
 

　　導(dǎo)致結(jié)果： 增加用戶閱讀難度，提高跳出率;
 

　　建議： 主色調(diào)不要超過三個(gè)，并且符合整體調(diào)性。同色系輔助色調(diào)可適當(dāng)增加。明度接近的灰底紅字這種增加閱讀困難的配色一定要摒棄。
 

　　2、字體 過于雜亂
 

　　一眼望去就有6種以上的字體，完全沒有規(guī)則;
 

　　導(dǎo)致結(jié)果： 增加用戶閱讀難度，提高了跳出率;
 

　　建議： 海報(bào)字體統(tǒng)一、大標(biāo)題統(tǒng)一、內(nèi)容字體統(tǒng)一，不要換一個(gè)地方就換一個(gè)字體。
 

　　3、字體識別性太差
 

　　導(dǎo)致結(jié)果： 增加用戶閱讀難度，降低用戶對推廣信息的關(guān)注，提高跳出率，降低購買數(shù)量。
 

　　建議： 類似方正剪紙?bào)w這類字體，且不說方正的版權(quán)問題，但從視覺角度講，識別性太低(還是在下單立減的重要位置)并且風(fēng)格調(diào)性與整體不符(男士襯衫就不用這么Q彈可愛了)
 

　　4、排版沒有邏輯
 

　　很明顯這個(gè)設(shè)計(jì)師不能做到掌控基礎(chǔ)的對齊、間距等設(shè)計(jì)因素。那么他操作設(shè)計(jì)時(shí)，想要用圖片流的形式參差排版時(shí)，就會十分混亂，毫無邏輯(設(shè)計(jì)師對頁面把控能力太弱，沒有整體概念，這種情況下，只能是給出十分明確的指導(dǎo)需求，才有改善的可能性。)
 

　　導(dǎo)致結(jié)果： 用戶閱讀體驗(yàn)差，找不到想要的產(chǎn)品，喪失耐心，提高跳出率，降低加購及購買行為概率
 

　　建議： 先根據(jù)頁面邏輯整理框架，注意設(shè)置頁面規(guī)則，包括邊距、間距、參差規(guī)則、圖文搭配規(guī)則等等。這篇UI設(shè)計(jì)商戶落地頁差別的內(nèi)容你學(xué)到了嗎，更多資訊請持續(xù)關(guān)注AAA教育~