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

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

　　文本
 

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

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

　　但是，只要你能看到，有審美和用戶(hù)視角，我們能不能解決宣傳推廣中的視覺(jué)效果問(wèn)題?
 

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

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

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

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

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

　　很快，群里的朋友開(kāi)始回復(fù)。一般的繪畫(huà)風(fēng)格屬于有一搭沒(méi)一搭說(shuō)話(huà)吐槽。
 

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

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

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

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

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

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

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

　　然而，在我看來(lái)，問(wèn)題出在哪里，如何糾正，我還不清楚。
 

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

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

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

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

　　類(lèi)型二： 有悟性的
 

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

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

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

　　我們來(lái)看看被批的一塌糊涂的這個(gè)頁(yè)面長(zhǎng)什么樣吧：
 

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

　　如果這個(gè)提問(wèn)者是我的客戶(hù) ，當(dāng)他把這個(gè)頁(yè)面展示在我面前時(shí)，我們的解決思路常常是這樣：
 

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

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

　　那么我們就按照這個(gè)思路依次來(lái)看一下這個(gè)案例頁(yè)面到底是否符合標(biāo)準(zhǔn)吧：
 

　　1、頁(yè)面的用途
 

　　先來(lái)談?wù)勥@類(lèi)電商頁(yè)面的出現(xiàn)場(chǎng)景。
 

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

　　前面是 “ wx ” ，代表這個(gè)店鋪是依附于微信公眾號(hào)的。
 

　　這說(shuō)明：
 

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

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

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

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

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

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

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

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

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

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

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

　　淘寶店可以這么做(雖然我們也不推薦不合品類(lèi)的胡來(lái)設(shè)計(jì))，因?yàn)樵陔娚藤?gòu)物平臺(tái)這個(gè)環(huán)境中，我們大概率并不是由首頁(yè)進(jìn)入店鋪，而是有目的的 搜索寶貝 ，并且從寶貝頁(yè)面中的 店鋪鏈接 進(jìn)入首頁(yè)，我們很清楚我們?cè)谡沂裁?，而首屏店鋪?lèi)別不夠明確這件事就顯得不那么重要了，并且在用戶(hù)知道他們要買(mǎi)什么的情況下，三張優(yōu)惠券也恰到好處的切中了用戶(hù)的痛點(diǎn)。
 

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

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

　　2、頁(yè)面的邏輯
 

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

　　建議如下：
 

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

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

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

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

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

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

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

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

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

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

　　1、配色 過(guò)于雜亂
 

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

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

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

　　2、字體 過(guò)于雜亂
 

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

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

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

　　3、字體識(shí)別性太差
 

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

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

　　4、排版沒(méi)有邏輯
 

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

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

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