電子商務視覺設(shè)計（第2版）完整全套教學課件

全套PPT課件第1章初識電商視覺設(shè)計電商視覺設(shè)計近年來受到了國內(nèi)各大企業(yè)和知名品牌的高度重視，特別

是在以淘寶天貓為代表的電商平臺中，電商視覺設(shè)計理念運用得非常廣泛，

效果也很明顯。本章將介紹一些電商視覺設(shè)計的基礎(chǔ)知識，如視覺設(shè)計的概

念、電商視覺設(shè)計前的準備和電商視覺設(shè)計的黃金構(gòu)圖法等。本課件是可編輯的正常PPT

課件目

錄cONTENTS1.1

什么是視覺設(shè)計1.2

電商視覺設(shè)計前的準備1.3電商視覺設(shè)計的黃金構(gòu)圖法本課件是可編輯的正常PPT

課件1

.

1什么是視覺設(shè)計視覺設(shè)計是針對眼睛功能的表現(xiàn)手

段，通俗地說就是通過一些設(shè)計讓產(chǎn)品

的視覺效果更加出彩。因為這些設(shè)計是

針對我們眼睛的特點進行的，所以又被

稱為視覺設(shè)計。視覺設(shè)計大體上可分為

視覺識別設(shè)計和視覺傳達設(shè)計，下面將

分別對其進行介紹。視覺識別設(shè)計來源于企業(yè)形象識別系統(tǒng)(Corporate

Identity

System,

CIS

)。企業(yè)形象識別系統(tǒng)一般分為三個方面：

·

企業(yè)的理念識別(Mind

Identity,MI

)

·

行為識別(Behavior

Identity,BI

)·

視覺識別(Visual

Identity,VI

)視覺識別系統(tǒng)規(guī)范手冊就是用來規(guī)范企業(yè)形象設(shè)計的圖書，內(nèi)容主要分為基本設(shè)計

要素和應用設(shè)計要素兩個部分：·

基本設(shè)計要素包括企業(yè)名稱、企業(yè)標志、

標準字體和標準色彩·

應用設(shè)計要素是基本設(shè)計要素在企業(yè)旗

幟、員工制服、商品包裝、名片證件等

媒體上應用時的規(guī)范經(jīng)營理念、發(fā)展戰(zhàn)略MI

精神標語、企業(yè)文化價值觀念、道德標準員工教育、禮儀規(guī)范CIS公共關(guān)系、促銷活動標志、字體、顏色企業(yè)旗幟、員工制服1.1.1視覺識別設(shè)計本課件是可編輯的正常PPT

課件CIS的構(gòu)成1916年

1923年1936年

1954年2017年

2000年1.1.1視覺識別設(shè)計視覺識別設(shè)計最初只是為了設(shè)計一套能夠?qū)⒆约号c其他企業(yè)區(qū)別開來的標識系統(tǒng)，后來逐漸演

變?yōu)槠髽I(yè)文化的外在表現(xiàn)部分。寶馬標志的演進本課件是可編輯的正常PPT

課件1.1.2視覺傳達設(shè)計視覺傳達設(shè)計視覺傳達設(shè)計是以視覺媒介為載體，以文字、圖形和色彩作為創(chuàng)作要素，利用視覺形象傳達特定的信息給受眾，從而對被傳達對象產(chǎn)生影響的過程。視覺傳達的作用是讓人與人之間利用“看”的形式進行交流。本課件是可編輯的正常PPT

課件紅白裝圣誕老人形象1

.2電商視覺設(shè)計前的準備電商的視覺設(shè)計從形式上看都是利用視覺手段

吸引消費者和提高銷售的，但是目前大多數(shù)網(wǎng)店裝

修偏重于設(shè)計，核心內(nèi)容是視覺展示。從大多數(shù)網(wǎng)店的實際運營效果來看，

一味追求

視覺效果的結(jié)果往往不夠理想，雖然設(shè)計了足夠美

觀的頁面，銷量卻沒有顯著提升。在視覺設(shè)計前，

應該進行自身分析，先對網(wǎng)店有一個視覺定位，并且要明確視覺規(guī)范的作用。520禮遇季時尚配飾限時搶好禮立即搶購>營銷型網(wǎng)店營銷型網(wǎng)店的視覺定位1.2.1網(wǎng)店的視覺定位本課件是可編輯的正常PPT課件營銷型網(wǎng)店的視覺定位原則在于營造促銷氛圍。品牌型網(wǎng)店

本課件是可編輯的正常PPT

課件品牌型網(wǎng)店的視覺定位原

則是突出品牌優(yōu)勢。品牌型網(wǎng)店的視覺定位1.2.1網(wǎng)店的視覺定位舒適休閑皮鞋點擊查看男士休閑皮鞋點擊查時尚休閑鞋點擊查時尚休閑鞋點擊查服務關(guān)系型網(wǎng)店的視覺定位原則是包裝服務形象。SERVICE-放心購買-服務關(guān)系型網(wǎng)店的視覺定位1.2.1網(wǎng)店的視覺定位本課件是可痛輯掣座常PPT課件客服服務提供貼心服務在線時間：8:00-凌晨2:00無憂退換不影響二次銷售情況下

7天無理由退貨換貨尊享配送提供順豐快遞購物無憂快捷到家一年質(zhì)保專屬客服處理售后問題一年保修售出不是結(jié)束服務剛剛開始統(tǒng)一識別視覺規(guī)范可以確保網(wǎng)店在整體風格、售前售后服務和產(chǎn)品包裝形象

等方面都保持整體風格的一貫性，既有利于消費者識別和區(qū)分店鋪，也可以避免消費者在瀏覽時出現(xiàn)理解困難，甚至是理解錯誤的現(xiàn)象節(jié)約資源除了活動海報等個性模塊之外，其他的頁面和模塊也參照規(guī)范進行設(shè)計，可以極大地減少設(shè)計時間，從而達到節(jié)約資源的目的重復利用設(shè)計相同屬性的模塊或頁面時，執(zhí)行視覺規(guī)范有利于減少無關(guān)的信息，方便消費者的閱讀和信息傳遞。同時，視覺規(guī)范也有利于美工人員之間的

協(xié)調(diào)工作。標準化的視覺規(guī)范不僅可以節(jié)約設(shè)計時間，還可以避免出錯本課件是可編輯的正常PPT

課

件1.2.2明確視覺規(guī)范的作用視覺規(guī)范的意義1

.

3電商視覺設(shè)計的黃金構(gòu)圖法在現(xiàn)實生活與自然界中，幾何圖形的美幾乎隨處可見，

簡單的三角形、正方形、長方形、圓形甚至幾根線條就可以

組成很多有趣的圖形，很符合現(xiàn)代審美的要求，并且適當?shù)?/p>

畫面切割能給頁面帶來動感與節(jié)奏感。在頁面中加入幾根線

條或幾個塊，就能起到意想不到的效果。構(gòu)圖方法大致可以分為對稱切割構(gòu)圖法、組合切割構(gòu)圖

法、整體場景構(gòu)圖法、多重切割構(gòu)圖法、簡單切割構(gòu)圖法、

流程構(gòu)圖法、放射構(gòu)圖法和物體輪廓構(gòu)圖法。天午貨經(jīng)典功能款水溫三擋調(diào)節(jié)+清洗>950天貓午貨節(jié)全功能性價款六大清洗+按摩除臭露

1499立天貓午貨節(jié)即熱遙控款瞬時加熱+潔凈節(jié)能1799對稱切割構(gòu)圖法的前提一般是將內(nèi)容分

為對立的兩部分，(將整個頁面一分為二),劃分明確。這種設(shè)計具有視覺沖擊力，可以使畫面

具有平衡不失重的效果。1.3.1對稱切割構(gòu)圖法本課件是可編輯的正常PPT

課件1.3.2組合切割構(gòu)圖法組合切割構(gòu)圖法是通過集中而有規(guī)律的

排列從整體上抓住人們的視覺，讓整個頁面

設(shè)計更具有立體感。這種構(gòu)圖方式適合每個區(qū)塊中的內(nèi)容屬

于平級關(guān)系產(chǎn)品的展示，能夠保持各種內(nèi)容

的并列關(guān)系，讓布局更具創(chuàng)意。十不IT

人上J

習t輯白新

發(fā)pp

布|1.3.3整體場景構(gòu)圖法整體場景構(gòu)圖法專題內(nèi)容不多，適用于促銷、節(jié)日、活動等頁面。在設(shè)計這種頁面時，設(shè)計人員的頭腦中對專題內(nèi)容要有畫面感，首先搭建大的畫面關(guān)系，再往里面添加細節(jié)和內(nèi)容。切記場景不要搶了內(nèi)容的視覺焦點，在適當?shù)臅r候可以做些減法。本課件是可編輯的正常PPT

課件1.3.4多重切割構(gòu)圖法多重切割構(gòu)圖法的構(gòu)圖不規(guī)則，穩(wěn)定而

銳利，可以讓單一的頁面變得生動、復雜的

頁面變得時尚，避免畫面出現(xiàn)生硬感，不宜

產(chǎn)生審美疲勞。不同的形狀和排列呈現(xiàn)出來的視覺效果

也不一樣。這種構(gòu)圖方式一般適用于體現(xiàn)時

尚感、科技感與鋒利感的專題。小不漏輯的正常1.3.5簡單切割構(gòu)圖法簡單切割構(gòu)圖法使用簡單的線條或圖案

整齊地分割整個頁面，使頁面變得有趣、生

動，使內(nèi)容區(qū)域得到有效劃分。這類構(gòu)圖方式對內(nèi)容沒有過多的要求，

可以隨意安排，具體排版可根據(jù)內(nèi)容來處理。

這類構(gòu)圖法同樣具有不可忽視的視覺沖擊力。中不

是m

輯

…1.3.6流程構(gòu)圖法如果設(shè)計創(chuàng)意需要按照循序漸進的方式

展現(xiàn)產(chǎn)品，那么不妨采用流程構(gòu)圖法。流程構(gòu)圖法能夠?qū)⒉襟E、關(guān)系、各個節(jié)

點及整體流向展示清楚，讓枯燥的流程瞬間

變得簡潔明了、個性十足，并充滿趣味性。十

不IT

人上J

州輯的正常PP1.3.7放射構(gòu)圖法放射構(gòu)圖法能展示出由一個中心點向四周擴散的效果，起到導向的作用，讓整體頁面呈現(xiàn)出

立體與空間感，畫面沖擊力強，富有動感。需要注意的是，放射狀的排版不太適合文字閱讀，要注意文字排版的方式。在文字數(shù)量較少

的情況下可以選擇這種構(gòu)圖。本課件是可編輯的正常PPT

課件1.3.8物體輪廓構(gòu)圖法物體輪廓構(gòu)圖法主要適用于活動、節(jié)日

或新品創(chuàng)意等專題。我們可以根據(jù)專題的主

要內(nèi)容從整體上構(gòu)建一個邊界或外形線，形

成一個大的輪廓，將內(nèi)容巧妙地填充進去。需要注意的是，設(shè)計時要將形狀進行輪

廓化，加以強調(diào)突出，主體不需要太抽象，

應舍棄一些煩瑣、次要的元素，以

免影響閱

讀。本課件是可編輯的1.列舉幾個除寶馬公司之外的企業(yè)導入視覺

識別系統(tǒng)的案例。2.結(jié)合本章內(nèi)容及其他案例說明品牌型網(wǎng)店與營銷型網(wǎng)店在視覺定位上的區(qū)別。3.在淘寶上搜索皇冠店鋪，分析此類店鋪在

視覺設(shè)計上的共性與優(yōu)勢。4.列舉幾個采用黃金構(gòu)圖法的電商視覺設(shè)計

案例。課后習題本課件是可編輯的正常PPT

課第2章電商網(wǎng)站視覺配色設(shè)計大多數(shù)人對色彩畫面的敏感度強于文字，同時色彩是通過人的印象或者

聯(lián)想來產(chǎn)生心理上的影響的，而配色設(shè)計的作用就是通過改變空間的舒適程

度和環(huán)境氣氛來滿足人們各方面的要求。如何正確地進行視覺配色設(shè)計是電

商視覺設(shè)計者必備的技能。本課件是可編輯的正常PPT

課件目錄

cONTENTS2.1

網(wǎng)店頁面的配色方案2.2

網(wǎng)店頁面的配色誤區(qū)2.3

網(wǎng)店的整體配色案例本課件是可編輯的正常PPT

課件2.1網(wǎng)店頁面的配色方案想要自己的網(wǎng)店脫穎而出，視覺設(shè)計至關(guān)

重要。在網(wǎng)店視覺設(shè)計中，最能吸引消費者的

顯性因素是色彩。不同的色彩產(chǎn)生的生理和心

理效應不同，不同的商品也有不同的色彩特性。

因此，在網(wǎng)店視覺設(shè)計中，只有將色彩搭配運用得恰到好處才能制作出獨特的藝術(shù)效果。2.1.1色搭原則七要素01

漸進配色漸進配色是指按色相、明度、艷度三要素有序地排列。其特點是即使色調(diào)沉穩(wěn)，也很醒目，尤其是色相和明度的漸進配色。明度的漸進配色本課件是可編輯的正常PPT課件2.1.1色搭原則七要素02

對比配色對比配色是指用色相、明度或艷度的反差進行搭配，有鮮明的強弱感。對比配色本課件是可編輯的正常PPT課件2.1.1色搭原則七要素03

色調(diào)配色色調(diào)配色是指具有某種相同性質(zhì)(冷暖調(diào)、明度、艷度)的色彩搭配在一起，色相越全越好，

最少也要三種色相以上。彩虹色調(diào)配色本課件是可編輯的正常PPT

課件2.1.1色搭原則七要素04

近似配色近似配色是指選擇相鄰或相近的色相進行搭配。如果是單一色相的濃淡搭配，則稱為同色系配色。本課件是可編輯的正常PPT課件近似配色2.1.1色搭原則七要素05

單重點配色單重點配色是指讓兩種顏色形成面積的大反差。其實，單重點配色也是一種對比，相當于一種顏色作底色、另一種顏色作圖形。單重點配色本課件是可編輯的正常PPT

課件如果兩種顏色比較接近，看上去不分明，就可以將對比色加在這兩種顏色之間，增加強度，整體效果會很協(xié)調(diào)。最簡單的加入色是無色系的顏色和米色等中性色。分隔式配色本課件是可編輯的正常PPT

課件2.1.1色搭原則七要素高明度或鮮亮的冷色與低明度的暖色配在一起稱為夜配色或影配色。它的特點是神秘、遙遠，

充滿異國情調(diào)、民族風情。服裝夜配色本課件是可編輯的正常PPT

課件2.1.1色搭原則七要素色相紅色橙色黃色心理感受興奮、熱情、不安

能量、激進、快樂

鮮明、歡快、喜悅

清新、活力、健康

冷靜、憂傷、嚴謹

高貴、氣質(zhì)、智慧

肅穆、黯然、神秘

神圣、無邪、質(zhì)樸通常會聯(lián)想到的商品敬酒服、年貨、紅包、口紅食品、暖光燈具熒光筆、蜂蜜、檸檬藥品、健身器材、環(huán)保袋、空氣凈化器、盆栽男士用品、科技電子產(chǎn)品晚禮服、化妝品高端奢侈品、車飾、鼠標、鍵盤婚紗、醫(yī)療用品、餐飲器皿綠色藍色紫色

黑色白色灰色科技、樸素、優(yōu)雅戒指、手機、電腦不同色彩的心理感受與聯(lián)想本課件是可編輯的正常PPT

課件2.1.2色彩的聯(lián)覺聚焦圖片右圖右圖主要以檢黃色為主，與

我想要購買的零食形象色彩相

匹配，說不定正式與零食相關(guān)的

圖片，我要繼續(xù)了解一下繼續(xù)關(guān)注圖片信息，并可能

會執(zhí)行點擊操作色彩對購買行為的影響左圖左圖主要以淺紫色為主，

好像與我想要購買的零食形象

色彩不搭調(diào)，這種圖片應該不

是我需要的圖片不再關(guān)注圖片中的信息與

內(nèi)容，放棄點擊操作2.1.2色彩的聯(lián)覺聚焦圖片本課件是可編輯的正常PPT

課件零食商品的不同色調(diào)對比2.1.3網(wǎng)店風格的形成要素01

店鋪的主要風格常見的店鋪風格有簡約清爽型、商業(yè)型、炫酷型、可愛型和特色型等。簡約清爽型店鋪

商業(yè)型店鋪課件是可編輯讎正常PPT

課店鋪

特色型店鋪02

產(chǎn)品的情緒女裝風格：可劃分為韓式風格、淑女風格、嬉皮風格、波西米亞風格、田園風格和民族風格等。韓式風格

淑女風格本課件爆執(zhí)編輯的止最調(diào)俗田園風格民族風格2.1.3網(wǎng)店風格的形成要素02

產(chǎn)品的情緒男裝風格：可分為傳統(tǒng)風格、商務休閑風格、運動風格、英倫風格和時尚休閑風格等。傳統(tǒng)風格

商務休語件是因編贏圖正常PP類褐格

時尚休閑風格2.1.3網(wǎng)店風格的形成要素2.1.3網(wǎng)店風格的形成要素03

活動的主題氣氛店鋪的主題氣氛主要通過店鋪的

配色和裝飾來烘托?！?/p>

以國慶節(jié)為主題的店鋪配色大多采用紅色，然后通過燈籠和煙花等元素來體現(xiàn)國慶節(jié)的節(jié)日氣氛。·

以七夕節(jié)為主題的店鋪大多采用紫色、粉色等可以表達浪漫和甜蜜的

色彩，然后使用鵲橋等元素來體現(xiàn)

七夕的節(jié)日氣氛。本課件是可編輯的正常PPT課的主題氣氛2.1.3網(wǎng)店風格的形成要素04

店鋪的包裝色彩網(wǎng)店主題色調(diào)應該與商品特性相符

合或者與目標消費群體的特性相符合?！?/p>

如果網(wǎng)店主營18～30歲的女性時尚

服飾，那么比較適合的主題色就應選偏粉色、紅色的柔和浪漫色系?！と绻W(wǎng)店主營手機、相機等數(shù)碼類產(chǎn)品，那么藍色、黑色和灰色系往往會給消費者理智、高貴、沉穩(wěn)的感覺。本課件是可編輯的正端系課件偏藍色系VI(視覺識別)配色是指在網(wǎng)店配色中提取

VI

或包裝中的主色彩，主要分為單色

VI、雙色

VI和多色VI?！と绻赇丩ogo

為單色，那么單色VI

配色方案就以該顏色作為整個店鋪的主色或輔色，這樣可

以使整個店鋪看起來上下呼應、干凈利落?！?/p>

如果店鋪Logo

由兩種顏色組成，那么雙色VI

配色方案就以其中一種顏色作為店鋪的主色調(diào)、

另一種顏色作為輔色?！?/p>

如果店鋪Logo

由三種及三種以上顏色組成，那么多

色VI

配色方案就以其中一種顏色作為店鋪

的主色調(diào)，其余顏色作為輔色。本課件是可編輯的正常PPT

課件2.1.3網(wǎng)店風格的形成要素2

.2網(wǎng)店頁面的配色誤區(qū)店鋪的裝修對其銷售的幫助非常大，越來

越多的賣家已經(jīng)認識到這一點。在店鋪裝修時，

千萬要注意顏色的運用及色彩搭配，因為不合理的色彩搭配反而會造成負面影響。下面將詳細介紹常見的網(wǎng)店頁面的配色

誤區(qū)。2.2.1色彩過多有的店鋪頁面把盡可能多的色彩都搬了

上來，同一個頁面上色彩眾多，多種色彩同

時使用令人眼花繚亂，造成了版面復雜、混

亂的視覺效果，對消費者獲取和理解信息毫

無幫助，反而帶來了負作用。因此，在設(shè)計配色時，要有一種主色貫

穿其中。主色不一定是面積最大的顏色，也

可以是最重要、最能揭示和反映主題的顏色。

切

記

，不要將所有顏色都用到，盡量將配色

控制在3～5種。本課件是可編輯的正常PPT課件色彩過多2.2.2背景和文字對比不強烈人眼識別色彩的能力有一定的限度，由于顏色的同化作用，顏色與顏色之間對比強者易于分辨，弱者難以分辨?！?/p>

背景與文字對比不強烈，則文字內(nèi)容沒法突出，且昏暗的背景令人沮喪，用花紋繁復的圖案作背景更容易讓人眼花繚亂?！?/p>

背景和文字顏色對比不強烈，容易讓人看不清楚，使商品的辨識度降低。本課件是可編輯的正常PPT課和文字對比不強烈2.2.3過分強調(diào)色彩的刺激度人們上網(wǎng)絕不希望自己的視力受損，因此我們在頁面配色時要盡量少用容易引起視覺疲勞的色調(diào)。一般來說，高明度、高純度的顏色刺激度高，疲勞度也高。在無彩色系中，白色的明度最高，黑色的明度最低；在有彩色系中，最明亮的是黃色，最暗的是紫色。需要注意的是，刺激強度高的色彩不宜大面積使用，出現(xiàn)頻率也不宜高。低明度色彩造成的疲勞度雖然小，但是往往會使人產(chǎn)生壓抑感，所以也不建議將頁面設(shè)計得過于暗淡。本課件是可編輯的正常PPT

課僵調(diào)色彩刺激度2

.3

網(wǎng)店的整體配色案例下面設(shè)計制作一個食品店鋪頁面，整體頁

面以淺綠色為主色，以黃、褐色為輔色，給人

以清新、天然的感覺。本案例制作大致分為店鋪頁面主色設(shè)計、

店鋪頁面文案配色設(shè)計與店鋪頁面輔色設(shè)計三

個步驟。選用綠色作為店鋪的主色調(diào)，可以更好地凸顯產(chǎn)品的誘人與美味本課件是喻編輯的正常PPT

課件選用黃色作為食品店鋪

的熱銷款推薦板塊背景，

可以刺激瀏覽者的食欲，

引導消費者購買店鋪中

的產(chǎn)品選用綠色作為優(yōu)惠券的

背景，與店長推薦板塊

的背景顏色相呼應，給

人一種上下統(tǒng)一的視覺感受2.3.1店鋪頁面主色設(shè)計本課件是可編輯的正常PPT

課件2.3.2店鋪頁面文案配色設(shè)計本課件是可編輯的正常PPT

課件2.3.3店鋪頁面輔色設(shè)計本課件是可編輯的正常PPT

課件1.列舉幾個近似配色和色調(diào)配色的設(shè)計案例。2.分析色彩的聯(lián)覺現(xiàn)象對珠寶類產(chǎn)品的影響。3.分別列舉炫酷型、可愛型和特色型的店鋪

風格設(shè)計案例。4.為男裝店鋪首頁進行整體配色設(shè)計，效果

如右圖所示。課后習題本課件是可編輯的正常PPT

課作系男裝店鋪首頁第

3

章

店鋪標志視覺設(shè)計大到國際連鎖品牌，小到零售網(wǎng)店都需要屬于自己的獨特店鋪標志。

店標作為一個非常重要的店鋪視覺

VI,

有著非常重要的傳播作用，這意

味著店標作為一個固定標志會長期、反復地出現(xiàn)在各種場合，代表著店

鋪的形象及經(jīng)營內(nèi)容和更多與營銷有關(guān)的信息。因此，店標的設(shè)計要盡

可能地吸引消費者的眼球。本課件是可編輯的正常PPT

課件目

錄cONTENTS3.1

店標的設(shè)計形態(tài)3.2

店標的設(shè)計技巧3.3

不同行業(yè)的店標設(shè)計3.4

店標的設(shè)計流程本課件是可編輯的正常PPT

課件3

.

1店標的設(shè)計形態(tài)從設(shè)計的表達形態(tài)來看，店標可以

分為以下幾種：(1)中文文字型店標(2)非中文型店標(3)組合型店標(4)圖形型店標如果要選擇中文文字型店標作為制作的目標，特別要注意文字的精簡和信息的傳達。因為店

標的尺寸大小有限，能夠把字看清楚并且醒目是最好的，想給予太多的信息反而會讓傳達效果

大打折扣。本課件是可編輯的正常PPT

課件3.1.1中文文字型店標中文文字型店標主要以文字單獨構(gòu)成，適用于多種傳播方式，最大的優(yōu)點是一目了然，消費者對中文文字的接受度最高，好辨識也好記憶?！?/p>

選擇非中文型店標時，特別要注意店鋪出售商品的范圍和商品的風格是否和店標的感覺貼近?！?/p>

同樣，因為英文標識不好理解，所以應該以簡單和強烈的視覺沖擊力為主?！?/p>

至于顏色搭配，也多以沖擊力強的對比色搭配為主，比如歐美風格較多采用黑白搭配、女性

化風格較多采用黑白紅搭配。本課件是可編輯的正常PPT

課件3.1.2非中文型店標對于非中文的標識來說，英文和字母會給人一種很酷的感覺，能給人留下深刻的印象，但其內(nèi)容是什么意思并不會第一時間讓消費者理解清楚，所以我們可以把它看作是一個符號。3.1.3組合型店標組合型店標讓消費者有一種中西結(jié)合、和國際接軌的大牌感覺。在表達形式上，非中文的部分設(shè)計感比較強，視覺沖擊力比較大，所以形式多種多樣，給人的視覺感受不錯?！?/p>

在設(shè)計組合型店標時，如果非中文的部分比較簡單，那么它本身就很有視覺沖擊力，可以模

仿前兩種店標的形式將其充分表現(xiàn)；·如果非中文部分比較長、比較復雜，那么可以把中文部分做得比較有視覺沖擊力。

本課件是可編輯的正常PPT課件在上圖中，四張圖片都為毛絨玩具店的店標，店標上沒有什么字符，所以給人的印象不是很

深刻，不配合店名一起來看就不會記得是什么店鋪。因此，不建議使用單純的圖形型店標。本課件是可編輯的正常PPT

課件3.1.4圖形型店標圖形型店標就是直接用圖形作為店標。3.1.5圖文結(jié)合型店標圖文結(jié)合型店標就是圖形與文字相結(jié)合的店標形式。用圖形作為店標時，如果不帶入店名或者品牌名，記憶力是比較有限的，帶上文字信息后會讓人一目了然。這種店標既具有圖形化的視覺沖擊力，又能清楚地表達店鋪品牌信息，所以應用非常廣泛。本課件是可編輯的正常PPT

課件3

.

2店標的設(shè)計技巧一個出色的店標設(shè)計不僅能吸引消

費者的眼球，還能增加店鋪的瀏覽量。在設(shè)計店標時，可以運用以下設(shè)計技巧。(1)設(shè)計要有造型(2)設(shè)計要有領(lǐng)導性(3)標志設(shè)計的統(tǒng)一性(4)標志的識別性(5)標志的時代性(6)標志的系統(tǒng)性(7)標志的延伸性3.2.1設(shè)計要有造型在設(shè)計店標時，最好要有個性的造型。因為店標造型的優(yōu)劣不僅決定了其傳達店鋪信息的效

力，還會影響到消費者對商品品質(zhì)的信心與店鋪形象的認同。有造型的食品店標設(shè)計本課件是可編輯的正常PPT

課件3.2.2設(shè)計要有領(lǐng)導性店標視覺設(shè)計是網(wǎng)店視覺傳達的核心要素，也是網(wǎng)上店鋪開展信息傳達的主導力量。標志是

店鋪經(jīng)營理念和經(jīng)營活動的集中表現(xiàn)，貫穿了整個店鋪的相關(guān)活動，不僅具有權(quán)威性，還是其他

視覺要素構(gòu)成的核心。因此，店標設(shè)計的前提就是要有領(lǐng)導性。具有領(lǐng)導性的食品店店標設(shè)計本課件是可編輯的正常PPT

課件

緣中圖HU1×1ANOYUAN徽3.2.3標志設(shè)計的統(tǒng)一性標志的形象設(shè)計需要與該店鋪的經(jīng)營理念、文化特色，以及經(jīng)營的內(nèi)容和特點相統(tǒng)一，只

有這樣才能獲得消費者的一致認同。具有統(tǒng)一性的女裝店標設(shè)計本課件是可編輯的正常PPT

課件3.2.4標志的識別性識別性是店標設(shè)計的基本要求。通過獨具個性的標志與其他店鋪及商品進行區(qū)別是現(xiàn)代電子

商務市場競爭的利器，因此通過整體規(guī)劃和設(shè)計的視覺符號必須具有獨特的個性和強烈的沖擊力，

才能具有較強的競爭力。在CI設(shè)計中，標志是最具視覺認知、識別信息傳達功能的設(shè)計要素。具有識別性的食品店標設(shè)計本課件是可編輯的正常PPT

課件3.2.5標志的時代性面對發(fā)展迅速的電商市場以及不斷變化的市場競爭形式，有必要對現(xiàn)有的標志形象進行改進，才能使網(wǎng)店標志更加與時俱進，具有鮮明的時代特征。具有時代性的食品店標設(shè)計本課件是可編輯的正常PPT

課件3.2.6標志的系統(tǒng)性標志的識別設(shè)計一旦確定，隨之展開的就是標志的精致化。這其中包括標志與其他基本設(shè)計

要素的組合規(guī)定，目的就是要對未來標志的應用進行規(guī)劃，以達到系統(tǒng)化、規(guī)范化、標準化的科學管理。具有系統(tǒng)性的家紡店店標設(shè)計本課件是可編輯的正常PPT

課件3.2.7標志的延伸性標志的識別設(shè)計是應用最為廣泛、出現(xiàn)頻率最高的視覺傳達要素，有時需要在各種傳播媒體上廣泛應用。標志圖形要根據(jù)印刷方式、制作工藝技術(shù)、材料質(zhì)地和應用項目采用多種對應性和

延展性的變體設(shè)計，以產(chǎn)生切合、適宜的效果與表現(xiàn)。具有延伸性的女裝店店標設(shè)計本課件是可編輯的正常PPT

課件3

.3不同行業(yè)的店標設(shè)計在設(shè)計店標時，不同的行業(yè)和類目針對不

同的消費者和不同的營銷目的會有一些設(shè)計上的共性和個性，下面舉例說明。3.3.1表現(xiàn)柔美型針對女性的行業(yè)和類目，多數(shù)要表現(xiàn)出女性的柔美與嬌媚。柔美型店標設(shè)計本課件是可編輯的正常PPT

課件3.3.2表現(xiàn)陽剛型針對男性的行業(yè)和類目，要重點表現(xiàn)男性的陽剛之美。陽剛型店標設(shè)計本課件是可編輯的正常PPT

課件3.3.3表現(xiàn)可愛型針對年輕女孩和嬰幼兒的行業(yè)和類目，要突出可愛、萌萌的感覺?？蓯坌驮O(shè)計本課件是可編輯的正常PPT

課件3

.4店標的設(shè)計流程下面通過一個實際案例來介紹店標的

設(shè)計流程。在設(shè)計店標前，首先要和客戶

或領(lǐng)導進行溝通，對店標設(shè)計來說溝通是

極為重要的，因為這樣可以大大提高工作

效率。在本案例中，首先得知店鋪名稱是

“鮮果”,主營項目是水果，希望從店標上可以體現(xiàn)出水果店鋪的風格。1

.簡述一個優(yōu)秀的徽標都具有哪些特點。2.分析徽標設(shè)計規(guī)范的重要性。3.淘寶搜索家居類店鋪，并分析它們的

店標分別屬于哪一類。4.根據(jù)本章所講內(nèi)容設(shè)計一個文具類店

鋪店標，效果如右圖所示。課后習題本課件是可編輯的正常PPT

課件制作店標第4章店鋪首頁視覺設(shè)計店鋪首頁在電商店鋪中所起到的作用就好像實體店的店面，作為品牌的門臉，

它的主要作用是向消費者做展示，通過視覺、氛圍、商品和服務的綜合感受讓消

費者對品牌有初步的了解和接觸。首頁設(shè)計得是否有新意直接關(guān)系到商品信息的

轉(zhuǎn)化率，因此在進行店鋪首頁視覺設(shè)計時要盡可能地讓設(shè)計能夠聚集消費者的注

意力，提高商品信息的轉(zhuǎn)化率，這才是首頁視覺設(shè)計要達到的重要目的。本課件是可編輯的正常PPT

課件目

錄cONTENTS4.1

首頁視覺水平的四大指標4.2

店招視覺設(shè)計4.3

首焦輪播區(qū)視覺設(shè)計4.4

商品陳列區(qū)視覺設(shè)計4.5

茶葉店鋪首頁視覺設(shè)計案例

本課件是可編輯的正常PPT

課件4

.

1首頁視覺水平的四大指標判斷一個店鋪首頁設(shè)計是否合格要

從四大指標來評判：首頁跳失率、首頁

點擊率、首頁人均點擊次數(shù)和首頁平均

停留時間。4.1.1首頁跳失率首頁跳失率首頁跳失率是指消費者通過某種渠道

進入店鋪，只訪問了一個首頁就離開的訪

問次數(shù)占該入口總訪問次數(shù)的比例。針對不同的店鋪規(guī)模和所售商品的類

型，可以參照的判斷標準是：·

如果是心級店鋪，那么跳失率在70%及

以下都屬于正常，不需要進行優(yōu)化?！?/p>

如果是鉆級店鋪，那么跳失率在60%以

上就需要考慮是否是海報設(shè)計和商品信

息的問題了，需要根據(jù)具體的數(shù)據(jù)做出

相應的優(yōu)化與調(diào)整。淘寶首頁搜索店鋪首頁收藏夾中進入店鋪首頁已經(jīng)購買商品中進入店鋪首頁搜索關(guān)鍵詞進入店鋪首

頁本課件是可編輯的正常PPT

課件買家進入店鋪首頁的渠道首頁點擊率首頁點擊率是商品在首頁展現(xiàn)

后的被點擊比率，即首頁點擊率=

首頁點擊量÷首頁展現(xiàn)量。店鋪的首頁大致可以分為兩類：

·

店鋪首頁羅列出各種光彩奪目的

商

品，希望有一款商品能夠吸引

消費者?！さ赇伿醉摏]有單品展示，以全屏

商品海報形式引導為主。本課件是可編輯的正常PPT

課件4.1.2首頁點擊率兩類店鋪首頁排版人均點擊次數(shù)變化趨勢V許?1.51.20.90.60.3006/08

06/15

06/2206/29

07/06■人均點擊次數(shù)4.1.3首頁人均點擊次數(shù)首頁人均點擊次數(shù)首頁人均點擊次數(shù)是指在一段時間內(nèi)人均點擊了多少次。人均點擊次數(shù)本課件是可編輯的正常PPT

課件4.1.4首頁平均停留時間首頁平均停留時間首頁平均停留時間為訪問店鋪首頁的所有訪客總的停留時長除以訪客數(shù)(單位：秒),多天的

平均停留時間為各天人均停留時長的日均值。行業(yè)性質(zhì)不同，每個訪客在不同行業(yè)店鋪中停留的時間差異很大。在進行分析時，可以以一段

時間內(nèi)訪客在店鋪首頁的平均停留時間作為基數(shù)，并記錄下這段時間的銷售量，以后再拿新數(shù)據(jù)進行對比就知道平均停留時間內(nèi)銷量是提高了還是下降了。本課件是可編輯的正常PPT

課件4

.

2店招視覺設(shè)計同實體店一樣，網(wǎng)店也有自己的店招。店

招位于店鋪首頁的頂端，用于指示和引導消費

者，展示店鋪的名稱、最新活動與銷售內(nèi)容等

一系列信息。店招是店鋪的靈魂所在，是消費者進入店

鋪后看到的第一個模塊，也是打造店鋪品牌、

讓消費者瞬間記住店鋪的最好陣地，因此設(shè)計者要好好把握店招的視覺設(shè)計。淘寶后臺的店招高度為120像素，建議設(shè)計時設(shè)定店招尺寸為

950像素×120像素，加上導航條高度30像素，共150像素，可避免發(fā)布后導航不顯示的問題鎮(zhèn)店套裝

精華深補水立即搶購>面膜專區(qū)彩妝專區(qū)首頁有驚喜

所有寶貝

鎮(zhèn)店套裝店招高度設(shè)計規(guī)范百雀羚傾顏專賣店4.2.1店招視覺設(shè)計規(guī)范本課件是可編輯的正常PPT

課件正品保障PECHOIN百雀羚賣收藏店鋪

熱賣套裝熱銷榜單清晰的品牌信息促銷信息移動端二維碼豪華禮盒套裝現(xiàn)

價

：￥3

9

9原價；1580購物須知A股上市公司300740

御

泥

坊

旗

艦

店御泥坊凝萃古今

御美有方店招和導航條風格統(tǒng)一本課件是可編輯的正常PPT課件瑞士尼維達品牌熱銷款

品牌故事店招和導航條風格統(tǒng)一設(shè)計，突出店鋪的品牌形象首頁所有寶貝O

泥漿面膜細

美白面膜熱賣套裝

明星單品新品上市4.2.1店招視覺設(shè)計規(guī)范NIVADA尼維達關(guān)注關(guān)注首頁店招元素設(shè)計尾款支付流程尼維達手機店鋪將店鋪名稱的文字放大，并使用不同于其他字體風格的手寫體，讓店鋪名稱文字

的版式更加醒目、更具藝術(shù)感官方旗艦店媽媽帶娃更省心所有寶貝

紙尿褲4.2.2店鋪名稱的藝術(shù)化處理01

用不同字體和字號的組合營造藝術(shù)感雖然有的店鋪會在店招中添加設(shè)計好的店鋪徽標來代替店鋪名稱，但是文字仍是店鋪名稱最主要的表現(xiàn)形式。因此，可以采用一種最簡單、有效的方式來美化店鋪名稱，那就是通過不同字體和

字號的組合使用賦予店鋪名稱一定的藝術(shù)感。不同字體字號的組合本課件是可編輯的正常PPT課件Y優(yōu)OULi

重首頁為了將店鋪名稱與導航條的顏色區(qū)分開，使用漸變效果來修飾店鋪名稱，

營造出層次感，貼合了店鋪中銷售的品牌手表的特點鼎駿品牌手表專營店天貓

大

型

的

手

表

商

城全部產(chǎn)品

首頁

微淘主頁

每月專題活動

品牌匯集4.2.2店鋪名稱的藝術(shù)化處理02

添加特效，突出特殊性和醒目度可以通過添加特效的方式來突出店鋪名稱的特殊性和醒目度，這些特效包括漸變色、陰影、浮

雕與發(fā)光等。為店鋪名稱添加特效本課件是可編輯的正常PPT

課件4.2.2店鋪名稱的藝術(shù)化處理03

使用修飾元素提升觀賞性有時只是采用單一的文字組合、簡單的修飾并不能真正表現(xiàn)出店鋪的風格和設(shè)計的精致感，將店鋪名稱與合理的修飾元素進行融合設(shè)計，以完善、修飾、隱喻或暗示某種信息讓店鋪名稱的設(shè)計更加個性化則不失為一種好方法。Tongta

童泰本店所有商品

首頁

21年春夏新品使用長頸鹿的卡通形象來修飾店鋪名稱，文字與圖案在外形上的契合讓店鋪名稱更具個性

和藝術(shù)感，更容易在消費者心中形成特定的印象為店鋪名稱添加修飾元素本課件是可編輯的正常PPT

課件童泰上海專賣店

收藏店鋪服裝、潮流、大牌、運動、男女、舒適，大牌、母嬰、食品、蘇寧、手機、家裝服飾

女裝

男裝

戶外

鞋靴

內(nèi)衣美妝

童裝酒水

易購

會場

建材雙1(

1元預定爆款聲波電動牙刷贈旅行盒合首頁

雙來應

男士理容。I

口腔呵護○I

美發(fā)美肌oI

廚房生活○|咖啡生活●|空氣凈化○I熨燙熨斗0I

吸塵除端○I

液晶電視o然小狗電器官方旗艦店

塵器類目銷量第一首頁全部寶貝店鋪評分品牌文化走進實驗室

選擇小狗十大理由

商用桶吸

會員積分收藏本店(Ctrl+D)

手機專享限時贈送當鼠標指針觸碰到導航條中任意一個功能按鈕時，該按鈕就會呈現(xiàn)出不同的效果，這就是添加

圖層樣式的效果，給人視覺上的錯覺，讓按鈕上的文字更具層次感，更易于展示當前操作的結(jié)果十

不IT

人上HJ

二出十耳HJ

巾

不

IT4.2.3圖層樣式的應用圖層樣式的作用就是對設(shè)計元素進行修飾和美化，實現(xiàn)色彩、質(zhì)感與光澤上的變化。用“漸變疊加”圖層樣式來表現(xiàn)導航條功能按鈕被鼠標觸碰后的狀態(tài)，在視覺上形成凹陷的效

果，將其與導航條中正常狀態(tài)下的功能按鈕區(qū)分開官

聯(lián)

1

0雙

1

元

預

定T

加速三刀頭剃須刀1元抵50元關(guān)

注飛利浦官方旗艦店P(guān)HILIPS雙快慶G?

元大禮包精品，家居

家具

百貨大家電小家電，4

.3首焦輪播區(qū)視覺設(shè)計在店招與導航條的下方就是店鋪首頁的首

焦輪播區(qū)，這個模塊占據(jù)的面積較大，可以放

入大量信息，也是整個網(wǎng)店首頁中最醒目的部

分。下面將介紹首焦輪播區(qū)的設(shè)計方法。凌度

官方旗艦店安全出行領(lǐng)券至高立減100元首焦位置：由于該位置所占面積

較大，所以成為最能吸引消費者

眼球的位置店鋪的首焦位置

本課件是可編輯的正常PPT

課件4.3.1設(shè)計聚焦消費者視線4.3.1設(shè)計聚焦消費者視線品質(zhì)旗艦正品保證價格實惠省錢更省心!本店單筆訂單滿9.9元可包郵!默認匯通快遞!韻達快遞!不到的地區(qū)聯(lián)系客服!新疆西藏內(nèi)蒙地區(qū)不包郵可加錢發(fā)郵政快遞!謝謝

首

焦

位

置本課件是可編輯的正常PPT

課件購物流程挑選您中意1

的寶貝加入購物車滿分好評確認收到貨

物后雙方互

相評價拍下后使用

您的支付寶

付款買家將盡快

處理您的訂

單并發(fā)貨閃電發(fā)貨下單付款購前必讀23文案信息告知了消費者店鋪中的優(yōu)惠活動，因為

店鋪的優(yōu)惠活動信息對于大部分消費者而言極具

吸引力。同時，簡潔的文字與圖形裝飾的結(jié)合讓

消費者能夠輕松地獲取相關(guān)信息有趣的圖片展示，能讓消費者通過視覺獲得較為

愉悅的體驗本課件是可編輯的正常PPT

課件首焦位置內(nèi)容安排4.3.1設(shè)計聚焦消費者視線再購物,10先領(lǐng)券53放心圍吃過癮滿300減2109

0

元

抱走一大箱商品

廣告文字放心圍吃過癮滿300減21090元抱走一大箱4.3.2構(gòu)建設(shè)計圖三要素本課件瞧輪輯的要常PPT課件背景以七夕節(jié)為主題的背景以“雙11”活動為主題的背景雙全球王歡節(jié)

狂%歡繼續(xù)50不同主題的背景圖本課件是可編輯的正常PPT

課件4.3.2構(gòu)建設(shè)計圖三要素處理前后的商品形象對比本課件是可編輯的正常PPT

課件處理后：色彩純凈，畫面清晰，

畫面層次感強，商品形象更突

出處理前：色彩灰暗，畫質(zhì)朦朧，

畫面層次不清晰，背景色調(diào)不

理想4.3.2構(gòu)建設(shè)計圖三要素DRESS周二上新7月22日0點開搶

搶先收藏贈送50元優(yōu)惠券一全場滿減滿299減20/滿399減40滿599減80滿888減120TMES7

月22日-

7月25日月品3

新怦然心法

時

一

師

一

天

過

師

立4.3.2構(gòu)建設(shè)計圖三要素本課件是可編輯的正常PPT

課件文字元素的設(shè)計的

購搶

即4.3.3溶圖的應用規(guī)范溶圖溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，構(gòu)圖嚴謹，細節(jié)處理得當。在選擇溶圖時要注意，要么溶圖的色調(diào)與商品相似，要么溶圖的影調(diào)與商品和諧搭配，只有滿

足了其中的一個要求才能保證首焦輪播圖具備較理想的視覺沖擊力和渾然天成的視覺效果。本課件是可編輯的正常PPT

課件4

.4商品陳列區(qū)視覺設(shè)計在設(shè)計店鋪首頁時，除了店招和首焦輪播

區(qū)外，大部分店鋪都會使用商品陳列區(qū)來展示

商品，讓消費者大致了解店鋪中商品的形象、

風格和價格。商品陳列區(qū)也是一個比較重要且

尺寸較大的區(qū)域，下面將對商品陳列區(qū)的視覺

設(shè)計進行介紹。聚拍下立減5元22°芒果干120gx3袋到24.9

購買◎聚|第2件8.9元棗夾每日堅果216g第8.9

買◎商品陳列圖本課件是可編輯的正常PPT

課件4.4.1營造視覺動線①瀏覽初期，視線水平移動，且瀏覽范圍最大。剛開始瀏覽時，消費者對商品展示圖充滿了新鮮感和好奇，很可

能將第一排圖片全部瀏覽完畢，并根據(jù)從上到下的瀏覽經(jīng)驗轉(zhuǎn)向?qū)Φ诙艌D片的瀏覽②水平瀏覽范圍縮短。此時圖片的布局沒有任何變化，

消費者對圖片瀏覽的新鮮度就會降低，開始失去瀏覽的耐心，于是對第二排圖片的水平瀏覽范圍便會縮短③失去耐心，開始進行垂直瀏覽。當消費者看到第三排仍然是一成不變的圖片排列后，瀏覽的耐心就會減少，還可能會想圖片怎么這么多，于是形成對左邊的垂直瀏覽F形瀏覽模式

本課件是可編輯的正常PPT

課件4.4.1營造視覺動線單張圖片：除了商品展示圖片以外，還可以搭配一些與展示商

品相關(guān)的商品組合圖片，進一步吸引消費者的購買興趣商品海報展示圖：將重點推薦的商品以單張海報的方式呈現(xiàn)，較為豐富的表現(xiàn)形式能很好地讓消費者注意到商品信息兩張商品展示圖：非重點推薦的產(chǎn)品可以多張并排展示的效果

呈現(xiàn)單張商品展示圖：較為重要的商品以單張圖片的形式排列，較

大的展示面積更能獲得消費者的矚目本課件是可編輯的正常PPT

課件4.4.1營造視覺動線商品展示圖排列設(shè)計4.4.2商品布局藝術(shù)化01

折線型布局折線型布局就是將商品圖片按照錯位的方式進行排列。本課件是可騙輯的正常PrT

保件隨意型布局就是將商品圖片隨意地放置在頁面中

。這種隨意往往需要營造出一種特定的氛圍和感覺，讓這些商品之間產(chǎn)生一種聯(lián)系，否則界面中的商品會由于缺乏聯(lián)系而顯得突兀。今課件是可騙輯的正吊PPT

課件4.4.2商品布局藝術(shù)化隨意型布局024

.

5茶葉店鋪首頁視覺設(shè)計案例本案例要為某茶葉店鋪設(shè)計首頁裝修圖。標題文字設(shè)置的字號較大，利用漸變疊加和投影效果來點綴標題文字，使其更加精致文字選用不同的顏色、字號，并分成三行，顯得更有層次感，并通過一些小圖案對價格進行修飾和點綴，營造出一種中國風的視覺感受風格一致的文字與圖像，營造出一種清新、簡潔、充滿文藝氣息的氛圍采用圓角矩形作為背景圖的點綴，使商品的排列既整齊又不死板，提升其觀賞性和設(shè)計感本課件是可編輯的正常PPT

課件

首頁設(shè)計圖1.為家電類店鋪設(shè)計一個店招，并說明自己的設(shè)計思路。2.列舉幾個溶圖在實際店鋪中應用的案例。3.簡述商品陳列區(qū)在設(shè)計時要考慮的因素。4.利用提供的素材文件為某家具類店鋪設(shè)計首頁，效果如右圖所示。本課件是可編輯的正常PPT

課像具類店鋪首頁課后習題第5章商品詳情頁視覺設(shè)計商品詳情頁是所有營銷的落地點。消費者通過搜索進入店鋪后，首先

進入的便是詳情頁；所有頁面上有且僅有詳情頁承擔著下單購買的職責；

消費者在購買前要對詳情頁仔細看、反復看，甚至對比看，才能決定是否

咨詢賣家、是否下單。如果詳情頁不能滿足消費者的需求，不能解決消費

者的實際問題，那么前面的工作做得再好，都會功虧一簣。所以，無論是什么店鋪，都要對商品詳情頁進行重點設(shè)計。本課件是可編輯的正常PPT

課件目錄

CONTENTS5.1

商品主圖設(shè)計5.2

商品細節(jié)展示區(qū)設(shè)計5.3

商品功效簡介區(qū)設(shè)計5.4

女鞋商品詳情頁視覺設(shè)計案例本課件是可編輯的正常PPT

課件5

.

1商品主圖設(shè)計當消費者在電商平臺中搜索商品時，顯示在搜索結(jié)果頁面中的商品圖片就是商

品主圖。商品主圖形成了消費者對商品的

第一印象，決定著消費者是否點擊打開商

品詳情頁，并對商品產(chǎn)生購買欲望。因此，

商品主圖的設(shè)計專業(yè)性與視覺吸引力直接

影響著店鋪的點擊率和轉(zhuǎn)化率。淘寶網(wǎng)商品主圖尺寸要求天貓商城的商品主圖設(shè)計規(guī)范與淘寶網(wǎng)不同，其規(guī)定商品主圖尺寸為800像素×800像素以上，

自動擁有放大鏡功能。

本課件是可編輯的正常PPT

課件超大量500克品質(zhì)好茶濃香耐泡手工茶

服務承諾商品詳情頁中的商品主圖尺寸為

400像素×400像素【2021新春茶】新茶金駿眉紅茶禮盒裝附賠同款試飲大氣精美禮盒裝2罐500克價格

￥400.00￥268.00

弱福建泉州至石家莊v

快遞：0.00黑計

評價3121搜索結(jié)果頁面中的商品主圖尺寸為

220像素×220像素5.1.1商品主圖的設(shè)計規(guī)范品質(zhì)保障2年陳香珍藏憑暴￥198

.00包郵

2301人付款

福景老白茶茶葉正宗陳年壽眉老白茶

餅禮盒裝非散裝送禮鳳凰古樹蜜蘭香￥388

.

00包郵

3229人付款鳳凰單機茶葉鴨屎香特級新茶蜜蘭香朝州鳳凰單叢茶禮盒裝500g立即購買破損包退

正品保證

七天無理由退換￥200

.00包部

7500+人付款特級碧螺春茶葉正宗綠茶濃香型2021

年新茶明前茶毛尖禮盒裝500克金駿眉桐木關(guān)原產(chǎn)6期手續(xù)費)存4932件手續(xù)費極速5.1.2商品主圖的設(shè)計形式01

展示商品的全貌利用白色背景展示商品的全貌是商品主圖常規(guī)的設(shè)計形式，特別是天貓商城，大多數(shù)行業(yè)都

要求至少有一張白底主圖。以白色背景展示的商品主圖本課件是可編輯的正常PPT

課件5.1.2商品主圖的設(shè)計形式02

場景化的設(shè)計商品主圖另一種常規(guī)的設(shè)計形式是通過模特展示商品，或者根據(jù)商品的特點和用途搭建生

活化、場景化的環(huán)境。利用場景展示的商品主圖本課件是可編輯的正常PPT

課件5.1.2商品主圖的設(shè)計形式03

拼接式設(shè)計拼接式設(shè)計就是將多張商品圖片合成一張商品主圖。拼接式設(shè)計的商品主圖本課件是可編輯的正常PPT

課件5.1.2商品主圖的設(shè)計形式04

突出商品賣點品牌商品都會在主圖的一角放置品牌的Logo,

這種方式可以有效地讓消費者識別品牌，喚醒老客戶的消費記憶，吸引新客戶的關(guān)注和消費。本課件是可編輯的正常PPT

課件突出賣點的商品主圖迅速點擊高速反饋按鍵高敏反饋，辦公更效率，疾速點擊鼠標兼顧娛樂，隨心切換2年質(zhì)保辦公游戲通用黑色-標準版添加主圖文案本課件是可編輯的正常PPT

課

件添加商品的賣點簡介，

提升商品形象，讓消費

者了解更多商品信息添加售后信息，以激發(fā)

消費者的購買欲望，提

高點擊率5.1.3添加文案提高主圖點擊率添加品牌徽標添加品牌信息在添加主圖文案時，需要注意以下兩點。(1)文案說明信息的表達形式要簡潔明了，要有引發(fā)消費者產(chǎn)生點擊沖動的誘惑力。(2)文案說明信息不能遮擋商品主體。本課件是可編輯的正常PPT

課件惠普中國官方旗艦店

hotwind無線鼠標即插即用靜音按鍵5.1.3添加文案提高主圖點擊率5

.2商品細節(jié)展示區(qū)設(shè)計在商品詳情頁中，為了讓消費者能夠完整而

清晰地了解商品的細節(jié)和特點，設(shè)計人員會設(shè)計

相應的模塊(商品細節(jié)展示區(qū))來對商品進行全

方位的展示。下面將詳細介紹商品細節(jié)展示區(qū)的

表現(xiàn)形式及其通用的設(shè)計方式。5.2.1商品細節(jié)展示區(qū)的表現(xiàn)形式01

指示型表現(xiàn)形式指示型表現(xiàn)形式就是先將商品完整地展示出來，再把商品需要突出展示的局部細節(jié)圖片以類

似放大鏡的形式排布在完整商品圖的四周，并利用線條、箭頭等設(shè)計元素將細節(jié)圖片與完整的商品圖連接起來，有時還會用簡單的說明性語言來對細節(jié)進行解說。非常適合體積較小、部件較多的商品或家具等外形特大商品的細節(jié)展示。本課件是可編輯的止常PPT

課件METHODS調(diào)節(jié)表鏈的方法1.天王贈送表帶調(diào)節(jié)工具2.將調(diào)節(jié)工具插入圖中位置

3.表扣松開后可來回移動(顏色隨機哦)

沿箭頭方向撬開保險扣4.表扣調(diào)節(jié)到合適您手腕粗細5.手指用力均勻閉合保險扣的位置，對準表扣和表帶的凹

并注意檢查是否牢固槽(圖中箭頭標注位置)局部圖解型表現(xiàn)形式局部圖解型表現(xiàn)形式的設(shè)計更

簡單，只需將商品的局部細節(jié)放大

即可，不需對細節(jié)位置進行指示。比較適合于外觀簡單、部件少

的商品及日常用品的細節(jié)展示。5.2.1商品細節(jié)展示區(qū)的表現(xiàn)形式本課件是可編輯的正常PPT課件025.2.2商品細節(jié)展示區(qū)的通用設(shè)計方式01

利用文字對細節(jié)進行說明顏值控，更要能裝實用!BAIDEDShOuLDEBSTRApS時髦個性刷亮眼球的腋下包，顏值高實用性好，愛美的小仙女實在不用擔心容量這個問題，日常實用的化妝品都能裝標題文字：對該細節(jié)圖

的內(nèi)容進行概括和歸納，應用畫龍點睛的關(guān)鍵詞

進行文案設(shè)計顏值控，更要能裝實用!BAIDED

SHOULDER

STAPS時髦個性刷亮眼球的腋下包，顏值高實用性好，愛美的小仙女

實在不用擔心容量這個問題，日常實用的化妝品都能裝段落說明文字：詳細闡

述該細節(jié)圖的內(nèi)容，對

標題文字進行展開說明使用文字對細節(jié)進行說明本課件是可編輯的正常PPT

課件對童鞋細節(jié)參數(shù)進行系

統(tǒng)介紹，讓消費者

一

目了然5.2.2商品細節(jié)展示區(qū)的通用設(shè)計方式碼22223248m3514515055由303514550碼2722910167748816269176m本課件是可編輯的正蒂P

昭

律

息利用文字對細節(jié)進行說明牌]

X-NIUREN

小牛人

EVA質(zhì)]

織物+超纖合成革色]

粉色/蘭色/粉桔/油綠

號]

W5ig碼]

21-01[閉合方式]

雇術(shù)貼[包

裝]吊牌，鞋盒產(chǎn)品介紹[鞋[材

[顏

[貨

[RsaxsautcnoNR碼時N選擇】5.2.2商品細節(jié)展示區(qū)的通用設(shè)計方式02

素材讓細節(jié)展示更直觀使用兩種素材展示商品細節(jié)本課件是可編輯的正常PPT

課件聊天氣泡用于

修飾細節(jié)圖、

說明文字的邊

框，使文字和

圖片能一一對應，以便準確

傳遞商品信息箭頭能將商品

整體外觀圖與

細節(jié)圖聯(lián)系起

來，具有引導

視線的作用5.2.2商品細節(jié)展示區(qū)的通用設(shè)計方式02

素材讓細節(jié)展示更直觀矩形與圓形素材的使用本課件是可編輯的正常PPT

課件圓形素材的使用

讓圖像之間產(chǎn)生

一定的聯(lián)系方框規(guī)范了文

字的顯示范圍5

.3商品功效簡介區(qū)設(shè)計商品功效簡介區(qū)用于對商品的功能或作用進

行詳盡、透徹的分析和解說。功效簡介區(qū)的位置

在整個商品詳情頁中算是比較靠后的，消費者能

堅持瀏覽到這里說明他對商品產(chǎn)生了很大的興趣。

將功效簡介區(qū)設(shè)計得有特色可以進一步提升消費

者對商品的好感，從而促成消費者下單。電商平臺商品詳情頁設(shè)計尺寸規(guī)范淘寶網(wǎng)詳情頁左側(cè)邊欄寬190像素，

中間空10像素，右側(cè)邊欄寬

750像素，加起來總寬度為950像素。如果關(guān)閉左側(cè)邊欄

就可以顯示950像素寬，否則只顯示750像素寬天貓商城詳情頁布局與淘寶類似，不同之處在于天貓商城新版頁面的寬度由750像素變?yōu)?90像素京東詳情頁的整體寬度不超過740

像素柔軟蓬松效合

顆搞定深層去漬5.3.1商品功效簡介區(qū)的設(shè)計規(guī)范將商品的功效

分為幾個不同

的關(guān)鍵點進行

介紹淘寶、天貓和京東的商品詳情頁

設(shè)計尺寸規(guī)范本課件是可編輯的常明救簡課投計使用圖表對商品的某些功效進行具象表現(xiàn)，利用數(shù)據(jù)、比例上的

優(yōu)勢來增強說服力，提升商品功效簡介的可信度早晚結(jié)合，雙倍提升抗痘能力早消紅、晚祛痘，溶解痘根，消滅致痘微生物，大大降低殘留痘毒再次復發(fā)的可能性!44%精準祛痘，有效抗復發(fā)瓷肌韓國化妝品研究團，花費重金對瓷肌早晚祛痘膏及鄰近產(chǎn)品進行科學測試，受測人群覆

蓋1000余人，跟蹤周期長達6個月，測試結(jié)果顯示：瓷肌祛痘抗復發(fā)率遠遠超過同行業(yè)。5.3.2修飾元素在設(shè)計中的重要性在設(shè)計商品功效簡介區(qū)時，為了將商品功效表述得更加直觀、形象，店主可以使用多種修飾元

素來豐富畫面的內(nèi)容，例如用圖片來代替某些文字或者使用素材來突出某些文字。本課件是可編輯的正常PPT

課件同類產(chǎn)品2

同類產(chǎn)品3抗復發(fā)率同類產(chǎn)品172%96%52%5.3.2修飾元素在設(shè)計中的重要性在設(shè)計商品功效簡介區(qū)時，為了將商品功效表述得更加直觀、形象，店主可以使用多種修飾元

素來豐富畫面的內(nèi)容，例如用圖片來代替某些文字或者使用素材來突出某些文字。將洗衣液的功效用對比圖的方式表現(xiàn)出來，提升功效的可信性本課件是可編輯的正常PPT

課件復選框素材的使用，加強了對商品功效的

肯定作用高效潔凈因子深入衣物纖維深層去漬怎么把我攔住了去污增效因子防止污漬再附著

徹底去漬聊天氣泡具有一定的指引視線和修飾作用哈，我還在我又回來了→

突破性高效潔凈因子+去污增效因子，深層去漬，防止污漬再附著VSVS無去污增效因子藍月亮洗衣液嗚鳴，我不走5

.4女鞋商品詳情頁視覺設(shè)計案例下面將結(jié)合前面所講的內(nèi)容為一款

女鞋設(shè)計商品詳情頁，設(shè)計內(nèi)容包括

商品主圖、商品介紹等，要求設(shè)計的頁

面要能清晰、準確地展示與說明女鞋的

特點。女鞋商課借是可編輯的正常PPT

課件1.簡述如何設(shè)計商品主圖才能提高點擊率。2.找出五個不同類目的店鋪，分析它們的商品細節(jié)展示區(qū)有何異同。3.找出兩家賣同一類商品的店鋪，思考消費者會選擇購買哪一家的商品，并說明購買原因。4.利用提供的素材文件為某水果店鋪設(shè)計一個商品詳情頁，效果如右圖所示。本課件是可編輯的正常PPT課后習題課特甘橙商品詳情頁第6章高點擊率

推廣圖片視覺設(shè)計圖片是電商營銷的基礎(chǔ)與靈魂，尤其是推廣圖片，其設(shè)計的重要性不

言而喻?？梢哉f優(yōu)質(zhì)的推廣圖片是吸引流量、促進點擊、提高轉(zhuǎn)化率的必

需品，也是視覺設(shè)計的關(guān)鍵點。本章將以直通車圖、鉆展圖、直播封面圖、聚劃算主圖為例來介紹如何設(shè)計出有吸引力和高點擊率的推廣圖片。本課件是可編輯的正常PPT

課件目

錄cONTENTS6.1

推廣圖片構(gòu)圖法則6.2

直通車圖片設(shè)計6.3

鉆展圖設(shè)計6.4

直播封面圖設(shè)計6.5

聚劃算主圖設(shè)計本課件是可編輯的正常PPT

課件6

.

1推廣圖片構(gòu)圖法則在圖片設(shè)計中，構(gòu)圖有著自己獨特的形式規(guī)律。一幅成功的推廣圖片在進行布局

構(gòu)圖時是十分講究的，需要符合人們的心理

和視覺習慣。下面將就構(gòu)圖問題進行探討。6.1.1變化式構(gòu)圖變化式構(gòu)圖變化式構(gòu)圖又稱留白式構(gòu)圖。設(shè)計者將商品圖安排在某一角落或某一邊，同時留出大部分

空白。本課件是可編輯的正常PPT

課件6.1.2對角線構(gòu)圖對角線構(gòu)圖對角線構(gòu)圖就是把商品圖安排在對角線上，利用畫面對角線來整體統(tǒng)一畫面元素，同時也能使陪體與主體區(qū)分明顯。本課件是可編輯的正常PPT

課件6.1.3對稱式構(gòu)圖對稱式構(gòu)圖給人一種畫面平衡、穩(wěn)定、商品突出的感覺，缺點是畫面比較呆板、缺少變化。本課件是可編輯的正常PPT

課件6.1.4平衡式構(gòu)圖平衡式構(gòu)圖給人一種祥和、平靜的感覺，缺點是缺乏創(chuàng)新，沒有新意。平衡式構(gòu)圖不像對稱式

構(gòu)圖那樣老氣、呆板，所以很多電商設(shè)計者都會選擇這種構(gòu)圖方法。本課件是可編輯的正常PPT

課件6.1.5緊湊式構(gòu)圖緊湊式構(gòu)圖緊湊式構(gòu)圖就是將商品以特寫的形式加以放大，布滿畫面，具有緊湊、細膩、微觀等特點。本課件是可編輯的正常PPT

課件6.1.6

X形構(gòu)圖X

形構(gòu)圖X

形構(gòu)圖是對角線構(gòu)圖的升級版，也稱放射式構(gòu)圖。它是將視覺焦點放置在畫面的中央位置，

讓每一條放射線的中點都位于視覺焦點之上。本課件是可編輯的正常PPT

課件實心槐木

球棒實心橡木

球棒6

.

2直通車圖片設(shè)計直通車圖片的視覺效果不容忽視。消

費者通過搜索關(guān)鍵詞進入頁面，最先從直通

車展示位看到的就是圖片和標題，并且圖片

占了絕大部分位置，所以極大地影響了點擊

率。優(yōu)秀的直通車圖片能夠吸引消費者進行點擊，有點擊才可能有轉(zhuǎn)化，從而提升直通

車推廣的效果。316不銹鋼贈送杯套￥158

.

00包郵

270人付款￥129

.

00包郵283人付款￥158

.

00包郵473人付款￥119

.

00包郵785人付款直通車圖片應用案例本課件是可編輯的正常PPT

課件6.2.1圖片整體風格設(shè)計在制作促銷圖片之前，第一步要做的就是根據(jù)文案或商品等因素來進行風格定位。我們可以

根據(jù)直通車的投放計劃確定自身直通車商品推廣所投放的位置(第幾頁，第幾個商品),以便對

周邊商品進行分析，從而在設(shè)計上更為突出，以引起消費者的注意。手柄/肩帶

一

杯兩用WARMEL

正版授權(quán)6.2.1圖片整體風格設(shè)計設(shè)計時，要確定推廣的商品所針對的消費群體，同時分析他們的喜好，以確定設(shè)計風格及顏

色；分析他們的消費能力，以確定什么樣的促銷方式是其最容易接受的；分析他們的生活習慣，合理調(diào)整投放時間和策略，與競爭對手形成差異，以提高投放效率。999銀純銀內(nèi)膽

智能測溫提醒喝水

領(lǐng)券298元

順豐包郵◎純銀錢銀內(nèi)膽B(tài)

BEMEGA

999銀純銀鑄銀內(nèi)膽茶水分離24H

保溫領(lǐng)

券

1

9

8頁豐包郵免費刻字禮盒包裝本課件是可編輯的正常PPT

課件針對年輕消費群體的直通車圖針對商務群體的直通車圖技巧。01

運用適當?shù)谋尘霸谠O(shè)計直通車圖時，可以：·

選擇合適的背景顏色，或者在拍攝時選擇

使用與商品本身色彩差異較大的背景顏色?！?/p>

同

時

，注意背景的顏色切勿太雜太亂，否則會影響商品在圖片中的主導地位。·

也可以把圖片的背景進行適當?shù)哪：幚恚?/p>

以突出商品形象。6.2.1圖片整體風格設(shè)計確定圖片風格定位以后，就可以進行直通車圖的制作了。在制作直通車圖時，可以參考以下本課件是可編輯的正常PPT

課件背景模糊處理會護膚的氣墊BB

霜HOLDINGMAKEUPCUSHIONBBCREAMTOPOWDER

美白遮瑕|保濕補水|細致毛孔|清爽控油后

蒸02

保證圖片清晰度在進行圖片設(shè)計時，較暗的圖片可以用

色階調(diào)亮，模糊的圖片可以適當銳化。·在縮放商品圖片時，商品會相應地變模糊，因此在縮小商品后適當銳化一次(不可超

過兩次),這樣商品看上去更有質(zhì)感。·

需要注意的是，縮小了的圖片切勿放大，

如果覺得商品縮放得太小了，就用高精度

原圖重新縮放。6.2.1圖片整體風格設(shè)計確定圖片風格定位以后，就可以進行直通車圖的制作了。在制作直通車圖時，可以參考以下

技巧。本課件是可編輯的正常PPT

課件用色階調(diào)亮背景Samsonte

責1天能年悠應熱銷爆款預估價：990

起TIME:12

月12日技巧。03

精簡文字，去除“牛皮癬”商品不能被任何素材及文字覆蓋，要

保

證圖片與素材或文字的間距至少為10像素。對于展示文案的具體內(nèi)容，店主必須分析商

品及消費群體，提煉出精髓予以展示。6.2.1圖片整體風格設(shè)計確定圖片風格定位以后，就可以進行直通車圖的制作了。在制作直通車圖時，可以參考以下本課件是可編輯的正常PPT

課件突出促銷價格技巧。04

巧用素材搭配在做商品展示和拍攝時，可以找一些“配

角”進行搭配，但要注意它們的主次關(guān)系。消費者會自動根據(jù)圖片中的比例關(guān)系來區(qū)

分商品，因此主角要占約2/3的位置，以避免給消費者帶來誤解。6.2.1圖片整體風格設(shè)計確定圖片風格定位以后，就可以進行直通車圖的制作了。在制作直通車圖時，可以參考以下本課件是可編輯的正常PPT

課件素材搭配6.2.2突出商品賣點的設(shè)計在店鋪推廣直通車主圖中可以放置更多的內(nèi)容來展示店鋪信息，利益點的說明也可以偏向于

整體店鋪的利益點。我很耐摔破損包賠

質(zhì)保一年標準容量450ML突出利益點的直通車主圖本課件是可編輯的正常PPT

課件不僅有針對所展示單品的利益點

信息說明，也通過“順豐包郵”表明了店鋪的利益點6

.

3

鉆

展

圖

設(shè)

計考察鉆展圖投放性價比的關(guān)鍵在于點

擊率。在同樣成本支出與展現(xiàn)量的情況下，

鉆展圖的點擊率越高，其所起到的引流效果

就越明顯。要想提高鉆展圖的點擊率，就離

不開讓圖片更有吸引力的視覺處理。bolobalo叢不同角度拍攝的商品圖片本課件是可編輯的正常PPT

課件正面與側(cè)面相結(jié)合的拍攝角度，

尤其是正面角度給人以迎面沖來

的視覺感受，富有視覺沖擊力側(cè)面拍攝角度是較為常規(guī)的拍攝

角度，少了幾分新鮮感與吸引力6.3.1博取眼球的創(chuàng)意設(shè)計百雀羚別讓優(yōu)惠溜走全場3折起立即查看>6.3.1博取眼球的創(chuàng)意設(shè)計本課件是可編商品擇幣PPT課件6.3.2統(tǒng)一圖片設(shè)計風格通過圖片背景的設(shè)計可以烘托出圖片的整體氛圍與設(shè)計風格。鉆展圖背景的設(shè)計主要有兩種方式：

一種是通過拍攝道具構(gòu)建出背景，從而營造圖片的氣氛；另一種是合成背景。簡約風格

圖片整體的設(shè)計風格非常大方，選擇粉色為主的背景彰顯了其簡潔的設(shè)計風格。通過對元素顏色的控制，突出“免費送”的宣傳主題，激發(fā)消費者潛在的購買欲望典雅風格家具的擺放富有情景感，背景使用了與

家具相近的顏色，圖片整體體現(xiàn)出典雅的風格。

圖片突出了商品“家具”,文案又突出了“1元

搶”,主題明確，能夠激發(fā)消費者的點擊沖動①

元搶價值868元大禮包1.8床+床頭柜+床墊組合

價￥3880本課件是回鳙輯設(shè)常榨T課件林氏木業(yè)

聚劃算低至89元第二件半價搶購時間：8月5日10:00開搶!重點突出優(yōu)惠價棒裸件是可編輯的正常PPT課

件實