《網(wǎng)店視覺營銷設計》 課件全套 李永明 模塊1-7 認識網(wǎng)店視覺營銷設計崗位 - 淘寶天貓網(wǎng)店視覺設計綜合實訓

新形態(tài)活頁式教材和融媒體一體化教學《網(wǎng)店視覺營銷設計》網(wǎng)店“視覺營銷設計”崗位的主要工作內(nèi)容就是從事視覺設計。本崗位緊跟產(chǎn)業(yè)發(fā)展趨勢和電子商務行業(yè)人才需求，有效銜接“1+X

網(wǎng)店運營推廣”職業(yè)技能等級證書（初級）

中網(wǎng)店裝修工作領域的技能要求；并立足課堂教學，通過將“電子商務技能”大賽“視覺營銷”模塊的資源轉(zhuǎn)化課堂教學內(nèi)容的有益補充，將課程教學和職業(yè)技能競賽、“1+X”證書考試等進行有機融合，實現(xiàn)“崗課賽證”的融合統(tǒng)一?！耙曈X營銷設計”崗位注重知識、

技能、

素養(yǎng)相互銜接，培養(yǎng)從員者的視覺營銷能力，突出電子商務專業(yè)特色，服務企業(yè)人才需求，能助力經(jīng)濟社會高質(zhì)量發(fā)展?！半娮由虅占寄堋奔寄艽筚愔R點要求：視覺營銷模塊（文案策劃、視覺識別（VI）、商品圖片等）。“網(wǎng)店運營推廣”1+X證書知識點要求：網(wǎng)店裝修模塊（店鋪專屬

VI

的概念、

色彩的搭配原則、

字體的選擇原則等）THANK

YOU（一）任務工單任務目的：了解視覺營銷設計的定義，認識視覺營銷設計的工作范疇，明確網(wǎng)站美工人員應具備的素養(yǎng)。任務描述：利用京東、天貓等行業(yè)類主要網(wǎng)絡購物平臺網(wǎng)店素材，了解網(wǎng)站美工崗位主要完成的工作內(nèi)容，培養(yǎng)美工能力。知識目標：了解視覺營銷設計的定義、工作范疇，學習如何做一名合格的視覺營銷設計師。能力目標：能根據(jù)視覺營銷設計崗位工作內(nèi)容，培養(yǎng)視覺營銷設計人員設計理念和美工素養(yǎng)。思政元素：在培養(yǎng)和樹立美工設計理念時，樹立正確的美工崗位職業(yè)觀，培養(yǎng)團隊合作意識，感受中華民族五千年歷史文化在視覺營銷設計設計中的優(yōu)美體現(xiàn)。（二）任務情境菲菲準備去應聘一家知名網(wǎng)店的視覺營銷設計崗位，為了增加應聘成功的概率，參加了一場入職培訓。培訓第一天，菲菲就直接提問培訓師：“老師，我已經(jīng)學過Photoshop圖像處理軟件了，可以直接做網(wǎng)店視覺設計師崗位的相關工作吧？我的月薪能拿到多少？”（三）任務解析在培訓師帶領下，一起梳理“網(wǎng)絡購物”的優(yōu)勢和劣勢，弄清楚網(wǎng)店視覺營銷設計崗位是干什么的，在網(wǎng)店經(jīng)營中起什么作用，進而形成正確的職業(yè)觀。調(diào)查網(wǎng)店視覺營銷設計師的薪酬，起薪和兩三年后月薪層級的薪資差異。（四）知識準備知識準備一 什么是視覺營銷設計網(wǎng)店視覺營銷設計師是網(wǎng)店頁面編輯美化工作者的統(tǒng)稱，主要負責網(wǎng)店店鋪的裝修設計工作。屬于IT行業(yè)的一種職業(yè)崗位。隨著網(wǎng)絡視覺營銷的發(fā)展壯大，網(wǎng)店視覺設計師的市場需求會日益增多，這是一項很穩(wěn)定有前途的職業(yè)。視覺營銷設計的工作離不開軟件工具，一般會用到Photoshop（簡稱PS）、Dreamweaver（簡稱DW）、illustrator（簡稱AI）、CINEMA

4D（簡稱C4D）等軟件。其中，PS通常被用來處理產(chǎn)品圖片和素材，DW常被用于編寫網(wǎng)頁代碼、添加圖片鏈接，AI用于矢量圖繪制，C4D常被用來制作一些三維效果。（四）知識準備知識準備二 視覺營銷設計主要工作內(nèi)容本崗位工作主要包括：負責店鋪的整體形象設計，包括風格設計、店鋪展示、底部欄設計、主頁設計等；負責店內(nèi)產(chǎn)品裝飾設計，包括產(chǎn)品擺放、產(chǎn)品圖片處理、主圖/首圖設計、詳情頁設計等；負責活動和宣傳所需的頁面設計工作，包括海報設計、直通車/鉆展圖設計、活動時的店鋪裝修等；此外，有些店鋪網(wǎng)店視覺設計師還需要負責文案編撰、產(chǎn)品拍攝甚至是產(chǎn)品上架等工作。（五）任務實施菲菲和團隊伙伴，在培訓師的指導下，一起分工合作，在互聯(lián)網(wǎng)上檢索和整理中國網(wǎng)絡購物市場的相關數(shù)據(jù)資料，并進行匯總和分析。根據(jù)國家統(tǒng)計局發(fā)布的統(tǒng)計數(shù)據(jù)，2022年我國網(wǎng)上零售額達13.79

萬億元，同比增長4%。跨境電商進出口額2.11

萬億元，同比增長9.8%。重點監(jiān)測電商平臺累計直播場次超過

1.2

億場，直播商品超過9500

萬個，累計觀看超過

1.1億人次。這些數(shù)據(jù)顯示網(wǎng)絡購物成為日常生活購物的重要場景。（五）任務實施步驟一 整理中國網(wǎng)絡購物市場的發(fā)展數(shù)據(jù)通過網(wǎng)絡搜索，完成以下2022年度數(shù)據(jù)分析：1.網(wǎng)絡零售品類TOP3和銷售額占比；2.網(wǎng)絡零售增速TOP3和上一年度對比增速數(shù)據(jù)；3.網(wǎng)絡零售主要平臺（至少5個）；根據(jù)整理的數(shù)據(jù)，填寫表相應單元格：（五）任務實施步驟二 調(diào)研視覺營銷設計主要工作內(nèi)容菲菲和團隊伙伴，在培訓師的帶領下，認真地學習美工的相關知識，上網(wǎng)搜索什么是視覺營銷設計，討論用戶在網(wǎng)購和實體店中購物體驗的差異。在學習的過程中，菲菲深深地體會到網(wǎng)店視覺設計崗位的重要性。視覺營銷設計的主要任務，就是讓店鋪更美觀，更容易被顧客所關注到。視覺設計是網(wǎng)店運營的左手（轉(zhuǎn)化率），網(wǎng)店推廣是網(wǎng)店運營的右手（流量），視覺設計和推廣對網(wǎng)店運營都非常重要。通常情況下，對提高全店成交轉(zhuǎn)化率的主要因素有：寶貝圖文細節(jié)有吸引力；相比同類寶貝，價格、運費便宜；相比同類寶貝，店鋪信用等級較高、客服服務到位、買家評價較好：店鋪裝修、頁面布局美觀易用。這也說明，網(wǎng)店視覺設計對提高成交轉(zhuǎn)化率有非常重要的作用，是網(wǎng)店視覺營銷的關鍵。（五）任務實施步驟二 調(diào)研視覺營銷設計主要工作內(nèi)容菲菲對網(wǎng)店運營的主要崗位進行了檢索和整理，并填寫表（五）任務實施步驟二 調(diào)研視覺營銷設計主要工作內(nèi)容整理美工專員的日常工作內(nèi)容：①

規(guī)劃店鋪及素材：要對整個店鋪頁面、麥材及架構(gòu)進行規(guī)劃；②

商品寶貝拍攝（或配合專業(yè)攝影師完成拍攝）：對新上架商品拍攝，拍攝好每個產(chǎn)品的主圖以及詳情頁細節(jié)等圖片；③ 圖片美化工作：使用Photoshop

等平面設計軟件對圖片進行美化；④

主圖、詳情頁設計：制作出主圖、詳情頁圖文，按照消費者購買心理合理排版詳情頁圖文；⑤

店鋪整體形象設計和更新。（五）任務實施步驟二 調(diào)研視覺營銷設計主要工作內(nèi)容根據(jù)互聯(lián)網(wǎng)上發(fā)布的視覺營銷設計招聘要求，分別將自己認為有價值的20條招聘信息（需要有詳細的任職條件、如：學歷、工作經(jīng)驗、需具備的知識及操作技能）整理到文檔中，然后一起討論甄別，留下符合需求的招聘信息，整理出視覺營銷設計崗位最重要的10條要求。，、（五）任務實施步驟三 整理視覺營銷設計崗位分級和薪酬根據(jù)步驟二對視覺營銷設計人員招聘信息的梳理，培訓師要求菲菲，根據(jù)招聘崗位的要求不同，將視覺營銷設計崗位分成三個層次并梳理每個層次的崗位要求和薪資待遇。通過大型招聘類網(wǎng)站如58同城、BOSS直聘前程無憂、獵聘網(wǎng)、智聯(lián)招聘等，了解視覺營銷設計職位需求信息，崗位要求，薪酬待遇等相關內(nèi)容。（五）任務拓展2020年以來，習近平總書記在不同場合多次就發(fā)展電子商務作出重要指示，對發(fā)展農(nóng)村電商、跨境電商、絲路電商等提出要求，明確指出電子商務是大有可為的。黨的十九屆五中全會指出，要發(fā)展數(shù)字經(jīng)濟，堅定不移建設數(shù)字中國。電子商務作為數(shù)字經(jīng)濟中規(guī)模最大、

表現(xiàn)最活躍、發(fā)展勢頭最好的新業(yè)態(tài)新動能，網(wǎng)店運營推廣是電子商務新發(fā)展格局藍圖中非常重要的一環(huán)，必將在暢通國內(nèi)大循環(huán)，促進國內(nèi)國際雙循環(huán)中發(fā)揮重要作用。請根據(jù)各主要招聘網(wǎng)站的“網(wǎng)店運營推廣”職位招聘信息，整理運營推廣專員的主要崗位職責。THANK

YOU（一）任務工單任務目的：了解視覺營銷設計的技能要求，認識視覺營銷設計常用的工具軟件有哪些，明確網(wǎng)站美工人員應具備的技能素質(zhì)。任務描述：觀察和分析京東、天貓等行業(yè)內(nèi)主要網(wǎng)絡購物平臺網(wǎng)店，了解視覺營銷設計崗位需要的專業(yè)技能，完成日常工作需要使用的工具軟件主要特點。知識目標：視覺營銷設計常用工具軟件的基本操作和適用場景。能力目標：能根據(jù)視覺營銷設計崗位技能需要，培養(yǎng)視覺營銷設計人員工具軟件應用能力和綜合設計能力。思政元素：樹立正確的視覺設計崗位職業(yè)技能價值觀，正確認識視覺設計崗位常用工具軟件國產(chǎn)替代的重要性，培養(yǎng)國產(chǎn)軟件的正版化應用意識。（二）任務情境菲菲和團隊伙伴，在培訓師的帶領下，已經(jīng)了解視覺營銷設計的崗位要求和職業(yè)上升路徑。菲菲向培訓師提問，要成為一名成功的視覺營銷設計師，我需要學習哪些知識，會哪些技能？我現(xiàn)在對Photoshop比較熟悉，還需要精通哪些工具軟件？培訓師說：“每家企業(yè)對視覺營銷設計師的招聘條件不盡相同，我們可以做個統(tǒng)計，從企業(yè)的崗位需求中提煉視覺設計的知識清單?！狈品坪蛨F隊成員通過對招聘信息進行分析和梳理，整理出視覺設計知識清單，確定熟練的視覺營銷設計師需要具備哪些知識和技能。（三）任務解析漂亮恰當?shù)囊曈X設計可以延長買家在網(wǎng)店的停留時間，買家瀏覽網(wǎng)頁時不易疲勞，自然就會細心瀏覽店鋪。合理的規(guī)劃和精心的設計可以有效地吸引和留住買家，從而實現(xiàn)提高銷量的目的。視覺設計師要學會用Photoshop這個軟件進行網(wǎng)店及網(wǎng)店元素的設計和相關圖片的處理，一切設計的目標都是為了銷售！以下兩個店鋪的首頁，清晰地展示了精心設計的店鋪首頁和簡單制作的店鋪首頁的區(qū)別，也提示我們合適的設計工具對展現(xiàn)效果的重要影響。兩個店鋪制作效果如圖：（四）知識準備知識準備一

視覺營銷設計的技能要求優(yōu)秀的視覺營銷設計從業(yè)者，一般來說，應具備以下基本的技能要求。①

圖片處理技能。電商平臺上的商品圖片是吸引消費者的重要因素之一，因此網(wǎng)店視覺設計師需要掌握圖片處理技能，包括剪裁、調(diào)整大小、調(diào)整顏色、去除背景等。同時，還需要了解各種不同圖片格式的特點和應用場景，如

JPG、PNG、GIF

等。②

平面設計技能。視覺營銷設計師需要具備一定的平面設計技能，包括色彩搭配、排

版、字體選擇等。這些技能可以幫助電商美工設計出美觀、易讀、易懂的頁面布局和推廣圖。③

熟

練

使

用

設

計

軟

件

。

視覺設計師需要熟練掌握設計軟件，如 Photoshop、Illustrator、InDesign

等。這些軟件可以幫助視覺設計師更好地處理圖片、設計頁面和推廣圖。（四）知識準備知識準備一

視覺營銷設計的技能要求④

熟悉各電商平臺。視覺設計師需要熟悉不同電子商務平臺的特點和規(guī)則，如淘寶、天貓、京東、拼多多等。這些平臺有不同的圖片尺寸、廣告位規(guī)格等，以及各平臺的移動APP

的規(guī)格要求，設計師需要根據(jù)平臺要求進行設計。⑤

溝通能力。視覺營銷設計師需要與團隊其他成員進行良好地溝通，如和運營人員、客服人員、產(chǎn)品經(jīng)理等。溝通能力可以幫助設計師更好地理解需求，設計出符合要求的作品。⑥

數(shù)據(jù)分析能力。商品主圖的點擊率和頁面的停留時間，是視覺營銷設計師的主要考核指標。所以美工人員應有一定的數(shù)據(jù)分析，來獲得什么樣的圖更有效，可以提高工作能力。（四）知識準備知識準備二

視覺營銷設計常用的工具軟件視覺營銷設計崗位，在完成如店標、店招、網(wǎng)店首頁、商品主圖等設計與制作時，一般常用的工具軟件有以下這些，熟練掌握這些軟件的使用，對提高設計水平和工作效率，有非常重要的幫助。Photoshop。簡稱PS，目前常用的版本有Photoshop

CS6、Photoshop

CC2015、Photoshop

2020

等，本書的美工設計與制作以

2020

版為基礎，所有作品案例的設計和制作，主要使用本軟件實現(xiàn)。它是由美國Adobe公司開發(fā)和發(fā)行的圖像處理軟件，主要應用在處理像素構(gòu)成的數(shù)字圖像，是網(wǎng)店視覺設計主要使用的工具軟件，如圖：（四）知識準備知識準備二

視覺營銷設計常用的工具軟件2. Dreamweaver。簡稱

DW，Dreamweaver

是

Adobe

公司推出的一款網(wǎng)頁設計軟件，它提供了一個可視化的頁面編輯器，同時也支持手動編輯

HTML、CSS

和JavaScript代碼。Dreamweaver

擁有許多功能和工具，可以幫助用戶輕松創(chuàng)建響應式網(wǎng)頁、應用程序和移動應用程序。店鋪裝修時，想要頁面呈現(xiàn)更多個性化內(nèi)容，動圖效果以及交互內(nèi)容，那么就要通過代碼來實現(xiàn)，而代碼的編輯就要在Dreamweaver

軟件來完成，如圖：（四）知識準備知識準備二

視覺營銷設計常用的工具軟件3. Illustrator。簡稱

AI，是Adobe公司推出的一款矢量圖形制作軟件，廣泛應用在印刷出版、海報書籍排版、插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等。網(wǎng)店視覺設計使用AI 軟件時，主要用于一些圖標的制作，海報藝術(shù)文字的創(chuàng)意制作等。AI軟件儲存的圖片是矢量格式，不存在失真的問題，店鋪裝修通常也會涉及到很多AI格式的素材需要編輯，然后輸出其他相應文件格式進行應用，如圖：（四）知識準備知識準備二

視覺營銷設計常用的工具軟件4. CINEMA

4D。簡稱C4D，是德國Maxon Computer推出的一款3D動畫軟件，它可以實現(xiàn)工業(yè)設計、平面創(chuàng)意海報設計、電子產(chǎn)品海報設計、欄目包裝動畫等。網(wǎng)店產(chǎn)品三維展示是未來的趨勢，類似C4D此類軟件在網(wǎng)站美化中的應用會越來越廣泛，如圖：（五）任務實施步驟一

認識Photoshop2020版工作界面打開Windows10“開始”菜單，找到“Adobe

Photoshop

2020”菜單項，單擊啟動程序。仔細觀察并記錄2020版工作界面的構(gòu)成。（五）任務實施步驟一

認識Photoshop2020版工作界面①

標題欄。打開一個文件以后，系統(tǒng)會自動創(chuàng)建一個標題欄。在標題欄中會顯示該文件的名稱、格式、窗口縮放比例及顏色模式等信息。② 菜單欄。菜單欄位于軟件界面的最上方，包含了

Photoshop

所有的功能。用戶可選擇各菜單項下的命令來完成各種操作和設置。③

工具箱。工具箱默認位于工作界面的左側(cè)，包含了

Photoshop

的常用工具。部分工具按鈕的右下角帶有一個黑色小三角形標記，表示這是一個工具組，將鼠標指針移到工具圖標上，單擊鼠標右鍵可展開隱藏的工具。選擇工具箱中的工具后，一般需要在工作區(qū)中進行操作。（五）任務實施步驟一

認識Photoshop2020版工作界面④

屬性欄。在工具箱中選擇任意工具后，位于菜單欄下方的屬性欄中將顯示當前工具的相應屬性和參數(shù)，用戶可對其進行更改和設置。⑤

面板區(qū)。面板區(qū)位于軟件界面的右側(cè)，在初始狀態(tài)下，面板區(qū)中一般會顯示顏色、屬性、圖層等多個常用面板。這些面板主要用于配合圖像的編輯、控制及參數(shù)設置等操作。面板區(qū)中的面板可執(zhí)行“窗口”菜單下的命令來進行有針對性的選擇顯示。⑥

狀態(tài)欄。狀態(tài)欄位于工作界面的最底部，可以顯示當前文檔的大小、尺寸、當前工具和窗口縮放比例等信息。單擊狀態(tài)欄中的三角圖標可設置狀態(tài)欄所顯示內(nèi)容。⑦

編輯區(qū)。工具箱右側(cè)中部最大的區(qū)域是編輯區(qū)，打開或創(chuàng)建的文檔都在此區(qū)域顯示。（五）任務實施步驟一

認識Photoshop2020版工作界面認識

Photoshop

2020

版工具箱上各工具的作用，并和舊版進行對比。根據(jù)已學習過的知識，填寫表（五）任務實施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標簽新建文檔，輸入標題：促銷標簽，設置寬度：230像素，高度：230像素，分辮率：72像素/英寸，顏色模式：RGB顏色，背景內(nèi)容：透明。（五）任務實施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標簽2.

新建圖層，命名為“撕邊正圓”。設置前景色“#aa313f”，使用“圓形工具”，在屬性欄，選擇“路徑”，在畫布上繪制寬

200

像素，高

200

像素的正圓形路徑，并使用“路徑選擇工具”，將路徑移動到圖布居中位置，如圖。（五）任務實施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標簽打開“窗口”菜單，選擇“畫筆”，在“畫筆”列表中，選擇常規(guī)畫筆中“硬邊圓”。在“窗口”菜單，選擇“畫筆設置”，大?。?0像素，間距：100%，其它保持默認，在畫筆示例區(qū)，曲線已變成緊密相連的一串正圓，如圖在“圖層”面板，“撕邊矩形”圖層，切換到“路徑”，指向工作路徑，右單擊，在彈出菜單中選擇“描邊路徑”，在彈出對話框中，選擇工具“畫筆”，單擊“確定”，如圖

1.2.11所示。1.2.11（五）任務實施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標簽指向工作路徑，右單擊，在彈出菜單中選擇“填充路徑”，在彈出對話框中，內(nèi)容“前景色”，單擊“確定”。在“路徑”面板，刪除工作路徑。如圖

1.2.12

所示。3. 選擇“橢圓”工具，新建兩個圖層，在畫布中間分別繪制高寬為

180

像素、170

像素的兩個正圓，無填充，白色描邊

1

個像素，實線。移動到合適位置，如圖

1.2.12

所示效果。1.2.12（五）任務實施步驟二

使用Photoshop2020版制作網(wǎng)店促銷標簽4. 新建

3

個文字圖層，依次是“8”、“折”、“正品包郵”，設置合適的字體、顏色、字號，并參考樣例，擺放在“撕邊正圓”的合適位置。如圖所示。5.

打開“文件”菜單，選擇存儲為“促銷標簽.jpg”，在“JPEG

選項”中，品質(zhì)設置為“8”，一般即可保證圖片的品質(zhì)，也能適當減小文件容量。也可以保存為

PNG格式，可以保留透明背景，后期疊加到有較復雜背景顏色的圖片時有更好的效果。（五）任務實施步驟三

分析推廣圖設計優(yōu)點和創(chuàng)新在網(wǎng)店推廣中，商品及活動等信息，大多數(shù)都是通過營銷推廣圖傳遞給買家，網(wǎng)店在投放廣告前，就會制定明確的目標。為達到預期的推廣效果，準確傳達推廣信息是推廣圖設計的首要任務。推廣圖一般會呈現(xiàn)商品相關的信息，包括：商品價格、折扣、活動信息、銷量、商品圖片等，合理的設計會極大提升潛在買家的信息認知度。下表提供了三張視覺營銷設計效果圖，請對這三張推廣圖進行分析并填寫表。（六）任務拓展任選以下任一款風格促銷標簽，完成設計和制作。效果可以參考圖。THANK

YOU新形態(tài)活頁式教材和融媒體一體化教學《網(wǎng)店視覺營銷設計》視覺設計師一般是指對平面、

色彩、

基調(diào)、

創(chuàng)意等進行處理的技術(shù)人才。網(wǎng)店視覺設計師特指對網(wǎng)店網(wǎng)店商品風格與色彩的搭配、

字體的正確選擇進行處理的技術(shù)人才。

消費者可以通過精美的排版、

字體設計、

色彩搭配,

更直觀方便地看到頁面的重點,

延長在網(wǎng)店的停留時間,從而增加網(wǎng)店的流量和商品的銷量。學生通過本模塊的學習，可以了解并掌握商品調(diào)色、字體運用、視覺構(gòu)圖、商品構(gòu)圖及文案撰寫等基本技能?！半娮由虅占寄堋奔寄艽筚愔R點要求：視覺營銷模塊（文案策劃、

視覺識別（VI）、商品圖片等）?！熬W(wǎng)店運營推廣”1+X證書知識點要求：網(wǎng)店裝修模塊（店鋪專屬

VI

的概念、

色彩的搭配原則、

字體的選擇原則等）THANK

YOU（一）任務工單任務目的：利用圖形圖像處理軟件，了解色彩搭配和商品調(diào)色以獨特的視覺沖擊，讓顧客留下深刻印象，提高推廣轉(zhuǎn)化率。任務描述：利用提供的奶茶飲品圖片素材，通過對產(chǎn)品色彩進行分析構(gòu)思，結(jié)合商品特點，運用Photoshop軟件完成商品主圖色彩選擇及搭配。知識目標：了解色相、明度和純度等相關概念，認識色彩平衡工具、自然飽和度工具。能力目標：能利用圖形圖像處理軟件，綜合各種視覺元素，進行色彩搭配與商品調(diào)色。思政元素：中國傳統(tǒng)節(jié)日主要有春節(jié)、元宵節(jié)、清明節(jié)、端午節(jié)、中秋節(jié)、重陽節(jié)等，傳承的是中華民族優(yōu)秀歷史文化，紅色是中國人最喜歡在節(jié)日使用的色彩。（二）任務情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)主圖的顏色搭配并優(yōu)化商品顏色屬性。通過這個重要的環(huán)節(jié)，獲得巨大的流量，進而提高網(wǎng)店的銷售額。（三）任務解析根據(jù)提供的店鋪主圖PSD文件，調(diào)整各個圖層的顏色搭配，優(yōu)化商品的顏色。如圖2.1.1所示。通過賣點文案部分的色彩搭配，突出店鋪本次活動的折扣優(yōu)勢和活動期限等信息，引流消費者。效果如圖2.1.2所示。圖2.1.1商品主圖初始圖2.1.2設置顏色后的商品主圖（四）知識準備知識準備一

了解色相色相是色彩的相貌稱謂，用以區(qū)別各種不同色彩的名稱，如圖2.1.3所示。1.基本色相：紅、橙、黃、綠、青、藍、紫。2.暖色、冷色與中性色：大部分的紅、橙色相屬于暖色，給人溫暖、熱情的感覺；紅色是中華民族最喜愛的顏色，成為中國人的文化圖騰和精神皈依,代表著喜慶、熱鬧與祥和。大部分的藍色、青色等色相屬于冷色，給人寒冷、安靜的感覺。其他沒有明顯冷暖傾向的顏色屬于中性色。圖2.1.3

色相圓環(huán)圖（四）知識準備知識準備二

了解明度色彩的明度是指色彩的深淺程度，如圖2.1.4所示。不同色相的不同明度：不同的色彩具有不同的明度，任何色彩都存在明暗變化。在彩色中，明度最高的是黃色，明度最低的是紫色。紅、橙、藍、綠的明度相近，為中間明度；相同色相的不同明度：在同一色相的明度中存在深淺的變化，如藍色中由淺到深有粉藍、淡藍、天藍等明度變化。在一個畫面中如何安排不同明度的色彩也可以幫助表達不同的感情。圖2.1.4

明度展示圖（四）知識準備知識準備三

了解純度色彩的純度是指色彩中所包含某色的飽和程度。如圖2.1.5所示。它表示色彩中所含有色成分的比例，比例越大，含有色成分越多，純度越高；比例越小，含有色成分越少，純度越低。最為鮮艷、純度最高的顏色稱之為“純色”；反之，純度最低的顏色稱為“無色”的灰色。圖2.1.5

色彩純度（五）任務實施步驟一

調(diào)整背景顏色①

分析圖2.1.2所示商品色彩，進行色彩搭配構(gòu)思。在PS2020中打開圖2.1.1所示“商品主圖上色.psd”(位置：教材資源/素材文件/模塊2.1/)。②

點擊背景圖層，設置前景色為“#fcaa54”，填充前景色；選擇圖層1，填充前景色；③

選擇圓角矩形3，雙擊圖標輸入“#fcaa54”；④

選擇圓角矩形2，雙擊圖標輸入“#fcaa54”。完成后效果如圖2.1.6所示。圖2.1.6主圖添加背景色（五）任務實施步驟二

調(diào)整其他顏色①選擇形狀1雙擊圖標，填充“#f8c31b”；②選擇矩形1副本2雙擊圖標，填充“#f8c31b”；③選擇矩形1副本8雙擊圖標，填充“#c1564c”；④選擇矩形1副本雙擊圖標，填充“#ffc2b1”，最終效果如圖2.1.7所示。圖2.1.7主圖色彩設置后效果（六）任務拓展“愛尚乳飲”網(wǎng)店為了提高春節(jié)期間銷售額，決定優(yōu)化店內(nèi)主圖的顏色搭配并優(yōu)化商品顏色屬性。打開“任務拓展-自由填色主圖.psd”(位置：教材資源/素材文件/模塊2.1/)，自由填色。通過豐富色彩，吸引流量，進而提高網(wǎng)店的銷售額。圖2.1.8自由填色主圖THANK

YOU（一）任務工單任務目的：了解字體的運用和字體創(chuàng)意，根據(jù)商品屬性特點，合理選擇字體進行設計與運用。任務描述：根據(jù)網(wǎng)店活動與商品屬性特點等市場信息，利用圖形圖像處理軟件，選擇適合的字體并進行設計與運用，增加設計感，提升店鋪與商品的格調(diào)。知識目標：了解常用的字體類型，了解各類商品對應的字體選擇，提升字體設計創(chuàng)意度。能力目標：熟練掌握各類字體，并靈活應用字體創(chuàng)意在各類商品用圖和店鋪活動主題設計中。思政元素：漢字是世界上最古老的文字之一，至少有六千多年的歷史，中國漢字博大精深。（二）任務情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)商品促銷圖的字體。通過字體優(yōu)化，讓消費者對商品的品牌及屬性等內(nèi)涵產(chǎn)生共鳴。（三）任務解析根據(jù)提供的詳情頁PSD文件，調(diào)整各個圖層的字體，優(yōu)化商品的字體。優(yōu)化前如圖2.2.1所示。通過賣點文案字體優(yōu)化，突出店鋪活動的折扣優(yōu)勢和活動期限等信息引流消費者。優(yōu)化后效果如圖2.2.2所示。圖2.2.1優(yōu)化前商品圖圖2.2.2優(yōu)化后的商品圖（四）知識準備知識準備一 字體的特點字體，是指文字的外在形式特征；即文字的風格、文字的外衣。字體是文化的載體，是社會的縮影。中國漢字博大精深，經(jīng)過六千多年的演變，目前公認字體有“甲骨文，金文，小篆，隸書，楷書，行書，和草書”，這七種字體被稱為“漢字七體”，是中華文化的瑰寶。日常設計工作中，我們需要對常用風格的字體，其特點與適用情形進行區(qū)分與掌握，一般適用場景如表2.2.1所示。名稱字體特點

適用場景

宋體

字形方正、結(jié)構(gòu)嚴謹、大氣通用

是印刷行業(yè)應用得最為廣泛的一種字體。閱讀時有一種舒適醒目的感覺。在現(xiàn)代印刷中主要用于書刊或報紙的正文部分，也適用于包括電視字幕在內(nèi)的任何媒體。

黑體

穩(wěn)重、搶眼

顯示清晰

多用于標題制作，有強調(diào)的效果。另外，用清瘦型的黑體做電影、電視的字幕已被普遍接受。

楷體

清秀、柔美

帶書卷味

是近、現(xiàn)代印刷品中追求書卷味的產(chǎn)物，多用于啟蒙教材。在專業(yè)書籍中多用于主觀文字當中，也可以用作字幕。仿宋

權(quán)威、古樸

是早期中文打字機的專用字體，至今仍是紅頭文件的專用字體。印刷品中使用仿宋體體現(xiàn)權(quán)威，也常用于觀點提示性闡述。

圓體

活潑、有趣

商業(yè)常用

這類字體最初出現(xiàn)在海外商業(yè)場合，也稱線性。國內(nèi)漢字版本的圓體字比較僵硬，缺乏一定美感，不適用電視字幕。

綜藝

藝術(shù)、專業(yè)

現(xiàn)代感強

一種設計味較濃的字體，部分使用可表現(xiàn)一種藝術(shù)的時尚，過多則顯矯揉造作。

表

2.2.1

不同風格字體的適用場景（四）知識準備知識準備二

字體的創(chuàng)意1.筆畫代替法：是一種常見的字體設計創(chuàng)意方法，它采用有象征性的視覺圖形符號，讓觀眾能夠迅速理解設計理念。筆畫代替法的具體操作步驟是在原有字體的基礎上，設計師通過刪除或增加字體的某一筆畫，從而用其他形式代替或者做相應的銜接來完成字體的創(chuàng)意設計，通過強調(diào)的手法變現(xiàn)字體的內(nèi)涵。如圖（四）知識準備知識準備二

字體的創(chuàng)意2.細節(jié)添加法。是根據(jù)字體主題進行針對性的設計修飾，常常是在橫豎撇捺的筆畫端點處進行錨點添加或斷點處理。當然每個字體的筆畫有許多，不一樣的細節(jié)添加方式得到的設計作品也是風格異迥的。另外，筆畫根據(jù)不一樣的寫作主體也有一定的差別。例如，男性字字體的筆畫相對較粗，而女性字體的筆畫則比較纖細。如圖（四）知識準備知識準備二

字體的創(chuàng)意3.筆畫刪減法。是設計師在保證字體識別度的前提下，對筆畫進行減法留白處理，這種設計的前提就是確保讀者能夠識別字體。筆畫刪減法的優(yōu)點是使設計字體的文藝氣息濃厚，設計師通過留白的方式增加字體的設計性。如圖（四）知識準備知識準備二

字體的創(chuàng)意4.效果添加法。這種方法適用于項目時間緊急的情況下，設計師可以在字體庫里找到合適的字體，進行簡單的加工，就能實現(xiàn)相當不錯的效果。這種方法的具體步驟是通過運用圓角、描邊等一系列工具對原字體筆畫進行一些外形上的變化。例如，圓角工具把筆畫轉(zhuǎn)折處變直為曲，描邊工具使字體加粗或減細，傾斜工具可以加強字體的力度與動感。如圖（四）知識準備知識準備二

字體的創(chuàng)意5.符號拼接法。是通過拆解外文或標點符號獨特的筆畫裝飾，再按照漢字的字形結(jié)構(gòu)去組合。這種方法使用較多的字體是藏文、中世紀的手寫卷花體等。設計師也可以嘗試拆解其他字體的筆畫結(jié)構(gòu)，搭配幾何圖形進行新的字型重組，效果也不錯。如圖（四）知識準備知識準備二

字體的創(chuàng)意6.氛圍裝飾法。適用于各種節(jié)日，設計師在設計好的基礎字型周圍添加放射線、波點等幾何形狀，或花型，來烘托氣氛，對字體含義的表達起到輔助作用。如圖（五）任務實施步驟一

調(diào)整標題文字格式在PS中打開圖2.2.1所示“蘇打水推廣.psd”。使用文字工具點擊標題，設置圖層樣式，描邊，3像素，顏色為“#fb6c83”，使用選擇工具，點擊小標題，將小標題適當往上移。如圖2.2.9所示。圖2.2.9調(diào)整標題文字格式（五）任務實施步驟二

調(diào)整價格活動欄文字格式選中滿98元減15元，設置圖層樣式，描邊，2像素，顏色為“#000000”，使用選擇工具，點擊價格，適當往下移動。最終效果如圖2.2.10所示。圖2.2.10調(diào)整價格活動欄文字格式（六）任務拓展“愛尚乳飲”網(wǎng)店為了提高“雙十二”銷售額，決定制作獨有的“雙十二”卡通字，以便應用到網(wǎng)店促銷商品圖中。參考圖2.2.11所示制作風格獨特的卡通字體。圖2.2.11卡通字體設計THANK

YOU（一）任務工單任務目的：利用圖形圖像處理軟件，了解視覺構(gòu)圖和頁面布局；以獨特的視覺沖擊，讓顧客留下深刻印象，提高推廣轉(zhuǎn)化率。任務描述：在雜亂的畫面中，根據(jù)對畫面和商品信息的分析，提煉出合理構(gòu)圖布局，利用Photoshop2020軟件中移動、字體、選框等相關工具完成圖片的構(gòu)圖及內(nèi)容排版。知識目標：了解視覺構(gòu)圖和頁面布局的種類、對商品特點和排版的關系有初步了解。能力目標：能使用圖形圖像處理軟件；能綜合各種視覺元素進行設計；能優(yōu)化構(gòu)圖和排版。思政元素：店鋪的“滿減”活動，要符合社會主義核心價值觀中“誠信”原則。（二）任務情境“

愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定優(yōu)化店內(nèi)詳情頁圖片的視覺構(gòu)圖和頁面布局。通過重新構(gòu)圖，吸引流量，提高網(wǎng)店的銷售額。圖2.3.1詳情頁片段原圖圖2.3.2優(yōu)化后的詳情頁片段（三）任務解析根據(jù)提供的商品詳情頁的片段PSD文件，調(diào)整各個圖層的構(gòu)圖，優(yōu)化商品的排版。如圖2.3.1所示，通過賣點文案，突出店鋪本次活動的優(yōu)惠券和活動期限等信息。優(yōu)化后的詳情頁如圖2.3.2所示。店鋪贈送優(yōu)惠券，開展“滿減”活動，主要目的是促銷，吸引顧客下單。促銷活動要符合社會主義核心價值觀中“誠信”原則，不搞虛假宣傳，促進社會文明、和諧發(fā)展。（四）知識準備知識準備一 視覺構(gòu)圖畫面的構(gòu)圖是視覺藝術(shù)作品中最直接、最基本的表現(xiàn)形式之一。衡量畫面中條線、形狀的長度、寬度和角度，以及畫面元素之間的比例、間隔與關系等，是構(gòu)圖的核心。構(gòu)圖的過程需要綜合運用多種藝術(shù)技法：1. 中心構(gòu)圖法：是將主體放置在畫面中心進行構(gòu)圖。這種構(gòu)圖方式的最大優(yōu)點就在于主體突出、明確，而且畫面容易取得左右平衡的效果。（四）知識準備知識準備一 視覺構(gòu)圖水平線構(gòu)圖法：是最基本的構(gòu)圖法，以水平線條為主。水平、舒展的線條能夠表現(xiàn)出寬闊、穩(wěn)定、和諧的感覺，通常運用在湖面、水面、草原等等。垂直線構(gòu)圖法：畫面中以垂直線條為主。運用垂直線構(gòu)圖時，物品自身就符合垂直線特征，例如樹木。垂直線在人們的心里是符號化象征，能充分展示景物的高大和深度。三分構(gòu)圖法：也稱作井字構(gòu)圖法，在這種方法中，需要將場景用兩條豎線和兩條橫線分割，這樣可以得到

4

個交叉點，將畫面重點放置在

4

個交叉點中的一個即可。（四）知識準備知識準備一 視覺構(gòu)圖對稱構(gòu)圖法：按照一定的對稱軸或?qū)ΨQ中心，使畫面中景物形成軸對稱或者中心對稱。引導線構(gòu)圖法：即利用線條引導觀者的目光，使之匯聚到畫面的焦點。引導線不一定是具體的線，凡有方向的、連續(xù)的物品，都可以作為引導線?？蚣軜?gòu)圖法：將畫面重點利用框架框起來的構(gòu)圖方法，會引導觀者注意框內(nèi)景象，產(chǎn)生跨過門框即進入畫面的感受。重復構(gòu)圖法：當主體是同樣的物品，將這一群主體同時重復呈現(xiàn)的構(gòu)圖方法。單調(diào)地重復同一物體，占據(jù)整個畫面并且沒有明顯雜亂的其它物體出現(xiàn)，起到突出主體的效果。（四）知識準備知識準備二

頁面布局1.卡片式2.分屏式3.大標題式4.個性化推薦5.網(wǎng)格式6.導航標簽7.內(nèi)容輪播（四）知識準備知識準備二

頁面布局卡片式頁面布局：卡片就是交互信息的承載體，通常以一個濃縮的形式提供相關頁面內(nèi)容?？ㄆ巾撁娌季址浅＿m合在頁面上放置大量內(nèi)容，同時又使每個內(nèi)容保持鮮明。分屏式頁面布局：這種布局既指垂直拆分屏幕，也指水平拆分屏幕。是將頁面分割為均等或者不均等的兩部分，這種方式的好處就是可以將文字信息和圖像元素進行更有效的布局區(qū)分，讓信息更有條理，人們更容易閱讀。大標題式頁面布局：隨著移動端頁面設計的興起，大字體的排版設計得到了普及，大號字體在標題中特別受歡迎。較大的文本更具有易讀性，并改善了用戶體驗。個性化推薦頁面布局：通過用戶的個性化需求給其推薦符合需求的內(nèi)容。如京東、天貓等電商平臺，首頁商品流會根據(jù)購物行為數(shù)據(jù)推薦可能想買的物品。（四）知識準備知識準備二

頁面布局網(wǎng)格式頁面布局：信息被組織成網(wǎng)格，使其易于瀏覽。網(wǎng)格允許將文本、照片、視頻平均分配到頁面上，讓用戶決定每個單元的重要性。導航標簽頁面布局：導航標簽是產(chǎn)品的主要框架，其架構(gòu)分布基本都是由標簽導航來組織，讓用戶了解這款產(chǎn)品的主要功能。內(nèi)容輪播頁面布局：通常在頁面的頂部找到。一般包含與文本相結(jié)合的圖像。當空間有限時，它們用于在頁面的單個部分中顯示多個內(nèi)容。輪播允許在同一區(qū)域展示多個重要內(nèi)容輪播，非常適合在電子商務網(wǎng)站上展示特色產(chǎn)品。（五）任務實施打開“詳情頁優(yōu)化排版.psd，使用移動工具將圖2.3.1頁面布局，參考圖2.3.2的布局樣式，重新實施頁面排版，使用重排后的頁面布局合理，重點突出店鋪本次活動的優(yōu)惠券和活動期限等信息。圖2.3.2（六）任務拓展根據(jù)提供的草本精華面膜素材，合理構(gòu)圖和布局，設計和制作一張商品的介紹橫幅，要求版面設計合理，重點突出。最終制作效果如圖2.3.18所示。圖2.3.18

草本精華面膜橫幅參考效果THANK

YOU（一）任務工單任務目的：利用圖形圖像處理軟件，使用魔棒，快速選擇工具，選框工具等功能摳出商品。任務描述：利用魔棒工具和快速選擇選定商品輪廓，修改容差數(shù)據(jù)增加摳圖后商品平滑度，獲得自然無鋸齒的商品摳圖；利用鋼筆工具，在商品輪廓添加多個錨點，手動修改錨點位置，形成封閉曲線路徑，將路徑變?yōu)檫x框，去除未選中部分，獲得自然無鋸齒的商品摳圖。知識目標：了解魔棒，快速選擇工具，選框工具等功能。能力目標：能利用圖形圖像處理軟件，快速，準確，摳出商品。思政元素：背景復雜的商品摳圖需要耐心和細心，需要精益求精的“工匠精神”。（二）任務情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，上架一款新商品，需要把拍攝的商品從白底圖中摳出，便于店鋪制作新品促銷相關圖片。（三）任務解析根據(jù)提供的商品白色背景圖，如圖2.4.1所示，從中摳出商品，放置到透明背景的圖中，商品完整，無鋸齒無毛邊，效果如圖2.4.2所示。圖2.4.1

商品白底圖圖2.4.2摳出透明背景商品圖（四）知識準備知識準備一

魔棒工具魔棒工具是Photoshop中提供的一種比較快捷的摳圖工具，對于一些背景比較單一、分界線比較明顯的圖像，通過魔棒工具可以很快速的將圖像摳出。魔棒的作用是可以知道點擊區(qū)域的顏色，并自動獲取附近區(qū)域相同的顏色，使它們處于選擇狀態(tài)。利用魔術(shù)棒工具摳圖過程：①

按住Ctrl+O快捷鍵打開一張圖片，并切換到魔棒工具（快捷鍵W）；②

在選項欄里調(diào)整合適的容差大小，再對圖片進行點選，按住shift就是增加選區(qū)，按住alt是減去選區(qū)；③

右單擊找到“選擇反向”并選中（快捷鍵Ctrl+Shift+I），這樣就可以反選選區(qū)；④

按住Ctrl+J

將圖層復制出來，完成摳圖。（四）知識準備知識準備二

磁性套索工具磁性套索工具不需要按鼠標左鍵直接移動鼠標，在工具頭處會出現(xiàn)自動跟蹤的線，這條線總是走向顏色與顏色邊界處，邊界越明顯磁力越強，將首尾連接后可完成選擇，一般用于顏色與顏色差別比較大的圖像選擇。利用磁性套索工具摳圖過程：①

打開圖片，并將工具欄切換到磁性工具（快捷鍵L）；②

利用磁性工具對想要摳出來的圖片進行描線；③

首尾相接形成封閉區(qū)域，完成選區(qū)，完成摳圖。（四）知識準備知識準備三

多邊形套索工具多邊形套索工具用于框選多邊形或棱角分明圖像。利用多邊形套索工具摳圖過程：①

在工具欄中切換到工具欄切換到多邊形工具（快捷鍵L）,找到關鍵的點，用直線連接，首尾相接形成封閉區(qū)域，完成選區(qū)。②

按住Ctrl+J

將圖層復制出來，完成摳圖。（四）知識準備知識準備四

鋼筆工具利用鋼筆工具進行摳圖是一種非常常見的摳圖方式，它能做到高精度的描繪主體邊緣。利用鋼筆工具需要耐心和細心，要制作完善的店鋪美工圖，需要精益求精的“工匠精精神”，它也是我們職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)。利用鋼筆工具摳圖過程：① 點擊工具箱中的“鋼筆工具”按鈕，在選項欄中選擇矢量繪圖模式為“路徑”；② 將光標移動到圖像中圖形的邊緣，單擊鼠標左鍵即可創(chuàng)建一個錨點，接著將鼠標移動到第二個位置單擊，創(chuàng)建第二個錨點，此時兩個錨點會鏈接成一條直線路徑；③ 如果要用鋼筆工具畫曲線路徑，需要在創(chuàng)建完第二個錨點后按住鼠標左鍵不放并進行拖拽，可以繪制曲線路徑，曲線路徑的方向、弧度及形狀可以通過拖動方向線來進行控制；按住Shift鍵可以繪制水平、垂直或者以45°角為增量的直線；（四）知識準備知識準備四

鋼筆工具利用鋼筆工具進行摳圖是一種非常常見的摳圖方式，它能做到高精度的描繪主體邊緣。利用鋼筆工具需要耐心和細心，要制作完善的店鋪美工圖，需要精益求精的“工匠精精神”，它也是我們職業(yè)能力、職業(yè)品質(zhì)的體現(xiàn)。利用鋼筆工具摳圖過程：④ 當繪制曲線轉(zhuǎn)折向直線時，在轉(zhuǎn)折錨點處可以先按住Alt鍵將鋼筆工具切換到轉(zhuǎn)換點工具，然后單擊轉(zhuǎn)折位置的錨點，再繼續(xù)繪制直線路徑；⑤ 如果要在繪制過程中調(diào)整錨點的位置，可以按住Ctrl鍵切換到直接選擇工具，點擊錨點并按住鼠標左鍵進行拖動即可改變錨點的位置。隨著錨點位置的改變，路徑形狀等也發(fā)生改變；⑥ 當繪制到起始錨點位置時，光標變?yōu)榱恕颁摴P圖標帶小圓圈”的形狀后，單擊即可閉合路徑。可以按路徑轉(zhuǎn)換為選區(qū)的快捷鍵：Ctrl+Enter將該路徑轉(zhuǎn)換為選區(qū)，既可以在選區(qū)中進行摳圖。（五）任務實施使用PS打開文件“奶茶商品白底圖.jpg”

(位置：教材資源/素材文件/模塊2.4/)，點擊魔棒工具，容差設置為10，點擊圖片白色背景的部分，此時圖片中白色部分被選中。如圖2.4.3所示。打開“選擇”菜單，選擇“反選”（或快捷鍵Shift+Ctrl+I）。按住Ctrl+J

將圖層復制出來，關閉背景圖層，完成摳圖，效果如圖2.4.2所示。圖2.4.3

商品白底補選中效果（六）任務拓展某箱包網(wǎng)店新到一款拉桿箱，準備作為新品重點推廣，請將拉桿箱從實拍圖中摳出，要求摳圖完整，邊無鋸齒無毛邊?？梢跃C合運用各種摳圖方法。文件“任務拓展-行禮箱.jpg。圖2.4.4

拉桿箱摳圖素材THANK

YOU（一）任務工單任務目的：了解活動文案、商品文案等不同類別文案；了解如何根據(jù)商品及活動特點提煉相關文案。任務描述：根據(jù)三種商品的屬性特點及所在活動，通過橫向?qū)Ρ仁忻娓偲罚釤挸鰠^(qū)別于其他商品的賣點爆點，突出活動優(yōu)惠、商品賣點，創(chuàng)作出精準、吸睛的商品文案。知識目標：了解商品文案的基本構(gòu)成，對如何提煉關鍵詞有深入的認識。能力目標：熟練掌握商品及活動關鍵詞的提煉技能；熟練運用該技能對關鍵詞進行創(chuàng)意整合，撰寫出契合商品、突出賣點的優(yōu)質(zhì)文案。思政元素：文案撰寫要符合中國特色社會主義的精神文明，彰顯中國特色社會主義的顯著特征和內(nèi)在品質(zhì)。（二）任務情境“愛尚乳飲”網(wǎng)店為了提高“雙十一”銷售額，決定重新設計三款新品主圖文案。（三）任務解析根據(jù)提供的店鋪商品主圖PSD文件，優(yōu)化主圖文案。（四）知識準備商品文案優(yōu)化的主要關注點：商品的重要屬性。在商品詳情頁對商品進行描述時，一定要突出商品的重要屬性，讓顧客能清楚地了解商品的參數(shù)和適用范圍。商品優(yōu)勢。商品是網(wǎng)店的核心，因此文案創(chuàng)作必須突出產(chǎn)品的優(yōu)勢。在進行商品介紹和描述的時候，要將商品最具特色的地方和優(yōu)勢展現(xiàn)出來，用合理簡潔的文字做好介紹。為店鋪創(chuàng)作核心品牌詞。相信開設網(wǎng)店，一定有自己的想法和目標，可以方案創(chuàng)作的時候，多發(fā)揮自己的情感以及靈感，做到真誠動人。廣告用語。廣告語可以幫助店鋪樹立良好形象，但是需要注意不要過于夸張。如“小店剛剛開張，誠信經(jīng)營，做讓顧客滿意和放心的店鋪！”，通過平實的語句更能打動顧客。抓住用戶心理。店鋪的文案，都是為了能夠讓用戶看到，并獲得好的反饋，因此在文案創(chuàng)作的時候，也可以換位思考，寫出用戶喜歡和需要的內(nèi)容，進而打動顧客。商品文案撰寫量，必須體現(xiàn)中國特色社會主義的精神文明，彰顯中國特色社會主義的顯著特征和內(nèi)在品質(zhì)；努力發(fā)揮社會主義核心價值觀對精神文化產(chǎn)品創(chuàng)作傳播的引領作用。（五）任務實施“愛尚乳飲”網(wǎng)店即將要銷售豆奶、奶茶、蘇打水三款商品(素材位置：教材資源/素材文件/模塊2.5/)，現(xiàn)在為這三款新品，設計商品簡潔上口的賣點文案；并將文案用適合字體添加到商品主圖。1.豆奶賣點文案參考：①每天一杯豆奶，美容養(yǎng)顏還不餓?、谥参餇I養(yǎng)，好吸收?、蹪庥舳鼓?叫醒一天活力元氣!2.奶茶賣點文案參考：①滴滴真滋味，濃濃奶茶香!②紅茶配鮮奶,味你更精彩!③好喝的秘密全在鮮奶里面哦!3.蘇打水賣點文案參考：①蘇打水天生,養(yǎng)胃泉天成!②天然萬年，潤水又潤心解酒養(yǎng)胃蘇打水，提神養(yǎng)顏容貌美!③你是我的小蘇打,甜蜜只為你綻放!（六）任務拓展某小家電店鋪，“12.12”準備對某品牌的男式電動剃須刀進行推廣，請在圖2.5.1所示“任務拓展-新品上架文案設計.jpg中的虛線框處，設計合適的商品介紹文案，以便吸引顧客購買。文案設計完成后，請將文案以合適的方式，添加到圖片的虛線框處。圖2.5.1

剃須刀推廣圖THANK

YOU新形態(tài)活頁式教材和融媒體一體化教學《網(wǎng)店視覺營銷設計》網(wǎng)店首頁作為網(wǎng)店的門面，其作用主要是通過頁面的視覺，商品，促銷，服務等綜合氛圍，讓消費者對店鋪和產(chǎn)品有初步的了解，從而產(chǎn)生興趣和購買欲望，促進商品銷售，首頁效果是否出彩會直接影響網(wǎng)店的流量，一個完整的網(wǎng)店首頁由各個模塊組成，每個模塊都具有其獨特的功能，其中主要包括店標、店招、首頁焦點輪播圖、優(yōu)惠券、商品分類和商品促銷圖等。本章節(jié)主要任務是完成店鋪首頁的視覺營銷設計與制作。“電子商務技能”技能大賽要求：網(wǎng)店美工模塊（店標店招設計、首頁輪播圖設計）?！熬W(wǎng)店運營推廣”1+X

證書（初級）要求：PC端店鋪首頁設計與制作。THANK

YOU（一）任務工單任務目的：確定網(wǎng)店整體裝修風格，把握網(wǎng)店的主題定位，根據(jù)網(wǎng)店首頁內(nèi)容確定網(wǎng)店首頁設計方案。任務描述：重點突出春夏上新的營銷氛圍，為愛尚服飾網(wǎng)店進行網(wǎng)店首頁設計分析知識目標：了解網(wǎng)店首頁制作規(guī)范和網(wǎng)店首頁類型。能力目標：能根據(jù)活動主題，產(chǎn)品定位等元素進行網(wǎng)店首頁內(nèi)容有序安排，設計具有營銷氛圍的網(wǎng)店首頁。思政元素：培養(yǎng)學生誠信經(jīng)營，杜絕虛假宣傳行為

。（二）任務情境愛尚服飾是一家主營各類女裝、男裝、女鞋、男鞋等的綜合性服飾網(wǎng)店，準備在淘寶網(wǎng)開設第一家線上網(wǎng)店，網(wǎng)店注冊成功后，正好搭上了春夏新品上新的一波潮流，愛尚服飾準備以春夏新品上新為主題活動，進行網(wǎng)店裝修。網(wǎng)店裝修是一個持續(xù)性很強的工作，需要付出很多時間和精力去完成。優(yōu)秀的網(wǎng)店裝修不是一成不變的，它會根據(jù)商品的變化，季節(jié)的變化，促銷活動的變化而進行相應的調(diào)整，其中，首頁的裝修又是網(wǎng)店的門面，一個設計感強的首頁，不僅能提升網(wǎng)店的品質(zhì)，也會讓買家對網(wǎng)店產(chǎn)生初步信任，從而提高轉(zhuǎn)化率。本次網(wǎng)店首頁設計重點突出上新的營銷氛圍，使網(wǎng)店商品和網(wǎng)店活動整體風格相符。（三）任務解析愛尚服飾網(wǎng)店首頁設計，第一步要跟網(wǎng)店營銷人員充分溝通，根據(jù)網(wǎng)店產(chǎn)品，營銷活動等確定網(wǎng)店的整體設計風格，把握網(wǎng)店主題定位，其次是確定網(wǎng)店首頁的具體內(nèi)容，最后根據(jù)網(wǎng)店內(nèi)容來確定網(wǎng)店首頁的最終設計方案，完成整體布局。（四）知識準備知識準備一

了解網(wǎng)店首頁下圖為天美意官方旗艦店首頁，從圖3.1.1中可以看出，店招位于整個頁面頂端，下面緊接著是焦點圖，讓顧客首先了解網(wǎng)店最近的營銷活動和上新。優(yōu)惠活動區(qū)主要有網(wǎng)店滿減優(yōu)惠券，入會活動，充值折上折三部分組成，優(yōu)惠區(qū)下面是根據(jù)熱門搜索關鍵詞設置的商品分類入口，最下面一部分是商品促銷陳列區(qū)，主要突出產(chǎn)品和價格，一個完整的網(wǎng)店首頁不僅介紹了網(wǎng)店信息，網(wǎng)店活動也很好的展示了網(wǎng)店商品。（四）知識準備知識準備一

了解網(wǎng)店首頁（四）知識準備知識準備一

了解網(wǎng)店首頁（四）知識準備知識準備一

了解網(wǎng)店首頁（四）知識準備知識準備二 網(wǎng)店首頁主要內(nèi)容一個網(wǎng)店首頁的裝修好壞會直接影響網(wǎng)店的流量。布局合理，具有吸引力的網(wǎng)店首頁會無形中增加消費者的訪問深度，提高轉(zhuǎn)化率。網(wǎng)店首頁內(nèi)容一般包括店標、店招、首頁焦點圖等內(nèi)容：店招。店招位于網(wǎng)店首頁的頂端位置，用于傳遞網(wǎng)店信息，一般有LOGO標識，網(wǎng)店名稱，商品圖片，廣告語、優(yōu)惠活動、導航條等信息組成。店標。店標代表著特定的形象，是品牌傳遞過程中應用最廣泛、出現(xiàn)頻率最高的元素，是區(qū)別于其他網(wǎng)店的重要標志。店標一般位于店招內(nèi)。首頁焦點輪播圖。通常位于店招下面，是網(wǎng)店的橫幅廣告，一般用于宣傳網(wǎng)店的熱銷產(chǎn)品，網(wǎng)店活動信息等內(nèi)容，在版面設計上要足夠吸引買家的視線。通常由兩張及兩張以上的橫幅海報組成。優(yōu)惠券。是商家為了促成銷售而設置的優(yōu)惠活動，對于網(wǎng)店來說可以提高網(wǎng)店購買率，刺激買家下單，提升客單價。商品分類。一個優(yōu)秀的商品分類設計不僅可以讓買家更加方便快捷的找到自己所需要的商品，還具備了很好的商品推薦作用，同時也能方便網(wǎng)店商品的分類管理。商品促銷展示圖。相當于網(wǎng)店的櫥窗，在首頁中主要用來展示網(wǎng)店爆款產(chǎn)品，熱銷產(chǎn)品，最新單品等商品信息，讓顧客很快就能找到賣家最想推薦的產(chǎn)品，提高下單率。（四）知識準備知識準備三 網(wǎng)店首頁類型品牌型網(wǎng)店首頁。這類網(wǎng)店主要是依靠品牌形象來進行商品營銷。視覺設計大氣簡約，頁面風格與線下品牌風格基本保持一致，強調(diào)品牌LOGO和品牌名，品牌的質(zhì)量和服務，設計上反而會弱化促銷價格等的呈現(xiàn)效果，比如用比較淡的顏色、小的字體來呈現(xiàn)頁面中價格，優(yōu)惠活動等信息，重點突出品牌產(chǎn)品的價值和特色。營銷型網(wǎng)店首頁。這類網(wǎng)店在視覺設計上會更加賣力的展示營銷促銷氛圍，重點突出活動優(yōu)惠信息等，頁面效果中在字體和色彩上努力展示營銷設計，比如通過數(shù)字等形式表現(xiàn)出具體的優(yōu)惠信息，在數(shù)字的顏色，大小上都有所強調(diào)。誠信經(jīng)營，杜絕虛假宣傳行為。比如有些網(wǎng)店在做廣告時聲稱其產(chǎn)品質(zhì)量更好，價格更優(yōu)惠，但未提供任何證明，且未能提供可靠的數(shù)據(jù)支持其聲稱的優(yōu)勢，屬于虛假宣傳行為。當然，有的網(wǎng)店并沒有明確的定位，一般來說首頁都會展示產(chǎn)品優(yōu)勢和促銷信息。（四）知識準備知識準備四 網(wǎng)店首頁設計原則網(wǎng)店首頁裝修要符合網(wǎng)店的形象，有自己的品牌特色或產(chǎn)品特色；網(wǎng)店首頁裝修要選擇合適的色彩色調(diào)，注重整體頁面風格和諧搭配；網(wǎng)店首頁裝修要突出重點，比如促銷、新品、折扣等內(nèi)容，要能在短時間內(nèi)抓住客戶眼球，以快速精準的方式將重要信息直接傳達給顧客；網(wǎng)店首頁導航清晰，要讓顧客隨時能找到自己所需要的產(chǎn)品；頁面長度最好不要超過三屏，太長的頁面容易讓人失去耐性。（五）任務實施步驟一 確定網(wǎng)店的整體裝修風格網(wǎng)店的裝修風格首先體現(xiàn)在網(wǎng)店的整體色彩、色調(diào)和產(chǎn)品的風格上，第三方平臺網(wǎng)站上本身自帶多種風格可供選擇，商家可以選擇默認的網(wǎng)店模板來進行裝修，也可以根據(jù)店內(nèi)商品的特點和營銷氛圍來重新設計，使網(wǎng)店獨具特色。愛尚服飾是一家主營各類女裝、男裝、女鞋、男鞋等的綜合性服飾網(wǎng)店，本次網(wǎng)店裝修重在突出“春夏上新”的季節(jié)營銷因素，將準備上架的一批春夏裝進行促銷活動。根據(jù)“春夏上新”的活動主題，收集圖片等裝飾元素，確定視覺色彩為綠色。確定網(wǎng)店首頁類型。視覺色彩確定后，做一個什么類型的網(wǎng)店可通過調(diào)研用戶需求，品牌定位，品牌營銷等方面出發(fā)，愛尚服飾本身不是一個知名品牌，想要打開市場，營銷先行。所以本次網(wǎng)店裝修注重營造營銷氛圍，制作一個營銷型的網(wǎng)店首頁。（五）任務實施步驟二 確定網(wǎng)店首頁設計方案網(wǎng)店首頁的風格確定好后，下面要多和運營進行溝通，融入營銷思維，確定網(wǎng)店首頁各部分的內(nèi)容。1.確定網(wǎng)店首頁具體內(nèi)容。這需要美工人員和營銷人員進行詳細溝通，了解活動主題、主推產(chǎn)品、優(yōu)惠方案等內(nèi)容，然后將溝通的結(jié)果進行填表，然后確定最終設計方案功能模塊內(nèi)容要求結(jié)論活動主題主題內(nèi)容是什么？文案的主次順序是這樣的？活動的起止時間是什么？需要重點展示的元素是什么？主推產(chǎn)品主推產(chǎn)品有哪些？它們分別有什么樣的定位？主推產(chǎn)品的核心賣點是什么？價格和折扣分別是什么？推薦的主次順序是什么？優(yōu)惠方案有什么樣的優(yōu)惠信息？具體優(yōu)惠方案是什么？產(chǎn)品分類網(wǎng)店產(chǎn)品共有哪幾個類別？產(chǎn)品是否有主次之分？產(chǎn)品的展現(xiàn)方式是什么樣的？首頁內(nèi)容頁面從上到下的順序是怎么樣的？（五）任務實施步驟二 確定網(wǎng)店首頁設計方案2.確定網(wǎng)店首頁設計方案。根據(jù)首頁的具體內(nèi)容，確定網(wǎng)店設計方案，繪制網(wǎng)店首頁設計基本布局。店招首頁焦點輪播圖（一張營銷活動圖，一張新品推薦圖）優(yōu)惠區(qū)商品分類商品促銷展示區(qū)（五）任務拓展淘寶“618年中慶”活動即將開始，為了順利開展活動，每小組自選一種自己最熟悉的產(chǎn)品，比如運動鞋，確定裝修風格，首頁內(nèi)容，完成網(wǎng)店首頁的設計規(guī)劃。THANK

YOU（一）任務工單任務目的：利用圖形圖像處理軟件，設計和制作網(wǎng)店店標，以簡潔明了的構(gòu)圖讓顧客留下深刻印象。任務描述：通過使用文字，色彩，線條等完成“愛尚服飾”網(wǎng)店店標的制作。知識目標：了解鋼筆工具的使用，剪切蒙版的應用，橢圓工具的使用，文字應用。知道店標的類型，店標所包含的內(nèi)容和設計遵循的原則。能力目標：能利用圖形圖像處理軟件，綜合各種視覺元素，設計出具有美感和創(chuàng)意的網(wǎng)店店標。思政元素：樹立品牌意識，提升品牌影響力。（二）任務情境愛尚服飾準備通過打造網(wǎng)上網(wǎng)店拓寬銷售渠道，裝修網(wǎng)店第一步就是要設計一款具有市場傳播度的店標，要求店標樣式圖文結(jié)合，圖案簡潔明了，色彩明快，能針對目標市場人群，讓人過目難忘，同兼顧時尚感，顏色要跟網(wǎng)店的經(jīng)營商品或?qū)氊愄卣鞅３诛L格一致。（三）任務解析一個好的店標讓人印象深刻，愛尚服飾店標主打明快的顏色和簡潔的設計，通過運用橢圓工具，矩形工具，鋼筆工具和矩形選框工具，完成的網(wǎng)店店標效果如圖所示（四）知識準備知識準備一 了解店標店標就是網(wǎng)店的標志，是傳達信息的重要符號，是電商品牌的核心象征，代表著一個網(wǎng)店的形象和基本特征，它能帶給人最直觀的品牌感受，可以代表網(wǎng)店的風格，網(wǎng)店的經(jīng)營理念，產(chǎn)品的類別和特征，是網(wǎng)店或品牌宣傳推廣過程中應用最廣泛、出現(xiàn)頻率最高的元素之一。店標按照外觀類型分可以分為：1. 文字型。這種店標通常是由網(wǎng)店名稱或品牌名稱的英文字母提取而成，或者是中文名稱文字的變形。這種店標的風格就是將品牌的視覺形象與公司名稱結(jié)合在一起，如下圖所示，奢侈品牌GUCCI的標志就是簡單的英文字母，沒有其他裝飾。小米的標志就使用了米字的拼音變形，讓人一目了然。國民品牌美加凈采用了了中英文結(jié)合的方式，并對中文字做了適當?shù)淖冃?。（四）知識準備知識準備一 了解店標2.

圖片型。相對于文字性型的店標，圖片的識別度更高，傳達信息的成本更低，應用廣泛。如下圖所示,運動品牌耐克的標志就是一個簡單的勾，可以出現(xiàn)在它旗下任何的運動單品上。蘋果的標志是缺了一口的蘋果造型，深入人心。（四）知識準備知識準備一 了解店標3. 圖文結(jié)合型。這種LOGO設計通常由文字和圖形共同組成，既能有直接的語言信息傳播功能，又有直觀的視覺形象，相互補充，相互成就，收到了廣大商家的青睞，使用更加廣泛。如下圖所示。（四）知識準備知識準備一 了解店標店標按照狀態(tài)區(qū)分還可以分為靜態(tài)店標和動態(tài)店標，相比較而言，動態(tài)店標更能抓住顧客的眼球，比靜態(tài)店標更能成為視覺焦點。淘寶網(wǎng)店用于上傳到網(wǎng)店并被賣家搜索后顯示在結(jié)果頁的店標都是正方形小圖，尺寸建議不要超過100像素*100像素，文件大小80K以內(nèi)，格式可以是GIF、JPG、JPEG或者PNG。如下圖3.2.5所示。很多網(wǎng)店通常會在店招上放上網(wǎng)店的店標，把店標作為店招頁面的一部分進行設計，這里店標的尺寸建議為230像素*70像素。（四）知識準備知識準備二 店標包含的內(nèi)容店標是網(wǎng)店對外宣傳和推廣的主要元素，設計制作店標可以包含的內(nèi)容主要包括：品牌標志或網(wǎng)店名稱。店標可以是本身經(jīng)營的品牌標志組成，可以是網(wǎng)店的名稱組成，也可以是網(wǎng)店標志和網(wǎng)店名稱兩者組合而成。經(jīng)營范圍。店標的圖形能反映網(wǎng)店所經(jīng)營的商品，讓顧客一目了然。經(jīng)營理念。有的品牌會在店標設計中加入經(jīng)營理念，起到強化引導的作用，容易讓顧客對網(wǎng)店產(chǎn)生信任感，從而提升網(wǎng)店的轉(zhuǎn)化率，比如“正品保障”“專注品牌20年”等。網(wǎng)店網(wǎng)址。出現(xiàn)在店標中的網(wǎng)址會強化人們對網(wǎng)店網(wǎng)址的記憶。（五）任務實施步驟一 制作店標圖案①

在

Photoshop

中新建文件，大小為

230*70像素，分辨率為

72

像素/英寸，背景為白色，標題名“愛尚服飾店標”。②

選擇橢圓工具，在屬性欄中設置填充顏色為“#bc0000”，按住Shift鍵，在畫布左側(cè)畫正圓。復制本圖層形成新圖層，修改新圖層正圓填充顏色為“#ff9f00”，柵格化新圖層。③

選擇視圖菜單，分別新建垂直參考線和水平參考線定位在圓中心，選擇矩形選框工具，選擇黃色圓圖形的下半部分并刪除，效果如圖

所示。（五）任務實施步驟一 制作店標圖案④

同時選擇兩個半圓圖層，

合并圖層，在新圖層上方新建圖層，選擇矩形工具，畫白色矩形，選擇

該圖層，右擊“創(chuàng)建剪貼蒙版”，隱藏白色矩形多余部分。用Ctrl+T鍵，旋轉(zhuǎn)圖形調(diào)整位置，（五）任務實施步驟一

制作店標圖案⑤

選擇鋼筆工具，繪制如下圖所示路徑。形成字母A的外輪廓造型。（五）任務實施步驟一

制作店標圖案⑥

在路徑面板中，選擇“將路徑作為選區(qū)載入”按鈕，將鋼筆繪制的路徑轉(zhuǎn)化為選區(qū)，新建圖層填充白色，取消選區(qū)。效果如圖所示。（五）任務實施步驟二 制作店標文字①

新建圖層，選擇文字工具，屬性欄中設置字體為“蘇新詩毛糙體簡”(字體位置：教材資源/素材文件/模塊3.2/)，字號為“38”，顏色為“#bc0000”,在A圖形的右側(cè)輸入文字“愛尚服飾”,適當調(diào)整位置，效果如下圖所示。②

新建圖層，選擇文字工具，屬性欄中設置字體為“Algerian”，字號為“16”，顏色為“#ff9f00”，字符間距：120，輸入大寫的英文字母：“LOVE

FASHION”，店標最終效果如圖所示。（六）任務拓展蝶衣舍女裝公司新成立，主營各類女裝，并準備在淘寶網(wǎng)開設蝶衣舍女裝網(wǎng)店，對于一個網(wǎng)店而言，店標