中職教育二年級下學期電子與信息《電商網(wǎng)頁平面設(shè)計基礎(chǔ)》教學設(shè)計

1/10《電商網(wǎng)頁平面設(shè)計基礎(chǔ)》教學設(shè)計授課課題電商網(wǎng)頁設(shè)計課程計算機平面設(shè)計學校教學對象中職學生授課課時12分41秒授課類型理實一體教學設(shè)計描述本次課演示作品效果創(chuàng)設(shè)情景，激發(fā)學生的興趣?，F(xiàn)場提問互動，活躍課堂氛圍，引入課程主題，教師通過講授法傳授知識和技能，從而激發(fā)學生的興趣，引導學生積極主動學習，讓學生學有所得。教學對象分析經(jīng)過對平面設(shè)計課程一段時間的學習，大部分學生對圖形、圖像的基本知識有了一定的了解，也掌握了一定的技能，但對他們來說，電商網(wǎng)頁設(shè)計這部分需要涉及各方面知識點，而且規(guī)范也較為復雜，而他們?nèi)狈﹄娚叹W(wǎng)頁架構(gòu)和規(guī)范的整體認真和細節(jié)把控。通過講授歸納電商網(wǎng)頁的基本概念和基本組成還有明確電商網(wǎng)頁設(shè)計中的規(guī)范，幫助學生建立完整的基礎(chǔ)理論和規(guī)范體系。教學目標知識目標1、了解網(wǎng)頁的基本構(gòu)成2、明確電商網(wǎng)頁的設(shè)計規(guī)范。能力目標學生可以充分發(fā)揮自身的創(chuàng)造力與想像力，培養(yǎng)學生綜合運用知識的能力。情感目標促進學生獲取信息的能力、設(shè)計能力、審美能力的提高，鼓勵學生溶入自己的個性制作出新穎、吸引人的作品。思政目標讓學生了解好的平面設(shè)計作品往往需要設(shè)計師的深思熟慮和精雕細琢，培養(yǎng)學生沉下心來做事的工匠精神。教學重點網(wǎng)頁的基本構(gòu)成和電商網(wǎng)頁的設(shè)計規(guī)范教學難點熟練掌握電商網(wǎng)頁的設(shè)計規(guī)范教學方法ppt講授法學習方法自主學習、練習法教具多媒體平臺、網(wǎng)絡(luò)教室教學結(jié)構(gòu)教師：導入講授考察學習情況交流評價討論交流評價討論學生：思考聽講、總結(jié)反饋教材的設(shè)計思路及分析《電商網(wǎng)頁設(shè)計基礎(chǔ)》這次課，主要是為了提升學生對電商網(wǎng)頁的基礎(chǔ)理論知識和設(shè)計規(guī)范的認知，幫助學生全方位設(shè)計理論知識的建立，從而夯實學生的設(shè)計能力基礎(chǔ)。本節(jié)課以賞析三張電商網(wǎng)頁為案例來吸引學生的注意，并導入新課。再從網(wǎng)頁的概念出發(fā)，分析網(wǎng)頁的基本構(gòu)成，并了解電商網(wǎng)頁的設(shè)計規(guī)范，讓學生對電商網(wǎng)頁的設(shè)計有一個整體且清晰的認識，把握電商網(wǎng)頁的設(shè)計規(guī)范，提升對電商網(wǎng)頁設(shè)計整體性設(shè)計的把控。學習過程中，學生的自學能力、創(chuàng)新能力、審美能力及學生的知識綜合應(yīng)用能力得到全面的發(fā)展。教學過程教學環(huán)節(jié)教師活動學生活動設(shè)計意圖情景引入教師展示三張電商網(wǎng)頁圖片，分小組進行提問學生觀賞這三張圖片，各小組討論總結(jié)發(fā)言。展示當前流行的電商網(wǎng)頁，用提問的方式而引發(fā)學生的思考，切入本節(jié)課程的主題。概念及組成部分教師講授電商網(wǎng)頁設(shè)計的基礎(chǔ)理論一、首先，明確基本概念。網(wǎng)頁設(shè)計，是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計。而電商網(wǎng)頁，就是向大眾提供購物服務(wù)的平臺，電商網(wǎng)頁設(shè)計就是為各大電商網(wǎng)購平臺和賣家店鋪、微店等提供設(shè)計服務(wù)，更好的展示產(chǎn)品，促進商品的銷售。二、網(wǎng)頁設(shè)計組成1.首頁首頁別名叫作Index或者Default，是索引和目錄的意思。首頁類似書籍的目錄，需要查看哪個子網(wǎng)頁就點擊鏈接即可進入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導用戶進入不同區(qū)域的一個「目錄」，這個目錄除了導航功能外也要露出一部分內(nèi)容給用戶來吸引點擊，露出的部分一定要有一個「更多」按鈕來指引用戶找到二級頁面。2.二級頁面在邏輯上，首頁是一級頁面，從首頁點擊進入的頁面均為二級頁面。二級頁面之后還有三級頁面等級別。從點擊的概率上來說，自然是越靠前訪問量越高，頁面層級越深越不容易被用戶找到。一般網(wǎng)站有三級頁面，就是為了避免用戶迷失。為此還會在頁面中加入面包屑導航。面包屑導航就是在頁面第一屏出現(xiàn)的諸如首頁>體育>NBA頻道，這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在哪里，并且點擊可以回到其他頁面。3.底層頁在網(wǎng)站結(jié)構(gòu)中最后提供用戶實質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級頁面中我們點擊感興趣的標題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評論；底側(cè)也會有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能。總之，在用戶閱讀完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢閱讀其他的資訊或者回到頻道。4.廣告門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。banner一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動、推薦資訊等。那么banner圖的尺寸有固定嗎？答案是沒有。Banner的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以banner不可以做得很高，否則第一屏信息會顯示得不夠。你可能會說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏會少很多。也就是很多用戶可能點擊網(wǎng)站后就會跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的banner不應(yīng)該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的Banner區(qū)域為1380x350px。5.Footer在網(wǎng)站具體的頁面設(shè)計中，底部會有一個區(qū)域我們稱之為footer。一般footer的顏色都會比上邊內(nèi)容區(qū)域要暗，因為footer的信息在邏輯的級別上是次要的。footer區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號等信息。在設(shè)計時一定要降級處理，不要讓footer變得特別明顯。學生認真聽講，記錄本節(jié)課的重點。讓學生了解電商網(wǎng)頁設(shè)計的基礎(chǔ)知識，培養(yǎng)學生的綜合認知。設(shè)計規(guī)范三：電商網(wǎng)頁設(shè)計規(guī)范01頁面尺寸規(guī)范電商網(wǎng)頁頁面的尺寸寬度1920px，高度尺寸按照頁面所需要的信息來制定，顯示尺寸為1920*1080px。PC端的banner一般為730*400，專題活動頁，主頁面寬度為1920，高度為580-700px,其中顯示區(qū)域高度為1210px.產(chǎn)品詳情頁，寬度尺寸790px,高度只要能充分展示所需信息就可以。02顏色規(guī)范頁面顏色要求：頁面中使用的顏色不得多余5種，黑白灰不算色，針對不同主體使用合適的色系，主題顏色和輔助色要根據(jù)配色原理搭配。單色、同色系：適合產(chǎn)品本身顏色比較統(tǒng)一，通過吸取產(chǎn)品較近的周邊顏色，添加合適的輔助色，使畫面豐富而統(tǒng)一，這種色系適合單品的一個橫幅廣告的設(shè)計。相似色、臨近色系：一般在主色調(diào)明確的情況下輔助添加類似色，是一種比較好掌握的顏色。補色系：這里把互補色、單邊補色分割、補色分割3種情況，電商網(wǎng)頁的調(diào)性要活潑，產(chǎn)品基本上都屬于色彩明快的品類，色彩上的愉悅更容易激起點擊的欲望，補色系的運用要注意面積的搭配及顏色灰度的調(diào)整。多色搭配：可把對比色、矩形分割、廣場分割多顏色的搭配歸為，一般比較難把控，可以做小面積的裝飾以平衡畫面。03板式規(guī)范頁面設(shè)計要有整體性、一致性，版式設(shè)計的一般法則：對齊。對齊分左對齊、右對齊和居中。常見的電商海報，基本上采用了左右對齊的方式，對齊是最基礎(chǔ)最常見的班師排列方式，給人以穩(wěn)重、力量、統(tǒng)一、工整的感覺。左對齊可以使畫面變得統(tǒng)一有秩序感。居中的排版則給人正式、大氣、高端、品質(zhì)的感覺，對比。無對比不設(shè)計，對比一般有大小、深淺等，可以有效增加畫面的視覺效果和沖擊力。04文字規(guī)范在頁面中使用的中英文字體不得超過5種，頁面中出現(xiàn)3次的為主要字體，其他為陪襯字體，黑體為產(chǎn)品詳情頁的主要字體。在banner中的字體基本上要經(jīng)過設(shè)計，還沒能力設(shè)計字體時，可在原字的基礎(chǔ)上做適當?shù)奶厥庑Ч?，字體的大小和顏色要和背景的顏色區(qū)分開，便于消費者閱讀。字體的風格要統(tǒng)一，達到統(tǒng)一的秩序感。05廣告語規(guī)范，廣告語要注意極限用語的應(yīng)用，廣告法規(guī)定極限用語不得出現(xiàn)在商品的標題、副標題、主圖、詳情頁等位置，極限詞例如：世界級、最高級、萬能學生認真聽講，記錄本節(jié)