《網店美工與視覺設計》電子教案PAGEPAGE1第1章認識網店美工教學內容一、了解網店美工二、網店美工工作準備三、網店美工工作流程教學要求【知識目標】1.了解網店美工的工作范疇；2.了解網店美工必備技能要求。【技能目標】1.掌握網店美工所需要軟件的安裝方法；2.掌握網店美工需要做的準備工作。【素養目標】1.培養讀者對網點美工相關內容的學習興趣；2.提升讀者的職業素養。教學重點掌握網店美工的工作流程教學難點能夠熟練地搜集素材、尋找設計參考。教學方法講授法、練習法課時數4課時教學內容1.1了解網店美工1.1.1網店美工的工作范疇網店美工是隨著電子商務的發展而產生的一種新職業，是淘寶、天貓、京東等一系列網店頁面設計美化人員的統稱，也是網店運營過程中一個非常重要的崗位。網店美工主要工作內容是對網店頁面進行設計和美化，制作商品主圖和詳情頁、設計各類活動海報、裝修與美化店鋪首頁等。1.1.2網店美工的技能要求首先需要具備一定的平面構成知識，同時能夠熟練使用Photoshop、Dreamweaver、Illustrator等設計應用軟件。其次，網店美工需要掌握一定的營銷知識，了解消費者心理，能夠通過圖片、文字等視覺語言，表現出產品的獨特賣點，讓消費者感知到產品的優勢。從運營的角度分析和思考問題，以提升設計作品的點擊率和店鋪轉化率。1.1.3資源下載平臺1.花瓣網2.站酷網3.千圖網1.2網店美工工作準備1.2.1常用工作軟件1.AdobePhotoshop2.AdobeDreamweaver3.AdobeIllustrator1.2.2常用字體安裝在選擇字體的時候一定要注意字體的版權問題，避免不必要的糾紛，本文推薦兩類免費商用字體，分別是思源字體和阿里巴巴普惠體。除了上文中推薦的兩類免費商用字體，如果需要下載更多的免費商用字體，可以通過“100”網站（/）進行下載。字體的一般安裝方法：打開電腦的C盤，選擇windows文件夾，選擇Fonts文件夾，把下載好的字體直接粘貼進來即可。1.2.3素材庫建設素材庫一般分為兩個部分：靈感文件和素材文件。靈感文件，即對優秀設計案例、作品的收集，網店美工在開始自己的設計前，往往需要參考、研究這些案例，提高設計效率。素材文件，就是在設計過程中需要引用的已經處理好的圖片、源文件、字體、特效等等。1.3網店美工工作流程1.3.1做好前期工作網店美工接到設計任務時，應該先和店鋪的相關人員進行溝通，了解店鋪定位，熟悉店鋪與商品，為設計工作做好準備。美工的前期溝通工作主要是和客戶或者運營進行溝通。1.3.2規劃素材設計中用到的素材可以通過素材網站來查找和收集，如前面提到的千圖網、昵圖網、花瓣網等。1.3.3設計并制作美工作品規劃好素材后，可以使用相關處理軟件來進行圖片的美化處理，完成網店中各個頁面的視覺設計。圖片的制作和美化處理主要通過Photoshop軟件來完成，視頻素材則需要利用視頻剪輯軟件Premiere進行編輯。對圖片添加熱點可以使用網頁編輯軟件Dreamweaver，也可以使用在線熱點編輯工具。圖片制作完成后需要上傳到圖片空間，網店圖片空間是在店鋪中上傳和發布照片的必要“中轉站”。歸納與提高本章主要介紹了網店美工入門的基礎知識、工作準備、工作流程等，通過本章內容的學習，讀者應該對網店美工的工作職能及工作技能有基本認識，掌握開展設計工作之前需要做的準備工作，明確美工的工作流程。第2章商品圖片的處理與美化教學內容一、商品圖片尺寸的調整二、修復圖片顏色三、商品圖片的美化與修飾四、摳圖技巧五、拍攝原圖后期綜合處理教學要求【知識目標】1．了解商品圖片的要求；2．了解圖片修飾的必要性；3．掌握提高圖片亮度與鮮艷度的方法；4．掌握網店中常用的商品圖片尺寸，以及調整、裁剪、校正圖片的方法；5．掌握處理圖片污點、修復瑕疵以及虛化背景的方法；6．掌握扣取不同類型的圖片以及合成素材的方法。【技能目標】1．能夠處理圖片污點、修復瑕疵；2．能夠對商品圖像進行摳圖處理；3．能夠對偏暗、偏亮和偏色的圖片進行調色；4．能夠調整商品圖片尺寸。【素養目標】教學重點1．掌握調整色差的方法；2．掌握不同類型圖片的摳圖方法；3．掌握圖片的修飾與美化的方法。教學難點調整色差的方法教學方法講授法、練習法課時數6課時教學內容2.1Photoshop軟件的基本操作2.1.1認識Photoshop的工作界面Photoshop的基礎工作界面，包括了菜單欄、選項欄、工具箱、圖像編輯區域、控制面板等模塊。2.1.2調整PS的界面視圖1.切換商品圖像顯示模式在處理圖像的過程中，為了方便操作，可以通過切換圖像的顯示模式來查看圖像。選擇“視圖>屏幕模式”命令，在彈出的菜單中包括標準全屏模式、帶有菜單欄的全屏模式、全屏模式三種顯示模式。2.調整商品圖像顯示比例ctrl加“+”圖像放大顯示，ctrl加“-”，圖像縮小顯示。按住ctrl鍵同時，配合鍵盤上的數字0鍵，還原圖像原大小。要調整圖像的顯示狀態，也可在狀態欄中直接輸入顯示比例，如輸入200%，則圖像以200%的比例顯示。3.移動商品圖像顯示畫面在使用工具處理圖像的過程中，若圖像顯示比例過大，沒有顯示全部的圖像畫面時，可以使用抓手工具對圖像畫面進行移動，查看圖像的不同區域。抓手工具的快捷鍵是空格鍵，按住空格鍵時，可臨時切換為抓手工具，此時配合鼠標移動至需要停留的圖像部分。2.1.3應用PS的輔助工具1.顯示商品圖像標尺使用標尺可以在處理圖像時精確定位鼠標指針的位置，選擇“視圖>標尺”命令或按ctrl+R組合鍵，可以顯示或隱藏標尺。Photoshop軟件提供多種標尺單位，可在“編輯>首選項>單位與標尺”命令中進行更改。2.編輯商品圖像參考線選擇“視圖>鎖定參考線、清除參考線、添加參考線”命令，可以對參考線進行相應操作。3.設置網格線設置網格線可以幫助美工在繪制形狀等操作時準確定位，選擇“視圖>顯示>網格”命令，可以顯示或隱藏網格，選擇“編輯>首選項>參考線、網格和切片”命令，打開“首選項”對話框，在此對話框中可對參考線和網格的相關參數進行設置。2.1.4圖像文件的基本操作1.新建空白圖像文件啟動軟件后，選擇“文件>新建”命令，或者使用快捷鍵ctrl+N，可以創建一個圖像文件，在“新建文檔”對話框可以設置圖像名稱、圖像尺寸、分辨率、顏色等，設置完后單擊“創建”即可創建圖像。2.打開商品圖像文件在編輯圖像前，需要先打開圖像文件，選擇“文件>打開”命令，或使用快捷鍵ctrl+O，在“打開”對話框選擇需要打開的文件，單擊打開按鈕即可打開指定的圖像文件。3.保存商品圖像文件編輯完圖像后，需要對其進行保存，以便于下次打開繼續操作，選擇“文件>存儲”命令，或使用快捷鍵ctrl+s，可以存儲文件。4.關閉圖像文件將圖像文件儲存后，可以將其關閉。點擊圖像窗口標題欄上的“關閉”按鈕，或選擇“文件>關閉”命令，都可以關閉當前的圖像文件。2.2修復圖片顏色實際拍攝中，拍攝效果會很大程度上受到光線的影響，比如陰天和晴天拍攝出的效果不同，順光和逆光拍攝出的效果也不同。一般來講，如果拍攝中光線設置不合理，會出現曝光過度、曝光不足和色差現象，這就需要對圖片的顏色進行后期的校正處理，使得圖片中的商品效果能接近真實效果。2.2.1調整存在曝光問題的圖片對于存在曝光問題的圖片，除了使用Photoshop軟件的“曝光度”命令進行調節之外，還可以通過調節“色階”、“曲線”、“亮度/對比度”等命令來處理。1.使用“色階”調整圖像2.使用“曲線”調整圖像3.使用“亮度/對比度”調整圖像2.2.調整有色差的圖片網絡商品圖片雖然要給予顧客美的視覺享受，但更重要的是真實反映商品詳情，避免因為色差產生的退貨和糾紛，下面介紹調整色差的方法。1.使用“自動顏色”調整色差2.使用“可選顏色”調整色差2.3商品圖片的摳取2.3.1規則圖形摳圖對于一些形狀比較規則的圖片，因其往往具有簡單的線條輪廓，如矩形、三角形等，非常適合使用多邊形套索工具。2.3.2扣取背景簡單的商品圖片純色背景圖像的摳圖操作最簡單，因此很多商家在拍攝完商品場景圖后，都會特意拍一些純色背景圖，以方便后期摳圖。對純色背景圖像摳圖時，一般使用“魔棒工具”，調整合適的容差值后，只需用“魔棒工具”單擊背景，即可一鍵選中背景，刪除背景或者反選，均可實現摳圖效果。2.3.3摳取圖形復雜的商品圖片對于商品主體形狀比較復雜、背景比較凌亂的圖像，如果主體邊緣清晰，則可使用磁性套索工具實現快速摳圖。若邊緣不清晰，則需要使用鋼筆工具來摳取。本例將打開“保溫杯.jpg”素材，綜合應用磁性套索工具和鋼筆工具實現快速摳圖。2.3.4摳取透明與半透明商品圖片1.摳取冰塊2.摳取玻璃杯3.摳取頭紗2.3.5摳取毛發網店美工在摳取毛發或絨毛類商品時，采用一般的摳圖方法很難達到理想的效果，且非常浪費時間，此時可使用Photoshop軟件中的調整邊緣功能進行摳取。2.4商品圖片的美化與修飾商品圖片拍攝前需要布光和布景，還需要對商品本身進行精細處理，以此保證拍攝作品的美觀性。盡管如此，圖片中依然會出現一些細小的瑕疵，比如污點、褶皺、污漬等情況，偶爾還會出現模糊的情況，這些情況可以通過Photoshop的修復類工具進行修復和美化。2.4.1修復圖像中的污點修復圖像中的污點最適合使用Photoshop中的污點修復畫筆工具，操作簡單方便，只需要用污點修復畫筆工具點擊污點處即可，軟件會自動用筆頭周圍的顏色填充污點處的顏色。2.4.2使用仿制圖章工具修復圖片仿制圖章工具可以從圖像中復制信息，將其應用到其他區域或者其他圖像中，是圖像修復中最常用的工具之一。2.4.3使用修補工具修復圖片修補工具是使用圖片中某些特定的區域來替換需要修補的區域，它會將源區域和目標區域的紋理、明暗等相匹配，修補工具是使用最頻繁的修復工具之一。2.4.4調整模糊的圖片商品拍攝時，如果出現手抖，拍攝出來的圖片會模糊。圖片被反復縮小或者放大以后，其畫質會受到影響，若圖片細節變得模糊，可通過銳化工具進行調整，將圖像變清晰。2.5商品圖片尺寸的調整2.5.1商品拍攝原圖的裁剪商品圖片拍攝完成后，原圖尺寸并不符合店鋪裝修需求，此時需要對圖片尺寸進行調整。一般而言，拍攝的原圖四周有較多的留白，為了突出商品主體，常使用裁剪的方法修改圖像。2.5.2調整商品圖片的尺寸修改圖片尺寸時，要注意修改“畫布大小”和“圖像大小”的區別。畫布大小是指整張畫布的長和寬，是尺子能夠量到的物理尺寸，而圖像大小是指在這張畫布里有多少像素。簡單來說，畫布大小就是畫紙大小，圖像大小就是畫紙上圖的大小。改變畫布大小就是改變畫紙的大小，而改變圖像大小是改變畫紙上圖像的比例。2.5.3切圖網店美工在進行詳情頁、店鋪首頁設計時，往往需要一氣呵成，而非單獨設計各個模塊后再拼接，這樣有利于整體風格的把控，但是完整的作品往往由于圖片過長、過大，影響顧客訪問店鋪時的加載速度，也不利于后期對局部單個模塊的修改。因此，制作完成的整體圖片，需要利用切圖的方法，將整體圖片切成若干個小圖再上傳至店鋪。切圖一般使用Photoshop的切片工具完成。歸納與提高本章介紹了Photoshop軟件在網店美工崗位中的常用功能和技巧，主要包括圖像文件的基本操作，商品圖片顏色調整與校正，商品圖片的摳取、美化與修飾，商品圖片的裁切、傾斜校正、切圖等。第3章電商視覺設計的基本要素教學內容一、視覺設計中色彩的應用二、視覺設計中文字的應用三、視覺設計中的排版構圖四、常用的視覺設計技巧五、視覺設計元素綜合應用教學要求【知識目標】1.了解必備視覺設計知識；2.掌握色彩的基本原理及應用技巧；3.了解設計作品中的文字應用；4.了解視覺構圖的常用方法。【技能目標】1.能夠根據網店定位和產品風格，對網店頁面進行合理的色彩搭配；2.能夠根據設計風格熟練的選擇合適字體；3.能夠對頁面進行布局，增強頁面的可讀性和美感。【素養目標】1.提高讀者在視覺設計方面的專業水平；2.培養讀者的審美能力和感知能力。教學重點1.理解必備視覺設計知識；2.掌握不同色相的情感屬性及配色方法；3.掌握設計作品中字體的選擇與文字的排版；4.掌握常用的視覺構圖方法。教學難點主色的選擇。對比的應用。教學方法講授法、案例法、練習法課時數6課時教學內容3.1設計中的色彩3.1.1色彩的基本原理1．色相色相，即色彩的相貌稱謂，能夠比較準確地表示某種色彩的名稱，如紅、橙、黃、綠等。2．明度明度又稱為色彩的亮度，指色彩的明暗程度。不同色彩的明度有所不同，其中，黃色明度最高，紫色明度最低。3．飽和度飽和度也稱為純度，指色彩的鮮艷程度，光波成分約單純，飽和度越高。3.1.2認識色調色調是指一幅作品色彩外觀的基本傾向。在明度、純度、色相這三個要素中，某種因素起主導作用，就稱之為某種色調。色彩分為無彩色和有彩色，色調也由無彩色和有彩色構成。所謂無彩色，顧名思義就是沒有色相的色彩，包括黑白以及介于二者之間的灰。有彩色就是指有色相的色彩，除黑白灰以外的色彩都是有彩色。3.1.3色彩感覺設計應用不同的色彩有著不同的寓意與作用，當人們看到色彩時，除了會感受到其物理方面的影響，也會給人帶來不一樣的心理感受與聯想，每種色相都有其獨特的情感。紅色橙色黃色綠色藍色紫色3.1.4色彩的搭配方法1.同類色配色2.鄰近色配色3.對比色配色4.互補色配色3.1.5色彩比例控制美工作品的色彩應用應遵循“總體協調，局部對比”的原則，日本設計師提出了配色的黃金比例：70%主色，25%輔助色，5%點綴色。3.2設計中的文字3.2.1字體的性格特征1.黑體2.宋體3.圓體4.書法體3.2.2字體的高級使用技巧1.男性化的字體2.女性化字體3.促銷字體4.中國風字體5.可愛字體6.文藝字體7.奢華風字體3.2.3文字編排的基本原則1.左對齊2.右對齊3.居中對齊3.2.4文字排版設計技巧善用對比巧用形狀3.3視覺設計中的排版構圖排版構圖是設計師從混亂的視覺元素中找到條理性，幫助顧客在各個視覺元素之間建立聯系，從而幫助顧客在閱讀中獲取重要信息。1.有助于重要信息的傳遞2.加強視覺效果的張力3.3.1視覺構圖的作用視覺構圖首先有助于重要信息的傳遞，好的構圖和色彩一樣，使表達的內容更加突出，讓顧客快速抓住中心點。其次，合理的構圖能加強視覺效果的張力。通過改變視覺元素的位置、大小、顏色，加強視覺的張力，增加設計的趣味性。3.3.2常見構圖形式1.左右構圖2.中心構圖3.并置型構圖4.對角線構圖5.黃金分割構圖歸納與提高本章節從色彩的應用、字體的選擇、排版的技巧、空間感營造和點線面應用等方面介紹了網店美工必需掌握的視覺設計元素。在色彩的應用方面，介紹了色彩的三要素，即明度、飽和度、色相。此外，還包括色彩心理和各種常用的配色方案，以及配色的比例；在文字的應用方面，介紹了常用字體的性格特征和字體編排的原則；在版式設計方面，介紹了頁面構圖的作用和常用的構圖形式。第4章店鋪Logo與主圖的視覺設計教學內容Logo的視覺設計主圖的視覺設計專題頁面的視覺設計教學要求【知識目標】1.了解Logo的定義、類型；2.理解Logo的設計規范；3.掌握Logo的設計思路與推銷方法；4.理解主圖的重要性；5.掌握主圖的設計規范、設計思路與方法。【技能目標】1.能夠設計并制作出高識別度的Logo；2.能夠設計并制作各種類型產品主圖。【素養目標】1.培養讀者的設計與創新能力；2.培養讀者對Logo釋義的提煉和設計傳達能力。教學重點1.掌握Logo的設計思路與推銷方法；2.掌握主圖的設計規范、設計思路與方法；教學難點掌握Logo的設計思路與推銷方法；教學方法講授法、案例法、練習法課時數6課時教學內容4.1Logo的視覺設計4.1.1Logo的定義Logo是一種標志，通過意義明確的視覺符號，將經營理念、企業文化、經營內容、企業規模和產品特性等要素傳速給消費者。4.1.2Logo的類型1.中文型Logo2.英文型Logo3.中英文結核型Logo4.圖形型Logo5.圖文結合型Logo4.1.3Logo的設計規范1.優秀的Logo首先需要具備創新性。2.優秀的Logo應具備思想性。3.優秀的Logo應具備易傳播的特性。4.優秀的Logo應具備美感。5.優秀的Logo應具備易用性4.1.4Logo的設計思路1.明確網店策略2.明確品類策略定位3.明確風格定位4.明確元素5.明確字體6.明確色調設計師可以用以下幾個問題給自己的作品打打分：（1）Logo能喚起用戶什么樣的情感？（2）隱藏在Logo背后的東西是什么？（3）Logo經得起時間的考驗嗎？（4）它獨一無二，一眼就能看出來嗎？（5）在黑白色上看起來是如何？（6）在小尺寸下也能獨特清晰嗎？4.1.5推銷Logo的技巧與方法設計完成的Logo，不能只是簡單的導一張圖出來，而是需要一個提案，即：推導+延展+呈現，示例如下：1.呈現，即Logo作品2.Logo的推導過程3.Logo的延展4.1.6Logo的制作Logo是店鋪裝修中必不可少的一部分，本例將為一科技類網店制作圖形類Logo。4.2主圖的視覺設計4.2.1主圖的類型與尺寸很多企業在多個電商平臺開設店鋪，為了減少工作量，通常主圖都會設計成800*800px大小。最新版的淘寶主圖已經更新了第六張主圖，相對于原有的五張主圖，添加了寶貝長圖。寶貝長圖的尺寸建議是800*1200px。主圖的格式要求比較寬泛，常見的bmp、png、jpg等圖片格式均可，圖片大小控制在3M以內，否則無法上傳。4.2.2主圖的設計規范在進行主圖的設計時，應遵守主圖設計規范，具體要求如下：首先，產品主體一定要顯眼、清晰，占總體比例的三分之二左右。主圖中可以加入促銷信息，但要簡單明了，促銷信息不要喧賓奪主，字數控制在10字以內。其次，主圖上盡量有店鋪Logo或名稱，加強品牌感，如果使用Logo，一般放在主圖的左上角。第三，主圖上的文案信息避免多個文字區域，或大面積鋪蓋，這樣會干擾到用戶正常查看寶貝。文案在圖片周邊，顏色過于醒目且面積過大時，也會分散用戶的注意力，形成主圖“牛皮癬”，這樣的主圖不僅影響視覺效果，還會受到電商平臺的懲罰。第四，主圖中的產品最好選用單一產品，過多的產品容易分散用戶的注意力，單一產品和多產品主圖的視覺效果對比。最后，主圖應盡量避免拼接圖形，拼接圖的整體視覺效果會顯得非常凌亂，即使是高檔產品也無法營造出高品質的視覺效果。4.2.3主圖設計思路1.從市場出發，做好產品定位2.參考同行，提煉賣點3.差異化的視覺效果4.確定主圖風格和文案信息4.2.4主圖的制作歸納與提高本章介紹了Logo、主圖和專題頁的視覺設計。Logo的視覺設計主要介紹了Logo的定義、類型、設計規范、設計元素提煉和推銷Logo的方法等內容。主圖的視覺設計，主要介紹了主圖的作用、類型、尺寸要求、設計規范和設計思路與方法。專題頁的視覺設計主要介紹了專題頁的設計規范，并以案例形式介紹專題頁的制作。第5章店鋪首頁視覺設計教學內容一、網店首頁設計二、網店首頁核心模塊設計教學要求【知識目標】1.熟悉并掌握店鋪首頁各個模塊的設計要點及主要內容；2.了解店鋪首頁的頁面結構及常見布局；3.掌握店鋪首頁的設計制作流程。【技能目標】1.能夠獨立設計制作出符合店鋪風格的店鋪首頁；2.能夠完成詳情頁中各個模塊設計；3.能夠根據需要對店鋪首頁進行裝修。【素材目標】1.培養讀者遵守平臺規范的意識；2.培養讀者主動學習的習慣。教學重點1.理解店鋪首頁裝修的作用；2.了解店鋪首頁的頁面結構及常見布局；3.掌握店鋪首頁各個模塊的視覺設計規范。教學難點店鋪首頁各個模塊的視覺設計規范教學方法講授法、案例法、練習法課時數8課時教學內容5.1網絡店鋪首頁裝修及其設計思路網店首頁的風格一般受品牌文化、商品品類、顧客群、市場環境等因素的影響，良好的視覺設計給人以舒適的、直觀的視覺感受，讓顧客從設計好的網店中了解到更多的商品信息和店鋪信息。5.1.1網店首頁裝修設計的目的網店的頁面裝修的漂亮別致，首先從視覺方面就能打動消費者的心，讓消費者感覺到賣家對店鋪的用心，從而增添對店鋪商品的信任感。而賣家把所有的關于店鋪的基本信息展示在店鋪首頁，讓消費者能第一時間很清晰地了解到店鋪的所有信息，同時也能加深消費者對店鋪的印象，促進消費者對店鋪內商品的購買，增加商品的成交量。良好的店鋪裝修效果能很好的提升店鋪的形象，增加消費者對店鋪的關注度，提高店鋪點擊率。5.1.2網店首頁基本布局5.2網店首頁核心模塊設計5.2.1店招的視覺設計1.店招設計要求（1）店招內容：從內容上講，店招上可以放置店鋪名稱、Logo、廣告語、促銷產品、關注按鈕、優惠券、搜索框、店鋪公告等一系列信息。（2）店招分類：店招分為常規店招和通欄店招，常規店招的寬度尺寸為950像素，高度尺寸不超過120像素。通欄店招的寬度尺寸為1920像素，高度尺寸不超過150像素。（3）設計原則：店招設計要遵守的第一個原則是品牌形象的植入。品牌形象的植入可以通過店鋪名稱、店鋪Logo的展示來進行。第二個原則是抓住產品定位，產品定位是指展示店鋪賣什么產品，自己店鋪的賣點、特點、優勢、差異化等，精準的產品定位可以快速吸引目標消費群體進入店鋪。2.不同類型店招的設計賣家在各個時期的階段目標不同，店招通常分為品牌宣傳、活動促銷和產品推廣三種形式，每種形式的元素應用均有不同。

（1）品牌宣傳類制作品牌宣傳類店招時，首先要考慮和品牌相關元素的應用，如店鋪名稱、Logo、廣告標語，因為這是品牌宣傳最基本的內容載體；其次是關注按鈕、關注人數、收藏按鈕，可以側面反映店鋪實力；第三是搜索框、第二導航等能夠提升用戶體驗的內容。（2）活動促銷類制作活動促銷類店招時，首先放置店鋪名稱、Logo等內容，因為對于一個店鋪而言，不管現階段的主要目標是什么，都需要向客戶展示店鋪的名稱及品牌。在放置好店鋪名稱、Logo后，接下來要考慮的因素是活動信息、優惠券、促銷產品等和活動相關的信息；最后考慮的是搜索框、旺旺、第二導航等方便用戶體驗的內容。不管是氣氛設計還是內容展示，都要讓活動信息占據更大的篇幅，否則顧客對店鋪的信息關注度會降低。（3）產品推廣產品推廣類店招主要是為了打造爆款，店鋪有主推產品或者是想要主推一款或幾款產品。在店招上，同樣是先擺放店鋪名、logo、廣告語等，然后要主打促銷產品以及和產品匹配的促銷信息、優惠券、活動信息等；最后是搜索框、第二導航條等方便用戶體驗的內容。5.2.2輪播海報的視覺設計1.輪播海報的設計要求（1）全屏輪播海報尺寸（2）常規輪播海報尺寸（3）輪播海報設計要點制作全屏輪播海報的時要保證其在構圖方式、色彩搭配、字體應用等方面風格一致，整體畫面保持簡潔美觀、主題突出、能夠吸引買家注意。此外，由于用戶的屏幕分辨率不同，每個用戶看到的界面會有所差異，為了保證不同分辨率的用戶在觀看輪播海報時，都能看全面、看清晰，在輪播海報的設計中，應將主要產品及文案信息盡可能的居中顯示。2.全屏輪播海報設計制作5.2.3優惠券的設計制作1.優惠券的設計規范優惠券的使用范圍：明確優惠券的使用范圍和使用方式，例如是全店通用，還是僅限店內的單款、新品或者某系列商品使用。明確優惠券的使用范圍可以限定消費對象，起到引導店鋪流量走向的作用。優惠券的使用條件：如全場購物滿168元可以使用10元優惠券、滿288元可以使用20元優惠券。限制優惠券的使用條件，可以在刺激客戶消費的同時最大限度地保證利潤空間。優惠券的使用時間：如果店鋪開展短期推廣，一般應設置優惠券的到期時間以接近消費周期為佳，該周期一般為1個月。若是做促銷活動，那么優惠券的使用周期為對應的促銷天數。限制使用時間可以讓顧客產生過期浪費的心理，提高顧客的轉化率。2.優惠券的設計與制作5.2.4商品促銷展示區設計1.商品陳列展示模塊設計要求（1）明確商品類別（2）突出商品價格和購買按鈕2.商品陳列展示模塊的設計與制作5.2.5店鋪頁尾區的視覺設計1.店鋪頁尾模塊設計要求頁尾內容比較靈活，通常采用簡短文字、具有代表性的圖標來傳達相關的信息；店鋪底部導航包括如下信息：（1）產品的分類便于消費者再次瀏覽網頁；（2）返回頂部的文字或者按鈕當店鋪頁面過長時，添加返回頂部的文字或按鈕可以快速跳轉到頁面頂部，從而方便用戶反復瀏覽網店；（3）收藏、分享店鋪在頁尾添加收藏與分享店鋪的鏈接，可以方便用戶快速收藏或分享店鋪，盡量留住客戶；（5）溫馨提示如發貨須知、關于色差、關于售后等信息，以便于幫助顧客快速解決購物過程中的問題。2.店鋪頁尾模塊設計制作歸納與提高本章介紹了網店首頁各模塊的作用、視覺設計規范、注意事項和設計方法，并以實際案例詳細介紹了設計與制作的過程，具體包括店招、輪播海報、優惠券、商品展示模塊、頁尾模塊的視覺設計。第6章商品詳情頁的設計制作教學內容商品詳情頁概述商品詳情頁的制作要點商品詳情頁核心模塊設計教學要求【知識目標】1.了解商品詳情頁設計的重要性；2.熟悉商品詳情頁的設計思路；3.掌握商品詳情頁設計要點與技巧。【技能目標】1.能夠抓住不同商品的特點設計出別具一格的商品詳情頁；2.能夠熟練制作焦點圖、功能圖、展示圖、細節圖等。【素養目標】1.培養讀者對詳情頁內容的總結、分析、規劃能力；2.提升讀者對詳情頁內容的布局和展現能力。教學重點1．掌握商品細節展示區設計技巧。2．熟悉商品詳情頁各元素的設計方法。教學難點1．掌握并運用商品主圖的設計形式。2．熟練運用商品細節展示區設計技巧。3．熟練運用商品功效簡介區各元素的設計方法。教學方法講授法、案例法、練習法課時數6課時教學內容6.1商品詳情頁概述6.1.1認識商品詳情頁圖6-1商品詳情頁的頁面布局6.1.2商品詳情頁的作用? 引發買家興趣、激發顧客的消費欲望；? 通過詳情頁圖片和文字介紹讓買家全面了解產品；? 樹立買家對商品的信任感，打消消費疑慮，促使下單；? 降低服務成本、提升客單價。6.1.3商品詳情頁規格6.2商品詳情頁的制作要點6.2.1詳情頁前期規劃（1）商品信息收集在制作商品詳情頁之前，需要仔細閱讀廠家提供的產品介紹資料或者在互聯網查詢類似的商品的參考數據，了解產品的名稱、顏色、尺寸、重量等基本屬性信息。（2）競品市場調研在眾多的網絡商品以及商家面前，買家會對他感興趣的東西進行挑選、對比，然后再確定購買，因此制作產品詳情頁就要在眾多商品中中，找到與自己屬性差不多的產品進行對比分析。（3）商品賣點挖掘商品的賣點是指商品具備前所未有、別出心裁或與眾不同的特色、特點。商品的賣點就是吸引消費者購買產品的理由，沒有賣點的詳情頁只會讓進入店鋪的流量白白的浪費掉。如果挖不出產品賣點，打不到買家痛點，商品再好也無法銷售出去。FAB賣點挖掘法F是單詞Feature的縮寫，表象特征的意思，也叫屬性；A是單詞Advantage的縮寫，表示功能或優勢的意思，也叫作用，作用是由前面一個要素F屬性延伸出來的；B是單詞Benefit縮寫，是滿足需求或者有好處，即有益處的意思，也叫利益。利益是根據前兩個要素，立足于買家的需求，得出來的。從產品概念提煉:一個完整的產品概念是立體的，包括核心產品、形式產品、期望產品、延伸產品和潛在產品5個層次。核心產品是指商品的使用價值，是產品概念中必不可少的部分。（4）商品素材整理素材收集是商品詳情頁制作過程中重要的環節，收集素材可以參考前期市場調研時的頁面，這個參考并不是讓大家抄襲，而且取其精華，去其槽粕，形成大概思路和框架，然后再去收集和整理相關素材。商品詳情頁制作過程中，一般需要收集的素材包括：經過美化處理的白色背景圖、商品場景圖、模特圖、細節圖等，還有互聯網上搜6.2.2詳情頁設計思路（1）確定頁面風格頁面風格主要是根據產品本身來定的，通過分析產品的屬性、產品的功能以及客戶人群，最后確定頁面風格。（2）構建內容框架焦點圖——引發興趣目標客戶群設計——買給誰用，自己能不能使用。場景圖——激發潛在需求商品細節——逐步信任為什么購買——好處設計、痛點設計同類商品對比——為什么選擇我的產品客戶評價、第三方評價——產生信任購后的感覺塑造——給客戶一個100%購買的理由給客戶購買理由——送戀人、孝敬父母、送領導、送朋友等發出購買號召——為什么立刻品牌介紹購買須知——郵費、發貨、退貨等關聯推薦（3）確定配色方案對于店鋪已經有視覺規范的情況下，可以繼續沿用已有的配色方案，在沒有視覺規范，無從下手的時候，提供幾種配色的技巧。從LOGO提取，從LOGO提取配色方案比較適合已有店鋪VI系統或者線下的知名品牌。從產品本身或者行業屬性提取，比如醫療行業，可選取藍色作為主色；家具行業可選取綠色作為主色。從產品的聯想屬性提取，比如嬰幼兒產品，為了凸顯寶寶的可愛、純潔，多選用粉色和純凈的淺藍色。（4）選擇合適的字體文字在詳情頁中起到對商品及活動等信息的解釋和說明的作用，合適的字體選擇能夠方便顧客閱讀并起到對重要信息引導的作用，文字會在整個內頁中從上到下延續使用，所以了解文字使用規范至關重要。具體規范內容如下：一般不超過3種字體；重點的部分要突出顯示，注意文字大小、粗細、疏密的對比；字體顏色的選擇不宜過于復雜，避免影響閱讀；字體選擇要符合產品的定位；字號一般要大于12號。（5）頁面上線（6）修改完善6.3商品詳情頁核心模塊設計6.3.1商品焦點圖設計設計焦點圖時需要做到視覺沖擊力強、產品展示完整、體現核心賣點三個方面，焦點圖文案要做到體現產品核心優勢的同時，與顧客產生心理上的聯系。6.3.2商品賣點設計商品賣點可以是一個，也是可以是多個，在進行賣點設計時，應采用圖文結合的形式，通過文案進一步強調和解釋賣點，最大化幫助顧客理解內容。6.3.3商品基本參數設計當顧客產生購買需求后，就需要進一步了解產品，查看尺碼、規格、顏色等，商品參數就是對商品基本屬性的詳細介紹。不同的商品屬性不同，參數也不同，商品參數通常包括顏色、體積、重量、尺寸、保質期、材質等。6.3.4商品展示設計商品展示模塊需要通過圖片對商品進行全方位的展示，包括商品的正面、側面、背面、內里、細節等。由于網絡購物的虛擬性，顧客無法親自查看商品，為了讓顧客全面的了解商品，詳情頁應盡可能從多角度、多形式展示商品。6.3.5商品細節圖設計商品細節圖模塊是對商品細節的展示，當顧客了解了商品的整體情況后，會關注商品的細節，比如拉鏈、面料、做工等。細節圖要具有足夠的放大效果，將商品的細枝末節清晰的展示給顧客，細節圖運用得當可以提升商品層次、突出品質感。歸納與提高本章介紹了商品詳情頁的視覺設計，包括詳情頁的布局、作用、詳情頁的制作思路、內容的邏輯順序，并以兒童書包為例，介紹了焦點圖模塊、商品賣點模塊、商品參數模塊、商品展示模塊、細節圖模塊的設計與制作。第7章網店營銷推廣圖的制作教學內容聚劃算主圖視覺設計直通車推廣圖視覺設計智展圖視覺設計教學要求【知識目標】1.掌握聚劃算主圖的設計規范；2.掌握直通車主圖的設計規范；3.掌握智能鉆展圖的設計規范。【技能目標】1.能夠設計制作出鉆展圖；2.能夠設計制作出直通車圖片以及聚劃算主圖。【素養目標】1.培養讀者與時俱進的意識，根據平臺要求設計高點擊率的推廣圖；2.培養讀者舉一反三的能力。教學重點1.掌握聚劃算主圖的設計規范；2.掌握直通車主圖的設計規范；3.掌握智能鉆展圖的設計規范。教學難點掌握智能鉆展圖的設計規范教學方法講授法、案例法、練習法課時數6課時教學內容7.1聚劃算主圖視覺設計7.1.1聚劃算主圖的設計規范（1）商品圖片（2）Logo放置規范（3）圖片背景（4）商品構圖7.1.2聚劃算主圖設計案例7.2直通車主圖視覺設計7.2.1直通車主圖的設計規范設計定位，思考為先亮出商品，重點展示構圖合理，排版統一7.2.2直通車主圖設計案例7.3引力魔方圖設計制作7.3.1引力魔方廣告圖的設計要點主題突出目標明確形式美觀7.3.2引力魔方圖設計制作歸納與提高本章介紹了聚劃算主圖、直通車主圖、智鉆圖的設計與制作，這三種圖片出現的位置不同，制作規范也不同，但在設計與制作的過程中都需要做到圖片風格一致、主題突出、形式美觀、構圖合理。第8章專題頁與活動頁的視覺設計教學內容專題頁的視覺設計活動頁的視覺設計教學要求【知識目標】1.掌握專題頁的設計與制作方法；2.掌握活動頁的設計與制作方法。【技能目標】1.能夠獨立完成專題頁的視覺設計；2.能夠獨立完成活動頁的視覺設計。【素養目標】1.培養讀者設計與創新傳統節日類專題頁的能力。2.培養讀者設計各類活動頁的能力。教學重點1．掌握專題頁的視覺設計規范；2．掌握活動頁的設計方法。教學難點掌握專題頁頭圖設計技巧教學方法講授法、案例法、練習法課時數6課時教學內容8.1專題頁的視覺設計8.1.1專題頁的設計規范1.專題頁結構專題頁的形式多種多樣，大多數的專題結構分為頭圖部分和內容部分，傳統的專題一般只有一個主頁面，復雜的則有若干的二級頁面組成。專題頁的基本內容主要包括：頭圖Banner＋至少1個樓層模塊＋背景＋氛圍點綴物。2.設計頭圖設計頭圖首先要考慮的是頭圖的設計風格，根據不同的主題，選擇不同風格的視覺設計，如三八節，打造浪漫、溫馨的頁面風格；春季上新，打造青春、朝氣蓬勃的頁面風格。頭圖部分的設計是整個專題的重點，也是專題最需要突出的亮點，頭圖可以確立整個專題的基調。專題頭圖的設計類似一個更大的banner，尺寸上相當于全屏海報，但也有著很多的不同，專題頁頭圖的細節更多，它需要考慮如何巧妙的與下面的內容銜接。頭圖元素的設計不分楚河和漢界，要讓頭圖和下面的內容在視覺上有聯系，打破首屏與次屏在設計上有明顯的顏色條分隔、形式分隔、線分隔等。3.專題內容區的設計內容區與頭圖的銜接要巧妙，忌生硬。形式可以有很多變化，與專題整體的視覺要素結合，可以繼承頭圖中的視覺元素，讓專題頁面的視覺效果更佳的統一，整體。也可以設計出不同的樣式，讓內容區的展現更生動。除了要突出專題頁面整體的視覺沖擊力，還需讓用戶能夠關注專題頁的實質內容，不能因注重頭圖的設計而怠慢文案內容。除了一些“PK性質”的專題模塊，要注意模塊欄目分布的權重，內容的主次要清晰，排布在邏輯上有關聯性。8.1.2移動端與計算機端店鋪的區別專題頁的設計制作8.2活動頁的視覺設計8.2.1舉辦活動的目的和作用開展各種促銷活動，這樣往往難以達到預期的效果。1.縮短產品入市的進程2.激勵買家初次購買，達到使用目的3.激勵顧客再次購買，建立消費習慣4.提升市場份額，達到銷售目的5.提高網店信譽度8.2.2活動頁的設計要點1.主題出彩2.色彩出彩3.細節出彩8.2.3活動頁的設計制作歸納與提高本章介紹了專題頁與活動頁的設計與制作方法。專題頁的視覺設計方面，主要介紹了專題頁的頁面結構、頭圖的設計方法以及內容區設計技巧。活動頁的視覺設計方面，主要介紹了舉辦電商活動的作用和目的、活動頁的設計要點。第9章移動端網店的視覺設計與裝修教學內容移動端網店裝修的基礎知識移動端網店首頁的視覺設計移動端詳情頁的視覺設計教學要求【知識目標】1．了解移動端店鋪頁面的框架結構；2．了解移動端店鋪對圖片發布的尺寸要求；3．掌握移動端網店模塊的編輯與裝