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

電商網(wǎng)頁平面設(shè)計基礎(chǔ)GRAPHICDESIGN01概念及組成

02情景引入03設(shè)計規(guī)范CONTENTES目錄情景引入Scenariointroductio01電商網(wǎng)頁賞析01.za概念及組成Scenariointroductio02z基礎(chǔ)概念01.網(wǎng)頁設(shè)計，是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁面設(shè)計美化工作。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計。而電商網(wǎng)頁，就是向大眾提供購物服務(wù)的平臺，電商網(wǎng)頁設(shè)計就是為各大電商網(wǎng)購平臺和賣家店鋪、微店等提供設(shè)計服務(wù)，更好的展示產(chǎn)品，促進(jìn)商品的銷售。z網(wǎng)頁組成02.1.首頁網(wǎng)站首頁,是引導(dǎo)用戶進(jìn)入不同區(qū)域的一個「目錄」，這個目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來吸引點擊，露出的部分一定要有一個「更多」按鈕來指引用戶找到二級頁面。z2.二級頁面在邏輯上，首頁是一級頁面，從首頁點擊進(jìn)入的頁面均為二級頁面。z3.底層頁在網(wǎng)站結(jié)構(gòu)中最后提供用戶實質(zhì)資訊的頁面就是底層頁。比如，一般我們點擊感興趣的標(biāo)題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評論；底側(cè)也會有分享按鈕、贊功能等。z4.廣告banner一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動、推薦資訊等。那么banner圖的尺寸有固定嗎？答案是沒有。Banner的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。z5.Footer一般footer的顏色都會比上邊內(nèi)容區(qū)域要暗，因為footer的信息在邏輯的級別上是次要的。footer區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號等信息。

設(shè)計規(guī)范Scenariointroductio03頁面尺寸規(guī)范01.電商網(wǎng)頁頁面的尺寸寬度1920px，高度尺寸按照頁面所需要的信息來制定，顯示尺寸為1920*1080px。PC端的banner一般為730*400，專題活動頁，主頁面寬度為1920，高度為580-700px,其中顯示區(qū)域高度為1210px.產(chǎn)品詳情頁，寬度尺寸790px,高度只要能充分展示所需信息就可以。顏色規(guī)范02.頁面顏色要求：頁面中使用的顏色不得多余5種，黑白灰不算色，針對不同主體使用合適的色系，主題顏色和輔助色要根據(jù)配色原理搭配。單色、同色系相似色、臨近色系補色系多色搭配版式規(guī)范03.頁面設(shè)計要有整體性、一致性，版式設(shè)計的一般法則：

對齊對比文字規(guī)范04.在頁面中使用的中英文字體不得超過5種，頁面中出現(xiàn)3次的為主要字體，其他為陪襯字體，黑體為產(chǎn)品詳情頁的主要字體。在banner中的字體基本上要經(jīng)過設(shè)計，還沒能力設(shè)計字體時，可在原字的基礎(chǔ)上做適當(dāng)?shù)奶厥庑Ч?，字體的大小和顏色要和背景的顏色區(qū)分開，便于消費者閱讀。字體的風(fēng)格要統(tǒng)一，達(dá)到統(tǒng)一的秩序感。黑體黑體廣告語規(guī)范05.廣告語規(guī)范，廣告語要注意極限用語的應(yīng)用，廣告法規(guī)定極限用語不