電商視覺設(shè)計(jì)（全彩慕課版）課件 第7、8章　活動(dòng)專題頁設(shè)計(jì)、PC端店鋪首頁設(shè)計(jì)

第7章活動(dòng)專題頁設(shè)計(jì)本章介紹：活動(dòng)專題頁設(shè)計(jì)是電商視覺設(shè)計(jì)任務(wù)中具有一定難度的綜合型工作任務(wù)，精心設(shè)計(jì)的活動(dòng)專題頁能夠營造出歡樂的活動(dòng)氛圍，提升消費(fèi)者的興趣。本章針對(duì)活動(dòng)專題頁的基本類型、表現(xiàn)形式及頁面設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的活動(dòng)專題頁進(jìn)行設(shè)計(jì)演練。通過對(duì)本章的學(xué)習(xí)，學(xué)生可以對(duì)活動(dòng)專題頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，了解活動(dòng)專題頁的設(shè)計(jì)思路，掌握其制作方法。了解活動(dòng)專題頁的基本類型熟悉活動(dòng)專題頁的表現(xiàn)形式熟悉活動(dòng)專題頁的頁面設(shè)計(jì)知識(shí)目標(biāo)明確平臺(tái)活動(dòng)專題頁的設(shè)計(jì)思路掌握平臺(tái)活動(dòng)專題頁的制作方法熟悉店鋪活動(dòng)專題頁的設(shè)計(jì)思路掌握店鋪活動(dòng)專題頁的制作方法能力目標(biāo)提高整理、提煉信息的能力提高版面設(shè)計(jì)的能力素養(yǎng)目標(biāo)7.1活動(dòng)專題頁的基本類型活動(dòng)專題頁是指在各種節(jié)日活動(dòng)主題下進(jìn)行商品促銷的電商頁面。根據(jù)服務(wù)對(duì)象，PC端活動(dòng)專題頁可以分為平臺(tái)活動(dòng)專題頁和店鋪活動(dòng)專題頁。店鋪專題頁平臺(tái)專題頁

PC端平臺(tái)活動(dòng)專題頁通常涉及大量的類目、品牌及商品，因此整體布局更緊湊。其中的頭部Banner常設(shè)計(jì)為高度低、尺寸小的樣式，以便能在首屏展示更多信息。而PC端店鋪活動(dòng)專題頁只需呈現(xiàn)單一類目或單一品牌下的少量商品，因此整體布局更寬松。其中的頭部Banner常設(shè)計(jì)為高度高、尺寸大的樣式，以便能更好地體現(xiàn)主題和氛圍。7.1活動(dòng)專題頁的基本類型手機(jī)端活動(dòng)專題頁與PC端活動(dòng)專題頁一樣可以分為平臺(tái)活動(dòng)專題頁和店鋪活動(dòng)專題頁，其中手機(jī)端平臺(tái)活動(dòng)專題頁的頭部Banner常設(shè)計(jì)為橫屏、方屏尺寸的樣式，手機(jī)端店鋪活動(dòng)專題頁的頭部Banner則設(shè)計(jì)為豎屏大尺寸的樣式。7.1活動(dòng)專題頁的基本類型平臺(tái)專題頁店鋪專題頁7.2活動(dòng)專題頁的表現(xiàn)形式矩形排列場景展示矩形排列即用矩形的形式將活動(dòng)專題頁的內(nèi)容按照一定的規(guī)則進(jìn)行排列。這種表現(xiàn)形式能夠清晰地展示信息內(nèi)容，令畫面整齊、舒適。根據(jù)不同的設(shè)計(jì)風(fēng)格，矩形排列可以細(xì)分為扁平化矩形排列和擬物化矩形排列。扁平化矩形排列將矩形刻畫成輕量化的視覺元素，從而更好地凸顯商品和信息；擬物化矩形排列則將矩形刻畫成立體化的視覺元素，使矩形成為畫面亮點(diǎn)，讓畫面更具美感。7.2.1矩形排列矩形排列場景展示即用場景化的形式呈現(xiàn)活動(dòng)專題頁中的內(nèi)容。這種表現(xiàn)形式能夠突出主題氛圍，使信息和商品巧妙地融入場景內(nèi)，設(shè)計(jì)更具連貫性與創(chuàng)意度。7.2.2場景展示場景展示7.3

PC端活動(dòng)專題頁的頁面設(shè)計(jì)PC端活動(dòng)專題頁的設(shè)計(jì)尺寸PC端活動(dòng)專題頁的頁面結(jié)構(gòu)PC端活動(dòng)專題頁的設(shè)計(jì)要點(diǎn)7.3.1PC端活動(dòng)專題頁的設(shè)計(jì)尺寸PC端活動(dòng)專題頁的設(shè)計(jì)尺寸可以參考第8章中的PC端店鋪首頁的設(shè)計(jì)尺寸進(jìn)行設(shè)置。通常將PC端活動(dòng)專題頁的寬度設(shè)置為1920px，重要的信息和商品的寬度建議設(shè)置在1200px以內(nèi)，高度不限，可以根據(jù)商家的不同需要進(jìn)行組合變化。7.3.2PC端活動(dòng)專題頁的頁面結(jié)構(gòu)PC端活動(dòng)專題頁通常由店招&導(dǎo)航、Banner、活動(dòng)促銷區(qū)以及商品陳列區(qū)組成。參考1.5.3小節(jié)確定好PC端活動(dòng)專題頁的柵格系統(tǒng)，根據(jù)主流電商平臺(tái)設(shè)計(jì)PC端活動(dòng)專題頁的版塊尺寸，可以總結(jié)出緊湊型和寬松型共兩種類型。緊湊型版塊排列緊湊、占屏較小，適合展示文字較少的內(nèi)容或用于版面緊張的情況；寬松型版塊排列寬松、占屏較大，適合展示文字較多或需要著重呈現(xiàn)的內(nèi)容。各種版塊的高度可以根據(jù)商品和信息的內(nèi)容靈活變化，設(shè)計(jì)時(shí)建議參考比例，否則容易造成結(jié)構(gòu)失衡?；顒?dòng)專題頁7.3.3PC端活動(dòng)專題頁的設(shè)計(jì)要點(diǎn)1．商品陳列（1）商品陳列形式常用的商品陳列形式有攝影圖片、背景設(shè)計(jì)和臺(tái)面設(shè)計(jì)3種，這3種商品陳列形式各有所長，適用于大多數(shù)品類商品的陳列。攝影圖片背景設(shè)計(jì)臺(tái)面設(shè)計(jì)（2）商品陳列角度商品陳列角度有平視、仰視和俯視3種，不同的角度可以給消費(fèi)者帶來不同的感受。其中平視和俯視角度會(huì)令商品陳列更為自然，因此廣泛使用這兩種角度。仰視會(huì)給消費(fèi)者帶來刻意的感受，使商品的真實(shí)感和親切感不足，因此較少使用這種角度。平視7.3.3PC端活動(dòng)專題頁的設(shè)計(jì)要點(diǎn)2．內(nèi)容分隔（1）版塊分隔版塊分隔即對(duì)PC端活動(dòng)專題頁中不同的版塊進(jìn)行區(qū)分，常見的版塊有活動(dòng)促銷區(qū)和商品陳列區(qū)。版塊分隔的設(shè)計(jì)通常有分隔欄、顏色和表現(xiàn)形式3種。分隔欄顏色表現(xiàn)形式7.3.3PC端活動(dòng)專題頁的設(shè)計(jì)要點(diǎn)（2）模塊分隔模塊分隔即對(duì)PC端活動(dòng)專題頁的同一版塊中的不同模塊進(jìn)行區(qū)分，以將每個(gè)模塊都作為一個(gè)相對(duì)獨(dú)立的視覺單元。根據(jù)表現(xiàn)形式的不同，模塊分隔有矩形分隔和場景分隔。矩形分隔場景分隔7.3.3PC端活動(dòng)專題頁的設(shè)計(jì)要點(diǎn)使用“新建參考線版面”命令創(chuàng)建參考線版面，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”快捷鍵調(diào)整圖片顯示區(qū)域。7.3.4課堂案例—設(shè)計(jì)家電平臺(tái)初春換新PC端活動(dòng)專題頁效果圖7.4?手機(jī)端活動(dòng)專題頁的頁面設(shè)計(jì)手機(jī)端活動(dòng)專題頁的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專題頁的頁面結(jié)構(gòu)課堂案例——設(shè)計(jì)家電平臺(tái)初春換新手機(jī)端活動(dòng)專題頁手機(jī)端活動(dòng)專題頁的設(shè)計(jì)尺寸可以參考手機(jī)端電商平臺(tái)和店鋪首頁的設(shè)計(jì)尺寸進(jìn)行設(shè)置。通常將手機(jī)端平臺(tái)活動(dòng)專題頁的寬度設(shè)置為750px，手機(jī)端店鋪活動(dòng)專題頁的寬度設(shè)置為1200px，兩側(cè)的邊距一般設(shè)置為20px、24px、30px、32px、40px以及50px，建議設(shè)置30px以上的邊距；高度不限，可以根據(jù)商家的不同需要進(jìn)行變化。7.4.1手機(jī)端活動(dòng)專題頁的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專題頁與PC端活動(dòng)專題頁的頁面結(jié)構(gòu)類似，由Banner、活動(dòng)促銷區(qū)以及商品陳列區(qū)組成。參考1.5.3小節(jié)確定好活動(dòng)專題頁的柵格系統(tǒng)，根據(jù)主流電商平臺(tái)設(shè)計(jì)手機(jī)端活動(dòng)專題頁的版塊尺寸，同樣可總結(jié)出緊湊型和寬松型兩種類型，并可根據(jù)不同呈現(xiàn)內(nèi)容對(duì)版塊進(jìn)行同類型的組合使用。7.4.2手機(jī)端活動(dòng)專題頁的頁面結(jié)構(gòu)活動(dòng)專題頁使用“新建參考線版面”命令創(chuàng)建參考線版面，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”快捷鍵調(diào)整圖片顯示區(qū)域。

7.4.3課堂案例—設(shè)計(jì)家電平臺(tái)初春換新手機(jī)端活動(dòng)專題頁效果圖使用Photoshop的繪圖工具、文字工具設(shè)計(jì)堅(jiān)果店鋪年貨盛典PC端活動(dòng)專題頁。課堂練習(xí)—設(shè)計(jì)堅(jiān)果店鋪年貨盛典PC端活動(dòng)專題頁效果圖使用Photoshop的繪圖工具、文字工具設(shè)計(jì)堅(jiān)果店鋪年貨盛典手機(jī)端活動(dòng)專題頁。課后習(xí)題—設(shè)計(jì)堅(jiān)果店鋪年貨盛典手機(jī)端活動(dòng)專題頁效果圖第8章PC端店鋪首頁設(shè)計(jì)本章介紹：PC端店鋪首頁設(shè)計(jì)是電商視覺設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，精心設(shè)計(jì)的PC端店鋪首頁能夠向消費(fèi)者傳達(dá)品牌感和加強(qiáng)消費(fèi)者對(duì)店鋪的信任感。本章針對(duì)PC端店鋪首頁的基本概念以及設(shè)計(jì)規(guī)則等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的PC端店鋪首頁進(jìn)行設(shè)計(jì)演練。通過對(duì)本章的學(xué)習(xí)，學(xué)生可以對(duì)PC端店鋪首頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，了解PC端店鋪首頁的設(shè)計(jì)思路，掌握其制作方法。了解PC端店鋪首頁的基本概念明確PC端店鋪首頁的設(shè)計(jì)規(guī)則知識(shí)目標(biāo)明確PC端店鋪首頁的設(shè)計(jì)思路掌握PC端店鋪首頁的制作方法能力目標(biāo)培養(yǎng)綜合處理問題的能力培養(yǎng)商業(yè)設(shè)計(jì)思維素養(yǎng)目標(biāo)8.1PC端店鋪首頁概述店鋪首頁是消費(fèi)者進(jìn)入店鋪的第一個(gè)展示頁面，具有展現(xiàn)品牌氣質(zhì)、承擔(dān)流量分發(fā)的功能。視覺精美的首頁，不但可以提升消費(fèi)者對(duì)店鋪的好感，還可以提高商品轉(zhuǎn)化率，因此需要電商視覺設(shè)計(jì)師用心設(shè)計(jì)。PC端店鋪首頁的寬度為1920px，高度不限，其設(shè)計(jì)可以根據(jù)商家不同需要和后臺(tái)裝修模塊進(jìn)行組合變化。首頁的核心模塊通常由店招與導(dǎo)航欄、輪播海報(bào)、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息構(gòu)成。PC端店鋪首頁8.2店招與導(dǎo)航欄設(shè)計(jì)店招與導(dǎo)航欄的基本概念店招與導(dǎo)航欄的設(shè)計(jì)規(guī)則應(yīng)用案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁店招與導(dǎo)航欄店招即店鋪的招牌，主要用于展示店鋪品牌、活動(dòng)內(nèi)容和特價(jià)商品等內(nèi)容；導(dǎo)航欄則是對(duì)商品進(jìn)行的分類，用于幫助消費(fèi)者定位到當(dāng)前位置、完成頁面之間的跳轉(zhuǎn)并快速找到商品。店招導(dǎo)航效果圖8.2.1店招與導(dǎo)航欄的基本概念店招：以淘寶為例，店招可以分為常規(guī)店招和通欄店招兩類，常規(guī)店招尺寸為950px×120px；通欄店招尺寸建議為1920px×150px。導(dǎo)航欄：導(dǎo)航欄高度可以為10px～50px，建議為30px；導(dǎo)航欄字體建議為黑體和宋體，字體為黑體時(shí)字號(hào)建議為14px、16px，字體為宋體時(shí)字號(hào)建議為12px、14px；字間距建議為20px。8.2.2店招與導(dǎo)航欄的設(shè)計(jì)規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本圖形。8.2.3課堂案例—設(shè)計(jì)實(shí)木家具PC端店鋪首頁店招與導(dǎo)航欄效果圖8.3輪播海報(bào)設(shè)計(jì)輪播海報(bào)的基本概念輪播海報(bào)的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁輪播海報(bào)8.3.1輪播海報(bào)的基本概念輪播海報(bào)即多張海報(bào)循環(huán)播放，主要用于進(jìn)行商品宣傳和活動(dòng)促銷等任務(wù)。設(shè)計(jì)師應(yīng)對(duì)每張海報(bào)的主題、構(gòu)圖和配色等因素進(jìn)行綜合考慮和設(shè)計(jì)。左右布局輪播海報(bào)

上下布局輪播海報(bào)輪播海報(bào)的設(shè)計(jì)尺寸可以參考4.2.1小節(jié)中的PC端全屏海報(bào)和PC端常規(guī)海報(bào)的設(shè)計(jì)尺寸。其他設(shè)計(jì)規(guī)則可以參考4.2節(jié)和4.3節(jié)。8.3.2輪播海報(bào)的設(shè)計(jì)規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。8.3.3課堂案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁輪播海報(bào)效果圖8.4優(yōu)惠券設(shè)計(jì)優(yōu)惠券的基本概念優(yōu)惠券的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁優(yōu)惠券優(yōu)惠券即減價(jià)優(yōu)惠的憑證，發(fā)放優(yōu)惠券是店鋪常用的促銷方式，也是吸引消費(fèi)者進(jìn)行二次消費(fèi)的策略。優(yōu)惠券8.4.1優(yōu)惠券的基本概念優(yōu)惠券的內(nèi)容一定要清晰，滿減條件建議使用黑體，突出顯示，這樣便于消費(fèi)者計(jì)算使用。8.4.2優(yōu)惠券的設(shè)計(jì)規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“橫排文字”工具添加文字，使用“橢圓”工具、“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果。8.4.3課堂案例—設(shè)計(jì)實(shí)木家具PC端店鋪首頁優(yōu)惠券效果圖8.5分類模塊設(shè)計(jì)分類模塊的基本概念分類模塊的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁分類模塊分類模塊用于店鋪商品的類別展示，是引導(dǎo)消費(fèi)者購買商品的重要模塊。8.5.1分類模塊的基本概念分類模塊展示效果圖分類模塊的設(shè)計(jì)需要符合店鋪的整體裝修風(fēng)格。字體為黑體或粗宋，圖標(biāo)風(fēng)格需要統(tǒng)一，圖片如果橫向分類，寬度應(yīng)該控制在950px以內(nèi)；圖片如果縱向分類，高度應(yīng)該控制為150px以內(nèi)。另外，圖標(biāo)、圖片與文案應(yīng)該相互呼應(yīng)。8.5.2分類模塊的設(shè)計(jì)規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具“直線”工具和“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵調(diào)整圖片顯示區(qū)域。8.5.3課堂案例—設(shè)計(jì)實(shí)木家具PC端店鋪首頁分類模塊效果圖8.6商品展示設(shè)計(jì)商品展示的基本概念商品展示的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木家具PC端店鋪首頁商品展示商品展示即商品的展示區(qū)域，是用于向消費(fèi)者展示熱銷商品、新款商品和推薦商品等內(nèi)容的模塊。8.6.1商品展示的定義商品展示商品展示的設(shè)計(jì)形式通常包括圖形形式、圖片形式或文案形式。商品展示的內(nèi)容部分需要選擇店鋪中美觀且有代表性的商品進(jìn)行展示，除此之外，設(shè)計(jì)師還可以選擇臨近下架的商品進(jìn)行展示，以給這類商品優(yōu)先展示的機(jī)會(huì)。關(guān)聯(lián)的素材和整體背景需要相互搭配，并且需要符合店鋪的風(fēng)格。8.6.2商品展示的設(shè)計(jì)規(guī)則展示標(biāo)題設(shè)計(jì)使用“新建參考線”命