電商視覺設(shè)計(jì)課件 第1章 初識電商視覺設(shè)計(jì)

第1章初識電商視覺設(shè)計(jì)本章介紹：隨著移動互聯(lián)網(wǎng)的發(fā)展及消費(fèi)結(jié)構(gòu)的升級，電子商務(wù)行業(yè)亦趨向成熟，同時行業(yè)對于電商視覺設(shè)計(jì)從業(yè)人員的要求也產(chǎn)生了變化，因此想要從事電商視覺設(shè)計(jì)行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對電商視覺設(shè)計(jì)的概況、電商視覺設(shè)計(jì)師的概況、電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)、基本流程及規(guī)范與規(guī)則進(jìn)行了系統(tǒng)的講解。通過本章的學(xué)習(xí)，讀者可以對電商視覺設(shè)計(jì)有一個系統(tǒng)的認(rèn)識，為后續(xù)的電商視覺設(shè)計(jì)工作打下良好的基礎(chǔ)。熟悉電商視覺設(shè)計(jì)概況熟悉電商視覺設(shè)計(jì)師概況知識目標(biāo)掌握電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)掌握電商視覺設(shè)計(jì)的基本流程掌握電商視覺設(shè)計(jì)的規(guī)范與規(guī)則能力目標(biāo)培養(yǎng)對電商視覺設(shè)計(jì)的學(xué)習(xí)興趣培養(yǎng)獲取電商視覺設(shè)計(jì)新知識、新技能、新方法的基本能力培養(yǎng)樹立文化自信、職業(yè)自信的能力素質(zhì)目標(biāo)想要進(jìn)入電商視覺設(shè)計(jì)領(lǐng)域，首先要了解電商視覺設(shè)計(jì)的基礎(chǔ)知識。下面分別從電商視覺設(shè)計(jì)的基本概念和主流平臺這兩個方面進(jìn)行電商視覺設(shè)計(jì)基本概述的講解，以便為后續(xù)的設(shè)計(jì)工作奠定良好的基礎(chǔ)。1.1電商視覺設(shè)計(jì)概述電商是電子商務(wù)的簡稱，電商視覺設(shè)計(jì)是在電子商務(wù)領(lǐng)域中，以視覺元素為主要手段，加入用戶體驗(yàn)和人機(jī)交互，通過互聯(lián)網(wǎng)傳播來進(jìn)行商品銷售的設(shè)計(jì)。1.1.1電商視覺設(shè)計(jì)的基本概念電商視覺設(shè)計(jì)隨著電子商務(wù)的迅猛發(fā)展，多個定位不同、規(guī)模宏大、商品豐富的電商平臺應(yīng)運(yùn)而生，供消費(fèi)者們盡情網(wǎng)上購物。1.1.2

電商視覺設(shè)計(jì)的主流平臺電商設(shè)計(jì)的主流平臺電商視覺設(shè)計(jì)師的類型劃分電商視覺設(shè)計(jì)師的工作內(nèi)容電商視覺設(shè)計(jì)師的常用軟件1.2電商視覺設(shè)計(jì)師概述想要成為一名專業(yè)的電商視覺設(shè)計(jì)師，需要了解電商視覺設(shè)計(jì)師的基礎(chǔ)知識。下面分別從電商視覺設(shè)計(jì)師的類型劃分、工作內(nèi)容和專業(yè)技能和常用軟件這四個方面進(jìn)行電商視覺設(shè)計(jì)師基本情況的講解，以便為后續(xù)的設(shè)計(jì)工作奠定良好的基礎(chǔ)。1.2電商視覺設(shè)計(jì)師概述根據(jù)服務(wù)對象的不同，將電商視覺設(shè)計(jì)師可分為服務(wù)平臺和服務(wù)店鋪這兩類。為平臺服務(wù)的電商視覺設(shè)計(jì)師是專門針對京東、淘寶和網(wǎng)易嚴(yán)選等出售各類商品的電商平臺進(jìn)行設(shè)計(jì)，此類電商視覺設(shè)計(jì)的內(nèi)容包含大量的類目、品牌和商品。為店鋪服務(wù)的電商視覺設(shè)計(jì)是專門針對電商平臺中的某一個店鋪進(jìn)行設(shè)計(jì)，此類電商視覺設(shè)計(jì)通常類目和品牌都具有單一性，商品也是單一品牌之下的少量商品。1.2.1電商視覺設(shè)計(jì)師的類型劃分平臺類電商設(shè)計(jì)店鋪類電商設(shè)計(jì)電商視覺設(shè)計(jì)師的工作內(nèi)容非常具有針對性，主要圍繞自身的服務(wù)對象展開設(shè)計(jì)工作。與傳統(tǒng)平面美工相比，電商視覺設(shè)計(jì)師的工作內(nèi)容要求普遍較高。下面對電商視覺設(shè)計(jì)師的工作內(nèi)容進(jìn)行詳細(xì)介紹。拍攝與美化商品設(shè)計(jì)促銷活動設(shè)計(jì)詳情頁運(yùn)營推廣商品1.2.2電商視覺設(shè)計(jì)師的工作內(nèi)容1．拍攝與美化商品商品拍攝是網(wǎng)店開設(shè)的第一步，通常需要專業(yè)的攝影師。但隨著攝影器具的普及化、大眾化，很多時候電商視覺設(shè)計(jì)師會直接進(jìn)行商品拍攝工作。拍攝出的商品圖片通常無法直接上傳，還需要電商視覺設(shè)計(jì)師對商品圖片進(jìn)行設(shè)計(jì)和美化，以保證商品呈現(xiàn)出比較理想的視覺效果，從而打動消費(fèi)者。1.2.2電商視覺設(shè)計(jì)師的工作內(nèi)容美化商品2．設(shè)計(jì)促銷活動電商平臺會不定期舉行各種促銷活動，這就需要電商視覺設(shè)計(jì)師能夠根據(jù)促銷活動主題，完成促銷期間店鋪首頁或平臺活動頁的設(shè)計(jì)。電商視覺設(shè)計(jì)師通過設(shè)計(jì)各個頁面，使消費(fèi)者充分了解活動內(nèi)容和促銷力度，從而促使消費(fèi)者積極地參與活動，提升購買力。1.2.2電商視覺設(shè)計(jì)師的工作內(nèi)容促銷活動3．設(shè)計(jì)詳情頁電商視覺設(shè)計(jì)師除了需要進(jìn)行商品圖片的設(shè)計(jì)和美化，有時還需要設(shè)計(jì)對應(yīng)商品的詳情頁。在設(shè)計(jì)商品詳情頁時，需要根據(jù)消費(fèi)者的需求，突出商品的賣點(diǎn)優(yōu)勢，以達(dá)到刺激消費(fèi)者的購買欲，促成交易的目的。1.2.2電商視覺設(shè)計(jì)師的工作內(nèi)容詳情頁面4．運(yùn)營推廣商品商家只有進(jìn)行積極、有效的推廣，才能夠令自己的網(wǎng)店在眾多網(wǎng)店中脫穎而出，而電商視覺設(shè)計(jì)師在商品的運(yùn)營、推廣中發(fā)揮著重要的作用。電商視覺設(shè)計(jì)師需要站在消費(fèi)者角度，深入挖掘消費(fèi)者的瀏覽習(xí)慣，根據(jù)商品的上架情況和促銷信息設(shè)計(jì)主圖、直通車圖、海報(bào)等促銷廣告。1.2.2電商視覺設(shè)計(jì)師的工作內(nèi)容商品推廣進(jìn)行電商視覺設(shè)計(jì)常用的軟件包括視覺設(shè)計(jì)、代碼制作、視頻剪輯和3D渲染這四類。建議設(shè)計(jì)師先掌握AdobePhotoshop和AdobeDreamweaver，有條件的話還要掌握CINEMA4D。1.2.3電商視覺設(shè)計(jì)師的常用軟件常用軟件1.3電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)基礎(chǔ)元素色彩搭配字體表現(xiàn)版式構(gòu)圖當(dāng)電商視覺設(shè)計(jì)師掌握了電商視覺設(shè)計(jì)的相關(guān)基礎(chǔ)知識之后，還要掌握電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)，這樣設(shè)計(jì)出的效果才能突出。下面分別從基礎(chǔ)元素、色彩搭配、字體表現(xiàn)和版式構(gòu)圖這四個方面對電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)進(jìn)行講解。1.3電商視覺設(shè)計(jì)的設(shè)計(jì)基礎(chǔ)1．點(diǎn)點(diǎn)是構(gòu)成一切形態(tài)的基礎(chǔ)，是最基本的視覺單位，具有凝聚視覺的作用。點(diǎn)的形狀多種多樣，整體分為圓點(diǎn)、方點(diǎn)、角點(diǎn)等規(guī)則點(diǎn)和自由隨意、任何形態(tài)的不規(guī)則點(diǎn)兩類。通過改變點(diǎn)的大小、形狀和位置，畫面可以呈現(xiàn)不一樣的效果。1.3.1基礎(chǔ)元素點(diǎn)元素2．線線是點(diǎn)移動的軌跡，是一切面的邊緣，具有分割畫面和處理界線的作用。線的形狀多種多樣，總的來說，可以分為直線和曲線。通過改變線的粗細(xì)、形狀、長短和角度，畫面可以呈現(xiàn)不一樣的效果。1.3.1基礎(chǔ)元素線元素3．面面是線移動的軌跡，可以拆分為點(diǎn)型的面和線型的面以及兩者結(jié)合的面。面的形狀多種多樣，針對網(wǎng)店設(shè)計(jì)，常用的面的形狀為方形、三角形及圓形的幾何形和墨跡、泥點(diǎn)及撕紙的非幾何形面。通過改變面的形狀，畫面可以呈現(xiàn)不一樣的效果。1.3.1基礎(chǔ)元素面元素1．主色：主色是畫面中面積最大、最為醒目的色彩，它決定了整個畫面的顏色調(diào)性。電商視覺設(shè)計(jì)師在選擇主色時，應(yīng)綜合考慮商品風(fēng)格、消費(fèi)人群等因素。2．輔助色：輔助色是用于襯托主色的顏色，其占用面積僅次于主色。使用輔助色可以使畫面色彩更加豐富、美觀。3．點(diǎn)綴色：點(diǎn)綴色是畫面中面積最小但較為醒目的顏色。合理使用點(diǎn)綴色可以起到錦上添花的作用。1.3.2色彩搭配色彩搭配1．宋體宋體筆畫有粗細(xì)變化，通常是橫細(xì)豎粗，末端有裝飾部分，點(diǎn)、撇、捺、鉤等筆畫有尖端，屬于襯線字體（serif）。宋體字有著纖細(xì)優(yōu)雅、文藝時尚的特點(diǎn)，常用于珠寶首飾、美妝護(hù)膚等以女性消費(fèi)者為主的電商內(nèi)容中。1.3.3字體表現(xiàn)宋體表現(xiàn)形式2．黑體黑體又稱方體或等線體，筆畫橫平豎直，粗細(xì)一樣，沒有襯線裝飾。黑體字有著方正粗獷、樸素簡潔的特點(diǎn)，常用于商品促銷、電子數(shù)碼和家用電器等電商內(nèi)容中。1.3.3字體表現(xiàn)黑體表現(xiàn)形式3．圓體圓體是由黑體演變而來的字體，在基于黑體的字形結(jié)構(gòu)上將拐角處和筆畫末端變?yōu)閳A弧狀。圓體有著圓潤、柔和的特點(diǎn)，常用于以兒童、少女為主要消費(fèi)人群的電商內(nèi)容中。1.3.3字體表現(xiàn)圓體表現(xiàn)形式4．手寫體（1）書法體。書法體是指傳統(tǒng)書寫字體，可分為篆、隸、草、行、楷五大類書體。書法體有著自由多變、蒼勁有力的特點(diǎn)，常用于茶、酒等需要表達(dá)傳統(tǒng)古典風(fēng)格的電商內(nèi)容中。1.3.3字體表現(xiàn)書法體表現(xiàn)形式4．手寫體（2）鋼筆體。鋼筆體是指使用硬質(zhì)材料的筆尖書寫的字體，鋼筆體粗細(xì)變化較小，注重字形結(jié)構(gòu)和線條走勢。鋼筆體有著清新文藝、輕松活潑的特點(diǎn)，常用于清新、活潑的電商內(nèi)容中。1.3.3字體表現(xiàn)鋼筆體表現(xiàn)形式1．左右構(gòu)圖左右構(gòu)圖是指將畫面通過黃金比例進(jìn)行左右分割，可根據(jù)文案將主體放置于畫面的左側(cè)或右側(cè)，這種構(gòu)圖極具美學(xué)價(jià)值，能夠表現(xiàn)出和諧與美感。1.3.4版式構(gòu)圖左右構(gòu)圖2．上下構(gòu)圖上下構(gòu)圖是指將畫面通過黃金比例進(jìn)行上下分割，通常將主體放置于畫面的下方，承載視覺點(diǎn)；文案則放置于畫面的上方，承載閱讀信息，這種構(gòu)圖呈現(xiàn)的視覺效果平衡且穩(wěn)定。1.3.4版式構(gòu)圖上下構(gòu)圖3．居中構(gòu)圖居中構(gòu)圖是指將主體放置于畫面的中心位置，這種構(gòu)圖能夠令主體快速吸引消費(fèi)者的目光，并表現(xiàn)出穩(wěn)定、均衡的感覺。需要注意的是，在使用這種構(gòu)圖方式時，可以小面積加入裝飾元素以避免畫面的呆板。1.3.4版式構(gòu)圖居中構(gòu)圖4．對角線構(gòu)圖對角線構(gòu)圖是指將主體放置于畫面的斜對角位置，這種構(gòu)圖能夠更好地呈現(xiàn)主體，表現(xiàn)出立體感、延伸感和運(yùn)動感。1.3.4版式構(gòu)圖對角線構(gòu)圖電商視覺設(shè)計(jì)的項(xiàng)目流程可以細(xì)分為六個步驟。1.4電商視覺設(shè)計(jì)的基本流程電商視覺設(shè)計(jì)項(xiàng)目流程圖單位規(guī)范頁面結(jié)構(gòu)布局規(guī)范文字規(guī)則1.5電商視覺設(shè)計(jì)的規(guī)范與規(guī)則學(xué)習(xí)電商視覺設(shè)計(jì)的基本規(guī)范是進(jìn)行電商視覺設(shè)計(jì)工作的必要前提，設(shè)計(jì)師只有遵循電商視覺設(shè)計(jì)的規(guī)范與規(guī)則，才能保證電商視覺設(shè)計(jì)的可行性與可用性。下面分別從單位規(guī)范、頁面結(jié)構(gòu)、布局規(guī)范和文字規(guī)則這四個方面對電商視覺設(shè)計(jì)規(guī)范規(guī)則進(jìn)行講解，以便為后續(xù)的設(shè)計(jì)工作奠定良好的基礎(chǔ)。1.5電商視覺設(shè)計(jì)的規(guī)范與規(guī)則1．英寸英寸（inch，in）是英式的長度單位，一般1英寸=2.54厘米，用于表示顯示設(shè)備的尺寸單位。1.5.1單位規(guī)范27英寸的臺式電腦15.6英寸的MacBookPro2．像素像素（pixels，px）是組成屏幕畫面最小的點(diǎn)。在電商視覺設(shè)計(jì)中，像素用于表示頁面的尺寸單位。新建界面1.5.1單位規(guī)范3．分辨率分辨率（Resolution）即屏幕中像素的數(shù)量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。在屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩。分辨率1.5.1單位規(guī)范1．店鋪首頁的頁面構(gòu)成在PC端中，店鋪首頁通常由店招、輪播海報(bào)、優(yōu)惠券、分類導(dǎo)航、商品展示和底部信息組成。在手機(jī)端中，店鋪首頁除了尺寸的變化，其頁面構(gòu)成與PC端幾乎相同。部分店鋪會根據(jù)商家需求，自行選擇加入“文字標(biāo)題”“店鋪熱搜”“排行榜”“逛逛更多”等模塊。1.5.2頁面結(jié)構(gòu)店鋪首頁的頁面構(gòu)成2．商品詳情頁的頁面構(gòu)成在PC端中，商品詳情頁通常由主圖、左側(cè)區(qū)域以及詳情區(qū)域組成。在手機(jī)端中，商品詳情頁除了尺寸的變化，其頁面構(gòu)成與PC端相比缺少了左側(cè)區(qū)域。1.5.2頁面結(jié)構(gòu)商品詳情頁的頁面構(gòu)成電商視覺設(shè)計(jì)中的布局主要運(yùn)用的是柵格系統(tǒng)。柵格系統(tǒng)，又稱為網(wǎng)格系統(tǒng)。在電商視覺設(shè)計(jì)中，我們利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些列或格子為基準(zhǔn)，進(jìn)行頁面的布局設(shè)計(jì)，使布局規(guī)范簡潔、有序。1.5.3布局規(guī)范柵格系統(tǒng)1.柵格系統(tǒng)的組成（1）單元格。柵格系統(tǒng)由格子組成網(wǎng)，因此基本單位是單元格。柵格系統(tǒng)需要先定義好柵格的最小單元大小，然后再以最小單元去定義柵格系統(tǒng)。1.5.3布局規(guī)范單元格1.柵格系統(tǒng)的組成（2）列+列間距+大邊距。當(dāng)確定好單元格后，則需要確定列、列間距和大邊距這三個元素。其中，列是內(nèi)容放置的區(qū)域；列間距是列與列之間的距離，有助于分離內(nèi)容；大邊距是內(nèi)容與屏幕左右邊緣之間的距離。1.5.3布局規(guī)范單元格2．柵格系統(tǒng)的搭建（1）確定屏幕寬度。搭建柵格系統(tǒng)的第一步是創(chuàng)建畫布，針對不同的設(shè)計(jì)項(xiàng)目，其寬度設(shè)置也會不同。在PC端電商視覺設(shè)計(jì)中，電商平臺屏幕寬度通常設(shè)置為1920像素。在手機(jī)端電商視覺設(shè)計(jì)中，電商平臺屏幕寬度通常設(shè)置為750像素，店鋪首頁寬度通常設(shè)置為1200像素。1.5.3布局規(guī)范確定屏幕寬度2．柵格系統(tǒng)的搭建（2）確定柵格區(qū)域。柵格區(qū)域應(yīng)結(jié)合尺寸，根據(jù)不同的布局確定。如果是寬度1920像素上下布局的電商視覺設(shè)計(jì)，柵格區(qū)域通常會在中間的安全寬度區(qū)域。根據(jù)設(shè)計(jì)項(xiàng)目的不同，安全寬度的尺寸也會發(fā)生變化。1.5.3布局規(guī)范確定柵格區(qū)域2．柵格系統(tǒng)的搭建（3）確定列數(shù)、列間距、大邊距。①列數(shù)。PC端電商視覺設(shè)計(jì)常用的列數(shù)為12列。移動端電商視覺設(shè)計(jì)的列數(shù)則以6列和12列為主。1.5.3布局規(guī)范列數(shù)2．柵格系統(tǒng)的搭建（3）確定列數(shù)、列間距、大邊距。②列間距。列間距以及橫向間距的寬度可以依照最小單元格8像素為增量進(jìn)行統(tǒng)一設(shè)置，如8、16、24、32、40。其中24像素最為常用。手機(jī)端電商可根據(jù)App設(shè)計(jì)規(guī)范，一般有24、30、32、40，建議采用30像素或32像素。1.5.3布局規(guī)范列間距2．柵格系統(tǒng)的搭建（3）確定列數(shù)、列間距、大邊距。③大邊距。大邊距的設(shè)置通常是列間距的0、0.5、1.0、1.5、2.0等倍數(shù)。手機(jī)端電商可根據(jù)App設(shè)計(jì)規(guī)范，一般有20像素、24像素、30像素、3