跨境電商視覺(jué)設(shè)計(jì)與營(yíng)銷（第2版） 課件 項(xiàng)目7-店鋪首頁(yè)設(shè)計(jì)

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

Content

of

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

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

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

Content

of

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

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

Content

of

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

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