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

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

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

教學(xué)內(nèi)容二、電商視覺(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ì)

視覺(jué)識(shí)別設(shè)計(jì)來(lái)源于企業(yè)形象識(shí)別系統(tǒng)。企業(yè)形象識(shí)別系統(tǒng)一般分為三個(gè)方面，即企

業(yè)的理念識(shí)別（MI）、行為識(shí)別（BD和視覺(jué)識(shí)別（VI）。

企業(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)的重要組成部分。

二'視覺(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)銷型網(wǎng)店的視覺(jué)定位原則在于營(yíng)造促銷氛圍，主要體現(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ì)稱切割構(gòu)圖法

對(duì)稱切割構(gòu)圖法的前提一般是將內(nèi)容分為對(duì)立的兩部分，(將整個(gè)頁(yè)面一分為二)，劃

分明確。這種設(shè)計(jì)具有視覺(jué)沖擊力，可以使畫面具有平衡不失重的效果。

二'組合切割構(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)圖法專題內(nèi)容不多，適用于促銷、節(jié)日、活動(dòng)等頁(yè)面。整體場(chǎng)景構(gòu)圖法可

以將目標(biāo)客戶快速帶入頁(yè)面氛圍中，使商品信息更加精準(zhǔn)、流暢。

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

多重切割構(gòu)圖法的構(gòu)圖不規(guī)則，穩(wěn)定而銳利，可以讓單一的頁(yè)面變得生動(dòng)、復(fù)雜的頁(yè)

面變得時(shí)尚，避免畫面出現(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è)性十足，并充滿趣味性。

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

放射構(gòu)圖法能展示出由一個(gè)中心點(diǎn)向四周擴(kuò)散的效果，起到導(dǎo)向的作用，讓整體頁(yè)面

呈現(xiàn)出立體與空間感，畫面沖擊力強(qiáng)，富有動(dòng)感。

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

物體輪廓構(gòu)圖法主要適用于活動(dòng)、節(jié)日或新品創(chuàng)意等專題。我們可以根據(jù)專題的主要

內(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ù)以億計(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)用得非常廣泛，效果也很明顯。

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

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

教學(xué)內(nèi)容二、網(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è)面的配色方案

一、色搭原則七要素

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)樯识斐烧`會(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

(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ì)色彩

提高

畫面的敏感度強(qiáng)于文字，同時(shí)色彩是通過(guò)人的印象或者聯(lián)想來(lái)產(chǎn)生心理上的影

響的，而配色設(shè)計(jì)的作用就是通過(guò)改變空間的舒適程度和環(huán)境氣氛來(lái)滿足人們

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

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

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

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

二、店標(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é)方法講授法、案例法

課時(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)讓消費(fèi)者有一種中西結(jié)合、和國(guó)際接軌的大牌感覺(jué)。在表達(dá)形式上，非中

文的部分設(shè)計(jì)感比較強(qiáng)，視覺(jué)沖擊力比較大，所以形式多種多樣，給人的視覺(jué)感受不錯(cuò)。

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

圖形型店標(biāo)就是直接用圖形作為店標(biāo)。這類店標(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è)和類目，多數(shù)要表現(xiàn)出女性的柔美與嬌媚。

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

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

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

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

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

在設(shè)計(jì)店標(biāo)前，首先要和客戶或領(lǐng)導(dǎo)進(jìn)行溝通，對(duì)店標(biāo)設(shè)計(jì)來(lái)說(shuō)溝通是極為重要的，

因?yàn)檫@樣可以大大提高工作效率。

本案例中的店鋪名稱是“鮮果”，主營(yíng)項(xiàng)目是水果，所以在店標(biāo)設(shè)計(jì)上要體現(xiàn)出水果店

鋪的風(fēng)格。經(jīng)過(guò)分析和構(gòu)思，首先想到的是用水果的圖形來(lái)表現(xiàn)，所以第一步就是去素材

庫(kù)找一些卡通水果的素材圖形，然后摳出水果圖像，添加文字，并對(duì)店鋪名稱做一些變形

處理，最后添加修飾圖形、修飾圖案和修飾文字等。

通過(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)稱為徽標(biāo)，網(wǎng)店的標(biāo)志稱為店標(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ì)

教學(xué)內(nèi)容三、首焦輪播區(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é)要求

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

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

【技能目標(biāo)】

能夠熟練設(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è)的客戶體驗(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í)間

首頁(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ǔ)、近期的打折促銷信息、收藏按鈕、移動(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)格。

二'店鋪名稱的藝術(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ū)中顯得尤

為重要，文字的字體與字號(hào)、色彩的變化等都是設(shè)計(jì)中較為關(guān)鍵的環(huán)節(jié)。

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

溶圖是用兩張或兩張以上的圖片拼合起來(lái)的一張圖片，構(gòu)圖嚴(yán)謹(jǐn)，細(xì)節(jié)處理得當(dāng)0

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

只有滿足了其中的一個(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í)體店的店面，作為品牌的門

提高臉，它的主要作用是向消費(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ì)

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

教學(xué)內(nèi)容二、商品細(xì)節(jié)展示區(qū)設(shè)計(jì)

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

四、女鞋商品詳情頁(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像

素以上，自動(dòng)擁有放大鏡功能。主圖不許出現(xiàn)圖片留白、拼接、水印，不得包含促銷、夸

大描述等文字說(shuō)明，該文字說(shuō)明包括但不限于''秒殺”“限時(shí)折扣”“包郵”等，而且不同

行業(yè)店鋪的商品主圖要求也有所不同。

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

商品主圖的基本要求是能夠展示商品的全貌，圖片清晰，并且不能有雜亂的背景。商

品主圖的設(shè)計(jì)形式主要有以下幾種類型。

1.展不商品的全貌

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

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

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

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

添加了文案的商品主圖可以傳遞更多的商品信息，讓消費(fèi)者通過(guò)一張圖片就能對(duì)商品

有更多的了解，更容易激發(fā)消費(fèi)者的點(diǎn)擊興趣和購(gòu)買欲望。

在添加主圖文案時(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ì)方式就是添加必要的文字和素材。

I.利用文字對(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è)布局與淘寶類似，不同之處在于天貓商城新版頁(yè)面的寬度由

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)豐富畫面的內(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)銷的落地點(diǎn)。消費(fèi)者通過(guò)搜索進(jìn)入店鋪后，首先進(jìn)入

歸納與的便是詳情頁(yè)；所有頁(yè)面上有且僅有詳情頁(yè)承擔(dān)著下單購(gòu)買的職責(zé)；消費(fèi)者在

提高購(gòu)買前要對(duì)詳情頁(yè)仔細(xì)看、反復(fù)看，甚至對(duì)比看，才能決定是否咨詢賣家、是

否下單。如果詳情頁(yè)不能滿足消費(fèi)者的需求，不能解決消費(fèi)者的實(shí)際問(wèn)題，那

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

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

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

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

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

教學(xué)內(nèi)容三、鉆展圖設(shè)計(jì)

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

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

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

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

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

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

教學(xué)要求

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

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

【技能目標(biāo)】

能夠熟練設(shè)計(jì)直通車圖片、鉆展圖、聚劃算主圖、直播封面圖和聚劃算主圖。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

變化式構(gòu)圖又稱留白式構(gòu)圖。設(shè)計(jì)者將商品圖安排在某一角落或某一邊，同時(shí)留出

大部分空白。留白在畫面上的作用是幫助設(shè)計(jì)者展示感情色彩，給消費(fèi)者以思考和想象

的空間。

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

對(duì)角線構(gòu)圖就是把商品圖安排在對(duì)角線上，利用畫面對(duì)角線來(lái)整體統(tǒng)一畫面元素，同

時(shí)也能使陪體與主體區(qū)分明顯。這種構(gòu)圖的特點(diǎn)是富有動(dòng)感，活潑生動(dòng)，容易產(chǎn)生線條的

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

三'對(duì)稱式構(gòu)圖

對(duì)稱式構(gòu)圖給人一種畫面平衡、穩(wěn)定、商品突出的感覺(jué)，缺點(diǎn)是畫面比較呆板、缺少

變化。

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

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

像對(duì)稱式構(gòu)圖那樣老氣、呆板，所以很多電商設(shè)計(jì)者都會(huì)選擇這種構(gòu)圖方法。

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

緊湊式構(gòu)圖就是將商品以特寫的形式加以放大，布滿畫面，具有緊湊、細(xì)膩、微觀等

特點(diǎn)。

六、X形構(gòu)圖

X形構(gòu)圖是對(duì)角線構(gòu)圖的升級(jí)版，也稱放射式構(gòu)圖。它是將視覺(jué)焦點(diǎn)放置在畫面的中

央位置，讓每一條放射線的中點(diǎn)都位于視覺(jué)焦點(diǎn)之上。采用X形構(gòu)圖能夠獲得嚴(yán)謹(jǐn)?shù)拿栏校?/p>

盡情釋放商品擁有的自然、純美，在安靜的氛圍中就能讓消費(fèi)者感受到活力與激情。

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

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

在制作促銷圖片之前，第一步要做的就是根據(jù)文案或商品等因素來(lái)進(jìn)行風(fēng)格定位。設(shè)

計(jì)時(shí)，要確定推廣的商品所針對(duì)的消費(fèi)群體，同時(shí)分析他們的喜好，以確定設(shè)計(jì)風(fēng)格及顏

色；分析他們的消費(fèi)能力，以確定什么樣的促銷方式是其最容易接受的；分析他們的生活

習(xí)慣，合理調(diào)整投放時(shí)間和策略，與競(jìng)爭(zhēng)對(duì)手形成差異，以提高投放效率。

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

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

2.保證圖片清晰度

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

4.巧用素材搭配

二'突出商品賣點(diǎn)的設(shè)計(jì)

在店鋪推廣直通車主圖中添加店鋪品牌更多的說(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ù)纳省⒖刂坪孟嚓P(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.符合直播主題

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)行拍攝，以保證主題商品明確，

商品在1回面中能夠完整顯示。

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ì)喧賓奪主。如果選用模特，那么同一畫面中的模特不要多于兩位，

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

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

本案例結(jié)合前面所講的內(nèi)容為一款化妝品設(shè)計(jì)聚劃算主圖。在制作過(guò)程中使用漸變的

背景進(jìn)行修飾，添加“全國(guó)包郵”“送”促銷方案，以及簡(jiǎn)單的廣告詞來(lái)突出產(chǎn)品優(yōu)勢(shì)，具

體操作過(guò)程略。

通過(guò)本章的學(xué)習(xí)，我們掌握了推廣圖片的構(gòu)圖法則，直通車圖片設(shè)計(jì)的要

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

歸納與路與方法。

提高圖片是電商營(yíng)銷的基礎(chǔ)與靈魂，尤其是推廣圖片，其設(shè)計(jì)的重要性不言而

喻。可以說(shuō)優(yōu)質(zhì)的推廣圖片是吸引流量、促進(jìn)點(diǎn)擊、提高轉(zhuǎn)化率的必需品，也

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

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

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

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

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

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

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

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

教學(xué)要求

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

【技能目標(biāo)】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

具有視覺(jué)營(yíng)銷力的促銷廣告需要具備基本的設(shè)計(jì)美感與清晰度。如果想使促銷廣告圖

片更富吸引力與協(xié)調(diào)感，就要特別注意以下四個(gè)方面。

1.平衡

2.勢(shì)能

3.集群

4.標(biāo)簽分割

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

在設(shè)計(jì)促銷廣告時(shí)，除了促銷活動(dòng)的本身內(nèi)容以外，還可以添加引導(dǎo)標(biāo)簽、限制提示

等元素，營(yíng)造出更為濃郁的促銷氛圍，進(jìn)一步引導(dǎo)與促使消費(fèi)者點(diǎn)擊促銷廣告圖片。

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

2.添加限制提示

三'促銷廣告圖片的設(shè)計(jì)原則

除了具有基本的設(shè)計(jì)美感和促銷氛圍之外，促銷廣告圖片的設(shè)計(jì)還要遵循主題突出、

風(fēng)格統(tǒng)一與目標(biāo)明確的設(shè)計(jì)原則。

1.主題突出

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

3.目標(biāo)明確

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

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

對(duì)于剛起步的小店而言，店鋪幾乎沒(méi)有自然流量，此時(shí)便需要通過(guò)推廣來(lái)進(jìn)行流量的

引入，而促銷就是引流最為見(jiàn)效的手段。新店或許并沒(méi)有足夠的經(jīng)濟(jì)實(shí)力去開(kāi)展大規(guī)模的

促銷活動(dòng)，此時(shí)可以選擇單品進(jìn)行促銷，并投放一定比例的單品促銷廣告，打造爆款成為

為店鋪引流的法寶。

為打造爆款而設(shè)計(jì)的促銷廣告主要需要表現(xiàn)單品的賣點(diǎn)以及單品優(yōu)惠的幅度，以此來(lái)

吸引消費(fèi)者對(duì)促銷圖片的點(diǎn)擊，同時(shí)也可以添加''掌柜熱推”等說(shuō)明文案，告知消費(fèi)者這

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

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

在店鋪發(fā)展的中期階段，品牌的樹(shù)立起到了穩(wěn)固店鋪發(fā)展的作用。在這一基礎(chǔ)上，促

銷活動(dòng)應(yīng)更具品牌宣傳的效應(yīng)，相應(yīng)地促銷廣告也可以為品牌服務(wù)。

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

不同的商品，而且統(tǒng)一的表現(xiàn)形式也能讓消費(fèi)者形成對(duì)品牌的聯(lián)想。展示標(biāo)準(zhǔn)包括商品攝

影、構(gòu)圖與字體使用等。

三'發(fā)展成熟期——為客戶而促銷

當(dāng)?shù)赇伆l(fā)展到成熟階段以后，維系客戶已經(jīng)成為這個(gè)階段的首要任務(wù)，此時(shí)賣家可以

增加更傾向于為老客戶而展開(kāi)的促銷活動(dòng)。老客戶對(duì)品牌已經(jīng)有了一定的認(rèn)知與信任度，

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

在設(shè)計(jì)促銷活動(dòng)頁(yè)時(shí)，可以專門設(shè)計(jì)一個(gè)促銷頁(yè)面，說(shuō)明會(huì)員享有的一系列優(yōu)惠政策，

增強(qiáng)會(huì)員的歸屬感，幫助賣家維系老客戶，增強(qiáng)消費(fèi)者的凝聚力?需要注意的是，促銷頁(yè)

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

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

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

歸納與

促銷活動(dòng)幾乎是網(wǎng)店運(yùn)營(yíng)中最常見(jiàn)、最重要的內(nèi)容，可以說(shuō)一個(gè)成功的店

提高

鋪是離不開(kāi)各種各樣的促銷活動(dòng)的。能讓促銷活動(dòng)得到直接體現(xiàn)的手段就是視

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

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

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

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

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

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

教學(xué)要求

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

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)注了店鋪名稱，圖文結(jié)合和

中英文混合形式的店標(biāo)不僅讓店標(biāo)的構(gòu)圖變得擁擠，還會(huì)讓人產(chǎn)生畫蛇添足的感覺(jué)。

利用朋友圈進(jìn)行小范圍營(yíng)銷的店鋪或銷售母嬰用品等特定商品的店鋪，也可以使用頭

像作為店標(biāo)，這樣有助于拉近店鋪與特定類型消費(fèi)者的心理距離，但是不要使用公眾人物

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

主營(yíng)商品。

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

為了規(guī)范設(shè)計(jì)，手機(jī)淘寶對(duì)圖片的發(fā)布尺寸做出了要求：需在圖片上添加文字時(shí)，中

文字號(hào)230磅，英文和阿拉伯?dāng)?shù)字字號(hào)N20磅；圖片高度W960像素（建議高度不超過(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。

三、移動(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客戶端中的

店鋪各級(jí)界面。

賣家雖然可以不考慮圖標(biāo)、按鈕等用戶界面（UI）設(shè)計(jì)，也不必過(guò)多地考慮店鋪的結(jié)

構(gòu)組成，但需要注意在已有的框架結(jié)構(gòu)中添加能夠促進(jìn)消費(fèi)者購(gòu)買的內(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)買進(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)買的初衷，這也是促進(jìn)手機(jī)

移動(dòng)端店鋪銷量增加的有效手段之一。

三、整體設(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)買的手機(jī)移動(dòng)端消費(fèi)者而言，他們希望從中獲取輕

松與自在感，而深色系容易帶來(lái)一種沉重感；相反，較為鮮明與惹眼的色彩則能讓消費(fèi)者

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

五'保持常換常新

手機(jī)移動(dòng)端的視覺(jué)設(shè)計(jì)保持常換常新的狀態(tài)，不僅能夠滿足這部分消費(fèi)群體對(duì)新奇事

物的追求，也不會(huì)讓店鋪看起來(lái)像是一個(gè)無(wú)人看管的空店。當(dāng)然，這一切也是需要建立在

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

通過(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í)更需要把握“用戶體驗(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)者的歡心。

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

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

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

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

三、手機(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é)要求4.掌握商品分類導(dǎo)航及商品分類展示的優(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)通知、促銷活動(dòng)展示等內(nèi)容。輪播圖內(nèi)

容要盡量簡(jiǎn)潔，文字表現(xiàn)清晰，主次分明且能達(dá)到快速傳播的目的，這是輪播圖片設(shè)計(jì)

的要點(diǎn)。

此外，賣家在設(shè)計(jì)時(shí)也要注意控制好輪播圖片的數(shù)量，以及展示的先后順序。在設(shè)計(jì)

時(shí)賣家可以根據(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)取”之類的視覺(jué)元素，可以在一定程度上左右消費(fèi)者的點(diǎn)擊

行為，相對(duì)于沒(méi)有明顯按鈕引導(dǎo)的優(yōu)惠券板塊而言，有按鈕引導(dǎo)更富操作的提示感。

三'商品分類導(dǎo)航優(yōu)化設(shè)計(jì)

通常情況下，在手機(jī)移動(dòng)端店鋪首頁(yè)中，展示完輪播圖片或是優(yōu)惠券板塊后便會(huì)出現(xiàn)

分類導(dǎo)航板塊。在設(shè)計(jì)這個(gè)板塊時(shí)，要注意控制好顯示尺寸與比例，使其能夠清晰與完整

地展示在消費(fèi)者面前，起到快速導(dǎo)航的作用。

四、商品分類展示優(yōu)化設(shè)計(jì)

與PC端有足夠的空間去裝飾與美化商品分類展示板塊不同，在手機(jī)移動(dòng)端為了迎合目

標(biāo)群體求快、求便的心理，應(yīng)當(dāng)盡量簡(jiǎn)潔，并在第一時(shí)間展示商品圖片。

通常情況下，手機(jī)移動(dòng)端店鋪首頁(yè)商品分類展示會(huì)以爆款或促銷的商品圖片形式呈獻(xiàn),

將全店最受歡迎或最優(yōu)惠的商品放在第一區(qū)，以促進(jìn)手機(jī)移動(dòng)端店鋪購(gòu)買力的轉(zhuǎn)化。手機(jī)

移動(dòng)端消費(fèi)者較為關(guān)注店鋪新品與應(yīng)季產(chǎn)品的發(fā)布，因此在商品分類展示的第二區(qū)中可以

對(duì)新品與應(yīng)季產(chǎn)品進(jìn)行展示。在在第三區(qū)、第四區(qū)等區(qū)域中可以根據(jù)店鋪需求放置不同的

商品。

商品分類展示區(qū)的分區(qū)不宜過(guò)多，商品分類展示的每一區(qū)中的商品圖片也不宜過(guò)多，

因?yàn)槭謾C(jī)顯示屏幕較窄，圖片橫向組合時(shí)要想讓消費(fèi)者看清商品圖片，那么每一行放2張

圖片最為合適。簡(jiǎn)潔、整齊的圖片排列組合能讓手機(jī)移動(dòng)端的消費(fèi)者獲得更好的瀏覽與購(gòu)

物體驗(yàn)。

第二節(jié)電子數(shù)碼類商品店鋪首頁(yè)案例解析

在對(duì)手機(jī)移動(dòng)端店鋪進(jìn)行視覺(jué)設(shè)計(jì)時(shí)，賣家應(yīng)注意保持色彩與文字的鮮明感，因?yàn)橄?/p>

費(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ī)配件類商品的店鋪而言，其所銷售的商品具有較

為濃郁的科技感與炫酷感，而這也很可能成為店鋪品牌的定位方向。為了迎合這一特性，

店鋪可以采用象征深沉與神秘的黑色作為店鋪首頁(yè)的主要色彩，從而突出商品與品牌具備

的科技特性。

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

一'詳情頁(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àn)為四個(gè)方面。

F——特征（Features）：介紹商品的特質(zhì)、特性等基本功能，以及它是如何滿足消費(fèi)者

需要的。

A——優(yōu)點(diǎn)（Advantages）：就是商品的賣點(diǎn)與優(yōu)勢(shì)，向消費(fèi)者證明商品的賣點(diǎn)，其實(shí)

就是給消費(fèi)者提供了更多購(gòu)買該商品的理由。

B——利益（Benefits）：以消費(fèi)者利益為中心，告知并強(qiáng)調(diào)消費(fèi)者購(gòu)買商品后會(huì)得到的

利益，能夠激發(fā)消費(fèi)者的購(gòu)買欲望。

E——證據(jù)（Evidence）：指第三方認(rèn)知、新聞?shì)浾摶蚣夹g(shù)報(bào)告等信息，它們需要有足夠

的權(quán)威性、客觀性、可靠性與可見(jiàn)證性，這樣才能獲得消費(fèi)者的信任。

在FABE原則的指引下，還需要做到以下六點(diǎn)具體內(nèi)容，讓商品描述變得更加符合網(wǎng)

絡(luò)的銷售環(huán)境，從而增加消費(fèi)者的購(gòu)買動(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)買的重要前提。

1.切忌密不透風(fēng)的文字說(shuō)明

2.海報(bào)宣傳需凸顯商品的真實(shí)性

3.注意控制商品與關(guān)聯(lián)銷售商品圖片的數(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ì)商品的賣點(diǎn)和重要信息進(jìn)行清晰的

描述，因?yàn)檫^(guò)于煩瑣的其他關(guān)聯(lián)信息可能需要占用好幾屏的空間，每占用一屏的空間便會(huì)

使消費(fèi)者多一次滑動(dòng)操作，并且還有可能看不到與商品相關(guān)的信息，讓其失去對(duì)商品的購(gòu)

買興趣，造成流量跳失。

第四節(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ì)方法,

商品分類導(dǎo)航及商品分類展示的優(yōu)化方法，了解了店鋪詳情頁(yè)設(shè)計(jì)的FABE

原則，還掌握了手機(jī)淘寶店鋪詳情頁(yè)的設(shè)計(jì)方法等。

越來(lái)越多的消費(fèi)者選擇通過(guò)手機(jī)移動(dòng)端淘寶店鋪進(jìn)行購(gòu)物，是因?yàn)槭謾C(jī)移

動(dòng)端店鋪所具備的特點(diǎn)給予了他們很好的用戶體驗(yàn)，但是這些特點(diǎn)并不足以讓

消費(fèi)者決定購(gòu)買，所以還需要對(duì)店鋪進(jìn)行個(gè)性化且更為具體的設(shè)計(jì)，對(duì)店鋪的

各個(gè)細(xì)節(jié)進(jìn)行優(yōu)化，營(yíng)造出良好的銷售氛圍，讓消費(fèi)者最終被店鋪所吸引并產(chǎn)

生購(gòu)買行為。

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

一、微店首頁(yè)優(yōu)化設(shè)計(jì)

二、商品詳情頁(yè)優(yōu)化設(shè)計(jì)

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

三、母嬰微店視覺(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é)要求

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)容

第一節(jié)微店首頁(yè)優(yōu)化設(shè)計(jì)

一'首頁(yè)的框架設(shè)計(jì)

微店首頁(yè)主要由店鋪招牌、微店公告、焦點(diǎn)大圖、商品分類與商品展示五部分構(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ì)、商品賣點(diǎn)、促銷信息及服務(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)檩?/p>

播圖片是動(dòng)態(tài)的，所以具有一定的視覺(jué)吸引力，容易引起消費(fèi)者的注意。

4.商品分類

在微店首頁(yè)中，店主可以根據(jù)商品的特點(diǎn)將商品劃分為幾大類，并根據(jù)類別對(duì)商品進(jìn)

行排列。

一般來(lái)說(shuō)，如果消費(fèi)者有需求，進(jìn)入微店后他們首先會(huì)點(diǎn)開(kāi)首頁(yè)中的“商品分類”模

塊，然后根據(jù)商品類型選擇符合自己需求的區(qū)域，從中尋找所需的商品。商品分類的布局

很重要，店主要按照消費(fèi)者的瀏覽和購(gòu)買習(xí)慣對(duì)商品進(jìn)行分類，以便消費(fèi)者能夠快速找到

所需的商品，提高其購(gòu)物體驗(yàn)度。

5.商品展示

商品展示一般可以分為“熱賣商品”“店長(zhǎng)推薦”和“全部商品”三個(gè)模塊。

(1)熱賣商品

(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ù)量也是有限制的，因此賣家要利用有限的板塊創(chuàng)造更多的

價(jià)值。

一般微店首頁(yè)是由店招、海報(bào)、分類入口、優(yōu)惠券和單品展示等部分組成的。

三'遵守設(shè)計(jì)學(xué)的“七秒定律”

在設(shè)計(jì)學(xué)中有一條“七秒定律”，據(jù)專業(yè)機(jī)構(gòu)研究發(fā)現(xiàn)，人關(guān)注一個(gè)商品的時(shí)間通常為

七秒，而這七秒內(nèi)影響70%的人購(gòu)買的第一要素是色彩。

首先，同一板塊內(nèi)不要超過(guò)3種顏色，這3種顏色可以看作是主色、輔助色與點(diǎn)綴色。

另外，賣家在設(shè)計(jì)首頁(yè)時(shí)可以多使用萬(wàn)能搭配色，如黑、白、灰等顏色。因?yàn)檫@些顏色比

較百搭，跟任何顏色搭配起來(lái)都會(huì)比較和諧，容易表現(xiàn)出高端的感覺(jué)。背景色盡量以淺色

調(diào)為主，因?yàn)樵谝苿?dòng)端上觀看，淺色的背景色更能突出商品本身，使消費(fèi)者的注意力集中

在商品上。

四、注重細(xì)節(jié)設(shè)計(jì)

賣家在設(shè)計(jì)微店首頁(yè)時(shí)，還要注重細(xì)節(jié)上的設(shè)計(jì)，比如在首頁(yè)上可以選取半身圖或局

部特寫圖。因?yàn)槲⒌晔醉?yè)大多是以“豆腐塊”的形式展現(xiàn)的，范圍確實(shí)有限，所以賣家在

選擇圖片時(shí)要盡量使用半身圖或局部特寫圖，以避免視覺(jué)上的不清晰。如果全部都使用半

身圖或特寫圖，那么微店頁(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)潔明了、突出賣點(diǎn)，這樣商品主圖

才會(huì)更加美觀、更能吸引消費(fèi)者。

二、商品描述圖的設(shè)計(jì)

商品描述圖包括商品圖片和商品描述。在商品描述圖中，適當(dāng)?shù)奈淖置枋瞿軌蚱鸬轿?/p>

引消費(fèi)者、提高商品成交率的作用。商品描述圖應(yīng)與商品主圖、商品標(biāo)題相契合，能夠真

實(shí)地介紹商品的屬性。

在進(jìn)行商品描述時(shí)，文字內(nèi)容要盡量簡(jiǎn)短，突出商品的優(yōu)點(diǎn)、特點(diǎn)和賣點(diǎn)。商品描述

頁(yè)面在重新排列、展示商品細(xì)節(jié)的過(guò)程中只能利用文字和圖片這種靜態(tài)信息類的溝通方式。

這就要求店主在整個(gè)商品詳情頁(yè)面的布局中要注意一個(gè)關(guān)鍵點(diǎn)，那就是闡述邏輯。

店主在設(shè)計(jì)圖文詳情時(shí)，要多圖少文。圖要美觀，文字描述要與圖片相契合。文字最

好是中文，字體不可過(guò)大，也不可過(guò)小，可根據(jù)目標(biāo)客戶來(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)潔明快。

③促銷廣告：該區(qū)域通過(guò)使用商品圖片與文字結(jié)合的方式進(jìn)行展示，能夠完整地表現(xiàn)

出商品的特點(diǎn)和形象。

④特價(jià)專區(qū)：使用商品圖片搭配色調(diào)和外形和諧的標(biāo)題文字，并加入相應(yīng)的鏈接按鈕,

讓消費(fèi)者能夠隨時(shí)進(jìn)入其頁(yè)面了解詳情。

二、主色調(diào)：高純度暖色