電商視覺(jué)設(shè)計(jì)課件 第6章 活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)

第6章活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)本章介紹：活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)是電商視覺(jué)設(shè)計(jì)任務(wù)中具有一定難度的綜合型工作任務(wù)，精心設(shè)計(jì)的活動(dòng)專(zhuān)題頁(yè)能夠營(yíng)造出活動(dòng)的歡慶氛圍，提升消費(fèi)者的購(gòu)買(mǎi)欲望。本章針對(duì)活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型、表現(xiàn)形式以及頁(yè)面設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的活動(dòng)專(zhuān)題頁(yè)進(jìn)行設(shè)計(jì)演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)規(guī)范和制作方法，成功塑造出精彩的活動(dòng)專(zhuān)題頁(yè)。了解活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型熟悉活動(dòng)專(zhuān)題頁(yè)的表現(xiàn)形式熟悉活動(dòng)專(zhuān)題頁(yè)的頁(yè)面設(shè)計(jì)知識(shí)目標(biāo)熟悉平臺(tái)活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)思路掌握平臺(tái)活動(dòng)專(zhuān)題頁(yè)的制作方法熟悉店鋪活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)思路掌握店鋪活動(dòng)專(zhuān)題頁(yè)的制作方法能力目標(biāo)培養(yǎng)良好的活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)的操作習(xí)慣培養(yǎng)對(duì)活動(dòng)專(zhuān)題頁(yè)的審美鑒賞能力培養(yǎng)對(duì)活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)6.1活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型1．PC端活動(dòng)專(zhuān)題頁(yè)（1）PC端平臺(tái)專(zhuān)題頁(yè)P(yáng)C端平臺(tái)專(zhuān)題頁(yè)通常涉及大量的類(lèi)目、品牌以及產(chǎn)品，因此整體布局更緊湊。（2）PC端店鋪專(zhuān)題頁(yè)P(yáng)C端店鋪專(zhuān)題頁(yè)只需要呈現(xiàn)單一類(lèi)目或單一品牌下的少量商品，因此整體布局較為寬松。平臺(tái)專(zhuān)題頁(yè)店鋪專(zhuān)題頁(yè)6.1活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型2．手機(jī)端活動(dòng)專(zhuān)題頁(yè)手機(jī)端活動(dòng)專(zhuān)題頁(yè)與PC端活動(dòng)專(zhuān)題頁(yè)一樣，可以分為平臺(tái)專(zhuān)題頁(yè)和店鋪專(zhuān)題頁(yè)。其中，手機(jī)端平臺(tái)專(zhuān)題頁(yè)的頭部Banner常設(shè)計(jì)為橫屏小尺寸，而手機(jī)端店鋪專(zhuān)題頁(yè)的頭部Banner則設(shè)計(jì)為豎屏大尺寸。平臺(tái)專(zhuān)題頁(yè)店鋪專(zhuān)題頁(yè)6.2活動(dòng)專(zhuān)題頁(yè)的表現(xiàn)形式矩形排列場(chǎng)景展示矩形排列，即用矩形的形式將活動(dòng)專(zhuān)題頁(yè)的內(nèi)容按照一定規(guī)則進(jìn)行排列。這種表現(xiàn)形式能夠清晰地展示商品和活動(dòng)信息，令畫(huà)面整齊舒適。根據(jù)不同的設(shè)計(jì)風(fēng)格，矩形排列又可以細(xì)分為扁平化矩形和擬物化矩形。扁平化矩形是將矩形刻畫(huà)成輕量化的視覺(jué)元素，從而更好地凸顯商品和活動(dòng)信息。擬物化矩形則是將矩形刻畫(huà)成立體感的視覺(jué)元素，使其成為畫(huà)面亮點(diǎn)，讓畫(huà)面頗具美感。6.2.1矩形排列矩形排列場(chǎng)景展示，即用場(chǎng)景化的形式呈現(xiàn)活動(dòng)專(zhuān)題的內(nèi)容。這種表現(xiàn)形式能夠突出活動(dòng)主題，使活動(dòng)信息和商品巧妙地融入場(chǎng)景之內(nèi)，極具連貫性與創(chuàng)意性。6.2.2場(chǎng)景展示場(chǎng)景展示6.3活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)要點(diǎn)商品陳列內(nèi)容分隔6.3.1商品陳列1．商品展示形式常用的商品展示形式有攝影圖片、背景設(shè)計(jì)和臺(tái)面設(shè)計(jì)三種，這三種商品展示形式各有所長(zhǎng)，適用于大多數(shù)品類(lèi)商品。攝影圖片背景設(shè)計(jì)臺(tái)面設(shè)計(jì)6.3.1商品陳列2．商品展示視角商品的展示視角有平視、仰視和俯視三種，不同的視角可以給人帶來(lái)不同的感受，具體可以查看2.2.2節(jié)合成的透視知識(shí)。其中平視和俯視會(huì)令商品展示得更加自然，因此被廣泛使用。仰視會(huì)給人帶來(lái)刻意的感受，缺乏真實(shí)感和親切感，因此較少被使用。平視俯視1．版塊分隔版塊分隔即對(duì)活動(dòng)專(zhuān)題頁(yè)中不同的主題專(zhuān)區(qū)進(jìn)行區(qū)分，常見(jiàn)的專(zhuān)區(qū)有活動(dòng)促銷(xiāo)區(qū)和商品陳列區(qū)。版塊分隔的設(shè)計(jì)通常有分隔欄、顏色和表現(xiàn)形式三種。6.3.2內(nèi)容分隔分隔欄顏色表現(xiàn)形式2．模塊分隔模塊分隔即對(duì)活動(dòng)專(zhuān)題頁(yè)同一版塊中的不同模塊進(jìn)行區(qū)分，從而保證每個(gè)模塊都是一個(gè)相對(duì)獨(dú)立的視覺(jué)單元。根據(jù)表現(xiàn)形式的不同，模塊分隔有矩形分隔和場(chǎng)景分隔兩種。6.3.2內(nèi)容分隔矩形分隔場(chǎng)景分隔6.4PC端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面設(shè)計(jì)PC端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸PC端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)應(yīng)用案例——設(shè)計(jì)家電平臺(tái)初春煥新PC端活動(dòng)專(zhuān)題頁(yè)P(yáng)C端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸可以參考第7章PC端店鋪首頁(yè)設(shè)計(jì)的尺寸進(jìn)行設(shè)置。通常將寬度設(shè)置為1920像素，重要的活動(dòng)和商品信息建議設(shè)置在1200像素以?xún)?nèi)；高度不限，可以根據(jù)店鋪不同需要而變化。6.4.1PC端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸活動(dòng)專(zhuān)題頁(yè)通常由Banner、活動(dòng)促銷(xiāo)區(qū)以及商品陳列區(qū)組成。參考1.5.3節(jié)中柵格系統(tǒng)確立好活動(dòng)專(zhuān)題頁(yè)的柵格，根據(jù)主流電商視覺(jué)設(shè)計(jì)活動(dòng)專(zhuān)題頁(yè)的版塊尺寸，可以總結(jié)出緊湊型和寬松型等7種版塊。緊湊型版塊排列緊湊、占屏較小，適合展示文字較少或版面緊張的內(nèi)容，寬松型版塊排列寬松、占屏較大，適合展示文字較多或需要著重呈現(xiàn)的內(nèi)容。6.4.2PC端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)活動(dòng)專(zhuān)題頁(yè)使用“新建參考線(xiàn)版面”命令建立參考線(xiàn)，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線(xiàn)”工具、“橢圓”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。6.4.3應(yīng)用案例——設(shè)計(jì)家電平臺(tái)初春煥新PC端活動(dòng)專(zhuān)題頁(yè)效果圖6.5?手機(jī)端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面設(shè)計(jì)手機(jī)端店鋪活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)應(yīng)用案例——設(shè)計(jì)家電平臺(tái)初春煥新手機(jī)端活動(dòng)專(zhuān)題頁(yè)手機(jī)端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸可以參考手機(jī)端電商平臺(tái)和店鋪首頁(yè)設(shè)計(jì)的尺寸進(jìn)行設(shè)置。通常將電商平臺(tái)專(zhuān)題頁(yè)的寬度設(shè)置為750像素，店鋪專(zhuān)題頁(yè)的寬度設(shè)置為1200像素，兩側(cè)的邊距一般有20像素、24像素、30像素、32像素、40像素及50像素，建議采用30像素以上的邊距；高度不限，可以根據(jù)店鋪不同需要而變化。6.5.1?手機(jī)端店鋪活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專(zhuān)題頁(yè)與PC端活動(dòng)專(zhuān)題頁(yè)一樣，由Banner、活動(dòng)促銷(xiāo)區(qū)以及商品陳列區(qū)組成。參考1.5.3節(jié)柵格系統(tǒng)確立好活動(dòng)專(zhuān)題頁(yè)的柵格，根據(jù)主流電商視覺(jué)設(shè)計(jì)活動(dòng)專(zhuān)題頁(yè)的版塊尺寸，同樣可總結(jié)出緊湊型和寬松型等7種版塊，讀者根據(jù)不同呈現(xiàn)內(nèi)容進(jìn)行同類(lèi)型的組合使用。6.5.2手機(jī)端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)活動(dòng)專(zhuān)題頁(yè)使用“新建參考線(xiàn)版面”命令建立參考線(xiàn)，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線(xiàn)”工具、“橢圓”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。6.5.3應(yīng)用案例——設(shè)計(jì)家電平臺(tái)初春煥新手機(jī)端活動(dòng)專(zhuān)題頁(yè)效果圖使用“新建參考線(xiàn)版面”命令建立參考線(xiàn)，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果。課堂實(shí)訓(xùn)——設(shè)