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

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

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

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

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

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

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

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

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

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

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

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

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