網(wǎng)店裝修美工及視覺營銷設計課件

網(wǎng)店裝修與美工設計網(wǎng)店裝修與美工設計為什么要做網(wǎng)店裝修和設計？為什么要做網(wǎng)店裝修和設計？2網(wǎng)店裝修及美工的重要性網(wǎng)店裝修及美工的重要性網(wǎng)店美工的根本宗旨

一個好的網(wǎng)店美工，不僅僅是考慮觀賞性，更重要的是記住美工時刻服務于營銷目的（提高轉化率）。網(wǎng)店美工的根本宗旨一個好的網(wǎng)店美工，不僅僅是考4店鋪裝修原則相同點：1、誘導用戶逐步產生購買沖動和行為，提高轉化率2、裝修風格和產品、人群定位保持一致店鋪裝修原則相同點：1、誘導用戶逐步產生購買沖動和行為，提高5一、網(wǎng)店裝修-流程

分類陳列區(qū)分類陳列區(qū)目標定位（百度指數(shù)、阿里指數(shù)、生意參謀）：產品定位消費群體人群年輕？時尚？商務？穩(wěn)重？暗黑？知性？清新.....風格設計：整體風格主色、版式、頁面布局細節(jié)風格寶貝主圖、海報、詳情頁...店鋪裝修裝修修改：熱力圖等檢討復盤一、網(wǎng)店裝修-流程

分類陳列區(qū)分類陳列區(qū)目標定位（百度指數(shù)、6一、網(wǎng)店裝修

櫥窗形象分類陳列區(qū)分類陳列區(qū)分類陳列區(qū)門頭logo促銷區(qū)搭配陳列區(qū)搭配陳列區(qū)海報廣告一、網(wǎng)店裝修

櫥窗形象分類陳列區(qū)分類陳列區(qū)分類陳列區(qū)門頭lo7店招的設計要點及實操店招的設計要點及實操81沒有店名2色彩搭配不醒目3商品色彩和背景色彩混為一體1沒有店名網(wǎng)店裝修美工及視覺營銷設計ppt課件網(wǎng)店裝修美工及視覺營銷設計ppt課件小技巧：時間倉促時利用漢語拼音做店標顯得更高大上…小技巧：時間倉促時利用漢語拼音做店標顯得更高大上…淘寶寶貝主圖的要求淘寶寶貝主圖的要求13寶貝圖片上傳建議建議：

1、寶貝主圖最好上傳為800*800px，既可以使用放大鏡功能讓消費者看到細節(jié)又可以節(jié)約流量，節(jié)省圖片顯示時間

2、5張寶貝圖建議分配為:1張正面圖，2-3張側面或細節(jié)圖，1-2張宣傳圖

3、寶貝主圖后期制作時有品牌統(tǒng)一在右上角加品牌logo、背景和產品位置

4、嚴格按規(guī)格批量統(tǒng)一裁剪為正方形(天貓、淘寶智能版自定義區(qū)則統(tǒng)一尺寸)

5、宣傳圖保持界面干凈，文字簡潔，不要覆蓋商品本身，盡可能不要加水印

6、嚴禁牛皮癬，嚴禁盜圖寶貝圖片上傳建議建議：14水印過多—牛皮癬文字放置在產品上文字過多，文字字體，色彩風格不統(tǒng)一水印過多—牛皮癬文字放置在產品上文字過多，文字字體，色彩風格15注意層次感文字不放置在主圖放置在背景圖寶貝圖片設計策劃注意層次感文字不放置在主圖放置在背景圖寶貝圖16淘寶櫥窗展示應統(tǒng)一背景色和風格，注意突出主題圖片花色過多分散賣點寶貝主圖設計策劃淘寶櫥窗展示應統(tǒng)一背景色和風格，注意突出主題圖17突出主題商品標簽產品名稱，純色背景寶貝主圖設計策劃突出主題商品標簽產品名稱，純色背景寶貝主圖設計策18淘寶主圖為正方形統(tǒng)一圖片大小、格式寶貝主圖設計策劃淘寶主圖為正方形統(tǒng)一圖片大小、格式寶貝主圖設計策劃19制作模板圖片整齊風格統(tǒng)一模板實際就是做了一個整體規(guī)范統(tǒng)一品牌標記標準位置價簽logo制作模板圖片整齊風格統(tǒng)一模板實際就是做了一個整體規(guī)范統(tǒng)一品牌20裂帛實體店寶貝統(tǒng)一模板裂帛實體店寶貝統(tǒng)一模板21根據(jù)模板調整透明度，統(tǒng)一酒瓶尺寸大小，調整傾斜度，校對位置根據(jù)模板22水果店商品展示水果店商品展示23多角度展示產品2張之內產品廣告多角度展示產品24多角度展示主圖寶貝主圖設計策劃多角度展示主圖寶貝主圖設計策劃25寶貝主圖策劃=展示產品+服務廣告主圖整體外觀多角度文字排版介紹

細節(jié)配件展示其他配件展示消費者關心的東西一目了然展示看圖即可解答心中疑問服務到位寶貝主圖設計策劃寶貝主圖策劃=展示產品+服務寶貝主圖設計策劃26網(wǎng)店裝修美工及視覺營銷設計ppt課件27實操1、如何調整圖片分辨率2、如何按照要求批量裁剪圖片及添加品牌logo3、如何摳圖4、如何通過色彩平衡（曲線、對比度、色階）調整圖像明暗度實操1、如何調整圖片分辨率2、如何按照要求批量裁剪圖片及添加28色彩與網(wǎng)店設計色環(huán)色彩三個屬性色彩冷暖性色彩與網(wǎng)店設計色環(huán)色彩三個屬性色彩冷暖性291、紅色紅色給人一種喜慶火熱的感覺，是一種對人刺激性很強的色。紅色容易使人興奮、緊張、激動，故也稱為興奮色。在網(wǎng)頁美工設計中運用紅色會達到比較好的視覺宣傳效果色彩心理與設計風格色彩心理與設計風格302、黃色黃色給人一種光明輝煌的感覺，是最為嬌嫩的一種色。在所有的顏色當中黃色明度最高。在網(wǎng)店美工設計中使用黃色和白色的搭配，會使得頁面更加的干凈純潔。網(wǎng)店裝修美工及視覺營銷設計ppt課件313、藍色藍色給人一種清新、舒暢的感覺，是一種最具理智沉穩(wěn)的色。藍色是冷色調當中最為典型的代表色，可以襯托出其它色彩，讓整個網(wǎng)頁看起來更加豐富色彩網(wǎng)店裝修美工及視覺營銷設計ppt課件324、綠色綠色給人一種新鮮、平靜、安全等方面的感覺，是一種具有黃色和藍色兩種成份的色。綠+黃=單純、年輕；綠+黑=美麗、成熟；綠+淺紅=春天的來臨。網(wǎng)店運用綠色系，顯示出網(wǎng)店的年輕生命力，給人健康、成熟的心理感受。網(wǎng)店裝修美工及視覺營銷設計ppt課件335、紫色紫色給人一種優(yōu)雅、高貴、神秘的感覺，在所有色彩中明度是最低的。一般紫色會用來代表女性相關的商品，在化妝品包裝中也常使用紫色。網(wǎng)店設計中紫色并不能在所有站點中使用，但紫色會給人留下深刻印象，容易抓住人的視線網(wǎng)店裝修美工及視覺營銷設計ppt課件34

6、白色白色給人一種純潔、淳樸、神圣的感覺。在大自然中雪的顏色為白色，同樣會使人造成寒冷的生理反應；在服飾搭配上，白色為百搭色彩，可以和任何顏色進行搭配。在網(wǎng)頁設計中白色被廣泛用于電子商務、微博等各種網(wǎng)站。白色時常也用在字體顏色、背景顏色、圖片等等，

35

7、黑色黑色給人一種嚴肅、剛健、恐怖的感覺，是純度、色相、明度最低的非色彩。配色中黑色和許多顏色構成良好的對比調和，運用范圍廣泛。網(wǎng)店設計中同時運用黑色和白色，視覺沖擊力很強，主次分明，通常可以表現(xiàn)出強烈的時代感

36沖突的對比色華麗的對比色穩(wěn)健的鄰近色統(tǒng)一的同類色沖突的對比色華麗的對比色穩(wěn)健的鄰近色統(tǒng)一的同類色37一般而言，色彩搭配不要超過三種，之間的比例是這樣的....海報設計之色彩搭配一般而言，色彩搭配不要超過三種，之間的比例是這樣的....海38海報色彩設計-相近色搭配海報色彩設計-相近色搭配39相鄰色搭配相鄰色搭配40相鄰色或相近色搭配：

優(yōu)點：穩(wěn)定、平靜、和諧，

常用于家居，生活類商品主題海報

缺點：容易單調，必須加入其它圖案平衡相鄰色或相近色搭配：

優(yōu)點：穩(wěn)定、平靜、和諧，

41間隔色搭配間隔色搭配42紅+藍，典型冷暖色搭配，容易讓人產生視覺亢奮感，需要萬能色白色中和...紅+藍，典型冷暖色搭配，容易讓人產生視覺亢奮感，需要萬能色白43間隔色搭配：優(yōu)點：即不像對比色那么沖突劇烈，又有明快，活潑之感，可常用于各種活動海報搭配缺點：色彩搭配比例難控制間隔色搭配：44對比色搭配對比色搭配45對比色搭配優(yōu)點：強烈的視覺沖擊力，有力量、氣勢，活力。常見于時尚品主題海報，也常用于促銷活動缺點：不易調和把控對比色搭配46海報設計之細節(jié)-點線面海報設計之細節(jié)-點線面47點的運用點的運用48線的運用虛擬的視線引導文字串聯(lián)信息線的運用虛擬的視線串聯(lián)信息49面的設計分割畫面避免背景單調增加層次感和動感面的設計分割畫面避免背景單調增加層次感和動感50詳情頁、網(wǎng)店整體設計點線面點——畫面的氣氛點綴、豐富層次、有對比大小就有點線——引導視覺走向、鏈接信息面——畫面層次分割、信息的載體詳情頁、網(wǎng)店整體設計點線面點——畫面的氣氛點綴、豐富層次、有51一張高效的網(wǎng)絡廣告的三大要素文案主標題/副標題/價格/標簽商品主產品/次產品/模特背景前背景/中背景/后背景一張高效的網(wǎng)絡廣告的三大要素文案主標題/副標題/價格/標簽商分層分層53商品層：明確主題圖案為主題服務，即使沒有文字，也知道這個圖傳達的意思商品層：明確主題圖案為主題服務，即使沒有文字，54商品層：關注點清晰商品層：關注點清晰55文案層：關鍵信息視覺清晰文案層：關鍵信息視覺清晰56文案層：圖文一致，邏輯清晰文案層：圖文一致，邏輯清晰57文字接地氣文字接地氣58網(wǎng)店裝修美工及視覺營銷設計ppt課件59不同字體對應產品、目標人群定位電商常用字體不同字體對應產品、目標人群定位電商常用字體60女性字體柔軟飄逸纖細秀美氣質時尚女性字體61如何視覺清晰適用范圍：化妝品/日用品/輕紡/女性鞋服/各種包包/母嬰如何視覺清晰適用范圍：化妝品/日用品/輕紡/女性鞋服/各種包62如何視覺清晰一看就買不起纖細優(yōu)美簡潔小留白如何視覺清晰一看就買不起63男性字體硬朗粗獷沉穩(wěn)大氣男性字體64適用范圍：家電/辦公/男性鞋服/電子產品/戶外工具適用范圍：家電/辦公/男性鞋服/電子產品/戶外工具65促銷字體大醒目吸引傾斜促銷字體66經過大數(shù)據(jù)分析一級文案不要超過8個字文字越多，點擊越低lessismore文字量經過大數(shù)據(jù)分析文字量67網(wǎng)店裝修美工及視覺營銷設計ppt課件68文字疏密度文字間距一般根據(jù)字體大小選1—1.5倍作為行間距，1.5—2倍作為段間距。比如12號字體，行間距是12px-18px。段落間距則是18px-24px。另外，行高/段落之間的空白=0.754.行間距正好是段落間距的75%是非常常見的。文字疏密度文字間距一般根據(jù)字體大小選1—1.5倍作為行間距，69文字重點強調文案描邊文案字體加大文案下方投影復雜背景可以在文案下面加半透明圖層文字重點強調文案描邊70文案中最重要的語句，運用粗細對比和大小對比，加以強調和區(qū)分重點文字不同色強調文案中最重要的語句，運用粗細對比和大小對比，加以強調和區(qū)分重71背景層后背景必須有前背景當裝飾中背景看情況背景層后背景前背景中背景72背景層背景層73背景層后背景中背景前背景背景層后背景中背景前背景74文字層和商品層排版關系互不干涉相互照應文字突出商品清晰文字層和商品層排版關系互不干涉75廣告海報的目的傳達信息引導購買提升轉化率把別人的錢裝進自己的口袋里廣告海報的目的傳達信息引導購買提升轉化率76實操實際查看一個海報文字層，商品層，背景層使用素材創(chuàng)做廣告宣傳海報實操實際查看一個海報文字層，商品層，背景層77詳情頁設計思路確認這個產品是我要的感受門店的人氣跟服務看下別人怎么說想象，產生購物的興奮感對產品有了興趣，希望有更多的了解解讀產品的整體價值確定想要了欲望無止境的擴大思考有沒有其他家在賣？找專家確認點旺旺拍下，付款其它1、買家的購物心理歷程詳情頁設計思路確認這個產品感受門店的看下別人怎么說想象，產生782、對應的設計思路①引發(fā)興趣②激發(fā)潛在需求③從信任到信賴④替客戶做決定。你來了，歡迎，看看我們的寶貝怎么樣？做工，美觀，實用，性價比....我是做這個的專家，我很值得信賴，買家買了都說好，我還有更多優(yōu)惠的產品您還可以看看，近期我店鋪還有更多優(yōu)惠，我的店鋪還有很多活動再進行....2、對應的設計思路①引發(fā)興趣②激發(fā)潛在需求③從信任到信賴79第一部分：創(chuàng)意海報第二部分：寶貝特性介紹第三部分：寶貝的優(yōu)勢第四部分：寶貝的利益第五部分：寶貝的規(guī)格參數(shù)第六部分：寶貝的細節(jié)展示第七部分：寶貝的品牌形象第一部分：創(chuàng)意海報第二部分：寶貝特性介紹第三部分：寶貝的優(yōu)80詳情頁排版創(chuàng)意海報情景大圖寶貝賣點/作用/功能規(guī)格參數(shù)信息寶貝優(yōu)劣對比全方位展示/細節(jié)圖片展示產品或店鋪資歷證書售后保障問題/物流詳情頁排版創(chuàng)意海報情景大圖寶貝賣點/作用/功能規(guī)格參數(shù)信息寶8102、對應的詳情頁排版

詳情頁排版

1.解決買家需求海報區(qū)文字引導疑慮打消建立信心，引發(fā)興趣2.疊加產品價值賣點展示細節(jié)展示對比展示

3.促成交活動重申營造緊迫感4.其它物流/簽收提醒售后流程品牌故事5.產品關聯(lián)同類產品關聯(lián)搭配關聯(lián)錨點關聯(lián)黃金三十秒3、對應的設計部分02、對應的詳情頁排版

詳情頁排版1.解決買家需求海報82詳情頁-買家調研詳情頁-買家調研83詳情頁設計-解決消費痛點痛點：是個互聯(lián)網(wǎng)概念，是相對于傳統(tǒng)企業(yè)的需求而言的。就是用戶在使用產品或服務時抱怨的、不滿的，讓人感到痛苦的接觸點。對于產品來說，痛點多數(shù)時候是指尚未被滿足的，而又被廣泛渴望的需求，有些情況下，也直接指代需求。詳情頁設計-解決消費痛點痛點：是個互聯(lián)網(wǎng)概念，是相對于傳統(tǒng)企84詳情頁設計-痛點調查百度指數(shù)-需求圖譜百度指數(shù)-輿情洞察百度指數(shù)-人群屬性詳情頁設計-痛點調查百度指數(shù)-需求圖譜百度指數(shù)-輿情洞察百度85問題：請分析圖中用戶評價，能解讀出哪些痛點信息？對商家或運營者有什么啟示？