電商視覺設(shè)計第4章店鋪首頁視覺設(shè)計.ppt

《電商視覺設(shè)計第4章店鋪首頁視覺設(shè)計.ppt》由會員分享，可在線閱讀，更多相關(guān)《電商視覺設(shè)計第4章店鋪首頁視覺設(shè)計.ppt（57頁珍藏版）》請在裝配圖網(wǎng)上搜索。

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