第6章商品詳情頁設計本章介紹：商品詳情頁設計是電商視覺設計任務中的綜合型工作任務，精心設計的商品詳情頁能夠提升消費者對商品的購買欲望。本章針對商品詳情頁的基本概念和設計規(guī)則等基礎知識進行系統(tǒng)講解，并針對流行風格與典型行業(yè)的商品詳情頁進行設計演練。通過對本章的學習，學生可以對商品詳情頁的設計有一個系統(tǒng)的認識，了解商品詳情頁的設計思路，掌握其制作方法。了解商品詳情頁的基本概念明確商品詳情頁的設計規(guī)則知識目標明確商品詳情頁的設計思路掌握商品詳情頁的制作方法能力目標培養(yǎng)商業(yè)設計思維提高賣點提煉能力素養(yǎng)目標6.1商品詳情頁概述商品詳情頁具有展現(xiàn)商品內容、達成商品轉化的功能和作用。商品詳情頁的核心部分通常由商品焦點圖、賣點提煉、商品展示、細節(jié)展示、商品信息和其他模塊構成。6.2商品焦點圖設計商品焦點圖的基本概念商品焦點圖的設計規(guī)則課堂案例——設計實木沙發(fā)商品焦點圖商品焦點圖即商品詳情頁中的商品Banner，類似于店鋪首頁的輪播海報，用于令商品詳情頁中的商品更加吸引消費者，更好地展示商品優(yōu)勢。6.2.1商品焦點圖的基本概念商品海報商品焦點圖可以根據(jù)適配平臺和尺寸分為兩類，一類是適配平臺以淘寶為代表的，寬度為750px的商品焦點圖；另一類是適配平臺以京東和天貓為代表的，寬度為790px的商品焦點圖。兩者高度不限，通常建議為950px。這兩類商品焦點圖的主標題字號建議為60～70px，副標題字號建議為40～50px，文字敘述字號建議為25～30px。6.2.2商品焦點圖的設計規(guī)則使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本圖形，使用“創(chuàng)建新的填充或調整圖層”按鈕為圖像校色。6.2.3課堂案例—設計實木沙發(fā)商品焦點圖效果圖賣點提煉的基本概念賣點提煉的設計規(guī)則課堂案例——設計實木沙發(fā)賣點提煉6.3賣點提煉設計賣點提煉即對商品特點和消費者痛點的提煉，主要用于向消費者展示商品獨特之處，令其產生購買欲望。6.3.1賣點提煉的基本概念賣點提煉6.3.2賣點提煉的設計規(guī)則賣點提煉中的文本應簡短且具有說服力，建議將其字號設置為30～40px，字體設置為黑體，賣點提煉中的圖標應醒目且和賣點呼應。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本圖形，使用“創(chuàng)建新的填充或調整圖層”按鈕為圖像校色。6.3.3課堂案例—設計實木沙發(fā)賣點提煉效果圖商品展示的基本概念商品展示的設計規(guī)則課堂案例——設計實木沙發(fā)商品展示6.4?商品展示設計商品展示即展示商品的內容，通常一屏一賣點，進一步實現(xiàn)展示商品優(yōu)勢、呈現(xiàn)商品功能的作用。6.4.1商品展示的基本概念商品展示6.4.2?商品展示的設計規(guī)則商品展示的設計規(guī)則與商品焦點圖的設計規(guī)則類似。需要注意的是，因為商品展示通常包括3～5張圖片，所以各圖片中商品的角度和背景既要有統(tǒng)一性又要有一定的區(qū)別，以免給消費者帶來視覺疲勞。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具、“鋼筆”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵實現(xiàn)新中式沙發(fā)商品展示。6.4.3課堂案例—設計實木沙發(fā)商品展示效果圖細節(jié)展示的基本概念細節(jié)展示的設計規(guī)則課堂案例——設計實木沙發(fā)細節(jié)展示6.5?細節(jié)展示設計細節(jié)展示即商品的細節(jié)放大圖，它將商品細節(jié)進行最大限度的展示，可以使消費者更加信任商品。6.5.1?細節(jié)展示的基本概念細節(jié)展示6.5.2?細節(jié)展示的設計規(guī)則細節(jié)展示在設計時不宜設計得太復雜，整體應呈現(xiàn)簡潔的效果。如果商品帶有背景，建議將背景設計為淺色，可以保證較好地展示商品細節(jié)。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建新的填充或調整圖層”按鈕為圖像校色，使用“創(chuàng)建剪貼蒙版”快捷鍵實現(xiàn)實木沙發(fā)細節(jié)展示。6.5.3課堂案例—設計實木沙發(fā)細節(jié)展示效果圖商品信息的基本概念商品信息的設計規(guī)則課堂案例——設計實木沙發(fā)商品信息6.6?商品信息設計商品信息即商品的真實數(shù)據(jù)。設計師需要將商品的尺寸、顏色等內容充分展示給消費者，幫助消費者了解商品。6.6.1商品信息的基本概念商品信息6.6.2?商品信息的設計規(guī)則商品信息在設計時需要將大量的數(shù)據(jù)歸類整理，并將數(shù)據(jù)以圖表的形式表現(xiàn)，令消費者可以直觀地了解商品信息。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“直線”工具繪制基本圖形。6.6.3課堂案例—設計實木沙發(fā)商品信息效果圖其他模塊的基本概念其他模塊的設計規(guī)則課堂案例——設計實木沙發(fā)其他模塊6.7?其他模塊設計“質量保證”即展示商品的相關證書，起到承諾商品質量、增強消費者信賴度的作用；“品牌實力”即展示所在店鋪的相關品牌故事，起到提升品牌氣勢、加深消費者記憶的作用；“快遞售后”有時又稱為“買家須知”，包括快遞服務、退換流程、售后承諾等相關內容，起到優(yōu)化消費者購買商品的體驗、提高消費者滿意度的作用。6.7.1?其他模塊的基本概念其他模塊6.7.2?其他模塊的設計規(guī)則其他模塊由于處于整個商品詳情頁接近尾部的位置，消費者觀看時會產生一定的視覺疲憊感，因此在設計時一定要突出該模塊的重點，設計風格以簡潔、醒目為主。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本圖形。6.7.3課堂案例—設計實木沙發(fā)其他模塊效果圖使用Photoshop的繪圖工具、文字工具設計溫和洗面奶商品詳情頁。課堂練習—設計溫和洗面奶商品詳情頁效果圖使用Photoshop的繪圖工具、文字工具設計入耳式藍牙耳機商品詳情頁。課后習題——設計溫和洗面奶商品詳情頁效果圖第7章活動專題頁設計本章介紹：活動專題頁設計是電商視覺設計任務中具有一定難度的綜合型工作任務，精心設計的活動專題頁能夠營造出歡樂的活動氛圍，提升消費者的興趣。本章針對活動專題頁的基本類型、表現(xiàn)形式及頁面設計等基礎知識進行系統(tǒng)講解，并針對流行風格與典型行業(yè)的活動專題頁進行設計演練。通過對本章的學習，學生可以對活動專題頁的設計有一個系統(tǒng)的認識，了解活動專題頁的設計思路，掌握其制作方法。了解活動專題頁的基本類型熟悉活動專題頁的表現(xiàn)形式熟悉活動專題頁的頁面設計知識目標明確平臺活動專題頁的設計思路掌握平臺活動專題頁的制作方法熟悉店鋪活動專題頁的設計思路掌握店鋪活動專題頁的制作方法能力目標提高整理、提煉信息的能力提高版面設計的能力素養(yǎng)目標7.1活動專題頁的基本類型活動專題頁是指在各種節(jié)日活動主題下進行商品促銷的電商頁面。根據(jù)服務對象，PC端活動專題頁可以分為平臺活動專題頁和店鋪活動專題頁。店鋪專題頁平臺專題頁

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

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

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

上下布局輪播海報輪播海報的設計尺寸可以參考4.2.1小節(jié)中的PC端全屏海報和PC端常規(guī)海報的設計尺寸。其他設計規(guī)則可以參考4.2節(jié)和4.3節(jié)。8.3.2輪播海報的設計規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調整圖片顯示區(qū)域。8.3.3課堂案例——設計實木家具PC端店鋪首頁輪播海報效果圖8.4優(yōu)惠券設計優(yōu)惠券的基本概念優(yōu)惠券的設計規(guī)則課堂案例——設計實木家具PC端店鋪首頁優(yōu)惠券優(yōu)惠券即減價優(yōu)惠的憑證，發(fā)放優(yōu)惠券是店鋪常用的促銷方式，也是吸引消費者進行二次消費的策略。優(yōu)惠券8.4.1優(yōu)惠券的基本概念優(yōu)惠券的內容一定要清晰，滿減條件建議使用黑體，突出顯示，這樣便于消費者計算使用。8.4.2優(yōu)惠券的設計規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“橫排文字”工具添加文字，使用“橢圓”工具、“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果。8.4.3課堂案例—設計實木家具PC端店鋪首頁優(yōu)惠券效果圖8.5分類模塊設計分類模塊的基本概念分類模塊的設計規(guī)則課堂案例——設計實木家具PC端店鋪首頁分類模塊分類模塊用于店鋪商品的類別展示，是引導消費者購買商品的重要模塊。8.5.1分類模塊的基本概念分類模塊展示效果圖分類模塊的設計需要符合店鋪的整體裝修風格。字體為黑體或粗宋，圖標風格需要統(tǒng)一，圖片如果橫向分類，寬度應該控制在950px以內；圖片如果縱向分類，高度應該控制為150px以內。另外，圖標、圖片與文案應該相互呼應。8.5.2分類模塊的設計規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具“直線”工具和“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵調整圖片顯示區(qū)域。8.5.3課堂案例—設計實木家具PC端店鋪首頁分類模塊效果圖8.6商品展示設計商品展示的基本概念商品展示的設計規(guī)則課堂案例——設計實木家具PC端店鋪首頁商品展示商品展示即商品的展示區(qū)域，是用于向消費者展示熱銷商品、新款商品和推薦商品等內容的模塊。8.6.1商品展示的定義商品展示商品展示的設計形式通常包括圖形形式、圖片形式或文案形式。商品展示的內容部分需要選擇店鋪中美觀且有代表性的商品進行展示，除此之外，設計師還可以選擇臨近下架的商品進行展示，以給這類商品優(yōu)先展示的機會。關聯(lián)的素材和整體背景需要相互搭配，并且需要符合店鋪的風格。8.6.2商品展示的設計規(guī)則展示標題設計使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具和“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵調整圖片顯示區(qū)域。8.6.3課堂案例—設計實木家具PC端店鋪首頁商品展示效果圖8.7底部信息設計底部信息的基本概念底部信息的設計規(guī)則課堂案例——設計實木家具PC端店鋪首頁底部信息底部信息即其他信息展示區(qū)域，用于展示店鋪品牌故事、購物須知和店鋪公告等信息。8.7.1底部信息的基本概念底部信息展示底部信息的主要功能是在為消費者提供方便的同時體現(xiàn)店鋪的服務，設計時需使用簡短的文字和具有代表性的圖標展示相關的信息。8.7.2底部信息的設計規(guī)則使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具和“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵調整圖片顯示區(qū)域。8.7.3課堂案例—設計實木家具PC端店鋪首頁底部信息效果圖使用Photoshop的繪圖工具、文字工具設計護膚品PC端店鋪首頁。課堂練習—設計護膚品PC端店鋪首頁效果圖使用Photoshop的繪圖工具、文字工具設計數(shù)碼產品PC端店鋪首頁。課后習題—設計數(shù)碼產品PC端店鋪首頁效果圖第9章手機端店鋪首頁設計本章介紹：隨著移動互聯(lián)網的發(fā)展及普及，消費者在手機端電商平臺進行網購已經成為日常生活的一部分。因此，手機端店鋪首頁的設計對于所有商家而言都至關重要，是電商視覺設計任務中的核心工作。本章針對手機端店鋪首頁的基本概念和設計規(guī)則等基礎知識進行系統(tǒng)講解，并針對流行風格與典型行業(yè)的手機端店鋪首頁進行設計演練。通過對本章的學習，學生可以對手機端店鋪首頁的設計有一個系統(tǒng)的認識，了解手機端店鋪首頁的設計思路，掌握其制作方法。?了解手機端店鋪首頁的基本概念明確手機端店鋪首頁的設計規(guī)則知識目標明確手機端店鋪首頁的設計思路掌握手機端店鋪首頁的制作方法能力目標培養(yǎng)商業(yè)設計思維提高版式審美水平素養(yǎng)目標9.1手機端店鋪概述設計手機端店鋪的必要性手機端店鋪與PC端店鋪的區(qū)別手機端店鋪的設計關鍵點隨著移動互聯(lián)網的發(fā)展及普及，各大電商平臺相繼開發(fā)App，便于消費者使用手機端進行購物。因此，手機端店鋪的設計對于商家至關重要。設計精美的手機端店鋪9.1.1設計手機端店鋪的必要性1.設計尺寸不同手機端店鋪和PC端店鋪的設計尺寸大有不同，設計師不能將設計好的PC端店鋪圖片照搬到手機端店鋪，否則會產生界面混亂、顯示不全和效果不佳等問題。9.1.2手機端店鋪與PC端店鋪的區(qū)別手機端店鋪首頁PC端店鋪首頁2.頁面布局不同由于設計尺寸不同，手機端店鋪與PC端店鋪的頁面布局也要有所區(qū)別，以此優(yōu)化消費者在手機端店鋪的瀏覽體驗。如在PC端店鋪使用左右布局的橫版海報，在手機端店鋪則需要將其設計成上下布局的豎版海報。手機端店鋪首頁PC端店鋪首頁9.1.2手機端店鋪與PC端店鋪的區(qū)別3.構成模塊不同手機端店鋪的構成模塊劃分清晰，并且會根據(jù)設備特點加入更能吸引消費者的模塊。如設計手機端店鋪首頁時，通常會在店招下方加入文字標題、店鋪熱搜和店鋪會員等模塊，較PC端店鋪的模塊更加豐富。9.1.2手機端店鋪與PC端店鋪的區(qū)別手機端店鋪首頁

PC端店鋪首頁4.信息內容不同由于手機端相比PC端尺寸縮小，手機端店鋪需要在有限的空間進行設計，因此無法通過比較詳細的文字說明商品，而更適合通過精煉的文案介紹商品，并且對重要信息進行加重處理或調整顏色以表示強調。手機端店鋪首頁信息內容PC端店鋪首頁信息內容9.1.2手機端店鋪與PC端店鋪的區(qū)別消費者在手機端店鋪購物得到了便捷的體驗，但對于設計師來說，設計手機端店鋪卻面臨著設備尺寸限制等挑戰(zhàn)。因此在進行手機端店鋪設計時，設計師應該掌握其設計關鍵點，才能事半功倍，下面分別講解手機端店鋪的4個設計關鍵點。符合瀏覽規(guī)范統(tǒng)一平臺視覺進行頁面統(tǒng)一合理運用模塊9.1.3手機端店鋪的設計關鍵點9.2手機端店鋪首頁的設計規(guī)則輪播海報的設計規(guī)則優(yōu)惠券的設計規(guī)則分類模塊的設計規(guī)則商品展示的設計規(guī)則底部信息的設計規(guī)則課堂案例——設計實木家具手機端店鋪首頁手機端店鋪首頁的輪播海報是設計師正式進行設計的模塊，其寬度為1200px，高度為120～2000px，支持.jpg或.png格式，大小不超過2MB。9.2.1輪播海報的設計規(guī)則輪播海報效果圖手機端店鋪首頁的優(yōu)惠券可以依據(jù)8.4節(jié)對PC端店鋪首頁的優(yōu)惠券的講解進行設計。需要注意的是，優(yōu)惠券的設計尺寸、字號大小和色彩搭配要符合手機端的瀏覽規(guī)范。9.2.2優(yōu)惠券的設計規(guī)則優(yōu)惠券效果圖在手機端店鋪首頁中，消費者的瀏覽方式是上下滑動瀏覽，因此在設計時會盡量減少大規(guī)模的點擊交互，分類模塊通常保留在商品類型豐富的手機端店鋪首頁中。手機端店鋪首頁的分類模塊可以依據(jù)8.5節(jié)對PC端店鋪首頁的分類模塊的講解進行設計。需要注意的是，在設計手機端店鋪首頁的分類模塊時可能會進行簡化處理。9.2.3分類模塊的設計規(guī)則手機端首頁分類模塊（左）PC端首頁分類模（右）手機端店鋪首頁的商品展示可以依據(jù)8.6節(jié)對PC端店鋪首頁的商品展示的講解進行設計。但由于面積有限，手機端店鋪首頁的商品展示無法像PC端的一樣以一行4列的形式展示商品，通常會以1行1列、1行2列和1行3列的形式對商品進行展示。9.2.4商品展示的設計規(guī)則商品展示效果圖底部信息由于位于手機端店鋪首頁尾部，消費者在瀏覽時會容易產生視覺疲憊。因此，手機端的大部分店鋪會在其首頁刪除底部信息。在個別保留底部信息的手機端店鋪首頁中，設計師會將PC端店鋪首頁的底部信息做元素簡化或顏色變化等處理，以將其設計為手機端店鋪首頁的底部信息，用于減輕消費者瀏覽負擔，提高消費者觀看興趣。9.2.5底部信息的設計規(guī)則手機端店鋪首頁底部信息PC端店鋪首頁底部信息使用“新建參考線版面”命令創(chuàng)建參考線版面，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”快捷鍵調整圖片顯示區(qū)域。9.2.6課堂案例—設計實木家具手機端店鋪首頁效果圖使用Photoshop的繪圖工具、文字工具設計護膚品手機端店鋪首頁。課堂練習—設計護膚品手機端店鋪首頁效果圖使用Photoshop的繪圖工具、文字工具設計數(shù)碼產品手機端店鋪首頁。課后習題—設計數(shù)碼產品手機端店鋪首頁效果圖第10章商品視頻拍攝與制作本章介紹：本章將詳細介紹商品視頻的拍攝與制作方法，包括商品視頻的基礎知識、商品視頻拍攝和商品視頻制作等。通過對本章的學習，學生可以掌握網店商品視頻的拍攝與制作方法，使商品視頻更容易吸引消費者的注意。?熟悉商品視頻的基礎知識熟悉商品視頻的拍攝流程知識目標熟練使用PremiereProCC2020掌握商品視頻的制作流程掌握運用后期技巧提升商品視頻質量的方法能力目標培養(yǎng)對視頻拍攝與制作的興趣培養(yǎng)商業(yè)思維素養(yǎng)目標10.1商品視頻的基礎知識視頻概述商品視頻的類型10.1.1視頻概述1．視頻的概念一系列的靜態(tài)圖像以電信號的方式加以捕捉、記錄、處理、存儲、傳送與重現(xiàn)等各種技術，然后當這些連續(xù)的靜態(tài)圖像以每秒超過24幀以上的速率變化時，由于人眼的視覺暫留效應，無法辨別單幅的靜態(tài)圖像，就會產生動態(tài)畫面的視覺效果，這樣的動態(tài)畫面叫作視頻。10.1.1視頻概述2．視頻的格式每個品牌的相機的視頻格式各有不同，它們都有各自固定的視頻格式，可以在后期制作中對視頻格式進行轉碼。佳能相機采用了MOV格式，松下和索尼相機則采用了AVCHD格式。尼康的部分相機的視頻格式為AVI，而其推出的部分新款相機也采用了MOV格式。10.1.1視頻概述3．視頻的分辨率與幀速率（1）分辨率分辨率反映了視頻的畫面尺寸，分辨率不同造成畫面尺寸的不同。分辨率越高，清晰度就越高，視頻所占用的內存空間就越大。分辨率10.1.1視頻概述（2）幀速率使用攝像機和帶有錄像功能的數(shù)碼相機時，不僅能夠控制視頻的分辨率，還能選擇每秒的幀數(shù)，也就是幀速率（framespersecond，F(xiàn)PS）。幀速率是指每秒刷新圖片的幀數(shù)（幀每秒），也可以理解為圖形處理器每秒能夠刷新的次數(shù)。不同的錄制設備會輸出不同的幀速率，常用的幀速率有24幀/秒、25幀/秒、30幀/秒、50幀/秒、60幀/秒等，如電影的幀速率標準為24幀/秒，電視劇的幀速率標準為25幀/秒、30幀/秒。每秒播放的畫面數(shù)量越多，視頻中的動作就會越流暢。1．主圖視頻主圖視頻主要應用在商品詳情頁中的主圖位置，用于展示商品的特點和賣點。在制作該視頻時，建議時長為5～60s，建議寬高比為16:9、1:1、3:4，建議尺寸為750px×1000px或以上。10.1.2商品視頻的類型主圖視頻10.2商品視頻拍攝商品視頻拍攝器材的準備商品視頻的拍攝流程課堂案例——拍攝手沖咖啡的主圖視頻10.2.1商品視頻拍攝器材的準備

1．拍攝設備（1）攝像機專業(yè)級高清攝像機對視頻的壓縮較小，還原度較高，使用它可以拍攝出高質量的視頻，但是專業(yè)級高清攝像機價格昂貴、體積大、不便于攜帶，如果不是專門從事視頻拍攝的公司，不建議購買和使用這種攝像機。家用數(shù)碼攝像機（digitalvideo，DV）價格適中、體積小、使用方便，拍攝的視頻清晰度也不錯。專業(yè)級高清攝像機家用DV10.2.1商品視頻拍攝器材的準備（2）手機使用手機拍攝視頻雖然方便，可是無法進行變焦，通過放大和縮小功能調節(jié)畫面時畫面質量會受到影響。并且攝影師在前后移動拍攝視頻時，容易出現(xiàn)廣角變形或穿幫等問題，并且手機不容易控制，會影響商品的視覺呈現(xiàn)效果。10.2.1商品視頻拍攝器材的準備（3）單反相機目前的單反相機不僅提供優(yōu)質的視頻拍攝功能，并且在快捷鍵上放置了視頻檔位，操作變得非常方便。單反相機還可以更換不同的鏡頭，比如配合較大光圈的鏡頭時很容易產生好看的景深效果，使畫面賞心悅目。數(shù)碼單反相機10.2.1商品視頻拍攝器材的準備

2．輔助設備（1）變焦桿變焦桿減少了人手直接操作鏡頭時引起的畫面晃動，是使用單反相機拍攝視頻時用來控制景深效果的必備配件。使用時，將變焦桿套在相機鏡頭的變焦環(huán)上，通過調節(jié)變焦桿進行對焦可以使對焦操作更流暢。同時變焦桿也可作為一個參照物，有助于攝影師記住畫面清晰或模糊時變焦桿所處的位置，從而準確對焦。變焦桿10.2.1商品視頻拍攝器材的準備（2）三腳架挑選三腳架時要了解圖片攝影三腳架與視頻三腳架的區(qū)別。圖片攝影三腳架自重較輕，承重也較輕，云臺可以翻轉，相機上下轉動時不平滑。而視頻三腳架自重和承重都較重，備有手柄，并帶有阻尼，讓相機可以進行平滑的上下左右轉動。另外，視頻三腳架通常采用的是可分離式的云臺和腳架，以便攝影師可以在三腳架上使用不同的云臺。三腳架10.2.1商品視頻拍攝器材的準備（3）支撐系統(tǒng)當單反相機外掛的輔助設備比較多時，這些設備加大了相機的重量，因此僅靠手持單反相機拍攝視頻的話，就會產生晃動，而且單反相機的大畫幅與淺景深會放大這種不穩(wěn)定感，大大降低了視頻的品質。因此，需要一個支撐系統(tǒng)將相機和其他輔助設備連接到一起，從而起到分攤整套設備的重量的作用。手柄與肩托設計可以保證手持拍攝的穩(wěn)定與舒適度。支撐系統(tǒng)10.2.1商品視頻拍攝器材的準備（4）U型手提支架當?shù)臀慌臄z時，可以將相機固定到U型手提支架上，便于多角度的拍攝，讓跟攝更加輕松自如。U型手提支架的頂部配有熱靴，可以放置麥克風與閃光燈等。還可以將手機固定在熱靴上，通過USB連接至相機上作為外部監(jiān)視器對拍攝畫面進行監(jiān)視。也可以將U型手提支架固定到三腳架上。U型手提支架10.2.1商品視頻拍攝器材的準備（5）腳輪腳輪是安裝在三腳架底部的，可以讓三腳架方便自如地移動的輔助工具。拍攝運動鏡頭時，可以使用腳輪來提高三腳架的穩(wěn)定性。腳輪10.2.1商品視頻拍攝器材的準備（6）滑軌小車滑軌小車是一種便攜式裝備，它擺脫了傳統(tǒng)軌道及軌道車系統(tǒng)的困擾及約束，也沒有滑行長度的限制，滑動軌跡及弧度可靈活調整，機動性極強。在使用滑輪小車進行拍攝時，需要一個臺面支撐，然后在臺面上進行拍攝。因此當用于室內桌面拍攝時，使用滑軌小車是個不錯的選擇，而且它十分便宜。滑軌小車10.2.1商品視頻拍攝器材的準備（7）監(jiān)視輔助設備在拍攝視頻時，攝影師需要通過監(jiān)視判斷畫面的曝光、對焦、構圖、運動的位置等，雖然相機自帶液晶顯示屏，但是它們在很多條件下都很難滿足要求。取景眼罩外部監(jiān)視器10.2.1商品視頻拍攝器材的準備3．燈光設備。（1）三基色柔光燈三基色柔光燈的外形和普通的節(jié)能燈一樣，但區(qū)別在于它是在玻璃燈管內壁涂有三基色熒光粉而制成的節(jié)能燈，熒光粉會在紫外線的激發(fā)下發(fā)出光亮，發(fā)光效率遠遠高于普通的節(jié)能燈。三基色柔光燈10.2.1商品視頻拍攝器材的準備（2）LED攝影燈LED攝影燈由LED高亮燈珠組成。它具有色溫準確、發(fā)光效率高、可以長時間照射而不會產生熱量、壽命長、節(jié)能、環(huán)保等特點，并且自帶光源，便于攜帶。但是它的燈光比較硬，需要另外配置柔光設備，而且其價格也比三基色柔光燈的高。LED攝影燈10.2.1商品視頻拍攝器材的準備

4．錄音設備（1）外接麥克風單反相機的機體中都配有內置麥克風，但指向性很差。在空曠的環(huán)境中拍攝時，捕獲到的聲音非常小，會有很多回音。在錄音的同時，也會錄下變焦、電流等雜音，這些雜音在后期制作時被刪除。外接話筒10.2.1商品視頻拍攝器材的準備（2）領夾式無線麥克風領夾式無線麥克風具有體積小、重量輕、靈敏度高、噪音低、可承受高分貝的聲壓級而不失真、有指向性等特點而被廣泛應用。領夾式無線話筒10.2.2商品視頻的拍攝流程在實際拍攝前，攝影師有很多的準備工作需要進行，包括準備拍攝前期需要的工作內容、學習實際拍攝中的拍攝技巧，以及了解拍攝后期的視頻處理及交付方法等。拍攝流程圖1．制作視頻腳本。10.2.3課堂案例—拍攝手沖咖啡的主圖視頻視頻腳本10.2.3課堂案例—拍攝手沖咖啡的主圖視頻

2．考察拍攝場地拍攝場地為一家布置得十分溫馨的咖啡館。拍攝前對咖啡館進行實地考察，重點考察咖啡館的采光情況。這間咖啡館臨街，有較大的窗戶，采光很好，因此無須準備其他的燈光設備。在現(xiàn)場，根據(jù)環(huán)境和光線條件，事先將制作咖啡的位置固定好，這樣可以節(jié)省拍攝時間。拍攝場地10.2.3課堂案例—拍攝手沖咖啡的主圖視頻3．其他準備工作（1）準備道具除了手沖咖啡壺套裝，畫面中還有其他的元素，包括咖啡師的手和服裝、咖啡杯、熱水壺、裝咖啡的器皿以及桌面等，這些也是畫面的組成部分，所以也要精心準備這些道具。（2）工作人員分配拍攝此視頻共需要多名工作人員，其中包括導演、負責拍攝視頻的攝影師、負責拍攝照片的攝影師、咖啡師等。10.2.3課堂案例—拍攝手沖咖啡的主圖視頻4．視頻實際拍攝在腳本已經制作好的情況下，拍攝當天只需要按照腳本計劃好的每一個鏡頭保質保量地完成拍攝即可。拍攝鏡頭10.3商品視頻制作PremiereProCC2020基本操作商品視頻的制作流程課堂案例——制作手沖咖啡的主圖視頻10.3.1

PremiereProCC2020基本操作1．項目文件的基本操作在啟動PremiereProCC2020開始進行視頻制作前，必須先創(chuàng)建新的項目文件或打開已存在的項目文件，這是PremiereProCC2020最基本的操作之一。（1）新建項目文件（2）打開已存在的項目文件（3）保存項目文件（4）關閉項目文件10.3.1

PremiereProCC2020基本操作2．撤銷與重做操作通常情況下，一個完整的項目需要經過反復地調整、修改與比較才能完成，因此，PremiereProCC2020提供了“撤銷”與“重做”命令。在編輯視頻或音頻時，如果用戶的上一步操作是錯誤的，或對操作得到的效果不滿意，選擇“編輯→撤銷”命令即可撤銷該