[雞叔說設(shè)計(jì)（實(shí)操⑤）]做設(shè)計(jì)別本末倒置——首頁設(shè)計(jì)實(shí)操-天貓營銷引流天貓干貨

本文主題天貓首頁,天貓頁面,天貓頁面設(shè)計(jì),天貓雞叔,天貓年中大促,天貓營銷引流。

趕著年中大促前一天，各位運(yùn)營親們，你們準(zhǔn)備好最后折騰美工一把了嘛！

呆電商這個(gè)設(shè)計(jì)行業(yè)里面已經(jīng)很長的時(shí)間了，花了大半年的時(shí)間沉下心來好好的看了看設(shè)計(jì)，思考設(shè)計(jì)到底是在做什么，什么是設(shè)計(jì)，核心到底是啥等等問題。

當(dāng)然，用現(xiàn)在的潮流話來說，其實(shí)想這些并沒有什么卵用，因?yàn)榇蟛糠秩硕紩?huì)去想，不過結(jié)果是都沒有提出具體的解決方式而已。

天朝的電子商務(wù)說白了已經(jīng)從1.0的隨便賣貨時(shí)代——2.0的視覺營銷時(shí)代——現(xiàn)在

現(xiàn)在到底是一個(gè)什么樣的時(shí)代，不太好界定。有人說是品牌化營銷的時(shí)代，也有人堅(jiān)持視覺營銷至上，還有人說是微商的天下等等。當(dāng)然，這東西搞不搞得清楚其實(shí)無所謂，因?yàn)閴焊鶎δ愕碾娚探?jīng)營沒有什么用。

入正題

之前有看到一篇關(guān)于設(shè)計(jì)回歸本質(zhì)的一個(gè)分享，感覺有必要拿出來討論一下。

大概是這樣的：

13年底，Intercom的產(chǎn)品VPPaulAdams在Intercom官博發(fā)表了一篇博文。

文章講述了網(wǎng)絡(luò)上設(shè)計(jì)社區(qū)里普遍存在的一種現(xiàn)象，大意是“許多設(shè)計(jì)師在社區(qū)中分享的作品往往是為了炫技，而產(chǎn)品的邏輯通常都經(jīng)不起推敲的，真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高的層面出發(fā)，而不只是做表面上的工作”。

（比如這些天氣

app

中，只有一個(gè)試圖解決用戶的實(shí)際問題。就是最后一個(gè)告訴你，今天要帶傘）

這里說到一個(gè)“真正優(yōu)秀的設(shè)計(jì)應(yīng)該從更高層面出發(fā)，而不是做表面上的工作?！贝_實(shí)頗為值得深思，就像蘋果那時(shí)候帶起了一波扁平化設(shè)計(jì)風(fēng)潮的時(shí)候，一大群設(shè)計(jì)師跟著屁股后面開始扁平化，而事實(shí)上，扁平是扁平了，但是扁平了到底有什么用，其實(shí)壓根沒看出來。無非是把原來復(fù)雜一點(diǎn)的頁面變成了干凈簡潔一點(diǎn)的東西，但實(shí)質(zhì)上并沒有思考扁平化的目的到底是啥。

說到這里，不得不提一個(gè)概念——designthinking即“設(shè)計(jì)思維”。設(shè)計(jì)思維的核心是以人為核心。那說白了基本可以理解成更加符合用戶體驗(yàn)的設(shè)計(jì)。這個(gè)設(shè)計(jì)思維大部分是引用在工業(yè)設(shè)計(jì)上的，產(chǎn)品設(shè)計(jì)的設(shè)計(jì)標(biāo)準(zhǔn)應(yīng)該更加方便消費(fèi)者所使用。我們引帶入頁面設(shè)計(jì)中其實(shí)完全OK。網(wǎng)頁設(shè)計(jì)的根本目的到底是什么，或者說是客戶需要什么樣的體驗(yàn)，另外一方面不要忘了從我們商家角度來出發(fā)我們需要什么，這個(gè)是作為一個(gè)頁面設(shè)計(jì)師最需要思考的一個(gè)問題。

客戶要的是知道怎么解決問題,就如同前面那個(gè)APP界面一樣，你手機(jī)上更新了無數(shù)的天氣軟件，其實(shí)晴天我們壓根不關(guān)心，我們需要的只是想知道突然降溫了能夠多加一件衣服，天熱了不要穿太多，下雨下雪的時(shí)候能夠帶傘，當(dāng)然能有橙色紅色警報(bào)這些告訴你今兒可以名正言順的翹班啦，那就最好不過了。

一個(gè)產(chǎn)品如果不能解決客戶需要解決的問題，那就沒有價(jià)值。就好像最近這段時(shí)間到了年中大促一樣，我翻了2個(gè)小時(shí)會(huì)場頁面愣是沒有找到我想要的東西。最后還是通過自然搜索找到了我想要的東西，當(dāng)然，順便瞄一下那個(gè)天貓年終大促的標(biāo)對我會(huì)有更大的吸引力。所以我一直疑惑的一點(diǎn)是，為什么在活動(dòng)大促頁面沒有類似于個(gè)性化推薦這種東西出現(xiàn)。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

上面扯的遠(yuǎn)了點(diǎn)，來切正題，這里還是引用一下前面有提到的那個(gè)社區(qū)貼

產(chǎn)品設(shè)計(jì)總是與使命，愿景以及架構(gòu)息息相關(guān)

從廣泛的構(gòu)思到像素級(jí)的細(xì)節(jié)，設(shè)計(jì)師應(yīng)該始終思考公司的使命丶愿景和產(chǎn)品架構(gòu)。他們在設(shè)計(jì)中所做的每件事都需經(jīng)歷這個(gè)過程。

設(shè)計(jì)始于公司最頂層的使命，其次是公司的愿景。在一個(gè)沒有清晰和可執(zhí)行的使命與愿景的團(tuán)隊(duì)中，很難開展設(shè)計(jì)。不要低估這個(gè)問題的重要性，如果你所在的公司缺少清晰的使命，那就將締造它作為你工作的一部分。

在使命和愿景之后的，則是產(chǎn)品的架構(gòu)。不是指技術(shù)層面上的東西，而是產(chǎn)品內(nèi)各部分之間彼此的關(guān)聯(lián)，是一個(gè)總體的系統(tǒng)。我在Facebook上班的第一天早上，ChrisCox（產(chǎn)品VP）做了一個(gè)絕妙的演講（你可以點(diǎn)開感受一下）。下面的聽眾來自公司各個(gè)部門，Chris侃侃而談，然后著重闡述產(chǎn)品的架構(gòu)，以及它是如何與公司的目標(biāo)關(guān)聯(lián)的。

對Facebook來說，架構(gòu)里有聯(lián)系人丶好友丶興趣點(diǎn)，上至世界名牌下到街邊小店，還有一個(gè)能夠顯示所有這些事物關(guān)系的示意圖。這是一個(gè)非常清晰簡潔的產(chǎn)品，直擊目標(biāo)需求點(diǎn)。以我的經(jīng)驗(yàn)來說，在沒有一個(gè)清晰明了的構(gòu)架想法前是很難在這團(tuán)雜七雜八的玩意下做出一個(gè)超贊的設(shè)計(jì)的。在很多情況下，就像這個(gè)項(xiàng)目一樣，作為設(shè)計(jì)師應(yīng)該去解決問題并改進(jìn)架構(gòu)。比如談到Facebook跳轉(zhuǎn)其他應(yīng)用的時(shí)候，我通常會(huì)在白板上畫些類似這樣的概念圖：

產(chǎn)品的架構(gòu)不是信息堆砌，它不是一個(gè)頁面連著這個(gè)那個(gè)模塊和空間，或者一堆死板的演示告訴你點(diǎn)這里是干嘛的，一個(gè)交互原型通常就可以很好地處理這些信息。一個(gè)更深層次的表達(dá)方式，這就是產(chǎn)品的架構(gòu)圖。它能表現(xiàn)出各個(gè)模塊在整體系統(tǒng)中所處的位置以及它們的聯(lián)系。而在intercom我們是用這種方式進(jìn)行架構(gòu)設(shè)計(jì)的：

我甚至沒有印象在追波上有看到過類似上圖這種表述設(shè)計(jì)思路的架構(gòu)圖。很少能看到設(shè)計(jì)師講述他的作品如何匹配需求目標(biāo)，如何驅(qū)使產(chǎn)品的視野向前，或是在整個(gè)架構(gòu)中發(fā)揮了什么作用等等，以呈現(xiàn)這些設(shè)計(jì)的重要度。這應(yīng)當(dāng)是設(shè)計(jì)的基本，而非特例。

這上面提到這么多的東西其實(shí)就是我很早以前在如何制作詳情頁設(shè)計(jì)里面會(huì)特別著重說的一個(gè)點(diǎn)，強(qiáng)調(diào)思維的一個(gè)過程，也可以說是一個(gè)邏輯架構(gòu)的問題。我們在做頁面設(shè)計(jì)的時(shí)候其實(shí)要考慮的是流量進(jìn)來的去留問題，客戶的興趣點(diǎn)的問題，流量跳轉(zhuǎn)以后的閉環(huán)問題，商家期望的消費(fèi)者瀏覽線路問題等等。

為什么有的店鋪訪問深度很高，而有的店鋪很低，我相信看完上面那塊的說明，應(yīng)該會(huì)理解很多。

當(dāng)然，這里之后會(huì)有人問的主要的兩個(gè)問題：

問題1：我的SKU很少那我應(yīng)該怎么去做店鋪設(shè)計(jì)？

問題2：我的SKU多的無法想象，應(yīng)該怎么去做店鋪設(shè)計(jì)？

如果從設(shè)計(jì)的根本出發(fā)點(diǎn)來說，而不是只是做的炫酷的角度來說，這兩個(gè)問題都不難解決。比如說問題1，SKU很少一般來說需要的是更加了解客戶，因?yàn)榭蛻舨惶珪?huì)遇到找不到我要找的產(chǎn)品的問題，因?yàn)橐荒苛巳?，而更多的是想知道我要這個(gè)產(chǎn)品有什么用，或者能給我?guī)硎裁礀|西。而問題2其實(shí)無非就是問題1的升級(jí)版，一方面要解決問題的需要解決的問題，另外一方面要解決客戶如何找到自己需要的產(chǎn)品。

（一般情況下，我對搜索框的需求量遠(yuǎn)遠(yuǎn)大于左邊打的那幾個(gè)字的作用，因?yàn)槟軌蚋訙?zhǔn)確的找到我所需要的東西，并且可以多條件篩選。而左邊那種大類的分布實(shí)際上看過頁面數(shù)據(jù)的人基本都知道，只有首頁和所有寶貝的點(diǎn)擊率高一點(diǎn)，另外幾個(gè)，只是湊數(shù)而已。）

（一個(gè)店鋪的首頁做成這樣類型的形式，除了浪費(fèi)寸土寸金的頁面前三屏位置以外，全部在展現(xiàn)商家想要表達(dá)的東西，而不是滿足客戶的需求，跳失率高能怪誰呢？要我我連1秒鐘都不想多看）

搜索本店這個(gè)功能，我相信除了經(jīng)常使用的人真心沒多少人有概念，所以還是給自己添加一個(gè)搜索吧。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

恩，這里繼續(xù)引用一下

思考一下設(shè)計(jì)的四個(gè)層面

設(shè)計(jì)是一個(gè)多層面的過程。以我的經(jīng)驗(yàn)而言，如何依次經(jīng)過這幾個(gè)層面來思考是有一個(gè)最佳順序的。最簡單的一種就是回想一下這四個(gè)層面：

我看見一個(gè)又一個(gè)的設(shè)計(jì)師單單專注于第四個(gè)層面而完全忽視了其他因素，這樣自下而上的方式做出來的設(shè)計(jì)當(dāng)然不如至上而下。如果其他三個(gè)層面的問題還沒有解決好，那么諸如柵格丶字體丶色彩丶美感等方面的深入都是無用功。許多設(shè)計(jì)師說他們這樣考慮過而沒有付諸行動(dòng)，是因?yàn)橛袝r(shí)候只是覺得畫一些好看的圖片，和把自己掩埋在像素中比處理一些復(fù)雜的商業(yè)決策和人際關(guān)系要更加有趣。只關(guān)注第四個(gè)層面的因素，這無傷大雅，但這只是畫畫而不是設(shè)計(jì)。這樣的話，你是一個(gè)數(shù)字藝術(shù)家，但并不是一個(gè)設(shè)計(jì)師。

針對這個(gè)問題我們來看看實(shí)際應(yīng)用（選自顧家家居旗艦店）

大促不可避免的，你家的導(dǎo)航肯定會(huì)打上牛皮癬，而且比你的店招更加醒目，所占位置絕對猥瑣，天生的高你一等，這個(gè)時(shí)候怎么辦？

打破橫版導(dǎo)航的界限，豎型構(gòu)圖，改變形狀。從用戶體驗(yàn)的角度而言，消費(fèi)者希望能夠看到有區(qū)塊的重點(diǎn)，有重點(diǎn)的重點(diǎn)，有順序的重點(diǎn)。

而鼠標(biāo)懸停的變化觸發(fā)了和消費(fèi)者的簡單交互模式，提示他正在看這個(gè)。

至于輪播不說了，節(jié)省空間，多維展示，千萬不要浪費(fèi)了這寸土寸金的頁面首屏！同事營造夸張的視覺張力，促銷感覺杠杠的！

搜索欄位置搜索一定要明確，前期打算直接放置在左側(cè)導(dǎo)航的位置，搜索中預(yù)置內(nèi)容直接表現(xiàn)你要推薦的東西，客戶不喜歡的時(shí)候就讓他自己更改吧。

單模塊多頁面展現(xiàn)活動(dòng)促銷機(jī)制，節(jié)省空間，鼠標(biāo)懸停效果。

產(chǎn)品成列，右上增加觸發(fā)模塊，可查看更多，節(jié)省頁面空間。原先有構(gòu)想過變成猜你喜歡這樣的文字表現(xiàn)，來增加為客戶定制的感覺。中間圓形標(biāo)簽直接表現(xiàn)促銷利益點(diǎn)，簡單直接。

促銷位置別忘了增加點(diǎn)口味清淡的，區(qū)別開一點(diǎn)，可以更加吸引眼球（下文有解析）

不一樣的模塊可以滿足客戶所需的個(gè)性化需求。

當(dāng)然還有很多頁面設(shè)計(jì)的小細(xì)節(jié)，這里不多做闡述，可惜結(jié)合實(shí)際做詳細(xì)分析。實(shí)際上這里面也有很多沒有深入推敲的部分需要去一點(diǎn)點(diǎn)的改進(jìn)，進(jìn)一步深化頁面設(shè)計(jì)。如果大家喜歡，可以持續(xù)關(guān)注顧家家居，有更好的修改方案會(huì)實(shí)時(shí)更新。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

說到頁面，不得不說頁面的整體框架結(jié)構(gòu)的問題，上文已經(jīng)提到過在設(shè)計(jì)過過程中需要思考的幾個(gè)問題，下面接著來拆解。

相對早期或者說現(xiàn)在還有很多商家正在使用的一個(gè)頁面特點(diǎn)基本是這樣的

這個(gè)模式基本算是在2.0時(shí)代是個(gè)主流。但是面向于現(xiàn)階段流量的細(xì)化程度更高，客戶對購買體驗(yàn)的要求提高，流量獲取成本更高的這個(gè)大環(huán)境下面，視覺突出是在浪費(fèi)空間，均衡展現(xiàn)變成了沒有重點(diǎn)，單頁呈現(xiàn)變成了無聊寵物，靜態(tài)呈現(xiàn)變成了毫無特色，全分流的導(dǎo)向型則是浪費(fèi)流量入口和頁面空間。

基于這個(gè)基礎(chǔ)上，我重新擬定出了一套新的頁面呈現(xiàn)模式，這個(gè)呈現(xiàn)模式在顧家家居旗艦店的現(xiàn)有頁面上有一定的呈現(xiàn)，并且在數(shù)據(jù)上和過往的相比較有較大的提升。當(dāng)然，考慮到后期針對客戶群體的個(gè)性化頁面設(shè)計(jì)，仍然需要花比較多的心思去深入研究。

在這個(gè)思路上，重新劃分頁面的框架結(jié)構(gòu)，這里貼出一部分供大家參考

紅色區(qū)域?yàn)橹鼽c(diǎn)擊區(qū)域：以大場景的模式展現(xiàn)產(chǎn)品12再分主次（場景）

橙色部分為次點(diǎn)擊區(qū)域：以個(gè)性化導(dǎo)購分類+核心促銷產(chǎn)品的成列刺激點(diǎn)擊（懸停效果，GIF動(dòng)畫）

黃色部分為最次點(diǎn)擊區(qū)域：以“猜你喜歡”的偽定向推薦模式成列產(chǎn)品（白底，輪播）

事實(shí)上，通過這樣的框架解構(gòu)以后，分清主次關(guān)系以后，做有重點(diǎn)的突出，流量基本流向和預(yù)估流向基本一致。

當(dāng)然，針對不一樣的類目和客戶群體需要有不一樣的結(jié)構(gòu)模式，研究好客戶習(xí)慣和給予優(yōu)質(zhì)的用戶體驗(yàn)這個(gè)無疑是頁面設(shè)計(jì)的重中之重。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

當(dāng)然，不得不說的一個(gè)，既然有模塊設(shè)計(jì)的大解構(gòu)了，肯定會(huì)有整個(gè)頁面的解構(gòu)，而頁面的解構(gòu)必然要深入到跳轉(zhuǎn)的問題。這里上圖做解釋

第一步，先做總體解構(gòu)

第二步，做大類解構(gòu)

第三步，做詳細(xì)模塊化解構(gòu)，并能實(shí)現(xiàn)頁面基本框架，并劃定重點(diǎn)模塊

第四步，做模塊設(shè)計(jì)化解構(gòu)，如何跳轉(zhuǎn)如何分流，如何做閉環(huán)流量循環(huán)。

第五步，在以上基礎(chǔ)上，如何實(shí)現(xiàn)較為有重點(diǎn)的表現(xiàn)及良好的視覺表現(xiàn)風(fēng)格。

最后說一下

以上的頁面設(shè)計(jì)思維模式，除了在頁面設(shè)計(jì)上可以使用外，引申到你的推廣圖片上也是毫無問題的，先思考再執(zhí)行絕對能夠減少很多不必要的消耗。這年頭，省錢也是賺錢的一種手段啊！

最后

祝大家618活動(dòng)圓滿成功！

幕思城為您更新最近最有用的電商資訊、電商規(guī)則天貓首頁,天貓頁面,天貓頁面設(shè)計(jì),天貓雞叔,天貓年中大促天貓營銷引流。了解更多電商資訊、行業(yè)動(dòng)向，記得關(guān)注幕思城！

這個(gè)問題還有疑問的話，可以加幕.思.城火星老師免費(fèi)咨詢，微.信號(hào)是為: msc496。