項目七店鋪首頁設(shè)計跨境電商視覺營銷跨境電商B2B數(shù)據(jù)運營職業(yè)技能等級證書（初級）課程01店鋪首頁結(jié)構(gòu)設(shè)計02首頁素材設(shè)計目錄CONTENTS03首頁裝修知識目標(biāo)技能目標(biāo)思政目標(biāo)LearningGoals掌握首頁結(jié)構(gòu)要素與設(shè)計準(zhǔn)則了解首頁店招、banner等視覺元素的裝修規(guī)范掌握店鋪首頁裝修規(guī)范能夠設(shè)計店鋪首頁結(jié)構(gòu)能夠設(shè)計與制作店招、banner等店鋪首頁裝修素材能夠進(jìn)行店鋪首頁裝修培養(yǎng)審美意識在跨境電商視覺營銷過程中堅持科學(xué)的價值觀和道德觀跨境電商視覺營銷學(xué)習(xí)目標(biāo)店鋪首頁結(jié)構(gòu)設(shè)計任務(wù)一跨境電商視覺營銷店鋪首頁結(jié)構(gòu)設(shè)計知識梳理

Content

of

Chapter店鋪首頁結(jié)構(gòu)設(shè)計操作體驗應(yīng)用實戰(zhàn)設(shè)計路由器店鋪首頁布局手機(jī)產(chǎn)品店鋪首頁設(shè)計

知識梳理01知識要點首頁布局首頁內(nèi)容首頁設(shè)計原則視覺動線與產(chǎn)品陳列首頁設(shè)計基礎(chǔ)店鋪首頁可以分為品牌型視覺店鋪首頁和營銷型店鋪首頁兩種類型?？缇畴娚藼2B店鋪首頁以以品牌形象塑造為主，其設(shè)計重點是彰顯品牌優(yōu)勢。一般來說，在進(jìn)行店鋪首頁設(shè)計時，在風(fēng)格、色彩、版式的設(shè)計上需要符合店鋪整體風(fēng)格定位；其次通過展示店鋪服務(wù)、產(chǎn)品質(zhì)量和競爭優(yōu)勢，體現(xiàn)品牌的獨特性，在采購商心中樹立良好的企業(yè)形象。店鋪首頁需要弱化營銷信息，引導(dǎo)訪問者關(guān)注工廠實力、產(chǎn)品信息等，以強(qiáng)化用戶信任。首頁內(nèi)容首頁內(nèi)容01商品信息02海報圖03店鋪首頁的內(nèi)容一般包含商品信息、促銷信息、分類導(dǎo)航、店招、商家信息等主要類別。商品信息包括爆款商品、主推商品展示等，一般通過店鋪裝修商品展示模塊的組件、通欄海報、輪播海報等多種形式進(jìn)行表述，以和商品列表頁的鋪貨展示形式有所區(qū)別。海報是商品和其他信息展示的一種特殊形式，在豐富頁面內(nèi)容的同時，給消費者帶來視覺視覺沖擊，增加消費者的新鮮感，是店鋪吸引消費者的重點視覺元素。首頁布局第一屏又稱為首焦，首焦是消費者進(jìn)入店鋪后第一時間看到的內(nèi)容，一般會采取圖片結(jié)合文案的設(shè)計形式，此位置一般使用輪播海報，或者通欄海報來展示信息。第二屏一般放置主推商品，采取圖像拼接的設(shè)計形式，吸引用戶的注意。第三屏通常放置圖文形式的商品分類模塊和商品陳列區(qū)。第4-N屏，主要根據(jù)店鋪需求放置商品陳列、信息展示、導(dǎo)航等。起到豐富店鋪首頁信息，充分展示店鋪特典的作用。頁中的設(shè)計遵循分屏法則。在設(shè)計網(wǎng)頁時應(yīng)該讓消費者不需要滾動頁面便可以把最重要的信息看完整，并且留下深刻的第一印象。所以，一般會把頁中進(jìn)行進(jìn)一步的區(qū)分，構(gòu)成首焦、第二屏、第三屏、第N屏、頁尾等分區(qū)。分屏法則視覺動線與商品陳列視覺動線與商品陳列是在首頁設(shè)計的其他兩個重點要素。視覺動線是指眼睛在閱讀時，視線移動而構(gòu)成的瀏覽路徑。常見的視覺動線有“Z”型和“W”型?！癦”字型視覺動線營造是最常規(guī)的視覺動線營造方法。可以帶來整齊劃一的效果，讓消費者看到整齊排列的商品。操作體驗02GNCB貿(mào)易公司的設(shè)計師Tim需要為該公司阿里巴巴國際站路由器店鋪首頁進(jìn)行整體設(shè)計，請和Tim按照如下要求共同完成店鋪首頁設(shè)計：（1）設(shè)計首頁裝修模塊框架；（2）添加必要模塊并進(jìn)行設(shè)置；（3）發(fā)布新版首頁。店鋪首頁設(shè)計路由器店鋪首頁設(shè)計任務(wù)實施序號序號模塊內(nèi)容首焦1店招+導(dǎo)航公司名/電話/郵箱/官網(wǎng)2全屏海報商品海報3多語言工具欄—第二屏4商品優(yōu)勢每周上新，商品認(rèn)證，5核心商品分類KA，KB，LA，LB，LC第三屏6商品陳列熱銷商品7公司優(yōu)勢生產(chǎn)經(jīng)驗，生產(chǎn)員工，研發(fā)團(tuán)隊等8公司視頻—第N屏9商品陳列單品模塊10商品陳列主營類目11輪播海報公司優(yōu)勢12商品陳列櫥窗商品13輪播海報商品海報頁尾14公司信息公司介紹/主營市場/證書/核心優(yōu)勢等15客服—16自定義海報參展圖片/工廠工藝流程圖17智能推薦模塊—18詢盤直通車—此類首頁設(shè)計存在什么特點？請為該店鋪設(shè)計其他不同風(fēng)格的首頁店鋪首頁。店鋪首頁設(shè)計應(yīng)用實戰(zhàn)03GNCB貿(mào)易公司的設(shè)計師Tim需要為該公司阿里巴巴國際站店鋪首頁進(jìn)行整體設(shè)計，請和Tim按照如下要求共同完成店鋪首頁設(shè)計：（1）設(shè)計首頁裝修模塊框架；（2）添加必要模塊并進(jìn)行設(shè)置；（3）發(fā)布新版首頁店鋪首頁設(shè)計手機(jī)產(chǎn)品店鋪首頁設(shè)計

任務(wù)實施點綴色1．首頁裝修模塊框架設(shè)計根據(jù)對同類店鋪調(diào)研及結(jié)合當(dāng)前店鋪實際情況，Tim確定了店鋪首頁裝修模塊框架根據(jù)視覺規(guī)范制作廣告圖、海報圖、背景圖、熱區(qū)切圖等。3．添加設(shè)置頁面模塊依次拖拽添加各個子模塊，并上傳圖片，設(shè)置參數(shù)（詳述參見參考任務(wù)7-1至7-5）。4．首頁發(fā)布保持店鋪首頁裝修結(jié)果，并發(fā)布首頁，店鋪首頁裝修效果如圖7-25所示。店鋪首頁設(shè)計點綴色該頁面中是否有缺少的模塊，應(yīng)如何進(jìn)行優(yōu)化？店鋪首頁設(shè)計首頁素材設(shè)計任務(wù)二跨境電商視覺營銷首頁素材設(shè)計知識梳理

Content

of

Chapter店鋪首頁素材操作體驗應(yīng)用實戰(zhàn)設(shè)計店招設(shè)計banner知識梳理01知識要點店招設(shè)計Banner設(shè)計店鋪店招設(shè)計原則店招需要直觀明確地展示店鋪的經(jīng)營內(nèi)容及賣點、特點、優(yōu)勢，店招的主要設(shè)計原則包括如下3點：（1）視覺重點不宜過多，要放棄無意義的多余元素，用色須簡潔（一般不超過3種）；（2）要能凸顯品牌特性；（3）需要結(jié)合店鋪現(xiàn)階段的情況如營銷、配色、主推商品等進(jìn)行設(shè)計。

從內(nèi)容上講，店招通常包括店鋪名稱、LOGO、廣告語、認(rèn)證、廣告促銷等信息。作為店鋪中流量最大的一個模塊，店招在不影響視覺體驗的情況下可以盡可能多地添加有益信息。店招的種類品牌宣傳類店招制作品牌宣傳類店招時，首先要考慮的內(nèi)容是店鋪名稱、LOGO、廣告語等品牌宣傳的最基本的內(nèi)容；其次是聯(lián)系方式等?；顒哟黉N類店招活動促銷類店招首先要考慮的因素是活動名稱、優(yōu)惠券、促銷產(chǎn)品等活動信息；其次是店鋪名稱、LOGO、廣告語等品牌宣傳為主的內(nèi)容。在氣氛設(shè)計和內(nèi)容展示上，活動信息占據(jù)較大的篇幅。這類店招在平臺舉行大型營銷活動時商家使用得較多。阿里巴巴國際站PC端店招底圖尺寸為200像素×120像素。知識要點banner分為普通banner與通欄banner兩種，普通banner的寬度為1200px，高度為250/350/450三個尺寸，全屏通欄橫幅尺寸建議寬1920，高650或550像素，支持JPG/PNG格式。在設(shè)計Banner時，一般需要注意風(fēng)格統(tǒng)一、構(gòu)圖合理三個方面。通欄廣告，是店鋪裝修中最常見的模塊，它以橫貫頁面的形式出現(xiàn)。該類型廣告尺寸大、視覺沖擊力強(qiáng)，能給訪問者留下深刻印象。精美的banner能夠引起用戶的興趣，增加頁面停留時間。通欄廣告通欄廣告，是店鋪裝修中最常見的模塊，它以橫貫頁面的形式出現(xiàn)。該類型廣告尺寸大、視覺沖擊力強(qiáng)，能給訪問者留下深刻印象，通欄廣告僅支持在首頁、自定義頁和無線旺鋪的首頁添加，一個頁面支持添加一個通欄廣告。PC端圖片高度有2種：550像素、650像素，寬統(tǒng)一為1920像素。Banner設(shè)計banner的風(fēng)格需要與店鋪風(fēng)格適配，而店鋪的風(fēng)格很大程度上取決于店鋪所經(jīng)營的商品，為了樹立店鋪的品牌形象，彰顯店鋪的專業(yè)和品質(zhì)，風(fēng)格化店鋪的店招、商品、店鋪風(fēng)格是統(tǒng)一的01BANNER風(fēng)格設(shè)計Banner構(gòu)圖設(shè)計的目的是處理好圖片和文字之間的位置關(guān)系，使其整體和諧，并突出主體。Banner構(gòu)圖一般可以分為左右構(gòu)圖、三分式構(gòu)圖、上下構(gòu)圖、多層次構(gòu)圖、斜切構(gòu)圖02banner構(gòu)圖設(shè)計在網(wǎng)絡(luò)環(huán)境下，買家對一則廣告的關(guān)注時間平均不超過2秒，因此banner文案要做到精簡，才能給買家留下深刻的印象。Banner文案一般分為刺激性文案和說服性文案兩種類型。03banner文案設(shè)計操作體驗02GNCB貿(mào)易公司的設(shè)計師Tim需要為該公司寵物用品類店鋪設(shè)計新店招，要求該店招符合公司的品牌定位，請和Tim共同完成店招設(shè)計。店鋪首頁設(shè)計設(shè)計店招圖片任務(wù)實施：設(shè)計店招圖片（1）策劃店招內(nèi)容：因該店招類型為品牌宣傳類店招，該店招內(nèi)容包括公司名稱、公司LOGO。（2）確定店招尺寸：打開Photoshop，新建一個200像素×120像素的畫布。（3）添加店招內(nèi)容：導(dǎo)入已經(jīng)設(shè)計好公司的LOGO，并添加凸顯品牌形象的元素。（4）設(shè)計店招排版：根據(jù)店招設(shè)計規(guī)范進(jìn)行排版，最終效果如圖所示。服裝行業(yè)和寵物用品行業(yè)的店招，在設(shè)計風(fēng)格上會有哪些不同？店鋪首頁設(shè)計GNCB貿(mào)易公司的設(shè)計師Tim需要為該公司阿里巴巴國際站店鋪首頁添加通欄廣告，并設(shè)置輪播時間為每10秒切換，請和Tim共同完成該店鋪裝修模塊的設(shè)置。店鋪首頁設(shè)計洗手機(jī)產(chǎn)品通欄海報設(shè)計海報圖的不同切換時間將帶來哪些不同的視覺體驗？店鋪首頁設(shè)計店鋪首頁裝修任務(wù)四跨境電商視覺營銷店鋪首頁裝修知識梳理

Content

of

Chapter首頁裝修規(guī)范操作體驗店鋪首頁裝修知識梳理01知識要點首頁裝修編輯器店招設(shè)置導(dǎo)航欄設(shè)置Banner設(shè)置店鋪裝修編輯店鋪首頁裝修編輯器左側(cè)由產(chǎn)品、圖文、視頻、公司等模塊組成，每個模塊包含豐富的模塊組件，是首頁裝修的重要組成部分。中間是展示區(qū)，把裝修模塊拖拽到展示區(qū)，當(dāng)出現(xiàn)綠色加號的時候松開，就可以實現(xiàn)所見即所得的裝修效果。點擊展示區(qū)的裝修模塊，就會出現(xiàn)右側(cè)屬性設(shè)置區(qū)，屬性設(shè)置區(qū)可以設(shè)置裝修模塊的屬性參數(shù)。Banner設(shè)置在店招中可設(shè)置店招圖片、公司名展示、添加/更換導(dǎo)航條上的自定義頁面等。進(jìn)Home頁的編輯器>點擊展示區(qū)的店招模塊>在右側(cè)編輯彈框中，即可編輯內(nèi)容。公司簡介可以設(shè)置“顯示”或“隱藏”。設(shè)置“顯示”公司簡介，則可進(jìn)一步設(shè)置公司簡介的字體和顏色。店招底圖也可設(shè)置“顯示”或“隱藏”。選擇“顯示”則可上傳店招的背景圖片，店招圖片尺寸為1200*280px，但圖片下方實際是有44px被導(dǎo)航條遮擋的，請注意給店招的內(nèi)容留出空間；設(shè)置“隱藏”，則店招這塊就會直接透出大背景，如示例圖所示，就是隱藏店招底圖后，看編輯后臺的效果，實際預(yù)覽是透明，且直接顯示大背景。導(dǎo)航設(shè)置導(dǎo)航的頁面順序：Home、Product

Categories、CompanyProfile、Contacts４個官方強(qiáng)制頁面，為了保證一致性，這４個頁面必須有，且順序不可調(diào)整。商家可以新增Video、Feeds、Promotion、Member、Custom（自定義）等頁面。這幾個頁面是否呈現(xiàn)可由商家自主決定，并且還可以手動調(diào)整順序。導(dǎo)航開啟先決條件：有些頁面的開啟需要先決條件，如Video頁需要視頻產(chǎn)品數(shù)達(dá)到20個以上才能自動開啟。輪播banner設(shè)置Banner模塊最多可上傳5張圖片，僅支持JPG/PNG格式，一般圖片像素應(yīng)一致。輪播banner高有250像素、350像素、450像素三種選項，通欄banner高有550像素、650像素兩種選項。為了保證顯示效果，建議圖片像素保持一致，并使用符合要求的圖片。輪播時間可以設(shè)置為不輪播（買家手動切換）、每五秒切換、每十秒切換。產(chǎn)品設(shè)置產(chǎn)品在店鋪裝修里有多重類型，包括帶類目商品、櫥窗商品等，以下以帶類目商品為例進(jìn)行說明。帶類目商品的添加路徑是，編輯器-產(chǎn)品推薦-帶類目產(chǎn)品>拖拽添加。帶類目商品可展示4個產(chǎn)品，可以選擇自動選品或者手動選品。大標(biāo)題為大類目，右側(cè)展示的4個產(chǎn)品均在該大類目下，紅框位置的小的分組是該大類目下的子分組，可在“產(chǎn)品分組”里修改。操作體驗02全球跨境電子商務(wù)公司的設(shè)計師Coral完成了首頁布局設(shè)計與裝修元素制作，請和Coral共同完成如下店鋪裝修任務(wù)。（1）店鋪裝修添加合適的頁面背景，頁面主題色應(yīng)符合背景色調(diào)。（2）裝修店鋪店招。（3）裝修導(dǎo)航欄。（4）裝修通欄廣告。（5）裝修商品展示。（6）添加公司介紹模塊。店鋪首頁設(shè)計店鋪裝修該頁面中是否有缺少的模塊，應(yīng)如何進(jìn)行優(yōu)化？店鋪首頁設(shè)計跨境電商視覺營銷任務(wù)小結(jié)ProjectSummary本項目通過對店鋪首頁整體設(shè)計與發(fā)布分析，從而掌握店鋪首頁的整體設(shè)計和店鋪背景設(shè)置方法。一個具有自身特色和文化內(nèi)涵的店鋪，如果能夠通過店鋪首頁的整體設(shè)計和店鋪背景設(shè)置傳達(dá)給消費者一個與其心理訴求相符合的文化理念，就更容易被消費者記住，而文化理念只要能被消費者記住，其引發(fā)復(fù)購的可能性就會大大提高。因此，擁有自己的特色對商家來說是非常重要的。店鋪的風(fēng)格也是店鋪的一種特色。店鋪首頁的整體