淘寶網(wǎng)店首頁(yè)的視覺文案設(shè)計(jì)

1、店鋪首頁(yè)的視覺文案設(shè)計(jì)chapter eight 首頁(yè)可以說(shuō)是一個(gè)網(wǎng)店的臉面，如果店鋪的首頁(yè)不美觀，就不能有效吸引消費(fèi)者的注意力，那么不管店鋪的商品有多少，也很難吸引消費(fèi)者購(gòu)買。當(dāng)然，首頁(yè)不能只有圖片，還需要配上合適的文案，才能讓它更具可讀性。 掌握衡量首頁(yè)設(shè)計(jì)水平的四大指標(biāo)。 掌握店招視覺文案設(shè)計(jì)的方法。 掌握首焦輪播區(qū)視覺文案設(shè)計(jì)的方法。 掌握商品陳列區(qū)視覺文案設(shè)計(jì)的方法。學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)contents目錄首頁(yè)設(shè)計(jì)水平的四大指標(biāo)1首頁(yè)各模塊的視覺文案設(shè)計(jì)2一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo) 首頁(yè)跳失率1 首頁(yè)點(diǎn)擊率2 首頁(yè)人均點(diǎn)擊次數(shù)3 首頁(yè)平均停留時(shí)間4一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo)l 首頁(yè)跳失率

2、是指消費(fèi)者通過(guò)某種渠道進(jìn)入店鋪，只訪問(wèn)了首頁(yè)一個(gè)頁(yè)面就離開的訪問(wèn)次數(shù)占該入口總訪問(wèn)次數(shù)的比例。電商運(yùn)營(yíng)者需要隨時(shí)觀測(cè)店鋪的各項(xiàng)數(shù)據(jù)，并根據(jù)數(shù)據(jù)變化情況對(duì)頁(yè)面進(jìn)行優(yōu)化與調(diào)整。l 根據(jù)店鋪規(guī)模和所售商品的類型，可以參照這樣的判斷標(biāo)準(zhǔn)：如果是心級(jí)店鋪，那么跳失率在70%及以下都屬于正常，不需要進(jìn)行優(yōu)化；冠級(jí)店鋪如果跳失率在60%以上，就需要考慮是否是海報(bào)設(shè)計(jì)成文案信息出現(xiàn)了問(wèn)題，需要根據(jù)具體的數(shù)據(jù)做出相應(yīng)的優(yōu)化與調(diào)整。一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo)n 以淘寶店鋪為例，消費(fèi)者進(jìn)入店鋪的店鋪首頁(yè)渠道有很多，大致可以分為以下四種渠道。一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo)l 首頁(yè)點(diǎn)擊率是商品在首頁(yè)展現(xiàn)后的被點(diǎn)擊的比例，即

3、首頁(yè)點(diǎn)擊率首頁(yè)點(diǎn)擊量首頁(yè)展現(xiàn)量。l 首頁(yè)點(diǎn)擊率越高，說(shuō)明商品對(duì)消費(fèi)者的吸引力越強(qiáng)；首頁(yè)點(diǎn)擊率越低，說(shuō)明商品對(duì)消費(fèi)者的吸引力越差，這時(shí)就需要對(duì)店鋪進(jìn)行優(yōu)化，如優(yōu)化商品圖片和推廣標(biāo)題，或者優(yōu)化商品詳情頁(yè)中的信息，讓商品的展現(xiàn)盡可能多地帶來(lái)點(diǎn)擊量。一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo)l 首頁(yè)人均點(diǎn)擊次數(shù)，是指在一段時(shí)間內(nèi)，人均點(diǎn)擊了多少次店鋪首頁(yè)。假設(shè)某日點(diǎn)擊該網(wǎng)店的訪問(wèn)者數(shù)為150人，在此期間點(diǎn)擊本店鋪首頁(yè)的總訪問(wèn)數(shù)為600次，那么首頁(yè)人均點(diǎn)擊次數(shù)為：600次150人=4次/人。l 運(yùn)營(yíng)者要根據(jù)首頁(yè)人均點(diǎn)擊次數(shù)來(lái)優(yōu)化店鋪整體的導(dǎo)航，美化商品圖片，這對(duì)訪客的引導(dǎo)非常重要。一、首頁(yè)設(shè)計(jì)水平的四大指標(biāo)l 首頁(yè)平均

4、停留時(shí)間（單位：秒）訪問(wèn)店鋪首頁(yè)的所有訪客總的停留時(shí)長(zhǎng)訪客數(shù)，多天的平均停留時(shí)間為各天平均停留時(shí)間的日均值。l 一般情況下，訪客平均停留時(shí)間越長(zhǎng)，說(shuō)明店鋪的留客工作做得越到位。如果訪客在首頁(yè)平均停留時(shí)間很短，就要考慮商品的圖片設(shè)計(jì)、優(yōu)化等方面是否把商品特點(diǎn)都展現(xiàn)出來(lái)了，以及首頁(yè)設(shè)計(jì)是否能夠吸引訪客，然后根據(jù)后臺(tái)的數(shù)據(jù)統(tǒng)計(jì)做出相應(yīng)的調(diào)整。contents目錄首頁(yè)設(shè)計(jì)水平的四大指標(biāo)1首頁(yè)各模塊的視覺文案設(shè)計(jì)2店招的視覺文案設(shè)計(jì)1首焦輪播區(qū)的視覺文案設(shè)計(jì)2商品陳列區(qū)的視覺文案設(shè)計(jì)3二、首頁(yè)各模塊的視覺文案設(shè)計(jì)二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1店招視覺設(shè)計(jì)規(guī)范l 不同的電商平臺(tái)對(duì)店招的圖片尺寸有著不同的要

5、求，下面以淘寶網(wǎng)為例來(lái)介紹店招的視覺設(shè)計(jì)規(guī)范。店招高度的設(shè)計(jì)規(guī)范淘寶后臺(tái)要求的店招高度為120像素，建議設(shè)計(jì)時(shí)，設(shè)定店招尺寸為950像素120像素，加上導(dǎo)航條的高度30像素，共150像素，可避免發(fā)布后導(dǎo)航條不顯示的問(wèn)題二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1店招視覺設(shè)計(jì)規(guī)范l 店招的首要功能就是要清晰地展示店鋪名稱。在店招上可以添加品牌宣傳語(yǔ)、近期的打折促銷信息、收藏按鈕或移動(dòng)端二維碼等元素，但要注意這些元素最好不要超過(guò)3個(gè)。店招元素設(shè)計(jì)清晰的店鋪名稱品牌宣傳語(yǔ)移動(dòng)端二維碼二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1店招視覺設(shè)計(jì)規(guī)范l 在設(shè)計(jì)店招時(shí)要注意和導(dǎo)航條的風(fēng)格進(jìn)行統(tǒng)一，利用色彩、修飾元素與風(fēng)格的相似性來(lái)營(yíng)造視

6、覺上的一致性。店招和導(dǎo)航條風(fēng)格統(tǒng)一統(tǒng)一的風(fēng)格及修飾元素的設(shè)計(jì)，突出店鋪的品牌形象二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2店鋪名稱的藝術(shù)化處理 用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感1將店鋪名稱的首個(gè)英文字母放大，并使用不同于其他字體風(fēng)格的手寫體，讓店鋪名稱文字的版式更加醒目、更具藝術(shù)感二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2店鋪名稱的藝術(shù)化處理 用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感1添加特效，突出特殊性和醒目度2為了將店鋪名稱與導(dǎo)航條的顏色區(qū)分開，使用了發(fā)光效果來(lái)修飾店鋪名稱，營(yíng)造出了層次感，也貼合了店鋪銷售的照明設(shè)備的特點(diǎn)二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2店鋪名稱的藝術(shù)化處理 用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感1添加特效，突出

7、特殊性和醒目度2使用修飾元素提升觀賞性3使用帽子的圖案來(lái)修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個(gè)性和藝術(shù)感，更容易在消費(fèi)者心中形成特定的印象二、首頁(yè)各模塊的視覺文案設(shè)計(jì)3圖層樣式的應(yīng)用l 在導(dǎo)航條的制作中就需要應(yīng)用圖層樣式。因?yàn)樘詫氀b修后臺(tái)默認(rèn)的樣式只允許用戶更改導(dǎo)航條的背景顏色。l 一個(gè)質(zhì)感強(qiáng)烈、層次清晰的導(dǎo)航條，不僅可以提升整個(gè)店鋪首頁(yè)的檔次，而且能讓消費(fèi)者更樂(lè)意去點(diǎn)擊。而圖層樣式的作用就是對(duì)設(shè)計(jì)元素進(jìn)行修飾和美化，實(shí)現(xiàn)色彩、質(zhì)感與光澤上的變化。二、首頁(yè)各模塊的視覺文案設(shè)計(jì)3圖層樣式的應(yīng)用用“漸變疊加”圖層樣式來(lái)表現(xiàn)導(dǎo)航條功能按鈕被鼠標(biāo)觸碰后的狀態(tài)，在視覺上形成凹陷的效果，將

8、其與導(dǎo)航條中正常狀態(tài)下的功能按鈕區(qū)分開當(dāng)鼠標(biāo)指針觸碰到導(dǎo)航條中任意一個(gè)功能按鈕時(shí)，該按鈕就會(huì)呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，能給人視覺上的錯(cuò)覺，讓按鈕上的文字更具層次感，更易于展示當(dāng)前操作的結(jié)果二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1設(shè)計(jì)聚焦消費(fèi)者視線l 在店鋪首頁(yè)的商品圖片展示板塊中，在其開端位置放置單張海報(bào)圖片可以在一定程度上聚焦消費(fèi)者的視線，讓其有繼續(xù)瀏覽頁(yè)面的興趣。打開網(wǎng)頁(yè)后第一時(shí)間出現(xiàn)在消費(fèi)者視線中的區(qū)域即店鋪首頁(yè)的第一屏，在該區(qū)域會(huì)形成首焦位置。店鋪的首焦位置首焦位置：由于該位置所占面積較大，所以成為最能吸引消費(fèi)者眼球的位置二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1設(shè)計(jì)聚焦消費(fèi)者視線n 店鋪

9、在首頁(yè)的首焦位置安排了以文字?jǐn)⑹鰹橹饕憩F(xiàn)形式的店鋪介紹，消費(fèi)者在進(jìn)入店鋪后迫切想要了解到的是商品的信息，而非店鋪的介紹。二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1設(shè)計(jì)聚焦消費(fèi)者視線有趣的圖片展示，能讓消費(fèi)者通過(guò)視覺獲得較為愉悅的體驗(yàn)文案信息告知了消費(fèi)者店鋪中的優(yōu)惠活動(dòng)，因?yàn)榈赇伒膬?yōu)惠活動(dòng)信息對(duì)于大部分消費(fèi)者而言都是極具吸引力的。同時(shí)，簡(jiǎn)潔的文字與圖形裝飾的結(jié)合讓消費(fèi)者能夠輕松地獲取相關(guān)信息二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2構(gòu)成首焦輪播圖的三要素l 店鋪首頁(yè)中的首焦輪播區(qū)基本上都是由三個(gè)要素組成的，即唯美、絢麗的背景，完整、精致的商品形象，以及精心編排的廣告文案。首焦輪播區(qū)設(shè)計(jì)三要素背景商品廣告文字二、首頁(yè)各

10、模塊的視覺文案設(shè)計(jì)2構(gòu)成首焦輪播圖的三要素首焦輪播圖的背景一定要與商品的形象保持一致的風(fēng)格，或者能夠烘托出某種特定的氣氛。以七夕節(jié)為主題的背景不同主題的背景圖以“雙十一”活動(dòng)為主題的背景二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2構(gòu)成首焦輪播圖的三要素首焦輪播圖中的商品形象圖一定要經(jīng)過(guò)色調(diào)和光影處理，能夠真實(shí)再現(xiàn)商品的色彩和品質(zhì)，或者根據(jù)背景和文字的風(fēng)格做適當(dāng)修飾。處理前后的商品形象對(duì)比處理后：色彩純凈，畫面清晰，畫面層次感強(qiáng)，商品形象更突出處理前：色彩灰暗，畫質(zhì)朦朧，畫面層次不清晰，背景色調(diào)不理想二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2構(gòu)成首焦輪播圖的三要素文字是首焦輪播圖設(shè)計(jì)中不可或缺的重要元素，很多不能用圖片表

11、達(dá)的信息都需要通過(guò)文字來(lái)傳達(dá)，如活動(dòng)的內(nèi)容、商品的名稱、商品的價(jià)格等。因此，藝術(shù)化的文字編排在首焦輪播圖的設(shè)計(jì)中就顯得尤為重要。文字元素的設(shè)計(jì)二、首頁(yè)各模塊的視覺文案設(shè)計(jì)3溶圖的應(yīng)用規(guī)范l 溶圖是用兩張或兩張以上的圖片拼合起來(lái)的一種圖片，講究構(gòu)圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)。制作精良的溶圖配上文字可以是一幅優(yōu)美的藝術(shù)作品。溶圖l 在選擇溶圖時(shí)要注意，要么溶圖的色調(diào)與商品相似，要么溶圖與商品能夠和諧搭配。二、首頁(yè)各模塊的視覺文案設(shè)計(jì)1營(yíng)造視覺動(dòng)線l 許多賣家習(xí)慣將商品展示圖片整齊劃一地排列在店鋪首頁(yè)之中。整齊排列的商品陳列圖l 如果在店鋪首頁(yè)放置過(guò)多的圖片，會(huì)讓消費(fèi)者失去瀏覽的耐心。而這也直接導(dǎo)致了消費(fèi)者

12、f形瀏覽模式的形成。瀏覽初期，視線水平移動(dòng)，且瀏覽范圍最大。剛開始瀏覽時(shí)，消費(fèi)者對(duì)商品展示圖充滿了新鮮感和好奇，很可能將第一排圖片全部瀏覽完，并根據(jù)從上到下的瀏覽經(jīng)驗(yàn)，轉(zhuǎn)向?qū)Φ诙艌D片的瀏覽水平瀏覽范圍縮短。此時(shí)圖片的布局沒有任何變化，消費(fèi)者對(duì)于圖片瀏覽的新鮮度就會(huì)降低，開始失去瀏覽的耐心，于是對(duì)第二排圖片的水平瀏覽范圍便會(huì)縮短失去耐心，開始進(jìn)行垂直瀏覽。當(dāng)消費(fèi)者看到第三排仍然是一成不變的圖片排列后，瀏覽的耐心就會(huì)更少，還可能會(huì)想，“圖片怎么這么多，大概地往下看看吧”，于是開始只對(duì)左邊垂直 瀏覽l 因此，在進(jìn)行商品陳列區(qū)圖片的排列設(shè)計(jì)時(shí)，要首先使用整潔的排列讓消費(fèi)者獲得輕松感，在此基礎(chǔ)上還要注意圖片不宜過(guò)多，橫排圖片最好不要超過(guò)五張。l 通過(guò)靈活多變的排列方式形成視覺動(dòng)線，也能減少過(guò)于死板的排列組合帶來(lái)的乏味感。商品海報(bào)展示圖：將重點(diǎn)推薦的商品以單張海報(bào)的方式呈現(xiàn)，較為豐富的表現(xiàn)形式能很好地讓消費(fèi)者注意到商品信息單張商品展示圖：較為重要的商品以單張圖片的形式排列，較大的展示面積更能獲得消費(fèi)者的矚目三張商品展示圖：非重點(diǎn)推薦的產(chǎn)品可以三張并排展示的方式呈現(xiàn)單張圖片：除了商品展示圖外，還可以搭配一些與展示商品相關(guān)的商品組合圖片，進(jìn)一步吸引消費(fèi)者的購(gòu)買興趣二、首頁(yè)各模塊的視覺文案設(shè)計(jì)2商品布局藝術(shù)化l 折線