《跨境電商美工實(shí)務(wù)（第2版）》 教案 項(xiàng)目六 移動端視覺設(shè)計(jì)制作

學(xué)科跨境電商美工實(shí)務(wù)課題項(xiàng)目六移動端視覺設(shè)計(jì)制作任務(wù)1移動端店招、焦點(diǎn)圖及MiniBanner的制作任務(wù)2移動端店鋪布局及商品詳情頁制作周次2時數(shù)8節(jié)授課班級教學(xué)目的及要求：通過本次課程學(xué)習(xí)，應(yīng)達(dá)到以下目的和要求：知識目標(biāo)1.移動端店招的規(guī)格及設(shè)計(jì)要點(diǎn)。2.移動端焦點(diǎn)圖及MiniBanner單圖模式、單行多點(diǎn)擊模式、圖片輪播模式的圖片規(guī)格、設(shè)計(jì)要點(diǎn)和鏈接設(shè)置。3.移動端店招、焦點(diǎn)圖及MiniBanner的基本設(shè)置流程。4.移動端店鋪的布局原則。5.移動端商品詳情頁的布局原則。能力目標(biāo)1.能夠獨(dú)立完成移動端店招、焦點(diǎn)圖及Banner的制作。2.能夠獨(dú)立完成移動端店鋪布局及商品詳情頁的制作。教學(xué)重點(diǎn)：獨(dú)立完成移動端店鋪布局及商品詳情頁的制作教學(xué)難點(diǎn)：獨(dú)立完成移動端店鋪布局及商品詳情頁的制作教學(xué)過程備注一、教學(xué)導(dǎo)入提問討論:移動端店鋪裝修對于一個店鋪重不重要？移動端銷售已經(jīng)是電商的一個主流趨勢，對于產(chǎn)品轉(zhuǎn)化率的提升以及點(diǎn)擊率的提升，就需要依靠良好的移動端店鋪裝修，店鋪裝修會讓我們的產(chǎn)品展示效果更好，而且也能夠讓我們的產(chǎn)品賣點(diǎn)更加的突出。二、理論內(nèi)容項(xiàng)目六移動端視覺設(shè)計(jì)制作任務(wù)1移動端店招、焦點(diǎn)圖及MiniBanner的制作任務(wù)2移動端店鋪布局及商品詳情頁制作通過講授、課件演示，告知本章課程內(nèi)容：移動端店招的規(guī)格及設(shè)計(jì)要點(diǎn)，移動端焦點(diǎn)圖及MiniBanner單圖模式、單行多點(diǎn)擊模式、圖片輪播模式的圖片規(guī)格、設(shè)計(jì)要點(diǎn)和鏈接設(shè)置，移動端店招、焦點(diǎn)圖及MiniBanner的基本設(shè)置流程，移動端店鋪和商品詳情頁的布局原則。1.了解不同類型的圖片要求移動端店招的圖片規(guī)格為720px×200px，圖片格式為jpg或jpeg。移動端焦點(diǎn)圖及MiniBanner的圖片規(guī)格為720px×200px或720px×360px。焦點(diǎn)圖及MiniBanner的圖片模板中，單行多點(diǎn)擊的圖片總寬度必須在720px及以上。2．店招、MiniBanner、焦點(diǎn)圖的基本設(shè)置流程（1）店招的基本設(shè)置流程（2）MiniBanner及焦點(diǎn)圖的基本設(shè)置流程3.移動端店鋪布局及商品詳情頁制作［步驟1］店鋪的布局一定要基于簡明清晰的擺放原則。常用的擺放原則為：店招+“焦點(diǎn)圖+商品推薦模塊”+“MiniBanner設(shè)計(jì)模塊+商品推薦模塊”+系統(tǒng)推薦模塊。［步驟2］開頭使用“店招+焦點(diǎn)圖”突出店鋪爆款信息和店鋪的促銷折扣信息。［步驟3］使用“焦點(diǎn)圖+商品推薦模板”，把相應(yīng)的折扣商品與焦點(diǎn)圖放到一起，突出店鋪活動。［步驟4］最后將系統(tǒng)推薦模塊TopSelling放在最下面，與上面的模塊形成對應(yīng)，增加整個店鋪的完整性。［步驟5］優(yōu)化完了店鋪的布局，下一步需要制作商品詳情頁。首先決定采用FAB利益排序法。［步驟6］制作商品詳情頁第一屏：商品賣點(diǎn)和優(yōu)勢。［步驟7］制作商品詳情頁第二屏：商品細(xì)節(jié)展示，讓客戶更加直觀地了解商品。［步驟8］制作商品詳情頁第三屏：商品屬性信息+尺碼說明。［步驟9］制作商品詳情頁第四～六屏：商品模特圖片+實(shí)物圖片。［步驟10］將整理好的圖片上傳。其中，應(yīng)該注意的是：圖片尺寸沒有限制，在保證清晰度的情況下，圖片像素小，有助于提升在移動端的打開速度。可以嘗試在Photoshop中將圖片存成web格式，并且通過調(diào)整品質(zhì)的數(shù)值達(dá)到這個效果。［步驟11］點(diǎn)擊“產(chǎn)品管理”，然后點(diǎn)擊“發(fā)布產(chǎn)品”，選擇適合自己的類目進(jìn)行發(fā)布。［步驟12］移動端商品詳情頁可獨(dú)立編輯。點(diǎn)擊“商品詳情頁”下方的“無線描述”，展開后把排好序的圖片以及文字添加進(jìn)去。課堂討論與總結(jié)1.店鋪的布局原則以速賣通平臺為例，進(jìn)行移動端店鋪首頁布局首先要了解移動端店鋪包含的基礎(chǔ)模塊。移動端店鋪包含兩個頁面：第一個是移動端店鋪首頁裝修，涉及以下功能模塊：店招、6個商品推薦模塊、3個系統(tǒng)模塊、6個圖片模塊；第二個是無線活動頁面。一般店鋪模板的順序?yàn)椋?）店招設(shè)計(jì)；2）焦點(diǎn)圖設(shè)計(jì)3）MiniBanner設(shè)計(jì)（圖片模板）；4）商品推薦模塊展示（系統(tǒng)模板+商品推薦模板）。商品推薦模塊的分布和模塊擺放原則。（1）商品推薦模塊的布局商品主圖的布局前提是商品主圖要清晰干凈，像素要滿足平臺要求。設(shè)置商品標(biāo)題時，應(yīng)盡量把主要關(guān)鍵詞放在最前面，其他的放在稍微靠后的位置來進(jìn)行視覺營銷。同時，可以根據(jù)自己的需求選擇不同的商品展現(xiàn)樣式。（2）模塊擺放原則賣家可以根據(jù)自己的要求調(diào)整商品的擺放，但是一定要基于簡明清晰的擺放原則。這里推薦一種最常見的擺放原則：店招+“焦點(diǎn)圖+商品推薦模塊”+“MiniBanner設(shè)計(jì)模塊+商品推薦模塊”+系統(tǒng)推薦模塊。2.商品詳情頁的布局原則商品詳情頁是店鋪中最容易與顧客產(chǎn)生交集和共鳴的頁面，其設(shè)計(jì)對