理性思考設(shè)計(jì)店鋪首頁,把流量利用起來才是王道!!附實(shí)例,高清無

2012-06-28|HiShop
導(dǎo)讀: 本人大學(xué)本科念的是景觀設(shè)計(jì),從事電商行業(yè)也不算資深, 大學(xué)畢業(yè)從事了半年專業(yè)對(duì)口的工作之后,誤打誤撞跳入電商設(shè)計(jì)這個(gè)苦逼的行當(dāng)。 但從業(yè)這些年來算是饒有興致,從事有興致的工作最大的好處就是你不會(huì)覺得累。 常在派代上吸別人的干貨,...

 理性思考設(shè)計(jì)店鋪首頁,把流量利用起來才是王道!!附實(shí)例,高清無

本人大學(xué)本科念的是景觀設(shè)計(jì),從事電商行業(yè)也不算資深,

大學(xué)畢業(yè)從事了半年專業(yè)對(duì)口的工作之后,誤打誤撞跳入電商設(shè)計(jì)這個(gè)苦逼的行當(dāng)。

但從業(yè)這些年來算是饒有興致,從事有興致的工作最大的好處就是你不會(huì)覺得累。

常在派代上吸別人的干貨,現(xiàn)在也冒個(gè)泡吐點(diǎn)貨,是不是干貨你自己拿主意。

前段時(shí)間在構(gòu)思重新做一個(gè)店鋪首頁,思考很多,也翻了很多店鋪首頁,將一些想法貼上來聽聽各位的意見。

 

進(jìn)入正題:

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

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

在淘寶(含天貓),除開大店不說,一般的店鋪首頁并非流量的第一到達(dá)頁面,75%以上的首頁流量是從寶貝詳情頁過來的。所以,做首頁之前要分析,為什么客戶會(huì)從詳情頁跳轉(zhuǎn)到首頁?

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

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

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

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

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

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

 

正因如此,首頁如果能夠滿足以上需求(請(qǐng)忽略E),便能夠?qū)⒋蟛糠质醉摿髁恐匦乱氲赇伒钠渌麑氊悆?nèi)頁中,將流量再次利用起來,間接降低了流量成本。這就是首頁的作用!

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

 

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

 

會(huì)這么做的思路往往是:將盡可能多的產(chǎn)品展現(xiàn)在顧客面前,就更容易讓他們找到喜歡的產(chǎn)品,從而促成購買。

 

我想告訴你們的是:這么想就大錯(cuò)特錯(cuò)了。(只針對(duì)中小賣家而言,大店的品牌認(rèn)知度強(qiáng),可以這么做。本文只針對(duì)中小賣家,大店請(qǐng)無視。我后面就不再啰嗦備注了。)

 

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

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

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

最熱點(diǎn)擊為:

A.店鋪爆款或熱賣款。

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

 

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

好處就是:人見人愛的款,擺哪里都有人點(diǎn)。

壞處更大:人見人愛的款,擺它旁邊的都沒人點(diǎn)。

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

為什么這里的點(diǎn)擊增加了這么多?因?yàn)轭櫩陀X得亂,覺得沒頭緒,覺得不知道該怎么選了??!所以他們?nèi)チ藢?dǎo)航條那兒~

 

那么,首頁真正應(yīng)該是什么樣的呢?

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

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

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

 

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

 

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

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

B.布局舒服。(看著舒服,找著舒服)

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

 

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

    

理性思考設(shè)計(jì)店鋪首頁,把流量利用起來才是王道!!附實(shí)例,高清無

 

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

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

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

再下面就是首頁的主體:橘紅色部分。

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

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

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

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

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

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

還不夠,還有最后一道防線:

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

 

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

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

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

附高清無碼大圖(讀圖更緩慢請(qǐng)更耐心等待,點(diǎn)擊可查看大圖):

理性思考設(shè)計(jì)店鋪首頁,把流量利用起來才是王道!!附實(shí)例,高清無 

今日熱點(diǎn)

8月24日,騰訊教育正式發(fā)布了基于企業(yè)微信的私域流量運(yùn)營工具——企微管家,為教培機(jī)構(gòu)提供從引流獲客到客戶運(yùn)營的全鏈路服務(wù)。

最新推薦
產(chǎn)品推薦
  • 微分銷

    基于微信平臺(tái),集結(jié)多樣營銷活動(dòng)推廣功能,支持無限發(fā)展微信分店,快速建立分銷網(wǎng)絡(luò)...

    詳情
  • 移動(dòng)云商城

    集微信商城、支付寶服務(wù)窗、手機(jī)觸屏版商城、app商城和PC獨(dú)立商城于一體完美融合...

    詳情