模塊7 網(wǎng)店推廣圖視覺設(shè)計(jì)《網(wǎng)店美工視覺設(shè)計(jì)》教學(xué)課件

《網(wǎng)店美工視覺設(shè)計(jì)》?精品課件合集模塊7

網(wǎng)店推廣圖視覺設(shè)計(jì)本章導(dǎo)讀在網(wǎng)店未進(jìn)行推廣的情況下，消費(fèi)者瀏覽到該網(wǎng)店商品的概率特別小。所以，如果想要商品有充足的曝光率，需要讓它“浮出水面”。網(wǎng)店?duì)I銷推廣是指網(wǎng)店通過各種宣傳方式讓更多的消費(fèi)者看到并進(jìn)入自己的網(wǎng)店，認(rèn)識(shí)其中的商品，并通過各種方式讓消費(fèi)者購(gòu)買商品。本項(xiàng)目將介紹網(wǎng)店?duì)I銷常用的推廣方式智鉆圖、直通車圖等推廣圖的設(shè)計(jì)和制作方法。學(xué)習(xí)目標(biāo)了解智鉆圖的展現(xiàn)方式、投放步驟和設(shè)計(jì)要點(diǎn)了解直通車圖的投放位置、投放目的和策略、設(shè)計(jì)要點(diǎn)本章導(dǎo)讀在網(wǎng)店未進(jìn)行推廣的情況下，消費(fèi)者瀏覽到該網(wǎng)店商品的概率特別小。所以，如果想要商品有充足的曝光率，需要讓它“浮出水面”。網(wǎng)店?duì)I銷推廣是指網(wǎng)店通過各種宣傳方式讓更多的消費(fèi)者看到并進(jìn)入自己的網(wǎng)店，認(rèn)識(shí)其中的商品，并通過各種方式讓消費(fèi)者購(gòu)買商品。本項(xiàng)目將介紹網(wǎng)店?duì)I銷常用的推廣方式智鉆圖、直通車圖等推廣圖的設(shè)計(jì)和制作方法。技能目標(biāo)掌握智鉆圖的設(shè)計(jì)方法掌握直通車圖的設(shè)計(jì)方法學(xué)習(xí)目標(biāo)了解智鉆圖的展現(xiàn)方式、投放步驟和設(shè)計(jì)要點(diǎn)了解直通車圖的投放位置、投放目的和策略、設(shè)計(jì)要點(diǎn)目錄contents7.1智鉆圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)項(xiàng)目實(shí)踐①：制作智鉆圖項(xiàng)目實(shí)踐②：制作直通車圖項(xiàng)目拓展：H5頁面7.1智鉆圖的視覺設(shè)計(jì)7.1.1智鉆圖的展現(xiàn)方式智鉆是淘寶網(wǎng)提供的一種付費(fèi)推廣方式，是淘寶網(wǎng)圖片類廣告競(jìng)價(jià)投放平臺(tái)。智鉆圖則是在智鉆展位上展示用以吸引消費(fèi)者注意力的圖片，下面對(duì)智鉆圖的展現(xiàn)方式、投放步驟及設(shè)計(jì)要點(diǎn)進(jìn)行介紹。通常電商平臺(tái)會(huì)在頁面最顯眼的位置展現(xiàn)用于引流的智鉆圖。智鉆圖類似于小型海報(bào)，如消費(fèi)者打開淘寶首頁后，最先映入眼簾的就是一張大圖，這張大圖的位置就是淘寶站內(nèi)的智鉆圖展示位，如圖7-1所示的紅框區(qū)域。7.1智鉆圖的視覺設(shè)計(jì)7.1智鉆圖的視覺設(shè)計(jì)7.1.2智鉆圖的投放步驟網(wǎng)店進(jìn)行智鉆推廣之前，需要進(jìn)行全面的考察和詳細(xì)的策劃，明確推廣的目的和策略。智鉆圖的投放需要經(jīng)過以下幾個(gè)步驟。開通鉆展并充值選擇投放的資源位制作智鉆圖上傳智鉆圖，等待審核通過新建計(jì)劃，填寫相關(guān)信息選擇定向人群，設(shè)置出價(jià)正式投放智鉆圖7.1智鉆圖的視覺設(shè)計(jì)7.1.3智鉆圖的設(shè)計(jì)要點(diǎn)智鉆圖位置眾多且尺寸各異，因此在制作智鉆圖時(shí)，網(wǎng)店美工要根據(jù)其位置、尺寸等信息進(jìn)行調(diào)整，并采取合適的方式進(jìn)行設(shè)計(jì)。雖然智鉆圖的位置和尺寸不同，但其設(shè)計(jì)要求基本一致，下面進(jìn)行詳細(xì)介紹。主題突出目標(biāo)明確形式美觀目錄contents7.1智鉆圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)項(xiàng)目實(shí)踐①：制作智鉆圖項(xiàng)目實(shí)踐②：制作直通車圖項(xiàng)目拓展：H5頁面7.2直通車圖的視覺設(shè)計(jì)7.2.1直通車圖的投放位置直通車推廣能精準(zhǔn)地將商品信息推送給潛在消費(fèi)者，給網(wǎng)店帶來巨大的流量。下面介紹直通車的投放位置、投放目的和策略、設(shè)計(jì)要點(diǎn)。直通車圖可以投放在淘寶平臺(tái)的各個(gè)地方，如“掌柜熱賣”板塊等。圖7-2所示為關(guān)鍵詞搜索結(jié)果頁底部的“掌柜熱賣”，消費(fèi)者點(diǎn)擊直通車圖即可進(jìn)入對(duì)應(yīng)的網(wǎng)店或詳情頁。直通車圖的投放位置比較多，除上述提及的之外，還有“我的淘寶”首頁（猜我喜歡）、“我的淘寶”（已買到寶貝的底部）、“我的寶貝”（收藏列表頁底部）、購(gòu)物車底部等。7.2直通車圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)7.2.2直通車圖的投放目的和策略直通車圖的投放目的是將商品推送給潛在消費(fèi)者，為商品和網(wǎng)店帶來流量，以取得網(wǎng)店想要的營(yíng)銷效果，所以不僅要讓消費(fèi)者點(diǎn)擊直通車圖，而且要考慮其轉(zhuǎn)化率。直通車圖的投放策略可以是單品引流，也可以是網(wǎng)店引流。單品引流側(cè)重于傳遞單個(gè)商品的信息或銷售訴求，以銷售轉(zhuǎn)化為最終目的；網(wǎng)店引流側(cè)重于宣傳品牌，通過集中引流再分流的方式，實(shí)現(xiàn)流量的價(jià)值最大化。此外，網(wǎng)店引流一般會(huì)以主題促銷、活動(dòng)或類目專場(chǎng)等方式呈現(xiàn)。7.2直通車圖的視覺設(shè)計(jì)7.2.3直通車圖的設(shè)計(jì)要點(diǎn)直通車圖就是直通車展位上的圖片，直通車圖的尺寸和主圖的尺寸一致，其設(shè)計(jì)也類似于主圖的設(shè)計(jì)，但更加注重視覺效果。部分商家為了引導(dǎo)消費(fèi)者進(jìn)入網(wǎng)店購(gòu)買商品，提高網(wǎng)店的動(dòng)銷率，會(huì)把熱銷商品的主圖直接放到直通車展位上。優(yōu)質(zhì)的直通車圖是網(wǎng)店吸引流量、提高點(diǎn)擊率和轉(zhuǎn)化率的必要條件，也是視覺設(shè)計(jì)的關(guān)鍵。網(wǎng)店美工在設(shè)計(jì)直通車圖時(shí)，除了注意其美觀性之外，還應(yīng)注意以下幾點(diǎn)。針對(duì)消費(fèi)群體確定設(shè)計(jì)風(fēng)格。確定推廣商品的消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格和色彩定位。例如，推廣的是少女服飾，因此消費(fèi)群體是年輕女性，在設(shè)計(jì)風(fēng)格上盡量要可愛，在色彩定位上則應(yīng)采用活潑鮮艷的色調(diào)。分析消費(fèi)者的消費(fèi)能力，確定促銷方式。分析消費(fèi)者的消費(fèi)能力，這樣就可以確定以什么樣的促銷方式來吸引消費(fèi)者。從競(jìng)爭(zhēng)對(duì)手處找到差異賣點(diǎn)。網(wǎng)店美工通過分析消費(fèi)者的偏好來確定賣點(diǎn)，從競(jìng)爭(zhēng)對(duì)手處找到差異賣點(diǎn)，通過文案將其合理地表現(xiàn)出來。拓展知識(shí)：直通車投放需要注意的因素直通車在投放過程中需要注意以下幾項(xiàng)。關(guān)鍵詞。在編寫關(guān)鍵詞時(shí)可以把產(chǎn)品屬性、類目、功效、材質(zhì)、名稱和優(yōu)勢(shì)賣點(diǎn)等進(jìn)行羅列，然后分別進(jìn)行可讀性的組合，并通過參考競(jìng)爭(zhēng)買家的一些賣點(diǎn)進(jìn)行補(bǔ)充，從而使關(guān)鍵詞有效、完整。進(jìn)行該關(guān)鍵詞的搜索，查看關(guān)鍵詞的轉(zhuǎn)化率。選款。對(duì)于剛剛踏入淘寶的商家來說，第一步就是選款，選款可是重要的一步。可以先看同行哪一個(gè)款式賣的好，哪個(gè)款式受歡迎，就找類似的款式。如果已經(jīng)定了款式，那就先做點(diǎn)基礎(chǔ)銷量，然后就可以開直通車測(cè)款，看看哪一個(gè)款式比較受歡迎，那就把哪一個(gè)款式當(dāng)做主推款。

拓展知識(shí)：直通車投放需要注意的因素直通車在投放過程中需要注意以下幾項(xiàng)。關(guān)鍵詞。在編寫關(guān)鍵詞時(shí)可以把產(chǎn)品屬性、類目、功效、材質(zhì)、名稱和優(yōu)勢(shì)賣點(diǎn)等進(jìn)行羅列，然后分別進(jìn)行可讀性的組合，并通過參考競(jìng)爭(zhēng)買家的一些賣點(diǎn)進(jìn)行補(bǔ)充，從而使關(guān)鍵詞有效、完整。進(jìn)行該關(guān)鍵詞的搜索，查看關(guān)鍵詞的轉(zhuǎn)化率。選款。對(duì)于剛剛踏入淘寶的商家來說，第一步就是選款，選款可是重要的一步?？梢韵瓤赐心囊粋€(gè)款式賣的好，哪個(gè)款式受歡迎，就找類似的款式。如果已經(jīng)定了款式，那就先做點(diǎn)基礎(chǔ)銷量，然后就可以開直通車測(cè)款，看看哪一個(gè)款式比較受歡迎，那就把哪一個(gè)款式當(dāng)做主推款。排名。在類目里排名越靠前的產(chǎn)品，點(diǎn)擊率越高；排名越靠后，并且一些買家在看到店鋪的排名情況后，可能會(huì)不太想繼續(xù)購(gòu)買該商品。人群。人群相關(guān)性也就是說來的消費(fèi)者的基本情況是否和你產(chǎn)品是否匹配，這個(gè)是影響著轉(zhuǎn)化率。目錄contents7.1智鉆圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)項(xiàng)目實(shí)踐①：制作智鉆圖項(xiàng)目實(shí)踐②：制作直通車圖項(xiàng)目拓展：H5頁面項(xiàng)目實(shí)踐①：制作智鉆圖使用智鉆推廣的網(wǎng)店如果希望得到高點(diǎn)擊率，就要將智鉆圖設(shè)計(jì)好，讓人看一眼就被吸引。那么智鉆圖該怎么設(shè)計(jì)呢？創(chuàng)意是影響點(diǎn)擊率最直接的因素，被譽(yù)為“智鉆展位的生命線”，所以創(chuàng)意對(duì)智鉆圖來說是非常重要的。下面以美妝網(wǎng)店的“6·18”年中大促活動(dòng)進(jìn)行智鉆推廣為例，根據(jù)特色商品的特征，利用傳統(tǒng)紋飾、造型意向、傳統(tǒng)色彩等視覺元素設(shè)計(jì)智鉆圖，設(shè)計(jì)效果如圖7-3所示。項(xiàng)目實(shí)踐①：制作智鉆圖設(shè)計(jì)思路：根據(jù)商品的特點(diǎn)，可以從下面幾個(gè)方面進(jìn)行智鉆圖的設(shè)計(jì)。①“國(guó)潮”泛指中國(guó)本土文化、本土品牌及商品引領(lǐng)的消費(fèi)文化潮流。越來越多的國(guó)貨品牌開始運(yùn)用“國(guó)潮”進(jìn)行宣傳，以傳統(tǒng)元素為基礎(chǔ)，將品牌理念與調(diào)性暗含其中，以潮流設(shè)計(jì)展現(xiàn)國(guó)貨風(fēng)采。本例的美妝網(wǎng)店就是將中國(guó)的傳統(tǒng)設(shè)計(jì)引入商品和商品包裝中，因此，在制作智鉆圖時(shí)，網(wǎng)店美工可以充分運(yùn)用“國(guó)潮”風(fēng)格。②設(shè)計(jì)時(shí)，網(wǎng)店美工通過對(duì)圖像、文字、色彩與版式的整體歸納與融合，將中國(guó)傳統(tǒng)文化與精神理念貫穿作品之中，向消費(fèi)者傳達(dá)“國(guó)潮”文化內(nèi)涵，激發(fā)消費(fèi)者的文化認(rèn)同感與情感共鳴。③“6·18”是網(wǎng)店的一項(xiàng)大型促銷活動(dòng)，因此促銷是制作智鉆圖的主要目的。打折、促銷內(nèi)容這些信息應(yīng)該放在視覺中心，作為被突出和放大的元素。項(xiàng)目實(shí)踐①：制作智鉆圖知識(shí)要點(diǎn)：完成本例的操作，網(wǎng)店美工需要掌握以下知識(shí)。①使用畫筆工具繪制光線，為畫面添加光感效果。②利用橫排文字工具，設(shè)置文本格式，輸入文本，為文字添加圖層樣式，突出文字，豐富畫面效果。③使用圓角矩形工具、橢圓工具繪制形狀。④創(chuàng)建剪切蒙版，將圖片嵌套到形狀圖層中。目錄contents7.1智鉆圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)項(xiàng)目實(shí)踐①：制作智鉆圖項(xiàng)目實(shí)踐②：制作直通車圖項(xiàng)目拓展：H5頁面項(xiàng)目實(shí)踐②：制作直通車圖直通車圖的優(yōu)劣決定了直通車推廣能否成功。下面制作女士手提包新品預(yù)售直通車圖，設(shè)計(jì)效果如圖7-16所示。項(xiàng)目實(shí)踐②：制作直通車圖設(shè)計(jì)思路：網(wǎng)店美工可以從下面幾個(gè)方面進(jìn)行直通車圖設(shè)計(jì)。①本例推廣的主題為新品預(yù)售，推廣前要分析商品所針對(duì)的消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格。由于推廣的商品為女士手提包，消費(fèi)群體多為年輕女性，因此設(shè)計(jì)風(fēng)格應(yīng)盡量體現(xiàn)時(shí)尚、簡(jiǎn)約的一面。

項(xiàng)目實(shí)踐②：制作直通車圖設(shè)計(jì)思路：網(wǎng)店美工可以從下面幾個(gè)方面進(jìn)行直通車圖設(shè)計(jì)。①本例推廣的主題為新品預(yù)售，推廣前要分析商品所針對(duì)的消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格。由于推廣的商品為女士手提包，消費(fèi)群體多為年輕女性，因此設(shè)計(jì)風(fēng)格應(yīng)盡量體現(xiàn)時(shí)尚、簡(jiǎn)約的一面。②設(shè)計(jì)時(shí)，由于預(yù)售的時(shí)間為春季，在顏色定位上網(wǎng)店美工可以采用清新的綠色，運(yùn)用素材以營(yíng)造春意盎然的感覺，體現(xiàn)青春與活力。

項(xiàng)目實(shí)踐②：制作直通車圖設(shè)計(jì)思路：網(wǎng)店美工可以從下面幾個(gè)方面進(jìn)行直通車圖設(shè)計(jì)。①本例推廣的主題為新品預(yù)售，推廣前要分析商品所針對(duì)的消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格。由于推廣的商品為女士手提包，消費(fèi)群體多為年輕女性，因此設(shè)計(jì)風(fēng)格應(yīng)盡量體現(xiàn)時(shí)尚、簡(jiǎn)約的一面。②設(shè)計(jì)時(shí)，由于預(yù)售的時(shí)間為春季，在顏色定位上網(wǎng)店美工可以采用清新的綠色，運(yùn)用素材以營(yíng)造春意盎然的感覺，體現(xiàn)青春與活力。③預(yù)售目的就是預(yù)先告知消費(fèi)者，本店在舉行新品預(yù)售活動(dòng)，激發(fā)消費(fèi)者好奇心，提升商品的點(diǎn)擊率，給出優(yōu)惠價(jià)提前鎖定消費(fèi)者。網(wǎng)店美工要根據(jù)消費(fèi)群體分析其消費(fèi)能力，這樣可以確定用什么樣的促銷方式來吸引消費(fèi)者。項(xiàng)目實(shí)踐②：制作直通車圖知識(shí)要點(diǎn)：完成本例的操作，網(wǎng)店美工需要掌握以下知識(shí)。①使用矩形工具、圓角矩形工具、橢圓工具繪制形狀。②利用橫排文字工具，設(shè)置文本格式，輸入文本。③創(chuàng)建剪貼蒙版，將圖片嵌套到形狀圖層中。④使用畫筆工具繪制投影，增加畫面的層次。目錄contents7.1智鉆圖的視覺設(shè)計(jì)7.2直通車圖的視覺設(shè)計(jì)項(xiàng)目實(shí)踐①：制作智鉆圖項(xiàng)目實(shí)踐②：制作直通車圖項(xiàng)目拓展：H5頁面項(xiàng)目拓展：H5頁面H5頁面是一種移動(dòng)營(yíng)銷方式，它憑借強(qiáng)大的互動(dòng)性和良好的視覺效果，在移動(dòng)端網(wǎng)絡(luò)社交媒體（以微信為主）中快速傳播。如今，越來越多的網(wǎng)店也將目光投向H5頁面，通過H5頁面進(jìn)行營(yíng)銷推廣，因此H5頁面的設(shè)計(jì)和制作逐漸成為網(wǎng)店美工的重要工作。H5是HTML5的簡(jiǎn)稱，它不是一項(xiàng)技術(shù)，而是Web技術(shù)中的一個(gè)標(biāo)準(zhǔn)。HTML是HyperTextMarkupLanguage的縮寫，意為“超級(jí)文本標(biāo)記語言”，多數(shù)網(wǎng)頁都是用HTML編寫的，HTML5是HTML的第5個(gè)版本。H5頁面是指運(yùn)用HTML5制作的在移動(dòng)端網(wǎng)絡(luò)社交媒體中傳播的帶有交互體驗(yàn)、動(dòng)態(tài)效果及音效的Web頁面。H5頁面除了包含圖片和文字外，還可以包含聲音、動(dòng)畫、視頻等，甚至是炫酷的效果，具有更強(qiáng)的視覺沖擊力。H5頁面常見的應(yīng)用場(chǎng)景有：微信H5、交互視頻、戶外大屏交互解決方案、PC網(wǎng)頁等。例如微信H5，在朋友圈、公眾號(hào)中放置鏈接、二維碼，可以實(shí)現(xiàn)在微信內(nèi)打開H5頁面。H5頁面不僅視覺效果好、傳播速度快，而且擁有移動(dòng)網(wǎng)頁沒有的強(qiáng)大功能，如網(wǎng)頁版App、網(wǎng)頁小游戲、互動(dòng)頁面等。H5頁面很快被商家重視，在短時(shí)間內(nèi)迅速壯大，成為當(dāng)前線上營(yíng)銷推廣的“主力軍”。項(xiàng)目拓展：H5頁面1.H5頁面的類型H5頁面是一種新型的廣告營(yíng)銷方式。網(wǎng)店美工在制作H5頁面時(shí)，主要用其展示品牌信息、商品信息和活動(dòng)信息等內(nèi)容。那么H5頁面有哪些類型呢？下面進(jìn)行具體介紹。（1）品牌傳播型品牌傳播型H5頁面相當(dāng)于一個(gè)品牌的微官網(wǎng)，傾向于品牌形象的塑造，向消費(fèi)者傳達(dá)品牌的精神。其在內(nèi)容上需要倡導(dǎo)一種態(tài)度、一個(gè)主旨，在設(shè)計(jì)上則需要運(yùn)用符合品牌氣質(zhì)的視覺語言讓消費(fèi)者對(duì)品牌留下深刻印象。圖7-32所示的“純中式合院”地產(chǎn)H5頁面，以傳統(tǒng)文化、傳統(tǒng)建筑為特色，采用灰色背景呈現(xiàn)了中式合院的飛檐翹角，給人靜謐之感，簡(jiǎn)單又能打動(dòng)人心。（2）商品介紹型商品介紹型H5頁面以商品本身的特點(diǎn)為依據(jù)，放大商品特性，完成商品的形象塑造，激發(fā)消費(fèi)者的購(gòu)買欲，其主要組成部分是“商品名稱、商品形象、商品廣告語”。例如，圖7-33所示為一家食品店鋪宣傳新鮮上市的草莓的H5頁面。項(xiàng)目拓展：H5頁面（3）活動(dòng)推廣型活動(dòng)推廣型H5頁面是商家在運(yùn)營(yíng)過程中設(shè)計(jì)一些活動(dòng)或者廣告時(shí)所使用的頁面。活動(dòng)推廣型H5頁面多用插畫的形式，重點(diǎn)展現(xiàn)活動(dòng)主題（如節(jié)日關(guān)懷、打折優(yōu)惠）和時(shí)間，營(yíng)造熱鬧的活動(dòng)氛圍。例如，圖7-34所示的H5頁面為某網(wǎng)店借助元旦特惠發(fā)布的邀請(qǐng)好友拿豪禮活動(dòng)推廣型頁面。項(xiàng)目拓展：H5頁面2.H5頁面的制作工具H5頁面的制作工具有很多，如兔展、人人秀、稿定設(shè)計(jì)、MAKA、iH5等，它們的核心特點(diǎn)都是通過添加并編輯模塊的方式來制作H5頁面，這樣在制作過程中就不需要進(jìn)行編程，從而大大降低了H5頁面的制作門檻，縮短了H5頁面的制作時(shí)間。下面將對(duì)兩種常用的H5頁面制作工具的使用方法進(jìn)行介紹。（1）MAKAMAKA是一款