店鋪首頁視覺設計方案課件

第4章

店鋪首頁視覺設計了解首頁視覺水平的四大指標掌握店招的設計規(guī)范及技巧掌握首焦輪播區(qū)的設計技巧了解商品陳列區(qū)的布局方式掌握商品陳列區(qū)的布局技巧學習目標店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)第4章店鋪首頁視覺設計了解首頁視覺水平的四大指標學習目標目錄首頁視覺水平的四大指標4.1店招視覺設計4.2首焦輪播區(qū)視覺設計4.3商品陳列區(qū)視覺設計4.4化妝品店鋪首頁視覺設計案例4.5店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)目錄首頁視覺水平的四大指標4.1店招視覺設計4.2首焦4.1首頁視覺水平的四大指標首頁跳失率1首頁點擊率2首頁人均點擊次數(shù)3首頁平均停留時間4店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標首頁跳失率1首頁點擊率2首頁人4.1首頁視覺水平的四大指標

1首頁跳失率

首頁跳失率，指買家通過某種渠道進入店鋪，只訪問了一個首頁就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例。進入店鋪首頁的渠道店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標1首頁跳失率 首頁跳失率，4.1首頁視覺水平的四大指標

2首頁點擊率

首頁點擊率是寶貝在首頁展現(xiàn)后的被點擊比率，即：首頁點擊率=首頁點擊量÷首頁展現(xiàn)量）。兩類店鋪首頁排版店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標2首頁點擊率 首頁點擊率是4.1首頁視覺水平的四大指標

3首頁人均點擊次數(shù)

首頁人均點擊次數(shù)，指在一段時間內(nèi)人均點擊了多少次，如下圖所示。假設某日點擊該網(wǎng)店的唯一訪問者數(shù)為150人，在此期間內(nèi)點擊本店鋪首頁的總訪問數(shù)為600次，那么首頁人均點擊次數(shù)為：600次÷150人=4次/人。人均點擊次數(shù)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標3首頁人均點擊次數(shù) 首頁人4.1首頁視覺水平的四大指標

4首頁平均停留時間

首頁平均停留時間=訪店鋪首頁的所有訪客總的停留時長÷訪客數(shù)（單位：秒），多天的平均停留時間為各天人均停留時長的日均值。和首頁人均點擊次數(shù)一樣，首頁平均停留時間也可以用來判斷一個店鋪首頁是否能留住訪客。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標4首頁平均停留時間4.2店招視覺設計店招視覺設計規(guī)范01店鋪名稱的藝術(shù)化處理02圖層樣式的應用03店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計店招視覺設計規(guī)范01店鋪名稱的藝術(shù)化處理4.2店招視覺設計

1店招視覺設計規(guī)范店招高度設計規(guī)范店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招高度設計規(guī)范店4.2店招視覺設計

1店招視覺設計規(guī)范店招元素設計品牌宣傳語移動端二維碼店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招元素設計品牌宣4.2店招視覺設計

1店招視覺設計規(guī)范店招和導航條風格統(tǒng)一風格的統(tǒng)一及修飾元素的設

計，突出店鋪的品牌形象店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招和導航條風格統(tǒng)4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2用不同字體和字號的組合營造藝術(shù)感1使用修飾元素提升觀賞性3店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理用不同字體和字號的組合營造藝術(shù)感1不同字體字號的組合將店鋪名稱的首個英文字母放大，并使用不同于其他字體風格的手寫體，讓店鋪名稱文字的版式更加醒目、更具藝術(shù)感店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理用不同字體和字4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2為了將店鋪名稱與導航條的顏色區(qū)分開，使用了發(fā)光效果來修飾店鋪名稱，營造出的層次感，也貼合了店鋪中銷售的照明設備的特點店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理為店鋪名稱添加修飾元素使用修飾元素提升觀賞性3使用帽子的圖案來修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個性和藝術(shù)感，更容易在消費者心中形成特定的印象店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理為店鋪名稱添加4.2店招視覺設計

3圖層樣式的應用

圖層樣式是圖像處理與網(wǎng)頁制作中的常用功能之一，在電商視覺設計中它也發(fā)揮著重要的作用。用“漸變疊加”圖層樣式來表現(xiàn)導航條功能按鈕被鼠標觸碰后的狀態(tài)，在視覺上形成凹陷的效果，將其與導航條中正常狀態(tài)下的功能按鈕區(qū)分開店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計3圖層樣式的應用 圖層樣式是圖像處理4.2店招視覺設計

3圖層樣式的應用當鼠標指針觸碰到導航條中任意一個功能按鈕時，該按鈕就會呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，給人視覺上的錯覺，讓按鈕上的文字更具層次感，更易于展示當前操作的結(jié)果店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計3圖層樣式的應用當鼠標指針觸碰到導航4.3首焦輪播區(qū)視覺設計設計聚焦消費者視線1構(gòu)建設計圖三要素2溶圖的應用范圍3店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計設計聚焦消費者視線1構(gòu)建設計圖三要4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

在店鋪首頁的商品圖片展示版塊中，在其開端位置放置單張海報圖片可以在一定程度上聚焦消費者的視線，讓其有繼續(xù)瀏覽頁面的興趣。首焦位置：由于該位置所占面積較大，所以成為最能吸引消費者眼球的位置店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 在店鋪首4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

下面這樣的表現(xiàn)形式與內(nèi)容安排并不足以在第一時間聚焦消費者的目光。首焦位置店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 下面這樣4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

首焦位置的內(nèi)容安排與表現(xiàn)能讓消費者有進一步瀏覽店鋪的欲望。有趣的圖片展示，能讓消費者通過視覺獲得較為愉悅的體驗

文案信息告知了消費者店鋪中的優(yōu)惠活動，因為店鋪的優(yōu)惠活動信息對于大部分消費者而言都是極具吸引力的。同時，簡潔的文字與圖形裝飾的結(jié)合讓消費者能夠輕松地獲取相關(guān)信息店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 首焦位置4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素首焦輪播區(qū)設計三要素背景商品廣告文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素首焦輪播區(qū)設4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素不同主題的背景圖以七夕節(jié)為主題的背景以“雙11”活動為主題的背景店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素不同主題的背4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素處理前后的商品形象對比處理前色彩灰暗，畫質(zhì)朦朧，畫面層次不清晰，背景色調(diào)不理想處理后色彩純凈，畫面清晰，畫面層次感強，商品形象更突出店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素處理前后的商4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素

如下圖所示，為幾種風格的首焦輪播圖文字編排效果，從中可以看出文字的字體與字號、色彩的變化等是設計中最為關(guān)鍵的環(huán)節(jié)。文字元素的設計店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素 如下圖所示4.3首焦輪播區(qū)視覺設計

3溶圖的應用規(guī)范溶圖

溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，講究構(gòu)圖嚴謹，細節(jié)處理得當。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計3溶圖的應用規(guī)范溶圖 溶圖是用4.4商品陳列區(qū)視覺設計營造視覺動線1商品布局藝術(shù)化2店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計營造視覺動線1商品布局藝術(shù)化2店鋪4.4商品陳列區(qū)視覺設計

1營造視覺動線商品陳列圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線商品陳列圖店鋪首4.4商品陳列區(qū)視覺設計

1營造視覺動線②水平瀏覽范圍縮短。此時圖片的布局沒有任何變化，消費者對于圖片瀏覽的新鮮度就會降低，開始失去瀏覽的耐心，于是對第二排圖片的水平瀏覽范圍便會縮短。③失去耐心，開始進行垂直瀏覽。當消費者看到第三排仍然是一成不變的圖片排列后，瀏覽的耐心就會減少，還可能會想圖片怎么這么多，大概地往下看看吧，于是形成對左邊的垂直瀏覽。F形瀏覽模式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線②水平瀏覽范圍縮4.4商品陳列區(qū)視覺設計

1營造視覺動線商品海報展示圖：將重點推薦的商品以單張海報的方式呈現(xiàn)，較為豐富的表現(xiàn)形式能很好地讓消費者注意到商品信息。單張商品展示圖：較為重要的商品以單張圖片形式排列，較大的展示面積更能獲得消費者的矚目。三張商品展示圖：非重點推薦的產(chǎn)品可以三張并排展示的效果呈現(xiàn)。單張圖片：除了商品展示圖片以外，還可以搭配一些與展示商品相關(guān)的商品組合圖片，進一步吸引消費者的購買興趣。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線單張商品展示圖：4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化折線型布局隨意型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化折線型布局隨意4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化折線型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化折線型布局店鋪4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化隨意型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化隨意型布局店鋪4.5化妝品店鋪首頁視覺設計案例

標題文字設置的字號較大，利用斜面和浮雕、投影等效果來點綴標題文字，使其更加精致文字選用不同的顏色、字號，并分成兩行，顯得更有層次感，并通過一些小圖案對價格進行修飾和點綴，營造出一種清新的視覺感受風格一致的文字與圖像，營造出一種清新、簡潔、充滿文藝氣息的氛圍

采用不規(guī)則圖形作為背景圖的點綴，使商品的排列既整齊又不死板，提升其觀賞性和設計感店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例標題文字設置的字號較大，4.5化妝品店鋪首頁視覺設計案例01填充背景色店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例01填充背景色店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例02設置文字屬性店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例02設置文字屬性店鋪首頁視4.5化妝品店鋪首頁視覺設計案例03添加商品圖及優(yōu)惠券店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例03添加商品圖及優(yōu)惠券店鋪4.5化妝品店鋪首頁視覺設計案例04繪制導航條背景店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例04繪制導航條背景店鋪首頁4.5化妝品店鋪首頁視覺設計案例05為導航條添加文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例05為導航條添加文字店鋪首4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式4.5化妝品店鋪首頁視覺設計案例07添加圖像素材店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例07添加圖像素材店鋪首頁視4.5化妝品店鋪首頁視覺設計案例08添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例08添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例09繪制背景圖形10添加模特素材圖像店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例09繪制背景圖形10添加模4.5化妝品店鋪首頁視覺設計案例11添加文字及修飾圖案店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例11添加文字及修飾圖案店鋪4.5化妝品店鋪首頁視覺設計案例12添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例12添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例13制作店鋪熱銷推薦標題店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例13制作店鋪熱銷推薦店鋪首4.5化妝品店鋪首頁視覺設計案例14添加商品圖及文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例14添加商品圖及文字店鋪首4.5化妝品店鋪首頁視覺設計案例15添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例15添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例16繪制圖形店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例16繪制圖形店鋪首頁視覺設4.5化妝品店鋪首頁視覺設計案例17制作店長熱薦標題店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例17制作店長熱薦標題店鋪首4.5化妝品店鋪首頁視覺設計案例18制作單品展示效果店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例18制作單品展示效果店鋪首4.5化妝品店鋪首頁視覺設計案例19店長推薦專區(qū)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例19店長推薦專區(qū)店鋪首頁視4.5化妝品店鋪首頁視覺設計案例20純正護膚專區(qū)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例20純正護膚專區(qū)店鋪首頁視4.5化妝品店鋪首頁視覺設計案例21輸入文字22添加地圖圖案店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例21輸入文字22添加地圖圖4.5化妝品店鋪首頁視覺設計案例23繪制圖形并輸入文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例23繪制圖形并輸入文字店鋪課后練習題請為家電類店鋪設計一個店招，并說明自己的設計思路。請列舉幾個溶圖在實際店鋪中應用的案例。請為家具類店鋪設計制作首頁，效果如右圖所示。簡述商品陳列區(qū)在設計時要考慮的因素。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)課后練習題請為家電類店鋪設計一個店招，并說明自己的設計思路。1、 認真、仔細詢問訪客的辦事意圖，快速辦理相關(guān)業(yè)務。2、 遇到兩位以上客戶辦理業(yè)務時，既要認真辦理前面客戶的業(yè)務，又要禮貌地與后面的客戶打招呼，請其稍后。3、 接到同一客戶較多業(yè)務時，要幫助他們分出輕重緩急，合理安排前后順序，縮短辦事時間。4、 遇到不能辦理的業(yè)務時，要向客戶說明情況，爭取客戶的理解和諒解。5、 遇到戶外作業(yè)時，最大限度地避免或減少危害群眾利益。6、 在客戶駐地作業(yè)時，盡量不影響其正常作息，做到使用文明用語，文明施工，并保持現(xiàn)場清潔。形象行為規(guī)范（儀容）：自然、大方、端莊1、頭發(fā)梳理整齊，不染彩色頭發(fā)，不戴夸張的飾物。2、男職工修飾得當，頭發(fā)長不覆額，側(cè)不掩耳，后不觸領，嘴上不留胡須。3、女職工淡妝上崗，修飾文雅，且與年齡、身份相符。工作時間不能當眾化妝。4、顏面和手臂保持清潔，不留長指甲，不染彩色指甲。形象行為規(guī)范（著裝）：統(tǒng)一、整潔、得體1、服裝正規(guī)、整潔、完好、協(xié)調(diào)、無污漬、扣子齊全、不漏扣、錯扣。2、著西裝時，打好領帶（領結(jié)），扣好領扣，上衣袋少裝東西，褲袋不裝東西，并做到不挽袖口和褲腳。3、鞋、襪保持干凈衛(wèi)生，鞋面潔凈，在工作場所不赤腳，不穿拖鞋?；A行為規(guī)范（技能）：勤奮學習、精通業(yè)務1、勤奮學習科學文化知識，積極參加文化、技術(shù)培訓，努力達到中等以上文化專業(yè)水平。2、刻苦鉆研業(yè)務，精通本職工作，熟練掌握與本職工作相關(guān)的業(yè)務知識，達到中級以上專業(yè)技術(shù)水平。3、苦練基本功和操作技能，精通業(yè)務規(guī)程、崗位操作規(guī)程和服務禮儀。4、不斷充實更新現(xiàn)代業(yè)務知識和工作技能，努力學習和運用最新的科學技術(shù)。5、加強思想業(yè)務修養(yǎng)，增強綜合業(yè)務能力，不斷提高分析、認識、解決問題的能力，提高交往、協(xié)調(diào)能力和應變等方面的能力。發(fā)揚"三必精神"爭創(chuàng)行業(yè)一流公司，開拓公司市場等工作形勢逼人，全體干部職工要用于發(fā)揚"有先必爭、有標必奪、有旗必抗"的"三必"精神，在各項工作中，瞄準一流標準，多爭先進、多奪標兵、多抗錦旗，在全公司形成濃厚的爭先創(chuàng)優(yōu)氛圍，推動公司各項工作健康發(fā)展。培育忠誠美德公司和員工是一個不可分割的利益共同體，忠誠與公司是員工的基本素質(zhì)要求。要履行職責、公道正直、干事創(chuàng)業(yè)、愛崗敬業(yè)、恪盡職守，高效率、高質(zhì)量的完成工作任務，自覺維護公司的利益和聲譽。像愛護自己的眼睛一樣維護公司的形象和聲譽維護公司的形象和利益是每一位員工的義務和責任。員工要發(fā)揚公司的優(yōu)良作風，樹立集體榮譽感和標桿意識。見困難就上，見榮譽就創(chuàng)，見先進就學，見后進就幫。加強道德建設，自覺遵紀守法，遵守社會公德、職業(yè)道德和家庭美德，不發(fā)生違法違紀案件，不發(fā)生損害公司形象聲譽和利益的事件。人人是人才，人人能成才公司不僅需要"千里馬"，更需要"老黃牛"。專家、技術(shù)能手是人才，在適合的崗位上盡職盡責、完成工作任務的是人才，經(jīng)過培訓能夠勝任本職工作的員工也是人才。通過優(yōu)化組合、動態(tài)管理等工作，不斷優(yōu)化公司人力資源的科學配置，為人才的脫穎而出、健康成長和人盡其才創(chuàng)造有利的環(huán)境，做到人才與企業(yè)共成長崗位靠競爭，薪酬憑績效，職務能上能下對員工實行動態(tài)管理，定期進行崗位優(yōu)化組合、崗位交流和輪換，打破崗薪終身制，堅持薪隨崗變，凡重要崗位和從低崗級到高崗級都必須競爭上崗，競爭中堅持"公開、公平、公正、擇優(yōu)"的原則，按照公司相關(guān)規(guī)定內(nèi)規(guī)定的程序和考試、考核規(guī)則進行。實行干部績效考評制度，打破傳統(tǒng)的干部終身制，走出干部能上能下的路子。有的干部從崗位上下來并不是因為犯了錯誤或工作不努力，而是因為別人比他做得更好；有的干部下來后經(jīng)過努力重新走上干部崗位。德才兼?zhèn)?，以績效論英雄選撥任用干部，嚴格標準和程序，堅持民主集中制，不搞任人唯親。選拔和評價干部，要"賽馬不相馬"不斷完善科學的干部績效考評體系。實行以績效考評與民主評議相結(jié)合的辦法，力求客觀公正，采取物質(zhì)與精神獎勵并舉的干部激勵政策，最大限度調(diào)動干部隊伍的主動性，積極性和創(chuàng)造性。感謝您的聆聽，再見！1、 認真、仔細詢問訪客的辦事意圖，快速辦理相關(guān)業(yè)務。形象行第4章

店鋪首頁視覺設計了解首頁視覺水平的四大指標掌握店招的設計規(guī)范及技巧掌握首焦輪播區(qū)的設計技巧了解商品陳列區(qū)的布局方式掌握商品陳列區(qū)的布局技巧學習目標店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)第4章店鋪首頁視覺設計了解首頁視覺水平的四大指標學習目標目錄首頁視覺水平的四大指標4.1店招視覺設計4.2首焦輪播區(qū)視覺設計4.3商品陳列區(qū)視覺設計4.4化妝品店鋪首頁視覺設計案例4.5店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)目錄首頁視覺水平的四大指標4.1店招視覺設計4.2首焦4.1首頁視覺水平的四大指標首頁跳失率1首頁點擊率2首頁人均點擊次數(shù)3首頁平均停留時間4店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標首頁跳失率1首頁點擊率2首頁人4.1首頁視覺水平的四大指標

1首頁跳失率

首頁跳失率，指買家通過某種渠道進入店鋪，只訪問了一個首頁就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例。進入店鋪首頁的渠道店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標1首頁跳失率 首頁跳失率，4.1首頁視覺水平的四大指標

2首頁點擊率

首頁點擊率是寶貝在首頁展現(xiàn)后的被點擊比率，即：首頁點擊率=首頁點擊量÷首頁展現(xiàn)量）。兩類店鋪首頁排版店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標2首頁點擊率 首頁點擊率是4.1首頁視覺水平的四大指標

3首頁人均點擊次數(shù)

首頁人均點擊次數(shù)，指在一段時間內(nèi)人均點擊了多少次，如下圖所示。假設某日點擊該網(wǎng)店的唯一訪問者數(shù)為150人，在此期間內(nèi)點擊本店鋪首頁的總訪問數(shù)為600次，那么首頁人均點擊次數(shù)為：600次÷150人=4次/人。人均點擊次數(shù)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標3首頁人均點擊次數(shù) 首頁人4.1首頁視覺水平的四大指標

4首頁平均停留時間

首頁平均停留時間=訪店鋪首頁的所有訪客總的停留時長÷訪客數(shù)（單位：秒），多天的平均停留時間為各天人均停留時長的日均值。和首頁人均點擊次數(shù)一樣，首頁平均停留時間也可以用來判斷一個店鋪首頁是否能留住訪客。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.1首頁視覺水平的四大指標4首頁平均停留時間4.2店招視覺設計店招視覺設計規(guī)范01店鋪名稱的藝術(shù)化處理02圖層樣式的應用03店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計店招視覺設計規(guī)范01店鋪名稱的藝術(shù)化處理4.2店招視覺設計

1店招視覺設計規(guī)范店招高度設計規(guī)范店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招高度設計規(guī)范店4.2店招視覺設計

1店招視覺設計規(guī)范店招元素設計品牌宣傳語移動端二維碼店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招元素設計品牌宣4.2店招視覺設計

1店招視覺設計規(guī)范店招和導航條風格統(tǒng)一風格的統(tǒng)一及修飾元素的設

計，突出店鋪的品牌形象店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計1店招視覺設計規(guī)范店招和導航條風格統(tǒng)4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2用不同字體和字號的組合營造藝術(shù)感1使用修飾元素提升觀賞性3店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理用不同字體和字號的組合營造藝術(shù)感1不同字體字號的組合將店鋪名稱的首個英文字母放大，并使用不同于其他字體風格的手寫體，讓店鋪名稱文字的版式更加醒目、更具藝術(shù)感店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理用不同字體和字4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特殊性和醒目度2為了將店鋪名稱與導航條的顏色區(qū)分開，使用了發(fā)光效果來修飾店鋪名稱，營造出的層次感，也貼合了店鋪中銷售的照明設備的特點店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理添加特效突出特4.2店招視覺設計

2店鋪名稱的藝術(shù)化處理為店鋪名稱添加修飾元素使用修飾元素提升觀賞性3使用帽子的圖案來修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個性和藝術(shù)感，更容易在消費者心中形成特定的印象店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計2店鋪名稱的藝術(shù)化處理為店鋪名稱添加4.2店招視覺設計

3圖層樣式的應用

圖層樣式是圖像處理與網(wǎng)頁制作中的常用功能之一，在電商視覺設計中它也發(fā)揮著重要的作用。用“漸變疊加”圖層樣式來表現(xiàn)導航條功能按鈕被鼠標觸碰后的狀態(tài)，在視覺上形成凹陷的效果，將其與導航條中正常狀態(tài)下的功能按鈕區(qū)分開店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計3圖層樣式的應用 圖層樣式是圖像處理4.2店招視覺設計

3圖層樣式的應用當鼠標指針觸碰到導航條中任意一個功能按鈕時，該按鈕就會呈現(xiàn)出不同的效果，這就是添加圖層樣式的效果，給人視覺上的錯覺，讓按鈕上的文字更具層次感，更易于展示當前操作的結(jié)果店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.2店招視覺設計3圖層樣式的應用當鼠標指針觸碰到導航4.3首焦輪播區(qū)視覺設計設計聚焦消費者視線1構(gòu)建設計圖三要素2溶圖的應用范圍3店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計設計聚焦消費者視線1構(gòu)建設計圖三要4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

在店鋪首頁的商品圖片展示版塊中，在其開端位置放置單張海報圖片可以在一定程度上聚焦消費者的視線，讓其有繼續(xù)瀏覽頁面的興趣。首焦位置：由于該位置所占面積較大，所以成為最能吸引消費者眼球的位置店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 在店鋪首4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

下面這樣的表現(xiàn)形式與內(nèi)容安排并不足以在第一時間聚焦消費者的目光。首焦位置店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 下面這樣4.3首焦輪播區(qū)視覺設計

1設計聚焦消費者視線

首焦位置的內(nèi)容安排與表現(xiàn)能讓消費者有進一步瀏覽店鋪的欲望。有趣的圖片展示，能讓消費者通過視覺獲得較為愉悅的體驗

文案信息告知了消費者店鋪中的優(yōu)惠活動，因為店鋪的優(yōu)惠活動信息對于大部分消費者而言都是極具吸引力的。同時，簡潔的文字與圖形裝飾的結(jié)合讓消費者能夠輕松地獲取相關(guān)信息店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計1設計聚焦消費者視線 首焦位置4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素首焦輪播區(qū)設計三要素背景商品廣告文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素首焦輪播區(qū)設4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素不同主題的背景圖以七夕節(jié)為主題的背景以“雙11”活動為主題的背景店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素不同主題的背4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素處理前后的商品形象對比處理前色彩灰暗，畫質(zhì)朦朧，畫面層次不清晰，背景色調(diào)不理想處理后色彩純凈，畫面清晰，畫面層次感強，商品形象更突出店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素處理前后的商4.3首焦輪播區(qū)視覺設計

2構(gòu)建設計圖三要素

如下圖所示，為幾種風格的首焦輪播圖文字編排效果，從中可以看出文字的字體與字號、色彩的變化等是設計中最為關(guān)鍵的環(huán)節(jié)。文字元素的設計店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計2構(gòu)建設計圖三要素 如下圖所示4.3首焦輪播區(qū)視覺設計

3溶圖的應用規(guī)范溶圖

溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，講究構(gòu)圖嚴謹，細節(jié)處理得當。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.3首焦輪播區(qū)視覺設計3溶圖的應用規(guī)范溶圖 溶圖是用4.4商品陳列區(qū)視覺設計營造視覺動線1商品布局藝術(shù)化2店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計營造視覺動線1商品布局藝術(shù)化2店鋪4.4商品陳列區(qū)視覺設計

1營造視覺動線商品陳列圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線商品陳列圖店鋪首4.4商品陳列區(qū)視覺設計

1營造視覺動線②水平瀏覽范圍縮短。此時圖片的布局沒有任何變化，消費者對于圖片瀏覽的新鮮度就會降低，開始失去瀏覽的耐心，于是對第二排圖片的水平瀏覽范圍便會縮短。③失去耐心，開始進行垂直瀏覽。當消費者看到第三排仍然是一成不變的圖片排列后，瀏覽的耐心就會減少，還可能會想圖片怎么這么多，大概地往下看看吧，于是形成對左邊的垂直瀏覽。F形瀏覽模式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線②水平瀏覽范圍縮4.4商品陳列區(qū)視覺設計

1營造視覺動線商品海報展示圖：將重點推薦的商品以單張海報的方式呈現(xiàn)，較為豐富的表現(xiàn)形式能很好地讓消費者注意到商品信息。單張商品展示圖：較為重要的商品以單張圖片形式排列，較大的展示面積更能獲得消費者的矚目。三張商品展示圖：非重點推薦的產(chǎn)品可以三張并排展示的效果呈現(xiàn)。單張圖片：除了商品展示圖片以外，還可以搭配一些與展示商品相關(guān)的商品組合圖片，進一步吸引消費者的購買興趣。店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計1營造視覺動線單張商品展示圖：4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化折線型布局隨意型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化折線型布局隨意4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化折線型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化折線型布局店鋪4.4商品陳列區(qū)視覺設計

2商品布局藝術(shù)化隨意型布局店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.4商品陳列區(qū)視覺設計2商品布局藝術(shù)化隨意型布局店鋪4.5化妝品店鋪首頁視覺設計案例

標題文字設置的字號較大，利用斜面和浮雕、投影等效果來點綴標題文字，使其更加精致文字選用不同的顏色、字號，并分成兩行，顯得更有層次感，并通過一些小圖案對價格進行修飾和點綴，營造出一種清新的視覺感受風格一致的文字與圖像，營造出一種清新、簡潔、充滿文藝氣息的氛圍

采用不規(guī)則圖形作為背景圖的點綴，使商品的排列既整齊又不死板，提升其觀賞性和設計感店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例標題文字設置的字號較大，4.5化妝品店鋪首頁視覺設計案例01填充背景色店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例01填充背景色店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例02設置文字屬性店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例02設置文字屬性店鋪首頁視4.5化妝品店鋪首頁視覺設計案例03添加商品圖及優(yōu)惠券店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例03添加商品圖及優(yōu)惠券店鋪4.5化妝品店鋪首頁視覺設計案例04繪制導航條背景店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例04繪制導航條背景店鋪首頁4.5化妝品店鋪首頁視覺設計案例05為導航條添加文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例05為導航條添加文字店鋪首4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例06添加文字并設置圖層樣式4.5化妝品店鋪首頁視覺設計案例07添加圖像素材店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例07添加圖像素材店鋪首頁視4.5化妝品店鋪首頁視覺設計案例08添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例08添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例09繪制背景圖形10添加模特素材圖像店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例09繪制背景圖形10添加模4.5化妝品店鋪首頁視覺設計案例11添加文字及修飾圖案店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例11添加文字及修飾圖案店鋪4.5化妝品店鋪首頁視覺設計案例12添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例12添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例13制作店鋪熱銷推薦標題店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例13制作店鋪熱銷推薦店鋪首4.5化妝品店鋪首頁視覺設計案例14添加商品圖及文字店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例14添加商品圖及文字店鋪首4.5化妝品店鋪首頁視覺設計案例15添加商品圖店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例15添加商品圖店鋪首頁視覺4.5化妝品店鋪首頁視覺設計案例16繪制圖形店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例16繪制圖形店鋪首頁視覺設4.5化妝品店鋪首頁視覺設計案例17制作店長熱薦標題店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例17制作店長熱薦標題店鋪首4.5化妝品店鋪首頁視覺設計案例18制作單品展示效果店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例18制作單品展示效果店鋪首4.5化妝品店鋪首頁視覺設計案例19店長推薦專區(qū)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例19店長推薦專區(qū)店鋪首頁視4.5化妝品店鋪首頁視覺設計案例20純正護膚專區(qū)店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例20純正護膚專區(qū)店鋪首頁視4.5化妝品店鋪首頁視覺設計案例21輸入文字22添加地圖圖案店鋪首頁視覺設計方案(PPT57頁)店鋪首頁視覺設計方案(PPT57頁)4.5化妝品店鋪首頁視覺設計案例21輸入文字22添加地圖圖4.5