視覺營銷之店鋪首頁設計

ADVERTISEMENT

無論瀏覽者是從搜索寶貝進來,還是直接訪問到店鋪里來,只要進了店就應該盡可能的把流量留住在店內。店內的每個頁面,都應該具備這樣的能力。為什麼流量進了店鋪留不住,除了頁面與頁面銜接引導問題外,首先要解決的是信任問題。在產品不具備競爭優勢的條件下,一個美觀大氣的首頁,可能為成為你差異化競爭中不可缺少的武器。

杜輝:很榮幸跟大家分享,今天我們的主題是視覺營銷之店鋪首頁設計,在開始之前,我們先明白首頁設計的作用在哪。我們都知道所有的下單成交都是在產品描述頁完成的,我們運營的時候也是直接引流到詳情頁,而首頁更多的是做為一種引導,更多的是分流,明白這點非常重要。

杜輝:首頁的主要功能是:1、展示產品 2、傳播品牌形象 3、傳遞活動、促銷信息 4、引導、購物路徑 。這里我們就要明白如何做到這幾點,我們知道一個首頁的有利位置是有限的,就如同我們的線下賣場,好的位置產品一般都賣得比較好。

杜輝:在做首頁設計的時候首先要跟運營溝通好,最近的運營重心、思路等,主推什麼,哪些產品是主推的。

杜輝:明白哪些人會來看我們的首頁,也就是訪問首頁的路徑,第一種是直接訪問;第二種是經過產品描述頁進行訪問。而後者遠比前者多。這兩部分人群有一個共同的點。對我們的店鋪或產品都有了第一次的接觸,有初步的了解,有一定的興趣,才會進行二次跳轉到我們的首頁,我把他們稱為準客戶。他們進入首頁無非是想再找找其他的產品或更多的進行了解。這個時候我們就要好好把握,在首頁呈現的時候堅持風格明了統一,導航要清晰,界面易讀,有邏輯性。這也是我們做呈現的一個基本原則。

杜輝:然後我們再開始首頁的框架設計 ,我們知道首頁的框架店招、導航、輪播圖、分類、單品海報、產品列表、尾頁等。這些模塊都有特定的作用,而且位置不一樣,效果也是不一樣的。

杜輝:我們視覺也好美工也好都是為了成交。其實視覺做的就是要把商品跟用戶連接起來,而且這種連接很舒服,很容易被接受,我們首頁設計有幾個比較重要的數據指標,點擊率、跌失率、平均停留時間。特別是跌失率,過高的話是有問題的,這個值保持在50%以下比較合理。跌失率是越低越好的 ,高了的話就意味著你首頁設計的目的沒有達到,前面我們講了首頁是分流,是引導,最終是要引導到詳情頁下單的?

杜輝:跌失率高意味著來了你的首頁就直接走了,這個數據是我們檢驗首頁設計的一個重要指標 這個數據在生意參謀里可以看到的,我截圖給給大家看看。

杜輝:點擊分布後就可以看到相關數據了。剛剛講了跌失率,然後就是點擊率 ,這里可以看到點擊的次數。點擊的位置的

杜輝:這有三種形式,按模塊模塊、鏈接、熱力圖都可以看到哪個地方點擊最多

ADVERTISEMENT

杜輝:這個地方就可以導出列表了 ?當然我們還有自己統計表單數據,知道這些數據後就開始進行設計優化,首頁的框架店招、導航、輪播、分類、單品海報、產品列表、尾頁等。

杜輝:我們看到這個首頁的一個基本框架布局,接下來我跟大家一個個模塊來如何進行設計進行分享。這里分PC跟手機端,但視覺原理是一樣的,最後我會跟大家分享手機端要注意的地方,我們先看店招跟導航,這個是在我們每個頁面都出現的模塊,展現量非常大。我先講視覺呈現怎麼來的,也就是我們美工做之前要了解的,PC 無線都是一樣相通的。

杜輝:我們看這幾個店招,相同的地方都是左邊,不同的是在右邊,根據不同的運營思路來做視覺呈現。

杜輝:我們再看這兩個,第一個就放了個LOGO,不過你是做品牌格調,有一定的老客戶,這樣做也可以的。但第二個就糟糕透了,不知道想說什麼,密密麻麻的,這也是很多人容易犯的錯誤,什麼都想往上面放,最後什麼也沒傳播出來。在視覺呈現最忌諱這種堆砌式設計了

杜輝:所有我們在做店招的時候應該簡潔明了一些。下面給大家做一個店招設計的設計要領

杜輝:其實,店鋪招牌無論是在pc端還是手機端,都是買家通過搜索或者產品進入店鋪,給人第一感覺,除了以上講的幾點,個人感覺店招的風格要跟整個店內的裝修色調相似或者風格要統一。我們無線端的店招也要利用好,無線店招上可以做鏈接的。而且無線店招占手機屏幕的區域也比較大。

ADVERTISEMENT

杜輝:首頁也好、詳情也好、包裝、物料等等,所有我們能呈現的都需要統一,這是視覺識別系統規範里要做的,今天不做分享,不過我們會跟大家講到首頁是如何能做到統一的。

杜輝:店招後面就是導航,導航其實跟分類一樣,第一是顧客想找想看的,第二是我們想讓顧客看的。導航的設置跟優化我們可以用店鋪裝修分析數據做依據。點擊多的肯定要著重凸顯,凸顯的方法有很多。比如放在有利位置或用色彩進行加強

杜輝:比如這個賣食品的,我們知道食品回頭客很多,我們把VIP放在最左邊,根據人的視覺心理,從左往右的瀏覽習慣,很容易看到這個分類導航

杜輝:再比如這個用色塊進行加強,讓更多的人進行點擊。 導航跟店招一樣曝光量是最大的,而它的作用主要體現在功能性上,能讓顧客用最短的時間找到想要的產品。也能讓顧客很快速的看到我們想讓其點擊的內容。

杜輝:接下就是我們的輪播海報,這個太重要了,這里我們先從第一屏論來分析,我們打開網點的時候都是顯示最上面的內容,基本就是店招 導航 輪播這些模塊,首屏海報占的位置絕對的大。這個地方的內容跟視覺呈現決定流浪者的第一印象。而這個高度是有限的,我們不同的顯示器或手機屏尺寸都不一樣。這就得考慮什麼樣的尺寸高度能最多程度的兼容主流顧客的視覺效果,也就是視覺信息完整性。

杜輝:我們看這是我們打開網頁的效果,中間這一部分就是我們看到的內容,如果這張海報太高我們就需要進行鼠標滾動才能看到下面的信息,造成海報信息的斷層,不完整性。所有考慮到我們很多筆記本用的分辨率是1024*768,建議大家這張海報的高度不要太高,控製在500像素內比較合適。

杜輝:手機端的海報尺寸基本都跟你明確了,你按照上面的建議尺寸做就可以,但是布局模塊的前後要考慮好,最重要的應該在第一屏進行展示。你要了解下你的主要客群一般用的手機大概是多大的。

杜輝:接下來我們看看首屏海報如何進行視覺呈現,這里有兩種形式的海報。活動海報跟單品海報。

杜輝:看這張活動海報,主題非常明確。巴西世界杯。用到的畫面元素、色彩都跟巴西世界杯相關。

ADVERTISEMENT

杜輝:我們看文字是怎麼處理的 ?層次很分明 。這里有標題文字、說明文字、裝飾文字。經過大小、樣式的排列處理變得整體、主次分明。人像的處理跟筆刷元素的運用都是體系世界杯的激情,更好的渲染活動~

杜輝:再看這個單品海報,想想誰來買,男的多還是女的多。女性喜歡什麼你們多懂的。玫瑰花元素 玫瑰紅配色 進行氣氛渲染。這里我們得注意的就是產品價格。非常顯眼。對於單品來說,把價格放上去是比較重要的。我們知道每個人購買的時候都是有心理價位的。再看他的編排出來。分幾個組合。價格的表現是不是也很有層次感。價格旁邊的文字更多是裝飾用的。 這是我們做海報的時候要注意的,注意你的視覺流程,主次之分。

杜輝:接下來是我們的產品列表。產品列表首先要做到整體統一。我們知道產品列表呈現兩種方式,一種是系統產品模塊直接調用主圖。一種是我們用海報的形式進行呈現。

杜輝:比如這種直接主圖的,在做主圖的時候就要做到統一,背景、板式、拍攝手法

杜輝:這種產品呈現注意每一屏都要有重點,目的是有意的進行推薦。

杜輝:最後就是我們的首頁尾部,很多時候我們都忽視了,其實我們看到尾部的人就兩種,一種是新手,一種是對我們的產品很感興趣的。面對這兩種顧客我們在設計尾部時放購物須知、售後保障、會員等,也可以進行再次的導航設計,讓顧客再選擇一次,目的就是別讓其離開你的店鋪

杜輝:無線端一樣的原理 在呈現的時候注意你的傳播思路,無線端注意這個流量圖 跟行為習慣相關。如圖:

做好一個店鋪首頁,除了可以無形的提高我們的品牌(店鋪)形象,最重要的還是轉化率。據美國哈佛商學院統計,我們衝動欲望來源於視覺占83%,而我們的聽覺僅占11%,還有3.5%來自嗅覺,1.5%來自觸覺,1%來自於味覺。如果我是你,我會趕緊把店鋪首頁發給一些朋友看看,讓他們挑挑刺說說建議。特別是可以做幾個頁面放在朋友圈讓朋友們來投票,找出大家最喜歡的頁面。

本文"視覺營銷之店鋪首頁設計"為賣家資訊編輯編創,轉載請注明出處(本文轉載於:賣家資訊http://www.maijia.com/news/article/266897)

ADVERTISEMENT