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

1、電商視覺設(shè)計(jì)第四章店鋪首頁視覺設(shè)計(jì)目 錄首頁視覺水平的四大指標(biāo)4.1店招視覺設(shè)計(jì)4.2首焦輪播區(qū)視覺設(shè)計(jì)4.3商品陳列區(qū)視覺設(shè)計(jì)4.4化妝品店鋪首頁視覺設(shè)計(jì)案例4.54.1 首頁視覺水平的四大指標(biāo)首頁跳失率1首頁點(diǎn)擊率2首頁人均點(diǎn)擊次數(shù)3首頁平均停留時(shí)間44.1 首頁視覺水平的四大指標(biāo) 1 首頁跳失率首頁跳失率，指買家通過某種渠道進(jìn)入店鋪，只訪問了一個(gè)首頁就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例。進(jìn)入店鋪首頁的渠道4.1 首頁視覺水平的四大指標(biāo) 2 首頁點(diǎn)擊率首頁點(diǎn)擊率是寶貝在首頁展現(xiàn)后的被點(diǎn)擊比率，即：首頁點(diǎn)擊率=首頁點(diǎn)擊量首頁展現(xiàn)量）。兩類店鋪首頁排版4.1 首頁視覺水平的四大指標(biāo) 3 首

2、頁人均點(diǎn)擊次數(shù)首頁人均點(diǎn)擊次數(shù)，指在一段時(shí)間內(nèi)人均點(diǎn)擊了多少次，如下圖所示。假設(shè)某日點(diǎn)擊該網(wǎng)店的唯一訪問者數(shù)為150人，在此期間內(nèi)點(diǎn)擊本店鋪首頁的總訪問數(shù)為600次，那么首頁人均點(diǎn)擊次數(shù)為：600次150人=4次/人。人均點(diǎn)擊次數(shù)4.1 首頁視覺水平的四大指標(biāo) 4 首頁平均停留時(shí)間 首頁平均停留時(shí)間=訪店鋪首頁的所有訪客總的停留時(shí)長(zhǎng)訪客數(shù)（單位：秒），多天的平均停留時(shí)間為各天人均停留時(shí)長(zhǎng)的日均值。和首頁人均點(diǎn)擊次數(shù)一樣，首頁平均停留時(shí)間也可以用來判斷一個(gè)店鋪首頁是否能留住訪客。4.2 店招視覺設(shè)計(jì)店招視覺設(shè)計(jì)規(guī)范01店鋪名稱的藝術(shù)化處理02圖層樣式的應(yīng)用034.2 店招視覺設(shè)計(jì) 1 店招視覺設(shè)

3、計(jì)規(guī)范店招高度設(shè)計(jì)規(guī)范淘寶后臺(tái)的店招高度為120像素，建議設(shè)計(jì)時(shí)設(shè)定店招尺寸為950120像素，加上導(dǎo)航條高度30像素，共150像素，可避免發(fā)布后導(dǎo)航不顯示的問題4.2 店招視覺設(shè)計(jì) 1 店招視覺設(shè)計(jì)規(guī)范店招元素設(shè)計(jì)品牌宣傳語移動(dòng)端二維碼清晰的店鋪名稱4.2 店招視覺設(shè)計(jì) 1 店招視覺設(shè)計(jì)規(guī)范店招和導(dǎo)航條風(fēng)格統(tǒng)一風(fēng)格的統(tǒng)一及修飾元素的設(shè)計(jì)，突出店鋪的品牌形象4.2 店招視覺設(shè)計(jì) 2 店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感1 使用修飾元素提升觀賞性34.2 店招視覺設(shè)計(jì) 2 店鋪名稱的藝術(shù)化處理用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感1不同字體字號(hào)的組合將店鋪名

4、稱的首個(gè)英文字母放大，并使用不同于其他字體風(fēng)格的手寫體，讓店鋪名稱文字的版式更加醒目、更具藝術(shù)感4.2 店招視覺設(shè)計(jì) 2 店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2為了將店鋪名稱與導(dǎo)航條的顏色區(qū)分開，使用了發(fā)光效果來修飾店鋪名稱，營(yíng)造出的層次感，也貼合了店鋪中銷售的照明設(shè)備的特點(diǎn)4.2 店招視覺設(shè)計(jì) 2 店鋪名稱的藝術(shù)化處理為店鋪名稱添加修飾元素使用修飾元素提升觀賞性3使用帽子的圖案來修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個(gè)性和藝術(shù)感，更容易在消費(fèi)者心中形成特定的印象4.2 店招視覺設(shè)計(jì) 3 圖層樣式的應(yīng)用圖層樣式是圖像處理與網(wǎng)頁制作中的常用功能之一，在電商視覺設(shè)計(jì)中它也發(fā)

5、揮著重要的作用。用“漸變疊加”圖層樣式來表現(xiàn)導(dǎo)航條功能按鈕被鼠標(biāo)觸碰后的狀態(tài)，在視覺上形成凹陷的效果，將其與導(dǎo)航條中正常狀態(tài)下的功能按鈕區(qū)分開4.2 店招視覺設(shè)計(jì) 3 圖層樣式的應(yīng)用當(dāng)鼠標(biāo)指針觸碰到導(dǎo)航條中任意一個(gè)功能按鈕時(shí)，該按鈕就會(huì)呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，給人視覺上的錯(cuò)覺，讓按鈕上的文字更具層次感，更易于展示當(dāng)前操作的結(jié)果4.3 首焦輪播區(qū)視覺設(shè)計(jì)設(shè)計(jì)聚焦消費(fèi)者視線1構(gòu)建設(shè)計(jì)圖三要素2溶圖的應(yīng)用范圍34.3 首焦輪播區(qū)視覺設(shè)計(jì) 1 設(shè)計(jì)聚焦消費(fèi)者視線在店鋪首頁的商品圖片展示版塊中，在其開端位置放置單張海報(bào)圖片可以在一定程度上聚焦消費(fèi)者的視線，讓其有繼續(xù)瀏覽頁面的興趣。首

6、焦位置：由于該位置所占面積較大，所以成為最能吸引消費(fèi)者眼球的位置4.3 首焦輪播區(qū)視覺設(shè)計(jì) 1 設(shè)計(jì)聚焦消費(fèi)者視線下面這樣的表現(xiàn)形式與內(nèi)容安排并不足以在第一時(shí)間聚焦消費(fèi)者的目光。首焦位置4.3 首焦輪播區(qū)視覺設(shè)計(jì) 1 設(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)信息4.3 首焦輪播區(qū)視覺設(shè)計(jì) 2 構(gòu)建設(shè)計(jì)圖三要素首焦輪播區(qū)設(shè)計(jì)三要素4.3 首焦輪播區(qū)視覺設(shè)

7、計(jì) 2 構(gòu)建設(shè)計(jì)圖三要素不同主題的背景圖4.3 首焦輪播區(qū)視覺設(shè)計(jì) 2 構(gòu)建設(shè)計(jì)圖三要素處理前后的商品形象對(duì)比處理前色彩灰暗，畫質(zhì)朦朧，畫面層次不清晰，背景色調(diào)不理想處理后色彩純凈，畫面清晰，畫面層次感強(qiáng)，商品形象更突出4.3 首焦輪播區(qū)視覺設(shè)計(jì) 2 構(gòu)建設(shè)計(jì)圖三要素如下圖所示，為幾種風(fēng)格的首焦輪播圖文字編排效果，從中可以看出文字的字體與字號(hào)、色彩的變化等是設(shè)計(jì)中最為關(guān)鍵的環(huán)節(jié)。文字元素的設(shè)計(jì)4.3 首焦輪播區(qū)視覺設(shè)計(jì) 3 溶圖的應(yīng)用規(guī)范溶圖溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，講究構(gòu)圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)。4.4 商品陳列區(qū)視覺設(shè)計(jì)營(yíng)造視覺動(dòng)線1商品布局藝術(shù)化24.4 商品陳列區(qū)視覺

8、設(shè)計(jì) 1 營(yíng)造視覺動(dòng)線商品陳列圖4.4 商品陳列區(qū)視覺設(shè)計(jì) 1 營(yíng)造視覺動(dòng)線瀏覽初期，視線水平移動(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ì)左邊的垂直瀏覽。F形瀏覽模式4.4 商品陳列區(qū)視覺設(shè)計(jì) 1

9、營(yíng)造視覺動(dòng)線商品海報(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)買興趣。4.4 商品陳列區(qū)視覺設(shè)計(jì) 2 商品布局藝術(shù)化折線型布局隨意型布局4.4 商品陳列區(qū)視覺設(shè)計(jì) 2 商品布局藝術(shù)化折線型布局4.4 商品陳列區(qū)視覺設(shè)計(jì) 2 商品布局藝術(shù)化隨意型布局4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例 標(biāo)題文字設(shè)置的字號(hào)較

10、大，利用斜面和浮雕、投影等效果來點(diǎn)綴標(biāo)題文字，使其更加精致文字選用不同的顏色、字號(hào)，并分成兩行，顯得更有層次感，并通過一些小圖案對(duì)價(jià)格進(jìn)行修飾和點(diǎn)綴，營(yíng)造出一種清新的視覺感受風(fēng)格一致的文字與圖像，營(yíng)造出 一種清新、簡(jiǎn)潔、充滿文藝氣息的氛圍 采用不規(guī)則圖形作為背景圖 的點(diǎn)綴，使商品的排列既整齊又不死板，提升其觀賞性和設(shè)計(jì)感4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例01填充背景色4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例02設(shè)置文字屬性4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例03添加商品圖及優(yōu)惠券4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例04繪制導(dǎo)航條背景4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例05為導(dǎo)航條添加文字4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例06添加文字并設(shè)置圖層樣式4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例06添加文字并設(shè)置圖層樣式4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例07添加圖像素材4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例08添加商品圖4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例09繪制背景圖形10添加模特素材圖像4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例11添加文字及修飾圖案4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例12添加商品圖4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例13制作店鋪熱銷推薦標(biāo)題4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例14添加商品圖及文字4.5 化妝品店鋪首頁視覺設(shè)計(jì)案例15添加商品圖4.5 化妝品店鋪首頁視覺設(shè)