《網(wǎng)店美工》微課版PPT課件

1、“新商科”電子商務(wù)系列規(guī)劃教材Copyright童海君編書團隊Contents Page目錄頁 2 任務(wù)1 產(chǎn)品調(diào)研分析與文案策劃任務(wù)2 PC端詳情頁設(shè)計任務(wù)3 移動端詳情頁設(shè)計Contents Page目錄頁 3 任務(wù)1 6.1.1 產(chǎn)品調(diào)研分析6.1.2 文案策劃6.1.3 解析詳情頁設(shè)計思路任務(wù)2 6.2.1 頁面內(nèi)容布局6.2.2 PC端詳情頁設(shè)計 任務(wù)3 6.3.1 頁面內(nèi)容布局6.3.2 移動端詳情頁切片制作6.3.3 神筆高效率制作無線詳情頁 4 【項目導(dǎo)圖】 項目介紹【本項目重點難點】 頁布局的掌握；詳情頁文案策劃能力；寶貝焦點圖的設(shè)計構(gòu)思；PC端和移動端詳情頁的制作技能掌握。

2、 5 【引例 】 超市都是自選銷售模式，并將超級市場和折扣店的經(jīng)營優(yōu)勢合為一體的滿足顧客一次性購足需求的零售業(yè)態(tài)，合理布局和科學(xué)的商品陳列對于吸引顧客具有極為重要的作用。通過新穎，活潑，更具吸引力的賣場布局和商品陳列，可以直接或間接地提高門店的營業(yè)效率。 Contents Page目錄頁 6 任務(wù)1 產(chǎn)品調(diào)研分析與文案策劃任務(wù)2 PC端詳情頁設(shè)計任務(wù)3 移動端詳情頁設(shè)計 7 .網(wǎng)店美工網(wǎng)店美工6.1.1 產(chǎn)品調(diào)研分析產(chǎn)品調(diào)研分析產(chǎn)品調(diào)研分析內(nèi)容內(nèi)容記錄記錄產(chǎn)品的性能產(chǎn)品的性能1.產(chǎn)品的性能有哪些2.產(chǎn)品最突出的性能是什么3.產(chǎn)品最適合消費者需求的性能是什么4.產(chǎn)品的哪些性還不能滿足消費者需求產(chǎn)

3、品的質(zhì)量產(chǎn)品的質(zhì)量1.產(chǎn)品是否屬于高質(zhì)量的產(chǎn)品2.消費者對產(chǎn)品質(zhì)量的滿意程度如何3.產(chǎn)品的質(zhì)量能繼續(xù)保持嗎4.產(chǎn)品的質(zhì)量有無繼續(xù)提高的可能產(chǎn)品的價格產(chǎn)品的價格1.產(chǎn)品價格在同類產(chǎn)品中居于什么檔次2.產(chǎn)品的價格與產(chǎn)品質(zhì)量的配合程度如何3.消費者對產(chǎn)品價格的認識如何產(chǎn)品的賣點產(chǎn)品的賣點1.產(chǎn)品獨特賣點是什么2.它無我有的特點是什么產(chǎn)品的材質(zhì)產(chǎn)品的材質(zhì)1.產(chǎn)品的主要原料是什么2.產(chǎn)品在材質(zhì)上有無特別之處3.消費者對產(chǎn)品材質(zhì)的認識如何產(chǎn)品生產(chǎn)工藝產(chǎn)品生產(chǎn)工藝1.產(chǎn)品通過什么樣的工藝生產(chǎn)2.在生產(chǎn)工藝上有無特別之處3.消費者是否喜歡通過這種工藝生產(chǎn)的產(chǎn)品產(chǎn)品外觀與包裝產(chǎn)品外觀與包裝1.產(chǎn)品的外觀與包裝是

4、否與產(chǎn)品的質(zhì)量、價格和形象相稱2.產(chǎn)品在外觀和包裝上有沒有缺欠3.外觀和包裝在貨架上的同類產(chǎn)品中是否醒目4.外觀和包裝對消費者是否具有吸引力5.消費者對產(chǎn)品外觀和包裝的評價怎么樣與同類產(chǎn)品比較與同類產(chǎn)品比較1.1.在性能上有什么優(yōu)勢，有什么不足在性能上有什么優(yōu)勢，有什么不足2.2.在質(zhì)量上有什么優(yōu)勢，有什么不足在質(zhì)量上有什么優(yōu)勢，有什么不足3.3.在價格上有什么優(yōu)勢，有什么不足在價格上有什么優(yōu)勢，有什么不足4.4.在材質(zhì)上有什么優(yōu)勢，有什么不足在材質(zhì)上有什么優(yōu)勢，有什么不足5.5.在工藝上有什么優(yōu)勢，有什么不足在工藝上有什么優(yōu)勢，有什么不足6.6.在消費者認知和購買上有什么優(yōu)勢，有什么在消費者

5、認知和購買上有什么優(yōu)勢，有什么不足不足 在為寶貝設(shè)計詳情頁之前，我們首先要對產(chǎn)品進行調(diào)研分析，通過徹底了解寶貝后，再根據(jù)其特點來設(shè)計寶貝詳情頁文案，讓買家通過寶貝詳情頁能夠清楚了解產(chǎn)品的特性和賣點，主要從8個方面來分析，如圖表6-1 產(chǎn)品調(diào)研分析表。表6-1 產(chǎn)品調(diào)研分析表 8 6.1.1 產(chǎn)品調(diào)研分析 在為寶貝設(shè)計詳情頁之前，我們首先要對產(chǎn)品進行調(diào)研分析，通過徹底了解寶貝后，再根據(jù)其特點來設(shè)計寶貝詳情頁文案，讓買家通過寶貝詳情頁能夠清楚了解產(chǎn)品的特性和賣點，主要從8個方面來分析，如圖表6-1 產(chǎn)品調(diào)研分析表。產(chǎn)品調(diào)研分析產(chǎn)品調(diào)研分析內(nèi)容內(nèi)容記錄記錄產(chǎn)品的性能產(chǎn)品的性能1.產(chǎn)品的性能有哪些2.

6、產(chǎn)品最突出的性能是什么3.產(chǎn)品最適合消費者需求的性能是什么4.產(chǎn)品的哪些性還不能滿足消費者需求產(chǎn)品的質(zhì)量產(chǎn)品的質(zhì)量1.產(chǎn)品是否屬于高質(zhì)量的產(chǎn)品2.消費者對產(chǎn)品質(zhì)量的滿意程度如何3.產(chǎn)品的質(zhì)量能繼續(xù)保持嗎4.產(chǎn)品的質(zhì)量有無繼續(xù)提高的可能產(chǎn)品的價格產(chǎn)品的價格1.產(chǎn)品價格在同類產(chǎn)品中居于什么檔次2.產(chǎn)品的價格與產(chǎn)品質(zhì)量的配合程度如何3.消費者對產(chǎn)品價格的認識如何產(chǎn)品的賣點產(chǎn)品的賣點1.產(chǎn)品獨特賣點是什么2.它無我有的特點是什么產(chǎn)品的材質(zhì)產(chǎn)品的材質(zhì)1.產(chǎn)品的主要原料是什么2.產(chǎn)品在材質(zhì)上有無特別之處3.消費者對產(chǎn)品材質(zhì)的認識如何產(chǎn)品生產(chǎn)工藝產(chǎn)品生產(chǎn)工藝1.產(chǎn)品通過什么樣的工藝生產(chǎn)2.在生產(chǎn)工藝上有無特

7、別之處3.消費者是否喜歡通過這種工藝生產(chǎn)的產(chǎn)品產(chǎn)品外觀與包裝產(chǎn)品外觀與包裝1.產(chǎn)品的外觀與包裝是否與產(chǎn)品的質(zhì)量、價格和形象相稱2.產(chǎn)品在外觀和包裝上有沒有缺欠3.外觀和包裝在貨架上的同類產(chǎn)品中是否醒目4.外觀和包裝對消費者是否具有吸引力5.消費者對產(chǎn)品外觀和包裝的評價怎么樣與同類產(chǎn)品比較與同類產(chǎn)品比較1.1.在性能上有什么優(yōu)勢，有什么不足在性能上有什么優(yōu)勢，有什么不足2.2.在質(zhì)量上有什么優(yōu)勢，有什么不足在質(zhì)量上有什么優(yōu)勢，有什么不足3.3.在價格上有什么優(yōu)勢，有什么不足在價格上有什么優(yōu)勢，有什么不足4.4.在材質(zhì)上有什么優(yōu)勢，有什么不足在材質(zhì)上有什么優(yōu)勢，有什么不足5.5.在工藝上有什么優(yōu)勢

8、，有什么不足在工藝上有什么優(yōu)勢，有什么不足6.6.在消費者認知和購買上有什么優(yōu)勢，有什么不足在消費者認知和購買上有什么優(yōu)勢，有什么不足 9 6.1.2 文案策劃詳情頁文案寫作的范疇詳情頁文案寫作的范疇圖6-1 標(biāo)題文案 圖6-2 屬性文案 10 6.1.2 文案策劃頁面詳細文案設(shè)計頁面詳細文案設(shè)計 11 6.1.2 文案策劃詳情頁文案編寫中常見的問題詳情頁文案編寫中常見的問題圖6-4 無邏輯性標(biāo)題（“/”符號標(biāo)題） 圖6-5 含有“預(yù)售”字樣的標(biāo)題 12 6.1.2 文案策劃內(nèi)頁文案編寫遵循符合商品營銷的內(nèi)頁文案編寫遵循符合商品營銷的5 5大環(huán)節(jié)大環(huán)節(jié)1 1）引發(fā)興趣環(huán)節(jié)。）引發(fā)興趣環(huán)節(jié)。2

9、2）激發(fā)潛在需求環(huán)節(jié)。）激發(fā)潛在需求環(huán)節(jié)。 3 3）營銷引導(dǎo)環(huán)節(jié)（從信任到信賴）。）營銷引導(dǎo)環(huán)節(jié)（從信任到信賴）。4 4）深度營銷環(huán)節(jié)（從信賴到想擁有）。）深度營銷環(huán)節(jié)（從信賴到想擁有）。5 5）替客戶做決定環(huán)節(jié)。）替客戶做決定環(huán)節(jié)。有一句話是這樣說的：有一句話是這樣說的：“有道無術(shù)有道無術(shù), ,術(shù)尚可求術(shù)尚可求, ,有術(shù)無道有術(shù)無道, ,止于術(shù)止于術(shù)”。意思是說有方法理論但是。意思是說有方法理論但是沒有技術(shù)，技術(shù)尚且是可以學(xué)到和培養(yǎng)，如果只有技術(shù)但缺少理論方向的支持，則只能停留沒有技術(shù)，技術(shù)尚且是可以學(xué)到和培養(yǎng)，如果只有技術(shù)但缺少理論方向的支持，則只能停留于技術(shù)層次，個人發(fā)展很容易到瓶頸，無

10、法進一步發(fā)展，只能止步不前。網(wǎng)上有些人把美工于技術(shù)層次，個人發(fā)展很容易到瓶頸，無法進一步發(fā)展，只能止步不前。網(wǎng)上有些人把美工分為技術(shù)型美工和運營型美工，這個也是美工自我發(fā)展的一個過程。從營銷學(xué)的角度分析，分為技術(shù)型美工和運營型美工，這個也是美工自我發(fā)展的一個過程。從營銷學(xué)的角度分析，詳情頁的設(shè)計思路基本上遵循以詳情頁的設(shè)計思路基本上遵循以上上五部曲五部曲。 13 6.1.2 文案策劃焦點圖激發(fā)潛在需求好評圖 精彩文案Contents Page目錄頁 14 任務(wù)1 產(chǎn)品調(diào)研分析與文案策劃任務(wù)2 PC端詳情頁設(shè)計任務(wù)3 移動端詳情頁設(shè)計 15 6.2.1 頁面內(nèi)容布局 產(chǎn)品價值+消費信任=下單，詳

11、情頁上半部分訴說產(chǎn)品價值，后半部分培養(yǎng)顧客的消費信任感。對于消費信任感不光通過各種證書，品牌認證的圖片來樹立。使用正確的顏色，字體，還有排版結(jié)構(gòu)，這些對贏得顧客消費信任感也會起到重要的作用。詳情頁每一塊組成都有它的價值，都要經(jīng)過仔細的推敲和設(shè)計。 16 6.2.1 頁面內(nèi)容布局 17 6.2.2 PC端詳情頁設(shè)計平臺平臺詳情頁建議圖片寬度詳情頁建議圖片寬度詳情頁單張圖片高度詳情頁單張圖片高度淘寶淘寶750px（像素）1500px天貓商城天貓商城790px（像素）1500px京東商城京東商城790px（像素）自定義AliexpressAliexpress（速賣通）（速賣通）790px（像素）自定

12、義 在各大電商平臺的寶貝詳情頁中，都有各自不同的詳情頁圖片在各大電商平臺的寶貝詳情頁中，都有各自不同的詳情頁圖片尺寸和標(biāo)準，以下為主流平臺詳情頁圖片建議尺寸尺寸和標(biāo)準，以下為主流平臺詳情頁圖片建議尺寸 18 6.2.2 PC端詳情頁設(shè)計1.1.模板設(shè)計模板設(shè)計步驟步驟1 1 打開Photoshop軟件，選擇“文件”|“新建”菜單項，新建一個750像素*600像素空白文檔，將文件保存為“四件套詳情.psd”。步驟步驟2 2 選擇工具箱中的“橫排文字工具”，輸入相應(yīng)的文本“商品在展示”及“Commodity Display”，設(shè)置字體為“微軟雅黑”，顏色為“3ca5b8”，如圖6-12左邊部分所示

13、。步驟步驟3 3 選擇工具箱中的“矩形工具”，繪制一個顏色為“3ca5b8”的矩形，如圖如圖6-12右邊部分所示。圖6-12 繪制矩形 19 6.2.2 PC端詳情頁設(shè)計步驟步驟4 4 選擇“文件”| “打開”菜單項，選擇素材“樹葉.png”圖像文件，將其拖曳到“四件套詳情”文檔中。 步驟步驟5 5 選擇工具箱中的“橫排文字工具”，輸入“SHOWS”，設(shè)置字體為“微軟雅黑”，顏色為“白色”,如圖6-13所示。圖6-13 拖曳圖片并輸入文字 20 6.2.2 PC端詳情頁設(shè)計步驟步驟6 6 按住“Shift”鍵不放，選擇這5個圖層面板上的“創(chuàng)建新組”按鈕，并雙擊該組的名稱，為組重新命名，如圖6-

14、14所示。圖6-14 創(chuàng)建新組 21 6.2.2 PC端詳情頁設(shè)計步驟步驟7 7 重復(fù)步驟2步驟6，創(chuàng)建另外兩個新組，即可完成描述模板的設(shè)計，如圖6-15所示 (快捷操作方式：復(fù)制“商品展示”組（Ctrl+J)，再把另外兩個副本往下拉，再修改文字圖層）。圖6-15 創(chuàng)建其他新組 22 6.2.2 PC端詳情頁設(shè)計2.2.詳情頁局部模塊設(shè)計詳情頁局部模塊設(shè)計步驟步驟1 1 先將商品參數(shù)和相關(guān)售后兩組內(nèi)容移至文檔底部，選擇“文件”|“打開”菜單項。打開“四件套.jpg”圖片圖像文件，將其拖曳到“商品展示”下方，并對其進行適當(dāng)?shù)匿伔?。如圖6-16所示。 圖6-16拖曳圖片 23 6.2.2 PC端詳

15、情頁設(shè)計關(guān)于調(diào)整文檔高度，在制作過程中如果發(fā)現(xiàn)文檔的高度不夠所以使用“裁剪工具”或“圖像”|“畫布大小”菜單命令來進行調(diào)整，如圖6-17調(diào)整文檔高度。圖6-17調(diào)整文檔高度 24 6.2.2 PC端詳情頁設(shè)計步驟步驟2 2 選擇工具箱中的“橫排文字工具”，輸入相應(yīng)的文本，并設(shè)置字體為“微軟雅黑”。選擇文字圖層，右鍵單擊，選擇圖層樣式，在選擇投影，將投影比例調(diào)整到14%，如圖6-18，圖6-19所示。圖6-18 輸入文本圖6-19 輸入文本和設(shè)置投影 25 6.2.2 PC端詳情頁設(shè)計步驟步驟3 3 選擇“文件”|“打開”菜單項，打開“四件套小鏟.jpg”圖像文件，將其拖曳到“商品參數(shù)”下方，并

16、對其進行適當(dāng)?shù)目s放，如圖6-20所示。圖6-20 商品參數(shù)中放入商品 26 6.2.2 PC端詳情頁設(shè)計步驟步驟4 4 使用工具箱中的“直線工具”，在撥浪鼓周圍繪制尺寸測量線條和圓形，其顏色為“#0a9c9c”,選擇工具箱中的“文字”|“橫排文字工具”，輸入相應(yīng)的商品尺寸數(shù)值，其字體為“微軟雅黑”，如圖6-21所示。圖6-21 繪制圖形輸入文本 27 6.2.2 PC端詳情頁設(shè)計步驟步驟5 5 重復(fù)步驟3和步驟4，插入“小鏟.jpg”“三尺耙.jpg”“叉子.jpg”圖片，并輸入說明文字，其字體為“微軟雅黑”，如圖6-22所示。圖6-22 拖曳圖片和輸入文本 28 6.2.2 PC端詳情頁設(shè)計

17、步驟步驟6 6 選擇“文件”“打開”菜單項，打開“貨車.jpg”圖像文件，將其拖曳到“關(guān)于售后”下方，并使用自由變換（Ctrl+T）對其進行適當(dāng)?shù)目s放，如圖6-23所示。圖6-23 拖曳并調(diào)整圖片 29 6.2.2 PC端詳情頁設(shè)計3.3.詳情頁切片詳情頁切片步驟步驟1 1 打開photoshop軟件，選擇工具箱中的“切片工具”，按住鼠標(biāo)左鍵不放，根據(jù)需要求繪制合適大小的切片，如圖6-25所示。圖6-25 繪制切片 30 6.2.2 PC端詳情頁設(shè)計步驟步驟2 2 如果發(fā)現(xiàn)繪制的切片大小不合適，可以選擇工具箱中的“切片選擇工具”，通過搖曳切片四周的線條來調(diào)整大小，如圖6-26所示。圖6-26

18、調(diào)整切片大小 31 6.2.2 PC端詳情頁設(shè)計步驟步驟3 3 重復(fù)步驟1，繪制完其他的切片，如圖6-27所示。圖6-27 繪制其他切片 32 6.2.2 PC端詳情頁設(shè)計 圖6-28 “存儲為web所用格式”對話框步驟步驟4 4 再選擇菜單“文件“/“存儲為web所用格式”對話框中，設(shè)置圖片格式為“JPEG”，“品質(zhì)”為80，單擊“存儲”按鈕，如圖6-28所示。步驟步驟5 5 在彈出的“將優(yōu)化結(jié)果存儲為”對話框中，設(shè)置格式為“HTML和圖像”選項，如圖6-29所示。圖6-29 “將優(yōu)化結(jié)果存儲為”對話框步驟步驟6 6 單擊“保存”按鈕，即可將文件存儲為HTML格式。Contents Page

19、目錄頁 33 任務(wù)1 產(chǎn)品調(diào)研分析與文案策劃任務(wù)2 PC端詳情頁設(shè)計任務(wù)3 移動端詳情頁設(shè)計 34 6.3.1頁面內(nèi)容布局圖6-30 手機店鋪版面布局頁面內(nèi)容布局是指整個手機頁面中各種元素的比重分配與擺放位置。按照不同店鋪的風(fēng)格，不同的主題就有不同的編排方式，只要是能呈現(xiàn)主題風(fēng)格和方便瀏覽者閱讀，就是一個好的布局方式。 35 6.3.2 移動端詳情頁切片制作移動端詳情頁有尺寸限制，如果直接上傳尺寸不合的圖片會上傳失敗，如圖6-31所示。移動端寬度480-620px像素，高度小于等于960px像素，格式為JPG/GIF/PNG。我們打開PC端的詳情頁，點擊圖像查看圖像大小，可以發(fā)現(xiàn)它的寬度是75

20、0px，如圖6-32所示，不滿足移動端的要求。圖6-32 圖片上傳失敗圖6-33修改圖像大小 36 6.3.2 移動端詳情頁切片制作步驟步驟1 1：我們把圖像大小的寬度設(shè)為：我們把圖像大小的寬度設(shè)為480px480px（適應(yīng)平板尺寸建議（適應(yīng)平板尺寸建議620px620px），如圖），如圖6-336-33所示，把下面的所示，把下面的約束比例勾起來，約束比例勾起來，PSPS會自動調(diào)節(jié)圖像高度，點擊確定。會自動調(diào)節(jié)圖像高度，點擊確定。步驟步驟2 2：使用切片工具前，我們先拉參考線。點開視圖，選擇標(biāo)尺（：使用切片工具前，我們先拉參考線。點開視圖，選擇標(biāo)尺（Ctrl+RCtrl+R）就會出現(xiàn)橫豎的標(biāo)尺。）就會出現(xiàn)橫豎的標(biāo)尺。 圖6-34標(biāo)尺 圖6-35切片 37 6.3.2 移動端詳情頁切片制作步驟步驟3 3：根據(jù)詳情的內(nèi)容和模塊，自己拉好參考線，如圖：根據(jù)詳情的內(nèi)容和模塊，自己拉好參考線，如圖6-356-35所示。所示。步驟步驟4 4：再點擊切片工具，點基于參考線的切片，如圖：再點擊切片工具，點基于參考線的切片，如圖6-366-36所示。所示。 38 6