電商設(shè)計電子課件

第1章初識電商設(shè)計本章介紹：隨著移動互聯(lián)網(wǎng)的發(fā)展以及消費結(jié)構(gòu)的升級，電子商務(wù)行業(yè)亦趨向成熟，同時行業(yè)對于電商設(shè)計從業(yè)人員的要求也產(chǎn)生了變化，因此想要從事電商設(shè)計行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對電商設(shè)計的基本概述、電商設(shè)計師的基本概述、電商設(shè)計的發(fā)展趨勢、項目流程、規(guī)范規(guī)則以及設(shè)計基礎(chǔ)、進行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對電商設(shè)計有一個系統(tǒng)的認識，有助于高效便利地進行后續(xù)的電商設(shè)計工作。熟悉電商設(shè)計的基本概述熟悉電商設(shè)計師的基本概述明確電商設(shè)計的發(fā)展趨勢學(xué)習(xí)目標(biāo)想要進入電商設(shè)計領(lǐng)域，首先要了解電商設(shè)計的基礎(chǔ)知識。下面分別從電商設(shè)計的基本概念和主流平臺這兩個方面進行電商設(shè)計基本概述的講解，為后續(xù)的設(shè)計工作奠定良好的基礎(chǔ)。1.1電商設(shè)計的基本概述1.電商設(shè)計的基本概念電商是電子商務(wù)的簡稱，電商設(shè)計是在網(wǎng)頁設(shè)計和平面設(shè)計結(jié)合的基礎(chǔ)之上，加入用戶體驗和人機交互，通過互聯(lián)網(wǎng)來傳播，進行商品銷售的設(shè)計。1.1.1電商設(shè)計的基本概述電商設(shè)計電商設(shè)計經(jīng)過多年的發(fā)展，無論從視覺呈現(xiàn)還是購買流程都產(chǎn)生了翻天覆地的變化。在這期間還成立了多個定位不同、規(guī)模宏大、商品豐富，各方面都比較成熟的電商平臺，供消費者們可以盡情進行網(wǎng)上購物。其中主流的電商平臺有天貓、淘寶、京東、網(wǎng)易嚴(yán)選以及小米有品等。1.1.2

電商設(shè)計的主流平臺電商設(shè)計的主流平臺電商設(shè)計師的類型劃分電商設(shè)計師的工作內(nèi)容電商設(shè)計師的專業(yè)技能電商設(shè)計師的常用軟件1.2電商設(shè)計師的基本概述想要成為一名專業(yè)的電商設(shè)計師，需要了解電商設(shè)計師的基礎(chǔ)知識。下面分別從電商設(shè)計師的類型劃分、工作內(nèi)容和專業(yè)技能和常用軟件這四個方面進行電商設(shè)計師基本概述的講解，為后續(xù)的設(shè)計工作奠定良好的基礎(chǔ)。1.2電商設(shè)計師的基本概述根據(jù)服務(wù)對象，可以將電商設(shè)計師分為服務(wù)平臺和服務(wù)店鋪這兩類，平臺類電商設(shè)計師是專門針對京東、淘寶和網(wǎng)易嚴(yán)選等出售各類商品的平臺進行設(shè)計，此類電商設(shè)計擁有大量的類目、品牌和商品。店鋪類電商設(shè)計是專門針對平臺中的某一個店鋪進行設(shè)計，此類電商設(shè)計通常類目和品牌都是單一性，商品也是單一品牌之下的少量商品。1.2.1電商設(shè)計師的類型劃分平臺類電商設(shè)計店鋪類電商設(shè)計電商設(shè)計師的工作內(nèi)容非常具有針對性，主要圍繞自身服務(wù)的網(wǎng)店展開相關(guān)工作。與傳統(tǒng)平面美工相比，電商設(shè)計師的工作內(nèi)容要求普遍較高，下面對電商設(shè)計師的工作內(nèi)容進行詳細介紹?！づ臄z美化商品·設(shè)計促銷活動·設(shè)計詳情頁面·運營推廣商品1.2.2電商設(shè)計師的工作內(nèi)容（1）拍攝美化商品商品拍攝是進行網(wǎng)店開設(shè)的第一步，商品拍攝通常需要專業(yè)的攝影師。但隨著攝影器具發(fā)展的普及化、大眾化，很多時候電商設(shè)計師會直接進行商品的拍攝工作。同時拍攝出的商品圖片通常是無法直接上架，因為需要電商設(shè)計師對商品圖片進行設(shè)計和美化，以保證商品可以呈現(xiàn)出比較理想的視覺效果，打動消費者。1.2.2

電商設(shè)計師的工作內(nèi)容美化商品（2）設(shè)計促銷活動電商平臺會不定期舉行各種促銷活動，這就需要電商設(shè)計師能夠根據(jù)活動主題，完成促銷期間店鋪首頁或平臺活動頁的設(shè)計。電商設(shè)計師通過設(shè)計各個頁面，令消費者充分了解活動內(nèi)容和促銷力度，從而促使消費者積極地參與活動，提升商品銷量。1.2.2

電商設(shè)計師的工作內(nèi)容促銷活動（3）設(shè)計詳情頁面電商設(shè)計師除了需要進行商品的圖片處理，還應(yīng)該能夠設(shè)計對應(yīng)商品的詳情頁面。在設(shè)計商品詳情頁時，需要根據(jù)消費者的需求，突出商品的賣點優(yōu)勢，以此達到消費者購買商品，促成交易的作用。1.2.2

電商設(shè)計師的工作內(nèi)容詳情頁面（4）運營推廣商品商家只有進行積極有效的推廣，才能夠令自己的網(wǎng)店在眾多網(wǎng)店中脫穎而出，而電商設(shè)計師在商品的運營推廣時發(fā)揮著重要的作用。電商設(shè)計師需要站在消費者角度，深入挖掘消費者的瀏覽習(xí)慣和點擊需求，根據(jù)商品的上架情況和促銷信息設(shè)計主圖、直通車圖、海報等促銷廣告。1.2.2

電商設(shè)計師的工作內(nèi)容商品推廣一名優(yōu)秀的電商設(shè)計師需要具備多個方面的能力，這些能力分別是：·攝影攝像能力·排版設(shè)計能力·創(chuàng)意合成能力·繪制插畫能力·三維設(shè)計能力·動態(tài)設(shè)計能力1.2.3電商設(shè)計師的專業(yè)技能攝影攝像能力創(chuàng)意合成能力1.2.3電商設(shè)計師的專業(yè)技能排版設(shè)計能力繪制插畫能力動態(tài)設(shè)計能力三維設(shè)計能力電商設(shè)計的常用軟件包括視覺設(shè)計、代碼制作、視頻剪輯和3D渲染這四類。建議設(shè)計師先掌握Photoshop（簡稱PS）以及Dreamweaver（簡稱DW），有條件的話還要掌握CinemaC4D（簡稱C4D）。常用軟件1.2.4電商設(shè)計師的常用軟件電商設(shè)計發(fā)展趨勢主要向扁平化、立體化以及插畫風(fēng)這三種風(fēng)格進行，三種風(fēng)格在視覺表達上都各有優(yōu)勢。·扁平化·立體化·插畫風(fēng)1.3電商設(shè)計的發(fā)展趨勢1.扁平化以扁平化為主的電商設(shè)計頁面通過字體、圖形和色彩等不同方面的元素運用合成打造出清晰的視覺層次，使得頁面具有較強的可讀性。1.3電商設(shè)計的發(fā)展趨勢扁平化設(shè)計2.立體化以立體化為主的電商設(shè)計頁面通過運用Cinema4D與OctaneRender搭配進行建模渲染，進而呈現(xiàn)出別具一格的畫面效果，使得頁面立體生動。1.3電商設(shè)計的發(fā)展趨勢立體化設(shè)計3.插畫風(fēng)以插畫風(fēng)為主的電商設(shè)計頁面通過運用手繪筆觸繪制出各種富有個性化的形象，使得頁面豐富有趣。1.3電商設(shè)計的發(fā)展趨勢插畫風(fēng)電商設(shè)計的項目流程可以細分為六個步驟。1.4電商設(shè)計的項目流程電商設(shè)計項目流程圖1.需求分析針對項目首先要進行相關(guān)的需求分析，設(shè)計師通常會通過文案與相關(guān)主題先明確此次項目的賣點及用戶，初步確定頁面的風(fēng)格。2.素材收集根據(jù)初步確定的頁面風(fēng)格，進行相關(guān)的素材收集以及整理，為接下來的視覺設(shè)計做準(zhǔn)備。3.視覺設(shè)計使用Photoshop、Illustrator、CinemaC4D等相關(guān)軟件，按照之前的分析構(gòu)思進行視覺方面的整體設(shè)計。1.4電商設(shè)計的項目流程4.審核修改針對電商的設(shè)計項目，通常會用到修圖、調(diào)色以及合成等方式對畫面進行處理，這些設(shè)計方式通常需要進行反復(fù)調(diào)整，以達到合適的畫面效果。5.完稿切圖在設(shè)計稿完成后，需要使用Photoshop等相關(guān)軟件對頁面進行切圖，并將切圖整理好，以便后續(xù)在網(wǎng)店進行上傳。6.上傳投放將完稿后的切圖上傳到后臺的素材中心，然后進行網(wǎng)店的裝修。裝修發(fā)布后便可以進行商品售賣。1.4電商設(shè)計的項目流程單位介紹頁面結(jié)構(gòu)柵格系統(tǒng)文字規(guī)則電商設(shè)計的設(shè)計基礎(chǔ)1.5電商設(shè)計的規(guī)范規(guī)則學(xué)習(xí)電商設(shè)計的基本規(guī)范是進行電商設(shè)計工作的重要基礎(chǔ)，遵循電商設(shè)計的規(guī)范與規(guī)則可以保證電商設(shè)計的可行性與可用性。下面分別從單位介紹、頁面結(jié)構(gòu)和文字規(guī)則這三個方面進行電商設(shè)計規(guī)范規(guī)則的講解，為后續(xù)的設(shè)計工作奠定良好的基礎(chǔ)。1.5電商設(shè)計的規(guī)范規(guī)則（1）英寸英寸（inch，in）是英式的長度單位，一般1英寸=2.54厘米，用于表示顯示設(shè)備的尺寸單位。1.5.1單位介紹27英寸的iMac15.6英寸的MacBookPro（2）像素像素（pixels，px）是組成屏幕畫面最小的點。電商設(shè)計中，用于表示頁面的尺寸單位。像素界面1.5.1單位介紹（3）分辨率分辨率（Resolution）即屏幕中像素的數(shù)量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。分辨率1.5.1單位介紹1.店鋪首頁的頁面構(gòu)成在PC端中，首頁通常由店招、輪播海報、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息組成。在手機端中，首頁除了尺寸的變化，頁面構(gòu)成與PC端幾乎相同。部分店鋪會根據(jù)商家需求，可自行選擇加入文字標(biāo)題、店鋪熱搜、排行榜和逛逛更多等模塊。2.商品詳情頁的頁面構(gòu)成在PC端中，商品詳情頁通常由主圖、左側(cè)區(qū)域以及詳情區(qū)域組成。在手機端中，詳情頁除了尺寸的變化，頁面構(gòu)成與PC端相比缺少了左側(cè)區(qū)域。1.5.2頁面結(jié)構(gòu)柵格系統(tǒng)，也稱為網(wǎng)格系統(tǒng)。在電商設(shè)計中，我們利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進行頁面的布局設(shè)計，使布局規(guī)范簡潔有秩序。1.5.3柵格系統(tǒng)柵格系統(tǒng)1.柵格系統(tǒng)的組成（1）單元格（2）列+水槽+邊距2.柵格系統(tǒng)的搭建（1）確定屏幕寬度（2）確定柵格區(qū)域（3）確定列數(shù)、水槽、邊距

1.5.3柵格系統(tǒng)1.字號制作PC端電商設(shè)計時，以14px字號為默認字體，并運用不同的字號和字重體現(xiàn)設(shè)計中的視覺信息層次，需要注意的是，字號多采用偶數(shù)，因為奇數(shù)無法對齊像素。制作移動端電商設(shè)計時，可以參考iOS和MaterialDesign提供的字號規(guī)范，其中最小字號建議在20px以上。1.5.4文字規(guī)則2.間距·字間距標(biāo)題的字間距通常建議為字號的1/5以內(nèi)，如標(biāo)題文字字號是60pt時，字間距通常設(shè)置在-50～-20之間。內(nèi)容文字由于字號較小，字間距需要適當(dāng)加大，建議為字號的1/5以上。如內(nèi)容字號是24pt時，字間距通常設(shè)置為20～50?！ば虚g距行間距讓字與字之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。行間距需要大于字間距，建議為字號的1/3～2/3。當(dāng)排版標(biāo)題文字時，行間距建議為字號的1/3，當(dāng)排版內(nèi)容文字時，行間距建議為字號的2/3。·段間距段間距能夠保持頁面的節(jié)奏，它的設(shè)置與字號和行間距又著密切聯(lián)系。段間距的設(shè)置建議是2～3個字號高度。1.5電商設(shè)計的規(guī)范規(guī)則基礎(chǔ)元素色彩搭配字體表現(xiàn)版式設(shè)計1.6電商設(shè)計的設(shè)計基礎(chǔ)當(dāng)電商設(shè)計師掌握了電商設(shè)計的相關(guān)基礎(chǔ)知識之后，還要掌握電商設(shè)計的基礎(chǔ)，這樣設(shè)計出的效果才能突出。下面分別從基礎(chǔ)元素、色彩搭配、文字設(shè)計和版式構(gòu)圖這四個方面進行電商設(shè)計的設(shè)計基礎(chǔ)講解。1.6電商設(shè)計的設(shè)計基礎(chǔ)1.點點是構(gòu)成一切形態(tài)的基礎(chǔ)，是最基本的視覺單位，具有凝聚視覺的作用。點的形狀多種多樣，整體分為圓點、方點、角點等規(guī)則點和自由隨意、任何形態(tài)的不規(guī)則點兩類。通過改變點的大小、形狀和位置可以在畫面中產(chǎn)生不一樣的效果。1.6.1基礎(chǔ)元素規(guī)則點的應(yīng)用不規(guī)則點的應(yīng)用的應(yīng)用2.線線是點移動的軌跡，是一切面的邊緣，具有分割畫面和處理界限的作用。線的形狀多種多樣，總的來說，可以分為直線和曲線。通過改變線的粗細、形狀、長短和角度可以在畫面中產(chǎn)生不一樣的效果。直線的應(yīng)用曲線的應(yīng)用1.6.1基礎(chǔ)元素3.面面是線移動的軌跡，可以拆分為點型的面和線型的面以及兩者結(jié)合的面。面的形狀多種多樣，針對網(wǎng)店設(shè)計，常用的形狀為方形、三角形以及圓形的幾何形和墨跡、泥點以及撕紙的偶然形。通過改變面的形狀可以在畫面中產(chǎn)生不一樣的效果。幾何形面的應(yīng)用偶然形面的應(yīng)用1.6.1基礎(chǔ)元素1.主色主色是畫面中面積最大、最為醒目的色彩，它決定了整個畫面的顏色調(diào)性。電商設(shè)計師人員在選擇主色時，因綜合考慮商品風(fēng)格、消費人群等因素。2.輔助色輔助色是用于付托主色的顏色，其占用面積僅次于主色。使用輔助色可以是畫面色彩更加豐富美觀。3.點綴色點綴色是畫面中面積最小但較為醒目的顏色。合理使用點綴色可以起到錦上添花的作用。1.6.2色彩搭配1.宋體宋體筆畫有粗細變化，通常是橫細豎粗，末端有裝飾部分，點、撇、捺、鉤等筆畫有尖端，屬于襯線字體（serif）。宋體字有著纖細優(yōu)雅、文藝時尚的特點，常用于珠寶首飾、美妝護膚等以女性消費者為主的電商內(nèi)容中。1.6.3字體表現(xiàn)宋體表現(xiàn)形式2.黑體黑體又稱方體或等線體，筆畫橫平豎直，粗細一樣，沒有襯線裝飾。黑體字有著方正粗曠、樸素簡潔的特點，常用于商品促銷、電子數(shù)碼和家用電器等電商內(nèi)容中。黑體表現(xiàn)形式1.6.3字體表現(xiàn)3.圓體圓體是由黑體演變而來的字體，在基于黑體的字形結(jié)構(gòu)將拐角處和筆畫末端變?yōu)閳A弧狀。圓體有著圓潤、柔和的特點，常用于兒童、少女、甜蜜等電商內(nèi)容中。圓體表現(xiàn)形式1.6.3字體表現(xiàn)4.手寫體（1）書法體書法體是指傳統(tǒng)書寫字體，可分為篆、隸、草、行、楷五大類書體。書法體有著自由多變、蒼勁有力的特點，常用于茶酒等需要表達傳統(tǒng)古典風(fēng)格的電商內(nèi)容中。書法體表現(xiàn)形式1.6.3字體表現(xiàn)（2）鋼筆體鋼筆體是指使用硬質(zhì)材料筆尖的書寫字體，鋼筆體粗細變化較小，注重字形結(jié)構(gòu)和線條走勢。鋼筆體有著清新文藝、輕松活潑的特點，常用于清新活潑的電商內(nèi)容中。鋼筆體表現(xiàn)形式1.6.3字體表現(xiàn)5