網(wǎng)店視覺營銷與制作項目6 提升手機端淘寶店鋪裝修的視覺效果電子課件 中職專用

網(wǎng)店視覺營銷與制作項目6提升手機端淘寶店鋪裝修的視覺效果電子課件高教版中職專用項目6項目6提升手機端淘寶店鋪裝修視覺效果《網(wǎng)店視覺營銷設(shè)計與制作》重慶大學(xué)出版社項目綜述

為了最終促進網(wǎng)店銷售和圖片準(zhǔn)確傳達信息的目的，在視覺營銷設(shè)計中要注重其審美性，如何應(yīng)用好視覺構(gòu)成元素，做好視覺傳達設(shè)計，讓消費者能感受到店鋪的吸引力和感染力，是視覺營銷設(shè)計的關(guān)鍵。合理的運用視覺構(gòu)成元素，能直接影響到圖片的點擊率，最終能引導(dǎo)消費者成功購買并認(rèn)知產(chǎn)品和品牌。從設(shè)計的角度來看，視覺構(gòu)成元素主要包括色彩、文字、構(gòu)圖。任務(wù)1∣認(rèn)識手機淘寶店鋪裝修

樂樂包袋皮具公司的美工團隊前期已經(jīng)完成PC淘寶店鋪的裝修。然而PC端頁面跟手機端頁面有很大的區(qū)別，手機端能展現(xiàn)的面積不大，在裝修店鋪的時候，需要小可所在的美工團隊挑重點內(nèi)容來做。如果放過多內(nèi)容或者圖片，消費者在沒有Wifi的情況下利用手機端瀏覽頁面時，會影響頁面打開的速度。速度過慢客戶體驗度會受到影響，甚至可能導(dǎo)致客戶流失。所以手機淘寶店鋪裝修必須要做得簡潔而且要直擊重點。情景設(shè)計任務(wù)分解

在前期的工作中，美工團隊已經(jīng)對PC端店鋪進行了裝修。風(fēng)格定位、配色方案已經(jīng)相對完善，現(xiàn)在開始著手對手機端店鋪進行裝修。主要任務(wù)有：①認(rèn)識手機端與電腦端店鋪裝修的區(qū)別;②了解手機淘寶店鋪裝修的要點。任務(wù)1∣認(rèn)識手機淘寶店鋪裝修任務(wù)1∣認(rèn)識手機淘寶店鋪裝修活動1活動1認(rèn)識手機端與電腦端店鋪裝修的區(qū)別活動2了解手機淘寶店鋪裝修的要點。

內(nèi)容導(dǎo)航手機端的淘寶店鋪與PC端有著較大的不同，美工小可需要掌握手機端店鋪裝修特點，學(xué)習(xí)如何進入手機端店鋪裝修頁面，了解版面信息及手機店鋪裝修的設(shè)計原則，才能更好的勝任美工工作?；顒颖尘盎顒幽繕?biāo)認(rèn)識手機店鋪基礎(chǔ)版模塊，以及如何切換智能版?；顒?∣認(rèn)識手機淘寶店鋪裝修

一、手機端店鋪特點1.可以隨時隨地瀏覽店鋪，不受時間、空間限制。2.預(yù)覽更方便、快捷；增強了買家和賣家的互動粘性，促進快速消費。二、手機店鋪裝修的設(shè)計趨勢（1）信息要精簡。手機店鋪呈現(xiàn)的信息受到載體限制,消費者使用的手機屏幕大小有限，信息量多，會導(dǎo)致消費者無法讀取全部信息。（2）風(fēng)格要統(tǒng)一。手機端店鋪裝修時要符合品牌特性；店鋪的風(fēng)格定位、色彩搭配、元素設(shè)計等盡量保持一致，避免雜亂無章，做到風(fēng)格統(tǒng)一化。知識鏈接活動1∣

認(rèn)識手機淘寶店鋪裝修（3）以圖片為主。因受手機屏幕的影響，大部分消費者會先看圖，被圖片吸引后，才愿意了解頁面中的其他文字信息。因此，設(shè)計時盡量控制文字篇幅，多以圖片為主進行展示。（4）分類結(jié)構(gòu)要清晰。模塊劃分做到少而精，一目了然。（5）把握色彩要素。手機端頁面設(shè)計進行色彩搭配時，盡量選用色相飽和度高的鮮亮色系，少用深色系，否則會使畫面清晰感下降。如風(fēng)格定位為深色系時，要注意控制明度的變化。手機端淘寶店鋪和PC端淘寶店鋪有著很大的不同，操作的過程中，不能完全把PC端的店鋪照搬到手機端上，需要了解手機端的操作特點，根據(jù)特點對手機端淘寶店鋪精心設(shè)計，從而更好地發(fā)揮視覺營銷的作用。知識鏈接活動1∣

認(rèn)識手機淘寶店鋪裝修設(shè)計步驟參考：（1）手機端店鋪裝修入口。打開淘寶網(wǎng)－【賣家中心】－【店鋪管理】－【手機淘寶店鋪】－【立即裝修】。（也可點擊店鋪裝修進行操作）如圖6.1.1、6.1.2效果所示。進入后點擊【手機端裝修】－鼠標(biāo)放首頁里，點擊【裝修頁面】。如圖6.1.3效果所示。活動實施活動1∣

認(rèn)識手機淘寶店鋪裝修設(shè)計步驟參考：（2）基礎(chǔ)版裝修模塊分為寶貝類、營銷互動類、圖文類等。裝修的時候只要把自己選擇的相應(yīng)模塊拖動到右邊的界面即可。每個模塊放進去的數(shù)量有限，所以要有針對性的選擇。紅色區(qū)域①為模塊分布，頁面中間為手機端店鋪首頁基本信息，可進行展開操作。紅色區(qū)域②可進行寶貝信息設(shè)置、模塊的添加/刪除、調(diào)整上下順序等操作。如圖6.1.4效果所示?；顒訉嵤┗顒?∣

認(rèn)識手機淘寶店鋪裝修設(shè)計步驟參考：（3）點擊需要設(shè)置的區(qū)域即可編輯寶貝信息。紅色區(qū)域①可進行模塊的添加/刪除、調(diào)整上下順序。紅色區(qū)域②可進行相關(guān)編輯等操作。如圖6.1.5效果所示?；顒訉嵤┗顒?∣

認(rèn)識手機淘寶店鋪裝修設(shè)計步驟參考：（3）點擊需要設(shè)置的區(qū)域即可編輯寶貝信息。紅色區(qū)域①可進行模塊的添加/刪除、調(diào)整上下順序。紅色區(qū)域②可進行相關(guān)編輯等操作。如圖6.1.5效果所示?；顒訉嵤┗顒?∣

認(rèn)識手機淘寶店鋪裝修設(shè)計步驟參考：（4）智能版頁面信息。點擊頁面左上角進行切換。鉆級以下賣家用戶可免費升級智能版。智能版可PC端和手機端兩端裝修整合；有一鍵裝修首頁、多套SDK裝修模板等升級功能。如圖6.1.6、6.1.7效果所示?；顒訉嵤┗顒?∣

認(rèn)識手機淘寶店鋪裝修

嘗試給手機端頁面進行風(fēng)格定位，結(jié)合所學(xué)PC端首頁裝修知識，設(shè)計手機店鋪頁面，色彩搭配合理，風(fēng)格統(tǒng)一。要求：1、寬度為750px，高度不限。2、設(shè)計時模塊區(qū)域的內(nèi)容用色塊代替即可,設(shè)計效果可參考“6.1.8效果圖.jpg”?；顒油卣够顒?∣

認(rèn)識手機淘寶店鋪裝修內(nèi)容導(dǎo)航任務(wù)1∣認(rèn)識手機淘寶店鋪裝修活動1活動1認(rèn)識手機端與電腦端店鋪裝修的區(qū)別活動2了解手機淘寶店鋪裝修的要點。

實習(xí)生小可已經(jīng)初步了解手機端店鋪裝修的基本操作頁面?，F(xiàn)在需要她結(jié)合之前累積的工作經(jīng)驗，深入學(xué)習(xí)手機端店鋪裝修的要點，為接下來的手機端店鋪裝修工作打下良好基礎(chǔ)?；顒颖尘盎顒幽繕?biāo)了解手機店鋪結(jié)構(gòu)，學(xué)會自定義模塊的操作流程?；顒?∣了解手機淘寶店鋪裝修的要點

手機的屏幕較小，消費者的瀏覽習(xí)慣大都是從上至下。手機端店鋪裝修時，要合理運用各種模塊組合。如左文右圖、焦點圖、多圖等模塊，從而增加手機端店鋪的趣味性。手機店鋪的首頁由店招、自定義模塊專區(qū)和寶貝推薦模板等部分構(gòu)成。自定義模塊區(qū)包括優(yōu)惠券、活動信息、爆款推薦等內(nèi)容，通常展示在店鋪頁面前端。如圖6.1.9效果所示。知識鏈接活動2∣了解手機淘寶店鋪裝修的要點

為了吸引消費者；寶貝推薦模塊在對寶貝進行排列展示時，可參照以下順序：（1）爆款（2）新品展示（3）季節(jié)性商品陳列（4）特供款或者特價產(chǎn)品展示從視覺營銷的角度考慮，可以建立不同的會場專區(qū)，在首頁盡可能多地曝光店鋪商品。知識鏈接活動2∣了解手機淘寶店鋪裝修的要點設(shè)計步驟參考：自定義模塊?？梢栽谠搮^(qū)域上傳設(shè)計好的圖片、添加鏈接等。點擊【圖文類】—【自定義模塊】拖至右頁面所要布置的區(qū)域即可。文字下方的數(shù)字表示該模塊可放置的數(shù)量，自定義模塊為10個。如圖6.1.10效果所示?；顒訉嵤┗顒?∣了解手機淘寶店鋪裝修的要點設(shè)計步驟參考：（2）編輯頁面。點擊【編輯板式】進入，“隱藏該模塊下方的白色間隙”若勾選時，在頁面區(qū)域該模塊與下方模塊為無間隙分布，根據(jù)店鋪風(fēng)格選擇即可。如圖6.1.11效果所示。活動實施活動2∣了解手機淘寶店鋪裝修的要點設(shè)計步驟參考：(3)添加圖片。在彈出的編輯框內(nèi)，可用鼠標(biāo)拖動和調(diào)整圖片區(qū)域（藍色部分），需要添加更多圖片區(qū)域，只需要按住鼠標(biāo)左鍵，在單元格上劃出所需區(qū)域面積即可。確定位置后，點擊【添加圖片】可上傳圖片和寶貝鏈接。備注：小方塊單獨像素為80px*80px，拖拽后可在右側(cè)看到該區(qū)域的尺寸。如圖6.1.12效果所示?；顒訉嵤┗顒?∣了解手機淘寶店鋪裝修的要點通過本次活動，小可掌握了手機淘寶店鋪裝修的要點，包括自定義模塊專區(qū)的展示要點、寶貝推薦模塊的展示要點和自定義模塊的操作流程?；顒釉u價活動2∣了解手機淘寶店鋪裝修的要點

為店鋪的大促活動設(shè)計一張爆款海報圖，用于手機端頁面展示。需要考慮到手機載體的瀏覽特點，海報圖可豎屏化。利用自定義模塊進行圖片上傳，并添加寶貝鏈接?；顒油卣够顒?∣了解手機淘寶店鋪裝修的要點任務(wù)2∣裝修手機端淘寶店鋪首頁

美工團隊確定了PC端的店鋪裝修風(fēng)格、配色方案之后，手機端店鋪整體頁面也要有一定的設(shè)計感和藝術(shù)感。我們要為樂樂包袋皮具有限公司進行手機淘寶店鋪的裝修。公司要求結(jié)合該店鋪提供給我們的箱包素材圖片，進行手機端店鋪裝修，內(nèi)容包含：設(shè)計店招，設(shè)計焦點圖、設(shè)計優(yōu)惠券、分類圖等。情景設(shè)計任務(wù)分解

在前期的工作中，美工團隊掌握手機端店鋪的裝修界面、模塊分區(qū)、以及如何上傳設(shè)計圖等操作流程。接下來要開始著手對手機端店鋪首頁模塊進行視覺營銷設(shè)計。本任務(wù)主要有：①設(shè)計店招;②設(shè)計焦點圖；③設(shè)計優(yōu)惠券；④設(shè)計分類圖。任務(wù)2∣裝修手機端淘寶店鋪首頁內(nèi)容導(dǎo)航任務(wù)2∣裝修手機端淘寶店鋪首頁

活動1設(shè)計店招

活動2設(shè)計焦點圖

活動3設(shè)計優(yōu)惠券

活動4設(shè)計分類圖

網(wǎng)店美工小可現(xiàn)在已經(jīng)掌握了手機端頁面的裝修流程。為了手機端店鋪頁面更好的呈現(xiàn)，為了吸引消費者的眼球，小可需要對店招進行優(yōu)化設(shè)計。那么手機端的店招設(shè)計尺寸是多少呢？在設(shè)計時需要注意哪些問題？接下來我們和小可一起來學(xué)習(xí)吧。活動背景活動目標(biāo)了解手機端店招的設(shè)計內(nèi)容，掌握店招的構(gòu)圖和設(shè)計方法?；顒?∣設(shè)計店招手機端店招與PC端不同，手機端店招背景圖片呈漸變虛化顯示，設(shè)計時要考慮整體效果。如圖6.2.1效果所示。知識鏈接活動1∣設(shè)計店招手機端店招的設(shè)計尺寸以及要求：（1）手機端店招尺寸為750px×580px，文件大小400k左右；支持格式j(luò)pg、png。（2）店招的設(shè)計風(fēng)格一般與店鋪近期活動有關(guān)，可與PC端的活動海報相呼應(yīng)。（3）店招所用文字、色彩、圖片素材等元素要簡潔明了突出主題，避免雜亂無章。知識鏈接活動1∣設(shè)計店招設(shè)計步驟參考：（1）店招設(shè)計風(fēng)格定位。結(jié)合店鋪PC端促銷活動海報，選定相關(guān)配色；以及文案信息。（2）確定店招的構(gòu)圖方法。受手機端屏幕顯示影響，店招實際展示區(qū)域偏上，在整體排版中，畫面下方可留白；店招的設(shè)計可采用左右結(jié)構(gòu)的構(gòu)圖方法。左邊放上處理好的商品圖片，商品圖打開“項目6”→“6.2.1素材”圖片，右邊編排擺放好文字。與PC端不同，手機端店招左側(cè)已有店鋪名稱，可不必再做文字重復(fù)。如圖6.2.2效果所示?；顒訉嵤┗顒?∣

設(shè)計店招設(shè)計步驟參考：（3）設(shè)計文字背景的色塊效果。利用形狀工具繪制色塊，并根據(jù)配色方案，為背景色塊填色，顏色選擇與背景色彩色相對比相差150度左右強烈對比色的玫紅色；并給色塊添加陰影等效果。利用剪切蒙版等工具在色塊之上創(chuàng)建圖形，增加畫面動感效果。為方便瀏覽，店招圖下面空白部分暫不做截圖展示。如圖6.2.3效果所示?；顒訉嵤┗顒?∣設(shè)計店招設(shè)計步驟參考：（4）編排和文字設(shè)計。文字信息簡單突出主題即可。根據(jù)配色方案，為標(biāo)題文字填色，文字做描邊、陰影，增加文字的視覺效果；“年終大促”選擇商品顏色中的黃色，突出重要信息的同時不失色彩風(fēng)格的統(tǒng)一。如圖6.2.4效果所示。活動實施

活動1∣設(shè)計店招

設(shè)計步驟參考：（5）添加點綴元素增加畫面感。手機端店招設(shè)計完成。如圖6.2.5效果所示?；顒訉嵤┗顒?∣設(shè)計店招活動評價活動1∣設(shè)計店招

通過本次活動，小可掌握了店招的設(shè)計，包括如何進行合理的構(gòu)圖布局，選用商品圖片或者文字，文字編排與設(shè)計能有效吸引注意力，整體顏色搭配效果好。嘗試給該店鋪設(shè)計新春活動的手機端店招，要求色彩搭配合理，畫面風(fēng)格統(tǒng)一。活動拓展活動1∣設(shè)計店招內(nèi)容導(dǎo)航任務(wù)2∣裝修手機端淘寶店鋪首頁

活動1設(shè)計店招

活動2設(shè)計焦點圖

活動3設(shè)計優(yōu)惠券

活動4設(shè)計分類圖

手機店鋪的店招已經(jīng)設(shè)計好，接下來要小可要根據(jù)店鋪活動設(shè)計焦點圖。什么是焦點圖？焦點圖在設(shè)計的過程當(dāng)中，需要注意哪些問題呢？讓我們和小可一起學(xué)習(xí)一下吧?；顒颖尘盎顒幽繕?biāo)了解手機端店鋪焦點圖的構(gòu)圖和設(shè)計方法?；顒?∣設(shè)計焦點圖焦點圖就是手機端店鋪banner圖。焦點圖的設(shè)計是否美觀合理，不僅直接影響了店鋪的風(fēng)格，而且還會影響店鋪的視覺營銷作用。如圖6.2.8效果所示。知識鏈接活動2∣設(shè)計焦點圖焦點圖設(shè)計時要注意以下幾點：①背景要襯托主題、配色合理，切勿太過復(fù)雜。②構(gòu)圖要突出賣點，商品主體建議占圖片50%以上，整體呈現(xiàn)飽滿效果，避免留白過多。③文字應(yīng)占據(jù)核心位置，字體不要太小，字體數(shù)量及顏色切勿太多，容易導(dǎo)致畫面感雜亂。知識鏈接活動2∣設(shè)計焦點圖

焦點圖文件尺寸及要求:①建議尺寸寬度750px，高度200px~950px之間。可以根據(jù)廣告內(nèi)容自定義；若是輪播圖，要求同一組內(nèi)圖片尺寸相同。支持格式：jpg、png。②與PC端橫屏瀏覽模式相反，手機端瀏覽模式為豎屏，在設(shè)計焦點圖時要充分考慮顯示狀態(tài)，避免圖片高度過小，影響展示效果。知識鏈接活動2∣設(shè)計焦點圖設(shè)計步驟參考：(1）確定焦點圖構(gòu)圖法。尺寸為750px×950px的豎式構(gòu)圖；打開“項目6”→“6.2.2素材”圖片，文案放置畫面上方，文字內(nèi)容突出主題活動即可,如圖6.2.9效果所示?；顒訉嵤┗顒?∣設(shè)計焦點圖

設(shè)計步驟參考：（2）確定配色方案。背景選擇淺色系，突出夏季清爽的視覺效果。結(jié)合商品本身的顏色利用形狀工具繪制輔助色塊，增加畫面協(xié)調(diào)感。用鋼筆工具為背景添加點綴元素，防止畫面感單一；突出色選擇商品的互補色藍色；符合夏季的視覺感受。如圖6.2.10效果所示?；顒訉嵤┗顒?∣設(shè)計焦點圖設(shè)計步驟參考：（3）文字排版。對主副標(biāo)題的字體和大小進行調(diào)整，為突出“折扣”信息；在下方繪制圖形，添加浮雕效果，使該文字部分的畫面更立體。如下6.2.11效果所示?；顒訉嵤?/p>

活動2∣設(shè)計焦點圖

活動評價活動2∣設(shè)計焦點圖

通過本次活動，小可掌握了焦點圖的設(shè)計要點，包括構(gòu)圖布局合理、文字編排與設(shè)計有吸引力、商品美化與處理效果好、細(xì)節(jié)元素的設(shè)計有創(chuàng)新、整體搭配效果好。

為店鋪的夏季大促活動設(shè)計兩張焦點圖，打開商品素材圖“項目6”→“拉桿箱素材”中選擇。用于手機端首頁輪播展示。根據(jù)店鋪活動自定義尺寸；促銷活動文案清晰，主題突出?；顒油卣够顒?∣設(shè)計焦點圖內(nèi)容導(dǎo)航任務(wù)2∣裝修手機端淘寶店鋪首頁

活動1設(shè)計店招

活動2設(shè)計焦點圖

活動3設(shè)計優(yōu)惠券

活動4設(shè)計分類圖

為了更好的回饋新老客戶，以及刺激消費者的購買欲望，店鋪決定在促銷活動期間發(fā)放優(yōu)惠券。為搭配店鋪活動風(fēng)格，需要小可為店鋪活動單獨設(shè)計優(yōu)惠券。在設(shè)計和操作時需要注意哪些問題呢？和小可一起來學(xué)習(xí)一下吧?；顒颖尘盎顒幽繕?biāo)了解手機優(yōu)惠券的構(gòu)圖和設(shè)計方法，以及優(yōu)惠券的上傳方式?；顒?∣設(shè)計優(yōu)惠券店鋪優(yōu)惠券，有利于促進客戶粘性，以及增加店鋪的交易量。優(yōu)惠券需要在【賣家中心】—【軟件服務(wù)】—【定制服務(wù)】—【服務(wù)市場】訂購使用。知識鏈接活動3∣設(shè)計優(yōu)惠券優(yōu)惠券設(shè)計時，要做到以下幾點：①信息簡潔明了，文字顏色與背景色要有所區(qū)分。②切勿將多個優(yōu)惠信息放置一張圖內(nèi)，會使畫面感雜亂，且重點無法突出。③占屏空間要合理，優(yōu)惠券圖片高度尺寸不易過大?！久李伹袌D】模塊建議圖片寬度750px，高度335px-2500px。支持格式；jpg、png。優(yōu)惠券可根據(jù)信息設(shè)定高度尺寸。知識鏈接活動3∣設(shè)計優(yōu)惠券設(shè)計步驟參考：（1）確定優(yōu)惠券構(gòu)圖法。店鋪發(fā)放了兩張優(yōu)惠券，尺寸為750px×340px的橫版構(gòu)圖；借助參考線，左右各放置一張，文字內(nèi)容突出主題活動即可。2）確定配色方案。背景選擇暗紅色，營造喜慶紅包的視覺效果；邊緣選用的互補色藍色，增加畫面沖擊力。防止畫面顏色過多，影響視覺效果；文案底色選用白色。如圖6.2.13效果所示。活動3∣設(shè)計優(yōu)惠券活動實施設(shè)計步驟參考：（3）文字排版。對字體的大小和粗細(xì)進行調(diào)整，突出“優(yōu)惠面值”。并添加相應(yīng)宣傳文案，使文字部分更醒目。如圖6.2.14效果所示。知識鏈接活動3∣設(shè)計優(yōu)惠券設(shè)計步驟參考：（4）調(diào)整文字排列方式（點擊菜單：圖層→對齊→左邊），對文字內(nèi)容進行分組，如圖2.2.55所示?；顒訉嵤┗顒?∣設(shè)計優(yōu)惠券設(shè)計步驟參考：（5）將設(shè)計好的優(yōu)惠券進行上傳。把店鋪裝修升級成智能版后，需要借助智能版【圖文類】—【美顏切圖】模塊進行操作。如圖6.2.16效果所示。將設(shè)計好優(yōu)惠券上傳后，點擊【添加熱區(qū)】。如圖6.2.17效果所示。活動實施活動3∣設(shè)計優(yōu)惠券

設(shè)計步驟參考：（6）為優(yōu)惠券不同分區(qū)添加鏈接。將設(shè)計好優(yōu)惠券上傳后，點擊【添加熱區(qū)】。拖拽出所需區(qū)域的相應(yīng)大小。要添加新熱區(qū)，可點擊垃圾桶旁邊的復(fù)制圖標(biāo)，即可復(fù)制出等大的熱區(qū)范圍?；蛘唿c擊【添加熱區(qū)】，點擊紅色區(qū)域均可添加連接，如圖6.2.18效果所示?；顒訉嵤┗顒?∣設(shè)計優(yōu)惠券

設(shè)計步驟參考：（7）完成優(yōu)惠券上傳。進入鏈接頁面后，選擇【優(yōu)惠券】。下方會出現(xiàn)訂制好的優(yōu)惠券信息，設(shè)計優(yōu)惠券時要根據(jù)店鋪優(yōu)惠券數(shù)量的實際情況而定。勾選優(yōu)惠信息，點擊【確定】。如圖6.2.19效果所示?；顒訉嵤┗顒?∣設(shè)計優(yōu)惠券

活動評價活動3∣設(shè)計優(yōu)惠券通過本活動的學(xué)習(xí)，小可掌握了優(yōu)惠券的設(shè)計要點，包括構(gòu)圖布局合理，選用商品圖片或者文字，文字編排與設(shè)計能有效吸引注意力，整體顏色搭配效果好。

為店鋪設(shè)計優(yōu)惠券：5元無門檻優(yōu)惠券；滿199減10、滿299減20、滿799減100優(yōu)惠券。要求主題突出；構(gòu)圖合理，配色運用得當(dāng)?；顒油卣够顒?∣設(shè)計優(yōu)惠券內(nèi)容導(dǎo)航任務(wù)2∣裝修手機端淘寶店鋪首頁

活動1設(shè)計店招

活動2設(shè)計焦點圖

活動3設(shè)計優(yōu)惠券

活動4設(shè)計分類圖活動4∣設(shè)計分類圖分類圖在手機店鋪首頁十分重要，分類圖可以快速引導(dǎo)消費者者瀏覽更多的商品，增加轉(zhuǎn)化率。那么分類圖在設(shè)計的時候，需要注意哪些問題呢？和小可一起來學(xué)習(xí)一下吧。活動背景活動目標(biāo)了解手機端分類圖的構(gòu)圖和設(shè)計方法。

分類圖有利于客戶更快速的瀏覽商品。分類圖布局要合理，文字要統(tǒng)一；可以圖文并茂，也可以用文字表達，突出寶貝分類即可。如圖6.2.20、圖6.2.20效果所示。知識鏈接活動4∣設(shè)計分類圖手機端分類圖的設(shè)計：1.圖文分類做到分類清晰；2.畫面整潔、圖文分類的視覺效果好。也要避免圖片切勿太多，造成畫面雜亂。3.用banner結(jié)合圖文展示分類。如圖6.2.22效果所示。知識鏈接活動4∣設(shè)計分類圖設(shè)計步驟參考：（1）確定分類圖的構(gòu)圖方法。圖片尺寸為750px×400px。根據(jù)店鋪現(xiàn)有分類，借助輔助線創(chuàng)建四個分區(qū)。如圖6.2.23效果所示?；顒訉嵤┗顒?∣設(shè)計分類圖設(shè)計步驟參考：（2）分類圖的風(fēng)格定位。打開“項目6”→“分類圖素材”圖片，結(jié)合商品素材，選定相關(guān)配色。由于畫面中顏色較多，在圖片上做色彩疊加；從而達到色調(diào)統(tǒng)一的視覺效果。如圖6.2.24效果所示?；顒訉嵤┗顒?∣設(shè)計分類圖設(shè)計步驟參考：（3）文字排版。對字體的大小和粗細(xì)進行調(diào)整，并穿插字母使畫面飽滿。如圖6.2.25效果所示。活動實施活動4∣設(shè)計分類圖設(shè)計步驟參考：（4）完善細(xì)節(jié)部分。利用形狀工具繪制點綴元素，通過互補色增加畫面的動感，并完成最終效果。如圖6.2.26效果所示?；顒訉嵤┗顒?∣設(shè)計分類圖設(shè)計步驟參考：（5）上傳分類圖。分類圖上傳方法和優(yōu)惠券相同；在上傳分類圖之前，需要先把店鋪商品進行分類。在上傳分類圖時就可以選擇相應(yīng)的寶貝分類，并添加連接。如圖6.2.27效果所示?；顒訉嵤┗顒?∣設(shè)計分類圖通過本活動的學(xué)習(xí)，小可掌握了分類圖的設(shè)計要點，包括構(gòu)圖布局合理，選用商品圖片或者文字，文字編排與設(shè)計能有效吸引注意力，整體顏色搭配效果好活動評價活動4∣設(shè)計分類圖

為手機店鋪設(shè)計分類圖：根據(jù)店鋪活動情況自定義尺寸；要求主題突出，構(gòu)圖合理、配色運用得當(dāng)。活動拓展活動4∣設(shè)計分類圖任務(wù)3∣設(shè)計手機端商品詳情頁美工團隊前期已經(jīng)設(shè)計了PC端的商品詳情頁，手機端詳情頁的制作是增加寶貝和店鋪加權(quán)點之一。隨著手機端店鋪整體頁面裝修逐步完善，我們需要了解PC端的詳情頁如何導(dǎo)入手機端，以及如何設(shè)計手機端詳情頁。情景設(shè)計任務(wù)分解在前面的學(xué)習(xí)任務(wù)中，我們已經(jīng)掌握了詳情頁的設(shè)計流程。接下來除了將PC端的詳情頁導(dǎo)入手機端之外；我們還要開始著手對手機端商品詳情頁進行設(shè)計。本任務(wù)主要為：①導(dǎo)入電腦端詳情;②生成詳情模板任務(wù)3∣設(shè)計手機端商品詳情頁內(nèi)容導(dǎo)航任務(wù)3∣設(shè)計手機端商品詳情頁

活動1導(dǎo)入電腦端詳情

活動2生成詳情模板活動1∣

導(dǎo)入電腦端詳情

實習(xí)生小可在前面的學(xué)習(xí)中已經(jīng)掌握了商品詳情頁的設(shè)計方法；公司需要她將電腦端的詳情頁導(dǎo)入到手機端，從而帶給客戶更好的購買體驗。接下來一起和小可學(xué)習(xí)如何將電腦端詳情頁導(dǎo)入手機端吧。活動背景活動目標(biāo)了解電腦端詳情頁導(dǎo)入手機端的操作方法電腦端詳情導(dǎo)入手機端之前需要注意，該商品的詳情頁中的圖文信息是否適合手機端的頁面展示。比如：（1）布局的合理性，分類結(jié)構(gòu)明確。（2）配色的運用，手機端視覺受限，顏色盡量鮮亮，如PC端頁面風(fēng)格為深色系，在導(dǎo)入時則需要考慮，最終顯示效果是否可以引起消費者的愉悅性。知識鏈接活動1∣

導(dǎo)入電腦端詳情設(shè)計步驟參考：1）進入詳情裝修頁面。點擊【賣家中心】—【店鋪管理】—【手機淘寶店鋪】—【立即裝修】；點擊【情詳裝修】如圖6.3.1效果所示。活動實施活動1∣

導(dǎo)入電腦端詳情設(shè)計步驟參考：（2）導(dǎo)入電腦端詳情。點擊要導(dǎo)入寶貝的【裝修詳情】；進入頁面后點擊【導(dǎo)入】—【導(dǎo)入詳情】—【導(dǎo)入電腦端詳情】。如圖6.3.2、圖6.3.3效果所示?；顒訉嵤┗顒?∣

導(dǎo)入電腦端詳情設(shè)計步驟參考：（3）完成導(dǎo)入。根據(jù)情況進行選擇，點擊【確認(rèn)】。電腦端詳情頁就導(dǎo)入完成了。如下圖6.3.4效果所示。活動實施活動1∣

導(dǎo)入電腦端詳情設(shè)計步驟參考：（4）PC端導(dǎo)入方法。除了在裝修頁面導(dǎo)入之外，PC端在上架商品的時，也可以直接導(dǎo)入手機端。如圖6.3.5效果所示。活動實施活動1∣

導(dǎo)入電腦端詳