第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.