跨境電商視覺設計與營銷（第2版） 課件 項目1-跨境電商視覺營銷概述

項目一視覺營銷概述跨境電商視覺營銷跨境電商B2B數(shù)據(jù)運營職業(yè)技能等級證書（初級）課程01感知視覺營銷02視覺設計要素03視覺設計基本原則目錄CONTENTS跨境電商視覺營銷知識目標技能目標思政目標學習目標LearningGoals理解視覺營銷的基本概念掌握視覺元素設計的要素掌握視覺設計的基本準則能夠評估分析視覺設計元素能夠應用視覺設計要素分析優(yōu)化店鋪培養(yǎng)審美意識在跨境電商數(shù)據(jù)分析過程中堅持科學的價值觀和道德觀感知視覺營銷任務一感知視覺營銷知識梳理

Content

of

Chapter視覺營銷概念及目的操作體驗應用實戰(zhàn)發(fā)現(xiàn)視覺效果店鋪首頁視覺營銷跨境電商視覺營銷知識梳理01知識要點視覺營銷概念視覺營銷目的視覺營銷價值視覺效果分析視覺營銷的基本概念“視覺營銷不僅是一種營銷技術，更是一種可視化的體驗。視覺營銷的目的03用戶角色目標訴求營銷重點商家把商品的價值和效果最大化，并且通過凸顯品牌之間的差異來提升銷售利潤產(chǎn)品賣點設計者打造一個讓目標顧客容易看、容易選、容易買的賣場時空，讓商品與銷售額產(chǎn)生直接聯(lián)動，達到顧客設計者與導購員雙方在買與賣之間均可獲得方便的效果競爭力顧客容易看到、看懂、選擇與顧客購買有直接的聯(lián)系，有一種身臨其境的氛圍與人物設定感代入感導購商品容易看、容易體驗等，有一種娓娓道來，引人入勝的意境，用戶體驗直接與銷售相聯(lián)系體驗感品牌容易形成品牌意識，品牌歸屬與信任，容易在終端產(chǎn)生銷售品牌感視覺營銷的價值直接價值視覺營銷對店鋪流量、商品轉(zhuǎn)化率、客單價等數(shù)據(jù)有直接的影響。優(yōu)質(zhì)的視覺設計可以有效吸引用戶的注意，使其對商品和品牌產(chǎn)生興趣，從而提升店鋪流量。主圖、營銷圖在視覺表現(xiàn)上既呈現(xiàn)得當，可以引起用戶的消費興趣，促使其產(chǎn)生點擊、購買的行為，并且通過視覺對用戶進行引導。間接價值視覺營銷可以有效提升用戶對商品和品牌的認知度和好感度，從而提升對店鋪的間接影響。在視覺設計中加入品牌元素，可以加深品牌在用戶腦海中的印象，促使用戶產(chǎn)生特定元素與品牌的聯(lián)想。分析視覺營銷效果研究同類產(chǎn)品分析設計元素在電商平臺上搜索與產(chǎn)品類似的暢銷產(chǎn)品，瀏覽這些產(chǎn)品的主圖、詳情頁和店鋪首頁注意競爭對手使用的顏色、圖片質(zhì)量、視頻、交互元素、排版和整體風格操作體驗02A公司的設計師Grace收到運營同事Lucy的反饋，指出公司的圖片和視頻等視覺效果不佳，相較于同行沒有競爭優(yōu)勢，導致店鋪產(chǎn)品的點擊量數(shù)據(jù)不理想，跳失率也非常高，遠低于同行平均水平。Lucy希望Grace能對公司的圖片和視頻進行視覺分析和優(yōu)化，以提升店鋪銷售數(shù)據(jù)。為了分析原因，Grace需要在平臺中搜索同行的圖片進行視覺營銷分析，找出優(yōu)化方案以提高店鋪的整體營銷效果。產(chǎn)品點擊量主要受到產(chǎn)品主圖的影響，產(chǎn)品主圖及詳情頁是詢盤轉(zhuǎn)化和店鋪流量的基礎。因此，Grace首先應對產(chǎn)品主圖和產(chǎn)品詳情頁的視覺營銷進行詳細的分析和調(diào)研。視覺營銷概述發(fā)現(xiàn)視覺效果發(fā)現(xiàn)視覺效果1、產(chǎn)品主圖視覺營銷（1）登錄阿里國際站。在瀏覽器地址欄中輸入后單擊回車鍵，在頁面右上角點擊Signin按鈕，在彈出的頁面中輸入用戶名和密碼后單擊“確認”按鈕。（2）在阿里國際站前臺首頁輸入關鍵詞“Bracer”進行搜索。對搜索結(jié)果前三頁的產(chǎn)品圖片進行采集。搜索結(jié)果如圖1-1所示。（3）結(jié)合不同維度用戶的視覺營銷訴求對采集的產(chǎn)品主圖進行圖片視覺分析。產(chǎn)品1、4、6、7都是通過模特試用進行效果展現(xiàn)的，其中4號產(chǎn)品展示了模特的外貌，對產(chǎn)品使用人群有了更清晰的定位，充滿年輕活力的感覺。產(chǎn)品2、5、8則是直接展示產(chǎn)品，其中2號產(chǎn)品表現(xiàn)出了產(chǎn)品多色的特點，以及添加了公司LOGO進行品牌展示，對比其他兩款產(chǎn)品，2號產(chǎn)品的展示更有優(yōu)勢。產(chǎn)品3通過實際使用場景來進行產(chǎn)品展示，極具代入感。結(jié)論：產(chǎn)品主圖基本以白色背景為主，風格干凈簡潔，展示方式以模特試用的效果圖居多，可適當添加公司LOGO凸顯品牌差異。圖1-1國際站前臺搜索關鍵詞Bracer的結(jié)果頁發(fā)現(xiàn)視覺效果2、產(chǎn)品詳情頁視覺營銷（1）選擇一款想要參考借鑒的產(chǎn)品點擊其產(chǎn)品主圖，進入其詳情頁進行視覺分析；（2）點擊進入后首先看到的是對應產(chǎn)品的主圖視頻及副圖，如圖1-2所示。產(chǎn)品主圖視頻可以直觀展示產(chǎn)品的使用效果，是視覺營銷的重要組成部分。通過參考和借鑒優(yōu)秀的主圖視頻展示風格，可以為后續(xù)的視頻制作提供靈感。在瀏覽整體頁面后，我們發(fā)現(xiàn)副圖大多是從詳情頁內(nèi)容中截取的，因此重點分析詳情頁的視覺設計。由于頁面篇幅較長，我們挑選了幾張有代表性的詳情圖進行視覺分析，以發(fā)現(xiàn)其在視覺營銷上的成功之處。圖1-2產(chǎn)品詳情頁主圖視頻及副圖發(fā)現(xiàn)視覺效果（4）尺寸展示板塊：通過將產(chǎn)品與常見對照物（如手機）進行比較，直觀展示產(chǎn)品的尺寸和厚度，更具可視性。（3）顏色展示板塊視覺分析：該板塊采用平鋪展示方式，使現(xiàn)有常規(guī)款式產(chǎn)品的顏色一目了然，并通過文字說明提示有更多顏色即將推出，展現(xiàn)出其OEM定制能力。這種顏色展示方式為客戶提供了更多選擇。發(fā)現(xiàn)視覺效果2、產(chǎn)品詳情頁視覺營銷（5）使用效果展示：通過真人試穿展示不同顏色的穿搭效果，讓顧客更容易產(chǎn)生共鳴和代入感。（6）產(chǎn)品引流板塊：在瀏覽詳情頁時，發(fā)現(xiàn)一個非常值得學習的板塊。該板塊巧妙地在產(chǎn)品詳情頁中穿插了店鋪的其他產(chǎn)品展示，并添加了超鏈接，顧客可以直接點擊打開頁面。這樣設計有助于顧客在瀏覽過程中如果對當前產(chǎn)品不感興趣，可以順利轉(zhuǎn)移到其他產(chǎn)品的詳情頁，從而減少客戶流失，提高店鋪的訪問深度和停留時長，進而促進數(shù)據(jù)的積累與沉淀。店鋪引流板塊：在詳情頁的結(jié)尾處，店家設置了店鋪的聯(lián)系方式以及指引按鈕“BACKTOHOME”，引導客戶在瀏覽完產(chǎn)品后直接聯(lián)系我們或返回店鋪首頁，了解更多公司產(chǎn)品和公司信息。這種設計有助于增加訪客的瀏覽深度，降低跳出率，并促使進一步的詢盤轉(zhuǎn)化或其他產(chǎn)品的二次轉(zhuǎn)化.通過搜索頁的搜索結(jié)果進行了圖片分析，主要是面向產(chǎn)品主圖，但在B2B網(wǎng)店運營中，除了主圖、詳情頁的視覺外，我們留意到同行大部分都添加了引導至店鋪首頁的版塊設計，可見店鋪的首頁也是視覺營銷中的核心要點，Lucy和Grace均認為應該發(fā)現(xiàn)更多的視覺營銷來優(yōu)化店鋪整體的視覺從而達到營銷轉(zhuǎn)化。視覺營銷概述應用實戰(zhàn)03A公司設計師Grace優(yōu)化詳情頁的交互體驗，發(fā)現(xiàn)客戶發(fā)來的詢盤確實有增多，旺鋪的訪客量及其他產(chǎn)品詳情頁的瀏覽量都有所提升。結(jié)合前面詳情頁分析中的“首頁引流板塊”Grace思考著旺鋪首頁會展示更多的公司信息及產(chǎn)品，也是要優(yōu)化的重點內(nèi)容，減少旺鋪訪客的跳失率，因為還需要對旺鋪首頁的交互設計進行調(diào)研分析。視覺營銷概述店鋪首頁視覺營銷店鋪首頁視覺營銷首頁前三屏的布局分別為店招、導航欄和海報板塊，這是最常用的布局方式，有助于買家了解公司名稱、品牌定位及聯(lián)系方式。整體風格采用藍色為主色調(diào)，與店鋪LOGO、導航欄和海報主題色保持一致，呈現(xiàn)出統(tǒng)一、專業(yè)的品牌形象。海報設計主題明確，15%的折扣突出營銷效果，容易吸引買家注意。同時，海報上添加了“BUYNOW”按鈕并鏈接到對應產(chǎn)品，方便買家直接跳轉(zhuǎn)進行購買，有利于二次產(chǎn)品轉(zhuǎn)化。這種布局和設計方式不僅提升了買家的信任度，還便于他們快速了解店鋪的主推產(chǎn)品，值得我們學習和借鑒。店鋪首頁視覺營銷（2）頁面下滑可以看到公司優(yōu)勢及自定義設計的產(chǎn)品分類板塊，如圖1-9所示。這個板塊不僅展示了公司的優(yōu)勢，還讓買家清晰了解店鋪的產(chǎn)品類別。每項分類（01-06）都添加了超鏈接，點擊即可跳轉(zhuǎn)到對應的產(chǎn)品分類頁，方便買家通過分類瀏覽和選擇產(chǎn)品。點擊“01AlibabaTopRanking”即可跳轉(zhuǎn)至對應分類產(chǎn)品的子頁面，如圖1-10所示。這種設計方式提升了用戶體驗，使買家能夠輕松找到所需產(chǎn)品分類。圖1-9旺鋪首頁－公司優(yōu)勢及產(chǎn)品分類板塊圖1-10-01AlibabaTopRanking子頁面板塊店鋪首頁視覺營銷頁面最底部設置了回到頂部和詢盤直通車板塊。一方面展示了公司專注戶外運動產(chǎn)品11年的實力，另一方面方便買家直接跳轉(zhuǎn)至頁面頂部進行二次瀏覽或直接發(fā)送詢盤咨詢產(chǎn)品。這樣的交互設計有效節(jié)約了買家的時間，更好地站在用戶角度進行視覺和交互設計，有利于提升客戶滿意度。視覺設計要素任務二視覺設計要素知識梳理

Content

of

Chapter視覺設計四大要素操作體驗應用實戰(zhàn)視覺營銷元素分析－產(chǎn)品海報視覺營銷元素分析－活動海報跨境電商視覺營銷知識梳理01視覺設計四大要素01顏色顏色是視覺設計中最重要的元素之一，能夠引起情感反應和心理反應。顏色應用技巧：使用品牌主色調(diào)，保持頁面的一致性和專業(yè)性。利用顏色對比，突出重點信息，如折扣、優(yōu)惠和“BUYNOW”按鈕。研究目標市場的顏色偏好，避免使用可能引起誤解的顏色。02圖標與圖形圖標和圖形可以簡化信息傳達，提高用戶的理解和記憶。圖標和圖形應用技巧：使用簡潔明了的圖標，避免復雜的設計。保持圖標風格一致，與整體頁面風格協(xié)調(diào)。通過圖標和圖形引導用戶的視線，突出關鍵內(nèi)容。03排版排版決定了信息的組織和展示方式，影響用戶的閱讀體驗和信息獲取效率。排版應用技巧：使用標題、副標題和正文的層次結(jié)構(gòu)，清晰組織信息。選擇簡潔、易讀的字體，確保不同設備上的可讀性。通過對齊和留白，創(chuàng)造視覺平衡，避免頁面雜亂?？臻g與布局設計合理的空間和布局設計可以提升用戶體驗，減少視覺疲勞。空間與布局應用技巧：利用網(wǎng)格系統(tǒng)設計頁面，確保元素的對齊和統(tǒng)一。保持頁面簡潔，避免信息過載。使用留白創(chuàng)造視覺呼吸空間，提升閱讀體驗。04顏色020103統(tǒng)一的品牌顏色有助于建立和強化品牌形象。品牌識別不同顏色傳遞不同的情感和信息，例如紅色代表激情和緊迫感，藍色代表信任和專業(yè)。情感傳遞在跨境電商中，考慮目標市場的文化差異非常重要，不同文化對顏色的理解和偏好不同。文化差異視覺設計四大要素010203層次結(jié)構(gòu)：合理的層次結(jié)構(gòu)可以幫助用戶快速找到他們需要的信息?？勺x性：選擇合適的字體、字號和行間距，確保文字內(nèi)容清晰易讀。視覺引導：通過排版引導用戶視線，突出重要信息和行動按鈕。視覺設計四大要素010203信息圖示：通過圖標快速傳達產(chǎn)品特點和功能。視覺裝飾：圖形和圖案可以增加頁面的視覺美感和趣味性。導航輔助：使用圖標幫助用戶更容易地導航和操作。視覺設計四大要素010203留白：適當?shù)牧舭卓梢允鬼撁婵雌饋砀诱麧嵑蛯I(yè)。對齊：通過對齊確保頁面元素的整齊和一致性。視覺焦點：利用布局引導用戶的視線，突出重點信息。操作體驗02通過前期的調(diào)研和分析，Grace已經(jīng)深刻理解了視覺營銷和用戶體驗設計的重要性。那么，如何做好視覺營銷和用戶體驗設計呢？這些設計又受到了哪些要素的影響？只有深入了解這些要素，才能確保后續(xù)的優(yōu)化方案更準確有效。為了綜合應用設計要素，Grace決定先對最常見的產(chǎn)品海報進行視覺營銷元素的分析。設計與營銷視覺營銷元素分析－產(chǎn)品海報應用實戰(zhàn)03Grace搜索海報進行視覺分析的時候發(fā)現(xiàn)，海報的類型是各種各樣的，除了基礎的產(chǎn)品海報外，最常見的還有活動海報。國際站每年都有固定的平臺大促，例如三月新貿(mào)節(jié)及九月采購節(jié)等等，公司定期都會參與店鋪的一些大促活動，大促活動海報的設計需要考慮的因素又有什么不同呢？如何策劃一張吸引客戶的大促海報進行引流，對此需要進行視覺體驗分析。設計與營銷視覺營銷元素分析－活動海報視覺設計基本原則任務三視覺設計基本原則知識梳理

Content

of

Chapter視覺設計原則操作體驗應用實戰(zhàn)公司簡介視覺策劃方案視覺體驗設計實訓跨境電商視覺營銷知識梳理01視覺設計原則目的性視覺設計的首要原則是確保設計能夠有效地傳達預定的信息和目標，包括目標分析與受眾分析。審美性審美性指設計作品的美觀程度和藝術性，是吸引用戶眼球和增強品牌形象的關鍵。包括色彩應用、排版設計、圖形和圖標實用性實用性指設計作品在功能和操作上的有效性，確保用戶能夠輕松理解和使用設計，包括信息結(jié)構(gòu)設計與信息架構(gòu)010203操作體驗02Grace通過前期的視覺營銷調(diào)研和分析，優(yōu)化了圖片視覺效果，取得了一定提升。然而，她在設計過程中常常猶豫不決，例如選擇元素、排版方式，以及設計是否符合客戶喜好。她意識到，在設計之前先制定一份視覺營銷策劃方案非常必要。這不僅能節(jié)省時間，還能遵循視覺原則，更好地優(yōu)化營銷效果。在主管的建議下，她結(jié)合視覺設計方案對已完成的作品進行評價和改進。設計與營銷公司簡介視覺策劃方案任務實施視覺設計方案策劃表視覺原則分析維度具體內(nèi)容視覺策劃方案目的性預期目標圖片傳達的品牌目標是什么？是提升品牌認知度、促進銷售還是展示產(chǎn)品功能？

目標受眾該圖片的目標受眾是誰？他們的年齡、性別、職業(yè)、興趣是什么？

核心信息圖片傳達的核心信息是什么？這一信息是否突出，易于理解？

審美性色彩選擇圖片中使用了哪些顏色？這些顏色如何傳達品牌或產(chǎn)品信息？色彩搭配是否和諧？

排版設計圖片的排版如何？是否層次分明？主次是否清晰？文字和圖像的布局是否合理？

圖形和圖標圖片中使用了哪些圖形或圖標？這些圖形和圖標如何增強視覺美感和信息傳達？圖標風格是否一致？

整體風格圖片的整體風格如何？風格是否一致？風格是否具有吸引力？是否符合品牌形象？

實用性用戶體驗圖片是否易于理解和使用？是否有清晰的導航和引導元素？用戶能否快速找到所需信息？

響應式設計圖片是否適應不同設備顯示？是否考慮了不同屏幕尺寸的適配？

頁面加載速度圖片的加載速度如何？是否經(jīng)過優(yōu)化以減少加載時間？

可訪問性圖片是否考慮了不同用戶的需求？如色盲用戶？高齡用戶？文字和圖像是否清晰？

任務實施目的性分析：預期目標：宣傳公司及品牌介紹，提升公司認知度及買家信任度；目標受眾：70-90后B端企業(yè)采購商，對運動戶外產(chǎn)品感興趣；核心信息：標題為公司介紹，主題清晰。審美性分析：色彩選擇：與LOGO主題色藍色保持一致，輔助色黃色與白色，色彩搭配和諧不雜亂；排版設計：排版主次分明，左邊為文案介紹，右邊為公司圖片布局合理，但公司圖片不能充分展示公司特色，可進一步優(yōu)化；圖形和圖標：公司優(yōu)勢通過小圖標進行點綴，風格尺寸保持一致；整體風格：整體風格設計與首頁風格保持一致，簡潔明了，符合品牌定位。

實用性分析：用戶體驗：細讀基本能理解所表達內(nèi)容，優(yōu)勢不夠明顯突出，無引導按鈕，可添加引導按鈕跳轉(zhuǎn)至“CompanyOverview”頁面；響應式設計：圖片尺寸為1200像素，兼顧了小屏幕展示，主要信息集中在990像素內(nèi)；頁面加載速度：圖片在保證清晰度的情況下進行壓縮處理，小于400kb，加載順暢可訪問性：文字和圖像基本清晰，考慮到也有年齡大的用戶，字體大小應該優(yōu)化放大。任務實施

視覺設計方案策劃表視覺原則分析維度視覺策劃方案目的性預期目標宣傳公司及品牌介紹，提升公司認知度及買家信任度；目標受眾70-90后B端企業(yè)采購商，對運動戶外產(chǎn)品感興趣；核心信息標題為公司介紹，主題清晰；審美性色彩選擇與LOGO主題色藍色保持一致，輔助色黃色與白色，色彩搭配和諧不雜亂；排版設計排版主次分明，左邊為文案介紹，右邊為公司圖片布局合理，但公司圖片不能充分展示公司特色，可進一步優(yōu)化；圖形和圖標公司優(yōu)勢通過小圖標進行點綴，風格尺寸保持一致；整體風格整體風格設計與首頁風格保持一致，簡潔明了，符合品牌定位；實用性用戶體驗細讀基本能理解所表達內(nèi)容，優(yōu)勢不夠明顯突出，無引導按鈕，可添加引導按鈕跳轉(zhuǎn)至“CompanyOverview”頁面；響應式設計圖片尺寸為1200像素，兼顧了小屏幕展示，主要信息集中在990像素內(nèi)；頁面加載速度圖片在保證清晰度的情況下進行壓縮處理，小于