《網(wǎng)店視覺(jué)設(shè)計(jì)》課件 項(xiàng)目六 網(wǎng)店推廣圖視覺(jué)設(shè)計(jì)

項(xiàng)目六?網(wǎng)店推廣圖視覺(jué)設(shè)計(jì)任務(wù)1?主圖設(shè)計(jì)任務(wù)2?直通車圖設(shè)計(jì)任務(wù)3?鉆展圖設(shè)計(jì)366367項(xiàng)目引入網(wǎng)上購(gòu)物看不到實(shí)物，只有努力對(duì)自己的網(wǎng)店進(jìn)行推廣營(yíng)銷，讓用戶了解網(wǎng)店和網(wǎng)店中的商品，建立起對(duì)網(wǎng)店的信任，才有可能實(shí)現(xiàn)銷售轉(zhuǎn)化。因此，掌握網(wǎng)店推廣圖的設(shè)計(jì)原則和方法，做好網(wǎng)店推廣圖視覺(jué)設(shè)計(jì)顯得尤為重要。項(xiàng)目背景某電商公司為助力鄉(xiāng)村振興，幫助果農(nóng)們解決銷路問(wèn)題，需要把小番茄商品在“南山大集”電商平臺(tái)上架，其中制作主圖、直通車圖和鉆展圖的任務(wù)交給了張偉、王平兩位同學(xué)。學(xué)習(xí)目標(biāo)1.熟悉并掌握主圖的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握主圖的設(shè)計(jì)思路。3.能夠制作主圖。368任務(wù)引入張偉、王平接到制作小番茄商品主圖的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作主圖的要求和方法。任務(wù)分析主圖是商品在網(wǎng)店中被用戶看到的第一張圖片，不言而喻這張圖是非常重要的。正是因?yàn)檫@張圖非常重要，所以電商平臺(tái)對(duì)它提出的要求是最多的，對(duì)違規(guī)主圖的處理也是最多的。因此，不能無(wú)節(jié)制地設(shè)計(jì)這張重要的圖，在制作主圖之前，需要熟悉主圖的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。369相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.主圖概述主圖是店鋪?zhàn)钪匾牧髁咳肟?，?duì)引流起著關(guān)鍵的作用。主圖設(shè)計(jì)得好壞，將直接關(guān)系到商品的銷售。因此，主圖的設(shè)計(jì)必須體現(xiàn)商品的特色和賣點(diǎn)，以引起用戶點(diǎn)擊的興趣。例如，要買水果特產(chǎn)，在網(wǎng)站搜索框中輸入關(guān)鍵詞“水果特產(chǎn)”，單擊“搜索”按鈕，搜索結(jié)果頁(yè)面如圖所示。370371水果特產(chǎn)主圖頁(yè)面2.主圖行業(yè)規(guī)范在不同平臺(tái)上，主圖設(shè)計(jì)的規(guī)則也不盡相同（不同行業(yè)也會(huì)有差異），如淘寶網(wǎng)對(duì)于居家日用品行業(yè)的熱水袋類要求“第四張主圖須清晰展示商品內(nèi)部結(jié)構(gòu)圖以及外部包裝款式，且圖片必須為白底，不得出現(xiàn)其他信息”。因此，要特別注意主圖設(shè)計(jì)中的各種平臺(tái)規(guī)則，以防因違規(guī)造成不必要的損失。3723.主圖制作要求（1）主圖常用尺寸為700像素×700像素。（2）主圖文件大小不能超過(guò)3MB。（3）主圖文字清晰，文字內(nèi)容和色塊數(shù)量不宜過(guò)多，以突出商品主體。373二、主圖制作本例將制作小番茄主圖，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為500像素，高度為500像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，如圖所示。374新建空白畫布2.導(dǎo)入“項(xiàng)目六任務(wù)1背景”素材圖片，并居中對(duì)齊，如圖所示。375導(dǎo)入“項(xiàng)目六任務(wù)1背景”素材圖片3.選擇矩形工具，在工具屬性欄中設(shè)置填充為#148f50，在圖片的上方繪制800像素×155像素的矩形，移動(dòng)到頁(yè)面底部，如圖所示。376繪制矩形4.使用鋼筆工具繪制圓角梯形，填充設(shè)置為#148f50，并移動(dòng)到頁(yè)面頂部，效果如圖所示。377繪制圓角梯形5.導(dǎo)入“項(xiàng)目六任務(wù)1logo”素材圖片，并置于頂部居中位置，效果如圖所示。378導(dǎo)入“項(xiàng)目六任務(wù)1logo”素材圖片6.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為白色，效果如圖所示。379顏色疊加7.選擇橫排文字工具，輸入文字“正宗南山小番茄”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、35點(diǎn)、#???。8.選擇橫排文字工具，輸入文字“清晨采摘破損包賠”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、48點(diǎn)、#???，效果如圖所示。9.使用直線工具繪制一條豎線。設(shè)置填充為無(wú)，描邊為#???、1.3像素、虛線，效果如圖所示。380381輸入文字1繪制間隔線10.選擇橫排文字工具，輸入文字“5”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為方正小標(biāo)宋簡(jiǎn)體、200點(diǎn)、#???，效果如圖所示。382輸入文字211.執(zhí)行“圖層樣式＞描邊”命令，為文字“5”添加描邊，設(shè)置大小、顏色分別為6像素、#148f50，效果如圖所示。383描邊12.選擇橫排文字工具，輸入文字“凈重斤”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑色、18點(diǎn)、#???，最終效果如圖所示。384最終效果385學(xué)習(xí)目標(biāo)1.熟悉并掌握直通車圖的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握直通車圖的設(shè)計(jì)思路。3.能夠制作直通車圖。386任務(wù)引入張偉、王平接到制作小番茄直通車圖的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作直通車圖的要求和方法。任務(wù)分析直通車包含三個(gè)主要因素：關(guān)鍵詞、出價(jià)、直通車圖。關(guān)鍵詞和出價(jià)決定了直通車圖能否被用戶看到，而直通車圖是用戶愿不愿意點(diǎn)擊的重要決定因素。在制作直通車圖之前，需要熟悉直通車圖的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.直通車概述直通車是阿里巴巴公司推出的一種點(diǎn)擊付費(fèi)式推廣工具。通過(guò)直通車推廣的商品，不僅會(huì)出現(xiàn)在淘寶搜索頁(yè)面上，還可以出現(xiàn)在其他指定的推廣頁(yè)面上，其覆蓋面非常廣。賣家可以為推廣的每一款商品設(shè)置200個(gè)關(guān)鍵詞，并可以針對(duì)每個(gè)關(guān)鍵詞自由競(jìng)價(jià)。直通車可以多維度、全方位地提供各類報(bào)表以及信息，從而快速、便捷地進(jìn)行批量操作。商家可以根據(jù)自身的實(shí)際需要，按時(shí)間和地域來(lái)控制推廣費(fèi)用，精準(zhǔn)定位目標(biāo)消費(fèi)群體，降低推廣成本，提高網(wǎng)店的整體曝光度和點(diǎn)擊流量，最終達(dá)到提升銷售額的目的。3872.直通車圖尺寸說(shuō)明直通車圖分為店鋪直通車圖和商品直通車圖兩種，二者除設(shè)計(jì)尺寸不同之外，其鏈接方式也不同。店鋪直通車圖鏈接到店鋪首頁(yè)或者活動(dòng)頁(yè)，商品直通車圖鏈接到商品詳情頁(yè)。店鋪直通車圖設(shè)計(jì)尺寸為210像素×315像素，文件尺寸不得超過(guò)480KB，展示尺寸為180像素×270像素（最小值）。商品直通車圖設(shè)計(jì)尺寸為800像素×800像素，文件不超過(guò)480KB，展示尺寸為200像素×200像素（最小值）。3883.直通車圖展示位置在淘寶網(wǎng)頁(yè)的搜索框中搜索關(guān)鍵詞時(shí)，輸入關(guān)鍵詞、單擊“搜索”按鈕后進(jìn)入的頁(yè)面就是直通車圖所在的位置，如圖所示。直通車圖的展示位一共有22個(gè)，另外在搜索結(jié)果頁(yè)面右側(cè)還有12個(gè)豎展示位，在頁(yè)面底端還有5個(gè)橫展示位。搜索頁(yè)面可一頁(yè)一頁(yè)往后翻，展示位以此類推。389390直通車圖示意4.直通車圖設(shè)計(jì)原則為了提高直通車圖的點(diǎn)擊率，商家會(huì)通過(guò)不同的賣點(diǎn)、不同的設(shè)計(jì)形式制作多張直通車圖并依次測(cè)試，最終選擇點(diǎn)擊率與轉(zhuǎn)換率最優(yōu)的直通車圖進(jìn)行推廣。一般情況下，制作直通車推廣圖應(yīng)遵循以下4個(gè)原則。391（1）主題賣點(diǎn)簡(jiǎn)潔精確主題賣點(diǎn)只有一個(gè)，要緊扣用戶訴求，表述簡(jiǎn)潔明了、直接精確。為了便于用戶接受，標(biāo)題應(yīng)盡量控制在6個(gè)字以內(nèi)，直擊用戶需求痛點(diǎn)，才能打動(dòng)用戶。（2）文案精練有創(chuàng)意賣點(diǎn)可以直接通過(guò)商品圖片來(lái)展示，當(dāng)商品圖片不足以準(zhǔn)確地傳達(dá)賣點(diǎn)信息時(shí)，精練、有創(chuàng)意的文案配上商品圖片會(huì)更好地傳達(dá)商品賣點(diǎn)。392（3）構(gòu)圖合理直通車圖的設(shè)計(jì)講究整齊和統(tǒng)一，圖文搭配比例平衡、邏輯清晰，遵循從左至右、從上至下，先中間后兩邊的視覺(jué)流程，合理控制圖片重心；文字信息量不宜多，且不要覆蓋商品，否則會(huì)影響商品的展示效果；圖中文字的排列方式、行距、字體顏色、樣式等要整齊統(tǒng)一，并通過(guò)改變字體大小或者顏色來(lái)清晰地體現(xiàn)信息的主次關(guān)系。直通車圖的構(gòu)圖方式有很多，包括中心構(gòu)圖、左右構(gòu)圖、三角構(gòu)圖、斜角構(gòu)圖、黃金比例構(gòu)圖等。393（4）具有吸引力應(yīng)通過(guò)素材差異化、構(gòu)圖差異化或文案差異化，形成與其他商品直通車圖的鮮明對(duì)比?？梢允褂锚?dú)特的拍攝手法、夸張的文案等方式增強(qiáng)圖片吸引力，從而快速吸引用戶。需要注意的是，若商品的款式吸引力強(qiáng)，就應(yīng)該充分、全面地展示款式，而不需要煩瑣的文案。背景大量留白、色彩單一，反而更能體現(xiàn)商品的品質(zhì)，更加吸引用戶的注意力。3945.直通車圖設(shè)計(jì)的行業(yè)規(guī)范直通車圖的主圖會(huì)根據(jù)點(diǎn)擊率而隨時(shí)更換，且淘寶對(duì)于直通車的主圖也有一定的要求，具體如下：●標(biāo)識(shí)要放在圖片左上方?！駡D片不得拼接，除特殊情況外，如情侶裝、親子裝等，圖片中不能有多個(gè)主體?！駡D片不得出現(xiàn)任何形式的邊框?！駡D片不得包含促銷文字等說(shuō)明，如秒殺、限時(shí)折扣等?！駡D片不得出現(xiàn)水印，如店鋪水印、標(biāo)識(shí)水印等?！駡D片不得留白?！駡D片必須是實(shí)物圖。395二、直通車圖制作本例將制作一個(gè)以“鄉(xiāng)村振興”為主題的南山小番茄直通車圖，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為800像素，高度為800像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，如圖所示。2.設(shè)置前景色為#dc100f，按【Ctrl+Delete】組合鍵填充前景色，效果如圖所示。396397新建空白畫布設(shè)置前景色3983.選擇矩形工具，在工具屬性欄中設(shè)置填充為#???，繪制710像素×770像素的矩形，效果如圖所示。繪制矩形13994.選擇矩形工具，在工具屬性欄中設(shè)置填充為#dc100f，繪制275像素×50像素的矩形，效果如圖所示。繪制矩形24005.選擇橢圓工具，在工具屬性欄中設(shè)置填充為#dc100f，繪制直徑為55像素的橢圓，效果如圖所示。繪制橢圓4016.按7次【Ctrl+J】組合鍵復(fù)制橢圓，并依次拖拽至合適位置，效果如圖所示。復(fù)制橢圓4027.導(dǎo)入“項(xiàng)目六任務(wù)2番茄”素材圖片，將其拖拽到白色矩形的右側(cè)，調(diào)整圖片大小和位置，效果如圖所示。導(dǎo)入“項(xiàng)目六任務(wù)2番茄”素材圖片4038.選擇橫排文字工具，輸入文字“享受來(lái)自新鮮的美”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、30點(diǎn)、#???，效果如圖所示。輸入文字14049.選擇橫排文字工具，輸入文字“正宗南山小番茄”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為蘋方、72點(diǎn)、#000000，效果如圖所示。輸入文字240510.選擇橫排文字工具，在圓形框內(nèi)輸入文字“精選大果現(xiàn)摘現(xiàn)賣”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為蘋方、36點(diǎn)、#??f，效果如圖所示。輸入文字340611.選擇橫排文字工具，輸入文字“舌尖上的美味”“DELICIOUSONTHETIOOFYOURTONGUE”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、40點(diǎn)、#2c2c2c和思源黑體、16點(diǎn)、#2c2c2c，效果如圖所示。輸入文字440712.選擇橫排文字工具，輸入文字“清晨采摘破損包賠”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、60點(diǎn)、#???，效果如圖所示。輸入文字540813.選擇橫排文字工具，輸入文字“5”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為方正小標(biāo)宋簡(jiǎn)體、300點(diǎn)、#??f，效果如圖所示。輸入文字640914.執(zhí)行“圖層樣式＞描邊”命令，為文字“5”添加描邊，設(shè)置大小為6像素，顏色為dc100f，效果如圖所示。添加描邊41015.選擇橫排文字工具，輸入文字“凈重斤”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、50點(diǎn)、#??f，效果如圖所示。輸入文字741116.導(dǎo)入“項(xiàng)目六任務(wù)2logo”素材圖片，將其放在右上角，如圖所示。導(dǎo)入“項(xiàng)目六任務(wù)2logo”素材圖片41217.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#dc100f，完成直通車圖的制作，最終效果如圖所示。最終效果413學(xué)習(xí)目標(biāo)1.熟悉并掌握鉆展圖的設(shè)計(jì)要點(diǎn)。2.熟悉并掌握鉆展圖的設(shè)計(jì)思路。3.能夠制作鉆展圖。414任務(wù)引入張偉、王平接到制作小番茄鉆展圖的任務(wù)后，為了更好地完成設(shè)計(jì)任務(wù)，他們從網(wǎng)上收集資料，并找專業(yè)老師指導(dǎo)制作鉆展圖的要求和方法。任務(wù)分析鉆展圖是淘寶平臺(tái)除直通車之外的另一個(gè)引流工具，許多賣家都會(huì)在這個(gè)區(qū)域投入大量的精力來(lái)吸引用戶的關(guān)注，往往一些切合用戶需求的圖點(diǎn)擊率更高一些。在制作鉆展圖之前，需要熟悉鉆展圖的設(shè)計(jì)要點(diǎn)和設(shè)計(jì)步驟。415相關(guān)知識(shí)一、基礎(chǔ)知識(shí)1.鉆展圖概述鉆石展位（簡(jiǎn)稱鉆展）是按照流量競(jìng)價(jià)售賣的廣告位，計(jì)費(fèi)單位為CPM（每千次瀏覽單價(jià)），按照出價(jià)從高到低進(jìn)行展現(xiàn)。鉆石展位依靠鉆展圖的創(chuàng)意吸引用戶點(diǎn)擊，獲取巨大流量。因此，考察鉆展圖投放性價(jià)比的關(guān)鍵在于點(diǎn)擊率。在同樣成本支出與展現(xiàn)量的情況下，鉆展圖的點(diǎn)擊率越高，其所引起的引流效果就越明顯。要想提高鉆展圖的點(diǎn)擊率，必須使圖片更加具備視覺(jué)沖擊力和吸引力，如圖所示。416鉆展圖示意4172.鉆展圖設(shè)計(jì)原則（1）因地制宜不同的鉆展位置面向的人群不同，其消費(fèi)特征和興趣點(diǎn)也各不相同。因此，在制作鉆展圖時(shí)，要根據(jù)鉆展位置、尺寸等信息調(diào)整廣告訴求，并采取合適的表達(dá)方式，充分體現(xiàn)鉆展圖的個(gè)性化、定制化和差異化特征。（2）主圖突出鉆展圖既可以是商品圖片，也可以是創(chuàng)意方案，還可以是用戶需求。418（3）目標(biāo)明確在鉆展圖的設(shè)計(jì)制作中，首先需要明確鉆展投放的營(yíng)銷目標(biāo)，再根據(jù)目標(biāo)、投放位置及尺寸進(jìn)行有針對(duì)性的素材選擇和創(chuàng)意設(shè)計(jì)，這樣點(diǎn)擊率才更有保障。（4）形式美觀形式美觀的鉆展圖更能獲得用戶的好感，吸引用戶點(diǎn)擊。在素材相同、創(chuàng)意類似的情況下，鉆展圖的美感就成了用戶決定是否點(diǎn)擊的關(guān)鍵因素。4193.鉆展圖設(shè)計(jì)的行業(yè)規(guī)范鉆展圖設(shè)計(jì)的行業(yè)規(guī)范具體如下：●不允許出現(xiàn)Flash廣告，只能使用JPEG格式或者GIF格式的圖片?！袼袕V告投放的素材必須清晰?！駨V告素材要求無(wú)邊框?！駠?yán)禁出現(xiàn)鼠標(biāo)的手形、箭頭等形狀?！駠?yán)禁出現(xiàn)假分頁(yè)、翻頁(yè)，嚴(yán)禁出現(xiàn)視頻模式。420●不能出現(xiàn)雜志、媒體、明星推薦、OS認(rèn)證等字樣?！駡D片嚴(yán)禁出現(xiàn)拼接形式，不得出現(xiàn)白色豎條。●創(chuàng)意中不能出現(xiàn)月銷千件、全網(wǎng)最低、淘寶店鋪銷量第一、銷售冠軍、熱薦、頂級(jí)等類似以淘寶名義進(jìn)行宣傳或虛假描述誤導(dǎo)用戶的字眼。421二、鉆展圖制作本例將制作小番茄鉆展圖，其具體操作如下：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對(duì)話框中設(shè)置寬度為800像素，高度為800像素，分辨率為72像素/英寸，新建一個(gè)空白畫布，如圖所示。新建空白畫布4222.新建圖層，選擇漸變工具，在工具屬性欄中設(shè)置填充為#f81f09，透明度為100%、0，按住鼠標(biāo)左鍵從左往右繪制漸變填充，效果如圖所示。漸變工具4233.導(dǎo)入“項(xiàng)目六任務(wù)3番茄”素材圖片，