電商視覺營銷（全彩微課版）課件 第3-5章 商品視覺營銷、店鋪首頁視覺營銷、商品詳情頁視覺營銷

第3章

商品視覺營銷電商視覺營銷（全彩微課版）目錄CONTENTS3.1?拍攝商品3.2美化商品圖片3.3設計商品主圖3.4課堂實訓——設計堅果主圖3.1.1拍攝準備3不管是商家自己準備拍攝器材拍攝還是邀請專業(yè)拍攝團隊拍攝，都應該有一個大致的拍攝計劃，對拍攝風格、拍攝張數等事項進行事先確認，同時準備好拍攝所需的道具，確定好拍攝的時間和地點等。確定拍攝風格確定拍攝張數準備拍攝道具確定時間地點3.1.2拍攝不同類型的商品4服裝類商品根據商品拍攝要求的不同，可以選擇的拍攝方式也不一樣，根據所選風格選擇模特及其妝容，再選擇與所選風格相適合、相關聯(lián)的道具進行裝飾襯托。另外，服裝屬于吸光類商品，表面反射光線的能力較弱，適合使用直射光進行拍攝，以細膩地表現商品的質地。1．服裝類商品的拍攝技巧3.1.2拍攝不同類型的商品5對箱包和部分鞋靴類商品，在拍攝時需要表現商品的質感，特別是皮質商品，往往還要求體現商品的光澤度。在拍攝這類商品時，可以使用較深的背景，從視覺上加強皮質的光澤度；也可在純色背景上進行拍攝，體現的顏色和質感會顯得更加真實。對于需要使用模特展示的箱包鞋靴類商品，其拍攝風格與服裝比較類似，要先根據商品風格確認拍攝風格，然后搭配模特妝容、服飾，再選擇與之相適應的室內或室外場景。2．箱包鞋靴類商品的拍攝技巧3.1.2拍攝不同類型的商品6珠寶首飾類商品一般具有高反光性，可以反射光線并映射周圍物體，在拍攝時往往需要通過布光對光照、反射等要素進行調整。布光時所使用的工具主要包括紙張、反光板、聚光燈、柔光箱等，應根據不同的首飾特性選擇不同的工具進行拍攝。另外，不同材質的首飾對光線的要求不同，對拍攝背景的要求也不一樣，必須根據首飾的材質來選擇最適合的背景和紋理，以更好地烘托被拍攝的對象。3．珠寶首飾類商品的拍攝技巧3.1.2拍攝不同類型的商品7玻璃制品類商品具有反射和投射光線的特性，在拍攝時，需要注意體現商品的輪廓形狀，保證商品的通透感。一般可使用逆光拍攝，讓光線從拍攝對象后面投射，這樣更容易表現出被拍攝物體的通透感。與強直射光相比，在從玻璃窗射入的斜射晨光映襯下拍攝出的商品拍攝效果更好；也可將商品放置在磨砂材質的有機玻璃板或倒影板上輔助拍攝，通過逆光表現商品的通透感。另外，增加曝光也可以體現商品的通透感。4．玻璃制品類商品的拍攝技巧亮線條黑線條目錄CONTENTS3.1?拍攝商品3.2美化商品圖片3.3設計商品主圖3.4課堂實訓——設計堅果主圖3.2.1校正變形的商品圖片9在拍攝垂直構圖的商品圖片時，商品外形常常會出現不夠垂直或變形等情況，此時可對商品圖片進行校正，如使用裁剪工具調整變形的商品圖片等，具體操作如下。觀察圖片旋轉圖片裁剪圖片選取圖片局部內容識別填充后的圖片3.2.2調整商品圖片的色彩10受到拍攝光線和時間的影響，拍攝的商品圖片可能無法還原商品真實色彩，或存在同一商品的多張圖片色調不一致的情況。為了保證商品圖片呈現和諧統(tǒng)一的色調，向消費者展現真實的商品色彩，在保證商品圖片不失真的前提下，需要對其進行調色處理，具體操作如下。觀察圖片調整亮度與對比度調整曝光度3.2.2調整商品圖片的色彩11調整色彩平衡調整白色調整自然飽和度3.2.3去除商品圖片中的多余物體12通常，沒有經過處理的商品圖片除了尺寸不符合需求，還可能存在商品破損、商品有瑕疵、畫面有多余物體等問題，此時需要對商品圖片進行處理，使商品圖片更加美觀，具體操作如下。觀察圖片涂抹魚線去除魚線的效果3.2.3去除商品圖片中的多余物體13修補支架3.2.3去除商品圖片中的多余物體14去除所有支架仿制草坪去除底座最終效果目錄CONTENTS3.1?拍攝商品3.2美化商品圖片3.3設計商品主圖3.4課堂實訓——設計堅果主圖3.3.1商品主圖制作規(guī)范16為了提高消費者的購物體驗，方便消費者更快地找到所需的商品，主流的電商平臺現在都對商品主圖的制作進行了規(guī)范，不符合規(guī)范的商品主圖往往會被搜索降權，因此在設計商品主圖之前，必須了解商品主圖的制作規(guī)范。內容規(guī)范格式規(guī)范數量規(guī)范尺寸規(guī)范3.3.2商品主圖文案視覺17商品主圖的文案視覺是指圖片和文案的結合，通過巧妙地組合圖片、文字，可以打造出富有視覺效果、方便消費者識別和記憶的視覺化文案，這樣的文案能夠使商品主圖發(fā)揮出更大的營銷作用。根據不同的文案視覺風格、作用，可以將商品主圖分為以下幾種類型。賣點營銷文案是指重點突出商品賣點的文案，旨在通過商品賣點吸引消費者的注意力，激發(fā)其購買欲望。當商品賣點無法通過圖片直接展示時，可以搭配賣點營銷文案進行說明。1．賣點營銷文案3.3.2商品主圖文案視覺18痛點是指消費者未被滿足的，或急需解決的需求。痛點營銷文案是指針對消費者急需解決的需求來設計的文案，旨在通過突出痛點來打動消費者，促使其購買商品。痛點營銷文案的設計往往建立在了解消費者的需求之上，因此商家必須深入了解自己所在行業(yè)的商品，以及消費者最迫切需要滿足的需求，甚至可以主動讓消費者明白，面對這件商品他們最應該關注的是什么。2．痛點營銷文案3.3.2商品主圖文案視覺193．情感營銷文案情感營銷文案指通過挖掘商品對消費者的情感意義而設計的商品文案。情感營銷文案可以喚起消費者的情感需求，從情感上影響和打動消費者。3.3.2商品主圖文案視覺204．品牌營銷文案品牌營銷文案是指通過文字來展示品牌形象，提高消費者對品牌產生好感的營銷文案。比如，一些運動品牌的文案——活出你的偉大，通過文案傳遞品牌努力拼搏、活出自我的品牌精神，用這種品牌精神和文化去影響消費者，使其對品牌產生好感，繼而購買品牌商品。3.3.2商品主圖文案視覺215．活動營銷文案活動營銷文案指品牌和商品開展某項活動時使用的商品文案。活動營銷文案的內容一般依據活動的目的而定，如活動目的是提高流量、提高轉化率時，促銷型的活動營銷文案要在第一時間吸引消費者的注意力，因此文案設計應該醒目吸睛，且易于理解。如果活動目的是打造品牌形象，則活動營銷文案類似于品牌文案，一般以與品牌定位相符的文案對品牌進行宣傳推廣，加深消費者對品牌的印象。3.3.2商品主圖文案視覺226．節(jié)日營銷文案節(jié)日營銷文案是利用節(jié)日進行促銷的文案形式，主要通過營造節(jié)日氣氛來開展促銷活動，常見的中國傳統(tǒng)節(jié)日、西方重要節(jié)日，以及現在的“618”“雙11”“雙12”等電商節(jié)日等，都可用作節(jié)日營銷。節(jié)日營銷文案一般基于節(jié)日特點進行寫作和設計。3.3.2商品主圖文案視覺237．新品營銷文案新品營銷文案是指對新品進行推廣時使用的文案，常圍繞新品的各個方面進行構思和創(chuàng)作。其實很多新品在推廣時依然以賣點為主，通過賣點營銷文案吸引消費者的注意力。新品營銷文案是商家推出新品的重要營銷手段，新品是否能快速被消費者看到并得到認可，很多時候取決于新品文案的設計是否能吸引消費者的注意力。因此，商家要充分抓住新品特點，打造出富有特色和辨識度的新品營銷文案。3.3.3制作商品主圖24在年貨節(jié)來臨之際，“古茗茶道軒”店鋪需要為一款新茶制作商品主圖，要求著重宣傳新茶品級和半價活動，并呈現茶葉禮盒，同時搭配年貨節(jié)相關裝飾。在設計時，可以以茶葉的綠色為主色，搭配紅色、金色，給人以復古、高端的印象，具體操作如下。制作背景繪制圓角矩形設置斜面和浮雕3.3.3制作商品主圖25繪制樹木框選商品自動創(chuàng)建選區(qū)3.3.3制作商品主圖26復制并編輯商品翻轉商品制作倒影繪制陰影布局主圖輸入商品信息文字目錄CONTENTS3.1?拍攝商品3.2美化商品圖片3.3設計商品主圖3.4課堂實訓——設計堅果主圖課堂實訓——設計堅果主圖28某堅果店鋪上新了一款開心果，準備為其制作800像素×800像素的主圖，但由于拍攝的開心果圖片存在有污點、偏色和曝光不足等問題，因此需要先進行調色與修復處理，再摳取開心果圖像，然后利用提供的背景素材制作主圖，接著在其中添加商品圖像、輸入文字和繪制裝飾圖形等。實訓目標課堂實訓——設計堅果主圖29根據實訓目標，設計堅果主圖。實訓思路去除開心果果殼上的污點校正圖片中偏黃的色彩問題摳取開心果主體圖像繪制文字底紋輸入文本添加“堅果主圖背景.psd”素材感謝聆聽！學習進步！

電商視覺營銷（全彩微課版）第4章

店鋪首頁視覺營銷電商視覺營銷（全彩微課版）目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.1.1店鋪首頁的主要結構33清晰的首頁結構布局有利于提高消費者的體驗，幫助消費者在首頁上快速找到所需的商品，降低首頁的跳出率，從而促進商品銷售。首頁一般包括頁頭、頁中和頁尾3個部分，頁頭和頁中又包含若干個不同的功能板塊，如圖所示，具體的板塊內容可根據店鋪的實際需要進行安排。4.1.1店鋪首頁的主要結構341．頁頭頁頭位于首頁的最頂端，可以在店鋪各個頁面中進行展現，是視覺設計和營銷的重點區(qū)域之一。導航店招4.1.1店鋪首頁的主要結構352．頁中頁中是展示商品的區(qū)域。全屏海報優(yōu)惠活動區(qū)商品分類區(qū)商品促銷展示區(qū)040102034.1.1店鋪首頁的主要結構363．頁尾頁尾位于首頁的末尾，可根據店鋪實際需要進行添加，常用于展示店鋪網址、二維碼、品牌形象、店鋪服務和溫馨提示等內容，目的在于提高消費者對店鋪的信任度、好感度，以及加深其對品牌的印象，也可根據需要添加“返回頂部”按鈕，方便消費者從頭進行瀏覽。4.1.2店鋪首頁的布局方式37店鋪首頁的合理布局有利于規(guī)劃重點，明確信息表現的先后順序，幫助消費者快速建立與頁面的視覺聯(lián)系，使消費者能夠在第一時間找到頁面的重點信息。常見的頁面布局方式如下。1．平衡式布局平衡式布局是指合理安排和分配頁面內容和空白空間，使得整個頁面在視覺上呈現出均衡、穩(wěn)定的感覺。從視覺感受上來說，平衡的頁面布局十分符合人們的視覺習慣，可以帶給人平穩(wěn)、舒適的視覺體驗。4.1.2店鋪首頁的布局方式382．規(guī)律式布局規(guī)律式布局是指按照一定的規(guī)律對各種布局元素進行排列組合，使其呈現出規(guī)律性變化，從而使整體頁面具有統(tǒng)一的、連貫的、舒適的視覺體驗。在規(guī)律式布局中，商家進行商品排布時需要注意節(jié)奏感，使排布方式，有一定的疏密、大小或曲直的區(qū)分。4.1.1店鋪首頁的主要結構393．流程式布局流程式布局是指以流程圖的方式展示頁面信息和商品，可以有序引導消費者的視線，讓枯燥的信息展示變得個性十足，消費者瀏覽起來更簡單明了，充滿趣味性。4．輪廓式布局輪廓式布局是指將頁面設計成一個完整的輪廓，構建一個邊界或輪廓線，然后將視覺內容巧妙地填充進去。這種處理方式能夠讓消費者迅速注意到輪廓內的主要信息，同時可以讓頁面更有設計感。4.1.1店鋪首頁的主要結構405．切割式布局切割式布局是指按照一定的方式將頁面切割為不同的形狀，如切割為三角形、矩形、圓形、菱形或其他不規(guī)則形狀，讓頁面整體更具幾何設計感與節(jié)奏感，從而提高頁面的生動性。。6．留白式布局留白式布局是指為了使整個頁面更加簡潔、大氣、協(xié)調，而有意留下一定的空白。留白區(qū)域不局限于白色背景，一般來說，某一區(qū)域無額外元素、無裝飾、處于空白的狀態(tài)等，皆可稱作留白。目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.2.1店招的設計要點42店招即店鋪的招牌，它在很大程度上構成了消費者對店鋪的第一印象。鮮明、有特色的店招對于店鋪品牌和商品定位有著不可替代的作用。店招中可以包含文字、圖片、形狀等視覺設計元素，通過這些元素的巧妙組合，可以形成諸如品牌Logo、店鋪廣告語、促銷商品、優(yōu)惠信息、活動信息等常見的內容，除此之外，也可根據需要添加關注或收藏按鈕、店鋪公告及聯(lián)系方式等內容。4.2.2導航的設計要點431．導航的類型導航主要分為橫排導航與豎排導航兩種類型，其中橫排導航最為常見，也是大多數商家所選擇的一種展示類型，如圖所示。橫排導航內容安排與店招一致，要將主要信息放置在中間的“安全區(qū)域”內。豎排導航一般與首屏的全屏海報高度一致。4.2.2導航的設計要點442．導航的內容規(guī)劃導航的內容規(guī)劃即將店鋪中所有的商品按照一定的標準進行分類，方便消費者了解和查找店鋪內所有商品，也可按照店鋪當前經營目標和推廣目標對導航內容進行規(guī)劃，配合主推商品的銷售，將消費者引入相應的推廣頁面。4.2.2導航的設計要點453．導航的設計原則導航一般包括店鋪首頁和其他分類欄目的導入鏈接，清晰地反映了店鋪的核心經營內容，可以幫助消費者快速了解店鋪的定位和主營業(yè)務。商家在進行店鋪導航的設計時，可遵循以下幾個原則。導航要與店招的風格和顏色相互呼應，保證視覺效果的統(tǒng)一。（1）導航的長度有限，每個導航欄目的內容要簡潔，內容不能太多，否則容易造成欄目內容擁擠，不利于消費者查看。（2）導航中的文字顏色要與背景色形成對比，以方便消費者查看并點擊瀏覽對應的頁面。（3）4.2.3制作店招與導航46樂優(yōu)納官方旗艦店是一家售賣各種家用電器的店鋪，以“專注生活健康、提倡節(jié)能環(huán)?！睘榻洜I理念。為體現本店特色和宣傳主推商品，樂優(yōu)納官方旗艦店現需要設計首頁，要求采用簡潔、清爽的設計風格，以清爽的藍色系為主色，采用規(guī)律式布局，以直接展示商品為主，突出該店鋪家電商品的豐富性，同時在背景中添加簡潔的裝飾元素作為點綴，使店鋪首頁的視覺設計效果更豐富。在設計該店的店招與導航時，主要展現店鋪名稱、關注按鈕、服務保障及理念等內容，具體操作如下。繪制漸變正圓添加圖標4.2.3制作店招與導航47輸入并設置店招文字和格式繪制漸變矩形輸入導航文字目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.3.1全屏海報的視覺主題49全屏海報的視覺主題一般依據店鋪近期的運營要求而定，例如，店鋪近期是需要推廣店內人氣商品或新品，還是需要推廣店內優(yōu)惠活動等。一般來說，全屏海報主要包括以下3種主題。主題商品宣傳主題活動品牌塑造4.3.2全屏海報的構圖方式50全屏海報是店鋪首頁中向消費者傳遞信息的重要板塊，其構圖方式直接影響著海報的視覺表現效果。常見的構圖方式如下:九宮格式構圖傾斜式構圖中心構圖三角形式構圖水平構圖垂直構圖對稱式構圖放射式構圖散點式構圖4.3.3制作全屏海報51樂優(yōu)納官方旗艦店準備開展初春大促活動，需要制作以活動推廣為主題的店鋪首頁全屏海報。由于大部分主推家電較為高大、修長，商家準備采用垂直構圖來設計背景圖像，并縱向展現“初春大促”“低至2折”的活動信息，具體操作如下。制作全屏海報背景設置投影4.3.3制作全屏海報52添加投影繪制裝飾形狀調整裝飾形狀4.3.3制作全屏海報53為矩形框設置投影裝飾形狀的投影效果為海報標題設置投影全屏海報最終效果目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.4.1優(yōu)惠活動區(qū)的設計要點55優(yōu)惠券通常展示在全屏海報的下方，當消費者瀏覽完首屏信息后，繼續(xù)滾動鼠標往往就會看到優(yōu)惠券的相關信息。1．優(yōu)惠券的內容設計優(yōu)惠券是一種十分常見的促銷手段，也是店鋪吸引消費者、提高客單價的一種有效策略。優(yōu)惠券的使用范圍優(yōu)惠券的發(fā)放時間優(yōu)惠券的使用時間優(yōu)惠券的使用條件優(yōu)惠券的使用限制內容設計優(yōu)惠券的最終解釋權4.4.1優(yōu)惠活動區(qū)的設計要點56優(yōu)惠券的視覺設計通常比較簡潔直接，在與店鋪首頁整體設計風格相符的基礎上，盡可能直觀地展示優(yōu)惠力度。其視覺設計一般遵循以下幾個基本設計原則。設計精簡，不要添加任何與優(yōu)惠內容無關的信息，同時避免信息重復。優(yōu)惠券的優(yōu)惠力度是決定消費者使用優(yōu)惠券意愿的主要因素，因此優(yōu)惠面值的展示一般需在優(yōu)惠券中占據最大版面，以快速吸引消費者的注意力。優(yōu)惠券可以使用統(tǒng)一的模板，保證其視覺風格的統(tǒng)一，同時也可以使消費者的注意力放在主要的優(yōu)惠信息上。2．優(yōu)惠券的視覺設計4.4.1優(yōu)惠活動區(qū)的設計要點57活動專區(qū)通常位于店鋪首頁的優(yōu)惠券板塊下方，主要用于將參與同一活動的商品集合在一起，結合各種視覺營銷手段引導消費者點擊，然后進入促銷活動頁面瀏覽與選購商品?；顒訉^(qū)通常根據店鋪的營銷策略來進行設計，并體現以下幾方面的內容。3．活動專區(qū)的內容設計活動主題優(yōu)惠情況活動時間活動規(guī)則4.4.1優(yōu)惠活動區(qū)的設計要點58活動專區(qū)的視覺設計重點是傳達活動信息，并結合活動商品圖片、活動文案、促銷價格等內容進行設計?；顒訉^(qū)的視覺設計以店鋪首頁整體視覺定位為基準，同時依據具體的營銷要求進行合理布局。4．活動專區(qū)的視覺設計4.4.2制作優(yōu)惠活動區(qū)59樂優(yōu)納官方旗艦店首頁的優(yōu)惠活動區(qū)需要展現店鋪各類優(yōu)惠券，以及贈品，可先為優(yōu)惠券設計統(tǒng)一的模板，規(guī)整地展現優(yōu)惠券金額、使用條件和領券按鈕等內容；再在下方設計贈品活動專區(qū)，突出展示贈品圖片，以增添活動吸引力，具體操作如下。繪制矩形設置漸變疊加4.4.2制作優(yōu)惠活動區(qū)60粘貼圖層樣式優(yōu)惠券效果添加贈品圖片繪制豎線和輸入贈品說明文字4.4.2制作優(yōu)惠活動區(qū)61優(yōu)惠活動區(qū)最終效果目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.5.1商品分類區(qū)的設計要點63商品分類區(qū)的內容設計比較自由，可以根據店鋪商品屬性而定，如按照店鋪商品的固有屬性、適用人群、使用場景等進行分類，圖所示的珠寶店鋪首頁的商品分類區(qū)。4.5.1商品分類區(qū)的設計要點64在設計店鋪首頁的商品分類區(qū)時，可以按照以下原則進行設計，以提高信息的展示效率和消費者的瀏覽體驗。?突出重點的商品分類區(qū)設計多層級的商品分類區(qū)設計4.5.2制作商品分類區(qū)65根據樂優(yōu)納官方旗艦店首頁導航中的商品類別，在商品分類區(qū)中以圖片形式更加生動、直觀地展現商品分類。此外，還可制作“全國聯(lián)?！薄百涍\費險”等標簽，展示商品服務，具體操作如下。?制作標題制作冰箱類別4.5.2制作商品分類區(qū)66制作其他商品類別商品分類區(qū)最終效果制作標簽目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.6.1?商品促銷展示區(qū)的設計要點68在制作商品促銷展示區(qū)時，為了吸引消費者的眼球，通常需要先展示主推商品板塊，然后再展示其他的商品，如圖所示。在設計商品促銷展示區(qū)時，可按照以下原則進行設計。商品促銷展示區(qū)中每一個商品的名稱要正確、清楚，要體現商品名字和特點。商品促銷展示區(qū)中每一個商品的展示要能夠達到吸引消費者點擊的作用。商品價格顯示效果要醒目。4.6.2?制作商品促銷展示區(qū)69樂優(yōu)納官方旗艦店首頁的商品促銷展示區(qū)主要分為熱銷榜單和折扣區(qū)兩部分。具體操作如下。繪制圓角矩形設置投影4.6.2?制作商品促銷展示區(qū)70第一個熱銷商品模塊熱銷榜單效果繪制圓角矩形輸入文字折扣區(qū)效果目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.7.1?頁尾的設計要點72頁尾視覺設計與其他板塊一樣，都建立在遵循店鋪首頁設計風格和主題的基礎上，頁尾的內容設計則可以根據實際情況添加相關引導文案。4.7.2?制作頁尾73樂優(yōu)納官方旗艦店的頁尾以建立品牌形象為核心，展示客服服務和品牌信息，并通過商品圖片直觀地反映品牌形象，以增加消費者對品牌的好感度和信任感，具體操作如下。設置色標設置漸變疊加添加圖層樣式的前后效果對比4.7.2?制作頁尾74頁尾最終效果目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁4.8.1?移動端店鋪首頁的框架布局761．店招與PC端的店招相比，移動端店鋪店招的視覺設計更加簡潔。大部分移動端店鋪通常直接使用一張圖片作為店招的背景底圖，如模特圖、品牌色、簡單的背景底色和文案圖等，如圖所示。4.8.1?移動端店鋪首頁的框架布局772．首屏焦點圖首屏焦點圖又稱首焦圖，與PC端店鋪首頁的全屏海報一樣，移動端店鋪首頁同樣需要通過焦點圖來快速聚焦消費者的視線，展示店鋪的最新動態(tài)或活動信息，以吸引消費者繼續(xù)瀏覽頁面。商家可以直接在PC端全屏海報的基礎上進行元素重構，按照移動端設備的顯示特點重新排版各元素，突出顯示重要信息。4.8.1?移動端店鋪首頁的框架布局783．優(yōu)惠活動區(qū)當消費者被首屏焦點圖吸引后，繼續(xù)往下瀏覽就可以看到包含店鋪優(yōu)惠信息和店鋪活動信息的優(yōu)惠活動區(qū)。優(yōu)惠券和活動是刺激消費者繼續(xù)瀏覽頁面和購買商品的重要組成部分，也是移動端店鋪首頁視覺設計的主要對象之一。要信息，其視覺設計與PC端活動區(qū)類似。4.8.1?移動端店鋪首頁的框架布局794．商品分類區(qū)與PC端店鋪首頁相似，移動端的商品分類區(qū)也旨在展示店鋪商品的主要類型，并精準、快速地將消費者引導至相關分類頁面。商品分類區(qū)的視覺設計可以與PC端保持統(tǒng)一，但排版應適合移動端的屏幕顯示特點，以便消費者查看和點擊。4.8.1?移動端店鋪首頁的框架布局805．商品列表區(qū)商品列表區(qū)是移動端店鋪首頁的主要板塊，一般通過精心設計的商品圖片、商品標題、商品價格等信息展示店內主推商品、熱銷商品等，以吸引消費者點擊和購買。合理的商品陳列方式可以增加商品的曝光率與流量，而且在保持美觀的基礎上也更便于消費者瀏覽。因此，移動端店鋪首頁的商品列表區(qū)很少使用多個商品并排展示的情況，一般以一排1列、2列或3列的方式進行靈活布局，此外也可通過左右滑動的方式排列，以展示更多商品。4.8.1?移動端店鋪首頁的框架布局816．其他具有移動端特點的版塊各大電商平臺為了幫助商家更好地管理客戶關系、提高轉化和銷量，開發(fā)了很多具有即時通信特點的首頁模塊。商家可以根據當前階段的運營目標，添加淘寶直播、淘寶購物群、加入會員、關注店鋪、買家秀、買家評論等可以吸引消費者注意力，具有較大引流能力，或有利于維護消費者關系的模塊到店鋪首頁頂端。這樣有助于提高相關商品的轉化率，維護消費者關系，培養(yǎng)消費者對商品、品牌的忠誠度。4.8.2?移動端店鋪首頁的設計要點82由于目前大多數店鋪的流量和訂單來自移動端，因此移動端首頁的視覺設計變得尤為重要。在設計移動端店鋪首頁時，通常需注意以下4點。與PC端的視覺統(tǒng)一把握頁面整體內容合理控制頁面的長度注重感官的舒適性4.8.3?制作移動端店鋪首頁83下面以樂優(yōu)納官方旗艦店為例設計移動端店鋪首頁，其中，首屏焦點圖為輪播海報形式，主要宣傳新品空調和新品洗衣機；其他板塊可依據PC端店鋪首頁設計進行尺寸和布局調整，使其更適合移動端消費者瀏覽，具體操作如下。制作背景并添加商品添加裝飾素材設置投影標題文字投影效果4.8.3?制作移動端店鋪首頁84新品標簽效果制作洗衣機場景輸入海報文字設置漸變疊加4.8.3?制作移動端店鋪首頁85設置投影為文字應用圖層樣式效果繪制豎線制作新品標簽4.8.3?制作移動端店鋪首頁86優(yōu)惠活動區(qū)效果布局商品分類區(qū)設置內陰影設置斜面和浮雕4.8.3?制作移動端店鋪首頁87商品分類區(qū)效果熱銷榜單效果折扣區(qū)效果頁尾效果目錄CONTENTS4.1規(guī)劃店鋪首頁4.2設計店招與導航4.3設計全屏海報4.4?設計優(yōu)惠活動區(qū)4.5設計商品分類區(qū)4.6設計商品促銷展示區(qū)4.7?設計頁尾4.8?設計移動端店鋪首頁4.9?課堂實訓——設計家紡店鋪首頁課堂實訓——設計家紡店鋪首頁89“簡吉”家紡是一家主營毛巾、一次性用品、床上用品等商品的店鋪，現需設計PC端店鋪首頁。實訓目標其中，店招和導航設計要在常規(guī)信息的基礎上添加熱賣商品信息；全屏海報設計要求以新品毛巾的宣傳為出發(fā)點，凸顯新品的賣點和外觀，畫面美觀、簡潔；在全屏海報的下方沿用店招的顏色制作優(yōu)惠活動區(qū)，并羅列不同面值的優(yōu)惠券；在設計商品促銷展示區(qū)時，將其分為主推商品區(qū)和熱賣商品區(qū)兩部分，主推商品區(qū)采用單排的方式展現，熱賣商品區(qū)則將6個商品以連排方式展示兩排。課堂實訓——設計家紡店鋪首頁90根據實訓目標，設計家紡店鋪首頁。實訓思路新建文件，在店招左側添加“標志.psd”素材，然后在右側輸入宣傳標語，制作熱賣商品毛巾模塊和“5元”優(yōu)惠券模塊，針對“立即購買”按鈕和優(yōu)惠券金額還可添加“漸變疊加”圖層樣式進行強調。?運用“矩形工具”在店招下方繪制“1920像素×30像素”的矩形作為導航背景，然后輸入分類信息文字。接下來制作全屏海報，在導航下方繪制“1920像素×800像素”的藍色矩形。置入“云層背景.png”素材，在“圖層”面板中設置不透明度為“80%”，將其創(chuàng)建為藍色矩形的剪貼蒙版，為其設置與藍色矩形顏色相似的“顏色疊加”圖層樣式。課堂實訓——設計家紡店鋪首頁91將“海報商品.png”素材放到全屏海報右側，并將其創(chuàng)建為藍色矩形的剪貼蒙版，為其添加“投影”圖層樣式，然后在全屏海報左側輸入該商品的名稱、賣點、價格信息。使用“圓角矩形工具”在商品信息下方繪制一個紅色圓角矩形，再輸入“立即購買”文字，在該文字右側添加“箭頭.psd”素材，完成“立即購買”按鈕的制作。接下來制作優(yōu)惠活動區(qū)，先在全屏海報下方輸入該板塊的標題，在標題左下方使用“圓角矩形工具”繪制第一張優(yōu)惠券的外形，在第1張優(yōu)惠券底部使用“矩形工具”繪制1個藍色矩形。在優(yōu)惠券外形中輸入優(yōu)惠券金額和使用條件，注意將金額數字放大顯示，然后在藍色矩形中輸入“點擊領取”文字。課堂實訓——設計家紡店鋪首頁92將第一張優(yōu)惠券創(chuàng)建為圖層組，將該圖層組復制3個到右側，修改金額和使用條件，制作出其他3張優(yōu)惠券。使用“矩形工具”在所有優(yōu)惠券的最右側、最左側各繪制1個藍色長方形，用以裝飾。接下來制作商品促銷展示區(qū)的主推商品區(qū)，先使用“矩形工具”繪制多個淺灰矩形，用以確定該板塊布局。然后依次添加商品圖片到矩形上，創(chuàng)建剪貼蒙版。輸入每個商品的介紹文字，并結合“圓角矩形工具”制作“立即查看”按鈕，結合“矩形工具”繪制橘紅色的裝飾橫線，用以強調關鍵賣點。制作熱賣商品區(qū)時，可先制作1個熱賣商品模塊，然后采用復制并修改圖層組的方式，完成其他商品模塊的制作，以提高工作效率，最后保存文件。感謝聆聽！學習進步！

電商視覺營銷（全彩微課版）第5章

商品詳情頁視覺營銷電商視覺營銷（全彩微課版）目錄CONTENTS5.1?規(guī)劃商品詳情頁5.2?設計商品焦點圖5.3?設計商品賣點圖5.4?設計商品細節(jié)圖5.5?設計商品參數圖5.6?設計商品關聯(lián)營銷圖5.7課堂實訓——設計除螨儀詳情頁5.1.1?商品詳情頁的主要結構96清晰的商品詳情頁結構有利于提高消費者的體驗，降低商品詳情頁的跳出率，增加消費者在商品詳情頁的停留時間，從而促進商品銷售。商品詳情頁的結構并不是固定的，在實際制作時可根據商品的具體情況、商家的要求和目標消費者的需求進行商品詳情頁內容的增減。包裝展示圖促銷活動圖質量保證圖08焦點圖商品賣點圖商品參數圖商品細節(jié)圖。04010203功能展示圖050607品牌推廣圖商品快遞與售后圖1009關聯(lián)營銷圖115.1.2?商品詳情頁的溝通框架97在搭建商品詳情頁的溝通框架之前，先要了解消費者希望在商品詳情頁中看到的信息，并整理出基于商家需求的營銷要素。一般來說，消費者希望在商品詳情頁中了解的信息主要包括以下內容。1．消費者需求的基本信息商品展示圖商品細節(jié)圖商品評價模特圖或實際使用圖商品參數圖基本信息真人試穿或試用效果5.1.2?商品詳情頁的溝通框架98商品詳情頁的主要作用是促使消費者購買商品，因此除了要展示消費者需要的基本信息，還要展示更豐富的、有助于進一步打動消費者的信息，實現成交的目的。商品詳情頁信息展示的基本要素主要包括以下部分。2．商品詳情頁的基本要素商品服務營銷互動品牌5.1.2?商品詳情頁的溝通框架99基于消費者和商家兩方的需求，再結合商品詳情頁的布局邏輯，來搭建溝通框架。如表所示即為空調商品詳情頁溝通框架。3．搭建商品詳情頁溝通框架5.1.3?商品詳情頁的文案應用100引起關注的文案主要在商品詳情頁頂部、商品焦點圖等區(qū)域呈現，包括商品核心賣點、商品促銷信息、商品廣告語等內容，其作用是突出消費者關注的核心內容，提高消費者瀏覽商品核心信息的效率。1．引起關注的文案5.1.3?商品詳情頁的文案應用101引發(fā)興趣的文案可以有效找到并激發(fā)消費者對商品的潛在需求，如說明商品的核心賣點、描述商品外觀、描述商品的使用場景等都可以有效引發(fā)消費者的興趣，引起消費者的購買欲望。2．引發(fā)興趣的文案5.1.3?商品詳情頁的文案應用102加深了解的文案主要用于幫助消費者更全面地了解商品，打消消費者對商品的顧慮，常運用在細節(jié)圖、包裝圖、參數圖等位置，以進一步提高消費者對商品的信任。3．加深了解的文案5.1.3?商品詳情頁的文案應用103刺激購買的文案可以運用在商品的促銷活動及套餐搭配等區(qū)域，讓消費者快速下單購買；也可以用于商品詳情頁最后的品牌展示、服務質量展示、資質實力展示、物流信息展示等模塊，突出品牌質量、商家承諾、快遞物流、售后服務等信息，打消消費者的購物顧慮。4．刺激購買的文案目錄CONTENTS5.1?規(guī)劃商品詳情頁5.2?設計商品焦點圖5.3?設計商品賣點圖5.4?設計商品細節(jié)圖5.5?設計商品參數圖5.6?設計商品關聯(lián)營銷圖5.7課堂實訓——設計除螨儀詳情頁5.2.1?商品焦點圖的設計要點105商品焦點圖的視覺設計與商品海報十分類似，通常使用精美的圖片，搭配簡單的核心文案，對商品進行深刻的展示。商品焦點圖在設計上可以靈活運用各種設計元素，使用略微夸張的表現方式，以突出商品的整體形象、主要賣點或商品理念等，以極具視覺沖擊力的畫面吸引消費者的注意力，給消費者帶來愉悅的視覺體驗。5.2.2?制作商品焦點圖106本節(jié)以烤箱為例，介紹如何制作該商品詳情頁中的焦點圖。由于該烤箱在外觀和功能方面都有所創(chuàng)新，因此在設計焦點圖時需要體現烤箱的外觀和功能優(yōu)勢，使用烤箱的廚房場景圖為背景，搭配“多功能烤箱有顏值的實力派”標題，體現烤箱的精美外觀和實用性，副標題可展現烤箱的型號和關鍵功能，充分展示烤箱賣點，并為消費者帶來美好的視覺體驗，具體操作如下。添加烤箱素材添加裝飾素材最終效果目錄CONTENTS5.1?規(guī)劃商品詳情頁5.2?設計商品焦點圖5.3?設計商品賣點圖5.4?設計商品細節(jié)圖5.5?設計商品參數圖5.6?設計商品關聯(lián)營銷圖5.7課堂實訓——設計除螨儀詳情頁5.3.1?商品賣點圖的設計要點108為了提高商品賣點的視覺表現力，在展示商品賣點時，可以為賣點策劃一個新穎、有趣的視覺方案，通過將賣點“視覺化”來吸引消費者的注意力，同時幫助消費者理解商品。商品賣點的“視覺化”可以采用恰當的美化和夸張手法，來營造與商品特質、功能、賣點相匹配的氛圍，再通過對色彩、文字、版式等元素的合理運用，有效提高商品圖片的視覺效果，與其他競品形成差異和區(qū)別，進一步突出商品和品牌的視覺優(yōu)勢。5.3.2?制作商品賣點圖109本節(jié)繼續(xù)以烤箱為例，介紹如何制作該商品詳情頁中的賣點圖。首先，以圖標的形式精練地概括烤箱的賣點，再以一屏一圖的方式，分別展示烤箱的多種美食模式、內部烹飪狀態(tài)、控溫技術、手機智能控制等賣點，具體操作如下。賣點圖標圖美食模式圖烤箱內部圖控溫技術圖設置投影手機遙控圖目錄CONTENTS5.1?規(guī)劃商品詳情頁5.2?設計商品焦點圖5.3?設計商品賣點圖5.4?設計商品細節(jié)圖5.5?設計商品參數圖5.6?設計商品關聯(lián)營銷圖5.7課堂實訓——設計除螨儀詳情頁5.4.1?商品細節(jié)圖的設計要點111商品細節(jié)圖的視覺設計重點是傳達消費者感興趣的商品細節(jié)信息，一般需要根據商品性質選擇不同的展示方式。工藝細節(jié)圖功能細節(jié)圖服務細