




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
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è)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2030中國(guó)益生元纖維行業(yè)產(chǎn)業(yè)運(yùn)行態(tài)勢(shì)及投資規(guī)劃深度研究報(bào)告
- 2025至2030中國(guó)白酒原料行業(yè)產(chǎn)業(yè)運(yùn)行態(tài)勢(shì)及投資規(guī)劃深度研究報(bào)告
- 2025至2030中國(guó)電子書閱讀器行業(yè)深度研究及發(fā)展前景投資評(píng)估分析
- 2025至2030中國(guó)特殊標(biāo)志信標(biāo)浮標(biāo)行業(yè)市場(chǎng)占有率及投資前景評(píng)估規(guī)劃報(bào)告
- 支付寶的交易流程
- 施工管理培訓(xùn)計(jì)劃
- 醫(yī)療領(lǐng)域中心理干預(yù)對(duì)患者康復(fù)的影響
- 教育行業(yè)大數(shù)據(jù)未來的增長(zhǎng)機(jī)會(huì)與挑戰(zhàn)
- 教育信息化進(jìn)程中的智能教學(xué)平臺(tái)探討
- 教育技術(shù)領(lǐng)域的新成果探討
- 安全教育培訓(xùn):實(shí)現(xiàn)安全文明施工
- 2025至2030分布式能源行業(yè)市場(chǎng)深度調(diào)研及發(fā)展規(guī)劃及有效策略與實(shí)施路徑評(píng)估報(bào)告
- 反邪教宣講課件
- 2025年全國(guó)統(tǒng)一高考英語Ⅰ卷(含答案)
- 1 感受生活中的法律 課件-道德與法治六年級(jí)上冊(cè)統(tǒng)編版
- 中醫(yī)集市活動(dòng)方案
- 2025年江蘇省南京市中考?xì)v史試卷(含解析)
- 腫瘤隨訪登記培訓(xùn)
- 勞動(dòng)仲裁內(nèi)部培訓(xùn)
- 腫瘤登記培訓(xùn)課件
- 2025年重慶市高考物理試卷(含答案解析)
評(píng)論
0/150
提交評(píng)論