網(wǎng)店美工與視覺設(shè)計 教案全套 第1-8章 認(rèn)識網(wǎng)店美工-移動端網(wǎng)店的視覺設(shè)計與裝修

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

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