項目九無線端視覺設計跨境電商視覺營銷跨境電商B2B數據運營職業技能等級證書（初級）課程01無線端旺鋪首頁設計02無線端旺鋪詳情頁設計03無線端店鋪裝修目錄CONTENTS跨境電商視覺營銷知識目標技能目標思政目標學習目標LearningGoals了解無線端視覺的基本特點掌握無線端首頁與詳情頁的設計方法能夠設計無線端首頁能夠設計無線端詳情頁能夠裝修無線端店鋪培養跨境電商運營過程中的審美意識在跨境電商數據分析過程中堅持科學的價值觀和道德觀無線端首頁設計任務一跨境電商視覺營銷無線端旺鋪首頁設計知識梳理

Content

of

Chapter無線端裝修店鋪框架操作體驗應用實戰無線端旺鋪首頁設計體驗無線端旺鋪首頁設計實戰知識梳理01知識要點無線端設計基本原則首頁構成要素首頁基本框架無線端視覺設計基本原則信息簡潔明了視覺沖擊強與PC端相呼應為了推銷產品,吸引消費者的注意，需要選擇視覺沖擊大的圖片和產品。同時，應盡量調高圖片的亮度和純度，增加商品圖片的通透性，確保用戶在各種條件下（省電模式、光線過強等）都能清晰地查看頁面和商品無線端店鋪呈現的信息一定要簡潔明了，以便傳播得更加快速。因為無線端屏幕面積小，能夠傳遞的信息有限，太多的內容易引起消費者的閱讀疲勞，從而失去繼續瀏覽的耐心，造成客戶的流失。無線端的內容要與PC端的內容相互呼應，具有相通的視覺符號，以提高店鋪品牌的關聯性。在合理分配內容框架的基礎上，嚴格遵守了設計規范，其內容展示重點突出，可以吸引對這類商品感興趣的消費者進行瀏覽。無線端視覺設計基本原則首頁主要構成要素焦點圖為了迎合移動設備的屏幕尺寸，無線端店鋪的首頁同樣利用焦點圖來吸引用戶的注意力，突出展示店鋪的最新動態或活動信息。由于移動屏幕寬度的限制，這些焦點圖在寬度上更為緊湊，主要聚焦于商品和文案的展示。在視覺構圖上，傳統的左文右圖布局轉變為上文下圖的排列方式，這樣設計旨在確保焦點圖能夠完全占據無線端頁面的首屏空間，以更強烈的視覺震撼力準確傳達信息，從而更有效地吸引用戶的目光。優惠活動區優惠活動區通常包含優惠券信息和活動信息兩大板塊，它們通常被安排在首屏焦點圖的下方顯眼位置。當用戶被焦點圖的內容所吸引并繼續瀏覽時，他們就能方便地看到店鋪提供的優惠信息，進而深入了解店鋪的促銷詳情。商品分類區無線端店鋪首頁的商品分類區，與PC端相類似，主要致力于展示店鋪商品的核心類型，并致力于為用戶提供精準、快速的導航體驗，將用戶直接引導至他們感興趣的分類頁面。在視覺設計上，無線端可以延續計算機端的統一風格，但排版布局需根據移動設備的顯示特性進行適配，確保用戶能夠輕松瀏覽和點擊，快速定位到所需商品分類。店鋪首頁框架店鋪框架即店鋪主導航結構，新版店鋪框架主要由頂部導航、底部導航、店招構成，右圖為無線端旺鋪前臺展示效果。（1）頂部導航頂部導航由Home首頁、Product產品、Profile公司信息三大固定Tab和第4個可變的Tab構成（右圖Feeds）。Member。（2）底部導航底部導航由Categories（全部寶貝）、SendInquiry、ChatNow構成。（3）店鋪信息店鋪信息模塊展示買家最關注的公司核心信息，包括平臺經營年限、是否通過認證、Feed關注人數等信息。頂部導航在用戶瀏覽無線端店鋪的時候會全局懸浮，方便用戶查看和快速切換。操作體驗022020年8月，小李在北京全球跨境電商電子商務有限公司國際站旺鋪運營部就職，部門負責人黃經理分配他負責基礎建站工作，具體為產品上架、店鋪開通。接下來，請你與小李一起，完成以下無線端首頁模塊設計。無線端視覺設計無線端首頁設計任務實施：無線端視覺與體驗操作參考同行旺鋪模塊架構后，根據企業無線端旺鋪展示需要，以及自己目前的特長，小李決定店鋪模塊架構由店招、營銷、主營類目、櫥窗產品、橫幅Banner、視頻、熱區切圖、RTS現貨品專區、新品專區、樣品專區、爆品專區、智能產品專區組成。營銷：通過優惠券和限時折扣充實模塊。櫥窗產品：有10個櫥窗產品，通過視頻展示產品品質、產品重要參數、產品使用操作方法。視頻：動態展示公司外部形象、辦公環境、研發實力、生產過程、包裝過程、樣品間、倉庫等場景。熱區切圖：靜態展示公司辦公、工廠車間、樣品間、公司榮譽證書等公司形象和實力。

RTS現貨品專區：手動選擇4個RTS產品，為了美觀，前2個產品有視頻，后2個產品可以同時放或同時不放視頻。新品專區：自動選擇3個新品。爆品專區：自動選擇旺鋪最爆的一個產品。智能產品專區：即智能千人千面模塊，根據買家行為展示旺鋪內最合適的產品，不支持編輯。無線端店鋪框架相對固定，但頁面內容可以使用產品、圖文、視頻、營銷、公司等裝修模塊靈活組合，這也是賣家店鋪裝修的個性化發揮空間，不同的組合帶來不同的客戶體驗，首頁裝修應如何組合這些模塊才可以優化轉化率呢？無線端視覺設計應用實戰03小李在北京樂博創電子商務有限公司（BeijingLebochuangElectronicCommerceCo,Ltd.）國際站旺鋪運營部就職，負責旺鋪基礎建站工作。部門負責人黃經理安排他試做一套用于出口通會員旺鋪裝修設計的任務，用于迎接平臺大促的旺鋪裝修，接下來，請你與小李一起，完成此無線端店鋪設計工作。無線端視覺設計無線端大促首頁設計旺鋪裝修的視覺效果一方面取決于店鋪各個模塊之間的邏輯關系，另一方面取決于裝修素材（文本、圖片、視頻）的制作水平。素材的選取如何與店鋪品牌形象適配?無線端視覺設計無線端詳情頁設計任務二跨境電商視覺營銷無線端詳情頁設計知識梳理

Content

of

Chapter無線端旺鋪詳情頁設計常識操作體驗應用實戰無線端旺鋪詳情頁設計體驗無線端旺鋪詳情頁設計實戰知識梳理01知識要點詳情頁設計規范詳情頁編輯器編輯器編輯模式無線端詳情頁設計規范無線端詳情頁重要性無線端店鋪的首頁無疑是其門面，但商品詳情頁則是交易成敗的關鍵。用戶最終是否會購買商品，往往取決于商品詳情頁所呈現的內容。因此，精心制作商品詳情頁，不僅是商品視覺展示的核心要點，更是營銷策略中不可或缺的一環。無線端排版布局另外，商品詳情頁中的圖片文字、商品信息和商品描述文字的大小也需要合理設置。文字過小不僅會影響視覺效果，還可能造成用戶閱讀困難，無法快速獲取所需信息。因此，我們應確保這些文字足夠大且易于閱讀。無線端詳情編輯器的特點相對于PC端，無線端屏幕尺寸更小，對信息的排版有一定要求。阿里巴巴國際站的智能裝修編輯器可以優化商品詳情頁無線端的展示，實現針對無線端的單獨設計和單獨編輯，如圖所示為無線端產品發布預覽效果。無線端詳情編輯器可以添加超鏈接，增大運營空間，還可以一鍵批量同步相同模塊到多個商品，節省人員操作成本，并支持在詳情頁放置以品帶店、以品帶品等營銷模塊，提升轉化率。無線端詳情編輯器的使用無線端詳情頁的操作路徑為依次點擊：“MyAlibaba”→“產品管理”→“發布產品”→“根據系統提示填寫產品信息”→“選擇智能編輯”→“我要編輯”，頂端切換到Mobile即可。無線端詳情編輯器如圖所示，左側由導航配置、視頻、營銷、圖文、圖片、表格、文字、自定義模板等模塊組成，每個模塊包含豐富的模塊組件，是產品詳情內容的重要組成。中間是展示區，實現三端一體、所見即所得的裝修效果（即裝修后臺、預覽、發布三端的展示效果一致）。左側選擇圖文/圖片等形式，拖動到中間要放置的位置，再點擊對應模塊，可打開右側編輯區的操作界面，可以對模塊進行編輯。全部設置完成后，可點擊預覽”按鈕進行查看，沒有問題即可點擊“編輯完成”按鈕結束操作。產品詳情編輯的智能編輯和普通編輯智能編輯分PC端和無線端，產品圖片除必要的參數，一般不在圖片上呈現。不管均支持導航配置、視頻、營銷、圖文、圖片、表格、文字、自定義模板等，其中，營銷、圖文、圖片等都支持設置鏈接。普通編輯不分PC端和無線端，詳情設計簡單，定好基本模塊（視頻、屬性表格、文字較多的圖片、公司介紹、FAQ），更多的產品信息一般借助圖文結合的方式呈現，很多文字介紹都在圖片上，買家不能直接復制圖片上的文字用于翻譯。平臺對產品詳情普通編輯的規定如下：①應包含規格參數、用途特征、質量標準、相關認證、服務等內容的詳細描述。②利用圖片更直觀的向買家展示產品信息，可以使用多角度圖、細節圖、包裝、設計圖等。③將信息分段、標號，或使用表格，以方便買家的閱讀。④避免大段文字簡單羅列，這會降低買家對產品的興趣。

在產品詳情普通編輯操作頁面，不能上傳視頻，可以在主圖視頻上傳區的下方，上傳主圖視頻。操作體驗022020年9月，小李在北京全球跨境電商電子商務有限公司店鋪運營部就職，他通過產品詳情普通編輯上新了一批耳機，在耳機的詳情頁中產品文字介紹和產品詳情圖片放在一張圖片上，不利于買家直接復制翻譯。新版智能編輯出來后，黃經理讓小李試試用智能編輯重新設計一套用于耳機產品線的智能編輯詳情模板。接下來，請你與小李一起，完成這套耳機產品線詳情模板的設計工作。無線端視覺設計無線端旺鋪詳情頁設計操作體驗任務實施：無線端旺鋪詳情頁設計操作體驗根據平臺對詳情智能編輯的規定，參考同行詳情模板，并結合本企業情況，小李確定耳機產品線的詳情頁由產品標題、產品圖描、賣家推薦（最多推薦12個產品）、包裝及運送、公司介紹、FAQ等6個模塊組成，涉及的詳情編輯器操作小模塊組件有11個。設計耳機產品線的無線詳情模板序號模板內容操作模塊操作路徑1英文標題文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯2ProductDescription導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中9張產品圖片多圖模塊無線詳情編輯器→圖片→多圖→拖動至中間→多圖模塊編輯3賣家推薦店鋪推薦模塊無線詳情編輯器→營銷→產品導購→拖動至中間→店鋪推薦模塊編輯4Packing&Delivery導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中包裝及運送英文說明文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯物流方式圖片模塊無線詳情編輯器→圖片→單圖→拖動至中間→圖片模塊編輯5CompanyProfile導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中公司英文介紹文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯6FAQ導航導航配置無線詳情編輯器→導航配置→導航管理→創建導航FAQ→點擊FAQ導航添加至頁面中間FAQ內容文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯任務實施：無線端旺鋪詳情頁設計操作體驗準備裝修素材。準備好產品標題和圖文結合的產品圖片素材，編輯包裝及運送、公司介紹等文本素材。并設置圖片為W750×H400像素。以下圖片為耳機產品線的詳情模板前臺展示效果。標題、ProductDescription導航、1張產品圖片產品圖片產品圖片任務實施：無線端旺鋪詳情頁設計操作體驗以下圖片為耳機產品線的詳情模板前臺展示效果。產品規格產品賣點展示產品圖片任務實施：無線端旺鋪詳情頁設計操作體驗以下圖片為耳機產品線的詳情模板前臺展示效果。

賣家推薦導航與推薦產品賣家推薦產品Packing&Delivery導航與說明、物流方式展示任務實施：無線端旺鋪詳情頁設計操作體驗以下圖片為耳機產品線的詳情模板前臺展示效果。CompanyProfile導航與公司介紹FAQ導航與FAQ內容詳情頁智能編輯對普通編輯可以帶來的瀏覽體驗優化包括哪些方面？無線端視覺設計應用實戰03小李在北京全球跨境電子商務有限公司就職旺鋪運營部。2021年1月，部門負責人黃經理覺得小李用智能編輯做的產品詳情頁很不錯，請小李負責再設計一個用于廚房秤產品線的詳情模板，產品線的產品支持直接下單，接下來，請你與小李一起，完成這個產品線詳情模板的設計工作。無線端視覺設計無線端旺鋪詳情頁設計應用任務實施：無線端旺鋪詳情頁設計應用調查廚房秤產品詳情頁的組成

廚房秤產品詳情頁一般由產品圖片、視頻、規格屬性、物流信息、企業信息等組成。產品展示圖片：（1）實物圖3張：1張正面+1張側面+1張底部or頂部）（2）1張產品解剖（3）1張產品功能效果說明圖（4）3張圈裝修案例效果圖組成共計8張圖片。任務實施：無線端旺鋪詳情頁設計應用設計廚房秤產品線的詳情模板參考同行詳情模板，并結合本企業情況后，小李確定廚房秤產品線的詳情頁由標題、產品圖描、賣家推薦、包裝及運送、公司介紹、公司形象展示（辦公樓形象、車間、倉庫、證書、樣品間等）、公司研發實力展示、物流與支付、FAQ9個模塊組成，涉及的編輯器操作小模塊組件有13個，如表廚房秤產品線詳情模板架構所示。序號模板內容操作模塊操作路徑1英文標題文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯2ProductDescription導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中

5張產品圖片多圖模塊無線詳情編輯器→圖片→多圖→拖動至中間→多圖模塊編輯3賣家推薦店鋪推薦模塊無線詳情編輯器→營銷→產品導購→拖動至中間→店鋪推薦模塊編輯4Packing&Delivery導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中

包裝及運送英文說明文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯5CompanyProfile導航配置無線詳情編輯器→導航配置→導航管理→點擊備選導航添加至頁面中

公司英文介紹文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯6公司辦公樓形象、車間、倉庫、證書、樣品間等展示圖片模塊無線詳情編輯器→圖片→單圖→拖動至中間→圖片模塊編輯7公司研發實力展示圖片模塊無線詳情編輯器→圖片→單圖→拖動至中間→圖片模塊編輯8物流與支付圖片模塊無線詳情編輯器→圖片→單圖→拖動至中間→圖片模塊編輯9FAQ導航導航配置無線詳情編輯器→導航配置→導航管理→創建導航FAQ→點擊FAQ導航添加至頁面中間

FAQ內容文本編輯模塊無線詳情編輯器→文字→純文本→拖動至中間→文本編輯模塊編輯任務實施：無線端旺鋪詳情頁設計應用準備并編輯廚房秤產品線無線端詳情素材準備好產品標題和圖片，編輯包裝及運送、公司介紹等文本素材，制作公司辦公樓形象、車間、倉庫、證書、樣品間、研發實力等展示圖片及物流圖表說明圖與支付示意圖。圖片一般推薦尺寸為W750×H400像素。廚房秤產品線的詳情模板前臺展示效果如圖所示。任務實施：無線端旺鋪詳情頁設計應用任務實施：無線端旺鋪詳情頁設計應用拍產品詳情頁的不同模塊在提升瀏覽轉化率上起到哪些不同的作用？無線端視覺設計無線端裝修任務三跨境電商視覺營銷無線端裝修知識梳理

Content

of

Chapter無線端旺鋪裝修規則操作體驗應用實戰無線端與PC端店鋪同步裝修無線端旺鋪裝修實戰知識梳理01知識要點頁面裝修模塊PC端一鍵同步裝修無線端無線端獨立裝修頁面裝修模塊頁面裝修模塊包括產品、圖文、視頻、營銷、公司等模塊，每個模塊下又包括子模塊。PC端一鍵同步裝修無線端國際站無線端旺鋪裝修可以通過PC端旺鋪裝修同步和無線端旺鋪獨立裝修兩種方式進行。PC旺鋪裝修完，可一鍵同步至無線端旺鋪，減輕無線旺鋪裝修的時間成本。可同步模塊包括主營類目、櫥窗產品、帶類目產品、單品、平鋪產品、重點推薦、智能產品推薦等，具體可登錄后臺，查看PC旺鋪編輯器后臺各模塊左上角“可同步至無線端”的標記，如圖所示。注意：可同步指的是模塊類型及模塊順序可同步，內容無法同步，如輪播Banner模塊，模塊類型和順序可同步，但圖片內容不可同步。目前旺鋪裝修無線端店招尺寸要求為：750×300像素。如果旺鋪裝修無線端店招圖形不符合要求，則需要重新進行調整。無線旺鋪獨立裝修無線裝修模板利用外貿服務市場的裝修模板進行一鍵裝修也是較快捷的方式。旺鋪裝修模板目前由第三方提供，需在外貿服務市場在線購買，支付成功后所購買的模版會加入旺鋪后臺。操作體驗02小李在北京全球跨境電子商務有限公司就職于國際站旺鋪運營部，負責基礎建站工作（產品上架、店鋪開通）。小李為店鋪上架了250多個產品，并做好了PC端裝修，2021年2月，部門負責人黃經理分配小李完成旺鋪無線端店鋪裝修，請你與小李一起，制作符合無線端尺寸要求的店招背景圖1張和輪播橫幅圖5張，并完成以下無線端店鋪裝修工作：（1）PC端裝修一鍵同步至無線端。（2）裝修店招，增加一張合適大小的店招背景圖，并做相關設置。（3）裝修輪播，上傳5張輪播圖片，并設置輪播圖片的鏈接。無線端視覺設計無線端與PC端店鋪同步裝修無線端與PC端店鋪同步裝修1、PC端一鍵同步至無線端。點擊“MyAlibaba”，登錄后臺，點擊“店鋪管理”→“全球旺鋪”命令，進入智能裝修通用模板頁面（含PC模板和無線模板店鋪裝修操作界面）。當PC旺鋪裝修完成后，點擊“一鍵同步”按鈕即可同步到無線端。無線端與PC端店鋪同步裝修2、裝修無線端店招。點擊“店招”→“編輯”命令，進入店招裝修界面。上傳尺寸為750×300像素的店招圖片，上傳完成后取消“使用默認背景”項的勾選，因無線旺鋪的店招展示空間有限，上傳符合公司產品、形象的背景圖，不添加過多文字內容，點擊“保存”按鈕完成店招裝修。

PC端與移動端在信息的排版上因屏幕尺寸和交互習慣的區別有哪些不同？無線端視覺設計應用實戰03小李在北京全球跨境電子商務有限公司就職于國際站旺鋪運營部，負責基礎建站工作。小李為店鋪上架了250多個產品，并做好了PC端裝修。2021年2月，部門負責人黃經理分配小李完成旺鋪無線端店鋪裝修，請你與小李一起，制作符合無線端尺寸要求的店招背景圖1張和輪播橫幅圖5張，并完成以下無線端店鋪裝修工作：PC端裝修一鍵同步至無線端；裝修店招，增加一張合適大小的店招背景圖，并做相關設置；裝修輪播，上傳5張輪播圖片，并設置輪播圖片的鏈接。接下來，請你與小李一起，繼續完成以下無線端店鋪裝修工作：（1）拍攝或制作視頻，并裝修無線端視頻模塊。（2）制作一張用于熱區切圖裝修的圖片，裝修熱區切圖模塊。無線端視覺設計無線端旺鋪裝修實戰無線端旺鋪裝修實戰1、裝修視頻模塊。首先拍攝并制作高質量的企業或產品視頻,