項目簡介：第1章初識網店美工隨著移動互聯(lián)網的發(fā)展以及消費結構的升級，電子商務行業(yè)亦趨向成熟，同時行業(yè)對于網店設計與裝修從業(yè)人員的要求也產生了變化，因此想要從事網店設計與裝修行業(yè)的人員需要系統(tǒng)地學習與更新自己的知識體系。本章對網店美工的基礎知識和網店裝修的風格定位、頁面構成、設計要點、常用軟件以及基本流程進行系統(tǒng)講解。通過本章的學習，讀者可以對網店設計與裝修有一個宏觀的認識，有助于高效、便利地進行后續(xù)的網店設計與裝修工作。課堂學習目標掌握網店美工的基本概述熟悉網店裝修的常用軟件明確網店裝修的基本流程1.1網店美工的基本概述網店美工的基本概念網店美工的工作內容網店美工的基本技能網店美工是指對淘寶、天貓商城以及京東商城等電商平臺上的網店，進行頁面美化工作的專業(yè)人員。有別于傳統(tǒng)的平面設計師，網店美工不僅需要熟練掌握各種圖像處理軟件、熟悉網店頁面的設計與布局，還需要了解商品的特點，準確判斷目標消費者的需求，這樣才能提升商品轉化率。總之，網店美工不僅需要處理圖片，還需要具備相應的營銷思維，并在其中加入自己的創(chuàng)意，是一種“美工設計+運營推廣”的復合型職業(yè)。1.1.1網店美工的基本概念

與傳統(tǒng)平面美工相比，網店美工的工作內容要求普遍更高，更具有針對性，主要圍繞自身服務的網店展開相關工作，下面對網店美工的工作內容進行詳細介紹。1.1.2網店美工的工作內容1.拍攝、美化商品商品拍攝是進行網店開設的第一步，商品拍攝通常需要專業(yè)的攝影師。但隨著攝影器具發(fā)展的普及化、大眾化，很多時候網店美工會直接進行商品的拍攝工作。同時拍攝出的商品圖片通常無法直接上架，還需要網店美工對其進一步設計和美化，以保證商品可以呈現出比較理想的視覺效果，從而打動消費者。1.1.2網店美工的工作內容2.設計、裝修網店網店美工除了需要進行圖片處理，還應該能夠完成整個網店的設計與裝修工作。在進行網店裝修時，需要根據電商平臺后臺提供的模塊進行裝修。但是想要店鋪呈現出更理想的視覺效果，還需要網店美工在后臺模塊的基礎之上對網店頁面進行創(chuàng)意設計。1.1.2網店美工的工作內容3.設計促銷活動電商平臺經常不定期舉辦各種促銷活動，這就需要網店美工能夠根據活動主題，完成促銷期間店鋪首頁、商品詳情頁以及活動頁的設計。網店美工通過設計各個頁面，令消費者充分了解促銷活動的內容和促銷力度，從而促使消費者積極地參與促銷活動，提升商品銷量。1.1.2網店美工的工作內容4.運營推廣商品商家只有進行積極有效的推廣，才能夠令自己的網店在眾多網店中脫穎而出，而網店美工在商品的運營推廣時發(fā)揮著重要的作用。網店美工需要站在消費者角度，深入挖掘消費者的瀏覽習慣和點擊需求，根據商品的上架情況和促銷信息設計主圖、直通車圖、海報等促銷廣告。1.1.2網店美工的工作內容1.1.3網店美工的基本技能一名優(yōu)秀的網店美工需要具備以下四個方面的基本技巧。（1）圖像處理與設計能力：首先需要美工人員一定要有扎實的設計基礎，對設計作品能夠具備良好的審美以及鑒別的能力；同時必須熟練掌握Photoshop、Illustrator等設計軟件，來將設計創(chuàng)意很好地實現。（2）視頻拍攝與編輯能力：需要美工人員能夠將商品進行視頻拍攝，并熟練掌握Premiere等編輯軟件，將視頻剪輯處理。（3）代碼了解與編輯能力：需要美工人員能夠了解基礎HTML和CSS語言，熟練掌握Dreamweaver等軟件，進行網店布局。（4）商品策劃與推廣能力：則需要美工人員在掌握相關專業(yè)技能的基礎之上還應該掌握營銷知識，擁有良好的營銷思維，從運營、推廣、數據分析的角度去思考，激發(fā)消費者的購買欲望，提高網店的瀏覽量與商品轉化率。1.2網店裝修的風格定位網店設計與裝修發(fā)展趨勢主要向扁平化、立體化和插畫風這三種風格進行，三種風格在視覺表達上都各有優(yōu)勢。1.扁平化以扁平化為主的網店設計與裝修頁面通過字體、圖形和色彩等不同方面的元素打造出清晰的視覺層次，使得頁面具有較強的可讀性。2.立體化以立體化為主的網店設計與裝修頁面通過運用Cinema4D與OctaneRender搭配進行建模渲染，進而呈現出別具一格的畫面效果，使得頁面立體生動。3.插畫風以插畫風為主的網店設計與裝修頁面通過運用手繪筆觸繪制出各種富有個性化的形象，使得頁面豐富有趣。1.2網店裝修的風格定位1.3網店裝修的頁面構成掌握網店裝修的頁面構成是進行網店設計與裝修的重要基礎。下面將分別介紹PC端和移動端的店鋪首頁、商品詳情頁的頁面構成，幫助大家掌握網店裝修的頁面構成。1.店鋪首頁的頁面構成在PC端中，首頁通常由店招、輪播海報、優(yōu)惠券、分類導航、商品展示和底部信息組成。在移動端中，首頁除了尺寸的變化，頁面構成與PC端幾乎相同。部分店鋪會根據商家需求，可自行選擇加入文字標題、店鋪熱搜、排行榜和逛逛更多等模塊。2.商品詳情頁的頁面構成在PC端中，商品詳情頁通常由主圖、左側區(qū)域以及詳情區(qū)域組成。在移動端中，商品詳情頁除了尺寸的變化，頁面構成與PC端相比缺少了左側區(qū)域。1.3網店裝修的頁面構成1.4網店裝修的設計要點基礎元素色彩搭配文字設計版式構圖1.4.1基礎元素點、線、面是設計構成中的三大基本元素，網店美工在設計時，將三者結合使用，可以營造出豐富的畫面效果。下面對基礎元素進行詳細的講解。（1）點點是構成一切形態(tài)的基礎，是最基本的視覺單位，具有凝聚視覺的作用。點的形狀多種多樣，整體分為圓點、方點、角點等規(guī)則點和自由隨意、任何形態(tài)的不規(guī)則點兩類。通過改變點的大小、形狀和位置可以在畫面中產生不一樣的效果。1.4.1基礎元素（2）線線是點移動的軌跡，是一切面的邊緣，具有分割畫面和處理界限的作用。線的形狀多種多樣，總的來說，可以分為直線和曲線。通過改變線的粗細、形狀、長短和角度可以在畫面中產生不一樣的效果。1.4.1基礎元素（3）面面是線移動的軌跡，可以拆分為點型的面和線型的面以及兩者結合的面。面的形狀多種多樣，針對網店設計，常用的形狀為方形、三角形以及圓形的幾何形和墨跡、泥點以及撕紙的偶然形。通過改變面的形狀可以在畫面中產生不一樣的效果。1.4.1基礎元素1.4.2色彩搭配網店的色彩可以帶給消費者強烈的視覺沖擊力，網店美工在設計時，應圍繞主色、輔助色和點綴色運用科學的搭配方法，打造出色彩協(xié)調、顏色舒適的畫面。下面對色彩搭配進行詳細講解。1.色彩搭配基礎網店設計與裝修中的色彩主要由主色、輔助色和點綴色組成，它們各自承擔不同的功能，共同進行色彩搭配。1.4.2色彩搭配（1）主色主色是畫面中面積最大、最為醒目的色彩，它決定了整個畫面的顏色調性。網店美工在選擇主色時，應綜合考慮商品風格、消費人群等因素。（2）輔助色輔助色是用于襯托主色的顏色，其占用面積僅次于主色。使用輔助色可以使畫面色彩更加豐富美觀。（3）點綴色點綴色是畫面中面積最小但較為醒目的顏色。合理使用點綴色可以起到錦上添花的作用。1.4.2色彩搭配2.色彩搭配方法常用的色彩搭配方法是馬賽克提取法，馬賽克提取法主要通過置入圖片，運用Photoshop軟件進行“濾鏡-像素化-馬賽克”操作，選取合適的顏色。1.4.2色彩搭配以下4類圖片不建議進行馬賽克提取，即低質量、PSD、插畫、產品攝影類圖片。1.4.2色彩搭配1.4.3文字設計文字是設計中重要的組成部分，與色彩相得益彰。網店美工在設計時，應選擇符合畫面風格的字體并調整合適的字號、間距以及行距。下面對文字設計進行詳細講解。1.字體與字號PC端網店中的最小字號建議為18像素，移動端網店中的最小字號建議為30像素。（1）宋體宋體筆畫有粗細變化，通常是橫細豎粗，末端有裝飾部分，點、撇、捺、鉤等筆畫有尖端，屬于襯線字體（serif）。宋體字有著纖細優(yōu)雅、文藝時尚的特點，常用于珠寶首飾、美妝護膚等以女性消費者為主的店鋪中。1.4.3文字設計（2）黑體黑體又稱方體或等線體，筆畫橫平豎直，粗細一樣，沒有襯線裝飾。黑體字有著方正粗曠、樸素簡潔的特點，常用于電子數碼和家用電器等店鋪中。（3）書法體書法體是指傳統(tǒng)書寫字體，可分為篆、隸、草、行、楷五大類書體。書法體有著自由多變、蒼勁有力的特點，常用于茶酒等需要表達傳統(tǒng)古典風格的店鋪中。1.4.3文字設計（4）美術體美術體是指非正常的、特殊的印刷所用字體，可以起到美化的效果。美術體有著美觀醒目、變化豐富的特點，使用范圍非常廣泛，既可以表現商品促銷的內容，又可以營造活潑調皮的氛圍。1.4.3文字設計2.間距與行距網店中字體的間距建議為字號的1/5以內，字體的行距建議為字號的1/2。1.4.3文字設計1.4.4版式構圖不同的版式構圖會給消費者帶來不同的視覺感受，網店美工在設計時，應使用合理的構圖方式構造統(tǒng)一協(xié)調的畫面。（1）左右構圖左右構圖是指將畫面通過黃金比例進行分割，主體可根據文案放置于畫面的左側或右側，這種構圖極具美學價值，能夠表現出和諧與美感。（2）上下構圖上下構圖是指將畫面通過黃金比例進行分割，主體通常放置于畫面的下方，承載視覺點，文字則放置于畫面的上方，承載閱讀信息，這種構圖呈現的視覺效果平衡且穩(wěn)定。1.4.4版式構圖（3）居中構圖居中構圖是指將主體放置于畫面的中心位置，這種構圖能夠令主體快速吸引消費者的目光，并表現出穩(wěn)定、均衡的感覺。需要注意的是，在使用該構圖方式時，可以小面積加入裝飾元素以避免畫面的呆板。（4）對角線構圖對角線構圖是指將主體放置于畫面的斜對角位置，這種構圖能夠更好地呈現主體，表現出立體感、延伸感和運動感。1.4.4版式構圖1.5網店裝修的常用軟件網店裝修的常用軟件包括視覺設計類、視頻編輯類和代碼編輯類。其中，Photoshop是一款圖像處理軟件，是網店美工進行商品修圖、廣告設計和頁面設計時最常使用的軟件。Illustrator則是一款圖形處理軟件，主要與Photoshop搭配使用，進行頁面中的字體設計與圖標設計。Cinema4D是一款3D表現軟件，該軟件彌補了傳統(tǒng)平面視覺呈現的局限性，豐富了設計創(chuàng)意的表現形式。Premiere、會聲會影和快剪輯都是視頻編輯軟件，用于剪輯網店中的主圖視頻和詳情頁廣告視頻。Dreamweaver是一款網頁代碼編輯軟件，網店美工在進行后臺裝修時，會運用該軟件為圖片添加跳轉鏈接。1.6網店裝修的基本流程網店設計與裝修的項目流程可以細分為需求分析、素材收集、視覺設計、審核修改、完稿切圖和上傳裝修六個基本步驟。（1）需求分析針對項目首先要進行相關的需求分析，網店美工通常會通過文案與相關主題先明確此次項目的賣點及消費者，初步確定頁面風格。（2）素材收集根據初步確定的頁面風格，進行相關的素材收集以及整理，為接下來的視覺設計做準備。（3）視覺設計使用Photoshop、Illustrator、Cinema4D等相關軟件，按照之前的分析構思進行視覺方面的整體設計。（4）審核修改針對網店的設計項目，通常會用到修圖、調色以及合成等方式對畫面進行處理，這些設計方式通常需要