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

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

　　文本
 

　　來源：準確傳遞信息流廣告
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　作為一個非視覺專業(yè)人士，我覺得這個朋友可以提到這些，這說明他在這方面應(yīng)該有一定的理解，所以他屬于：
 

　　類型二： 有悟性的
 

　　所謂有悟性的， 往往能夠憑借感覺和部分自己行業(yè)的經(jīng)驗，指出問題“來自哪里”，但往往 沒有解決方案，或者給出并不具備指導(dǎo)意義的所謂“建議” 。
 

　　就像上面這位小哥，從幾個不同的角度都給出了解決方案，但是這些建議對客戶的實際操作，沒有任何指導(dǎo)意義。
 

　　這是一個很尷尬的事情，我們常常需要用戶視角，但是無論從提問方還是回答方， 如果沒有專業(yè)人士把控的話，最后這許多的“用戶視角”其實并不能幫到客戶什么。
 

　　我們來看看被批的一塌糊涂的這個頁面長什么樣吧：
 

　　先上第一屏，匿掉企業(yè)信息
 

　　如果這個提問者是我的客戶 ，當他把這個頁面展示在我面前時，我們的解決思路常常是這樣：
 

　　這個頁面是什么用途?從頁面邏輯來看，它是否符合用戶認知?從設(shè)計層面(排版、配色、字體、字號、間距)看，它是否能夠服務(wù)于頁面的“目標”，而不是干擾目標;最后，將問題整理出來，給出詳細的、可執(zhí)行的解決建議方案。對應(yīng)的，這是 類型三： 專業(yè)人士
 

　　所謂專業(yè)人士， 同上兩種人一樣，都可以看到這個頁面能給予用戶什么樣的感受，同時，專業(yè)人士會分析，這種感受是由于頁面中的哪一部分造成的，以及預(yù)判這種感受會令用戶采取怎樣的行動。隨后，給出有針對性的解決方案，及修改建議。
 

　　那么我們就按照這個思路依次來看一下這個案例頁面到底是否符合標準吧：
 

　　1、頁面的用途
 

　　先來談?wù)勥@類電商頁面的出現(xiàn)場景。
 

　　該頁面的網(wǎng)址是： http://wx.balbala ……(balabla開始就是我編的了)
 

　　前面是 “ wx ” ，代表這個店鋪是依附于微信公眾號的。
 

　　這說明：
 

　　一方面，它通過公眾號內(nèi)容引流，沉淀粉絲，從公眾號推送或者底部導(dǎo)航入口可以進入店鋪，產(chǎn)生購買。
 

　　另一方面，它通過微信朋友圈轉(zhuǎn)發(fā)引流，并產(chǎn)生購買。
 

　　也就是說，這個頁面，應(yīng)該兼具 引流、吸粉、品牌認知植入、產(chǎn)品宣傳、銷售 這些功能。
 

　　當然，這些功能中，除了 銷售 是需要該頁面主力完成之外，其它幾項都是應(yīng)該由公眾號和店鋪頁合作完成的。也就是說，在其它功能性上，該頁面應(yīng)該起到輔助作用。
 

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

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

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

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

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

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

　　而上面這些，都像是淘寶店的做法。
 

　　淘寶店可以這么做(雖然我們也不推薦不合品類的胡來設(shè)計)，因為在電商購物平臺這個環(huán)境中，我們大概率并不是由首頁進入店鋪，而是有目的的 搜索寶貝 ，并且從寶貝頁面中的 店鋪鏈接 進入首頁，我們很清楚我們在找什么，而首屏店鋪類別不夠明確這件事就顯得不那么重要了，并且在用戶知道他們要買什么的情況下，三張優(yōu)惠券也恰到好處的切中了用戶的痛點。
 

　　如上述，以這個設(shè)計師的情況，從挑模板就開始出錯了，那么即使換個模板，改完也可以很糟糕。所以圍觀群眾們給出的“直接用模板”的建議，并不適合這個店鋪，因為 設(shè)計師的問題在于，沒有意識到不同環(huán)境下的店鋪頁面應(yīng)該做針對性的設(shè)計。
 

　　對這個 頁面來說，最先應(yīng)該調(diào)整的，是頁面設(shè)計的整體思路， 即：我賣什么，我能給你什么，我的東西多好……這類信息應(yīng)當放在首屏。
 

　　2、頁面的邏輯
 

　　從排版邏輯 上講，應(yīng)當遵循這個店鋪的環(huán)境： 微信店鋪
 

　　建議如下：
 

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

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

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

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

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

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

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

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

　　3、頁面設(shè)計
 

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

　　1、配色 過于雜亂
 

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

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

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

　　2、字體 過于雜亂
 

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

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

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

　　3、字體識別性太差
 

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

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

　　4、排版沒有邏輯
 

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

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

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