電商視覺設(shè)計(jì) 第4章 店鋪首頁(yè)視覺設(shè)計(jì)

1、精選ppt了解首頁(yè)視覺水平的四大指標(biāo)掌握店招的設(shè)計(jì)規(guī)范及技巧掌握首焦輪播區(qū)的設(shè)計(jì)技巧了解商品陳列區(qū)的布局方式掌握商品陳列區(qū)的布局技巧學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)精選ppt目目 錄錄首頁(yè)視覺水平的四大指標(biāo)4.1店招視覺設(shè)計(jì)4.2首焦輪播區(qū)視覺設(shè)計(jì)4.3商品陳列區(qū)視覺設(shè)計(jì)4.4化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例4.5精選ppt4.1 首頁(yè)視覺水平的四大指標(biāo)1 12 23 34 4精選ppt4.1 首頁(yè)視覺水平的四大指標(biāo)首頁(yè)跳失率，指買家通過某種渠道進(jìn)入店鋪，只訪問了一個(gè)首頁(yè)就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例。進(jìn)入店鋪首頁(yè)的渠道精選ppt4.1 首頁(yè)視覺水平的四大指標(biāo)首頁(yè)點(diǎn)擊率是寶貝在首頁(yè)展現(xiàn)后的被點(diǎn)擊比率，即：

2、首頁(yè)點(diǎn)擊率=首頁(yè)點(diǎn)擊量首頁(yè)展現(xiàn)量）。兩類店鋪首頁(yè)排版精選ppt4.1 首頁(yè)視覺水平的四大指標(biāo)首頁(yè)人均點(diǎn)擊次數(shù)，指在一段時(shí)間內(nèi)人均點(diǎn)擊了多少次，如下圖所示。假設(shè)某日點(diǎn)擊該網(wǎng)店的唯一訪問者數(shù)為150人，在此期間內(nèi)點(diǎn)擊本店鋪首頁(yè)的總訪問數(shù)為600次，那么首頁(yè)人均點(diǎn)擊次數(shù)為：600次150人=4次/人。人均點(diǎn)擊次數(shù)精選ppt4.1 首頁(yè)視覺水平的四大指標(biāo) 首頁(yè)平均停留時(shí)間=訪店鋪首頁(yè)的所有訪客總的停留時(shí)長(zhǎng)訪客數(shù)（單位：秒），多天的平均停留時(shí)間為各天人均停留時(shí)長(zhǎng)的日均值。和首頁(yè)人均點(diǎn)擊次數(shù)一樣，首頁(yè)平均停留時(shí)間也可以用來判斷一個(gè)店鋪首頁(yè)是否能留住訪客。精選ppt4.2 店招視覺設(shè)計(jì)店招視覺設(shè)計(jì)規(guī)范店招視

3、覺設(shè)計(jì)規(guī)范店鋪名稱的藝術(shù)化處理店鋪名稱的藝術(shù)化處理圖層樣式的應(yīng)用圖層樣式的應(yīng)用精選ppt4.2 店招視覺設(shè)計(jì)店招高度設(shè)計(jì)規(guī)范淘寶后臺(tái)的店招高度為120像素，建議設(shè)計(jì)時(shí)設(shè)定店招尺寸為950120像素，加上導(dǎo)航條高度30像素，共150像素，可避免發(fā)布后導(dǎo)航不顯示的問題精選ppt4.2 店招視覺設(shè)計(jì)店招元素設(shè)計(jì)精選ppt4.2 店招視覺設(shè)計(jì)店招和導(dǎo)航條風(fēng)格統(tǒng)一風(fēng)格的統(tǒng)一及修飾元素的設(shè)計(jì)，突出店鋪的品牌形象精選ppt4.2 店招視覺設(shè)計(jì)2 21 13 3精選ppt4.2 店招視覺設(shè)計(jì)1 1不同字體字號(hào)的組合將店鋪名稱的首個(gè)英文字母放大，并使用不同于其他字體風(fēng)格的手寫體，讓店鋪名稱文字的版式更加醒目、更

4、具藝術(shù)感精選ppt4.2 店招視覺設(shè)計(jì)2 2為了將店鋪名稱與導(dǎo)航條的顏色區(qū)分開，使用了發(fā)光效果來修飾店鋪名稱，營(yíng)造出的層次感，也貼合了店鋪中銷售的照明設(shè)備的特點(diǎn)精選ppt4.2 店招視覺設(shè)計(jì)為店鋪名稱添加修飾元素3 3使用帽子的圖案來修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個(gè)性和藝術(shù)感，更容易在消費(fèi)者心中形成特定的印象精選ppt4.2 店招視覺設(shè)計(jì)圖層樣式是圖像處理與網(wǎng)頁(yè)制作中的常用功能之一，在電商視覺設(shè)計(jì)中它也發(fā)揮著重要的作用。用“漸變疊加”圖層樣式來表現(xiàn)導(dǎo)航條功能按鈕被鼠標(biāo)觸碰后的狀態(tài)，在視覺上形成凹陷的效果，將其與導(dǎo)航條中正常狀態(tài)下的功能按鈕區(qū)分開精選ppt4.2 店招視覺設(shè)

5、計(jì)當(dāng)鼠標(biāo)指針觸碰到導(dǎo)航條中任意一個(gè)功能按鈕時(shí)，該按鈕就會(huì)呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，給人視覺上的錯(cuò)覺，讓按鈕上的文字更具層次感，更易于展示當(dāng)前操作的結(jié)果精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)設(shè)計(jì)聚焦消費(fèi)者視線設(shè)計(jì)聚焦消費(fèi)者視線1構(gòu)建設(shè)計(jì)圖三要素構(gòu)建設(shè)計(jì)圖三要素2溶圖的應(yīng)用范圍溶圖的應(yīng)用范圍3精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)設(shè)計(jì)聚焦消費(fèi)者視線設(shè)計(jì)聚焦消費(fèi)者視線在店鋪首頁(yè)的商品圖片展示版塊中，在其開端位置放置單張海報(bào)圖片可以在一定程度上聚焦消費(fèi)者的視線，讓其有繼續(xù)瀏覽頁(yè)面的興趣。首焦位置：由于該位置所占面積較大，所以成為最能吸引消費(fèi)者眼球的位置精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)

6、設(shè)計(jì)聚焦消費(fèi)者設(shè)計(jì)聚焦消費(fèi)者視線下面這樣的表現(xiàn)形式與內(nèi)容安排并不足以在第一時(shí)間聚焦消費(fèi)者的目光。首焦位置精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)設(shè)計(jì)聚焦消費(fèi)者視線設(shè)計(jì)聚焦消費(fèi)者視線首焦位置的內(nèi)容安排與表現(xiàn)能讓消費(fèi)者有進(jìn)一步瀏覽店鋪的欲望。有趣的圖片展示，能讓消費(fèi)者通過視覺獲得較為愉悅的體驗(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)信息精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)首焦輪播區(qū)設(shè)計(jì)三要素精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)不同主題的背景圖精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)處理前后

7、的商品形象對(duì)比處理前色彩灰暗，畫質(zhì)朦朧，畫面層次不清晰，背景色調(diào)不理想處理后色彩純凈，畫面清晰，畫面層次感強(qiáng)，商品形象更突出精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)如下圖所示，為幾種風(fēng)格的首焦輪播圖文字編排效果，從中可以看出文字的字體與字號(hào)、色彩的變化等是設(shè)計(jì)中最為關(guān)鍵的環(huán)節(jié)。文字元素的設(shè)計(jì)精選ppt4.3 首焦輪播區(qū)視覺設(shè)計(jì)溶圖溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，講究構(gòu)圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)。精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)1 12 2精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)商品陳列圖精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)瀏覽初期，視線水平移動(dòng)，且瀏覽范圍最大。剛開始瀏覽時(shí)，消費(fèi)者對(duì)商品

8、展示圖充滿了新鮮感和好奇，很可能將第一排圖片全部瀏覽完畢，并根據(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ì)左邊的垂直瀏覽。F形瀏覽模式精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)商品海報(bào)展示圖：將重點(diǎn)推薦的商品以單張海報(bào)的方式呈現(xiàn)，較為豐富的表現(xiàn)形式能很好地讓消費(fèi)者注意到商品信息。單張商品展示圖：較為重要的商品以單

9、張圖片形式排列，較大的展示面積更能獲得消費(fèi)者的矚目。三張商品展示圖：非重點(diǎn)推薦的產(chǎn)品可以三張并排展示的效果呈現(xiàn)。單張圖片：除了商品展示圖片以外，還可以搭配一些與展示商品相關(guān)的商品組合圖片，進(jìn)一步吸引消費(fèi)者的購(gòu)買興趣。精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)精選ppt4.4 商品陳列區(qū)視覺設(shè)計(jì)精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例 標(biāo)題文字設(shè)置的字號(hào)較大，利用斜面和浮雕、投影等效果來點(diǎn)綴標(biāo)題文字，使其更加精致文字選用不同的顏色、字號(hào)，并分成兩行，顯得更有層次感，并通過一些小圖案對(duì)價(jià)格進(jìn)行修飾和點(diǎn)綴，營(yíng)造出一種清新的視覺感受風(fēng)格一致的文字與圖像，營(yíng)造出 一種清

10、新、簡(jiǎn)潔、充滿文藝氣息的氛圍 采用不規(guī)則圖形作為背景圖 的點(diǎn)綴，使商品的排列既整齊又不死板，提升其觀賞性和設(shè)計(jì)感精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案例精選ppt4.5 化妝品店鋪首頁(yè)視覺設(shè)計(jì)案