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

《電商視覺(jué)設(shè)計(jì)第4章店鋪首頁(yè)視覺(jué)設(shè)計(jì).ppt》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《電商視覺(jué)設(shè)計(jì)第4章店鋪首頁(yè)視覺(jué)設(shè)計(jì).ppt（57頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

第4章店鋪首頁(yè)視覺(jué)設(shè)計(jì) 了解首頁(yè)視覺(jué)水平的四大指標(biāo)掌握店招的設(shè)計(jì)規(guī)范及技巧掌握首焦輪播區(qū)的設(shè)計(jì)技巧了解商品陳列區(qū)的布局方式掌握商品陳列區(qū)的布局技巧 目錄 4 1首頁(yè)視覺(jué)水平的四大指標(biāo) 4 1首頁(yè)視覺(jué)水平的四大指標(biāo) 1首頁(yè)跳失率 首頁(yè)跳失率 指買(mǎi)家通過(guò)某種渠道進(jìn)入店鋪 只訪問(wèn)了一個(gè)首頁(yè)就離開(kāi)的訪問(wèn)次數(shù)占該入口總訪問(wèn)次數(shù)的比例 進(jìn)入店鋪首頁(yè)的渠道 4 1首頁(yè)視覺(jué)水平的四大指標(biāo) 2首頁(yè)點(diǎn)擊率 首頁(yè)點(diǎn)擊率是寶貝在首頁(yè)展現(xiàn)后的被點(diǎn)擊比率 即 首頁(yè)點(diǎn)擊率 首頁(yè)點(diǎn)擊量 首頁(yè)展現(xiàn)量 兩類(lèi)店鋪首頁(yè)排版 4 1首頁(yè)視覺(jué)水平的四大指標(biāo) 3首頁(yè)人均點(diǎn)擊次數(shù) 首頁(yè)人均點(diǎn)擊次數(shù) 指在一段時(shí)間內(nèi)人均點(diǎn)擊了多少次 如下圖所示 假設(shè)某日點(diǎn)擊該網(wǎng)店的唯一訪問(wèn)者數(shù)為150人 在此期間內(nèi)點(diǎn)擊本店鋪首頁(yè)的總訪問(wèn)數(shù)為600次 那么首頁(yè)人均點(diǎn)擊次數(shù)為 600次 150人 4次 人 人均點(diǎn)擊次數(shù) 4 1首頁(yè)視覺(jué)水平的四大指標(biāo) 4首頁(yè)平均停留時(shí)間 首頁(yè)平均停留時(shí)間 訪店鋪首頁(yè)的所有訪客總的停留時(shí)長(zhǎng) 訪客數(shù) 單位 秒 多天的平均停留時(shí)間為各天人均停留時(shí)長(zhǎng)的日均值 和首頁(yè)人均點(diǎn)擊次數(shù)一樣 首頁(yè)平均停留時(shí)間也可以用來(lái)判斷一個(gè)店鋪首頁(yè)是否能留住訪客 4 2店招視覺(jué)設(shè)計(jì) 4 2店招視覺(jué)設(shè)計(jì) 1店招視覺(jué)設(shè)計(jì)規(guī)范 4 2店招視覺(jué)設(shè)計(jì) 1店招視覺(jué)設(shè)計(jì)規(guī)范 品牌宣傳語(yǔ) 移動(dòng)端二維碼 清晰的店鋪名稱(chēng) 4 2店招視覺(jué)設(shè)計(jì) 1店招視覺(jué)設(shè)計(jì)規(guī)范 風(fēng)格的統(tǒng)一及修飾元素的設(shè)計(jì) 突出店鋪的品牌形象 4 2店招視覺(jué)設(shè)計(jì) 2店鋪名稱(chēng)的藝術(shù)化處理 4 2店招視覺(jué)設(shè)計(jì) 2店鋪名稱(chēng)的藝術(shù)化處理 不同字體字號(hào)的組合 將店鋪名稱(chēng)的首個(gè)英文字母放大 并使用不同于其他字體風(fēng)格的手寫(xiě)體 讓店鋪名稱(chēng)文字的版式更加醒目 更具藝術(shù)感 4 2店招視覺(jué)設(shè)計(jì) 2店鋪名稱(chēng)的藝術(shù)化處理 為了將店鋪名稱(chēng)與導(dǎo)航條的顏色區(qū)分開(kāi) 使用了發(fā)光效果來(lái)修飾店鋪名稱(chēng) 營(yíng)造出的層次感 也貼合了店鋪中銷(xiāo)售的照明設(shè)備的特點(diǎn) 4 2店招視覺(jué)設(shè)計(jì) 2店鋪名稱(chēng)的藝術(shù)化處理 為店鋪名稱(chēng)添加修飾元素 使用帽子的圖案來(lái)修飾店鋪名稱(chēng) 文字與圖案在外形上的契合讓店鋪名稱(chēng)更具個(gè)性和藝術(shù)感 更容易在消費(fèi)者心中形成特定的印象 4 2店招視覺(jué)設(shè)計(jì) 3圖層樣式的應(yīng)用 圖層樣式是圖像處理與網(wǎng)頁(yè)制作中的常用功能之一 在電商視覺(jué)設(shè)計(jì)中它也發(fā)揮著重要的作用 用 漸變疊加 圖層樣式來(lái)表現(xiàn)導(dǎo)航條功能按鈕被鼠標(biāo)觸碰后的狀態(tài) 在視覺(jué)上形成凹陷的效果 將其與導(dǎo)航條中正常狀態(tài)下的功能按鈕區(qū)分開(kāi) 4 2店招視覺(jué)設(shè)計(jì) 3圖層樣式的應(yīng)用 當(dāng)鼠標(biāo)指針觸碰到導(dǎo)航條中任意一個(gè)功能按鈕時(shí) 該按鈕就會(huì)呈現(xiàn)出不同的效果 這就是添加圖層樣式的效果 給人視覺(jué)上的錯(cuò)覺(jué) 讓按鈕上的文字更具層次感 更易于展示當(dāng)前操作的結(jié)果 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 1設(shè)計(jì)聚焦消費(fèi)者視線(xiàn) 在店鋪首頁(yè)的商品圖片展示版塊中 在其開(kāi)端位置放置單張海報(bào)圖片可以在一定程度上聚焦消費(fèi)者的視線(xiàn) 讓其有繼續(xù)瀏覽頁(yè)面的興趣 首焦位置 由于該位置所占面積較大 所以成為最能吸引消費(fèi)者眼球的位置 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 1設(shè)計(jì)聚焦消費(fèi)者視線(xiàn) 下面這樣的表現(xiàn)形式與內(nèi)容安排并不足以在第一時(shí)間聚焦消費(fèi)者的目光 首焦位置 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 1設(shè)計(jì)聚焦消費(fèi)者視線(xiàn) 首焦位置的內(nèi)容安排與表現(xiàn)能讓消費(fèi)者有進(jìn)一步瀏覽店鋪的欲望 有趣的圖片展示 能讓消費(fèi)者通過(guò)視覺(jué)獲得較為愉悅的體驗(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ū)視覺(jué)設(shè)計(jì) 2構(gòu)建設(shè)計(jì)圖三要素 首焦輪播區(qū)設(shè)計(jì)三要素 背景 商品 廣告文字 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 2構(gòu)建設(shè)計(jì)圖三要素 不同主題的背景圖 以七夕節(jié)為主題的背景 以 雙11 活動(dòng)為主題的背景 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 2構(gòu)建設(shè)計(jì)圖三要素 處理前后的商品形象對(duì)比 色彩灰暗 畫(huà)質(zhì)朦朧 畫(huà)面層次不清晰 背景色調(diào)不理想 色彩純凈 畫(huà)面清晰 畫(huà)面層次感強(qiáng) 商品形象更突出 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 2構(gòu)建設(shè)計(jì)圖三要素 如下圖所示 為幾種風(fēng)格的首焦輪播圖文字編排效果 從中可以看出文字的字體與字號(hào) 色彩的變化等是設(shè)計(jì)中最為關(guān)鍵的環(huán)節(jié) 文字元素的設(shè)計(jì) 4 3首焦輪播區(qū)視覺(jué)設(shè)計(jì) 3溶圖的應(yīng)用規(guī)范 溶圖 溶圖是用兩張或兩張以上的圖片拼合起來(lái)的一張圖片 講究構(gòu)圖嚴(yán)謹(jǐn) 細(xì)節(jié)處理得當(dāng) 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 1營(yíng)造視覺(jué)動(dòng)線(xiàn) 商品陳列圖 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 1營(yíng)造視覺(jué)動(dòng)線(xiàn) 瀏覽初期 視線(xiàn)水平移動(dòng) 且瀏覽范圍最大 剛開(kāi)始瀏覽時(shí) 消費(fèi)者對(duì)商品展示圖充滿(mǎn)了新鮮感和好奇 很可能將第一排圖片全部瀏覽完畢 并根據(jù)從上到下的瀏覽經(jīng)驗(yàn) 轉(zhuǎn)向?qū)Φ诙艌D片的瀏覽 F形瀏覽模式 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 1營(yíng)造視覺(jué)動(dòng)線(xiàn) 商品海報(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)買(mǎi)興趣 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 2商品布局藝術(shù)化 折線(xiàn)型布局 隨意型布局 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 2商品布局藝術(shù)化 折線(xiàn)型布局 4 4商品陳列區(qū)視覺(jué)設(shè)計(jì) 2商品布局藝術(shù)化 隨意型布局 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 4 5化妝品店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例 課后練習(xí)題 請(qǐng)為家電類(lèi)店鋪設(shè)計(jì)一個(gè)店招 并說(shuō)明自己的設(shè)計(jì)思路 請(qǐng)列舉幾個(gè)溶圖在實(shí)際店鋪中應(yīng)用的案例 請(qǐng)為家具類(lèi)店鋪設(shè)計(jì)制作首頁(yè) 效果如右圖所示 簡(jiǎn)述商品陳列區(qū)在設(shè)計(jì)時(shí)要考慮的因素