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

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

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

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

當(dāng)然，用現(xiàn)在的潮流話來說，其實想這些并沒有什么卵用，因為大部分人都會去想，不過結(jié)果是都沒有提出具體的解決方式而已。

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

現(xiàn)在到底是一個什么樣的時代，不太好界定。有人說是品牌化營銷的時代，也有人堅持視覺營銷至上，還有人說是微商的天下等等。當(dāng)然，這東西搞不搞得清楚其實無所謂，因為壓根對你的電商經(jīng)營沒有什么用。

入正題

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

大概是這樣的：

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

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

（比如這些天氣

app

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后說一下

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

最后

祝大家618活動圓滿成功！

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

這個問題還有疑問的話，可以加幕.思.城火星老師免費咨詢，微.信號是為: msc496。