跨境電商視覺設(shè)計與營銷（第2版） 課件 項目8-店鋪詳情頁設(shè)計

項目八店鋪詳情頁設(shè)計跨境電商視覺營銷跨境電商B2B數(shù)據(jù)運營職業(yè)技能等級證書（初級）課程01詳情頁結(jié)構(gòu)設(shè)計02詳情頁元素設(shè)計03詳情頁裝修目錄CONTENTS跨境電商視覺營銷知識目標(biāo)技能目標(biāo)思政目標(biāo)學(xué)習(xí)目標(biāo)LearningGoals掌握詳情頁結(jié)構(gòu)的常見設(shè)計方法掌握詳情頁元素的設(shè)計要素掌握詳情頁裝修的基本規(guī)范能夠設(shè)計產(chǎn)品詳情頁結(jié)構(gòu)能夠設(shè)計信息圖等元素能夠裝修店鋪詳情頁培養(yǎng)審美意識在跨境電商數(shù)據(jù)分析過程中堅持科學(xué)的價值觀和道德觀詳情頁結(jié)構(gòu)設(shè)計任務(wù)一跨境電商視覺營銷詳情頁結(jié)構(gòu)設(shè)計知識梳理

Content

of

Chapter詳情頁設(shè)計基礎(chǔ)操作體驗應(yīng)用實戰(zhàn)設(shè)計服裝店鋪詳情頁結(jié)構(gòu)設(shè)計手機店鋪詳情頁結(jié)構(gòu)知識梳理01知識要點詳情頁功能詳情頁設(shè)計要求詳情頁內(nèi)容詳情頁邏輯詳情頁功能介紹產(chǎn)品功能增加促銷入口樹立品牌形象進階功能合格目標(biāo)優(yōu)秀產(chǎn)品詳情展示產(chǎn)品信息基本功能減少人工溝通優(yōu)秀產(chǎn)品詳情詳情頁功能轉(zhuǎn)化圖片好，設(shè)計感足夠營銷，有重點，買家能明確感知到產(chǎn)品圖片有些許不足，設(shè)計較弱無賣點，沒有營銷感，無核心轉(zhuǎn)化率：8%轉(zhuǎn)化率：0%詳情頁設(shè)計要求信息完整圖形化表達層次分明商品詳情描述是對商品詳實、具體的表述，可將買家關(guān)注的商品的細節(jié)特征、參數(shù)、質(zhì)量標(biāo)準(zhǔn)、服務(wù)、現(xiàn)貨/庫存情況等全面的展示出來圖像和視頻在信息表達上有著天然的優(yōu)勢，因此可以多用圖像與視頻進行表述。例如婚紗，文字描述再生動，不如圖片來得直觀。建議圖文結(jié)合，將買家關(guān)注的信息如細節(jié)、面料等展示出來。內(nèi)容層次分明、條理清晰,如分段有標(biāo)號且有核心詞的寫法，或提煉參數(shù)表格化顯示，重點突出，以吸引更多買家關(guān)注詳情頁內(nèi)容010203060504品牌介紹品牌理念商品圖片展示·廣告圖·細節(jié)圖交易說明·品質(zhì)保障·客服信息·購物需知·包裝·物流·售后服務(wù)交易促進·促銷說明·實力展示：倉儲、生產(chǎn)等·買家秀等商品功能介紹·功能參數(shù)·產(chǎn)品特點·使用說明促銷推薦·促銷·關(guān)聯(lián)推薦·新品上架·熱銷推薦產(chǎn)品詳情模塊詳情頁邏輯引發(fā)興趣激發(fā)需求產(chǎn)生信任信任到占有促進成交產(chǎn)品圖片產(chǎn)品廣告圖產(chǎn)品使用場景圖為什么購買產(chǎn)品特點用戶痛點產(chǎn)品圖片產(chǎn)品細節(jié)圖客戶評價商家實力展示產(chǎn)品圖片產(chǎn)品廣告圖（擁有感覺）交易說明品質(zhì)保障，客服信息，購物需知，包裝，物流售后服務(wù)客戶評價實力展示倉儲生產(chǎn)研發(fā)促銷推薦促銷；關(guān)聯(lián)推薦新品上架；熱銷推薦品牌介紹詳情頁邏輯第一部分以情懷和感性為立足點，講述品牌故事及品牌背景和實力，以生動的語言描述，引導(dǎo)客戶看到栩栩如生的場景。讓客戶在生動的場景獲得代入感，引起情感共鳴，獲得客戶認可。第二部分圍繞產(chǎn)品本身，精準(zhǔn)描述產(chǎn)品參數(shù)、工藝等各種細節(jié)，讓客戶更準(zhǔn)確地理解產(chǎn)品本身。第三部分描述賣家為客戶提供的各種保障，品質(zhì)保證、售后服務(wù)等內(nèi)容都是這一部分需要重點強調(diào)的內(nèi)容，起到打消客戶疑慮的作用。第四部分講述產(chǎn)品的包裝信息，包裝里包含的各種配件和贈品等，可以一一列舉出來，而對于賣家打算作為贈品的配件，也要詳細地羅列在包裝清單中。包裝配件保障提供產(chǎn)品本身感性情懷四段式產(chǎn)品詳情描述布局法，包括感性情懷、產(chǎn)品本身、保障提供、包裝配件。以整齊規(guī)范的頁面格式，配以生動翔實的內(nèi)容，再加上上述四段式的產(chǎn)品描述布局，產(chǎn)品功能和情感訴求雙雙落地，這樣的產(chǎn)品描述足以讓訂單轉(zhuǎn)化率得到提升。詳情頁邏輯B2B買家和B2C買家的關(guān)注點不同，B2C是個人購買行為，B2B更多的是企業(yè)購買行為。因此，B2C買家會比較關(guān)注產(chǎn)品款式、材料、功能、價格或者商品評價，B2B買家大部分可能是企業(yè)、工廠或是批發(fā)商經(jīng)銷商，他們不單只關(guān)注產(chǎn)品款式、功能及質(zhì)量，還會關(guān)注公司實力、供貨能力。FABE分別指的是Features屬性、Advantag優(yōu)勢、Benefits益處、Evidence證明四大要素，合格的B2B詳情頁應(yīng)該涵蓋這四大要素。屬性一般包括材質(zhì)、結(jié)構(gòu)、功能、包裝，優(yōu)勢一般指產(chǎn)品賣點，益處指商家的供貨能力，證明包括認證、客戶合照、展會、生產(chǎn)線等。（2）B2B產(chǎn)品詳情FABE營銷法則（1）B2B/B2C產(chǎn)品詳情設(shè)計差異操作體驗02K公司設(shè)計師Grace與項目經(jīng)理Mike需要為該公司Leggings服裝店鋪設(shè)計產(chǎn)品詳情頁，請調(diào)研平臺詳情頁頁面，并給出設(shè)計方案。設(shè)計服裝店鋪產(chǎn)品詳情頁任務(wù)實施產(chǎn)品展示模塊產(chǎn)品對比模塊productdescription模塊產(chǎn)品信息模塊廣告圖模塊詳情頁企業(yè)環(huán)境/評價等展示模塊應(yīng)用實戰(zhàn)03K公司設(shè)計師Grace與項目經(jīng)理Mike需要為該公司服裝店鋪設(shè)計產(chǎn)品詳情頁，請調(diào)研詳情頁頁面，并給出設(shè)計方案。設(shè)計手機店鋪產(chǎn)品詳情頁不同行業(yè)的產(chǎn)品詳情頁，有什么不同？詳情頁元素設(shè)計任務(wù)二跨境電商視覺營銷詳情頁元素設(shè)計知識梳理

Content

of

Chapter詳情頁素材類型操作體驗應(yīng)用實戰(zhàn)設(shè)計服裝店鋪詳情頁元素設(shè)計店鋪詳情頁母版知識梳理01知識要點詳情頁素材類型詳情頁海報圖詳情頁產(chǎn)品信息圖詳情頁服務(wù)保障圖知識要點01詳情頁海報圖營銷海報圖精心設(shè)計的文案和圖形，可以營造促銷氛圍，引發(fā)顧客的興趣。在新款上線推廣、主推款重點推廣等場景有廣泛的應(yīng)用02詳情頁產(chǎn)品描述圖商品詳情描述圖是一種將商品的各種信息以圖文形式展示給客戶的方式。這些信息通常包括商品特點、功能、尺寸、材質(zhì)、使用方法等03詳情頁產(chǎn)品信息圖是展示產(chǎn)品參數(shù)尺寸等信息的圖片，根據(jù)行業(yè)不同有不同的信息類型04服務(wù)及保障信息圖一般包括：COMPANYPROFILE，WORKSHOP，CERTIFICATE，ADVANTAGE，CUSTOMERVISIT，TARGETMARKET，CONTACTUS七部分內(nèi)容詳情頁海報圖在設(shè)計中，將點線面三者進行組合應(yīng)用可以制作出豐富的視覺效果，向買家傳達對應(yīng)的情感訴求設(shè)計元素在設(shè)計時把握好主色調(diào)、輔助色、點綴色的應(yīng)用，避免設(shè)計色彩應(yīng)用雜亂，造成視覺疲勞色彩搭配可讀性強、搭配合理的文案能夠直觀地向買家傾訴活動和產(chǎn)品的詳細信息，引導(dǎo)買家完成產(chǎn)品的瀏覽與購買文案設(shè)計需要根據(jù)商品與主題要求，將要表現(xiàn)的信息合理地組織起來，構(gòu)成一個協(xié)調(diào)完整的畫面視覺構(gòu)圖詳情頁產(chǎn)品信息圖服務(wù)及保障信息圖服務(wù)及保障信息一般包括：COMPANYPROFILE，WORKSHOP，CERTIFICATE，ADVANTAGE，CUSTOMERVISIT，TARGETMARKET，CONTACTUS七部分內(nèi)容。操作體驗02K公司的設(shè)計師Grace完成了Leggings產(chǎn)品詳情頁結(jié)構(gòu)的設(shè)計，并想要在此基礎(chǔ)上設(shè)計詳情頁元素。Leggings產(chǎn)品詳情頁設(shè)計任務(wù)實施（1）打開PHOTOSHOP軟件，新建畫布。首先，建立一個750PX×1200PX像素的畫布(高度可調(diào))。（2）設(shè)計productdescription模塊：使用文字工具輸入標(biāo)題：可以統(tǒng)一屬性為：字體使用黑體類；字體樣式bold，字體顏色為深灰色。任務(wù)實施（3）設(shè)計詳情頁海報圖第一，搜索并借用手繪類背景素材，放置該區(qū)域底層；第二，用符合該背景的緊身褲的照片圖，進行摳圖，并放置在背景圖層之上；第三，制作符合背景風(fēng)格的圓潤類漫畫風(fēng)字體，放置于產(chǎn)品圖之上，并調(diào)整大小和顏色。為了將文字標(biāo)題突出，可以在文字下方，放置透明度低的白色矩形層打底。任務(wù)實施（4）設(shè)計產(chǎn)品信息模塊：選用左圖右文的方式布局這一模塊；當(dāng)然，在產(chǎn)品信息介紹之后，可以添加尺碼表，讓客戶作為購買尺寸的參考依據(jù)。任務(wù)實施（5）設(shè)計產(chǎn)品展示模塊：本模塊用左右結(jié)構(gòu)，將大小圖有層次的排列出來；并將特點用形狀和序號強調(diào)出來，讓客戶對產(chǎn)品的優(yōu)勢做以更加興形象和深入的了解。（6）設(shè)計產(chǎn)品對比模塊：分析產(chǎn)品優(yōu)勢，通過對比，強化客戶對本公司產(chǎn)品的認可。任務(wù)實施（7）設(shè)計企業(yè)環(huán)境/評價等展示模塊：設(shè)計這一部分的目的在于打消顧客疑慮，鞏固對產(chǎn)品的信任。制作要點：使用形狀工具繪制區(qū)域，將相應(yīng)的照片嵌入其中。應(yīng)用實戰(zhàn)03K公司設(shè)計師Grace與項目經(jīng)理Mikes設(shè)計完畢詳情頁結(jié)構(gòu)與元素后，設(shè)計師Grace需要進一步實施服裝類店鋪詳情頁的母版設(shè)計，這一模板設(shè)計之后，將其中的文字和圖片進行更替，就可以快速的改版應(yīng)用到新的產(chǎn)品描述頁中。以此體現(xiàn)同一類產(chǎn)品頁面的美觀性、邏輯性和規(guī)范性。請和Grace共同完成詳情頁母版的設(shè)計。設(shè)計店鋪詳情頁母版詳情頁的母版與模版在應(yīng)用場景上有什么不同？店鋪詳情頁設(shè)計詳情頁裝修任務(wù)三跨境電商視覺營銷詳情頁裝修知識梳理

Content

of

Chapter詳情頁裝修規(guī)范操作體驗應(yīng)用實戰(zhàn)服裝店鋪詳情頁裝修手機店鋪詳情頁裝修知識梳理01知識要點智能編輯器使用店鋪裝修案例智能編輯器規(guī)范智能編輯器規(guī)范01圖片尺寸.建議保持圖片尺寸為750px（寬）*800px（高），表格的尺寸寬度為750px，超出750px的部分將無法展示

02一鍵多圖多圖模塊支持一鍵上傳多張圖片，單圖模塊支持一圖多鏈，營銷模塊支持一鍵勾選推薦商品，提升商詳流量利用率

03視頻模塊有視頻模塊，支持視頻上傳

04批量修改支持批量投放推薦商品至多個商品，提升營銷效率店鋪裝修案例編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用編輯器使用操作體驗02K公司的設(shè)計師Grace完成了店鋪詳情頁結(jié)構(gòu)、詳情頁元素的任務(wù)，并想要在此基礎(chǔ)上進行店鋪裝修，請和Grace共同使用詳情頁智能編輯器完成店鋪裝修。店鋪裝修應(yīng)用實戰(zhàn)03K公司設(shè)計師Grace與項目經(jīng)理Mike為了體現(xiàn)同一類產(chǎn)品頁面的美觀性、邏輯性和規(guī)范性，需要設(shè)計詳情頁裝修模版，在產(chǎn)品發(fā)布時可以統(tǒng)一應(yīng)用，請將項目二完成的產(chǎn)品詳情頁母版設(shè)置為詳情頁裝修模版詳情頁裝修智能編輯與普通編輯的優(yōu)劣各是什么？詳情頁裝修跨境電商視覺營銷任務(wù)小結(jié)ProjectSummary本章主要介紹詳情頁的設(shè)計。首先，介紹詳情頁結(jié)構(gòu)的設(shè)計準(zhǔn)則，包括詳情頁設(shè)計五步法、B2B/B2C詳情頁設(shè)計準(zhǔn)則等。接下來，依次介紹詳情頁元素的設(shè)計，包括產(chǎn)品信息圖、產(chǎn)品海報圖等。最后，介紹了詳情頁裝修的