中職教育二年級下學期電子與信息《設計店鋪首頁》教學設計

1/9《設計店鋪首頁》教學設計授課課題設計店鋪首頁課程計算機平面設計學校教學對象中職學生授課課時13分19秒授課類型理實一體教學設計描述本次課程在以人為本的教學理念下，遵循在教師指導下的以“學生”為中心的學習模式，用講授法和案例演示達相結合，引導學生主動思考學習，讓學生學習新知識的時候，不是一味接受老師的知識，而是主動思考消化新的知識。激發(fā)學生的學習興趣和創(chuàng)造力。教學對象分析前面的課程，學生對電商網頁設計基礎理論知識有了一定的了解，但對一些深層次的電商網頁設計知識的認知還比較匱乏和片面，通過講授店鋪首頁的設計，讓學生在學習過程中，明白店鋪首頁的設計要領，讓他們形成較好的問題分析和探究能力，并提升他們的設計創(chuàng)作能力。教學目標知識目標1、了解店鋪首頁的基本結構和常見板式。2、掌握設計好店鋪首頁的基本要領。能力目標學生可以充分發(fā)揮自身的創(chuàng)造力與想像力，培養(yǎng)學生綜合運用知識的能力。情感目標促進學生獲取信息的能力、設計能力、審美能力的提高，鼓勵學生溶入自己的個性制作出新穎、吸引人的作品。思政目標通過真實案例的設計，培養(yǎng)學生領悟力及執(zhí)行力，培養(yǎng)精益求精的工匠精神。教學重點理解店鋪首頁的基本結構和常見板式。教學難點熟練掌握店鋪首頁設計的綜合方法和技巧教學方法案例教學、ppt講授法學習方法自主學習、練習法教具多媒體平臺、網絡教室教學結構教師：導入講授考察學習情況交流評價討論交流評價討論學生：思考聽講、總結反饋教材的設計思路及分析《店鋪首頁》這次課程，是為了拓寬學生電商網頁設計這方面的理論知識，培養(yǎng)學生設計店鋪首頁的綜合能力。本節(jié)課以一組優(yōu)秀的店鋪首頁為案例來吸引學生的注意力，并設置提問環(huán)節(jié)，引發(fā)學生對店鋪首頁的思考，導入本次的課程主題。再用PPT講授店鋪首頁的基本結構和常見版式，講解設計店鋪首頁的基本要領，后再以一個案例演示制作一個店鋪首頁的全過程，幫助學生透徹的學習店鋪首頁的相關知識。進而全面提升學生的店鋪首頁設計的綜合能力。教學過程教學環(huán)節(jié)教師活動學生活動設計意圖情景引入教師：PPT展示幾組普通和優(yōu)秀的的店鋪首頁供大家賞析，待看完后，引導學生做思考，總結歸納優(yōu)秀店鋪的基本要點，2分鐘后學生舉手發(fā)言回答。觀賞優(yōu)秀店鋪首頁，思考并總結優(yōu)秀店鋪首頁的特點讓學生對店鋪首頁有初步的認識，并被其創(chuàng)作、設計出來的精美效果所吸引。從而引發(fā)學生的學習興趣。結構分析教師講授ppt,店鋪首頁的結構分析：1）店招，店招是店鋪的總導航，一切商品、一切分類都可以在這里快速便捷的找到，包括基本的logo,廣告語、關注、導航；可選的優(yōu)惠券、主圖款、售后保障、收藏本店。2）全屏海報，全屏海報統(tǒng)一的寬度尺寸是1920px，非全屏的是950px,高度可以根據設計效果自己設定，海報的分類一般分為活動海報和單品海報，活動海報是直接鏈接到另外一個活動頁面的地址；單品海報是直接鏈接到我們店鋪內的單個寶貝詳情。3）寶貝分類區(qū)域，可以把寶貝分為新品、爆款、寶貝分類，首先新品很重要，它可以提高二次回頭率的重要來源之一.爆款的話，可以去搜集當季的熱銷的產品，或者根據顧客群體清楚當下流行的元素，從而來調整爆款商品，也可以采用模特實物結合或者半身模特的排版方式來展現(xiàn)的，可以凸顯爆款的氣質.最后的寶貝分類主要就是為了區(qū)分不同風格的寶貝，為了讓客戶簡單快捷的銷售.4）頁尾，頁面尾部的布局一般是促成成交的一下保障，比如可以做些支付方式、配送物流的流程、售后保障做上去.讓買家有一個保障。店鋪首頁的2種板式：“T”字形板式首頁主要包括店招、導航、輪播海報、標題banner、產品展示、尾頁幾大部分。T字型版式，就是前半部分店招、導航、輪播海報、標題banner為全屏，產品展示板塊不全屏全屏版式首頁主要包括店招、導航、輪播海報、標題banner、產品展示、尾頁幾大部分。所有板塊全屏展示。學生認真聽講，做好筆記。考慮到學生這方面的知識比較匱乏，由老師整理歸納講授，引導學生學習這方面的知識，全面提升學生這方面的認知?；疽I設計店鋪首頁有什么要求呢？１、統(tǒng)一店鋪風格電商行業(yè)發(fā)張迅速，競爭混亂激烈，在設計首頁時，要了解產品市場上的消費人群，自身要有個清晰的市場定位。根據人群消費特點和產品內容確立店鋪的色調，從而建立店鋪的品牌風格。２、首屏海報首屏海報是一個店鋪視覺核心，體現(xiàn)著店鋪整體的色調?，F(xiàn)如今店鋪都是推出大屏海報，能夠鋪滿全屏，視覺效果沖擊也更強烈。真正讓人有眼前一亮的感覺也是通過其首屏海報體現(xiàn)的，可以在海報上放上最重要的信息，展開店鋪活動，盡充分吸引消費者的視線。第二屏，三屏的海報也要和首屏色調統(tǒng)一，體現(xiàn)店鋪品牌風格。３、分類導航導航的裝飾不能太雜亂，要簡潔清爽，明確分類好模塊，做到有效分流。在字體類型和顏色方面也要和店鋪風格統(tǒng)一。4、主推產品最首頁黃金區(qū)域充分展現(xiàn)產品，結合產品特點深層打造賣點，激發(fā)消費者對產品的興趣和購買欲，打造出店鋪爆款。學生在老師的指引下作出分析，并形成自己的工作思路考慮到學生在這方面的經驗比較欠缺，教師給予適當的指引，充分體現(xiàn)新課改課堂中“教師為輔，學生為主”的理念。案例演示教師進行案例演示：1、首屏部分新建畫布進行區(qū)域劃分，店招部分是950*150，建立一個矩形為950*150，ctrl+a,全選居中，ctrl+b取消，再拉取參考線，將矩形改為950*120，留出30px,導航的部分。再拉一條參考線。再把矩形刪除。新建一個1920*150的矩形，給店招鋪一個背景，選取淺灰色，“alt+delete”填充，給logo加一個矩形底色，再把logo放上面。文字工具，打出導航文字“店鋪首頁/純銀項鏈/手鏈手鐲/波西耳飾”空格再一個豎線，調整合適的文字大小和距離。自定義形狀工具畫出一個心，吸一下logo的顏色，“alt+delete”填充。文字工具打上“收藏我們”。字體顏色調淺一點，放在右上角。（）海報尺寸1920*600，放進來。這里我們放的是一個單品海報，是店鋪的主推款。2、寶貝分類部分畫一個矩形1920*260，顏色比店招的底色深一點點的灰色打上“您在尋找什么？、PRODUCTS，這里的文字與上方的保持一致。ctrl+a,全選居中。下方畫又1條直線，用直線工具，按住shift,調整下不透明度，淡一點就可以了。1）制作一組寶貝的圖標我們先來畫一個戒指，用圓形工具，按住shift,畫一個正圓，再選擇小黑工具，按住alt鍵就復制出來了一個，這時是在同一個圖層，用路徑工具減去頂層，按住alt+shift,調整圓圈的大小，畫出指環(huán)的形狀，同樣的方法，我們建立一個矩形框，ctrl+t,自由變換，旋轉壓扁一點，減去頂層，缺口就做好了，現(xiàn)在要在上方畫一個寶石，另起一個圖層，用多邊形工具畫一個五邊形，自由變換旋轉方向。壓扁一點，尖角朝下，更接近鉆戒的形狀。同樣的用小黑工具，復制減去頂層，再畫一個矩形加選。小黑工具選中下面的圖形，用小白工具調節(jié)杠桿，適當修一下形狀。圖層很多，合并形狀組件，ctrl+e合并形狀。重新命名戒指。耳墜，自定義形狀畫一個五角星，上方畫一個圓角矩形，頭部加個小圓，ctrl+j復制一個，縮小一點，再復制一個，用小黑工具，對其進行分割，同樣的小面兩個小點，再ctrl+e合并所有圖層。重新命名耳墜。排版，打上“戒指”、“Ring”，調整戒指的字體大小，和字間距，英文用淺一點的顏色。將圖片文字的圖層選中，ctrl+g,合并到同一組。復制五個大致分布開。再按照戒指圖標的大小作為規(guī)范，調整其他幾組圖標的大小。將其中一個圖標改成預選中狀態(tài)，我們選耳墜，給圖標加一個方塊的底色，圖標和字體的顏色改成白色，下方還有一塊綠色的矩形，我們將這部分一起打個組。2）下面的區(qū)域是一組文字細節(jié)化的分類文字我們可以復制上方的文字，一共六大類，畫一個矩形框，我們間隔分布，每個部分再左對齊。復制五個。編輯成一個組。下方是店鋪爆款?？梢?/p>