《網(wǎng)店視覺設(shè)計》課件 項目九 網(wǎng)店視覺優(yōu)化

項目九?網(wǎng)店視覺優(yōu)化任務(wù)1?主圖優(yōu)化任務(wù)2?推廣圖優(yōu)化任務(wù)3?詳情頁優(yōu)化570571項目引入網(wǎng)店視覺設(shè)計是為網(wǎng)店運營服務(wù)的，為了滿足網(wǎng)店運營的要求，從網(wǎng)店視覺發(fā)布之日起，一直到網(wǎng)店關(guān)閉，都需要進行一個長期的網(wǎng)店視覺優(yōu)化過程。項目背景“南山大集”網(wǎng)店已經(jīng)運營了一段時間，雖然網(wǎng)店運營團隊不斷調(diào)整，但店鋪銷售依舊不見起色。公司為了解決這個問題，讓張偉、王平兩位同學(xué)加入運營組，希望通過優(yōu)化網(wǎng)店視覺來提升網(wǎng)店的運營效果。學(xué)習(xí)目標1.熟悉并掌握主圖優(yōu)化的方法。2.能夠分析主圖的修改思路。3.能夠?qū)χ鲌D進行優(yōu)化。572任務(wù)引入張偉、王平在進入運營組之后，希望從優(yōu)化主圖開始優(yōu)化網(wǎng)店視覺。他們通過網(wǎng)絡(luò)查找相關(guān)資料，并找專業(yè)老師指導(dǎo)通過店鋪數(shù)據(jù)來優(yōu)化主圖的思路和方法。任務(wù)分析用戶進入詳情頁之前，首先看到的是主圖，只有用戶對主圖產(chǎn)生了興趣，才會點擊瀏覽詳情頁。因此，從主圖開始做優(yōu)化是一個很好的選擇。573相關(guān)知識一、基礎(chǔ)知識在優(yōu)化主圖之前，需要先了解與主圖設(shè)計有關(guān)的概念。1.關(guān)鍵詞關(guān)鍵詞可以是商品的名稱、特性、功能等詞匯，有的時候也可能是短句，如梨、手機、黃色的梨、孕婦用的手機等，用戶可以通過關(guān)鍵詞搜索商品，賣家可以通過給商品綁定關(guān)鍵詞讓用戶更容易搜索到。在網(wǎng)店視覺設(shè)計中，能夠?qū)㈥P(guān)鍵詞很好地展示出來，既不突兀又重點明晰，是考驗設(shè)計師的一項重要指標。5742.訪問量訪問量是指用戶進入店鋪的次數(shù)。日訪問量即每日用戶進入店鋪的平均次數(shù)。月訪問量即每月用戶進入店鋪的平均次數(shù)。影響訪問量的主要因素有：（1）主圖電商平臺將無數(shù)店家的商品展示在平臺櫥窗中，一個好的主圖設(shè)計能夠讓用戶優(yōu)先點擊進入店鋪，增加店鋪訪問量。（2）推廣圖使用直通車圖、鉆展圖等推廣圖，能夠有效地增加店鋪曝光度，一個好的推廣圖能夠吸引用戶進入店鋪，增加店鋪訪問量。575二、優(yōu)化思路1.用戶行為心理分析用戶在搜索商品后會得到商品列表，該列表中包括商品標題、商品價格、商品主圖、付款人數(shù)等信息，而這些信息都能夠影響用戶點擊該商品的可能性。就主圖來說，更符合用戶需求的主圖肯定會獲得更多的點擊，因此主圖的文案與商品圖片設(shè)計是滿足用戶需求的關(guān)鍵。576搜索結(jié)果2.主圖內(nèi)容優(yōu)化分析如圖所示是之前設(shè)計的小番茄主圖，在運營人員處獲取到當前店鋪日訪問量為102人次，相較于生鮮類店鋪210人次的日平均訪問量而言，訪問量是相對較低的，對于主圖設(shè)計而言可能存在的問題是關(guān)鍵字展示不明晰、商品圖片主體不突出等。577小番茄主圖三、主圖優(yōu)化實施在分析出用戶需求后，針對性地進行如下主圖優(yōu)化：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對話框中設(shè)置寬度為750像素，高度為1000像素，分辨率為72像素/英寸，新建一個空白畫布，效果如圖所示。2.導(dǎo)入“項目九任務(wù)1邊框”素材圖片，將其居中對齊，效果如圖所示。578579新建空白畫布導(dǎo)入“項目九任務(wù)1邊框”素材圖片3.導(dǎo)入“項目九任務(wù)1番茄”素材圖片，將其置于“邊框”圖層下面，調(diào)整圖片大小和位置，效果如圖所示。580導(dǎo)入“項目九任務(wù)1番茄”素材圖片4.選擇矩形工具，在工具屬性欄中設(shè)置填充為空，描邊為#ecd1ae、1像素，繪制750像素×855像素的矩形，效果如圖所示。581繪制矩形15.選擇矩形工具，在工具屬性欄中設(shè)置填充為#ecd1ae，繪制750像素×60像素的矩形，效果如圖所示。582繪制矩形26.執(zhí)行“圖層樣式＞漸變疊加”命令，為“矩形3”添加漸變疊加，設(shè)置漸變?yōu)?dab9、?e4c4、?ebcd、?efd5、?ebcd、?e4c4、?dab9，效果如圖所示。583漸變疊加7.使用鋼筆工具繪制如圖所示翻卷效果前半部分，設(shè)置顏色為#258355。584繪制前半部分8.執(zhí)行“圖層樣式＞投影”命令，為“圖形1”添加漸變投影，效果如圖所示。585添加投影9.使用鋼筆工具繪制如圖所示翻卷效果后半部分，設(shè)置顏色為#258355。586繪制后半部分10.使用鋼筆工具繪制如圖所示倒圓角梯形，設(shè)置顏色為#148f50。587繪制倒圓角梯形11.導(dǎo)入“項目九任務(wù)1logo”素材圖片，置于頂部居中位置，效果如圖所示。588導(dǎo)入“項目九任務(wù)1logo”素材圖片12.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#???，效果如圖所示。589顏色疊加13.選擇橫排文字工具，輸入文字“包郵500克一斤裝”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、60點、#???，效果如圖所示。590輸入文字114.選擇橫排文字工具，輸入文字“無農(nóng)藥/無化肥/無激素/無轉(zhuǎn)基因”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、25點、#148f50，效果如圖所示。591輸入文字215.選擇橫排文字工具，輸入文字“活動價：”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、30點、#f0feda，效果如圖所示。592輸入文字316.選擇橫排文字工具，輸入文字“￥9.9”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、50點、100點、#f0feda，效果如圖所示。593輸入文字417.選擇橫排文字工具，輸入文字“新鮮看得見自然好味道”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、64點、#???，最終效果如圖所示。594最終效果595學(xué)習(xí)目標1.熟悉并掌握推廣圖優(yōu)化的方法。2.能夠分析推廣圖的修改思路。3.能夠?qū)ν茝V圖進行優(yōu)化。596任務(wù)引入張偉、王平在完成商品主圖優(yōu)化后，下一個任務(wù)就是推廣圖優(yōu)化。他們通過網(wǎng)絡(luò)查找相關(guān)資料，并找專業(yè)老師指導(dǎo)通過店鋪數(shù)據(jù)來優(yōu)化推廣圖的思路和方法。任務(wù)分析除了店鋪搜索之外，讓用戶進入店鋪的最好方法就是通過直通車、鉆展等付費推廣來吸引用戶。付費推廣會提供給店鋪一系列特有數(shù)據(jù)，便于針對性地對推廣圖進行優(yōu)化，以提升訪問量和成單量。相關(guān)知識一、基礎(chǔ)知識在進行推廣圖優(yōu)化之前，需要先了解一下相關(guān)參數(shù)。1.展示量展示量是指推廣圖被用戶看到的數(shù)量，是付費推廣中最重要的指標之一。2.點擊量點擊量是指用戶點擊推廣圖的數(shù)量，一個點擊量就是一個訪客。5973.點擊率點擊率是指點擊量與展示量的比值，是付費推廣的核心數(shù)據(jù)，直接影響計劃權(quán)重和質(zhì)量分數(shù)，進而影響平均點擊扣費，是進行推廣圖優(yōu)化的核心指標。4.交易總數(shù)交易總數(shù)是指通過推廣圖帶來的訂單數(shù)量。5.點擊轉(zhuǎn)化率點擊轉(zhuǎn)化率是指通過推廣圖進店成單人數(shù)與通過推廣圖進店人數(shù)的比率，轉(zhuǎn)化率越高帶來的收益就越大，是檢驗推廣圖推廣效果的核心指標。598二、優(yōu)化思路1.用戶行為心理分析用戶進入電商平臺首頁，首先會看到廣告區(qū)鉆展圖，在鉆展圖上可以看到商品標題、商品主圖、店鋪活動等信息，而這些信息都能夠影響用戶點擊該商品的可能性。電商平臺通過AI用戶畫像等手段能夠在用戶進入電商平臺時推送給用戶可能要購買的商品，這時鉆展圖上的信息能否滿足用戶的需求就成了最為關(guān)鍵的因素。599例如，用戶早上在搜索引擎上搜索“早上吃什么水果好”“水果餐的做法”等，中午用戶再打開購物平臺時，平臺鉆展位會出現(xiàn)如圖所示的效果?？梢园l(fā)現(xiàn)推薦的商品大概率就是用戶所需要的商品，并且滿足用戶關(guān)于“水果”的目標需求。600搜索結(jié)果2.推廣圖內(nèi)容優(yōu)化分析如圖所示是之前設(shè)計的花生推廣圖，在運營人員處得知當前展示量為21034次，點擊量為1134人次，點擊率為5.3%，交易總量為12次，點擊轉(zhuǎn)化率為1.05%，相較于同行業(yè)平均水平都處在非常低的位置，對于推廣圖設(shè)計而言可能存在圖片吸引力不足、文案內(nèi)容與購買關(guān)鍵詞不符等問題。601鉆展圖就關(guān)鍵字的問題經(jīng)研究后，店鋪購買了“當季新鮮花生”“南山大集”“生花生”“花生帶殼”“包郵現(xiàn)發(fā)”五個關(guān)鍵詞，并基于用戶需求分析，得出了以下結(jié)論：●用戶希望買到的花生是帶殼花生；●用戶希望買到的花生是生花生；●用戶希望買到的是當季新鮮花生；●用戶希望買到無公害農(nóng)商品。602根據(jù)不同的需求，可設(shè)計以下不同的優(yōu)化方案：●對于需求一，用戶希望買到的是帶殼花生?！駥τ谛枨蠖?，用戶希望買到的是生花生?！駥τ谛枨笕?，用戶希望買到的是當季新鮮花生?！駥τ谛枨笏?，用戶希望賣家承擔(dān)運費，當前推廣圖沒有體現(xiàn)，優(yōu)化方案是在推廣圖上體現(xiàn)包郵信息。603三、推廣圖優(yōu)化實施在分析出用戶需求后，針對性地進行如下推廣圖優(yōu)化：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對話框中設(shè)置寬度為640像素，高度為200像素，分辨率為72像素/英寸，新建一個空白畫布，效果如圖所示。604新建空白畫布2.導(dǎo)入“項目九任務(wù)2背景”素材圖片，并居中對齊，效果如圖所示。605導(dǎo)入“項目九任務(wù)2背景”素材圖片3.導(dǎo)入“項目九任務(wù)2logo”素材圖片，并居中對齊，效果如圖所示。606導(dǎo)入“項目九任務(wù)2logo”素材圖片4.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#6f1d00，效果如圖所示。607顏色疊加5.選擇橫排文字工具，輸入文字“原產(chǎn)地打包順豐包郵”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為蘋方、4點、#6f1d00。6.選擇橫排文字工具，輸入文字“南山甄選紅皮花生”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、10點、#f6f1d00，效果如圖示。608輸入文字17.選擇矩形工具，在工具屬性欄中設(shè)置填充為#f6f1d00，繪制170像素×20像素的矩形，效果如圖所示。609繪制矩形8.選擇橫排文字工具，輸入文字“吃花生還是吃當季的好”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、11點、#bb7333，效果如圖所示。610輸入文字29.選擇橫排文字工具，輸入文字“立即搶購＞＞”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、4點、#dc0f0f，最終效果如圖所示。611最終效果612學(xué)習(xí)目標1.熟悉并掌握詳情頁優(yōu)化的方法。2.能夠分析詳情頁的修改思路。3.能夠?qū)υ斍轫撨M行優(yōu)化。613任務(wù)引入張偉、王平在完成推廣圖優(yōu)化后，下一個任務(wù)就是詳情頁優(yōu)化，他們通過網(wǎng)絡(luò)查找相關(guān)資料，并找專業(yè)老師指導(dǎo)通過店鋪數(shù)據(jù)優(yōu)化詳情頁的思路和方法。任務(wù)分析詳情頁的作用是促成用戶下單，對詳情頁進行優(yōu)化可以提升店鋪的成單率，這里可以參考的指標是最多的，但也是最難調(diào)整的。614相關(guān)知識一、基礎(chǔ)知識在優(yōu)化詳情頁之前，需要先了解與其相關(guān)的數(shù)據(jù)。1.平均停留時長平均停留時長是指在店鋪內(nèi)某一頁面的平均停留時間，這一頁面一般指首頁或者商品詳情頁。615影響停留時長的主要因素有：●創(chuàng)意：好的創(chuàng)意能夠吸引用戶的關(guān)注，并產(chǎn)生購物的沖動?！裆唐氛故荆涸斍轫撝猩唐氛故痉椒ê瓦壿嫳仨毞嫌脩舻男枨?。●文案：好的文案能夠為用戶創(chuàng)造使用場景和需求，可以促進用戶成單。●體驗：網(wǎng)店視覺設(shè)計必須符合用戶瀏覽習(xí)慣、縮減用戶檢索時間，以此提升用戶主動停留時長，促進用戶成單。6162.瀏覽量瀏覽量是指用戶進入店鋪不同頁面的次數(shù)，人均瀏覽量為用戶進入店鋪不同頁面的平均次數(shù)。瀏覽量一般與以下因素有關(guān)：（1）詳情頁好的詳情頁能夠增加用戶瀏覽量和停留時長。（2）營銷策略銷售策略的應(yīng)用也可以提升瀏覽量，如在上衣的詳情頁內(nèi)搭配褲子的鏈接，就能夠很好地提升用戶瀏覽量。人均瀏覽量與主圖、詳情頁、文案、營銷策略等都存在直接關(guān)聯(lián)，人均瀏覽量高的店鋪往往轉(zhuǎn)化率高，客單價也高，復(fù)購率亦然。6173.轉(zhuǎn)化率轉(zhuǎn)化率是指成單人數(shù)與進店人數(shù)的比率，計算方法為：轉(zhuǎn)化率=（成單人數(shù)/進店人數(shù)）×100%。影響轉(zhuǎn)化率的主要因素有：●商品描述：商品展示圖片與描述很大程度上決定了轉(zhuǎn)化率的高低?！衲繕擞脩簦旱赇伒亩▋r和定位必須符合目標用戶的需求?！裨u價：評價對于店鋪是尤為重要的，直接影響用戶對店鋪的好感度，對于成單率而言是核心的指標，特別是負面評價?！窨头嚎头τ诔蓡蔚淖詈笠徊狡鸬街陵P(guān)重要的作用。6184.跳失率跳失是指用戶進入店鋪后沒有前往下一個頁面也沒有成單的訪問。跳失率是指跳失占總訪問人次的比率。跳失率越高，證明店鋪與目標用戶群之間的兼容性越差，或者沒有體現(xiàn)出商品特性，缺乏吸引力。解決跳失率高一般有以下方法：（1）提升商品展示關(guān)聯(lián)性跳失率高有一種情況是商品價格、主圖足夠吸引用戶的注意，但是詳情頁存在與主圖關(guān)聯(lián)性差的問題，或者主圖存在虛假宣傳引流的問題，因此增加商品主圖與詳情頁的關(guān)聯(lián)性，可以有效降低跳失率。619（2）優(yōu)化詳情頁面跳失率高的另一種情況是商品主圖將用戶吸引進店鋪，但是詳情頁不能解決用戶的問題，或者無法引起其購買欲望，因此優(yōu)化詳情頁是一個很好的解決辦法。（3）優(yōu)化頁面結(jié)構(gòu)跳失率高還有一種情況是用戶在進入店鋪后，找不到需要進一步了解的頁面或者店鋪主頁、活動頁等，讓用戶不得不轉(zhuǎn)向其他店鋪。因此，好的店鋪頁面結(jié)構(gòu)能方便用戶在店鋪內(nèi)瀏覽商品，增加瀏覽量。620二、優(yōu)化思路1.詳情頁注意事項一個商品的轉(zhuǎn)化能力除與價格、銷量、評價等有關(guān)外，還與詳情頁有很大關(guān)系，用戶會通過詳情頁對商品進行了解并最終下單。設(shè)計并制作一個詳情頁需注意以下幾點：●以用戶為中心：詳情頁不能完全根據(jù)店鋪自我喜好想當然地進行設(shè)計，而是要根據(jù)用戶群和商品特點進行設(shè)計。621●設(shè)計風(fēng)格統(tǒng)一：詳情頁要與主圖、商品標題相契合，必須真實地介紹出商品的屬性?！駵蚀_定位商品：根據(jù)店鋪商品以及對市場調(diào)查結(jié)果的分析，精準定位商品的消費群體?！裢诰蛏唐焚u點：整理出用戶所關(guān)注的問題、同品的優(yōu)缺點，以及自身商品的特點、優(yōu)勢，針對消費群體挖掘出本店商品的賣點。●排版要讓用戶滿意：詳情頁要按照正常的瀏覽習(xí)慣順序進行排版，不同類別商品排序會不一樣，可以通過參考同類優(yōu)秀店鋪熱銷商品詳情頁制作順序來優(yōu)化自己的詳情頁。6222.用戶行為心理分析如圖所示是之前設(shè)計的詳情頁，在運營人員處得知當前該頁面平均停留時長為29秒，瀏覽量為118人次，轉(zhuǎn)化率為0.14%，跳失率為58.2%，相較于同行業(yè)平均水平都處在非常低的位置，對于詳情頁設(shè)計而言可能存在風(fēng)格不統(tǒng)一、文案表達不清楚、排版不符合瀏覽習(xí)慣等問題。623詳情頁624除數(shù)據(jù)反饋出來的問題外，還需要從用戶關(guān)心的點、目前詳情頁不足的點和優(yōu)化改進的方法三個方面來考慮優(yōu)化思路，詳情頁的具體修改思路如下：●增加“壞果全賠”信息；●以價格便宜作為賣點；●以包裝精美作為賣點；●以個頭比較大作為賣點；●以果子是自然熟，綠色健康無污染作為賣點。625三、詳情頁優(yōu)化實施在分析出用戶需求后，針對性地進行如下詳情頁優(yōu)化：1.執(zhí)行菜單欄中的“文件＞新建”命令，在彈出的對話框中設(shè)置寬度為750像素，高度為7340像素，分辨率為72像素/英寸，新建一個空白畫布，效果如圖所示。2.導(dǎo)入“項目九任務(wù)3草莓1”素材圖片，并居中對齊，效果如圖所示。3.導(dǎo)入“項目九任務(wù)3logo”素材圖片，將其居中對齊，效果如圖所示。626導(dǎo)入“項目九任務(wù)3草莓1”素材圖片新建空白畫布導(dǎo)入“項目九任務(wù)3logo”素材圖片6274.執(zhí)行“圖層樣式＞顏色疊加”命令，將logo改為#b73044，效果如圖所示。顏色疊加6285.選擇橫排文字工具，輸入文字“南山草莓新鮮現(xiàn)摘草莓”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、72點、#b73044，效果如圖所示。輸入文字16296.選擇矩形工具，在工具屬性欄中設(shè)置填充為#???，繪制390像素×40像素的矩形，如圖所示。7.執(zhí)行“圖層樣式＞外發(fā)光”命令，為“矩形1”添加外發(fā)光。繪制矩形16308.選擇橫排文字工具，輸入文字“新鮮直達·美味直達”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、24點、#5a4217，效果如圖所示。輸入文字26319.選擇矩形工具，在工具屬性欄中設(shè)置填充為#e84059，繪制235像素×52像素的矩形，效果如圖所示。繪制矩形263210.選擇橫排文字工具，輸入文字“南山草莓”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、35點、#???，效果如圖所示。輸入文字363311.選擇橫排文字工具，輸入文字“蜜汁美味不可擋趕快來嘗鮮～～”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、72點、#b73044。12.選擇橫排文字工具，輸入文字“生活在北緯36.6°的溫帶季風(fēng)氣候，這一生都在最宜居環(huán)境中，天生贏在起跑線”“充足陽光豐富的降雨量適宜的地理環(huán)境特別適合草莓生長”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、28點、#b73044，效果如圖所示。輸入文字463413.選擇矩形工具，在工具屬性欄中設(shè)置填充為#b8b8b8，繪制668像素×500像素的矩形，如圖所示。繪制矩形363514.導(dǎo)入“項目九任務(wù)3草莓2”素材圖片，并居中對齊，效果如圖所示。導(dǎo)入“項目九任務(wù)3草莓2”素材圖片63615.選擇矩形工具，在工具屬性欄中設(shè)置填充為#e84059，繪制750像素×1300像素的矩形，效果如圖所示。繪制矩形463716.選擇橫排文字工具，輸入文字“原產(chǎn)地發(fā)貨滋味新鮮如初”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、70點、#???。17.導(dǎo)入“項目九任務(wù)4裝飾”素材圖片，并居中對齊。18.選擇橫排文字工具，輸入文字“原產(chǎn)地發(fā)貨，避免二次包裝，不破壞細胞壁，不流失組織液，做到保持剛剛從樹上摘下來的口感，像當?shù)厝四菢酉碛迷兜男迈r?！保诠ぞ邔傩詸谥性O(shè)置字體、字體大小、文本顏色分別為思源黑體、36點、#???，效果如圖所示。638輸入文字563919.執(zhí)行“圖層樣式＞投影”命令，為上述文字添加投影，效果如圖所示。添加投影64020.選擇橢圓工具，在工具屬性欄中設(shè)置填充為#b73044，繪制135像素×135像素的橢圓，效果如圖所示。繪制橢圓64121.選擇橫排文字工具，輸入文字“高山生長”，在工具屬性欄中設(shè)置字體、字體大小、文本顏色分別為思源黑體、36點、#???，如圖所示。輸入文字664222.執(zhí)行“