《電子商務(wù)視覺(jué)設(shè)計(jì)》教學(xué)教案

《電子商務(wù)視覺(jué)設(shè)計(jì)》-教學(xué)教案

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第1章初識(shí)電商視覺(jué)設(shè)計(jì)

教學(xué)內(nèi)容

一、什么是視覺(jué)設(shè)計(jì)

二、電商視覺(jué)設(shè)計(jì)前的準(zhǔn)備

三、電商視覺(jué)設(shè)計(jì)的黃金構(gòu)圖法

【知識(shí)目標(biāo)】

1.了解視覺(jué)設(shè)計(jì)的定義。

2.了解電商視覺(jué)設(shè)計(jì)前的準(zhǔn)備工作。

教學(xué)要求

3.掌握電商視覺(jué)設(shè)計(jì)黃金構(gòu)圖法。

【技能目標(biāo)】

學(xué)會(huì)電商視覺(jué)設(shè)計(jì)的常用構(gòu)圖方法。

1.網(wǎng)店的視覺(jué)定位

教學(xué)重點(diǎn)

2.電商視覺(jué)設(shè)計(jì)黃金構(gòu)圖法

1.網(wǎng)店的視覺(jué)定位

教學(xué)難點(diǎn)

2.電商視覺(jué)設(shè)計(jì)黃金構(gòu)圖法

教學(xué)方法講授法、案例法

課時(shí)數(shù)2課時(shí)

教學(xué)內(nèi)容

第一節(jié)什么是視覺(jué)設(shè)計(jì)

視覺(jué)設(shè)計(jì)是針對(duì)眼睛功能的表現(xiàn)手段，通俗地說(shuō)就是通過(guò)

一些設(shè)計(jì)讓產(chǎn)品的視覺(jué)效果更加出彩。

一、視覺(jué)識(shí)別設(shè)計(jì)

企業(yè)視覺(jué)識(shí)別系統(tǒng)是企業(yè)理念的視覺(jué)化，通過(guò)企業(yè)形象廣

告、標(biāo)識(shí)、商標(biāo)、品牌、產(chǎn)品包裝、企業(yè)內(nèi)部環(huán)境布局和廠容

廠貌等媒體及其他方式向大眾表現(xiàn)、傳達(dá)企業(yè)理念，使消費(fèi)者

對(duì)企業(yè)產(chǎn)生一致的認(rèn)同感與價(jià)值觀。企業(yè)視覺(jué)識(shí)別系統(tǒng)既可以

形成獨(dú)特的企業(yè)形象，又是企業(yè)無(wú)形資產(chǎn)的重要組成部分。

1

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

二、視覺(jué)傳達(dá)設(shè)計(jì)

視覺(jué)傳達(dá)設(shè)計(jì)是以視覺(jué)媒介為載體，以文字、圖形和色彩

作為創(chuàng)作要素，利用視覺(jué)形象傳達(dá)特定的信息給受眾，從而對(duì)

被傳達(dá)對(duì)象產(chǎn)生影響的過(guò)程。視覺(jué)傳達(dá)的作用是讓人與人之間

利用“看''的形式進(jìn)行交流。

第二節(jié)電商視覺(jué)設(shè)計(jì)前的準(zhǔn)備

一、網(wǎng)店的視覺(jué)定位

不同的消費(fèi)群體有著不同的視覺(jué)偏好，關(guān)鍵是要將產(chǎn)品的

定位和消費(fèi)群體的視覺(jué)偏好進(jìn)行整合，使店鋪在風(fēng)格上能夠呈

現(xiàn)出一種整體效果。

營(yíng)銷(xiāo)型網(wǎng)店的視覺(jué)定位原則在于營(yíng)造促銷(xiāo)氛圍，主要體現(xiàn)

在通過(guò)對(duì)比強(qiáng)烈的顏色突出顯示打折、包郵、半價(jià)等優(yōu)惠活動(dòng)

的字眼。

品牌型網(wǎng)店的視覺(jué)定位原則是突出品牌優(yōu)勢(shì)，整體設(shè)計(jì)風(fēng)

格偏向于簡(jiǎn)潔、干凈，重點(diǎn)突出品牌Logo等形象代言等元素。

服務(wù)關(guān)系型網(wǎng)店的視覺(jué)定位原則是包裝服務(wù)形象。

二、明確視覺(jué)規(guī)范的作用

(1)統(tǒng)一識(shí)別

視覺(jué)規(guī)范可以確保網(wǎng)店在整體風(fēng)格、售前售后服務(wù)和產(chǎn)品

包裝形象等方面都保持整體風(fēng)格的一貫性，既有利于消費(fèi)者識(shí)

別和區(qū)分店鋪，也可以避免消費(fèi)者在瀏覽時(shí)出現(xiàn)理解困難，甚

至是理解錯(cuò)誤的現(xiàn)象。

（2）節(jié)約資源

除了活動(dòng)海報(bào)等個(gè)性模塊之外，其他的頁(yè)面和模塊也參照

規(guī)范進(jìn)行設(shè)計(jì)可以極大地減少設(shè)計(jì)時(shí)間，從而達(dá)到節(jié)約資源的

目的

（3）重復(fù)利用

設(shè)計(jì)相同屬性的模塊或頁(yè)面時(shí)，執(zhí)行視覺(jué)規(guī)范有利于減少

無(wú)關(guān)的信息，方便消費(fèi)者的閱讀和信息傳遞。同時(shí)，視覺(jué)規(guī)范

也有利于美工人員之間的協(xié)調(diào)工作。標(biāo)準(zhǔn)化的視覺(jué)規(guī)范不僅可

以節(jié)約設(shè)計(jì)時(shí)間，還可以避免出錯(cuò)。

第三節(jié)電商視覺(jué)設(shè)計(jì)的黃金構(gòu)圖法

一、對(duì)稱(chēng)切割構(gòu)圖法

對(duì)稱(chēng)切割構(gòu)圖法的前提一般是將內(nèi)容分為對(duì)立的兩部分，

（將整個(gè)頁(yè)面一分為二），劃分明確。這種設(shè)計(jì)具有視覺(jué)沖擊

力，可以使畫(huà)面具有平衡不失重的效果。

二、組合切割構(gòu)圖法

組合切割構(gòu)圖法是通過(guò)集中而有規(guī)律的排列從整體上抓住

人們的視覺(jué)，讓整個(gè)頁(yè)面設(shè)計(jì)更具有立體感。這種構(gòu)圖方式適

合每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系產(chǎn)品的展示，能夠保持各種

內(nèi)容的并列關(guān)系，讓布局更具創(chuàng)意。

三、整體場(chǎng)景構(gòu)圖法

整體場(chǎng)景構(gòu)圖法專(zhuān)題內(nèi)容不多，適用于促銷(xiāo)、節(jié)日、活動(dòng)

等頁(yè)面。整體場(chǎng)景構(gòu)圖法可以將目標(biāo)客戶(hù)快速帶入頁(yè)面氛圍中,

使商品信息更加精準(zhǔn)、流暢。

2

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

四、多重切割構(gòu)圖法

多重切割構(gòu)圖法的構(gòu)圖不規(guī)則，穩(wěn)定而銳利，可以讓單一

的頁(yè)面變得生動(dòng)、復(fù)雜的頁(yè)面變得時(shí)尚，避免畫(huà)面出現(xiàn)生硬感,

不宜產(chǎn)生審美疲勞。

五、簡(jiǎn)單切割構(gòu)圖法

簡(jiǎn)單切割構(gòu)圖法使用簡(jiǎn)單的線條或圖案整齊地分割整個(gè)頁(yè)

面，使頁(yè)面變得有趣、生動(dòng)，使內(nèi)容區(qū)域得到有效劃分。

六、流程構(gòu)圖法

如果設(shè)計(jì)創(chuàng)意需要按照循序漸進(jìn)的方式展現(xiàn)產(chǎn)品，那么不

妨采用流程構(gòu)圖法。流程構(gòu)圖法能夠?qū)⒉襟E、關(guān)系、各個(gè)節(jié)點(diǎn)

及整體流向展示清楚，讓枯燥的流程瞬間變得簡(jiǎn)潔明了、個(gè)性

十足，并充滿(mǎn)趣味性。

七、放射構(gòu)圖法

放射構(gòu)圖法能展示出由一個(gè)中心點(diǎn)向四周擴(kuò)散的效果，起

到導(dǎo)向的作用，讓整體頁(yè)面呈現(xiàn)出立體與空間感，畫(huà)面沖擊力

強(qiáng)，富有動(dòng)感。

八、物體輪廓構(gòu)圖法

物體輪廓構(gòu)圖法主要適用于活動(dòng)、節(jié)日或新品創(chuàng)意等專(zhuān)題。

我們可以根據(jù)專(zhuān)題的主要內(nèi)容從整體上構(gòu)建一個(gè)邊界或外形線,

形成一個(gè)大的輪廓，將內(nèi)容巧妙地填充進(jìn)去。物體輪廓構(gòu)圖法

能讓整體頁(yè)面更加生動(dòng)、形象、有趣。

通過(guò)本章的學(xué)習(xí)，我們了解了視覺(jué)設(shè)計(jì)的定義，電商視覺(jué)

設(shè)計(jì)前的準(zhǔn)備工

作，并掌握了電商視覺(jué)設(shè)計(jì)黃金構(gòu)圖法。

電商平臺(tái)上的商品數(shù)以?xún)|計(jì)，消費(fèi)者在瀏覽商品時(shí)只會(huì)注

重第一眼的感

覺(jué)。說(shuō)到如何讓消費(fèi)者第一眼就感興趣，就不得不提電商

視覺(jué)設(shè)計(jì)。電商視覺(jué)

設(shè)計(jì)近年來(lái)受到了國(guó)內(nèi)各大企業(yè)和知名品牌的高度重視，

特別是在以淘寶天貓

為代表的電商平臺(tái)中，電商視覺(jué)設(shè)計(jì)理念運(yùn)用得非常廣泛,

效果也很明顯。歸納與

提高

3

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第2章電商網(wǎng)站視覺(jué)配色設(shè)計(jì)

教學(xué)內(nèi)容

一、網(wǎng)店頁(yè)面的配色方案

二、網(wǎng)店頁(yè)面的配色誤區(qū)

三、網(wǎng)店的整體配色案例

【知識(shí)目標(biāo)】

1.了解色搭原則七要素。

2.掌握色彩聯(lián)覺(jué)現(xiàn)象的定義。

教學(xué)要求3.了解網(wǎng)店風(fēng)格的幾大形成要素。

4.了解網(wǎng)店頁(yè)面常見(jiàn)的配色誤區(qū)。

【技能目標(biāo)】

學(xué)會(huì)網(wǎng)店的整體配色方法。

1.網(wǎng)店頁(yè)面的配色方案

教學(xué)重點(diǎn)2.網(wǎng)店頁(yè)面的配色誤區(qū)

3.網(wǎng)店的整體配色案例

1.網(wǎng)店頁(yè)面的配色方案

教學(xué)難點(diǎn)

2.網(wǎng)店的整體配色案例

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

第一節(jié)網(wǎng)店頁(yè)面的配色方案

4

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

一、色搭原則七要素

1.漸進(jìn)配色

2.對(duì)比配色

3.色調(diào)配色

4.近似配色

5.單重點(diǎn)配色

6.分隔式配色

7.夜配色

二、色彩的聯(lián)覺(jué)聚焦圖片

色彩的聯(lián)覺(jué)現(xiàn)象是人們感知色彩的一種經(jīng)驗(yàn)，在消費(fèi)過(guò)程

中人們也會(huì)自覺(jué)或不自覺(jué)地運(yùn)用這種感知習(xí)慣。同時(shí)，由于人

們的視覺(jué)對(duì)于色彩的感知最為敏感，因此當(dāng)他們?cè)跒g覽購(gòu)物網(wǎng)

站時(shí)很可能會(huì)首先通過(guò)色彩去識(shí)別商品。

要想聚焦消費(fèi)者的目光，就需要根據(jù)消費(fèi)者的認(rèn)知習(xí)慣尋

找出通常情況下能夠表現(xiàn)商品的最具代表性的色彩，并將其運(yùn)

用到與商品相關(guān)的視覺(jué)設(shè)計(jì)之中，這樣才能避免消費(fèi)者因?yàn)樯?/p>

彩而造成誤會(huì)，從而放棄對(duì)商品的進(jìn)一步關(guān)注。

三、網(wǎng)店風(fēng)格的形成要素

店鋪風(fēng)格的形成要素主要包括店鋪的主要風(fēng)格、產(chǎn)品的情

緒、活動(dòng)的主題氣氛、店鋪的包裝色彩和VI配色。

1.店鋪的主要風(fēng)格

(1)簡(jiǎn)約清爽型

(2)商業(yè)型

(3)炫酷型

(4)可愛(ài)型

(5)特色型

2.產(chǎn)品的情緒

(1)女裝風(fēng)格

?韓式風(fēng)格

?淑女風(fēng)格

?嬉皮風(fēng)格

?波西米亞風(fēng)格

?田園風(fēng)格

?民族風(fēng)格

(2)男裝風(fēng)格

?傳統(tǒng)風(fēng)格

?商務(wù)休閑風(fēng)格

?運(yùn)動(dòng)風(fēng)格

?英倫風(fēng)格

?時(shí)尚休閑風(fēng)格

3.活動(dòng)的主題氣氛

4.店鋪的包裝色彩

5.VI配色

(1)單色VI

5

《電子商務(wù)視覺(jué)設(shè)計(jì)(第2版)》教案

(2)雙色VI

(3)多色VI

第二節(jié)網(wǎng)店頁(yè)面的配色誤區(qū)

一、色彩過(guò)多

合理地運(yùn)用色彩會(huì)使店鋪?lái)?yè)面變得鮮艷、生動(dòng)且富有活力,

但色彩數(shù)量的增加并不能與頁(yè)面的表現(xiàn)力成正比。在設(shè)計(jì)配色

時(shí)，要有一種主色貫穿其中。主色不一定是面積最大的顏色，

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

二、背景和文字對(duì)比不強(qiáng)烈

背景與文字對(duì)比不強(qiáng)烈，則文字內(nèi)容沒(méi)法突出，且昏暗的

背景令人沮喪，用花紋繁復(fù)的圖案作背景更容易讓人眼花繚亂。

有的背景和文字顏色對(duì)比不強(qiáng)烈，容易讓人看不清楚，使商品

的辨識(shí)度降低。

三、過(guò)分強(qiáng)調(diào)色彩的刺激度

在頁(yè)面配色時(shí)要盡量少用容易引起視覺(jué)疲勞的色調(diào)。一般

來(lái)說(shuō)，高明度、高純度的顏色刺激度高，疲勞度也高。在無(wú)彩

色系中，白色的明度最高，黑色的明度最低；在有彩色系中，

最明亮的是黃色，最暗的是紫色。

第三節(jié)網(wǎng)店的整體配色案例

一、店鋪?lái)?yè)面主色設(shè)計(jì)

二、店鋪?lái)?yè)面文案配色設(shè)計(jì)

三、店鋪?lái)?yè)面輔色設(shè)計(jì)

通過(guò)本章的學(xué)習(xí)，我們了解了色搭原則七要素，掌握了色

彩聯(lián)覺(jué)現(xiàn)象的定

義，還了解了網(wǎng)店風(fēng)格的幾大形成要素，以及網(wǎng)店頁(yè)面常

見(jiàn)的配色誤區(qū)。

在電商廣告作品中，和諧、對(duì)比鮮明的色彩搭配更能吸引

消費(fèi)者注意。因

此，廣告能否抓住消費(fèi)者的眼球，關(guān)鍵的一步是色彩的運(yùn)

用。大多數(shù)人對(duì)色彩

畫(huà)面的敏感度強(qiáng)于文字，同時(shí)色彩是通過(guò)人的印象或者聯(lián)

想來(lái)產(chǎn)生心理上的影

響的，而配色設(shè)計(jì)的作用就是通過(guò)改變空間的舒適程度和

環(huán)境氣氛來(lái)滿(mǎn)足人們

各方面的要求。如何正確地進(jìn)行視覺(jué)配色設(shè)計(jì)是電商視覺(jué)

設(shè)計(jì)者必備的技能。歸納與

提高

6

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第3章店鋪標(biāo)志視覺(jué)設(shè)計(jì)

教學(xué)內(nèi)容

一、徽標(biāo)的設(shè)計(jì)

二、店標(biāo)的設(shè)計(jì)

【知識(shí)目標(biāo)】

1.了解店標(biāo)的幾種設(shè)計(jì)形態(tài)。

2.掌握店標(biāo)設(shè)計(jì)的七大技巧。

教學(xué)要求

3.熟練掌握店標(biāo)的設(shè)計(jì)流程。

【技能目標(biāo)】

能夠熟練設(shè)計(jì)店標(biāo)。

1.店標(biāo)設(shè)計(jì)的七大技巧

教學(xué)重點(diǎn)

2.店標(biāo)的設(shè)計(jì)流程

1.店標(biāo)設(shè)計(jì)的七大技巧

教學(xué)難點(diǎn)

2.店標(biāo)的設(shè)計(jì)流程

教學(xué)方法講授法、案例法

7

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

課時(shí)數(shù)2課時(shí)

教學(xué)內(nèi)容

第一節(jié)店標(biāo)的設(shè)計(jì)形態(tài)

從設(shè)計(jì)的表達(dá)形態(tài)來(lái)看，店標(biāo)可以分為以下幾種。

1.中文文字型店標(biāo)

中文文字型店標(biāo)主要以文字單獨(dú)構(gòu)成，適用于多種傳播方

式，最大的優(yōu)點(diǎn)是一目了然，消費(fèi)者對(duì)中文文字的接受度最高,

好辨識(shí)也好記憶。

2.非中文型店標(biāo)

對(duì)于非中文的標(biāo)識(shí)來(lái)說(shuō)，英文和字母會(huì)給人一種很酷的感

覺(jué)，能給人留下深刻的印象，但其內(nèi)容是什么意思并不會(huì)第一

時(shí)間讓消費(fèi)者理解清楚，所以我們可以把它看作是一個(gè)符號(hào)。

3.組合型店標(biāo)

組合型店標(biāo)讓消賽者有一種中西結(jié)合、和國(guó)際接軌的大牌

感覺(jué)。在表達(dá)形式上，非中文的部分設(shè)計(jì)感比較強(qiáng)，視覺(jué)沖擊

力比較大，所以形式多種多樣，給人的視覺(jué)感受不錯(cuò)。

4.圖形型店標(biāo)

圖形型店標(biāo)就是直接用圖形作為店標(biāo)。這類(lèi)店標(biāo)上沒(méi)有什

么字符，所以給人的印象不是很深刻，不配合店名一起來(lái)看就

不會(huì)記得是什么店鋪。因此，不建議使用單純的圖形型店標(biāo)。

5.圖文結(jié)合型店標(biāo)

圖文結(jié)合型店標(biāo)就是圖形與文字相結(jié)合的店標(biāo)形式。這種

店標(biāo)既具有圖形化的視覺(jué)沖擊力，又能清楚地表達(dá)店鋪品牌信

息。

第二節(jié)店標(biāo)的設(shè)計(jì)技巧

1.設(shè)計(jì)要有造型

2.設(shè)計(jì)要有領(lǐng)導(dǎo)性

3.標(biāo)志設(shè)計(jì)的統(tǒng)一性

4.標(biāo)志的識(shí)別性

5.標(biāo)志的時(shí)代性

6.標(biāo)志的系統(tǒng)性

7.標(biāo)志的延伸性

第三節(jié)不同行業(yè)的店標(biāo)設(shè)計(jì)

1.表現(xiàn)柔美型

針對(duì)女性的行業(yè)和類(lèi)目，多數(shù)要表現(xiàn)出女性的柔美與嬌媚。

2.表現(xiàn)陽(yáng)剛型

針對(duì)男性的行業(yè)和類(lèi)目，要重點(diǎn)表現(xiàn)男性的陽(yáng)剛之美。

3.表現(xiàn)可愛(ài)型

針對(duì)年輕女孩和嬰幼兒的行業(yè)和類(lèi)目，要突出可愛(ài)、萌萌

的感覺(jué)

第四節(jié)店標(biāo)的設(shè)計(jì)流程

8

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

在設(shè)計(jì)店標(biāo)前，首先要和客戶(hù)或領(lǐng)導(dǎo)進(jìn)行溝通，對(duì)店標(biāo)設(shè)

計(jì)來(lái)說(shuō)溝通是極為重要的，因?yàn)檫@樣可以大大提高工作效率。

本案例中的店鋪名稱(chēng)是“鮮果”，主營(yíng)項(xiàng)目是水果，所以在

店標(biāo)設(shè)計(jì)上要體現(xiàn)出水果店鋪的風(fēng)格。經(jīng)過(guò)分析和構(gòu)思，首先

想到的是用水果的圖形來(lái)表現(xiàn)，所以第一步就是去素材庫(kù)找一

些卡通水果的素材圖形，然后摳出水果圖像，添加文字，并對(duì)

店鋪名稱(chēng)做一些變形處理，最后添加修飾圖形、修飾圖案和修

飾文字等。

通過(guò)本章的學(xué)習(xí)，我們了解了店標(biāo)的幾種設(shè)計(jì)形態(tài)，掌握

了店標(biāo)設(shè)計(jì)的七

大技巧，以及店標(biāo)的設(shè)計(jì)流程。

大到國(guó)際連鎖品牌，小到零售網(wǎng)店都需要屬于自己的獨(dú)特

店鋪標(biāo)志。店鋪

標(biāo)志包括徽標(biāo)和店標(biāo)。企業(yè)與品牌的視覺(jué)符號(hào)稱(chēng)為徽標(biāo)，

網(wǎng)店的標(biāo)志稱(chēng)為店標(biāo)。

這兩種標(biāo)志都是店鋪的形象代表，主要起到識(shí)別和推廣的

作用。優(yōu)秀的店鋪標(biāo)

志設(shè)計(jì)不僅能對(duì)網(wǎng)店起到美化作用，還可以強(qiáng)化消費(fèi)者對(duì)

網(wǎng)店的記憶。同時(shí)，

高大上的徽標(biāo)和店標(biāo)也是網(wǎng)店品牌和實(shí)力的一種體現(xiàn)。

歸納與

提高

第4章店鋪首頁(yè)視覺(jué)設(shè)計(jì)

一、首頁(yè)視覺(jué)水平的四大指標(biāo)

二、店招視覺(jué)設(shè)計(jì)

三、首焦輪播區(qū)視覺(jué)設(shè)計(jì)

四、商品陳列區(qū)視覺(jué)設(shè)計(jì)

五、茶葉店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例

【知識(shí)目標(biāo)】

1.了解首頁(yè)視覺(jué)水平的四大指標(biāo)。

2.掌握店招視覺(jué)設(shè)計(jì)規(guī)范及技巧。

教學(xué)內(nèi)容

教學(xué)要求

3.掌握首焦輪播區(qū)視覺(jué)設(shè)計(jì)技巧。

4.了解商品陳列區(qū)的布局設(shè)計(jì)。

【技能目標(biāo)】

9

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

能夠熟練設(shè)計(jì)店鋪首頁(yè)。

1.店招視覺(jué)設(shè)計(jì)

教學(xué)重點(diǎn)2.首焦輪播區(qū)視覺(jué)設(shè)計(jì)

3.商品陳列區(qū)的布局設(shè)計(jì)

1.店招視覺(jué)設(shè)計(jì)

教學(xué)難點(diǎn)2.首焦輪播區(qū)視覺(jué)設(shè)計(jì)

3.商品陳列區(qū)的布局設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

第一節(jié)首頁(yè)視覺(jué)水平的四大指標(biāo)

一、首頁(yè)跳失率

首頁(yè)跳失率是指消費(fèi)者通過(guò)某種渠道進(jìn)入店鋪，只訪問(wèn)了

一個(gè)首頁(yè)就離開(kāi)的訪問(wèn)次數(shù)占該入口總訪問(wèn)次數(shù)的比例。電商

運(yùn)營(yíng)者需要隨時(shí)觀測(cè)店鋪的各項(xiàng)數(shù)據(jù)，并根據(jù)數(shù)據(jù)變化情況對(duì)

頁(yè)面進(jìn)行優(yōu)化與調(diào)整。

二、首頁(yè)點(diǎn)擊率

首頁(yè)點(diǎn)擊率是商品在首頁(yè)展現(xiàn)后的被點(diǎn)擊比率，即首頁(yè)點(diǎn)

擊率:首頁(yè)點(diǎn)擊量?首頁(yè)展現(xiàn)量。通過(guò)首頁(yè)點(diǎn)擊率可以看出店

鋪推廣的商品是否吸引人。首頁(yè)點(diǎn)擊率越高，說(shuō)明商品越吸引

消費(fèi)者；首頁(yè)點(diǎn)擊率越低，表示商品對(duì)于消費(fèi)者的吸引力越低,

這時(shí)就需要優(yōu)化店鋪中的商品、優(yōu)化商品圖片和推廣標(biāo)題或者

優(yōu)化商品詳情頁(yè)面中的信息，讓商品的展現(xiàn)盡可能多地帶來(lái)點(diǎn)

擊量。

三、首頁(yè)人均點(diǎn)擊次數(shù)

首頁(yè)人均點(diǎn)擊次數(shù)是指在一段時(shí)間內(nèi)人均點(diǎn)擊了多少次。

首頁(yè)人均點(diǎn)擊次數(shù)可以用來(lái)測(cè)試訪客黏度，如果首頁(yè)的客戶(hù)體

驗(yàn)做得很差，讓訪客進(jìn)入首頁(yè)后不知所措，找不到自己想要的

產(chǎn)品，那么訪客自然會(huì)離開(kāi)。運(yùn)營(yíng)者要根據(jù)首頁(yè)人均點(diǎn)擊次數(shù)

來(lái)優(yōu)化整體的導(dǎo)航，美化產(chǎn)品圖片，這對(duì)訪客的引導(dǎo)非常重要。

四、首頁(yè)平均停留時(shí)間

10

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

首頁(yè)平均停留時(shí)間為訪問(wèn)店鋪首頁(yè)的所有訪客總的停留時(shí)

長(zhǎng)除以訪客數(shù)（單位：秒），多天的平均停留時(shí)間為各天人均

停留時(shí)長(zhǎng)的日均值。和首頁(yè)人均點(diǎn)擊次數(shù)一樣，首頁(yè)平均停留

時(shí)間也可以用來(lái)判斷一個(gè)店鋪首頁(yè)是否能留住訪客。

第二節(jié)店招視覺(jué)設(shè)計(jì)

一、店招視覺(jué)設(shè)計(jì)規(guī)范

不同的電商平臺(tái)對(duì)店招的圖片尺寸有不同的要求，下面以

淘寶網(wǎng)為例來(lái)介紹店招的視覺(jué)設(shè)計(jì)規(guī)范。

淘寶后臺(tái)的店招高度為120像素，建議設(shè)計(jì)時(shí)設(shè)定店招尺

寸為950像素X120像素，加上導(dǎo)航條高度30像素，共150像

素，可避免發(fā)布后導(dǎo)航不顯示的問(wèn)題。

在店招上可以添加品牌宣傳語(yǔ)、近期的打折促銷(xiāo)信息、收

藏按鈕、移動(dòng)端二維碼等元素，但這些元素最好不要超過(guò)3個(gè),

因?yàn)樽銐虻牧舭卓臻g有利于打造視覺(jué)重點(diǎn)，讓設(shè)計(jì)元素發(fā)揮出

最大的效能。

在設(shè)計(jì)店招時(shí)要注意和導(dǎo)航條的風(fēng)格進(jìn)行統(tǒng)一，利用色彩、

修飾元素與風(fēng)格的相似性來(lái)營(yíng)造視覺(jué)上的一致性，打造出獨(dú)特

的店鋪裝修風(fēng)格。

二、店鋪名稱(chēng)的藝術(shù)化處理

1.用不同字體和字號(hào)的組合營(yíng)造藝術(shù)感

2.添加特效，突出特殊性和醒目度

3.使用修飾元素提升觀賞性

三、圖層樣式的應(yīng)用

圖層樣式是圖像處理與網(wǎng)頁(yè)制作中的常用功能之一，其作

用就是對(duì)設(shè)計(jì)元素進(jìn)行修飾和美化，實(shí)現(xiàn)色彩、質(zhì)感與光澤上

的變化。

添加圖層樣式不僅可以將原本單一的色彩變得絢麗，為設(shè)

計(jì)元素添加內(nèi)陰影、外發(fā)光等特殊的光澤效果，還可以營(yíng)造立

體浮雕、圖案紋理等特殊效果。需要注意的是，導(dǎo)航條的設(shè)計(jì)

風(fēng)格應(yīng)當(dāng)和店招乃至整個(gè)店鋪首頁(yè)的裝修風(fēng)格一致，不能一味

地追求華麗而讓導(dǎo)航條顯得突兀、不協(xié)調(diào)。

第三節(jié)首焦輪播區(qū)視覺(jué)設(shè)計(jì)

一、設(shè)計(jì)聚焦消費(fèi)者視線

首焦位置是消費(fèi)者進(jìn)入店鋪后第一時(shí)間看到的內(nèi)容，如果

這部分內(nèi)容能夠首先抓住消費(fèi)者的眼球，就會(huì)大大提高其繼續(xù)

瀏覽店鋪?lái)?yè)面的可能性。相較于在首焦位置使用大量文字說(shuō)明

的布局安排，圖片結(jié)合文案的設(shè)計(jì)形式更符合消費(fèi)者追求輕閱

讀與輕松購(gòu)物體驗(yàn)的心理。同時(shí)，放置消費(fèi)者最渴望看到的信

息內(nèi)容也是這個(gè)板塊設(shè)計(jì)的重點(diǎn)。

二、構(gòu)建設(shè)計(jì)圖三要素

店鋪首頁(yè)中的首焦輪播區(qū)基本上都是由三個(gè)要素組成的，

即完整、精致的商品形象，唯美、絢麗的背景，以及精心編排

的廣告文字。

首焦輪播圖的背景圖形要與商品的形象保持一致的風(fēng)格或

者能夠烘托出某種特定的氣氛。首焦輪播圖中的商品圖要經(jīng)過(guò)

色調(diào)和光影處理，能夠真實(shí)再現(xiàn)商品的色彩和品質(zhì)，或者根據(jù)

背景和文字的風(fēng)格和影調(diào)做過(guò)適當(dāng)修飾。藝術(shù)化的文字編排在

首焦輪播區(qū)中顯得尤

11

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

為重要，文字的字體與字號(hào)、色彩的變化等都是設(shè)計(jì)中較

為關(guān)鍵的環(huán)節(jié)。

三、溶圖的應(yīng)用規(guī)范

溶圖是用兩張或兩張以上的圖片拼合起來(lái)的一張圖片，構(gòu)

圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)。

在選擇溶圖時(shí)要注意，要么溶圖的色調(diào)與商品相似，要么

溶圖的影調(diào)與商品和諧搭配，只有滿(mǎn)足了其中的一個(gè)要求，才

能保證首焦輪播圖具備較理想的視覺(jué)沖擊力和渾然天成的視覺(jué)

效果。

第四節(jié)商品陳列區(qū)視覺(jué)設(shè)計(jì)

一、營(yíng)造視覺(jué)動(dòng)線

在進(jìn)行商品展示圖片的排列設(shè)計(jì)時(shí)，要首先使用整潔的排

列讓消費(fèi)者獲得輕松感，并且還要注意圖片不宜過(guò)多，橫排圖

片最好不超過(guò)五張，因?yàn)檫^(guò)多的圖片容易讓消費(fèi)者感到瀏覽壓

力并產(chǎn)生疲倦感。

除此之外，通過(guò)靈活多變的排列方式形成圖片組合的視覺(jué)

動(dòng)線，也能減少過(guò)于死板的排列組合帶來(lái)的枯燥與乏味感。

二、商品布局藝術(shù)化

商品照片的布局是影響商品陳列區(qū)整個(gè)版式的關(guān)鍵，也是

確立整個(gè)首頁(yè)風(fēng)格的關(guān)鍵。為了吸引消費(fèi)者的眼球，可以根據(jù)

商品的功能、外形特點(diǎn)、設(shè)計(jì)風(fēng)格來(lái)對(duì)商品陳列區(qū)布局進(jìn)行精

心的規(guī)劃與設(shè)計(jì)，將店鋪中的商品藝術(shù)化地展現(xiàn)出來(lái)。

常見(jiàn)的商品陳列區(qū)布局方式有以下三種。

1.方塊式布局

2.折線型布局

3.隨意型布局

第五節(jié)茶葉店鋪首頁(yè)視覺(jué)設(shè)計(jì)案例

本案例為某茶葉店鋪設(shè)計(jì)首頁(yè)裝修圖，具體操作步驟略。

通過(guò)本章的學(xué)習(xí)，我們了解了首頁(yè)視覺(jué)水平的四大指標(biāo)，

店招視覺(jué)設(shè)計(jì)規(guī)

范及技巧，掌握了首焦輪播區(qū)視覺(jué)設(shè)計(jì)技巧，還了解了商

品陳列區(qū)的布局設(shè)計(jì)

方法。

店鋪首頁(yè)在電商店鋪中所起到的作用就好像實(shí)體店的店面,

作為品牌的門(mén)

臉，它的主要作用是向消費(fèi)者做展示，通過(guò)視覺(jué)、氛圍、

商品和服務(wù)的綜合感受

讓消費(fèi)者對(duì)品牌有初步的了解和接觸。首頁(yè)設(shè)計(jì)得是否有

新意直接關(guān)系到商品信

息的轉(zhuǎn)化率，因此在進(jìn)行店鋪首頁(yè)視覺(jué)設(shè)計(jì)時(shí)要盡可能地

讓設(shè)計(jì)能夠聚集消費(fèi)者

的注意力，提高商品信息的轉(zhuǎn)化率，這才是首頁(yè)視覺(jué)設(shè)計(jì)

要達(dá)到的重要目的。歸納與

提高

第5章商品詳情頁(yè)視覺(jué)設(shè)計(jì)

教學(xué)內(nèi)容

一、商品主圖設(shè)計(jì)

二、商品細(xì)節(jié)展示區(qū)設(shè)計(jì)

三、商品功效簡(jiǎn)介區(qū)設(shè)計(jì)

12

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

四、女鞋商品詳情頁(yè)視覺(jué)設(shè)計(jì)案例

【知識(shí)目標(biāo)】

1.了解商品主圖的設(shè)計(jì)規(guī)范。

2.掌握商品主圖的設(shè)計(jì)形式。

3.掌握商品細(xì)節(jié)展示區(qū)的設(shè)計(jì)技巧。

教學(xué)要求

4.了解修飾元素在設(shè)計(jì)中的重要性。

5.熟練掌握商品詳情頁(yè)各元素的設(shè)計(jì)方法。

【技能目標(biāo)】

能夠熟練設(shè)計(jì)商品詳情頁(yè)。

1.商品主圖設(shè)計(jì)

教學(xué)重點(diǎn)2.商品細(xì)節(jié)展示區(qū)設(shè)計(jì)

3.商品功效簡(jiǎn)介區(qū)設(shè)計(jì)

1.商品主圖設(shè)計(jì)

教學(xué)難點(diǎn)

2.商品細(xì)節(jié)展示區(qū)設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

第一節(jié)商品主圖設(shè)計(jì)

一、商品主圖的設(shè)計(jì)規(guī)范

淘寶網(wǎng)對(duì)商品主圖的尺寸和設(shè)計(jì)都提出了具體的要求和規(guī)

范：顯示在搜索結(jié)果頁(yè)面中的商品主圖尺寸為220像素x220

像素，而顯示在商品詳情頁(yè)左上角的商品主圖尺寸為400像素

x400像素。商品主圖的文件大小要小于3MB,圖片格式可以

為JPG、PNG格式。當(dāng)上傳的商品主圖尺寸大于700像素

x700像素時(shí)，商品詳情頁(yè)會(huì)自動(dòng)提供放大鏡功能。

天貓商城的商品主圖設(shè)計(jì)規(guī)范與淘寶網(wǎng)不同，其規(guī)定商品

主圖尺寸為800像素x800像

13

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

素以上，自動(dòng)擁有放大鏡功能。主圖不許出現(xiàn)圖片留白、

拼接、水印，不得包含促銷(xiāo)、夸大描述等文字說(shuō)明，該文字說(shuō)

明包括但不限于“秒殺”“限時(shí)折扣"“包郵''等，而且不同行業(yè)店

鋪的商品主圖要求也有所不同。

二、商品主圖的設(shè)計(jì)形式

商品主圖的基本要求是能夠展示商品的全貌，圖片清晰，

并且不能有雜亂的背景。商品主圖的設(shè)計(jì)形式主要有以下幾種

類(lèi)型。

1.展不商品的全貌

2.場(chǎng)景化的設(shè)計(jì)

3.拼接式設(shè)計(jì)

4.突出商品賣(mài)點(diǎn)

三、添加文案提高主圖點(diǎn)擊率

添加了文案的商品主圖可以傳遞更多的商品信息，讓消費(fèi)

者通過(guò)一張圖片就能對(duì)商品有更多的了解，更容易激發(fā)消費(fèi)者

的點(diǎn)擊興趣和購(gòu)買(mǎi)欲望。

在添加主圖文案時(shí)，需要注意以下兩點(diǎn)。

（1）文案說(shuō)明信息的表達(dá)形式要簡(jiǎn)潔明了，要有引發(fā)消

費(fèi)者產(chǎn)生點(diǎn)擊沖動(dòng)的誘惑力。

(2)文案說(shuō)明信息不能遮擋商品主體。

第二節(jié)商品細(xì)節(jié)展示區(qū)設(shè)計(jì)

一、商品細(xì)節(jié)展示區(qū)的表現(xiàn)形式

考慮到不同商品在材質(zhì)、功能和外觀等方面的差異，在設(shè)

計(jì)商品細(xì)節(jié)展示區(qū)時(shí)可以采用不同的表現(xiàn)形式。常見(jiàn)的表現(xiàn)形

式有以下兩種。

1.指示型表現(xiàn)形式

2.局部圖解型表現(xiàn)形式

二、商品細(xì)節(jié)展示區(qū)的通用設(shè)計(jì)方式

商品細(xì)節(jié)展示區(qū)通用的一種設(shè)計(jì)方式就是添加必要的文字

和素材。

1.利用文字對(duì)細(xì)節(jié)進(jìn)行說(shuō)明

2.素材讓細(xì)節(jié)展示更直觀

第三節(jié)商品功效簡(jiǎn)介區(qū)設(shè)計(jì)

一、商品功效簡(jiǎn)介區(qū)的設(shè)計(jì)規(guī)范

商品功效簡(jiǎn)介區(qū)是商品詳情頁(yè)的一部分，其設(shè)計(jì)寬度受到

商品詳情頁(yè)寬度的限制，高度上則不受限制。表1所示為淘寶、

天貓和京東的商品詳情頁(yè)設(shè)計(jì)尺寸規(guī)范。

表1淘寶、天貓和京東的商品詳情頁(yè)設(shè)計(jì)尺寸規(guī)范

電商平臺(tái)商品詳情頁(yè)設(shè)計(jì)尺寸規(guī)范

詳情頁(yè)左側(cè)邊欄寬190像素，中間空10像素，右側(cè)寬

750像素，加

淘寶網(wǎng)起來(lái)總寬度為950像素。如果關(guān)閉左側(cè)邊欄，就可

以顯示950像素寬，

否則只顯示750像素寬

天貓商城詳情頁(yè)布局與淘寶類(lèi)似，不同之處在于天貓商城

新版頁(yè)面的寬度由

14

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

750像素變?yōu)?90像素

京東京東對(duì)詳情頁(yè)布局有統(tǒng)一要求，整體寬度不超過(guò)740

像素

商品功效簡(jiǎn)介區(qū)的設(shè)計(jì)重點(diǎn)就是對(duì)商品的功效進(jìn)行總結(jié)與

歸納，通過(guò)文字、色彩和修飾元素的完美搭配來(lái)提升文字的可

讀性。

二、修飾元素在設(shè)計(jì)中的重要性

在設(shè)計(jì)商品功效簡(jiǎn)介區(qū)時(shí)，為了將商品功效表述得更加直

觀、形象，店主可以使用多種修飾元素來(lái)豐富畫(huà)面的內(nèi)容，例

如用圖片來(lái)代替某些文字或者使用素材來(lái)突出某些文字。修飾

元素的巧妙應(yīng)用能夠提升商品信息的可讀性，讓枯燥的文字變

得更具象化，在給消費(fèi)者帶來(lái)美好的視覺(jué)享受的同時(shí)有助于消

費(fèi)者深入了解商品的功效。

第四節(jié)女鞋商品詳情頁(yè)視覺(jué)設(shè)計(jì)案例

本節(jié)將結(jié)合前面所講的內(nèi)容為一款女鞋設(shè)計(jì)商品詳情頁(yè)，

設(shè)計(jì)內(nèi)容包括商品主圖、商品介紹等，要求設(shè)計(jì)的頁(yè)面要能清

晰、準(zhǔn)確地展示與說(shuō)明女鞋的特點(diǎn)，具體操作過(guò)程略。

通過(guò)本章的學(xué)習(xí)，我們了解了商品主圖的設(shè)計(jì)規(guī)范和設(shè)計(jì)

形式，掌握了商

品細(xì)節(jié)展示區(qū)的設(shè)計(jì)技巧，以及商品詳情頁(yè)各元素的設(shè)計(jì)

方法。

商品詳情頁(yè)是所有營(yíng)銷(xiāo)的落地點(diǎn)。消費(fèi)者通過(guò)搜索進(jìn)入店

鋪后，首先進(jìn)入

的便是詳情頁(yè)；所有頁(yè)面上有且僅有詳情頁(yè)承擔(dān)著下單購(gòu)

買(mǎi)的職責(zé)；消費(fèi)者在

購(gòu)買(mǎi)前要對(duì)詳情頁(yè)仔細(xì)看、反復(fù)看，甚至對(duì)比看，才能決

定是否咨詢(xún)賣(mài)家、是

否下單。如果詳情頁(yè)不能滿(mǎn)足消費(fèi)者的需求，不能解決消

費(fèi)者的實(shí)際問(wèn)題，那

么前面的工作做得再好，都會(huì)功虧一簧。所以，無(wú)論是什

么店鋪，都要對(duì)商品

詳情頁(yè)進(jìn)行重點(diǎn)設(shè)計(jì)。

歸納與

提高

15

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第6章高點(diǎn)擊率推廣圖片視覺(jué)設(shè)計(jì)

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

二、直通車(chē)圖片設(shè)計(jì)

三、鉆展圖設(shè)計(jì)

四、直播封面圖設(shè)計(jì)

五、聚劃算主圖設(shè)計(jì)

【知識(shí)目標(biāo)】

1.掌握推廣圖片的構(gòu)圖法則。

2.掌握直通車(chē)圖片設(shè)計(jì)的要點(diǎn)。

3.掌握鉆展圖設(shè)計(jì)的關(guān)鍵點(diǎn)。

教學(xué)內(nèi)容

教學(xué)要求

4.掌握直播封面圖的設(shè)計(jì)原則。

5.掌握聚劃算主圖的設(shè)計(jì)思路與方法。

【技能目標(biāo)】

能夠熟練設(shè)計(jì)直通車(chē)圖片、鉆展圖、聚劃算主圖、直

播封面圖和聚劃算主圖。

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

2.直通車(chē)圖片設(shè)計(jì)

教學(xué)重點(diǎn)3.鉆展圖設(shè)計(jì)

4.直播封面圖設(shè)計(jì)

5.聚劃算主圖設(shè)計(jì)

教學(xué)難點(diǎn)1.直通車(chē)圖片設(shè)計(jì)

16

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

2.鉆展圖設(shè)計(jì)

3.直播封面圖設(shè)計(jì)

4.聚劃算主圖設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)6課時(shí)

教學(xué)內(nèi)容

第一節(jié)推廣圖片構(gòu)圖法則

一、變化式構(gòu)圖

變化式構(gòu)圖又稱(chēng)留白式構(gòu)圖。設(shè)計(jì)者將商品圖安排在某一

角落或某一邊，同時(shí)留出大部分空白。留白在畫(huà)面上的作用是

幫助設(shè)計(jì)者展示感情色彩，給消費(fèi)者以思考和想象的空間。

二、對(duì)角線構(gòu)圖

對(duì)角線構(gòu)圖就是把商品圖安排在對(duì)角線上，利用畫(huà)面對(duì)角

線來(lái)整體統(tǒng)一畫(huà)面元素，同時(shí)也能使陪體與主體區(qū)分明顯。這

種構(gòu)圖的特點(diǎn)是富有動(dòng)感，活潑生動(dòng)，容易產(chǎn)生線條的匯聚趨

勢(shì)，吸引消費(fèi)者的視線，從而達(dá)到突出商品圖的效果。

三、對(duì)稱(chēng)式構(gòu)圖

對(duì)稱(chēng)式構(gòu)圖給人一種畫(huà)面平衡、穩(wěn)定、商品突出的感覺(jué)，

缺點(diǎn)是畫(huà)面比較呆板、缺少變化。

四、平衡式構(gòu)圖

平衡式構(gòu)圖給人一種祥和、平靜的感覺(jué)，缺點(diǎn)是缺乏創(chuàng)新,

沒(méi)有新意。平衡式構(gòu)圖不像對(duì)稱(chēng)式構(gòu)圖那樣老氣、呆板，所以

很多電商設(shè)計(jì)者都會(huì)選擇這種構(gòu)圖方法。

五、緊湊式構(gòu)圖

緊湊式構(gòu)圖就是將商品以特寫(xiě)的形式加以放大，布滿(mǎn)畫(huà)面,

具有緊湊、細(xì)膩、微觀等特點(diǎn)。

六、X形構(gòu)圖

X形構(gòu)圖是對(duì)角線構(gòu)圖的升級(jí)版，也稱(chēng)放射式構(gòu)圖。它是

將視覺(jué)焦點(diǎn)放置在畫(huà)面的中央位置，讓每一條放射線的中點(diǎn)都

位于視覺(jué)焦點(diǎn)之上。采用X形構(gòu)圖能夠獲得嚴(yán)謹(jǐn)?shù)拿栏?，盡

情釋放商品擁有的自然、純美，在安靜的氛圍中就能讓消費(fèi)者

感受到活力與激情。

第二節(jié)直通車(chē)圖片設(shè)計(jì)

一、圖片整體風(fēng)格設(shè)計(jì)

17

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

在制作促銷(xiāo)圖片之前，第一步要做的就是根據(jù)文案或商品

等因素來(lái)進(jìn)行風(fēng)格定位。設(shè)計(jì)時(shí)，要確定推廣的商品所針對(duì)的

消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格及顏色；分

析他們的消費(fèi)能力，以確定什么樣的促銷(xiāo)方式是其最容易接受

的；分析他們的生活習(xí)慣，合理調(diào)整投放時(shí)間和策略，與競(jìng)爭(zhēng)

對(duì)手形成差異，以提高投放效率。

在制作直通車(chē)圖時(shí)，可以參考以下技巧。

1.運(yùn)用適當(dāng)?shù)谋尘?/p>

2.保證圖片清晰度

3.精簡(jiǎn)文字，去除“牛皮癬”

4.巧用素材搭配

二、突出商品賣(mài)點(diǎn)的設(shè)計(jì)

在店鋪推廣直通車(chē)主圖中添加店鋪品牌更多的說(shuō)明信息，

能讓消費(fèi)者從更多方面認(rèn)識(shí)品牌，進(jìn)一步增強(qiáng)消費(fèi)者對(duì)品牌的

認(rèn)同感、提升圖片的可信度。同時(shí)，店鋪利益點(diǎn)信息的添加也

能促使消費(fèi)者進(jìn)行點(diǎn)擊。

第三節(jié)鉆展圖設(shè)計(jì)

一、博取眼球的創(chuàng)意設(shè)計(jì)

創(chuàng)意需要靈感和積累，并不是在短期內(nèi)就能隨隨便便產(chǎn)生

的，但其有針對(duì)的對(duì)象，所以也不難抓住。例如，拍攝商品時(shí)

轉(zhuǎn)換相機(jī)的位置，用不同的角度進(jìn)行表現(xiàn)，便可以為鉆展圖帶

來(lái)不一樣的表現(xiàn)形式與視覺(jué)沖擊力。

除了改變商品的拍攝角度外，對(duì)商品進(jìn)行富有造型感的擺

設(shè)也能體現(xiàn)創(chuàng)意與吸引力。二、統(tǒng)一圖片設(shè)計(jì)風(fēng)格

主題是圖片的重點(diǎn)，對(duì)于鉆展圖而言，主題是激發(fā)消費(fèi)者

潛在需求的重要武器，明確的主題能夠促使消費(fèi)者點(diǎn)擊圖片。

同時(shí)，圖片的設(shè)計(jì)也需要擁有統(tǒng)一的風(fēng)格。

通過(guò)圖片背景的設(shè)計(jì)可以烘托出圖片的整體氛圍與設(shè)計(jì)風(fēng)

格。鉆展圖背景的設(shè)計(jì)主要有兩種方式：一種是通過(guò)拍攝道具

構(gòu)建出背景，從而營(yíng)造圖片的氣氛；另一種是合成背景。三、

確定重點(diǎn)表現(xiàn)元素

只有統(tǒng)一的圖片風(fēng)格是不夠的，鉆展圖更重要的意義在于

通過(guò)圖片的設(shè)計(jì)對(duì)店鋪或商品進(jìn)行推廣，從而帶來(lái)流量。搭配

適當(dāng)?shù)纳?、控制好相關(guān)元素的尺寸也是讓鉆展圖具有足夠吸

引力的關(guān)鍵。

在設(shè)計(jì)鉆展圖時(shí)，需要確定圖片的重點(diǎn)表現(xiàn)元素。

第四節(jié)直播封面圖設(shè)計(jì)

一、直播封面圖尺寸要求

直播封面圖不宜過(guò)大也不能太小，做到清晰、美觀很重要。

以淘寶直播封面圖為例，它沒(méi)有固定的尺寸，只要是正方形即

可，一般為750像素x750像素，最小不能低于500像素x500

像素。

二、直播封面圖設(shè)計(jì)原則

要想打造優(yōu)質(zhì)的直播封面圖，主播在設(shè)計(jì)封面圖時(shí)要遵循

以下原則。

1.符合直播主題

18

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

2.封面圖要美觀、清晰

3.色彩要適當(dāng)

4.不要妨礙重要內(nèi)容的展現(xiàn)

5.禁用合成圖

6.拒絕不當(dāng)信息

7.封面圖不要雷同

第五節(jié)聚劃算主圖設(shè)計(jì)

一、聚劃算主圖設(shè)計(jì)思路

聚劃算主圖的設(shè)計(jì)主要包括商品拍攝、商品背景、商品構(gòu)

圖和詳情頁(yè)主圖四部分。

1.商品拍攝

拍攝角度不限，建議選用商品最大展示面積的角度進(jìn)行拍

攝，以保證主題商品明確，商品在畫(huà)面中能夠完整顯示。

2.商品背景

建議圖片背景只選擇真實(shí)拍攝的實(shí)景，或者單色背景中的

一種（包括同一色調(diào)的漸變）。不建議使用多色或者多個(gè)實(shí)拍

背景，也不建議出現(xiàn)水印。背景的選擇應(yīng)該是為了襯托主題商

品，建議運(yùn)用虛化背景、突出主題的方式，或者使用同一色系

或漸變色背景。

3.商品構(gòu)圖

多色商品展示盡量使用實(shí)拍圖，沒(méi)有實(shí)拍圖時(shí)也可以使用

色卡。盡量在主圖展示上不出現(xiàn)細(xì)節(jié)圖，否則只會(huì)喧賓奪主。

如果選用模特，那么同一畫(huà)面中的模特不要多于兩位，要把商

品和模特放在統(tǒng)一場(chǎng)景中進(jìn)行拍攝，盡量不出現(xiàn)拼圖現(xiàn)象。

二、聚劃算主圖設(shè)計(jì)案例

本案例結(jié)合前面所講的內(nèi)容為一款化妝品設(shè)計(jì)聚劃算主圖。

在制作過(guò)程中使用漸變的背景進(jìn)行修飾，添加“全國(guó)包郵”“送”

促銷(xiāo)方案，以及簡(jiǎn)單的廣告詞來(lái)突出產(chǎn)品優(yōu)勢(shì)，具體操作過(guò)程

略。

通過(guò)本章的學(xué)習(xí)，我們掌握了推廣圖片的構(gòu)圖法則，直通

車(chē)圖片設(shè)計(jì)的要

點(diǎn)，鉆展圖設(shè)計(jì)的關(guān)鍵點(diǎn)，直播封面圖的設(shè)計(jì)原則，以及

聚劃算主圖的設(shè)計(jì)思

路與方法。

圖片是電商營(yíng)銷(xiāo)的基礎(chǔ)與靈魂，尤其是推廣圖片，其設(shè)計(jì)

的重要性不言而

喻?？梢哉f(shuō)優(yōu)質(zhì)的推廣圖片是吸引流量、促進(jìn)點(diǎn)擊、提高

轉(zhuǎn)化率的必需品，也

是視覺(jué)設(shè)計(jì)的關(guān)鍵點(diǎn)。

歸納與

提高

19

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第7章網(wǎng)店促銷(xiāo)活動(dòng)頁(yè)視覺(jué)設(shè)計(jì)

教學(xué)內(nèi)容

一、促銷(xiāo)廣告的黃金設(shè)計(jì)要素

二、不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)

【知識(shí)目標(biāo)】

1.掌握如何營(yíng)造促銷(xiāo)廣告的氛圍。

2.掌握促銷(xiāo)廣告的三大設(shè)計(jì)總則。

教學(xué)要求

3.掌握不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)方法。

【技能目標(biāo)】

能夠熟練設(shè)計(jì)網(wǎng)店促銷(xiāo)廣告。

1.保證設(shè)計(jì)的基本美感

教學(xué)重點(diǎn)

2.營(yíng)造促銷(xiāo)氛圍

20

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

3.促銷(xiāo)廣告圖片的設(shè)計(jì)原則

4.不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)

1.保證設(shè)計(jì)的基本美感

教學(xué)難點(diǎn)

2.不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)3課時(shí)

教學(xué)內(nèi)容

第一節(jié)促銷(xiāo)廣告的黃金設(shè)計(jì)要素

一、保證設(shè)計(jì)的基本美感

具有視覺(jué)營(yíng)銷(xiāo)力的促銷(xiāo)廣告需要具備基本的設(shè)計(jì)美感與清

晰度。如果想使促銷(xiāo)廣告圖片更富吸引力與協(xié)調(diào)感，就要特別

注意以下四個(gè)方面。

1.平衡

2.勢(shì)能

3.集群

4.標(biāo)簽分割

二、營(yíng)造促銷(xiāo)氛圍

在設(shè)計(jì)促銷(xiāo)廣告時(shí)，除了促銷(xiāo)活動(dòng)的本身內(nèi)容以外，還可

以添加引導(dǎo)標(biāo)簽、限制提示等元素，營(yíng)造出更為濃郁的促銷(xiāo)氛

圍，進(jìn)一步引導(dǎo)與促使消費(fèi)者點(diǎn)擊促銷(xiāo)廣告圖片。

1.添加引導(dǎo)標(biāo)簽

2.添加限制提示

三、促銷(xiāo)廣告圖片的設(shè)計(jì)原則

除了具有基本的設(shè)計(jì)美感和促銷(xiāo)氛圍之外，促銷(xiāo)廣告圖片

的設(shè)計(jì)還要遵循主題突出、風(fēng)格統(tǒng)一與目標(biāo)明確的設(shè)計(jì)原則。

1.主題突出

2.風(fēng)格統(tǒng)一

3.目標(biāo)明確

第二節(jié)不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)

一、發(fā)展初期——為打造爆款而促銷(xiāo)

對(duì)于剛起步的小店而言，店鋪幾乎沒(méi)有自然流量，此時(shí)便

需要通過(guò)推廣來(lái)進(jìn)行流量的引入，而促銷(xiāo)就是引流最為見(jiàn)效的

手段。新店或許并沒(méi)有足夠的經(jīng)濟(jì)實(shí)力去開(kāi)展大規(guī)模的促銷(xiāo)活

動(dòng)，此時(shí)可以選擇單品進(jìn)行促銷(xiāo)，并投放一定比例的單品促銷(xiāo)

廣告，打造爆款成為

21

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

為店鋪引流的法寶。

為打造爆款而設(shè)計(jì)的促銷(xiāo)廣告主要需要表現(xiàn)單品的賣(mài)點(diǎn)以

及單品優(yōu)惠的幅度，以此來(lái)吸引消費(fèi)者對(duì)促銷(xiāo)圖片的點(diǎn)擊，同

時(shí)也可以添加“掌柜熱推”等說(shuō)明文案，告知消費(fèi)者這件單品為

重點(diǎn)推薦商品，以此來(lái)營(yíng)造更為濃厚的單品促銷(xiāo)氛圍。

二、發(fā)展中期——為品牌而促銷(xiāo)

在店鋪發(fā)展的中期階段，品牌的樹(shù)立起到了穩(wěn)固店鋪發(fā)展

的作用。在這一基礎(chǔ)上，促銷(xiāo)活動(dòng)應(yīng)更具品牌宣傳的效應(yīng)，相

應(yīng)地促銷(xiāo)廣告也可以為品牌服務(wù)。

在為打造品牌店鋪設(shè)計(jì)促銷(xiāo)廣告圖片時(shí)，圖片展示標(biāo)準(zhǔn)的

建立能夠很好地展示店鋪中不同的商品，而且統(tǒng)一的表現(xiàn)形式

也能讓消費(fèi)者形成對(duì)品牌的聯(lián)想。展示標(biāo)準(zhǔn)包括商品攝影、構(gòu)

圖與字體使用等。

三、發(fā)展成熟期——為客戶(hù)而促銷(xiāo)

當(dāng)?shù)赇伆l(fā)展到成熟階段以后，維系客戶(hù)已經(jīng)成為這個(gè)階段

的首要任務(wù)，此時(shí)賣(mài)家可以增加更傾向于為老客戶(hù)而展開(kāi)的促

銷(xiāo)活動(dòng)。老客戶(hù)對(duì)品牌已經(jīng)有了一定的認(rèn)知與信任度，抓住他

們其實(shí)也相當(dāng)于在樹(shù)立口碑，能讓營(yíng)銷(xiāo)活動(dòng)變得更為輕松。

在設(shè)計(jì)促銷(xiāo)活動(dòng)頁(yè)時(shí)，可以專(zhuān)門(mén)設(shè)計(jì)一個(gè)促銷(xiāo)頁(yè)面，說(shuō)明

會(huì)員享有的一系列優(yōu)惠政策，增強(qiáng)會(huì)員的歸屬感，幫助賣(mài)家維

系老客戶(hù)，增強(qiáng)消費(fèi)者的凝聚力。需要注意的是，促銷(xiāo)頁(yè)面的

設(shè)計(jì)需要顧及消費(fèi)者的感官體驗(yàn)，否則也是無(wú)法獲取消費(fèi)者好

感的。

通過(guò)本章的學(xué)習(xí)，我們掌握了如何營(yíng)造促銷(xiāo)廣告的氛圍，

促銷(xiāo)廣告的三大

設(shè)計(jì)總則，以及不同發(fā)展階段的促銷(xiāo)廣告設(shè)計(jì)方法。

促銷(xiāo)活動(dòng)幾乎是網(wǎng)店運(yùn)營(yíng)中最常見(jiàn)、最重要的內(nèi)容，可以

說(shuō)一個(gè)成功的店

鋪是離不開(kāi)各種各樣的促銷(xiāo)活動(dòng)的。能讓促銷(xiāo)活動(dòng)得到直

接體現(xiàn)的手段就是視

覺(jué)，促銷(xiāo)活動(dòng)的內(nèi)容也只有通過(guò)視覺(jué)的表現(xiàn)才能更好地傳

遞給消費(fèi)者。歸納與

提高

第8章移動(dòng)端網(wǎng)店用戶(hù)體驗(yàn)設(shè)計(jì)

教學(xué)內(nèi)容

一、移動(dòng)端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn)

二、移動(dòng)端網(wǎng)店視覺(jué)設(shè)計(jì)

【知識(shí)目標(biāo)】

教學(xué)要求

1.了解移動(dòng)端網(wǎng)店的店標(biāo)設(shè)計(jì)方法。

22

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

2.掌握移動(dòng)端網(wǎng)店的圖片尺寸標(biāo)準(zhǔn)和框架結(jié)構(gòu)安排。

3.掌握移動(dòng)端網(wǎng)店進(jìn)行視覺(jué)設(shè)計(jì)的方法與技巧。

【技能目標(biāo)】

1.學(xué)會(huì)設(shè)計(jì)移動(dòng)端網(wǎng)店店標(biāo)和圖片。

2.學(xué)會(huì)手機(jī)移動(dòng)端店鋪裝修的視覺(jué)設(shè)計(jì)。

1.移動(dòng)端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn)

教學(xué)重點(diǎn)

2.移動(dòng)端網(wǎng)店視覺(jué)設(shè)計(jì)

1.移動(dòng)端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn)

教學(xué)難點(diǎn)

2.移動(dòng)端網(wǎng)店視覺(jué)設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)3課時(shí)

教學(xué)內(nèi)容

第一節(jié)移動(dòng)端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn)

一、移動(dòng)端網(wǎng)店店標(biāo)設(shè)計(jì)

手機(jī)淘寶的店標(biāo)適合采用圖形或字母組合的形式，一方面

是因?yàn)榉?hào)化的店標(biāo)更容易加深消費(fèi)者對(duì)店鋪的印象，另一方

面是店鋪頭上已經(jīng)明確地標(biāo)注了店鋪名稱(chēng)，圖文結(jié)合和中英文

混合形式的店標(biāo)不僅讓店標(biāo)的構(gòu)圖變得擁擠，還會(huì)讓人產(chǎn)生畫(huà)

蛇添足的感覺(jué)。

利用朋友圈進(jìn)行小范圍營(yíng)銷(xiāo)的店鋪或銷(xiāo)售母嬰用品等特定

商品的店鋪，也可以使用頭像作為店標(biāo)，這樣有助于拉近店鋪

與特定類(lèi)型消費(fèi)者的心理距離，但是不要使用公眾人物的頭像。

移動(dòng)端網(wǎng)店還可以使用商品的實(shí)物照片作為店標(biāo)，讓人一眼就

能明白店鋪銷(xiāo)售的主營(yíng)商品。

二、移動(dòng)端網(wǎng)店圖片尺寸標(biāo)準(zhǔn)

為了規(guī)范設(shè)計(jì)，手機(jī)淘寶對(duì)圖片的發(fā)布尺寸做出了要求：

需在圖片上添加文字時(shí)，中文字號(hào)N30磅，英文和阿拉伯?dāng)?shù)字

字號(hào)N20磅；圖片高度3960像素（建議高度不超過(guò)600像素），

圖片格式支持JPG、GIF、PNG；首頁(yè)和詳情頁(yè)圖片寬度為

480像素?620像素（建議不超過(guò)608像素）；每個(gè)詳情頁(yè)可以

增加一個(gè)音頻，時(shí)長(zhǎng)不超過(guò)30秒，大小不超過(guò)200KB,格式

為MP3。每個(gè)圖片、音頻的大小不得超過(guò)1.5MB。

23

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

三、移動(dòng)端網(wǎng)店框架結(jié)構(gòu)安排

移動(dòng)端網(wǎng)店和PC端網(wǎng)店一樣，也存在著頁(yè)面間的跳轉(zhuǎn)以

及頁(yè)面結(jié)構(gòu)層級(jí)關(guān)系的安排與布置。這里所說(shuō)的頁(yè)面不再是指

店鋪的各級(jí)網(wǎng)頁(yè)頁(yè)面，而是指存在于淘寶App客戶(hù)端中的店

鋪各級(jí)界面。

賣(mài)家雖然可以不考慮圖標(biāo)、按鈕等用戶(hù)界面（UI）設(shè)計(jì),

也不必過(guò)多地考慮店鋪的結(jié)構(gòu)組成，但需要注意在已有的框架

結(jié)構(gòu)中添加能夠促進(jìn)消費(fèi)者購(gòu)買(mǎi)的內(nèi)容。此外，根據(jù)框架結(jié)構(gòu)

層面給所添加的內(nèi)容設(shè)置相應(yīng)的商品或活動(dòng)鏈接也尤為重要，

否則混亂的鏈接會(huì)導(dǎo)致店鋪框架結(jié)構(gòu)變得很混亂，不被消費(fèi)者

所理解，阻礙消費(fèi)者的購(gòu)買(mǎi)進(jìn)程。

第二節(jié)移動(dòng)端網(wǎng)店視覺(jué)設(shè)計(jì)

一、信息內(nèi)容簡(jiǎn)潔，便于快速傳播

手機(jī)移動(dòng)端受手機(jī)載體的限制，其顯示尺寸有限，店鋪信

息的呈現(xiàn)也會(huì)受限，如果信息量過(guò)多且不做取舍，只會(huì)導(dǎo)致信

息無(wú)法清晰、明確地加載與顯示，消費(fèi)者也很難讀懂精華信息,

不能快速找到自己想要看到的界面，就很有可能會(huì)選擇離開(kāi)。

因此，對(duì)信息進(jìn)行必要的精簡(jiǎn)化處理是讓消費(fèi)者快速瀏覽與接

收信息的關(guān)鍵。

此外，控制文字信息的篇幅及文字尺寸的大小也是讓信息

在手機(jī)移動(dòng)端清晰展示的方法之一。

二、簡(jiǎn)單方便的操作與交互

無(wú)須進(jìn)行縮放操作，只需伸出手指執(zhí)行單一操作便可以進(jìn)

行信息的瀏覽，簡(jiǎn)單且易于操作的方式更容易被消費(fèi)者所接受。

因此，在進(jìn)行手機(jī)移動(dòng)端的店鋪視覺(jué)設(shè)計(jì)時(shí)，要簡(jiǎn)化一切不必

要的設(shè)計(jì)，讓消費(fèi)者不必因?yàn)槎嘤嗟牟僮鞫浟速?gòu)買(mǎi)的初衷,

這也是促進(jìn)手機(jī)移動(dòng)端店鋪銷(xiāo)量增加的有效手段之一。

三、整體設(shè)計(jì)風(fēng)格首尾呼應(yīng)

店鋪整體的裝修與設(shè)計(jì)風(fēng)格需要做到首尾呼應(yīng)，否則就不

利于店鋪完整設(shè)計(jì)風(fēng)格的塑造。不同于PC端店鋪，手機(jī)移動(dòng)

端店鋪屬于狹窄視覺(jué)展示，如果不依據(jù)店鋪品牌基調(diào)保持設(shè)計(jì)

風(fēng)格的一致性，店鋪形象的不鮮明感就會(huì)帶來(lái)視覺(jué)的混亂體驗(yàn),

也無(wú)法讓消費(fèi)者對(duì)店鋪形成視覺(jué)記憶。

四、保持色彩與文字的鮮明感

在進(jìn)行手機(jī)移動(dòng)端店鋪的視覺(jué)設(shè)計(jì)時(shí)，最好采用較為鮮亮

的色彩，因?yàn)檫@樣既能給消費(fèi)者帶來(lái)較好的瀏覽體驗(yàn)，同時(shí)也

能與淘寶平臺(tái)所提供的背景相融合，讓店鋪的整體設(shè)計(jì)風(fēng)格更

加統(tǒng)一與完整。

對(duì)于利用碎片化時(shí)間來(lái)進(jìn)行商品購(gòu)買(mǎi)的手機(jī)移動(dòng)端消費(fèi)者

而言，他們希望從中獲取輕松與自在感，而深色系容易帶來(lái)一

種沉重感；相反，較為鮮明與惹眼的色彩則能讓消費(fèi)者獲得輕

閱讀的感受與體驗(yàn)。

五、保持常換常新

手機(jī)移動(dòng)端的視覺(jué)設(shè)計(jì)保持常換常新的狀態(tài)，不僅能夠滿(mǎn)

足這部分消費(fèi)群體對(duì)新奇事物的追求，也不會(huì)讓店鋪看起來(lái)像

是一個(gè)無(wú)人看管的空店。當(dāng)然，這一切也是需要建立在店鋪品

牌設(shè)計(jì)風(fēng)格不變的基礎(chǔ)之上的。

24

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

歸納與

提高

通過(guò)本章的學(xué)習(xí)，我們掌握了移動(dòng)端網(wǎng)店的店標(biāo)設(shè)計(jì)方法,

了解了移動(dòng)端

網(wǎng)店的圖片尺寸標(biāo)準(zhǔn)和框架結(jié)構(gòu)安排，還掌握了移動(dòng)端網(wǎng)

店進(jìn)行視覺(jué)設(shè)計(jì)的方

法與技巧。

移動(dòng)端網(wǎng)店可以看作PC端的延續(xù)，在設(shè)計(jì)時(shí)更需要把握

“用戶(hù)體驗(yàn)”這

一關(guān)鍵點(diǎn)。手機(jī)移動(dòng)端網(wǎng)店是依附于智能手機(jī)這一平臺(tái)的,

而智能手機(jī)又讓人

與機(jī)器之間有了更加親密的接觸與互動(dòng)，因此與手機(jī)移動(dòng)

端中其他應(yīng)用軟件或

App一樣，在設(shè)計(jì)手機(jī)移動(dòng)端店鋪?lái)?yè)面時(shí)要結(jié)合智能手機(jī)

平臺(tái)的特色設(shè)計(jì)出更

加注重交互體驗(yàn)與友好度的頁(yè)面，只有這樣才能博得消費(fèi)

者的歡心。

25

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第9章手機(jī)移動(dòng)端淘寶店鋪視覺(jué)設(shè)計(jì)

一、手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì)

二、電子數(shù)碼類(lèi)商品店鋪首頁(yè)案例解析

三、手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì)

四、家紡視覺(jué)設(shè)計(jì)案例實(shí)操

【知識(shí)目標(biāo)】

1.掌握店招的優(yōu)化設(shè)計(jì)方法。

2.掌握輪播圖片的優(yōu)化設(shè)計(jì)方法。

3.掌握優(yōu)惠券的優(yōu)化設(shè)計(jì)方法。

教學(xué)內(nèi)容

教學(xué)要求4.掌握商品分類(lèi)導(dǎo)航及商品分類(lèi)展示的優(yōu)化方

法。

5.了解店鋪詳情頁(yè)設(shè)計(jì)的FABE原則。

6.熟練掌握手機(jī)淘寶店鋪詳情頁(yè)的設(shè)計(jì)方法。

【技能目標(biāo)】

能夠熟練地對(duì)手機(jī)移動(dòng)端淘寶店鋪首頁(yè)和詳情頁(yè)優(yōu)化

設(shè)計(jì)。

1.手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì)

教學(xué)重點(diǎn)

2.手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì)

1.手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì)

教學(xué)難點(diǎn)

2.手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

第一節(jié)手機(jī)移動(dòng)端淘寶店鋪首頁(yè)優(yōu)化設(shè)計(jì)

一、輪播圖片優(yōu)化設(shè)計(jì)

通常情況下，輪播圖片會(huì)包含店鋪上新活動(dòng)通知、促銷(xiāo)活

動(dòng)展示等內(nèi)容。輪播圖內(nèi)

26

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

容要盡量簡(jiǎn)潔，文字表現(xiàn)清晰，主次分明且能達(dá)到快速傳

播的目的，這是輪播圖片設(shè)計(jì)的要點(diǎn)。

此外，賣(mài)家在設(shè)計(jì)時(shí)也要注意控制好輪播圖片的數(shù)量，以

及展示的先后順序。在設(shè)計(jì)時(shí)賣(mài)家可以根據(jù)店鋪活動(dòng)的重要程

度或先后順序?qū)啿D片的位置進(jìn)行相應(yīng)的調(diào)整。二、優(yōu)惠券

的優(yōu)化設(shè)計(jì)

在進(jìn)行視覺(jué)設(shè)計(jì)時(shí)，一般都將優(yōu)惠券放在店招或輪播圖片

的下方，并留出足夠的空間，使用較為鮮明的色彩，讓消費(fèi)者

能夠注意到優(yōu)惠券，只有這樣才能真正發(fā)揮其引流與促進(jìn)轉(zhuǎn)化

的作用。

過(guò)于花哨的設(shè)計(jì)有時(shí)反而會(huì)讓優(yōu)惠券淹沒(méi)在各種視覺(jué)元素

的沖擊之中。店鋪中的某些優(yōu)惠活動(dòng)也可以被設(shè)計(jì)成優(yōu)惠券的

形式。有的優(yōu)惠活動(dòng)還設(shè)計(jì)了優(yōu)惠券按鈕，讓消費(fèi)者更有互動(dòng)

參與感。

在優(yōu)惠券上添加“立即領(lǐng)取”之類(lèi)的視覺(jué)元素，可以在一定

程度上左右消費(fèi)者的點(diǎn)擊行為，相對(duì)于沒(méi)有明顯按鈕引導(dǎo)的優(yōu)

惠券板塊而言，有按鈕引導(dǎo)更富操作的提示感。三、商品分類(lèi)

導(dǎo)航優(yōu)化設(shè)計(jì)

通常情況下，在手機(jī)移動(dòng)端店鋪首頁(yè)中，展示完輪播圖片

或是優(yōu)惠券板塊后便會(huì)出現(xiàn)分類(lèi)導(dǎo)航板塊。在設(shè)計(jì)這個(gè)板塊時(shí),

要注意控制好顯示尺寸與比例，使其能夠清晰與完整地展示在

消費(fèi)者面前，起到快速導(dǎo)航的作用。

四、商品分類(lèi)展示優(yōu)化設(shè)計(jì)

與PC端有足夠的空間去裝飾與美化商品分類(lèi)展示板塊不

同，在手機(jī)移動(dòng)端為了迎合目標(biāo)群體求快、求便的心理，應(yīng)當(dāng)

盡量簡(jiǎn)潔，并在第一時(shí)間展示商品圖片。

通常情況下，手機(jī)移動(dòng)端店鋪首頁(yè)商品分類(lèi)展示會(huì)以爆款

或促銷(xiāo)的商品圖片形式呈獻(xiàn)，將全店最受歡迎或最優(yōu)惠的商品

放在第一區(qū)，以促進(jìn)手機(jī)移動(dòng)端店鋪購(gòu)買(mǎi)力的轉(zhuǎn)化。手機(jī)移動(dòng)

端消費(fèi)者較為關(guān)注店鋪新品與應(yīng)季產(chǎn)品的發(fā)布，因此在商品分

類(lèi)展示的第二區(qū)中可以對(duì)新品與應(yīng)季產(chǎn)品進(jìn)行展示。在在第三

區(qū)、第四區(qū)等區(qū)域中可以根據(jù)店鋪需求放置不同的商品。

商品分類(lèi)展示區(qū)的分區(qū)不宜過(guò)多，商品分類(lèi)展示的每一區(qū)

中的商品圖片也不宜過(guò)多，因?yàn)槭謾C(jī)顯示屏幕較窄，圖片橫向

組合時(shí)要想讓消費(fèi)者看清商品圖片，那么每一行放2張圖片最

為合適。簡(jiǎn)潔、整齊的圖片排列組合能讓手機(jī)移動(dòng)端的消費(fèi)者

獲得更好的瀏覽與購(gòu)物體驗(yàn)。

第二節(jié)電子數(shù)碼類(lèi)商品店鋪首頁(yè)案例解析

在對(duì)手機(jī)移動(dòng)端店鋪進(jìn)行視覺(jué)設(shè)計(jì)時(shí)，賣(mài)家應(yīng)注意保持色

彩與文字的鮮明感，因?yàn)橄M(fèi)者在碎片化的時(shí)間里利用手機(jī)進(jìn)

行購(gòu)物，更多的是希望獲得放松感，而店鋪過(guò)于沉悶的色彩搭

配則無(wú)法達(dá)到這一目的。

這并不意味著手機(jī)移動(dòng)端店鋪的視覺(jué)設(shè)計(jì)只能是明亮的色

調(diào)，其實(shí)也可以使用一些較為暗沉的色彩。例如，對(duì)于一些經(jīng)

營(yíng)手機(jī)配件類(lèi)商品的店鋪而言，其所銷(xiāo)售的商品具有較為濃郁

的科技感與炫酷感，而這也很可能成為店鋪品牌的定位方向。

為了迎合這一特性，店鋪可以采用象征深沉與神秘的黑色作為

店鋪首頁(yè)的主要色彩，從而突出商品與品牌具備的科技特性。

第三節(jié)手機(jī)淘寶店鋪詳情頁(yè)優(yōu)化設(shè)計(jì)

27

《電子商務(wù)視覺(jué)設(shè)計(jì)(第2版)》教案

一、詳情頁(yè)設(shè)計(jì)的FABE原則

FABE是一種通過(guò)四個(gè)關(guān)鍵環(huán)節(jié)來(lái)解答消費(fèi)者訴求，且巧

妙地處理好消費(fèi)者關(guān)心的問(wèn)題，從而順利實(shí)現(xiàn)商品銷(xiāo)售訴求的

銷(xiāo)售模式，具體表現(xiàn)為四個(gè)方面。

F——特征(Features)：介紹商品的特質(zhì)、特性等基本功

能，以及它是如何滿(mǎn)足消費(fèi)者需要的。

A----優(yōu)點(diǎn)(Advantages)：就是商品的賣(mài)點(diǎn)與優(yōu)勢(shì)，向

消費(fèi)者證明商品的賣(mài)點(diǎn)，其實(shí)就是給消費(fèi)者提供了更多購(gòu)買(mǎi)該

商品的理由。

B——利益(Benefits)：以消費(fèi)者利益為中心，告知并強(qiáng)

調(diào)消費(fèi)者購(gòu)買(mǎi)商品后會(huì)得到的利益，能夠激發(fā)消賽者的購(gòu)買(mǎi)欲

望。

E----證據(jù)(Evidence)：指第三方認(rèn)知、新聞?shì)浾摶蚣?/p>

術(shù)報(bào)告等信息，它們需要有足夠的權(quán)威性、客觀性、可靠性與

可見(jiàn)證性，這樣才能獲得消費(fèi)者的信任。

在FABE原則的指引下，還需要做到以下六點(diǎn)具體內(nèi)容,

讓商品描述變得更加符合網(wǎng)絡(luò)的銷(xiāo)售環(huán)境，從而增加消費(fèi)者的

購(gòu)買(mǎi)動(dòng)力。

1.真實(shí)感

2.邏輯感

3.親切感

4.對(duì)話感

5.氛圍感

6.正規(guī)感

二、商品詳情頁(yè)的設(shè)計(jì)誤區(qū)

在設(shè)計(jì)商品詳情頁(yè)時(shí)，要注意避免以下幾個(gè)誤區(qū)，把握好

描述設(shè)計(jì)的尺度是促成消費(fèi)者購(gòu)買(mǎi)的重要前提。

1.切忌密不透風(fēng)的文字說(shuō)明

2.海報(bào)宣傳需凸顯商品的真實(shí)性

3.注意控制商品與關(guān)聯(lián)銷(xiāo)售商品圖片的數(shù)量

三、根據(jù)消費(fèi)者的頁(yè)面平均停留時(shí)間設(shè)計(jì)

手機(jī)瀏覽的連貫性不如PC端，并且消費(fèi)者在頁(yè)面中的平

均停留時(shí)間很短，所以在設(shè)計(jì)手機(jī)移動(dòng)端的詳情頁(yè)面時(shí)，必須

做到簡(jiǎn)單、直截了當(dāng)。

在PC端商品詳情頁(yè)的開(kāi)端可能會(huì)出現(xiàn)“新品推薦”“搭配

套餐''等信息，這些在手機(jī)移動(dòng)端顯得不那么實(shí)用。手機(jī)移動(dòng)

端必須在前三屏中對(duì)商品的賣(mài)點(diǎn)和重要信息進(jìn)行清晰的描述，

因?yàn)檫^(guò)于煩瑣的其他關(guān)聯(lián)信息可能需要占用好幾屏的空間，每

占用一屏的空間便會(huì)使消費(fèi)者多一次滑動(dòng)操作，并且還有可能

看不到與商品相關(guān)的信息，讓其失去對(duì)商品的購(gòu)買(mǎi)興趣，造成

流量跳失。

第四節(jié)家紡視覺(jué)設(shè)計(jì)案例實(shí)操

本案例結(jié)合前面所講的內(nèi)容為一款空調(diào)被設(shè)計(jì)商品詳情頁(yè),

設(shè)計(jì)內(nèi)容包括商品首圖、商品介紹等，要求設(shè)計(jì)的頁(yè)面要能清

晰、準(zhǔn)確地展示與說(shuō)明空調(diào)被的特點(diǎn)。具體操作過(guò)程略。

歸納與

提高

通過(guò)本章的學(xué)習(xí)，我們掌握了店招、輪播圖片、優(yōu)惠券的

優(yōu)化設(shè)計(jì)方法，

商品分類(lèi)導(dǎo)航及商品分類(lèi)展示的優(yōu)化方法，了解了店鋪詳

情頁(yè)設(shè)計(jì)的FABE

原則，還掌握了手機(jī)淘寶店鋪詳情頁(yè)的設(shè)計(jì)方法等。

28

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

越來(lái)越多的消費(fèi)者選擇通過(guò)手機(jī)移動(dòng)端淘寶店鋪進(jìn)行購(gòu)物,

是因?yàn)槭謾C(jī)移

動(dòng)端店鋪所具備的特點(diǎn)給予了他們很好的用戶(hù)體驗(yàn)，但是

這些特點(diǎn)并不足以讓

消費(fèi)者決定購(gòu)買(mǎi)，所以還需要對(duì)店鋪進(jìn)行個(gè)性化且更為具

體的設(shè)計(jì)，對(duì)店鋪的

各個(gè)細(xì)節(jié)進(jìn)行優(yōu)化，營(yíng)造出良好的銷(xiāo)售氛圍，讓消費(fèi)者最

終被店鋪所吸引并產(chǎn)

生購(gòu)買(mǎi)行為。

第10章手機(jī)移動(dòng)端微店視覺(jué)設(shè)計(jì)

一、微店首頁(yè)優(yōu)化設(shè)計(jì)

二、商品詳情頁(yè)優(yōu)化設(shè)計(jì)

三、母嬰微店視覺(jué)設(shè)計(jì)案例構(gòu)思

四、母嬰微店視覺(jué)設(shè)計(jì)案例實(shí)操

【知識(shí)目標(biāo)】

1.掌握微店首頁(yè)的優(yōu)化設(shè)計(jì)方法。

2.掌握商品詳情頁(yè)的優(yōu)化設(shè)計(jì)方法。

教學(xué)內(nèi)容

教學(xué)要求

3.根據(jù)母嬰微店視覺(jué)設(shè)計(jì)案例進(jìn)行實(shí)戰(zhàn)練習(xí)。

【技能目標(biāo)】

能夠熟練地進(jìn)行手機(jī)移動(dòng)端微店視覺(jué)設(shè)計(jì)。

1.微店首頁(yè)的優(yōu)化設(shè)計(jì)

教學(xué)重點(diǎn)

2.商品詳情頁(yè)優(yōu)化設(shè)計(jì)

1.微店首頁(yè)的優(yōu)化設(shè)計(jì)

教學(xué)難點(diǎn)

2.商品詳情頁(yè)優(yōu)化設(shè)計(jì)

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

29

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

第一節(jié)微店首頁(yè)優(yōu)化設(shè)計(jì)

一、首頁(yè)的框架設(shè)計(jì)

微店首頁(yè)主要由店鋪招牌、微店公告、焦點(diǎn)大圖、商品分

類(lèi)與商品展示五部分構(gòu)成。

1.店鋪招牌

首先，店主需要考慮的是店鋪招牌要給消費(fèi)者傳達(dá)什么樣

的信息；其次，店主需要對(duì)店鋪風(fēng)格進(jìn)行定位，并使店鋪招牌

與其保持一致；再次，設(shè)計(jì)要簡(jiǎn)潔明了，字?jǐn)?shù)不要過(guò)多；最后,

店鋪招牌要突出主體，千萬(wàn)不可喧賓奪主。

2.微店公告

微店公告常以文字來(lái)說(shuō)明店鋪優(yōu)勢(shì)、商品賣(mài)點(diǎn)、促銷(xiāo)信息

及服務(wù)內(nèi)容等。只要是能增加消費(fèi)者對(duì)店鋪的信任度且便于消

費(fèi)者瀏覽的相關(guān)信息，店主就可以將其展示在微店公告中。不

過(guò)文字必須要簡(jiǎn)潔、清晰，要讓消費(fèi)者一看就懂，且不會(huì)消磨

其耐心。

3.焦點(diǎn)大圖

無(wú)圖不成焦點(diǎn)，焦點(diǎn)必須有圖片?？梢哉f(shuō)，焦點(diǎn)大圖也是

圖片內(nèi)容的一種展現(xiàn)形式。具體來(lái)說(shuō)，焦點(diǎn)大圖設(shè)計(jì)就是由一

張圖片或多張圖片自動(dòng)輪流播放展示在首頁(yè)上。因?yàn)檩啿D片

是動(dòng)態(tài)的，所以具有一定的視覺(jué)吸引力，容易引起消費(fèi)者的注

,?O

4.商品分類(lèi)

在微店首頁(yè)中，店主可以根據(jù)商品的特點(diǎn)將商品劃分為幾

大類(lèi)，并根據(jù)類(lèi)別對(duì)商品進(jìn)行排列。

一般來(lái)說(shuō)，如果消費(fèi)者有需求，進(jìn)入微店后他們首先會(huì)點(diǎn)

開(kāi)首頁(yè)中的“商品分類(lèi)”模塊，然后根據(jù)商品類(lèi)型選擇符合自己

需求的區(qū)域，從中尋找所需的商品。商品分類(lèi)的布局很重要，

店主要按照消費(fèi)者的瀏覽和購(gòu)買(mǎi)習(xí)慣對(duì)商品進(jìn)行分類(lèi)，以便消

費(fèi)者能夠快速找到所需的商品，提高其購(gòu)物體驗(yàn)度。

5.商品展不

商品展示一般可以分為“熱賣(mài)商品”“店長(zhǎng)推薦”和“全部商

品”三個(gè)模塊。

(1)熱賣(mài)商品

(2)店長(zhǎng)推薦

(3)全部商品

二、清晰而準(zhǔn)確的設(shè)計(jì)思路

消費(fèi)者在看手機(jī)的時(shí)候會(huì)比較放松，如果微店頁(yè)面在短時(shí)

間內(nèi)不能將其吸引住，那么他們會(huì)無(wú)情地離開(kāi)，因此擁有一個(gè)

清晰而準(zhǔn)確的設(shè)計(jì)思路是非常重要的。微店首頁(yè)的核心是模塊

化，官方對(duì)頁(yè)面板塊的數(shù)量也是有限制的，因此賣(mài)家要利用有

限的板塊創(chuàng)造更多的價(jià)值。

一般微店首頁(yè)是由店招、海報(bào)、分類(lèi)入口、優(yōu)惠券和單品

展示等部分組成的。三、遵守設(shè)計(jì)學(xué)的“七秒定律”

在設(shè)計(jì)學(xué)中有一條“七秒定律”，據(jù)專(zhuān)業(yè)機(jī)構(gòu)研究發(fā)現(xiàn)，人

關(guān)注一個(gè)商品的時(shí)間通常為七秒，而這七秒內(nèi)影響70%的人

購(gòu)買(mǎi)的第一要素是色彩。

首先，同一板塊內(nèi)不要超過(guò)3種顏色，這3種顏色可以看

作是主色、輔助色與點(diǎn)綴色。另外，賣(mài)家在設(shè)計(jì)首頁(yè)時(shí)可以多

使用萬(wàn)能搭配色，如黑、白、灰等顏色。因?yàn)檫@些顏色比較百

搭，跟任何顏色搭配起來(lái)都會(huì)比較和諧，容易表現(xiàn)出高端的感

覺(jué)。背景色盡量以淺色調(diào)為主，因?yàn)樵谝苿?dòng)端上觀看，淺色的

背景色更能突出商品本身，使消費(fèi)者的注意力集中

30

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

在商品上。

四、注重細(xì)節(jié)設(shè)計(jì)

賣(mài)家在設(shè)計(jì)微店首頁(yè)時(shí)，還要注重細(xì)節(jié)上的設(shè)計(jì)，比如在

首頁(yè)上可以選取半身圖或局部特寫(xiě)圖。因?yàn)槲⒌晔醉?yè)大多是以

“豆腐塊”的形式展現(xiàn)的，范圍確實(shí)有限，所以賣(mài)家在選擇圖片

時(shí)要盡量使用半身圖或局部特寫(xiě)圖，以避免視覺(jué)上的不清晰。

如果全部都使用半身圖或特寫(xiě)圖，那么微店頁(yè)面會(huì)顯得單調(diào)、

乏味，所以可以適當(dāng)穿插一些全景圖，有意識(shí)地調(diào)整頁(yè)面的節(jié)

奏，使整個(gè)頁(yè)面更加和諧、活潑。

此外，在頁(yè)面面積較小的情況下，圖文搭配的巧妙排列能

讓頁(yè)面看起來(lái)更大，還能避免因?yàn)椤皝y''和"雜”而產(chǎn)生的廉價(jià)感。

第二節(jié)商品詳情頁(yè)優(yōu)化設(shè)計(jì)

一、商品主圖的設(shè)計(jì)

在商品詳情頁(yè)中，商品主圖的設(shè)計(jì)尤為重要。因?yàn)橄M(fèi)者

在瀏覽商品時(shí)最先看到的圖片就是商品主圖，其基本尺寸要求

是640像素x640像素。在設(shè)計(jì)商品主圖時(shí)，圖片要清晰，主

題與背景要主次分明，圖片中的文字大小要適中、簡(jiǎn)潔明了、

突出賣(mài)點(diǎn)，這樣商品主圖才會(huì)更加美觀、更能吸引消費(fèi)者。

二、商品描述圖的設(shè)計(jì)

商品描述圖包括商品圖片和商品描述。在商品描述圖中，

適當(dāng)?shù)奈淖置枋瞿軌蚱鸬轿M(fèi)者、提高商品成交率的作用。

商品描述圖應(yīng)與商品主圖、商品標(biāo)題相契合，能夠真實(shí)地介紹

商品的屬性。

在進(jìn)行商品描述時(shí)，文字內(nèi)容要盡量簡(jiǎn)短，突出商品的優(yōu)

點(diǎn)、特點(diǎn)和賣(mài)點(diǎn)。商品描述頁(yè)面在重新排列、展示商品細(xì)節(jié)的

過(guò)程中只能利用文字和圖片這種靜態(tài)信息類(lèi)的溝通方式。這就

要求店主在整個(gè)商品詳情頁(yè)面的布局中要注意一個(gè)關(guān)鍵點(diǎn)，那

就是闡述邏輯。

店主在設(shè)計(jì)圖文詳情時(shí)，要多圖少文。圖要美觀，文字描

述要與圖片相契合。文字最好是中文，字體不可過(guò)大，也不可

過(guò)小，可根據(jù)目標(biāo)客戶(hù)來(lái)定。字體顏色盡量不要太亮，以免使

人產(chǎn)生一種視覺(jué)上的不舒適感。

第三節(jié)母嬰微店視覺(jué)設(shè)計(jì)案例構(gòu)思

一、首頁(yè)設(shè)計(jì)布局規(guī)劃

①微店店招：在店招模塊中使用母嬰圖片進(jìn)行展示，通過(guò)

漸隱效果來(lái)讓文字更加突出，讓店鋪主題更加明確。

②首頁(yè)導(dǎo)航：該區(qū)域?qū)Ш皆O(shè)置清晰，設(shè)計(jì)簡(jiǎn)潔明快。

③促銷(xiāo)廣告：該區(qū)域通過(guò)使用商品圖片與文字結(jié)合的方式

進(jìn)行展示，能夠完整地表現(xiàn)出商品的特點(diǎn)和形象。

④特價(jià)專(zhuān)區(qū)：使用商品圖片搭配色調(diào)和外形和諧的標(biāo)題文

字，并加入相應(yīng)的鏈接按鈕，讓消費(fèi)者能夠隨時(shí)進(jìn)入其頁(yè)面了

解詳情。

二、主色調(diào)：高純度暖色調(diào)

1.頁(yè)面背景及設(shè)計(jì)元素配色：高純度色彩

31

《電子商務(wù)視覺(jué)設(shè)計(jì)（第2版）》教案

2.商品及輔助配色：類(lèi)似色調(diào)

三、案例配色擴(kuò)展

1.擴(kuò)展配色：互補(bǔ)色系

2.擴(kuò)展配色：同類(lèi)色系

四、案例設(shè)計(jì)流程

①制作微店店招和導(dǎo)航

②制作微店促銷(xiāo)廣告

③制作微店特價(jià)專(zhuān)區(qū)

第四節(jié)母嬰微店視覺(jué)設(shè)計(jì)案例實(shí)操

母嬰微店視覺(jué)設(shè)計(jì)主要分為制作微店店招、首頁(yè)導(dǎo)航、促

銷(xiāo)廣告、特價(jià)專(zhuān)區(qū)四部分。一、制作微店店招

二、制作首頁(yè)導(dǎo)航

三、制作促銷(xiāo)廣告

四、制作特價(jià)專(zhuān)區(qū)

通過(guò)本章的學(xué)習(xí)，我們掌握了微店首頁(yè)、商品詳情頁(yè)的優(yōu)

化設(shè)計(jì)方法，并

根據(jù)母嬰微店視覺(jué)設(shè)計(jì)案例進(jìn)行了實(shí)戰(zhàn)練習(xí)。

無(wú)論是淘寶還是微店，店鋪視覺(jué)設(shè)計(jì)是否能夠吸引消費(fèi)者

的眼球、是否能

夠突出自己商品的特色都是至關(guān)重要的。在微店中，頁(yè)面

位置有限，要想讓