護膚類商品淘寶詳情頁的制作教案

來源網(wǎng)絡侵權(quán)請聯(lián)系刪除2.4護膚類商品詳情頁的制作教案基本信息課題名稱網(wǎng)店美工課程性質(zhì)專業(yè)拓展課授課教材網(wǎng)店美工授課地點計算機機房授課專業(yè)電子商務專業(yè)授課年級202*級授課形式理實一體、線上線下混合式教學授課學時2學情分析學生特點：學生的形象思維和靈活性較強，能進行知識遷移，但邏輯思維較弱。學習基礎：同學們已經(jīng)學習過《電子商務概論》、《電子商務平臺建設》、《電子商務物流》等電商相關(guān)專業(yè)課程，具有一定的課程基礎，但是大多數(shù)學生對基礎知識掌握不夠扎實。大多數(shù)同學的學習態(tài)度認真，對該課程有興趣。教學目標知識目標1.認識詳情頁制作的要點；2.熟悉護膚品詳情頁的制作。能力目標1.能夠說出詳情頁制作的要點；2.掌握護膚品詳情頁的制作。素質(zhì)目標1.培養(yǎng)自主學習能力以及團隊協(xié)作能力；2.提升職業(yè)認同感，追求卓越的工匠精神，敬業(yè)報國。教學重難點【重點】：詳情頁制作的要點；【難點】：護膚品詳情頁的制作。教學方法與策略在教學過程中我們采用“理論與實踐一體化”的項目教學法。教師引導學生樹立“學習即工作、工作是學習”的思想，在將某一課題以及需要解決的問題或需要完成任務的形式交給學生，由學生自己按照實際工作的完成過程進行工作。其工作過程一般包括：收集信息、制定計劃、實施、檢驗成果和評估總結(jié)。這種教學方式不僅可以改變教師單項傳播的呆板，還可以充分調(diào)動學生的主動性和積極性，發(fā)揮了學生創(chuàng)造性解決問題的能力。教學資源網(wǎng)絡教學資源超星學習通Photoshop軟件其他教學資源多媒體教室課本、教案等文本資料網(wǎng)絡教學視頻教學活動安排（一）課前準備課前內(nèi)容預習教學活動教學手段及設計意圖教師活動學生活動1.發(fā)送討論話題：在超星學習通發(fā)布討論話題：詳情頁制作的要點有哪些？2.發(fā)送資料與作業(yè)反饋：在學習通中將護膚類商品詳情頁的制作的相關(guān)文字及視頻資料發(fā)送到資料庫，并將作業(yè)反饋推送給學生。1.完成老師發(fā)布的討論題，結(jié)合實習經(jīng)驗進行本節(jié)課知識的初印象。2.查閱上一章課后練習的反饋，并預習相關(guān)知識完成對護膚類商品詳情頁的制作的再印象。通過作業(yè)反饋以及課前預習，承上啟下，完成對本節(jié)課內(nèi)容了解。課前準備的流程可以用以下示意圖來表示：（二）課中提升課堂內(nèi)容講解教學活動教學手段及設計意圖教師活動學生活動課堂導入1.發(fā)布簽到二維碼2.發(fā)布課堂作業(yè)與前期預習的評價1.學生完成學習通簽到2.查看前期作業(yè)及預習內(nèi)容的反饋，反思總結(jié)。1.超星學習通平臺2.旨在完成學生考勤并通過復習訂單處理作業(yè)情況以及預習溫故而知新。教學過程一、詳情頁制作要點寶貝詳情頁中的常見板塊包括：收藏關(guān)注+優(yōu)惠券，焦點圖、推薦熱銷商品、商品詳情、模特圖、場景圖、商品細節(jié)圖、同類商品對比圖、買家秀或信譽展示圖、搭配推薦、購物須知、品牌文化簡介等內(nèi)容。詳情頁就像實體店鋪中的導購員，過于死板的信息說明就像是推銷員的態(tài)度過于生硬，會讓用戶產(chǎn)生反感，甚至關(guān)掉詳情頁面。因此，制作詳情頁時，應該做的生動些，切記生硬死板。賣家可以根據(jù)自己店鋪的實際情況選擇詳情頁版塊內(nèi)容。護膚品類商品詳情頁制作時，大多包含這幾部分：關(guān)聯(lián)營銷、商品詳情、專業(yè)商品效果測試以及買家秀等信息。（一）關(guān)聯(lián)營銷關(guān)聯(lián)營銷是爽膚水常用的版塊，爽膚水是護膚開始的第一步，后面會用到精華、面霜、防曬等商品，因此在制作爽膚水詳情頁的時候，賣家一般都會加入精華、面霜、防曬等商品的關(guān)聯(lián)營銷或者是成套商品的關(guān)聯(lián)營銷，如圖2-60所示。設置這種關(guān)聯(lián)營銷后，有相關(guān)需求的用戶會點擊查看，從而提高整個網(wǎng)店的客單價。圖2-60關(guān)聯(lián)營銷（二）商品文字詳情說明區(qū)別于其他商品，護膚類商品制作詳情頁時也會融入商品文字詳細說明，如產(chǎn)地、保質(zhì)期、適用年齡、主要成分等，不同于商品詳情頁中的圖片介紹，這里將所有內(nèi)容集中在一起，更加便于用戶全面了解商品信息，如圖2-61所示。圖2-61商品詳情（三）商品細節(jié)說明爽膚水的細節(jié)說明也呈現(xiàn)出不同的特點，如瓶子材質(zhì)，玻璃材質(zhì)或者塑料材質(zhì)；使用方式，是直接倒取式的還是按壓泵式；商品粘稠度的展示等，如圖2-62至圖2-64所示。這些細節(jié)展示，不僅可以讓用戶了解商品詳情，還可以讓用戶了解商品人性化的設計。有時候僅僅在設計方面的差異性就可以獲取或者流失一個用戶，因此在商品細節(jié)展示方面應該盡可能詳細，并重點突出商品的優(yōu)點。圖2-62商品細節(jié)圖1圖2-63商品細節(jié)圖2圖2-64商品細節(jié)圖3（四）目標用戶與其他商品不同，購買護膚品類商品的用戶通常是帶著保濕、美白、抗皺這些訴求去尋找商品的。如果在詳情頁制作過程中可以設置目標用戶，被用戶選中的機會就會多一些。如圖2-65所示，圖中列舉了這幾類目標用戶，幾乎包含了所有愛美的女性，當用戶看到圖中的目標用戶時，總能從中找到一點自己的影子，購買商品的機會就增大。圖2-65目標用戶（五）商品優(yōu)勢如何抓住用戶的眼球，讓其在琳瑯滿目的爽膚水中選擇賣家的商品，就需要在詳情頁中將商品的優(yōu)勢說明。例如，可以從商品的制作原料、使用效果測試等出發(fā)，如圖2-66、2-67所示。這些數(shù)據(jù)和資料指直接表明商品的科技含量及其功效，也更能說服用戶做出選擇。圖2-66商品優(yōu)勢解析圖2-67專業(yè)商品效果測試（六）使用方法同樣的護膚品使用不同的方法，最終的效果也是不同的。如果能在詳情中加入使用方法，不僅能夠體現(xiàn)品牌的專業(yè)性，而且能更好地幫助用戶使用商品，如圖2-68所示。圖2-68商品使用方法介紹（七）品牌詳情詳情頁中加入品牌簡介，用戶通過對品牌的深入了解，可以增強對商品的信任感。如圖2-69、2-70所示，通過對線下專柜以及品牌發(fā)展歷程的簡介，可以打破用戶對品牌僅僅是“著名品牌”的簡單認知，增強品牌的影響力。圖2-69品牌詳情1圖2-70品牌詳情2至此，護膚品的詳情頁就講完了，賣家只需按照上面講到的知識點在photoshop中將要所需的圖片處理好，然后登錄賣家賬號，進入后臺，運用“神筆”工具制作出詳情頁即可，具體操作，參看項目一相關(guān)內(nèi)容。二、護膚品詳情頁的制作1、新建畫布，建議最初可以先將高度設置為10000像素，在之后作圖中如果畫布不夠可使用［裁剪工具］或菜單欄中“圖像”-“畫布大小”進行高度調(diào)整。圖2-712、將“頭圖背景素材”拖入畫布，縮放到合適大小。圖2-72拖入頭圖背景素材3、新建圖層，使用[選框]工具，在頭圖背景左右各繪制一道相同寬度的黑色矩形，并使用菜單欄中濾鏡-模糊-高斯模糊，參數(shù)開到4以上，做出如圖效果。圖2-73具體效果4、將素材“01”打開，并進行[鋼筆]摳圖，將摳好的產(chǎn)品圖放入頭圖背景上，對產(chǎn)品進行圖層樣式-投影的添加，具體參數(shù)效果如圖。圖2-74具體參數(shù)設置5、添加頭圖海報文案。圖2-75添加文案6、使用[形狀]工具-橢圓工具，繪制一個無填充僅描邊的圓，描邊像素為“3”，繪制完成后，將該圖層進行柵格化，由形狀變?yōu)槠胀▓D層。使用[選框]工具，選取圓形中間部分進行刪除，得到如下效果。圖2-76具體效果7、將該圖層進行復制，注意圖層間的相對位置，寫入文案。頭圖海報制作完成。圖2-77頭圖海報8、使用鋼筆工具繪制如下形狀，顏色填充為“57867d”。圖2-78繪制形狀9、復制一層“步驟7”中的圖層，向上移動10像素，將向下一層的圖層顏色改為漸變，漸變顏色分別為“9e7e59”“ad8f6b”“997752”“ac8f6b”“997752”“ac8f6b”“997752”“ad8f6b”“9e7e59”漸變效果如圖所示。圖2-79參數(shù)設置及效果圖10、繪制一個矩形，并在四角減去四個相同大小的圓，填充顏色為“4c8171”，描邊為漸變，顏色參考步驟8，效果如圖。圖2-80參數(shù)設置效果圖11、將素材“02”嵌套進形狀中，效果如圖。圖2-81效果圖12、在步驟9的圖層下層，繪制一個與步驟9相同參數(shù)的矩形，描邊像素比步驟9的小一點。調(diào)整好位置。圖2-82效果圖13、添加裝飾。裝飾素材使用[形狀]工具中的直線工具進行無填充僅描邊的設置，設置描邊選項為虛線，效果如圖。圖2-83效果圖14、添加相關(guān)文案。圖2-84效果圖15、在下方繪制三個相同的形狀，繪制方法如步驟9，填充為漸變“13443a”“295c52”“13443a”，并填充文案，放入“素材組”中的素材，效果如圖。圖2-85效果圖16、在下方繪制一個“f4f4f4”的矩形，添加相關(guān)文案和“素材組”素材。圖2-86效果圖17、復制步驟7、步驟8中的形狀，移動到合適的位置，并復制產(chǎn)品信息文案組，改為“產(chǎn)品賣點”，效果如圖。圖2-87效果圖18、繪制一個只有描邊的矩形，柵格化后，使用[選框]工具，將描邊矩形下方刪除掉一部分，效果如圖。圖2-88效果圖19、添加相關(guān)文案和“素材組”中的素材。效果如圖圖2-89效果圖20、使用步驟17/18相同方法繪制剩下兩個產(chǎn)品賣點。圖2-90效果圖21、制作用戶體驗模塊、使用步驟模塊、原料供應模塊和產(chǎn)品直排模塊，方法上同，不在此贅述。圖2-91效果圖22、在詳情頁的最后一個模塊，添加一部分售后服務模塊。完成所有制作。圖2-92售后服務模塊總結(jié)評價對本次課的內(nèi)容進行總結(jié)，并結(jié)合學生們的表現(xiàn)進行評價。根據(jù)老師的總結(jié)找到自己需要提高的地方，并對評價進行反思改進學習通、Photoshop軟件，旨在對課堂表現(xiàn)行總結(jié)。（三）課后拓展相關(guān)知識擴展教學活動教學手段及設計意圖教師活動學生活動1.將實訓等相關(guān)視頻發(fā)到學習通中2.將課后練習題發(fā)到學習通中1.完成視頻觀看2.復習知識并完成練習題1.學習通2.旨在復習并擴展相關(guān)知識教學創(chuàng)新1、教學方法：本次課程運用講授法、小組討論法、案例分析法以及自主探究學習法并結(jié)合視頻及動畫演示以鞏固教學效果。在講授完成后進行實訓系統(tǒng)的練習，即熟悉了知識又為接下來機房操作奠定了基礎。2、信息化運