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

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