第1章初識電商視覺設計本章介紹：隨著移動互聯網的發展以及消費結構的升級，電商行業亦趨向成熟，同時行業對于電商視覺設計從業人員的要求也產生了變化，因此想要從事電商視覺設計行業工作的人員需要系統地學習相關知識并更新自己的知識體系。本章對電商視覺設計的基本概念、電商視覺設計師的工作內容、常用的軟件，以及電商視覺設計的項目流程、規范與規則、設計基礎進行系統講解。通過對本章的學習，學生可以對電商視覺設計有一個系統的認識，有助于高效地進行后續的電商視覺設計學習。熟悉電商視覺設計的基本概念熟悉電商視覺設計師的工作內容熟悉電商視覺設計常用的軟件知識目標熟悉電商視覺設計的項目流程了解電商視覺設計的規范與規則能力目標培養對電商視覺設計的興趣培養獲取新知識的基本能力素養目標電商是電子商務的簡稱，視覺設計是指利用圖像、文字、顏色等視覺元素進行圖文設計，可以達到信息傳播的目的。電商視覺設計是指在網頁設計和平面設計結合的基礎之上，加入用戶體驗和人機交互，通過互聯網傳播信息，進行商品銷售相關內容的設計。1.1電商視覺設計的基本概念電商視覺設計師的工作內容非常具有針對性，主要圍繞自身服務的網店展開相關工作。與傳統平面美工相比，電商視覺設計師的工作內容要求普遍較高，下面對電商視覺設計師的工作內容進行詳細介紹。1．拍攝、美化商品2．設計促銷活動3．設計商品詳情頁4．運營和推廣商品1.2電商視覺設計師的工作內容1．拍攝、美化商品商品拍攝是開設網店的重要一步，商品拍攝通常需要由專業的攝影師完成。但隨著攝影器具的普及化、大眾化，很多時候設計師會直接進行商品的拍攝，并對商品圖片進行設計和美化，以保證商品圖片可以呈現出比較理想的視覺效果，打動消費者。1.2電商視覺設計師的工作內容美化商品2．設計促銷活動電商平臺會不定期舉行各種促銷活動，這就需要設計師能夠根據活動主題，完成活動期間店鋪首頁或平臺活動頁的設計。1.2電商視覺設計師的工作內容促銷活動3．設計商品詳情頁設計師除了需要進行商品圖片的處理、促銷活動的設計還應該能夠設計對應商品的詳情頁。1.2電商視覺設計師的工作內容詳情頁面4．運營推廣商品設計師還需要站在消費者角度，深入挖掘消費者的瀏覽習慣和點擊需求，根據商品的上架情況和促銷信息設計主圖、直通車圖、海報等促銷廣告。1.2電商視覺設計師的工作內容商品推廣PhotoshopCinema4DPremiere1.3?電商視覺設計常用的軟件電商視覺設計常用的軟件可分為三類，其中視覺設計類包括平面和三維的視覺處理。1.3?電商視覺設計常用的軟件常用軟件

Photoshop是由Adobe公司出品的功能強大的圖形圖像處理軟件之一，是集編輯修飾、制作處理、創意編排、圖像輸入輸出于一體的圖形圖像處理軟件。1.3.1PhotoshopPhotoshop

Cinema4D是由德國公司Maxon開發的一款可以進行建模以及動畫制作、模擬、渲染的專業軟件。1.3.2Cinema4DCinema4D

Premiere是由Adobe公司開發的一款視頻編輯軟件。Premiere擁有強大的視頻剪輯功能，可以對視頻進行采集、剪切、組合、拼接等操作。1.3.3PremierePremiere電商視覺設計的項目流程可以細分為六個步驟。1．需求分析2．素材收集3．視覺設計4．審核修改5．完稿切圖6．上傳裝修1.4?電商視覺設計的項目流程單位介紹頁面構成柵格系統文字規則1.5電商視覺設計的規范與規則遵循電商視覺設計的規范與規則可以保證電商視覺設計的可行性與可用性。下面分別從單位介紹、頁面結構、柵格系統和文字規則這4個方面展開講解。1.5電商視覺設計的規范與規則1．英寸英寸（inch，in）是英式的長度單位，也是用于表示顯示設備尺寸的單位，一般1in=2.54cm。1.5.1單位介紹27英寸的臺式計算機14英寸的筆記本電腦2．像素像素（pixels，px）是組成屏幕畫面最小的點。電商視覺設計中，像素是用于表示頁面尺寸的單位。新建界面1.5.1單位介紹分辨率（resolution）即屏幕中像素的數量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細。分辨率1.5.1單位介紹1．店鋪首頁的頁面構成在PC（PersonalComputer，個人計算機）端中，店鋪首頁通常由店招與導航、輪播海報、優惠券、分類模塊、商品展示和底部信息構成。在手機端中，店鋪首頁除了尺寸的變化，其頁面構成與PC端的幾乎相同。設計部分店鋪首頁時，設計師可根據商家需求，自行選擇加入文字標題、店鋪熱搜、排行榜和逛逛更多等模塊。1.5.2頁面構成店鋪首頁的頁面構成2．商品詳情頁的頁面構成在PC端中，商品詳情頁通常由主圖、左側區域以及詳情區域組成。在手機端中，商品詳情頁除了尺寸的變化，其頁面構成與PC端相比缺少了左側區域。商品詳情頁的頁面構成1.5.2頁面構成柵格系統也稱為網格系統。設計師利用一系列垂直和水平的參考線，將頁面分割成若干個有規律的列或單元格，再以這些單元格為基準，進行頁面的布局設計，使頁面布局規范、簡潔、有秩序。1.5.3柵格系統柵格系統1.柵格系統的組成（1）單元格柵格系統由格子組成網，因此基本單位是單元格。柵格系統需要先定義好柵格的最小單元大小，然后再以最小單元去定義柵格系統。單元格1.5.3柵格系統（2）列+水槽+邊距確定好單元格后，需要確定列、水槽和邊距這3個元素。其中列是放置內容的區域。水槽是列與列之間的距離，有助于分離內容。邊距是內容與屏幕左、右邊緣之間的距離。單元格1.5.3柵格系統2．柵格系統的搭建（1）確定屏幕寬度搭建柵格系統的第一步是確定屏幕寬度，針對不同的設計項目，屏幕寬度設置也會不同。在PC端電商視覺設計中，屏幕寬度通常設置為1920px。在手機端電商視覺設計中，電商平臺屏幕寬度通常設置為750px，店鋪首頁屏幕寬度通常設置為1200px。1.5.3柵格系統確定屏幕寬度（2）確定柵格區域確定好屏幕寬度后，接下來需要確定柵格區域。柵格區域應在結合屏幕尺寸的基礎上，根據不同的布局方案進行確定。在屏幕寬度為1920px、上下布局的電商視覺設計中，柵格區域通常為屏幕中間的安全寬度區域。根據項目的不同，安全寬度也會發生變化。在屏幕寬度為1920px的設計尺寸中，常用平臺的安全寬度如圖所示。確定柵格區域1.5.3柵格系統（3）確定列數、水槽、邊距①列數PC端電商視覺設計常用的列數為12列。移動端電商視覺設計的列數則以6列和12列為主。1.5.3柵格系統列數②水槽水槽以及橫向間距的寬度可以依照最小單位8px為增量進行統一設置，如8px、16px、24px、32px、40px。其中24px最為常用。手機端電商視覺設計可根據App設計規范，采用24px、30px、32px、40px的水槽，建議采用30px或32px的水槽。水槽1.5.3柵格系統③邊距邊距通常是水槽的0、0.5、1.0、1.5、2.0倍等。以屏幕寬度為1920px的設計稿為例，其柵格系統一般在1200px的安全寬度區域進行搭建，此時內容與屏幕左、右邊緣已經有了一定距離，邊距可以根據畫面美觀度及呼吸感進行選擇，如圖1-27所示。手機端電商視覺設計可根據App設計規范，采用20px、24px、30px、32px、40px以及50px的邊距，建議采用30px以上的邊距。邊距1.5.3柵格系統1.字號進行PC端電商視覺設計時，以14pt為默認字號，并運用不同的字號和字重體現設計中的視覺信息層次。需要注意的是，字號值多采用偶數，因為采用奇數字號無法對齊像素，從而會造成模糊現象。進行手機端電商視覺設計時，可以參考iOS和Android提供的@2x字號規范，其中最小字號建議在20px以上。1.5.4文字規則字號2．間距（1）字間距標題文字的字間距通常建議為字號的1/5以下，如標題文字字號是60pt時，字間距通常設置為-50～-20。內容文字由于字號較小，字間距需要適當加大，建議為字號的1/5以上，如內容文字字號是24pt時，字間距通常設置為20～50。1.5.4文字規則字間距（2）行間距行間距讓行與行之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。行間距需要大于字間距，建議為字號的1/3～2/3。當排版標題文字時，行間距建議為字號的1/3，當排版內容文字時，行間距建議為字號的2/3。1.5.4文字規則行間距（3）段間距段間距能夠保持頁面的節奏，它的設置與字號和行間距有著密切聯系。段間距的設置建議是2～3個字號高度。1.5.4文字規則段間距1.6電商視覺設計的設計基礎基礎元素色彩搭配字體表現版式構圖1．點點是構成一切形態的基礎，是最基本的視覺單位，具有凝聚視覺的作用。點的形狀多種多樣，整體分為圓點、方點、角點等規則點和自由隨意、任何形態的不規則點兩類。通過改變點的大小、形狀和位置，畫面可以呈現不一樣的效果。1.6.1基礎元素點元素2．線線是點移動的軌跡，是一切面的邊緣，具有分割畫面和處理界線的作用。線的形狀多種多樣，總的來說，可以分為直線和曲線。通過改變線的粗細、形狀、長短和角度，畫面可以呈現不一樣的效果。線元素1.6.1基礎元素3．面面是線移動的軌跡，可以拆分為點型的面和線型的面以及兩者結合的面。面的形狀多種多樣，針對網店設計，常用的面的形狀為方形、三角形及圓形的幾何形和墨跡、泥點及撕紙的非幾何形面。通過改變面的形狀，畫面可以呈現不一樣的效果。面元素1.6.1基礎元素1．主色：主色是畫面中面積最大、最為醒目的色彩，它決定了整個畫面的顏色調性。電商視覺設計師在選擇主色時，應綜合考慮商品風格、消費人群等因素。2．輔助色：輔助色是用于襯托主色的顏色，其占用面積僅次于主色。使用輔助色可以使畫面色彩更加豐富、美觀。3．點綴色：點綴色是畫面中面積最小但較為醒目的顏色。合理使用點綴色可以起到錦上添花的作用。1.6.2色彩搭配色彩搭配1．排版字體（1）宋體宋體筆畫有粗細變化，通常是橫細豎粗，末端有裝飾部分，點、撇、捺、鉤等筆畫有尖端，屬于襯線字體（serif）。宋體字有著纖細優雅、文藝時尚的特點，常用于珠寶首飾、美妝護膚等以女性消費者為主的電商內容中。1.6.3字體表現宋體表現形式（2）黑體黑體又稱方體或等線體，筆畫橫平豎直，粗細一樣，沒有襯線裝飾。黑體字有著方正粗獷、樸素簡潔的特點，常用于商品促銷、電子數碼和家用電器等電商內容中。黑體表現形式1.6.3字體表現（3）圓體圓體是由黑體演變而來的字體，在基于黑體的字形結構上將拐角處和筆畫末端變為圓弧狀。圓體有著圓潤、柔和的特點，常用于以兒童、少女為主要消費人群的電商內容中。圓體表現形式1.6.3字體表現2．手寫體（1）書法體書法體是指傳統書寫字體，可分為篆、隸、草、行、楷五大類書體。書法體有著自由多變、蒼勁有力的特點，常用于茶、酒等需要表達傳統古典風格的電商內容中。書法體表現形式1.6.3字體表現（2）鋼筆體鋼筆體是指使用硬質材料的筆尖書寫的字體，鋼筆體粗細變化較小，注重字形結構和線條走勢。鋼筆體有著清新文藝、輕松活潑的特點，常用于清新、活潑的電商內容中。鋼筆體表現形式1.6.3字體表現3．創意字體創意字體是指非正常的、特殊的印刷用字體，可以起到美化的作用。創意字體有著美觀醒目、變化豐富的特點，其使用范圍非常廣泛，既可以表現商品促銷的內容，又可以營造輕松活潑的氛圍。創意字體表現形式1.6.3字體表現1．分割構圖（1）左右構圖左右構圖是指將畫面按一定比例分割為左右兩部分，主體可根據文案放置于畫面的左部分或右部分，這種版式構圖方式極具美學價值，能夠表現出和諧與美感。1.6.4版式構圖左右構圖（2）上下構圖上下構圖是指將畫面按一定比例分割為上下兩部分，主體通常放置于畫面的下部分，用于承載視覺點，文字則放置于畫面的上部分，用于承載閱讀信息，這種版式構圖方式呈現的視覺效果平衡且穩定。上下構圖1.6.4版式構圖（3）左中右構圖左中右構圖是指將畫面按一定比例分割成相等或不等的左、中、右3部分，“三分”后畫面更有秩序，適用于文字較多、層級較復雜的內容。左右中構圖1.6.4版式構圖2．居中構圖居中構圖是指將主體放置于畫面的中心位置，這種版式構圖方式能夠令主體快速吸引消費者的目光，并表現出穩定、均衡的感覺。需要注意的是，在使用該版式構圖方式時，可以小面積加入裝飾元素，以免畫面顯得呆板。居中構圖1.6.4版式構圖3．包圍構圖包圍構圖是指利用文字或其他元素環繞主體，其具有很強的空間感和透視效果，同時能形成一定的視覺沖擊力。包圍構圖1.6.4版式構圖4．傾斜構圖傾斜構圖是指將主體或多幅圖進行傾斜編排，這種版式構圖方式能夠更好地呈現主體，表現出立體感、延伸感和運動感。傾斜構圖1.6.4版式構圖第2章商品圖片精修與視覺合成本章介紹：商品圖片精修與視覺合成是電商視覺設計中的首要工作任務，通過精修與視覺合成后的商品圖片能給消費者帶來更強的購買欲望，從而提升銷售量。本章針對商品圖片精修中的精修的核心要素、精修的常用技法、理解光影與材質以及視覺合成中的合成的基本類型、合成的透視知識、合成的光影表現等知識進行系統講解與演練。通過對本章的學習，學生可以對商品圖片精修與視覺合成有一個系統的認識，掌握商品圖片精修與視覺合成的方法和技巧。了解精修的核心要素了解合成的基本類型熟悉合成的透視知識熟悉合成的光影表現知識目標明確精修的修圖思路掌握精修的常用技法明確合成的創意思路掌握合成的制作方法能力目標培養細致、嚴謹的工作作風提高視覺鑒賞能力素養目標精修的核心要素精修的常用技法理解光影與材質課堂案例——精修護發發膜瓶器圖片2.1商品圖片精修精修的核心要素主要有光感、質感、色感、體積感以及結構。1．光感光感是指整體畫面感光度，設計師經常運用Photoshop中的“亮度/對比度”命令、“色階”命令以及“曲線”命令調整畫面光感，以呈現畫面的層次感和通透性。2.1.1精修的核心要素光感2.質感商品的材質不同，所展現的質感也會不同，常見的材質有塑料材質、玻璃材質和金屬材質等。設計師經常運用Photoshop中的“漸變疊加”命令、“添加雜色”命令以及修補工具加強商品圖片的質感。2.1.1精修的核心要素塑料材質

玻璃材質

金屬材質3.色感色感除了體現商品本身的顏色，還體現商品的環境色。設計師經常運用Photoshop中的“色相飽和度”命令以及圖層混合模式加強商品圖片的色感。2.1.1精修的核心要素產品展示

4.體積感體積感可以體現商品的立體感，只有給商品賦予強烈的明暗關系才能清晰地表現出體積感。設計師經常運用Photoshop中的畫筆工具以及圖層混合模式加強商品的體積感。2.1.1精修的核心要素產品展示

5.結構結構用于表示組成商品的基本圖形，任何商品都可以被拆分成若干個幾何圖形。設計師經常運用Photoshop中的鋼筆工具、圖形工具以及“自由變換”命令對商品進行結構的拆分。產品展示

2.1.1精修的核心要素精修的常用技法根據精修的流程可以分為修前技法、基礎技法、結構技法、修瑕技法、鋪光技法、材質技法以及綜合技法。基礎技法結構技法修瑕技法鋪光技法材質技法綜合技法2.1.2精修的常用技法1.光影與材質的關系為商品添加清晰的光影，能夠真實而生動地表現出商品的立體感。通過光源的照射，商品會形成明、暗、灰三大面。在三大面中，根據受光強弱的不同，商品還有很多明顯的區別，可形成高光、中間調、明暗交界線、反光以及投影五大調。2.1.3理解光影與材質光影與材質的示意圖2.光影與材質的表現電商視覺設計中，運用Photoshop中的漸變工具將常用的光影效果提前繪制并保存，能提升精修效率。其中單邊光和對稱光通常適用于圓柱體圖形的瓶器商品，可以令商品更加立體，中亮光通常適用于透明材質的瓶器商品，可以提升商品的通透性。不同打光的光影示意圖2.1.3理解光影與材質透明材質的商品兩側特別是邊緣的明暗對比強烈。金屬材質的商品整體明暗反差較大，從深色到淺色過渡的距離較短。塑料材質的商品整體明暗過渡均勻，高光柔和。不同材質的光影示意圖2.1.3理解光影與材質使用“污點修復畫筆”工具修復圖像，使用“創建新的填充或調整圖層”命令為圖像校色。2.1.4課堂案例—精修護發發膜瓶器圖片效果圖合成的基本類型合成的透視知識合成的光影表現課堂案例——合成室內空間場景2.2視覺合成合成的基本類型包括特效型、寫實型以及空間型。特效型是通過對商品本身進行創意合成的一種扁平化合成類型，寫實型是通過加入天空、樹木、海洋等自然元素的一種室外化合成類型，空間型是通過將商品置入舞臺或盒內的一種室內化合成類型。3種合成類型都能實現襯托商品、烘托氛圍的效果，設計師可以根據商品的屬性進行選擇。2.2.1合成的基本類型特效型寫實型空間型透視可以幫助設計師科學地表現各種空間感和立體感，從形式上透視可以分為焦點透視和散點透視。散點透視即一個畫面中有多個視點，是中國畫常用的透視形式，重在寫意，適合表現氣勢宏偉、波瀾壯闊的景色。焦點透視即一個畫面中所有視線都匯聚在一點，是西方畫通常遵循的透視形式，重在寫實，有著近大遠小、近實遠虛的特點）。2.2.2合成的透視知識焦點透視平行透視由于只有一個滅點，所以視覺表現形式較為單一，空間變化也不大，通常從正面表現整個場景，因此容易上手。成角透視中物體與畫面會形成一定夾角，該夾角接近人日常的視物角度，空間透視的變化相對較豐富，可以使畫面更有沖擊力和張力。相比成角透視，斜角透視讓豎線也產生了交集，形成了強烈的匯聚感，整體變形比較夸張，令畫面有著強大的沖擊力，給人帶來更刺激的視覺感受。2.2.2合成的透視知識平行透視斜角透視成角透視視角的不同也會給人帶來不同的視覺感受，通常有仰視、平視和俯視三種視角。仰視視角能夠彰顯商品的氣勢和高大，有助于體現品牌價值；平視視角雖然中規中矩，但視覺感受舒服自然；俯視視角能夠凸顯商品的立體感，同時帶來親切真實的感受。2.2.2合成的透視知識仰視俯視平視1.光源表現（1）照射光光源照射方向：光源照射方向會直接影響商品的明暗變化與畫面的情感表達。電商視覺設計中常用的照射方向有前側光、側光、側逆光和逆光4種。其中前側光和側光重在凸顯商品的質感，側逆光和逆光重在營造畫面的氛圍。2.2.3合成的光影表現光源照射方向 光源強度和距離：光源強度和距離會影響商品的明暗對比，光源強度越強、距離越近，商品的明暗對比越明顯，光源強度越弱、距離越遠，商品的明暗對比越模糊。電商視覺設計中，明暗對比模糊的畫面能夠給人帶來清晰柔和的感受，明暗對比明顯的畫面更強調商品本身的立體感和結構感。2.2.3合成的光影表現光源強度和距離 光源性質：光源按性質分為硬光和軟光，光源的軟硬會影響商品的明暗過渡，硬光照射下商品的明暗過渡生硬，軟光照射下商品的明暗過渡自然。電商視覺設計中，硬光通常用于表現商品的硬朗強勁，適用于表現運動等類型的商品。軟光通常用于表現商品的柔和嬌嫩，適用于表現母嬰等類型的商品。2.2.3合成的光影表現