電商設(shè)計(jì)電子課件

第3章營(yíng)銷推廣圖設(shè)計(jì)本章介紹：營(yíng)銷推廣圖片的設(shè)計(jì)是電商設(shè)計(jì)師需要完成的重要工作任務(wù)，它通常包括主圖、直通車圖和鉆展圖的設(shè)計(jì)。精心設(shè)計(jì)的營(yíng)銷推廣圖，能夠令商品提升點(diǎn)擊率、促進(jìn)轉(zhuǎn)化率。本章針對(duì)商品營(yíng)銷推廣圖的主圖設(shè)計(jì)、直通車圖設(shè)計(jì)以及鉆展圖設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的營(yíng)銷推廣圖進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對(duì)商品營(yíng)銷推廣圖片的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握營(yíng)銷推廣圖的設(shè)計(jì)規(guī)范和制作方法，為接下來的PC端海報(bào)設(shè)計(jì)打下基礎(chǔ)。了解主圖的基本概念了解直通車圖的基本概念了解鉆展圖的基本概念學(xué)習(xí)目標(biāo)主圖的基本概念主圖的設(shè)計(jì)尺寸主圖的設(shè)計(jì)方法課堂案例-嘉興肉粽主圖設(shè)計(jì)3.1主圖設(shè)計(jì)3.1.1主圖的基本概念主圖展示圖主圖即商品的展示圖，是用于體現(xiàn)商品特色的視覺圖。商品主圖最多可以有5張，最少必須有1張。這些主圖通常位于詳情頁，而第一張主圖還會(huì)位于搜索頁，因此需要網(wǎng)店美工進(jìn)行重點(diǎn)設(shè)計(jì)。主圖的設(shè)計(jì)尺寸分為兩種，一種是正主圖，尺寸為800像素×800像素，另一種是配合主圖視頻方便移動(dòng)端觀看的豎圖，尺寸為750像素×1000像素，另外主圖的大小必須控制在500KB以內(nèi)。3.1.2主圖的設(shè)計(jì)尺寸主圖尺寸效果圖1.文字層級(jí)網(wǎng)店美工在進(jìn)行主圖設(shè)計(jì)時(shí)，需要明確文字層級(jí)，通常會(huì)進(jìn)行三種層級(jí)的設(shè)計(jì)，第一層體現(xiàn)品牌形象。品牌形象通常會(huì)以網(wǎng)店的Logo的形式體現(xiàn)，既可以加深消費(fèi)者印象又可以防止盜圖。第二層提煉商品賣點(diǎn)。商品賣點(diǎn)主要體現(xiàn)商品優(yōu)勢(shì)，可以是商品的款式、功能和材質(zhì)上的優(yōu)勢(shì)，也可以是商品的價(jià)格上的優(yōu)勢(shì)，從而直接打動(dòng)消費(fèi)者。第三層展示銷售活動(dòng)。銷售活動(dòng)主要以“限時(shí)搶購”等促銷文案給予消費(fèi)者“不買就錯(cuò)過”的緊迫感，設(shè)計(jì)時(shí)要盡量簡(jiǎn)短、有力、清晰。3.1.3主圖的設(shè)計(jì)方法2.背景設(shè)計(jì)主圖的背景通常以圖片場(chǎng)景和純色背景為主，圖片場(chǎng)景大部分使用的是生活類場(chǎng)景，可以令消費(fèi)者產(chǎn)生代入感，純色背景需要使用干凈的顏色，不建議使用大量包和度高的顏色，這樣可以起到烘托商品的作用。3.1.3主圖的設(shè)計(jì)方法Haier主圖效果圖使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”命令為圖像添加效果，使用“矩形”工具、“圓角矩形”工具繪制基本形狀，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。3.1.4課堂案例-嘉興肉粽主圖設(shè)計(jì)嘉興肉粽主圖設(shè)計(jì)直通車圖的基本概念直通車圖的設(shè)計(jì)尺寸直通圖的設(shè)計(jì)方法課堂案例-洗衣機(jī)直通圖設(shè)計(jì)3.2直通車圖設(shè)計(jì)直通車是幫助商家實(shí)現(xiàn)商品精準(zhǔn)推廣的有效推廣方式。通過直通車推廣，商品可以被推送給潛在消費(fèi)者，從而產(chǎn)生巨大的商品點(diǎn)擊率，進(jìn)而提升商品轉(zhuǎn)換率。直通車圖視覺效果的好壞在很大程度上影響著店鋪的關(guān)注度和商品的點(diǎn)擊率。下面分別從直通車圖的基本概念、設(shè)計(jì)尺寸以及設(shè)計(jì)方法三個(gè)方面進(jìn)行講解，幫助電商設(shè)計(jì)師掌握直通車圖的設(shè)計(jì)方法。3.2直通車圖設(shè)計(jì)（1）搜索頁直通車展位：這類展位是位于提示有“掌柜熱賣”的1-3位展示位、右側(cè)的16個(gè)豎向展示位和底部的5個(gè)橫向展示位。3.2.1直通車圖的基本概念搜索頁直通車展位（2）消費(fèi)者必經(jīng)的其他高關(guān)注、高流量直通車展位：這類展位是位于首頁下方的“猜我喜歡”展示位、“我的淘寶”頁面中的購物車下方展示位、“我的淘寶”里“已買到的寶貝”頁面中下方的“熱賣單品”展示位、收藏夾頁面底部的展示位和阿里旺旺PC端的“每日掌柜熱賣”展示位。3.2.1直通車圖的基本概念高流量直通車展位3.2.2直通車圖的設(shè)計(jì)尺寸直通車圖直通車圖的設(shè)計(jì)尺寸和主圖一樣分為兩種，一種是常規(guī)直通車圖，尺寸為800×800像素，另一種是方便移動(dòng)端觀看的豎圖，尺寸為750像素×1000像素。3.2.3直通圖的設(shè)計(jì)方法產(chǎn)品文字內(nèi)容1.文字內(nèi)容在進(jìn)行直通車圖設(shè)計(jì)時(shí)，為了提高點(diǎn)擊率，需要對(duì)文字內(nèi)容進(jìn)行提煉設(shè)計(jì)。例如，低價(jià)商品需要強(qiáng)調(diào)商品的價(jià)格和活動(dòng)，中高端商品需要強(qiáng)調(diào)出商品的品質(zhì)、銷量以及效果，大牌商品則需要強(qiáng)調(diào)出商品自身的品牌形象。2.特殊手法直通車圖雖然是商家通過付費(fèi)進(jìn)行推廣，但商品之間依然存在著強(qiáng)烈的競(jìng)爭(zhēng)。因此網(wǎng)店美工可以通過一些特殊手法令設(shè)計(jì)的直通車圖在眾多圖片中脫穎而出。例如，運(yùn)用獨(dú)特的商品拍攝、直接夸張的文案和精美的商品搭配等方法令直通車圖可以快速吸引消費(fèi)者。需要注意的是，若商品本身的款式吸引力足夠強(qiáng)，則只需要少量文字和干凈的背景以此凸顯商品的品質(zhì)感，更能吸引消費(fèi)者。3.2.3按鈕控件的規(guī)則使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“添加圖層樣式”命令為圖形添加效果，使用“圓角矩形”工具、“矩形”工具、“多邊形”工具繪制基本形狀。3.2.4課堂案例-洗衣機(jī)直通圖設(shè)計(jì)按鈕寬度的設(shè)置鉆展圖的基本概念鉆展圖的設(shè)計(jì)尺寸鉆展圖的設(shè)計(jì)方法課堂案例-國(guó)產(chǎn)面膜鉆展圖設(shè)計(jì)3.3鉆展圖設(shè)計(jì)鉆展圖是可以為商家實(shí)現(xiàn)店鋪曝光及商品推廣的有效營(yíng)銷工具。鉆展圖需要依靠較強(qiáng)的圖片創(chuàng)意，才能促使消費(fèi)者點(diǎn)擊跳轉(zhuǎn)，因此鉆展圖視覺效果的好壞在很大程度上影響著店鋪的曝光度。下面分別從鉆展圖的基本概念、設(shè)計(jì)尺寸以及設(shè)計(jì)方法三個(gè)方面進(jìn)行講解，幫助電商設(shè)計(jì)師掌握鉆展圖的設(shè)計(jì)方法。3.3鉆展圖設(shè)計(jì)鉆展圖即鉆石展位圖，是一種強(qiáng)有力的營(yíng)銷方式。與直通車圖一樣，需要商家付費(fèi)購買圖片展示位置，以此進(jìn)行商品、活動(dòng)甚至是品牌的推廣，吸引消費(fèi)者點(diǎn)擊。鉆展圖通常位于電商平臺(tái)首頁的醒目位置。3.3.1鉆展圖的基本概念淘寶鉆展圖（1）首頁焦點(diǎn)鉆展圖：這類鉆展圖位于淘寶首頁上方，是整個(gè)淘寶首頁的視覺中心。其尺寸為520×280像素，由于尺寸較大，能夠更好地展示商品與文案，因此價(jià)格昂貴。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖（2）首頁二焦點(diǎn)鉆展圖：這類鉆展圖位于淘寶首頁焦點(diǎn)鉆展圖右下角，是首頁一屏的黃金位置。其尺寸為160×200像素，由于尺寸較小，因此主要展示商品，文案要精簡(jiǎn)，但需要加大字號(hào)。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖（3）首頁通欄鉆展圖：這類鉆展圖位于淘寶首頁“有好貨”的下方，是首頁重要位置。其尺寸為375×130像素，尺寸和，價(jià)格適中，性價(jià)比合適，設(shè)計(jì)時(shí)需要圖文結(jié)合。3.3.2鉆展圖的設(shè)計(jì)尺寸產(chǎn)品鉆展圖1.推廣內(nèi)容進(jìn)行鉆展圖設(shè)計(jì)時(shí)，為了提高點(diǎn)擊率，需要先確定推廣內(nèi)容，然后再根據(jù)內(nèi)容進(jìn)行圖片和文案的設(shè)計(jì)。鉆展圖的推廣內(nèi)容通?？梢苑譃橐韵氯N。（1）推廣單品：其圖片素材多選擇單品，文案以商品賣點(diǎn)和折扣促銷信息為重點(diǎn)。3.3.3鉆展圖的設(shè)計(jì)方法商品廣告內(nèi)容（2）推廣活動(dòng)或店鋪：其圖片素材多選擇商品的組合形式或模特，文案以折扣促銷信息為重點(diǎn)。（3）推廣品牌：其圖片多選擇品牌相關(guān)素材，文案要弱化促銷，強(qiáng)化品牌。3.3.3鉆展圖的設(shè)計(jì)方法品牌展示2.設(shè)計(jì)技巧鉆展圖雖然是商家通過付費(fèi)進(jìn)行推廣，但商品之間依然存在著強(qiáng)烈的競(jìng)爭(zhēng)。因此網(wǎng)店美工可以通過一些特殊手法令設(shè)計(jì)的鉆展圖更加引人注目。（1）直接運(yùn)用商品圖作為背景，簡(jiǎn)潔醒目，快速吸引消費(fèi)者。（2）將文字和商品圖進(jìn)行適當(dāng)角度的傾斜，令整個(gè)畫面更富有張力，更能吸引消費(fèi)者。3.3.3鉆展圖的設(shè)計(jì)方法

使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”