店鋪視覺設(shè)計(jì)要讓顧客停留在店鋪首頁的3秒內(nèi)搞定顧客，那不管是色彩、結(jié)構(gòu)還是陳列方式，一樣都不能放過。推薦大家也看看此文：網(wǎng)店視覺營銷之廣告圖設(shè)計(jì)

　　

　　我們這次來看的是一家汽車改裝用品店鋪，此類目的用戶群體非常小眾，具備自身的獨(dú)特性。從該店的目標(biāo)用戶群——20～40歲、性格外向喜歡被關(guān)注的中青年男性來看，店鋪需要突出的特點(diǎn)是專業(yè)和質(zhì)感。要體現(xiàn)這些，最容易著手的方面就是店鋪視覺。

　　

　　首頁模塊合理搭配

　　

　　店招：主次有別

　　

　　一個(gè)店鋪中，只有店招部分是貫穿于整個(gè)店鋪的所有頁面，它不光是我們整個(gè)的視覺定位，也是我們品牌的詮釋，更是我們對(duì)顧客引導(dǎo)的第一步。

　　

　　對(duì)于這家店鋪的店招，從視覺上講，設(shè)計(jì)部分基本沒有，這樣的紅黑搭配其實(shí)沒有主次之分，達(dá)不到點(diǎn)睛效果。一般來說，我們會(huì)有大面積的主色，然后在重要的地方，用輔色點(diǎn)睛出來，達(dá)到提醒，示意的效果。

　　

　　在導(dǎo)航上，清晰羅列了商品分類，這對(duì)用戶的選擇瀏覽上有很大的幫助。很多商家會(huì)在導(dǎo)航上放公司介紹，購物流程之類的信息。但從客戶角度出發(fā)，他們來店鋪的目的是選購商品，所以對(duì)于用戶來說，分類最重要。因此店招必須以商品分類為主，其他導(dǎo)航為輔。

　　

　　首屏：黃金分割

　　

　　在店鋪首頁中，首屏的位置相當(dāng)金貴。所以一般都會(huì)在首屏放店鋪的活動(dòng)促銷或是非常有競爭力的產(chǎn)品。首屏內(nèi)容有限，因此位置的分配尤顯重要。

　　

　　該店首屏左右分欄，這樣的布局相對(duì)緊湊，視覺效果會(huì)稍弱一些。對(duì)于運(yùn)營能力強(qiáng)，或者活動(dòng)多的商家比較適用。當(dāng)然也可以上下結(jié)構(gòu)，上面一張大圖，下面三張小圖。畢竟通欄的圖片讓人感覺大氣，當(dāng)然相比這個(gè)會(huì)損失一些頁面的高度，減少了首屏可放內(nèi)容。如果店鋪活動(dòng)不多，一個(gè)月2個(gè)以下活動(dòng)，那完全不用這么多的廣告位。

　　

　　在廣告位的管理分配上，個(gè)人認(rèn)同短期優(yōu)惠力度大的活動(dòng)給予大圖展示，刺激消費(fèi)者，對(duì)于長期，優(yōu)惠力度一般的活動(dòng)，可以用輔助小圖展示，節(jié)省空間。

　　

　　或許很多賣家更愿意選擇圖片輪播的方式，但仔細(xì)分析之后會(huì)發(fā)現(xiàn)輪播會(huì)存在不少問題：第一，圖片輪播意味著增加用戶的等待時(shí)間，所有增加用戶時(shí)間和操作的事情，都是影響轉(zhuǎn)化的關(guān)鍵因素。第二，因?yàn)榫W(wǎng)速問題導(dǎo)致打開頁面很慢，這會(huì)導(dǎo)致顧客看到的第一張圖片可能是輪播中的第二張或者第三張圖片。而對(duì)于賣家來說，一般會(huì)把促銷力度最大最想讓顧客看到的信息放在第一張。因此，這就意味著如果要讓顧客看到第一張圖片，則要讓他等待十幾秒的時(shí)間。在設(shè)計(jì)要求中，我們不能讓顧客思考超過3秒，更何況這是十幾秒。

　　

　　二屏：購物引導(dǎo)

　　

　　接下來這塊，通過之前對(duì)店鋪的分析，我們要給顧客提供最便捷的購物路徑。所以賣家可以把購物引導(dǎo)、商品導(dǎo)航放在這塊。商品分類有很多，如：按品牌分、按價(jià)格分、按渠道分、按系列分、按功能分、按人群分等。

　　

　　對(duì)于該店的用戶人群來說，內(nèi)行客戶當(dāng)然找對(duì)口的產(chǎn)品很重要，他們需要的是找對(duì)應(yīng)功能用途的東西。而汽車的每個(gè)品牌每種型號(hào)配件都不一樣，無論是對(duì)內(nèi)行還是外行來說，按車的品牌或是型號(hào)分也非常適用。對(duì)于外行人來說，他知道的只是自己車的牌子型號(hào)，并不知道自己該買些什么。所以在分類這塊，我們可以分兩類，一個(gè)是功能功效，一個(gè)是車的品牌或型號(hào)。

　　

　　當(dāng)然在分類這塊，也是比較容易讓人困惑的地方，可以在這加上我們的聯(lián)系方式和客服旺旺，在他產(chǎn)生困惑的時(shí)候知道去哪找解決辦法。這樣的分類方式也完全可以應(yīng)用到左側(cè)分類當(dāng)中去。

　　

　　三屏及以下：動(dòng)態(tài)巧搭

　　

　　店鋪第三屏及以下，就是各種產(chǎn)品的呈現(xiàn)。自從淘寶sdk出來以后，店鋪可以實(shí)現(xiàn)很多js的動(dòng)態(tài)效果，比如標(biāo)簽頁、放大鏡、手風(fēng)琴等。賣家可以根據(jù)自身的需求靈活運(yùn)用，搭配出非常多很實(shí)用的效果。

　　

　　上圖是該店熱門產(chǎn)品的推薦，這個(gè)將近一屏大小的地方，賣家其實(shí)只介紹了一款產(chǎn)品。就好比一件衣服，在這么大的位置展示了8種顏色，實(shí)屬浪費(fèi)。建議這塊選擇的內(nèi)容可以放到寶貝描述中去，當(dāng)顧客對(duì)這個(gè)產(chǎn)品感興趣了，才會(huì)去選擇適合自己的款式，顧客不會(huì)因?yàn)槟愕目钍蕉x擇你的產(chǎn)品。

　　

　　寶貝詳情裁剪有度

　　

　　對(duì)于品牌知名度不是非常大，老客戶、回頭客不是那么多的店鋪來說，買家基本通過商品描述頁進(jìn)入。所以，寶貝詳情頁的設(shè)置也不容忽視。描述頁面的演化從最初的商品介紹到功能功效到品牌介紹到物流發(fā)貨到商品推薦搭配推薦，不斷的根據(jù)顧客或是賣家自身的認(rèn)知往里邊加了很多內(nèi)容。

　　

　　詳情頁內(nèi)容并不是越多越好，而是根據(jù)產(chǎn)品特性和用戶需求合理放置。根據(jù)之前對(duì)該店用戶和產(chǎn)品的分析，該店鋪的寶貝詳情頁大致可遵循以下結(jié)構(gòu)：

　　

　　1. 主要活動(dòng)促銷信息（顧客購買催化劑）

　　

　　2. 商品參數(shù)及功能（商品基本信息，要有旺旺）

　　

　　3. 資質(zhì)保證（顧客購買動(dòng)力）

　　

　　4. 套餐選擇（選擇必備，要有旺旺）

　　

　　5. 商品圖片

　　

　　6. 搭配推薦（推薦相關(guān)商品）

　　

　　文字提煉重點(diǎn)

　　

　　可以看到目前店鋪詳情頁的文字部分，雖然有豐富的變色，但純文字的展示絕對(duì)會(huì)讓買家眼花繚繞，不只所云。對(duì)于多文字的展示及重點(diǎn)的把控應(yīng)該由從視覺上去體驗(yàn)，舉個(gè)列子，如下：

　　

　　左邊純文字的展示，經(jīng)過設(shè)計(jì)變成右邊的樣式，突出了文字的重點(diǎn)，同樣是花三秒的時(shí)間，左邊的內(nèi)容很難讓人抓到重點(diǎn)。而右邊非常清晰的告知了顧客，只要關(guān)于商品、尺寸、退換貨的問題輕易。

　　

　　圖片陳列多樣化

　　

　　可以看到該店鋪的產(chǎn)品是一張接著一張的圖片成列形式，但事實(shí)上并不需要這么多的圖片。賣家可相應(yīng)地減少相同角度的圖片。另外，可以選擇多樣化的圖片排版模式，而不是直接一張緊挨著一張。這樣不但能減少頁面的高度，還增加了圖片可圖性，既美觀又實(shí)用。

　　

　　另外，除了有好的設(shè)計(jì)外，店鋪的產(chǎn)品圖片拍攝也需要進(jìn)一步改善。汽車改裝配件的產(chǎn)品，不像服裝類產(chǎn)品注重外觀的設(shè)計(jì)，而是注重突出商品的功效功能和質(zhì)量。所以因此，商品的拍攝不需要有花哨的背景，突出產(chǎn)品的質(zhì)感，細(xì)節(jié)做工相對(duì)更重要，比如可以用簡單的白色背景，多一些細(xì)節(jié)做工上的圖片，體現(xiàn)質(zhì)感即可。