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

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

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

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

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