電商設(shè)計電子課件

第9章PC端活動專題頁設(shè)計本章介紹：PC端活動專題頁設(shè)計是電商設(shè)計任務(wù)中具備一定難度的綜合型工作任務(wù)，通過精心設(shè)計的PC端活動專題頁能夠營造出活動的歡慶氛圍，提升用戶的興趣。本章針對活動專題頁的基本類型、表現(xiàn)形式以及版塊設(shè)計等基礎(chǔ)知識進(jìn)行系統(tǒng)講解，并針對流行風(fēng)格與典型行業(yè)的PC端活動專題頁進(jìn)行設(shè)計演練。通過本章的學(xué)習(xí)，讀者可以對PC端活動專題頁的設(shè)計有一個系統(tǒng)的認(rèn)識，并快速掌握PC端活動專題頁的設(shè)計規(guī)范和制作方法，成功塑造出色精彩的PC端活動專題頁。了解活動專題頁的基本類型熟悉活動專題頁的表現(xiàn)形式熟悉活動專題頁的頁面設(shè)計學(xué)習(xí)目標(biāo)

活動專題頁是指在各種節(jié)日活動主題下，進(jìn)行商品促銷的電商頁面。根據(jù)服務(wù)對象，活動專題頁可以分為平臺專題頁和店鋪專題頁。

平臺專題頁通常涉及大量的類目、品牌以及產(chǎn)品，因此整體布局更緊湊。頭部Banner常設(shè)計為高度較短、小尺寸類型，以便能在首屏展示更多信息。而店鋪專題頁只需要呈現(xiàn)單一類目或單一品牌下的少量商品，因此整體布局較為寬松。頭部Banner常設(shè)計為高度較高、大尺寸類型，以便能更好地體現(xiàn)主題和氛圍。9.1活動專題頁的基本類型矩形排列場景展示9.2活動專題頁的表現(xiàn)形式根據(jù)活動專題頁的信息呈現(xiàn)和商品陳列，專題頁通常有矩形排列和場景展示兩種表現(xiàn)形式，這兩種表現(xiàn)形式各有干秋，被大量應(yīng)用于各類專題設(shè)計中。9.2活動專題頁的表現(xiàn)形式矩形排列即用矩形的形式將專題頁的內(nèi)容按照一定規(guī)則進(jìn)行排列。這種表現(xiàn)形式能夠清晰地展示信息內(nèi)容，令畫面整齊舒適。根據(jù)不同的設(shè)計風(fēng)格，矩形排列又可以細(xì)分為扁平化矩形和擬物化矩形，扁平化矩形是將矩形刻畫成輕量化的視覺元素，從而更好地凸顯商品和信息。擬物化矩形則是將矩形刻畫成立體感的視覺元素，使矩形成為畫面亮點，讓畫面頗具美感。9.2.1矩形排列矩形排列效果圖場景展示即用場景化的形式呈現(xiàn)頁面中的內(nèi)容。這種表現(xiàn)形式能夠突出主題氛圍，使信息和商品巧妙地融入場景之內(nèi)，設(shè)計極具連貫性與創(chuàng)意度。9.2.2場景展示場景展示9.3活動專題頁的頁面設(shè)計活動專題頁的設(shè)計尺寸活動專題頁的頁面結(jié)構(gòu)活動專題頁的設(shè)計要點PC端活動專題頁的設(shè)計尺寸可以參考第七章PC端店鋪首頁設(shè)計的尺寸進(jìn)行設(shè)置。通常將寬度設(shè)置為1920像素，重要的信息和商品建議設(shè)計在1200像素以內(nèi)。高度不限，可以根據(jù)商家不同需要進(jìn)行組合變化。9.3.1活動專題頁的設(shè)計尺寸活動專題頁通常由Banner、活動促銷區(qū)以及商品陳列區(qū)組成，參考1.5.3柵格系統(tǒng)確立好活動專題頁的柵格，根據(jù)主流電商設(shè)計活動專題頁的版塊尺寸，可以總結(jié)出緊湊型和寬松型共7種版塊。設(shè)計時建議參考圖中的比例，不然容易令版塊在結(jié)構(gòu)上失衡。9.3.2活動專題頁的頁面結(jié)構(gòu)緊湊型模塊寬松型模塊1.商品陳列（1）商品展示形式9.3.3活動專題頁的設(shè)計要點攝影扁平臺面（2）商品展示角度9.3.3活動專題頁的設(shè)計要點平視俯視2.內(nèi)容分隔（1）版塊分隔版塊分隔即對專題頁中不同的主題專區(qū)進(jìn)行區(qū)分，常見的專區(qū)有活動促銷區(qū)和商品陳列區(qū)。版塊區(qū)隔的設(shè)計通常有分隔欄、顏色和表現(xiàn)形式三種。9.3.3活動專題頁的設(shè)計要點分隔欄顏色表現(xiàn)形式（2）模塊分隔模塊分隔即對專題頁同一版塊中的不同模塊進(jìn)行區(qū)分，以實現(xiàn)每個模塊都是一個相對獨立的視覺單元。根據(jù)表現(xiàn)形式的不同，模塊分隔有矩形分隔和場景分隔。9.3.3活動專題頁的設(shè)計要點矩形分隔場景分隔使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。9.3.4課堂案例-品質(zhì)國貨家電平臺專題頁設(shè)計效果圖學(xué)習(xí)使用繪圖工具、文字工具制作初春煥新家電平臺專題頁。