（中職）網(wǎng)店裝修（第二版）學習情境五 教案

1、（中職）網(wǎng)店裝修（第二版）學習情境五 教案（中職）網(wǎng)店裝修（第二版）學習情境五 教案 PAGE 18（中職）網(wǎng)店裝修（第二版）學習情境五 教案任務一 店鋪首頁策劃一 一、教學目標1、知識目標（1）了解店鋪首頁裝修的基礎理論知識。（2）掌握店鋪首頁裝修的創(chuàng)作方法。2、技能目標（1）能正確理解首頁的作用。（2）能熟悉首頁每個模塊的制作方法3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝

2、修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、電腦端首頁的規(guī)范。 2、首頁的主要模塊。教學難點：1、首頁的組成模塊。 2、首頁的布局。三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題思考什么是首頁？首頁的作用？看展示的首頁，思考問題。引出首頁裝修的重要性。2、新課講解一、一個正常營業(yè)的店鋪首頁主要由店招、導航、海報、產品分類、客服旺旺、產品展示、店鋪頁尾、店鋪背景以及滿返、滿減、紅包、購物券等營銷模塊。店鋪首頁的標準布局圖：二、首頁布局內容解析1、店招顧名思義是店鋪的招牌，店招的尺寸為950*150PX含自定義導航部分，950

3、*120PX其導航為系統(tǒng)自帶。店招一般展示的內容是店鋪的名稱、 logo標志、口號等，詳細一些的也可以展示1-2款主推的產品，還有領取優(yōu)惠券的設計，收藏店鋪的圖標。店招是店鋪上唯一各個頁面都能展示出現(xiàn)的模塊，所以一些重點推廣信息可以設計在店招上。2、導航條導航條可分為淘寶系統(tǒng)自帶和自定義導航條設計，主要功能是可以快速鏈接到相應的指定頁面。一般內容為所有分類、首頁等，豐富一些的有會員制度、購物須知、品牌故事等等，具體可根據(jù)自己店鋪內容而定。3、全屏海報或輪播海報全屏海報主要用于店鋪重大公告、折扣優(yōu)惠、主打產品推薦，讓客戶一進入首頁就能看到店鋪的重點，一般全屏海報尺寸 1920*600PX（建議高

4、度在400-600PX間較好）。輪播海報主要用于推廣產品的促銷內容，可以做成促銷海報吸引買家。尺寸為950*500PX（建議高度在400-500PX間較好）。4、產品分類產品分類方便買家根據(jù)自己的需求在店鋪快速找到想要的產品。分類主要可按價格分類，產品功能分類，產品屬性分類等。本模塊尺寸可根據(jù)自己店鋪規(guī)劃大小來定義。活動促銷區(qū)將店鋪的促銷活動，顯示在店鋪首頁，可提升店鋪的轉化率。在旺鋪的基礎模塊中，可供使用的促銷工具有：滿返、紅包、優(yōu)惠券、滿減、滿贈。以上營銷服務，可起到主動營銷買家，提升回頭客的效果。我們所說的設計，是通過平面圖片的設計展示在店鋪的首頁，讓買家一目了然的看到。設計尺寸950*

5、200PX內。6、商品展示區(qū)是指產品通過平面圖片展示設計，更能突出產品的性價比，更能融化到店鋪的風格里，極大提生產品的視覺展示效果（此非淘寶系統(tǒng)寶貝推薦的豆腐塊式的產品展示）。本模塊尺寸可根據(jù)自己店鋪規(guī)劃大小來定義。7、店鋪頁尾主要展示的內容如關于快遞包裝物流，關于售后等，尺寸950*300PX內8、店鋪背景一個店鋪的風格確立，店鋪的背景占據(jù)了大部分，背景主要設計的內容店鋪的背景圖片，店鋪手機二維碼或店鋪一些重要的折扣信息都可以加入到店鋪背景上。三、店鋪首頁案例展示案例：小熊電器官方旗艦店（見圖5-2），以簡約大氣的風格凸顯產品多樣、高檔，排版布局合理緊湊，無需過多的文字修飾，凸顯高端家電品質

6、。了解電腦端首頁的布局能熟悉首頁主要由哪些模塊構成，每個模塊的內容可為哪些？讓學生先行了解電腦端首頁的基本知識讓學生對首頁的整體布局有系統(tǒng)的了解，便于后面的策劃4、學生實訓任務名稱為店鋪首頁進行模塊策劃任務要求根據(jù)本任務學習的知識，進行小家電店鋪首頁各模塊進行策劃。使用Excel工具，進行模塊策劃。制作規(guī)范首頁各模塊策完整，能反饋出各區(qū)域的主要涉及要點，以文字及圖片的形式進行表達。首頁寬：1920像素，核心內容需要放置在頁面中心950像素內。產品資料店招主推商品2個：網(wǎng)紅輕食早餐機、智能加濕器海報商品1個：旋鈕式破壁機店長推薦商品 5個：大容量空氣炸鍋、紫外線消毒柜、輕食三明治機、雙蓋燉煮養(yǎng)生

7、壺、多功能電煮鍋新品4個：迷你電烤箱、萌潮養(yǎng)生壺、雙層電飯盒、便攜榨汁杯店鋪資料店名：“小熊電器”小家電專賣店店標：自己設計，突出店名、主營類目，色彩搭配合理。店鋪口號：健康生活每一天。優(yōu)惠券：買滿199減10元、買滿380減20元、買滿750減40元促銷活動：秋季滋補產品特價優(yōu)惠。根據(jù)上面的知識點，完成小家電首頁策劃書的撰寫。（沒有弄清楚的地方可參看微課）通過此任務的完成，懂得如何撰寫首頁策劃書5、課后小結本節(jié)課要掌握的重點：店鋪首頁布局2、店鋪首頁模塊明白本節(jié)課自己要掌握的知識點任務二 店標設計 一、教學目標1、知識目標（1）店標的定義、作用。（2）店標的和規(guī)格尺寸。2、技能目標（1）根據(jù)

8、店標的規(guī)格尺寸和類型設計店鋪店標。3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、店標規(guī)格尺寸。教學難點：1、根據(jù)店標的規(guī)格尺寸和類型設計店鋪店招。 三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題常見的店標有哪些？思考為什么你們都能記住它？思考回答問題強化店標設計很重

9、要2、新課講解一、店標的定義及作用1、店標的定義店鋪的標志，是指網(wǎng)店中起到識別和推廣店鋪作用的圖案，通過店標可以讓消費者記住店鋪主體和品牌文化，是店鋪標識的圖形記號。一個網(wǎng)店的店標可作為一個店鋪的形象參考，給人的感覺是最直觀的?？梢源碇愕赇伒娘L格，店主的品位，產品的特性，也可起到宣傳的作用。2、店標的作用網(wǎng)店店標是公眾識別網(wǎng)店的指示器。店標是一種“視覺語言”。它通過一定的圖案、顏色來向消費者傳輸商店信息，以達到識別商店、促進銷售的目的。二、店標要求1、文件格式GIF、JPG、JPEG、PNG2、文件大小80K以內3、建議尺寸80PX*80PX三、店標設計的步驟（1）提取店名關鍵字，取得關鍵

10、字的首字母。（2）抽象選擇可替代該行業(yè)的圖案。（3）將字母和圖案結合，完成標志的設計。聆聽講解，店標的定義、作用、規(guī)格及分類。提升自主學習和專注聽講的能力。4、學生實訓發(fā)布實訓任務：為小家電店鋪設計店標。參考網(wǎng)上電器店標，用Photoshop制作店鋪店標。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、店標的定義2、店標的作用3、店標要求4、店標設計的步驟明白本節(jié)課自己要掌握的知識點任務三 店招設計 一、教學目標1、知識目標（1）店招的定義、作用。（2）店招的和規(guī)格尺寸。2、技能目標（1）根據(jù)店招的規(guī)格尺寸和類型設計店鋪店標。3、情感目標（1）培養(yǎng)學生美感審美的能

11、力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、店招規(guī)格尺寸。教學難點：1、根據(jù)店招的規(guī)格尺寸和類型設計店鋪店招。 三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題常見的店標有哪些？思考為什么你們都能記住它？思考回答問題強化店標設計很重要2、新課講解一、店招的定義及作用1、店招的定義店招就是商店的招牌，有的

12、地方叫“招子”。古人稱為“幌子”、“望子”。近年來隨著網(wǎng)絡交易平臺的發(fā)展，店招也延伸到網(wǎng)店中，即虛擬店鋪的招牌。網(wǎng)店的招牌相當于傳統(tǒng)商鋪的“門頭”一樣，具有同樣的含義。2、店招的作用（1）店招可以表明商店所售物品或服務項目的標志；（2）可以傳遞商店的經營理念以及品牌優(yōu)勢等；（3）可以展示出店鋪的優(yōu)勢產品及服務。二、店招的大小店招尺寸990/950 x120PX，C店和商城的店招尺寸是有區(qū)別的，如圖所示：三、店招的分類以店招的主要功能進行分類的話，店招主要分為下面三大類：1、以品牌宣傳為目的的店招這類店招首先要考慮的內容是店鋪名、店鋪logo、店鋪口號因為這是品牌宣傳的最基本的內容；其次是關注按

13、鈕、關注人數(shù)、收藏按鈕、店鋪資質，可以側面反映店鋪實力；再次是搜索框、第二導航條等方便用戶體驗的內容。2、以活動促銷為目的的店招這類店鋪的特點是店鋪活動、流量集中增加，有別于店鋪正常運營。所以店招首要考慮的因素是活動信息/時間/倒計時、優(yōu)惠券、促銷產品等活動或者促銷信息；其次是搜索框、旺旺、第二導航條等方便用戶體驗的內容；再次才是店鋪名、店鋪logo、店鋪口號等品牌宣傳為主的內容。3、以產品推廣為目的的店招表現(xiàn)突出、對店鋪有貢獻。店鋪特點是有主推產品、想要主推一款或幾款產品。在店招上，這類店鋪要主打促銷產品、促銷信息、優(yōu)惠券、活動信息等促銷信息；其次是店鋪名、店鋪logo、店鋪口號等品牌宣傳為

14、主的內容；再次是搜索框、第二導航條等方便用戶體驗的內容。四、制作店招要注意的事項1、首先視覺重點不宜過多，有1-2個就夠了，太多了導致店招沒有核心。2、其次根據(jù)店鋪現(xiàn)階段的情況來分析，如果現(xiàn)階段是做大促，可以著重突出促銷信息，但是品牌性也不能忽略，反之則剛好相反。3、店招一定要凸顯品牌的特性，讓客戶很容易就清楚你是賣什么的，包括風格，品牌文化等等。這些元素需要我們對自己的品牌有一定的理解之后，方可以應用至店招中，避免對自己的品牌定位出現(xiàn)偏差。4、顏色不要復雜，顏色一定要保持整潔性，不要使用過多的顏色，店鋪本來需要表達的信息量就不大，不需要把店招作得太花哨，給買家造成視覺疲勞很可能就會流失了客戶

15、的關注度，盡量只使用1-3種顏色，減少使用過于刺激的顏色。聆聽講解，聽取老師講解，正確回答出店招包含的元素。以學習者為中心，突出學生主體地位 ，教師的引導。4、學生實訓發(fā)布實訓任務：為小家電店鋪設計店招。參考網(wǎng)上電器店招，用Photoshop制作店鋪店招。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、店招的定義及作用2、店招的大小3、店招的分類4、制作店招要注意的事項明白本節(jié)課自己要掌握的知識點任務四 海報設計 一、教學目標1、知識目標（1）海報的大小。（2）海報的類型。2、技能目標（1）海報設計共同標準。（2）海報整體構圖。3、情感目標（1）培養(yǎng)學生美感審美的

16、能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、海報整體構圖。教學難點：1、海報設計共同標準。 三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題對比兩個店鋪，思考哪一個流量會更多？思考回答問題強化全屏海報很重要2、新課講解一、海報的大小全屏海報尺寸： 寬 1920px 中間部分 950px(C店) 990

17、px（天貓） 高 400-540px二、海報的類型1、產品型海報 主要展現(xiàn)產品賣點的海報2、促銷型海報 主要展現(xiàn)促銷信息的海報三、海報設計共同標準1、主題突出2、目標明確3、形式美觀四、海報整體構圖1、左圖右字型（左右構圖）2、右圖左字型（左右構圖）3、兩邊圖中間字型（居中構圖）聆聽講解，聽取老師講解，正確回答出海報的尺寸、類型。以學習者為中心，突出學生主體地位 ，教師的引導。4、學生實訓發(fā)布實訓任務：為小家電店鋪設計全屏海報。參考網(wǎng)上電器全屏海報，用Photoshop制作店鋪店招。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、海報的大小2、海報的類型3、海報設

18、計共同標準4、海報整體構圖明白本節(jié)課自己要掌握的知識點任務五 促銷區(qū)設計 一、教學目標1、知識目標（1）促銷區(qū)的類型。（2）促銷區(qū)設計要點。2、技能目標（1）促銷區(qū)設計四步驟3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、促銷區(qū)設計要點。教學難點：1、促銷區(qū)設計四步驟。 三、教學過程設計教

19、學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題思考優(yōu)惠券的好處？思考回答問題強化促銷區(qū)設計很重要2、新課講解一、常見的網(wǎng)店促銷區(qū)1、優(yōu)惠券2、促銷活動：折扣活動、會員活動、抽獎活動、滿贈活動二、促銷區(qū)設計要點（1）促銷活動,羅列清晰（2）區(qū)域劃分,明確獨立（3）核心內容,突出顯示（4）顏色鮮艷,吸引眼球三、促銷區(qū)設計四步驟（1）梳理優(yōu)惠規(guī)則：時間、優(yōu)惠價格（2）確定元素組合形式：中英文、數(shù)字（3）確定構圖和配色：上下/左右構圖、主輔色調（4）選合適平臺和軟件：ps工具、智能工具聆聽講解，聽取老師講解，正確回答出促銷區(qū)類型、促銷區(qū)設計要點等。以學習者為中心，突出學生主體地位 ，教師的引導。4

20、、學生實訓發(fā)布實訓任務：為小家電店鋪設計促銷區(qū)。參考網(wǎng)上電器促銷區(qū)，用Photoshop制作店鋪店招。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、常見的網(wǎng)店促銷區(qū)2、促銷區(qū)設計要點3、促銷區(qū)設計四步驟明白本節(jié)課自己要掌握的知識點任務六 產品分類導航設計 一、教學目標1、知識目標（1）產品分類導航的定義及作用。（2）產品的分類標準。2、技能目標（1）產品分類導航的種類。3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，

21、可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、產品的分類標準。教學難點：1、分類導航的設計。 三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題對比兩個導航，思考哪一個點擊量會更多？思考回答問題強化分類導航很重要2、新課講解一、產品分類導航的定義及作用定義：淘寶店鋪的分類導航是指引顧客更快找到自己購買物品位置的指向燈，相當于超市中標明各類商品位置的指示牌，其重要性不言而喻。作用：1、引導顧客快速的找到所需要購買的商品，起到了路徑的作用。2、還可以提高顧客在店鋪里

22、的訪問深度，增加瀏覽流量。 3、有助于顧客對整個店鋪的商品全面了解，提高客單價。二、產品的分類標準1、按商品類目2、按商品價位3、按商品上架時間4、按店鋪促銷活動三、產品分類導航的種類1、店招導航2、頁中分類導航3、左側分類導航4、頁尾導航聆聽講解，聽取老師講解，正確回答出促銷區(qū)類型、促銷區(qū)設計要點等。以學習者為中心，突出學生主體地位 ，教師的引導。4、學生實訓發(fā)布實訓任務：為小家電店鋪設計分類導航。參考網(wǎng)上分類導航，用Photoshop制作店鋪店招。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、產品分類導航的定義及作用2、產品的分類標準3、產品分類導航的種類明

23、白本節(jié)課自己要掌握的知識點任務七 商品陳列區(qū)設計 一、教學目標1、知識目標（1）商品陳列區(qū)定義。（2）傳統(tǒng)超市和電商商品陳列對比。2、技能目標（1）如何進行商品陳列。3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析網(wǎng)店首頁的美觀程度，直接決定進店顧客的主觀感受，可以延長顧客進店停留時間，關系到顧客能否在店鋪下單購物。美觀的店鋪裝修會給客戶好的第一印象，顧客會更愿意多花時間瀏覽店鋪的商品，增加顧客下單的概率。教學重點：1、商品陳列區(qū)定義。教學難點：1、如何進行商品陳列。 三、教學過程設計教學步驟教

24、師活動學生活動設計意圖1、創(chuàng)設情景引入課題對比兩個導航，思考哪一個點擊量會更多？思考回答問題強化分類導航很重要2、新課講解一、商品陳列區(qū)定義將產品按銷售者的經營思想及要求，有規(guī)律地擺設、展示、以方便顧客購買，提高銷售效率的重要的宣傳手段，是銷售產業(yè)廣告的主要形式。二、傳統(tǒng)超市和電商商品陳列對比超市商品陳列電商商品陳列位置內容位置內容入口處吸引顧客進店，配置主題型季節(jié)促銷區(qū)（特別是標準超市）首屏焦點海報電商主題大促主題區(qū)放在賣場深處，吸引顧客向賣場縱深分類商品陳列區(qū)電商引導性標識端架區(qū)高毛利商品，低價優(yōu)質商品，強化價格形象，激發(fā)購買欲望大促商品陳列區(qū)電商新熱促暴點排面促銷區(qū)活化陳列，吸引顧客向貨

25、架深處行進首頁商品分類列表電商分類運營手段特殊陳列包柱子海報宣傳首頁背景設置電商特別主題裝飾渲染氣氛三、商品陳列的重要性陳列是零售業(yè)的一個重要環(huán)節(jié)，有規(guī)矩擺設、展示商品，以便顧客購買。同時不僅美化購物環(huán)境，還可以刺激銷售，提高商品銷量?？梢哉f，陳列直接影響著銷售量。四、如何進行商品陳列電商行業(yè)，消費者瀏覽習慣都是從上到下，從左到右。陳列原則有：1、重點突出2、整齊統(tǒng)一3、色彩對比4、關聯(lián)有序聆聽講解，聽取老師講解，正確回答出促銷區(qū)類型、促銷區(qū)設計要點等。以學習者為中心，突出學生主體地位 ，教師的引導。4、學生實訓發(fā)布實訓任務：為小家電店鋪設計商品陳列區(qū)。參考網(wǎng)上商品陳列區(qū)，用Photoshop

26、制作店鋪店招。利用所學知識，分析任務，講練結合，學以致用5、課后小結本節(jié)課要掌握的重點：1、商品陳列區(qū)定義2、傳統(tǒng)超市和電商商品陳列對比3、商品陳列的重要性4、如何進行商品陳列明白本節(jié)課自己要掌握的知識點 PAGE 22任務八 電腦端首頁上傳 一、教學目標1、知識目標（1）掌握電腦端首頁的上傳方法。（2）掌握網(wǎng)店首頁包含的模塊。2、技能目標（1）能上傳電腦端首頁。（2）模塊裝修。3、情感目標（1）培養(yǎng)學生美感審美的能力，美的情操。（2）培養(yǎng)學生積極思考、大膽探索的能力。（3）培養(yǎng)學生自主學習、協(xié)助學習的能力。二、教學內容分析無線購物時代，手機端詳情是美工的一個重要內容，手機端詳情頁的設計是否真實有吸引力，是決定買單下單的一個重要因素，所以這是美工的一個重內容。教學重點：1、電腦端首頁上傳方法。教學難點：1、使用DW上傳店招的方法三、教學過程設計教學步驟教師活動學生活動設計意圖1、創(chuàng)設情景引入課題圖片熱點鏈接和切片鏈接有什么不同？思考回答問題。先思考，提出問題，可通過后面的課程重點講解。2、新課講解一、