太多太多人認(rèn)為店鋪首頁(yè)應(yīng)該是堆滿了幾乎所有寶貝的一個(gè)頁(yè)面，琳瑯滿目任君挑選。

　　其實(shí)你們錯(cuò)了，大錯(cuò)特錯(cuò)。

　　在淘寶（含天貓），除開(kāi)大店不說(shuō)，一般的店鋪首頁(yè)并非流量的第一到達(dá)頁(yè)面，75%以上的首頁(yè)流量是從寶貝詳情頁(yè)過(guò)來(lái)的。所以，做首頁(yè)之前要分析，為什么客戶會(huì)從詳情頁(yè)跳轉(zhuǎn)到首頁(yè)？

　　可以想到的有以下幾點(diǎn)：

　　A.想要找尋與到達(dá)頁(yè)面相類似的產(chǎn)品。

　　B.想要找尋可以合單購(gòu)買(mǎi)的產(chǎn)品。

　　C.想要了解店內(nèi)的促銷活動(dòng)。

　　D.想要了解這家店鋪的規(guī)模。

　　E.同行對(duì)到達(dá)頁(yè)面（寶貝描述或30天內(nèi)銷量）感到滿意，想更進(jìn)一步觀察此店。（往往再?gòu)氖醉?yè)跳轉(zhuǎn)到購(gòu)買(mǎi)心得評(píng)價(jià)頁(yè)面）

　　正因如此，首頁(yè)如果能夠滿足以上需求（請(qǐng)忽略E），便能夠?qū)⒋蟛糠质醉?yè)流量重新引入店鋪的其他寶貝內(nèi)頁(yè)中，將流量再次利用起來(lái)，間接降低了流量成本。這就是首頁(yè)的作用！

　　要知道首頁(yè)是否發(fā)揮到了其應(yīng)具備的作用，最最直觀的就是從首頁(yè)跳失率來(lái)判斷；同時(shí)，效果還會(huì)在全店P(guān)V與UV的比例中體現(xiàn)出來(lái)，首頁(yè)和關(guān)聯(lián)推廣做好了，這個(gè)比例就大了。

　　絕大多數(shù)的店鋪首頁(yè)設(shè)計(jì)都是將頁(yè)面區(qū)塊化，按產(chǎn)品類別分區(qū)，按促銷手段分區(qū)，按風(fēng)格分區(qū)，按功效分區(qū)等等，分類方式層出不窮，不變的一點(diǎn)就是【首頁(yè)堆滿了大大小小各種商品怎么滾都滾不到頭】。

　　這么做的思路往往是：將盡可能多的產(chǎn)品展現(xiàn)在顧客面前，就更容易讓他們找到喜歡的產(chǎn)品，從而促成購(gòu)買(mǎi)。

　　想告訴大家的是：這么想就大錯(cuò)特錯(cuò)了。

　　我做過(guò)測(cè)試，將店鋪的產(chǎn)品盡可能多地展現(xiàn)在首頁(yè)。有些分區(qū)款式不夠的時(shí)候，就將各種屬性的同款產(chǎn)品都堆上去（例如同款服裝的不同色）。

　　放置一段時(shí)間后，通過(guò)量子統(tǒng)計(jì)中的店鋪裝修熱力圖來(lái)統(tǒng)計(jì)首頁(yè)的點(diǎn)擊。

　　你知道這么做之后流量往哪兒跑了嗎？

　　最熱點(diǎn)擊為：

　　A.店鋪爆款或熱賣(mài)款。

　　B.左側(cè)導(dǎo)航條。

　　A應(yīng)該大家都可以理解，

　　好處就是：人見(jiàn)人愛(ài)的款，擺哪里都有人點(diǎn)。

　　壞處更大：人見(jiàn)人愛(ài)的款，擺它旁邊的都沒(méi)人點(diǎn)。

　　變化更大的是B，B的點(diǎn)擊量比修改前增加了近2倍。

　　為什么這里的點(diǎn)擊增加了這么多？因?yàn)轭櫩陀X(jué)得亂，覺(jué)得沒(méi)頭緒，覺(jué)得不知道該怎么選了?。∷运麄?nèi)チ藢?dǎo)航條那兒~

　　那么，首頁(yè)真正應(yīng)該是什么樣的呢？

　　A.塑造店鋪形象，做得好的可以讓顧客記住你的店。

　　B.展現(xiàn)主推產(chǎn)品，因?yàn)橹魍飘a(chǎn)品是你愛(ài)我愛(ài)大家愛(ài)的產(chǎn)品，更容易促成點(diǎn)擊跳轉(zhuǎn)。

　　C.分類導(dǎo)航，因?yàn)榈竭_(dá)首頁(yè)的顧客往往都已經(jīng)帶有目的性，如果他沒(méi)有被你的主推產(chǎn)品吸引，那么分類導(dǎo)航便能挽回這群人，讓他們繼續(xù)往店內(nèi)找尋。

　　夠了，別再弄一堆亂七八糟的東西來(lái)擾亂顧客的思緒，能有幾個(gè)人像你一樣慢慢盯著你的產(chǎn)品一個(gè)接一個(gè)瞎欣賞？ 有這些就夠了。

　　想好這些之后，我就開(kāi)始著手設(shè)計(jì)店鋪首頁(yè)。個(gè)人要求如下：

　　A.與眾不同。（只有與眾不同才容易讓人記住，淘寶店鋪太多，顧客早已麻木）

　　B.布局舒服。（看著舒服，找著舒服）

　　C.用色簡(jiǎn)潔。（這一點(diǎn)主要是為了提升頁(yè)面訪問(wèn)速度，做過(guò)web設(shè)計(jì)應(yīng)該都知道對(duì)圖片大小而言，GIF格式?jīng)Q定大小最主要的是色彩，JPG格式?jīng)Q定大小最主要的是尺寸。同時(shí)，這么做也略帶有個(gè)人喜好，不同設(shè)計(jì)師不同喜好，不必較真）

　　最終的設(shè)計(jì)稿如下（讀圖緩慢請(qǐng)耐心等待，點(diǎn)擊可放大）：

　　頁(yè)面分為上下兩大塊。上部采用亮藍(lán)色，下部采用橘紅色。兩色均較醒目，且互為反色，沖擊力強(qiáng)。

　　亮藍(lán)色僅占據(jù)了頁(yè)面第一屏的位置，大量運(yùn)用了直角。

　　通過(guò)直角、冷色、完全對(duì)稱的居中排版及大面積的留白帶給顧客正式又略微帶點(diǎn)嚴(yán)肅的視覺(jué)，第一屏不出現(xiàn)產(chǎn)品圖片，僅通過(guò)廣告語(yǔ)【W(wǎng)E%20MAKE%20WONDERFUL%20SHOES%20|%20我們只做很棒的鞋子】來(lái)建立良好的第一視覺(jué)印象，在潛意識(shí)里植入【鞋子很棒】的概念。緊接著便是一個(gè)通欄的簡(jiǎn)易分類，這是根據(jù)累計(jì)數(shù)據(jù)統(tǒng)計(jì)出來(lái)的7個(gè)最熱點(diǎn)擊的分類。

　　再下面就是首頁(yè)的主體：橘紅色部分。

　　橘紅色為暖色，較容易激起購(gòu)買(mǎi)欲望，同時(shí)采用柔軟的圓角線條，給予一種“舒爽”的視覺(jué)。這部分的頂部展示了店鋪促銷活動(dòng)內(nèi)容，【全場(chǎng)包郵（最得顧客好感的促銷手法）】及【滿立減】。

　　其后采用了一個(gè)全新構(gòu)思的形式，我在這里把它稱之為【導(dǎo)航】，但不是店鋪?zhàn)髠?cè)導(dǎo)航條所代表的導(dǎo)航，你可以認(rèn)為是像凱X德汽車(chē)導(dǎo)航儀那樣的導(dǎo)航，那好吧，為了避免概念混淆，我在這里把它稱之為【凱X德式導(dǎo)航】。

　　簡(jiǎn)單來(lái)說(shuō)，這個(gè)【凱X德式導(dǎo)航】只是將所有的店鋪主推產(chǎn)品串在一起。

　　其實(shí)，他起到的作用很明顯，圖中的【凱X德式導(dǎo)航】很大程度上引領(lǐng)了第一次到達(dá)這個(gè)頁(yè)面的顧客的視線，不知不覺(jué)中他們會(huì)跟隨【凱X德式導(dǎo)航】一個(gè)寶貝一個(gè)寶貝地看下去，甚至?xí)I(lǐng)部分顧客的鼠標(biāo)軌跡，哈哈~

　　這樣一來(lái)，很大程度地降低了顧客的滾屏速度，讓他們以較慢的速度瀏覽了全部的主推產(chǎn)品，經(jīng)測(cè)試，很大部分的流量都落在了路邊的各個(gè)寶貝上。

　　這么一個(gè)相對(duì)新穎的形式，相信能夠讓你略微驚喜一下，那么你覺(jué)得顧客是不是似乎也更容易記住這家店鋪了呢？

　　還不夠，還有最后一道防線：

　　在【凱X德式導(dǎo)航】的盡頭設(shè)計(jì)了一個(gè)足夠詳盡的分類導(dǎo)航，將滾屏到最后的那部分流量引至店內(nèi)其他分類頁(yè)。

　　經(jīng)測(cè)試，首頁(yè)跳失率減少了近60%，基本滿意。

　　看到有同學(xué)提出要求看數(shù)據(jù)，我這邊不方便透露具體數(shù)字，給個(gè)比例大家參考吧，信不信由你。

　　PV:UV從2:1增長(zhǎng)到3:1，訪問(wèn)深度是之前的1.5倍，人均店內(nèi)停留時(shí)間比之前多了68秒。

　　附高清無(wú)碼大圖（讀圖更緩慢請(qǐng)更耐心等待，點(diǎn)擊可查看大圖）：