第四章店鋪Logo與主圖的視覺設計網店美工與視覺設計學習目標知識目標1.了解Logo的定義、分類；2.理解Logo的設計原則；3.掌握Logo的設計方法；4.掌握主圖的設計規范；5.掌握主圖的設計思路與方法。能力目標1.能夠設計并制作出符合店鋪風格的Logo；2.能夠熟練完成高點擊率主圖的制作。素養目標1.培養讀者的設計與創新能力；2.培養讀者對Logo釋義的提煉和設計傳達能力。4.1Logo的視覺設計

Logo是一種標志，主要通過造型簡單和意義明確的視覺符號，將經營理念、企業文化、經營內容、企業規模和產品特性等要素傳遞給買家,使其能夠明確識別和認同店鋪的圖案和文字。

Logo是店鋪視覺形象的核心，也是構成店鋪形象的基本特征,能夠體現店鋪的內在素質它不僅是調動視覺要素的主導力量，也是整合視覺要素的中心，更是買家認同店鋪品牌的代表。4.1.1Logo的定義

Logo是徽標或者商標的英文說法，起到對徽標擁有企業的識別和推廣的作用，通過形象的Logo可以讓消費者記住公司主體和品牌文化。Logo是一個品牌的視覺外露，是品牌傳播的符號，其真正的力量是Logo背后的品牌氣質與精神，是品牌的產品與服務。企業通過可視的圖形，讓用戶感覺到看不到的品牌，這就是Logo的意義。品牌的聯想與產品的使用感受，最終凝聚在一個記憶符號上。4.1.2Logo的類型從常見的店鋪Logo表現形態來看，Logo的類型主要有：中文文字型、英文文字型、中英文組合型、圖形型、圖文結合型。4.1.3評價Logo的標準

優秀的Logo首先需要具備創新性。

優秀的Logo應具備思想性。

優秀的Logo應具備易傳播的特性。

優秀的Logo應具備美感。

優秀的Logo應具備易用性。4.1.4Logo的設計思路1、明確網店策略2、明確品類策略定位3、明確風格定位4、明確元素5、明確字體6、明確色調4.1.5如何向領導或客戶推銷你的Logo告訴客戶這個logo是再怎么來的。我是怎么思考的，最終的logo作品是怎么樣一步步到現在的這個樣子的。這就是推導。還要告訴客戶，這個logo可以怎么用，放到名片上有多精致，掛到大樓上是有多大氣。讓客戶看到自己品牌的未來。這就是延展。兩段加在一起，呈現給客戶，這就是提案。4.1.5如何向領導或客戶推銷你的Logo

【案例】客戶阿黃，開了一家小雞吃米米店，需要做一個logo。你的終稿如下如所示。想一想：大家覺得這樣行嗎？你做好的一個logo用這樣的呈現方式給你的客戶，客戶能接受嗎？4.1.5如何向領導或客戶推銷你的Logo

當你做完logo，不能只是簡單的導一張圖出來，需要一個提案。4.1.6Logo的制作Logo是店鋪裝修中必不可少的一部分。4.2主圖的設計與制作主圖的構成

在網店設計中，產品主圖作為產品的流量入口，對引流有著關鍵作用。下面就主圖的尺寸、設計規范、設計要點和方法進行介紹。4.2.1主圖的尺寸要求

對于主圖的詳細尺寸，一般情況下，電商平臺沒有硬性要求，但是主圖盡量做成正方形，像素在700*700（包含）以上，通常做成800*800像素的大小。在淘寶平臺，主圖尺寸達到700*700像素（包含）以上，即可在詳情頁自動生成放大鏡的效果，而在天貓平臺，要實現放大鏡的效果，要求主圖尺寸必須在800*800像素（包含）以上。很多企業在多個電商平臺開設店鋪，為了減少工作量，通常主圖都會設計成800*800像素大小。

主圖的格式要求比較寬泛，常見的bmp、png、jpg等圖片格式均可，圖片大小控制在500k以內。4.2.2主圖的設計規范

在進行主圖的設計時，應遵守主圖設計規范，具體要求如下：

首先，產品主體一定要顯眼、清晰，占總體比例的三分之二左右。主圖中可以加入促銷信息，但要簡單明了，促銷信息不要喧賓奪主，字數控制在10字以內。

其次，主圖上盡量有店鋪Logo或名稱，加強品牌感，如果使用Logo，一般放在主圖的左上角。

4.2.2主圖的設計規范

在進行主圖的設計時，應遵守主圖設計規范，具體要求如下：

第三，主圖上的文案信息避免多個文字區域，或大面積鋪蓋，這樣會干擾到用戶正常查看寶貝。

第四，主圖中的產品最好選用單一產品，過多的產品容易分散用戶的注意力。

4.2.2主圖的設計規范

在進行主圖的設計時，應遵守主圖設計規范，具體要求如下：

最后，主圖應盡量避免拼接圖形，拼接圖的整體視覺效果會顯得非常凌亂，即使是高檔產品也無法營造出高品質的視覺效果.4.2.3主圖設計思路1、從市場出發，做好產品定位不僅是網店的店長、店鋪運營，其實美工也應該明確產品的定位，要知道店鋪賣什么，賣給誰以及怎么賣。只有做好產品定位，明確產品在市場中處于什么位置，明確目標人群，才能知道主圖設計的出發點在哪里。2、參考同行，提煉賣點在做主圖之前，除了要全面地了解產品信息，還要了解行業內具有同樣定位的產品主圖，通過對比，提煉產品的賣點和優勢。分析買家需求以及痛點，然后將其在主圖上給予適當的展示，刺激需求。4.2.3主圖設計思路3、差異化的視覺效果在搜索結果頁面眾多的商品面前，差異化的視覺效果更容易引起買家的點擊，但對于一些標準化的產品，要做到差異化不容易，所以設計師在制作主圖時，盡量在跟上同行水平的基礎上，再做一定的差異化。4.2.3主圖設計思路4、確定主圖風格和文案信息主圖風格應符合產品及行業屬性，符合目標客戶人群喜好。商品圖片搭配簡單的文案信息，能夠更好的提升主圖的點擊率。確定好風格和文案信息后，即可按照主圖的設計規范進行主圖的設計和制作了。4.2.4主圖的制作本案例將制作洗面奶主圖，在該主圖中需要體現產品的logo和促銷信息。本章小結主圖的構成

本章介紹了Logo和主圖的設計與制作。Logo方面，主要介紹了Logo的定義、類型、評價標準、設計思路和提案等內容。主圖方面，主要介紹了主圖的尺寸要求、主圖設計規范和設計思路。實訓活動主圖的構成實訓目的：掌握Logo和主圖的設計與制作實訓內容：商品主圖的制作實訓要求：1、請為一兒童玩具店鋪（店鋪名稱為：歡樂時光）設計一個Logo，要求logo簡潔、個性，易于傳播和記憶，且美觀、精致。完成Logo提案，即Logo設計的推導過程+應用延展+呈現；2、利用素材圖4-28，設計一幅商品主圖，將Logo至于主圖左上角。主圖要要能夠體現商品的賣點和特色，和同行業商品主圖形成差異性。網店美工與視覺設計第五章網店首頁視覺設計學習目標知識目標1.熟悉并掌握店鋪首頁各個模塊的設計要點及主要內容；2.了解店鋪首頁的頁面結構及常見布局；3.掌握店鋪首頁的設計制作流程。能力目標1.能夠獨立設計制作出符合店鋪風格的店鋪首頁；2.能夠完成詳情頁中各個模塊設計；2.能夠根據需要對店鋪首頁進行裝修。素養目標1.培養讀者遵守平臺規范的意識；2.培養讀者主動學習的習慣。5.1網絡店鋪首頁裝修及其設計思路

網店裝修通過圖形圖像軟件對商品照片進行修飾，利用美學設計對素材、文字和照片進行組合，給人以舒適的、直觀的視覺感受，讓買家從設計好的網店中了解到更多的商品信息和店鋪信息。5.1.1網店首頁裝修設計的目的

網店的頁面裝修的漂亮別致，首先從視覺方面就能打動消費者的心，讓消費者感覺到賣家對店鋪的用心，從而增添對店鋪商品的信任感。而賣家把所有的關于店鋪的基本信息展示在店鋪首頁，讓消費者能第一時間很清晰地了解到店鋪的所有信息，同時也能加深消費者對店鋪的印象，促進消費者對店鋪內商品的購買，增加商品的成交量。良好的店鋪裝修效果能很好的提升店鋪的形象，增加消費者對店鋪的關注度，提高店鋪點擊率。5.1.2網店店鋪首頁基本布局合理的布局不但可以增加店鋪黏性，提升新老顧客的忠誠度，還可以達到更好的視覺效果和用戶體驗效果。在安排店鋪首頁布局時應組合排列，將各模塊合理的布局到店鋪首頁。合理的布局不但可以增加店鋪黏性，提升新老顧客的忠誠度，還可以達到更好的視覺效果和用戶體驗效果。5.2店鋪首頁核心模塊設計主圖的構成

店鋪首頁的常用模塊通常包含：店鋪招牌、導航欄、輪播海報、產品推薦、商品展示區、店尾等。5.2.1店招的設計制作

1、店招設計要求店招內容：從內容上講，店招上可以放置店鋪名稱、Logo、廣告語、促銷產品、關注按鈕、優惠券、搜索框、店鋪公告等一系列信息。5.2.1店招的設計制作

1、店招設計要求店招分類：店招分為常規店招和通欄店招，常規店招的寬度尺寸為950像素，高度尺寸不超過120像素。通欄店招的寬度尺寸為1920像素，高度尺寸不超過150像素。5.2.1店招的設計制作

1、店招設計要求設計原則：店招設計要遵守的第一個原則是品牌形象的植入。品牌形象的植入可以通過店鋪名稱、店鋪Logo的展示來進行。第二個原則是抓住產品定位，產品定位是指展示店鋪賣什么產品，自己店鋪的賣點、特點、優勢、差異化等，精準的產品定位可以快速吸引目標消費群體進入店鋪。5.2.1店招的設計制作

2、不同類型店招的設計品牌宣傳類：首先要考慮和品牌相關元素的應用，如店鋪名稱、Logo、廣告標語，因為這是品牌宣傳最基本的內容載體；其次是關注按鈕、關注人數、收藏按鈕，可以側面反映店鋪實力；第三是搜索框、第二導航等能夠提升用戶體驗的內容。5.2.1店招的設計制作

2、不同類型店招的設計活動促銷類：首先放置店鋪名稱、Logo等內容。接下來要考慮的因素是活動信息、優惠券、促銷產品等和活動相關的信息；最后考慮的是搜索框、旺旺、第二導航等方便用戶體驗的內容。5.2.1店招的設計制作

2、不同類型店招的設計產品推廣類：在店招上，同樣是先擺放店鋪名、logo、廣告語等，然后要主打促銷產品以及和產品匹配的促銷信息、優惠券、活動信息等；最后是搜索框、第二導航條等方便用戶體驗的內容。5.2.1店招的設計制作2、不同類型店招的設計5.2.2輪播海報設計1、輪播海報設計要求全屏輪播海報寸：全屏輪播圖片的寬度為1920像素，高度一般以400像素—800像素為最佳。5.2.2輪播海報設計1、輪播海報設計要求常規輪播海報寸：使用淘寶中的“輪播圖”模塊可以制作常規輪播圖，按寬度可以細分為通欄輪播圖（950像素），如左圖所示。右側輪播圖（750像素），左側輪播圖（190像素），如右圖所示。5.2.2輪播海報設計1、輪播海報設計要求輪播海報設計要點：制作全屏輪播海報的時要保證其在構圖方式、色彩搭配、字體應用等方面風格一致，整體畫面保持簡潔美觀、主題突出、能夠吸引買家注意。此外，由于用戶的屏幕分辨率不同，每個用戶看到的界面會有所差異，為了保證不同分辨率的用戶在觀看輪播海報時，都能看全面、看清晰，在輪播海報的設計中，應將主要產品及文案信息盡可能的居中顯示。5.2.2輪播海報設計2、全屏輪播海報設計制作5.2.3優惠券的設計制作優惠券的使用范圍：明確優惠券的使用范圍和使用方式，例如是全店通用，還是僅限店內的單款、新品或者某系列商品使用。明確優惠券的使用范圍可以限定消費對象，起到引導店鋪流量走向的作用。優惠券的使用條件：如全場購物滿168元可以使用10元優惠券、滿288元可以使用20元優惠券。限制優惠券的使用條件，可以在刺激客戶消費的同時最大限度地保證利潤。優惠券的使用時間：如果店鋪開展短期推廣，一般應設置優惠券的到期時間以接近消費周期為佳，該周期一般為1個月。若是做促銷活動，那么優惠券的使用周期為對應的促銷天數。限制使用時間可以讓顧客產生過期浪費的心理，提高顧客的轉化率。5.2.3客服模塊的設計制作2、優惠券的設計與制作5.2.4商品陳列展示模塊設計1、商品陳列展示模塊設計要求商品類別要明確：進行分類展示，可以使商品顯得更加豐富、整潔、美觀且容易刺激消費者的購物欲望。突出商品的價格和購買按鈕：對于價格和購買按鈕突出顯示，通常可以采用放大、加粗或者使用對比色等方法。5.2.4商品陳列展示模塊設計2、商品陳列展示模塊設計制作5.2.5店鋪頁尾區設計

頁尾位于店鋪的最后一屏，一般用于放置店鋪的收藏區、手機店鋪的二維碼、禮品或者購物需知和店鋪公告等內容，其目的在于加強品牌記憶，給顧客購物安全感，希望顧客下次光臨。5.2.5店鋪頁尾區設計

1、店鋪頁尾模塊設計要求產品的分類便于消費者再次瀏覽網頁；返回頂部的文字或者按鈕當店鋪頁面過長時，添加返回頂部的文字或按鈕可以快速跳轉到頁面頂部，從而方便用戶反復瀏覽網店；收藏、分享店鋪在頁尾添加收藏與分享店鋪的鏈接，可以方便用戶快速收藏或分享店鋪，盡量留住客戶；溫馨提示如發貨須知、關于色差、關于售后等信息，以便于幫助顧客快速解決購物過程中的問題。5.2.5店鋪頁尾區設計2、店鋪頁尾模塊設計制作本章小結主圖的構成

網店首頁代表了網店的形象，作為門面擔當，首頁頁面設計的美觀性不僅可以激發買家的購買欲，對轉化率也有很大影響。本章介紹了網店首頁模塊的視覺設計方法及技巧，包括店招、輪播海報、寶貝推薦模塊、頁尾的設計與制作。實訓活動主圖的構成實訓內容：自選一女裝類網店，重新為期設計店鋪首頁。實訓目的：練習網店首頁的視覺設計與制作。實訓要求：1、根據店鋪、產品的特性，設計以品牌宣傳、活動促銷或產品推廣為主題的店招，店招尺寸為950*120像素；2、設計并制作全屏海報，尺寸為1920*600像素；3、設計并制作頁尾區域，寬度為950像素，高度不限。頁尾內容應包括但不限于：引導收藏、聯系方式；4、要求整體風格一致，形式美觀，和產品、店鋪定位相匹配。網店美工與視覺設計第六章商品詳情頁的設計制作學習目標知識目標1.了解商品詳情頁設計的重要性；2.熟悉商品詳情頁的設計思路；3.掌握商品詳情頁設計要點與技巧。能力目標1.能夠抓住不同商品的特點設計出別具一格的商品詳情頁；2.能夠熟練制作焦點圖、功能圖、展示圖、細節圖等。素養目標1.培養讀者對詳情頁內容的總結、分析、規劃能力；2.提升讀者對詳情頁內容的布局和展現能力。6.1商品詳情頁及其設計思路

商品詳情頁是提高網店轉化率的重要入口，是網店中最容易與買家產生交集的頁面，一個好的商品詳情頁勝過一位優秀的銷售專員，商品詳情頁就是用圖文混排的視覺語言傳達商品的特性與屬性，對網絡消費者購買行為產生影響，因此，商品詳情頁需要同銷售專員一樣從客戶的需求出發，站在消費者的角度想問題。6.1.1認識商品詳情頁商品詳情頁也叫做寶貝描述頁，顧名思義，指淘寶、京東等電子商務平臺中對所售商品以圖片、文字、視頻等各種手段進行展示的表現形式。6.1.2商品詳情頁的作用具體來講，在詳情頁的設計中，應達到以下目標：? 引發買家興趣、激發顧客的消費欲望；? 通過詳情頁圖片和文字介紹讓買家全面了解產品；? 樹立買家對商品的信任感，打消消費疑慮，促使下單；? 降低服務成本、提升客單價。6.1.3商品詳情頁規格

各個電子商務平臺的商品詳情頁的標準略有不同，都有各自的尺寸和標準，主流平臺詳情頁圖片的建議尺寸如圖所示。6.2商品詳情頁的制作要點主圖的構成

商品詳情頁是電子商務平臺中買家最為關注的頁面，商品詳情頁不僅要展示商品圖片和內容，更要營造一種氛圍和意境，使顧客愿意下單購買商品。6.2.1詳情頁前期策劃

商品信息收集：在制作商品詳情頁之前，需要仔細閱讀廠家提供的產品介紹資料或者在互聯網查詢類似的商品的參考數據，了解產品的名稱、顏色、尺寸、重量等基本屬性信息。6.2.1詳情頁前期策劃

競品市場調研：在眾多的網絡商品以及商家面前，買家會對他感興趣的東西進行挑選、對比，然后再確定購買，因此制作產品詳情頁就要在眾多商品中中，找到與自己屬性差不多的產品進行對比分析。通過查看同類同檔次且銷量在前10的寶貝詳情頁，收集以下信息。6.2.1詳情頁前期策劃

商品賣點挖掘：商品的賣點是指商品具備前所未有、別出心裁或與眾不同的特色、特點。通常我們采用FAB法或者從產品概念進行產品賣點挖掘。6.2.1詳情頁前期策劃

商品素材整理：商品詳情頁制作過程中，一般需要收集的素材包括：經過美化處理的白色背景圖、商品場景圖、模特圖、細節圖等，還有互聯網上搜集相關商品時的搜索到的網絡素材等。6.2.2詳情頁設計思路

確定頁面風格：頁面風格主要是根據產品本身來定的，通過分析產品的屬性、產品的功能以及客戶人群，最后確定頁面風格。6.2.2詳情頁設計思路焦點圖——引發興趣目標客戶群設計——買給誰用，自己能不能使用。場景圖——激發潛在需求商品細節——逐步信任為什么購買——好處設計、痛點設計同類商品對比——為什么選擇我的產品客戶評價、第三方評價——產生信任購后的感覺塑造——給客戶一個100%購買的理由給客戶購買理由——送戀人、孝敬父母、送領導、送朋友等發出購買號召——為什么立刻品牌介紹購買須知——郵費、發貨、退貨等關聯推薦6.2.2詳情頁設計思路

確定配色方案：對于店鋪已經有視覺規范的情況下，可以繼續沿用已有的配色方案，在沒有視覺規范，無從下手的時候，提供幾種配色的技巧。從LOGO提取，從LOGO提取配色方案比較適合已有店鋪VI系統或者線下的知名品牌。從產品本身或者行業屬性提取，比如醫療行業，可選取藍色作為主色；家具行業可選取綠色作為主色。從產品的聯想屬性提取，比如嬰幼兒產品，為了凸顯寶寶的可愛、純潔，多選用粉色和純凈的淺藍色。6.2.2詳情頁設計思路

文字在詳情頁中起到對商品及活動等信息的解釋和說明的作用，具體規范內容如下：一般不超過3種字體；重點的部分要突出顯示，注意文字大小、粗細、疏密的對比；字體顏色的選擇不宜過于復雜，避免影響閱讀；字體選擇要符合產品的定位；字號一般要大于12號。6.2.2詳情頁設計思路

頁面上線：制作完成的商品詳情頁面，需要相關部門進行審核，確保萬無一失。頁面上傳前一定要對詳情頁進行切圖處理，如果整張大圖直接上傳發布，由于圖片太大，買家打開頁面時，加載時間會很長，因此會增加了頁面的跳失率。兼顧平臺對pc端和移動端的要求，每張圖片不超過200K（圖片越小越便于快速呈現），圖片總數不超過20張。6.2.2詳情頁設計思路修改完善：頁面發布后要對其進行測試，測試電腦端、手機端頁面的打開速度，結合運營相關數據對頁面進行優化調整，力求頁面完善。6.3商品詳情頁核心模塊設計主圖的構成

商品詳情頁核心模塊主要包括焦點圖模塊、商品基本參數設計、商品賣點設計、商品展示設計、商品細節設計等。6.3.1商品焦點圖設計

詳情頁的焦點圖一般位于商品詳情描述的上方，是為推廣該款商品而設計的海報，由產品、主題與賣點3部分組成，目的在于吸引消費者購買該產品，其設計方法與海報的設計方法相似。下面以兒童毛絨書包為例進行焦點圖設計。6.3.2商品基本參數設計

商品基本參數是詳情頁中不可或缺的一部分，不同的商品具有不同的參數，具體內容可根據同行產品進行相應的設置。商品參數展示方法多種多樣，可以根據參數內容靈活多樣設計。6.3.3商品賣點設計

商品的亮點實質為商品賣點的表達形式之一，商品的亮點可以理解為商品具備的前所未有、別出心裁或與眾不同的特點。下面將以兒童毛絨書包的賣點設計進行展示。6.3.4商品展示設計

用戶購買產品最主要看的就是產品展示的部分，在這里需要讓客戶對寶貝有一個直觀的感覺。通常，這個部分以圖片為主，文案為輔。按選擇的圖片素材分，可將產品展示圖分為擺拍圖和場景圖兩種類型。6.3.5商品細節圖設計

在細節圖的設計方面，需要注意的是，既然是“細節圖”，那么圖片就應該能夠具有足夠的放大效果，使客戶能夠清晰看到細節，比如面料的紋理、拉鏈的金屬質感等等。本章小結主圖的構成

本章學習了網店詳情頁設計與制作的相關知識，合理美觀的詳情頁設計對提升店鋪的轉化率起到至關重要的作用。在詳情頁的設計過程中，除了要考慮美觀程度外，還需站在買家的角度考慮，思考買家的購物心理和購物流程，使詳情頁盡量符合買家的購物心理，不僅展示商品的外觀，還需從細節方面、實力方面、產品特色方面以及加工制作流程等方面全面的去消除消費者的購物疑慮，提升購物欲望，促成交易。實訓活動主圖的構成實訓內容：下載本章實訓素材，并利用相關素材設計制作一幅網店詳情頁。實訓目的：練習網店詳情頁的視覺設計與制作。實訓要求：1.根據給出的素材，進行產品定位，進而確定整體風格和產品特色等內容；2.構思符合買家購買習慣的設計思路；3.設計并制作產品詳情頁，寬度750像素，高度不限。網店美工與視覺設計第七章網店營銷推廣圖的制作學習目標知識目標1.熟悉并掌握直通車圖的設計要點；2.熟悉并掌握聚劃算圖的設計要點；3.熟悉并掌握智能鉆展圖的設計要點。能力目標1.能夠設計制作出鉆展圖；2.能夠設計制作出直通車圖片以及聚劃算主圖。素養目標1.培養讀者與時俱進的意識，根據平臺要求設計高點擊率的推廣圖；2.培養讀者舉一反三的能力。7.1聚劃算主圖設計制作

聚劃算是阿里巴巴集團旗下的團購網站，是淘寶天貓內容優質流量的整合。對于賣家來說，如果聚劃算用的好，不僅可以為店鋪與商品帶來豐富的流量，更能幫助打造爆款，提升店鋪銷售額。因此，聚劃算主圖的設計就變得尤為重要，只有設計出有吸引力的聚劃算主圖，才能吸引消費者點擊進入產品詳情頁。7.1.1聚劃算廣告圖的設計要點

商品圖片：商家上傳的產品圖片中不得出現任何形式的自制標簽以及產品特點、營銷利益點等文字信息。格式規范：LOGO統一放置在畫面左上角，不得添加底色，顯示大小最寬不超過180像素，最高不超過120像素。LOGO最左側及最上側均離產品圖片左側及上側20像素。

圖片背景：圖片背景只選擇真實拍攝的實景或者單色背景其中一種。

商品構圖：注意不要使用畫中畫，商品圖片需要展示多個主體（模特、商品）時，建議保持同類主體（模特、商品）之間比例一致且背景統一。7.1.2聚劃算廣告圖設計案例7.2直通車推廣圖設計制作主圖的構成

淘寶直通車是淘寶網為賣家量身定制的一種推廣方式，按點擊付費的效果營銷工具，可以精準推廣商品，利用直通車推廣，在給寶貝帶來曝光量的同時，精準的搜索匹配也給寶貝帶來了精準的潛在買家。對于直通車而言，最最重要的就是點擊率這個核心維度。7.2.1直通車推廣圖的設計要點設計定位，思考為先亮出商品，重點展示構圖合理，排版統一7.2.2直通車廣告圖設計案例7.3

引力魔方圖設計制作主圖的構成

引力魔方是淘寶網提供的一種適用于移動端的營銷工具，是淘寶網圖片類廣告位競價投放平臺，能夠為商家提供數量眾多的優質展位，但需要商家自行投放，并且按照點擊次數收取費用。引力魔方圖就是在展位上展示的圖片，用于吸引消費者注意力引力魔方是一個全新的推廣商品的手段，覆蓋了用戶購買前、購買中、購買后的消費全鏈路，是喚醒用戶需求的重要入口。7.3.1引力魔方廣告圖的設計要點

主題突出：推廣展示的過程就像一次陳述，必須要有一個明確的主題，所有的元素都必須圍繞這個主題展開。

目標明確：在智鉆圖的設計制作中，電商美工首先需要明確自己的營銷目標，然后針對目標進行素材的選擇和設計，這樣才能保證廣告取得較高的點擊率與轉化率。

形式美觀：美好的東西總是令人無法抗拒的，形式美觀主要是指從字體、色彩、構圖、標簽以及營造的氣氛等方面去綜合衡量畫面質量。7.3.2引力魔方圖設計制作本章小結主圖的構成

本章介紹了聚劃算主圖、直通車主圖、引力魔方圖的設計與制作，以上三種圖片出現的位置不同，制作規范也不同，但在設計與制作的過程中都需要做到圖片風格一致、主題突出、形式美觀、構圖合理。實訓活動主圖的構成實訓內容：下載本章實訓素材，任選其中一張或幾張素材，分別設計出聚劃算主圖、直通車主圖和引力魔方圖。實訓目的：練習聚劃算主圖、直通車主圖和引力魔方圖的視覺設計與制作。實訓要求：1.根據給出的素材，進行產品定位，進而確定整體風格和產品特色等內容；2.提煉不同圖片類型的主題，并進行構圖；3.設計并制作聚劃算主圖、直通車主圖和引力魔方圖。網店美工與視覺設計第八章專題頁與活動頁的視覺設計學習目標知識目標1．掌握專題頁的設計與制作方法；2.掌握活動頁的設計與制作方法。能力目標1．能夠獨立完成專題頁的視覺設計；2.能夠獨立完成活動頁的視覺設計。素養目標1.培養設計與創新傳統節日類專題頁的能力。2.培養設計與創新各類活動頁的能力。8.1專題頁的視覺設計

專題頁是一個內容聚合頁，利用一個點、一件事、一個主題來策劃一個頁面或者一個活動的流程頁面，其信息來源于同一主題的內容(文章、圖片、視頻等)，該頁面會包括網站相應模塊和頻道所涉及到的功能與該主題事件的內容展示。電子商務領域的專題頁主要用于活動推廣、產品上新等情況，專題頁面的設計也是網店美工的主要工作之一。8.1.1專題頁的設計規范1.專題頁結構專題頁的形式多種多樣，大多數的專題結構分為頭圖部分和內容部分，傳統的專題一般只有一個主頁面，復雜的則有若干的二級頁面組成。專題頁的基本內容主要包括：頭圖Banner＋至少1個樓層模塊＋背景＋氛圍點綴物8.1.1專題頁的設計規范2.設計頭圖

結構確立接下來后就開始著手頭圖的設計，優秀的頭圖是專題設計的靈魂。設計頭圖首先要考慮的是頭圖的設計風格。頭圖部分的設計是整個專題的重點，也是專題最需要突出的亮點，頭圖可以確立整個專題的基調。8.1.1專題頁的設計規范2.設計頭圖頭圖元素的設計不分楚河和漢界，要讓頭圖和下面的內容在視覺上有聯系，打破首屏與次屏在設計上有明顯的顏色條分隔、形式分隔、線分隔等。8.1.1專題頁的設計規范2.設計頭圖

常規的頭圖主要由文案、產品圖、背景和按鈕四個框架構成，而易懂性常常體現在文案的內容和設計上，因此要做到文案盡量簡潔通俗、文案內容的行數盡量控制在三行以內，確保可讀性。8.1.1專題頁的設計規范2.設計頭圖

在設計上，不僅要做到舒服、顯眼，還要有信息層級，合理引導用戶第一眼的信息內容，它通常需要設計師花費專門的精力來制作字體的變形和特效。8.1.1專題頁的設計規范3.專題內容區的設計內容區與頭圖的銜接要巧妙，忌生硬。除了要突出專題頁面整體的視覺沖擊力，還需讓用戶能夠關注專題也的實質內容，不能因注重頭圖的設計而怠慢文案內容。除了一些“PK性質”的專題模塊，要注意模塊欄目分布的權重，內容的主次要清晰，排布在邏輯上有關聯性。一些重點突出的模塊要和其他欄目模塊做區別設計，做到突出而不突兀。8.1.2專題頁的設計制作8.2活動頁的視覺設計

活動頁與專題頁中的促銷型面面類似，是針對店鋪活動或官方活動所制作的單獨頁面。需要注意，活動既可以是店鋪活動，又可以是電商平臺官方活動，相對于專題頁更具有普遍性。8.2.1舉辦活動的目的和作用1.縮短產品入市的進程2.激勵買家初次購買，達到使用目的3.激勵顧客再次購買，建立消費習慣4.提升市場份額，達到銷售目的5.提高網店信譽度8.2.2活動頁的設計要點1.主題出彩

優質的活動主題，不僅能讓用戶拍手叫絕，還能賦予活動更多的內涵與意義。在確定主題時，需要先明確活動目的，內容上要簡明扼要。在設計時需要根據主題出發，圍繞主題進行設計。8.2.2活動頁的設計要點2.色彩出彩

該色彩不是單純指顏色的艷麗或是顏色的突出，而是指頁面主色的獨特性、合適性和聯想性。其中色彩的合適性，指色彩與活動氣氛相融合。圖8-17所示的活動頁，采用紅色為主色調，和活動的主題相符，搭配紫色，并適當降低紅色的飽和度，凸顯商品的品質感。8.2.2活動頁的設計要點3.細節出彩

對于活動頁來說，每個細節都決定了店鋪能否吸引用戶。在活動頁中每個出彩的細節，如抽象的紋理、符號和線條等，都能使整個畫面顯得更有活力與個性。8.2.3活動頁的設計制作本章小結主圖的構成

本章學習了專題頁與活動頁的設計與制作方法。專題頁的視覺設計方面，主要學習了專題頁的結構、頭圖設計以及內容區設計。活動頁的視覺設計方面，主要學習了活動的作用和目的、活動頁的設計要點。實訓活動主圖的構成實訓內容：下載本章實訓素材，完成“走遍大好河山”專題頁制作，如圖8-54所示。實訓目的：練習專題頁的視覺設計與制作。實訓要求：1.下載本章素材，分析專題頁的結構、配色、字體等；2.完成圖8-54效果的制作。圖8-54網店美工與視覺設計第九章移動端網店的視覺設計與裝修學習目標知識目標1．了解移動端店鋪頁面的框架結構；2．了解移動端店鋪對圖片發布的尺寸要求；3．掌握移動端網店模塊的編輯與裝修方法。能力目標1．能夠完成移動端模塊設計和裝修；2．能夠完成移動端頁面裝修設計。素養目標1.培養讀者隨機應變的能力；2.培養讀者獨立規劃布局移動端網頁的能力。9.1移動端網店裝修的基礎知識

在當今移動互聯網時代，隨著移動設備的普及和發展，越來越多的網民喜歡用手機上網購物，網絡購物向移動端轉移的趨勢進一步加強。無線端無論是在網店流量還是成交額方面都占據著非常重要的位置，因此，對于電商企業來說，移動端店鋪視覺設計成為重點關注對象之一。9.1.1移動端店鋪的設計要點對內容整體把控：移動端網店空間有限，這就要求頁面內容要精簡，并且突出重點。注意圖片大小：圖片過大，一會浪費顧客流量；另一方面，過大的圖片會延長頁面加載時間，進而影響到客戶體驗，導致客戶流失。從買家購物習慣出發：圖片的清晰度和大小均要適應手機的尺寸及分辨率等特征，使得商品能完美的體現。充分利用模塊展現：移動端屬于窄屏展示，要充分利用移動端的主圖展示位，充分利用主圖體現寶貝的細節、特色、品質等。9.1.2移動端與計算機端店鋪的區別

尺寸不同：移動端顯示的寬度為750像素，而電腦端的顯示寬度一般為950像素，若尺寸不適合會造成界面混亂。

布局不同：相比于電腦端，移動端端更注重瀏覽體驗，省略了邊角的活動模塊，以及詳細的廣告文案。

內容不同：電腦端會通過較多文字說明產品的賣點、促銷信息、優惠信息等，而無線端文字則更為精簡。

分類不同：無線端的分類模塊比較簡潔、清晰，使用了分類圖標，而電腦端的分類信息更詳細。9.2移動端網店首頁的視覺設計主圖的構成

在設計移動端店鋪首頁前，需要先設計店鋪首頁的整體框架結構，再單獨調整各個模塊內容。一般地，常見的店鋪頁面布局包括店招、導航欄、焦點圖、促銷區、商品分類、商品展示區、店鋪尾部等，布局模板如圖所示。9.2.1店鋪店招設計

移動端店招與PC端不同，PC端的店招允許商家自行上傳符合店鋪風格和品牌個性的店招素材，但移動端的店招則由系統自動生成，不再有店招模塊，不需要商家自行裝修。由于店招模塊尺寸有限，無法同時呈現過多的營銷信息，為了使店招信息更加清晰明了，增加信息的可讀性，店招默認展示店鋪名稱，店鋪類別，店鋪信譽、粉絲數量、收錄情況以及訂閱按鈕。9.2.2焦