-------------------------------------------------------------------------------

　　

　　【關(guān)于陳列】

　　

　　如線下商場要重視動(dòng)線和陳列一樣，我們在線上的頁面中也非常要重視關(guān)于陳列的一些細(xì)節(jié)！ 搞設(shè)計(jì)的習(xí)慣統(tǒng)一稱為用戶體驗(yàn)設(shè)計(jì)！我是基于在快消品大賣家的工作積累的實(shí)戰(zhàn)經(jīng)驗(yàn)上來談?wù)勥@些內(nèi)容，拋磚引玉吧！當(dāng)然無論怎么談頁面的用戶體驗(yàn)，也僅僅是整個(gè)電商流程的一個(gè)小環(huán)節(jié)，能不能帶來收益還得其它內(nèi)功也深厚！

　　

　　注： 這里講的“陳列設(shè)計(jì)”僅是引用了這個(gè)詞，不代表專業(yè)用語！

　　

　　關(guān)于陳列設(shè)計(jì)要把握的幾個(gè)原則是：

　　

　　1.讓新顧客輕松找到產(chǎn)品，快速熟悉產(chǎn)品目錄

　　

　　2.讓老顧客第一時(shí)間看到上架的新品

　　

　　3.陳列的目的是讓顧客做出決策

　　

　　4.在合適的位置推出主打產(chǎn)品！

　　

　　5.不要輕易的更換動(dòng)線和布局

　　

　　6.每個(gè)功能模塊所展示的產(chǎn)品數(shù)量要合理

　　

　　7.陳列的圖片規(guī)格既要節(jié)省空間又要清晰表達(dá)產(chǎn)品特征！

　　

　　8.陳列中巧用文字和數(shù)據(jù)的影響

　　

　　9.每個(gè)陳列模塊之間要有清晰的界限

　　

　　10.不要濫用廣告圖！

　　

　　11.把握陳列中引起購物欲望的元素

　　

　　12.陳列中不可忽視的即興消費(fèi)

　　

　　13. …（拋磚引玉，待續(xù)）

　　

　　-----------------------------------------------------------------------------------

　　

　　1.讓新顧客輕松找到產(chǎn)品，快速熟悉產(chǎn)品目錄

　　

　　不管您的店鋪人氣是否旺，新顧客是我們首要照顧的群體，剛進(jìn)入你的網(wǎng)站新顧客有兩種途徑，一種是直接進(jìn)了你的產(chǎn)品頁面，另外一種是進(jìn)入了你的首頁！前者瀏覽完產(chǎn)品頁面后如何讓其繼續(xù)瀏覽其他產(chǎn)品或者進(jìn)入首頁，則是導(dǎo)航和關(guān)聯(lián)模塊的設(shè)計(jì)的目標(biāo)！這個(gè)還不在陳列的范疇內(nèi)！所以后者是重點(diǎn)要討論的！

　　

　　進(jìn)入首頁后，如何讓新顧客輕松的找到產(chǎn)品呢？

　　

　　a.搜索框和店內(nèi)產(chǎn)品關(guān)鍵詞

　　

　　b.清晰的圖形化產(chǎn)品類目導(dǎo)航

　　

　　c.首頁三部曲：新款，主推，熱款

　　

　　注：我這里根據(jù)快消品（服飾衣帽鞋包類）實(shí)戰(zhàn)得出的結(jié)論，有些類目可能不適用。

　　

　　以上a/b/c三種方式都可以選擇；a搜索框針對那種網(wǎng)購經(jīng)驗(yàn)豐富，或者資深網(wǎng)絡(luò)群體，他們不需要直接展示，更喜歡自己去搜索，而關(guān)鍵詞的鏈接則縮短了跳轉(zhuǎn)流程。

　　

　　b 圖形化的產(chǎn)品類目導(dǎo)航放在首頁懸浮側(cè)邊，或者副導(dǎo)航下面都可以讓新顧客非常簡潔的明了的了解店內(nèi)產(chǎn)品的目錄！

　　

　　c 首頁三部曲基本涵蓋了店內(nèi)主流消費(fèi)的產(chǎn)品！所以每個(gè)區(qū)域展示的數(shù)量要合理安排，不至于讓新顧客迷失在大面積的產(chǎn)品中，忘記了產(chǎn)品目錄！

　　

　　這里邊有兩種聲音：

　　

　　· 一種是從商家的角度出發(fā)，希望新顧客進(jìn)來后把店內(nèi)所有產(chǎn)品都看一遍！

　　

　　· 另外一種是從顧客角度出發(fā)，幫助顧客盡快找到她想了解的產(chǎn)品！

　　

　　根據(jù)產(chǎn)品的不同，選擇不同的策略！如果產(chǎn)品差異不大，則需要引導(dǎo)其盡可能多的瀏覽產(chǎn)品！如果產(chǎn)品差異較大，則應(yīng)側(cè)重欄目的引導(dǎo)，小面積的覆蓋！

　　

　　-------這里淘寶店鋪頁面就暫時(shí)不舉了，先放一個(gè)京東的頁面分析------

　　

　　2.讓老顧客第一時(shí)間看到上架的新品

　　

　　老顧客入店有兩個(gè)需求：

　　

　　a.關(guān)心最近的新品

　　

　　b.關(guān)心店鋪活動(dòng)或者促銷

　　

　　排除了老顧客直接購買愿望產(chǎn)品這個(gè)群體（當(dāng)然如果要做細(xì)的話也可以考慮進(jìn)去）

　　

　　針對這兩個(gè)需求，開發(fā)出陳列區(qū)域；

　　

　　a 新品區(qū)域，這個(gè)區(qū)域一定是動(dòng)態(tài)，對于產(chǎn)品更新頻率比較大的類目相對來說比較好做，還有一個(gè)就是數(shù)量的多少，首頁的空間是有限的，你不能一股腦兒把所有新品都往上堆，最重要的是把主推新品往前放，這里要注意的技巧是一要重視縮略圖的大小要合理，淘寶上我基本選擇220px * 220px，兩排8款！標(biāo)題banner高度不宜過高控制在30px以內(nèi)！要明顯的講這個(gè)區(qū)域分開來，為了激發(fā)新品的點(diǎn)擊量，在banner的地方可以設(shè)置一些助于提醒的因素如：“您還有【12款】新品未查看” 這是從SNS網(wǎng)站上移植過來的辦法，我在后來的數(shù)據(jù)統(tǒng)計(jì)中發(fā)現(xiàn)這種提醒對增加新款的點(diǎn)擊率非常有效！

　　

　　b 店鋪活動(dòng)或者促銷。這個(gè)內(nèi)容在陳列的時(shí)候也有很多方式！如：活動(dòng)banner引導(dǎo)到新標(biāo)簽頁面、直接首頁全屏展現(xiàn)活動(dòng)內(nèi)容、首頁精選幾款作為引導(dǎo)。

　　

　　先說活動(dòng)banner引導(dǎo)到新標(biāo)簽頁面；

　　

　　這個(gè)很常見，banner的設(shè)計(jì)我一直主張“less is more”這個(gè)觀點(diǎn)（中文解釋就是大道至簡），用色要少，元素要少，把活動(dòng)主題突出來！很多不太成熟的美工，一味炫耀設(shè)計(jì)，喜歡在banner上做很多特效，加很多與主題沒太大關(guān)系的元素，這恰恰會分散用戶注意力，達(dá)不到影響深刻的效果！

　　

　　好的banner需要讓人有點(diǎn)進(jìn)去的沖動(dòng)，掌握兩個(gè)詞“簡潔”“夸張”！這就是被人記住的辦法！這里有兩個(gè)讓人們記住的技巧，分享給大家：

　　

　　一是重復(fù)性；二是夸張！

　　

　　重復(fù)性在設(shè)計(jì)里講的是統(tǒng)一，配色要統(tǒng)一，不宜經(jīng)常變換顏色，你現(xiàn)在看到“綠色+橙色”就知道是當(dāng)當(dāng)，看到“淡綠色”就知道是豆瓣，看到“橙色”就是淘寶一樣！

　　

　　其次是夸張，夸張的東西總是被人記住和好奇！大夏天你走在路上，突然一個(gè)穿羽絨服的人出現(xiàn)你面前，你一定會被其吸引！這個(gè)相信很多人在淘寶上看過一些令人叫絕的設(shè)計(jì)圖片，如Mr ing的那張透氣圖片，這既是一種夸張的表達(dá)，但是為人所記住！

　　

　　掌握了夸張這個(gè)原則，你在做創(chuàng)意圖片的時(shí)候就能把握好思維的方向了！

　　

　　其次說首頁直接展示活動(dòng)陳列的方式！

　　

　　每個(gè)類目的不同的產(chǎn)品消費(fèi)者有不同的消費(fèi)習(xí)慣！考量活動(dòng)內(nèi)容是直接在首頁展示呢還是放到一個(gè)新的標(biāo)簽頁？我認(rèn)為要應(yīng)該考慮活動(dòng)的目的！在旺季的時(shí)候，很多賣家即便不做活動(dòng)也已經(jīng)倒飽和負(fù)荷的狀態(tài)了，此時(shí)做一些活動(dòng)如果在首頁直接展示產(chǎn)品內(nèi)容很可能削弱原來正常首頁到產(chǎn)品頁流量（流量過于集中到促銷產(chǎn)品上了），如果活動(dòng)并不是以利潤導(dǎo)向的，那么反而降低銷售額了，而且又會增加大量的人力（策劃啊，發(fā)貨啊等）！

　　

　　賣家促銷無非就是拉流量，跑銷量，甩庫存，打推廣！

　　

　　拉流量好解釋，外面一個(gè)硬廣出去，進(jìn)來滾滾的流量如果不做好規(guī)劃，橫沖直撞打亂了原來的銷售節(jié)奏就得不償失了，此時(shí)我建議直接進(jìn)入產(chǎn)品頁面比較妥當(dāng)，一不會拖垮首頁功能，而能直接帶來轉(zhuǎn)化率！

　　

　　跑銷量的那批，大部分是利潤比較低，為了加速周轉(zhuǎn)率，這種活動(dòng)銷售部門看著挺開心，銷量也在瘋狂增長，但是其實(shí)背后的成本的還是很大的，弄的不好，團(tuán)隊(duì)人數(shù)不夠的話，大家都停下來去打包發(fā)貨吧！結(jié)果弄的一大堆退貨差評等很糟糕的用戶體驗(yàn)！個(gè)人覺得，這種低利潤跑銷量的東西不宜大張旗鼓的弄，偶爾出來刺激一下，市場疲軟的時(shí)候放一點(diǎn)出來，市場好的時(shí)候讓一邊給高毛利的產(chǎn)品上！所以在陳列上，比如首頁非主要位置開辟這么一個(gè)區(qū)域，能容納1~4款，偶爾出來秒殺一下，偶爾出來折扣一下，時(shí)不時(shí)勾引一下老顧客那個(gè)癢癢的心就可以了！

　　

　　甩庫存，甩庫存要當(dāng)做一項(xiàng)長期的活來干，從你一開始就要規(guī)劃好甩貨的周期，當(dāng)然你必須要觀察幾個(gè)銷售周期才能掌握這個(gè)甩貨時(shí)間的規(guī)律，甩早了，還不缺電哪些是死貨，甩晚了，壓了一地庫存！在陳列規(guī)劃上可以單獨(dú)開辟一個(gè)頁面，陳列的時(shí)候要有統(tǒng)一的識別符號，比如標(biāo)題還有【促】或者字樣，縮略圖要打上明顯的標(biāo)記，讓人一眼看就知道是甩貨！原價(jià)和現(xiàn)價(jià)都要標(biāo)記清楚。 長此以往下來，顧客自然就知道應(yīng)該在哪里看你們的甩貨，逐漸形成習(xí)慣以后流量自然就會穩(wěn)定下來！

　　

　　最后要說到首頁精選幾款作為引導(dǎo)的的活動(dòng)！

　　

　　這種活動(dòng)一般主體性比較強(qiáng)，而被選出來的代表產(chǎn)品也具有一定的性價(jià)比優(yōu)勢，為了吸引顧客展示的產(chǎn)品，手法有直接展示產(chǎn)品的縮略圖（淘寶上直接展示首圖），另外一種就是自己制作廣告圖，一排兩到三個(gè)這樣，一定抓住連續(xù)性，互相之間協(xié)調(diào)，引入新頁面的按鈕也要設(shè)置的巧妙！通常都會用“更多XX點(diǎn)此進(jìn)入”“猛點(diǎn)擊這里”“等等！這種類型的陳列最要緊的是產(chǎn)品的選擇，一定要具有性價(jià)比，比如原價(jià)賣290的現(xiàn)價(jià)賣120，這樣你必須要有充分的空間來展示這種優(yōu)惠差異，讓顧客一眼就能看明白，價(jià)格這種數(shù)字要明顯簡介！說到這里，很多初級的設(shè)計(jì)會把各種字體都搬上廣告圖，嚴(yán)謹(jǐn)一點(diǎn)講，像價(jià)格這種嚴(yán)肅而且信息精準(zhǔn)的東西還是不要去美化他，用一般的helvetica或者微軟雅黑字體即可！

　　

　　---------------我們來欣賞一下韓都衣舍 在首頁5周年的活動(dòng)陳列------------------------

　　

　　3.陳列的目的是讓顧客做出決策

　　

　　這個(gè)原則可能字面上很難理解，下面我用兩種陳列的方式來闡述一下！

　　

　　如圖：

　　

　　左邊這種能叫”同一空間毗鄰陳列“，右邊這種叫”同一空間沿時(shí)間陳列“為什么要介紹這兩種陳列方式呢？

　　

　　正是這兩種陳列方式?jīng)Q定了顧客的瀏覽習(xí)慣！我們拿iphone來做例子，他們的圖標(biāo)是按左邊這種”毗鄰陳列“方式展開的，我們發(fā)現(xiàn)使用的時(shí)候基本是在決定進(jìn)入哪一個(gè)程序！因?yàn)檫@種陳列把應(yīng)有信息都陳列出來了，你需要自己做決定我要使用哪一個(gè)！

　　

　　同樣在我們的網(wǎng)站上，在淘寶的店鋪上如果你希望顧客迅速對產(chǎn)品做一個(gè)判斷并進(jìn)入瀏覽階段，毗鄰陳列無疑是最好的方式！曾經(jīng)一度淘寶上很多店鋪喜歡在首頁一開屏就展開一幅巨大的廣告圖，盡管廣告圖的效果很多人做的很好，設(shè)計(jì)很棒！但是我并不贊同這種做法，當(dāng)然我排除了純宣傳不生意的那種店鋪！我們應(yīng)清晰的給自己的定位，我們是在賣東西，而不是show設(shè)計(jì)！所以與其通欄的廣告不如好好的設(shè)計(jì)好一個(gè)陳列模塊，選上幾款，并將必要信息展示出來（價(jià)格，或原價(jià)，收藏?cái)?shù)，購買數(shù)，圖片等），讓顧客迅速做出決策進(jìn)入哪一個(gè)產(chǎn)品頁面！

　　

　　有一點(diǎn)我沒弄清楚，在傳統(tǒng)線下商場和專賣店，進(jìn)入店鋪是需要一個(gè)緩沖帶的，目的是為了讓顧客更快的進(jìn)入店鋪的結(jié)構(gòu)，不至于給琳瑯滿目的產(chǎn)品弄暈了！我不知道線上這種特征是否明顯，但是我前面講過，在首頁頭部一定要有合適的產(chǎn)品圖形化目錄導(dǎo)航，這個(gè)也起到一定的緩沖作用！千萬千萬不要出現(xiàn)一進(jìn)來看到的是秒殺，聚劃算，各種亂七八糟的打折信息，讓顧客徹底對這個(gè)店鋪沒有整體感了！

　　

　　所以總結(jié)一下，不要迷信廣告圖和大篇幅設(shè)計(jì)（那個(gè)宣傳還好，賣貨不行）！很簡單的邏輯，你拿一朵花告訴你女朋友這花很漂亮很香，和你拿兩朵不同的花問她選那一朵，后者更容易讓她接受！

　　

　　那么右邊這種同一空間沿時(shí)間陳列 又有什么好處呢？

　　

　　顯然我們在產(chǎn)品詳情頁里面就是這種陳列方式，因?yàn)檫@種陳列方式是不需要你立即做出決策的，更多的時(shí)候你是在吸收信息，所以此時(shí)你的圖片和信息可以獨(dú)立開來，每一次空間展示的產(chǎn)品也好，圖片也好，信息量要豐富而且專一！我曾經(jīng)做過一些小試驗(yàn)，如果產(chǎn)品詳情頁里邊，你每一張圖的高度正好占據(jù)一個(gè)1440*900的屏幕部分，如果圖片越精準(zhǔn)表達(dá)產(chǎn)品的特征，就越容易打動(dòng)顧客！

　　

　　所以這兩種陳列方式在不同的場合一定要合理的選擇！

　　

　　4.在合適的位置推出主打產(chǎn)品

　　

　　都是比較常識性的原則，這條原則可能最難做的就是合適的位置！主打產(chǎn)品您最清楚，但是選擇最合適的位置卻需要一番調(diào)整和試驗(yàn)！有些店鋪因?yàn)轭櫩宛B(yǎng)成的瀏覽習(xí)慣，他們習(xí)慣在首頁開頭的地方看到店鋪的主打產(chǎn)品！而有些店鋪卻會在每個(gè)產(chǎn)品詳情頁的首部放主打產(chǎn)品！

　　

　　陳列主打產(chǎn)品要注意的幾點(diǎn)：

　　

　　1. 要集中展示 2. 盡量放在新顧客進(jìn)來的渠道口（這個(gè)不局限于首頁的，有些做硬廣的產(chǎn)品頁面也是進(jìn)入通道）3. 主打產(chǎn)品的包裝要顯著 4. 主打產(chǎn)品的數(shù)據(jù)要展示（收藏量啊，購買量啊等等）

　　

　　【來看一個(gè)例子】

　　

　　5.不要輕易的更換動(dòng)線和布局

　　

　　動(dòng)線一說我是在微博看見一位網(wǎng)友說的，這是線下商場的方式，也不是什么新鮮詞！同樣在線上的頁面布局中也是這個(gè)問題的！玩法一樣，一旦確立動(dòng)線就不要輕易改動(dòng)！

　　

　　比如有店鋪首頁動(dòng)線是這樣的（導(dǎo)航—副導(dǎo)航—活動(dòng)廣告圖—新款區(qū)域—主打款區(qū)域—產(chǎn)品主分類—分類陳列——同上）一旦這條動(dòng)線確定下來就不要輕易去改動(dòng)，因?yàn)楹芸赡苡绊懙嚼项櫩偷臑g覽習(xí)慣！當(dāng)然如果有更好的布局方式的時(shí)候一定需要好好規(guī)劃，然后慢慢改動(dòng)，讓顧客慢慢適應(yīng)！理解起來就是一句話：充分尊重用戶體驗(yàn)！

　　

　　6.每個(gè)功能模塊展示的數(shù)量要合理

　　

　　什么事功能模塊？如你在首頁橫排8款產(chǎn)品的一個(gè)新款展示區(qū)域，這就是一個(gè)功能模塊，或者你在側(cè)邊展示的”瀏覽量最高的10款產(chǎn)品“或者”瀏覽過該款的人還瀏覽過“等這些都是功能模塊！這個(gè)模塊的數(shù)量是需要合理控制的，不是越多越好，顧客有一個(gè)瀏覽時(shí)間，純?yōu)g覽性質(zhì)的基本就是掃一遍，如果仔細(xì)看的可能也會有看膩的時(shí)候！

　　

　　所以要合理的放一定數(shù)量的產(chǎn)品，像首頁這種結(jié)構(gòu)性很強(qiáng)的頁面盡量款數(shù)要精簡！而分類頁這種展示頁面就要多放！

　　

　　7.陳列的圖片規(guī)格既要節(jié)省空間又要清晰表達(dá)產(chǎn)品特征！

　　

　　最最重要的是表達(dá)產(chǎn)品特征！想縮略圖（主圖）這種圖片因?yàn)闀豢s小，所以盡量讓產(chǎn)品占據(jù)圖片80%的空間！擺放的角度和表現(xiàn)的特征一定要清晰準(zhǔn)確！這個(gè)根據(jù)不同產(chǎn)品要不同的調(diào)整，每個(gè)產(chǎn)品都有其賣點(diǎn)，嘗試將這個(gè)賣點(diǎn)在這種小方格圖片中準(zhǔn)確的表達(dá)出來！這才是王道！很少有顧客愿意看那些花里胡哨的東西，他們最終想了解產(chǎn)品怎么回事，你圍繞的主題也是！

　　

　　8.陳列中巧用文字和數(shù)據(jù)的影響

　　

　　相信大家對VANCL的頁面中那個(gè)紅圈價(jià)格印象很深，我們進(jìn)入VANCL的頁面感受最深的是他無處不在的價(jià)格數(shù)字，除了正常的價(jià)格標(biāo)簽外，醒目的價(jià)格數(shù)字會對顧客構(gòu)成一定的購物氛圍！在文字的鏈接上如”您還有x款沒有查看“收藏人數(shù)XXX人 等！這些細(xì)節(jié)上的文字和數(shù)字都在潛移默化的影響著消費(fèi)者的決策，所以在陳列中要巧用這些文字和數(shù)字！

　　

　　9.每個(gè)陳列模塊之間要有清晰的界限

　　

　　每個(gè)模塊都有其特殊的功能，就好比每個(gè)貨架上展示著不同的產(chǎn)品一樣，顧客不知道您應(yīng)該是最清楚的，所以要有效的區(qū)別這些貨架，讓顧客從這個(gè)模塊瀏覽到下一個(gè)模塊的時(shí)候有一個(gè)概念！不至于一圈看下來都不知道看了些什么！

　　

　　如何來做個(gè)界限了，通常用帶標(biāo)題的橫條！或者用不同顏色塊來區(qū)別，或者用圖形化的展示區(qū)域來區(qū)別！區(qū)別的方式可以是文字，圖形，結(jié)構(gòu)等！

　　

　　10.不要濫用廣告圖！

　　

　　這個(gè)在陳列結(jié)構(gòu)中講過一點(diǎn)，廣告圖很多時(shí)候他起到一種宣傳作用，永遠(yuǎn)不要以為廣告圖能給你帶來多少流量，這個(gè)關(guān)鍵在于廣告圖在哪？如果廣告圖是掛在淘寶首頁做硬廣，

　　

　　那么迷信一下還是有回報(bào)的！如果人都到你家店鋪了，你還打著大幅廣告，大可不必了！稍微放幾個(gè)小幅的宣傳圖片就可以了，完全沒有必要占據(jù)大面積的空間來展示一兩款產(chǎn)品，這是本末倒置的行為！

　　

　　11.把握陳列中引起購物欲望的元素

　　

　　這個(gè)元素有很多種，如（特點(diǎn)鮮明的價(jià)格標(biāo)簽，收藏?cái)?shù)量，瀏覽數(shù)量，購買數(shù)量，等）這些元素看似很小，卻也起到了不俗的作用，因?yàn)閺谋娦睦淼拇嬖冢绻櫩涂吹揭粋€(gè)某款產(chǎn)品下邊展示著大量瀏覽量 和收藏量 一定會好奇是什么產(chǎn)品這么熱門！

　　

　　通常引導(dǎo)按鈕的文字可以做的活潑一點(diǎn)，到哪都是”點(diǎn)擊進(jìn)入“可能會有點(diǎn)乏味！

　　

　　12.陳列中不可忽視的即興消費(fèi)

　　

　　即興消費(fèi)就是在顧客正常的購買過程購買了不在計(jì)劃內(nèi)的產(chǎn)品！關(guān)聯(lián)營銷是一個(gè)手法，到了執(zhí)行層面就是陳列上的設(shè)計(jì)，關(guān)聯(lián)模塊放在哪，放哪些關(guān)聯(lián)都是要考慮的問題！現(xiàn)在很多賣家習(xí)慣將關(guān)聯(lián)模塊放在產(chǎn)品詳情頁的前面，我覺得這是極大不尊重顧客的做法，本來我好好的要看A產(chǎn)品，結(jié)果你給我整一大堆推薦產(chǎn)品放在前面，結(jié)果拉了半天才看到我想看的產(chǎn)品！這也是本末倒置的，合理的關(guān)聯(lián)模塊要放在顧客剩余時(shí)間的地方，比如瀏覽完以后，比如切換到另外一個(gè)頁面以后，等等！而不是阻礙顧客正常的瀏覽過程，強(qiáng)行插播廣告！