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

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

第1章初識電商視覺設(shè)計

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

一、什么是視覺設(shè)計

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

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

【知識目標(biāo)】

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

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

教學(xué)要求

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

【技能目標(biāo)】

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

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

教學(xué)重點

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

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

教學(xué)難點

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

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

課時數(shù)2課時

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

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

視覺設(shè)計是針對眼睛功能的表現(xiàn)手段，通俗地說就是通過

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

一、視覺識別設(shè)計

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

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

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

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

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

1

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

二、視覺傳達(dá)設(shè)計

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

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

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

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

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

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

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

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

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

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

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

的字眼。

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

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

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

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

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

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

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

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

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

（2）節(jié)約資源

除了活動海報等個性模塊之外，其他的頁面和模塊也參照

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

目的

（3）重復(fù)利用

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

無關(guān)的信息，方便消費者的閱讀和信息傳遞。同時，視覺規(guī)范

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

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

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

一、對稱切割構(gòu)圖法

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

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

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

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

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

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

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

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

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

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

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

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

2

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

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

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

的頁面變得生動、復(fù)雜的頁面變得時尚，避免畫面出現(xiàn)生硬感,

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

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

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

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

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

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

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

及整體流向展示清楚，讓枯燥的流程瞬間變得簡潔明了、個性

十足，并充滿趣味性。

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

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

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

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

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

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

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

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

能讓整體頁面更加生動、形象、有趣。

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

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

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

電商平臺上的商品數(shù)以億計，消費者在瀏覽商品時只會注

重第一眼的感

覺。說到如何讓消費者第一眼就感興趣，就不得不提電商

視覺設(shè)計。電商視覺

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

特別是在以淘寶天貓

為代表的電商平臺中，電商視覺設(shè)計理念運用得非常廣泛,

效果也很明顯。歸納與

提高

3

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

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

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

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

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

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

【知識目標(biāo)】

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

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

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

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

【技能目標(biāo)】

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

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

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

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

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

教學(xué)難點

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

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

課時數(shù)4課時

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

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

4

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

一、色搭原則七要素

1.漸進(jìn)配色

2.對比配色

3.色調(diào)配色

4.近似配色

5.單重點配色

6.分隔式配色

7.夜配色

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

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

中人們也會自覺或不自覺地運用這種感知習(xí)慣。同時，由于人

們的視覺對于色彩的感知最為敏感，因此當(dāng)他們在瀏覽購物網(wǎng)

站時很可能會首先通過色彩去識別商品。

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

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

用到與商品相關(guān)的視覺設(shè)計之中，這樣才能避免消費者因為色

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

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

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

緒、活動的主題氣氛、店鋪的包裝色彩和VI配色。

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

(1)簡約清爽型

(2)商業(yè)型

(3)炫酷型

(4)可愛型

(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)格

?運動風(fēng)格

?英倫風(fēng)格

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

3.活動的主題氣氛

4.店鋪的包裝色彩

5.VI配色

(1)單色VI

5

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

(2)雙色VI

(3)多色VI

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

一、色彩過多

合理地運用色彩會使店鋪頁面變得鮮艷、生動且富有活力,

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

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

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

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

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

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

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

的辨識度降低。

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

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

來說，高明度、高純度的顏色刺激度高，疲勞度也高。在無彩

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

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

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

一、店鋪頁面主色設(shè)計

二、店鋪頁面文案配色設(shè)計

三、店鋪頁面輔色設(shè)計

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

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

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

見的配色誤區(qū)。

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

消費者注意。因

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

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

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

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

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

環(huán)境氣氛來滿足人們

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

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

提高

6

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

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

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

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

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

【知識目標(biāo)】

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

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

教學(xué)要求

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

【技能目標(biāo)】

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

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

教學(xué)重點

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

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

教學(xué)難點

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

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

7

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

課時數(shù)2課時

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

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

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

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

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

式，最大的優(yōu)點是一目了然，消費者對中文文字的接受度最高,

好辨識也好記憶。

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

對于非中文的標(biāo)識來說，英文和字母會給人一種很酷的感

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

時間讓消費者理解清楚，所以我們可以把它看作是一個符號。

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

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

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

力比較大，所以形式多種多樣，給人的視覺感受不錯。

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

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

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

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

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

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

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

息。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

的感覺

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

8

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

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

計來說溝通是極為重要的，因為這樣可以大大提高工作效率。

本案例中的店鋪名稱是“鮮果”，主營項目是水果，所以在

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

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

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

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

飾文字等。

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

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

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

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

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

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

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

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

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

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

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

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

歸納與

提高

第4章店鋪首頁視覺設(shè)計

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

二、店招視覺設(shè)計

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

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

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

【知識目標(biāo)】

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

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

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

教學(xué)要求

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

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

【技能目標(biāo)】

9

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

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

1.店招視覺設(shè)計

教學(xué)重點2.首焦輪播區(qū)視覺設(shè)計

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

1.店招視覺設(shè)計

教學(xué)難點2.首焦輪播區(qū)視覺設(shè)計

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

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

課時數(shù)4課時

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

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

一、首頁跳失率

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

一個首頁就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例。電商

運營者需要隨時觀測店鋪的各項數(shù)據(jù)，并根據(jù)數(shù)據(jù)變化情況對

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

二、首頁點擊率

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

擊率:首頁點擊量?首頁展現(xiàn)量。通過首頁點擊率可以看出店

鋪推廣的商品是否吸引人。首頁點擊率越高，說明商品越吸引

消費者；首頁點擊率越低，表示商品對于消費者的吸引力越低,

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

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

擊量。

三、首頁人均點擊次數(shù)

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

首頁人均點擊次數(shù)可以用來測試訪客黏度，如果首頁的客戶體

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

產(chǎn)品，那么訪客自然會離開。運營者要根據(jù)首頁人均點擊次數(shù)

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

四、首頁平均停留時間

10

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

首頁平均停留時間為訪問店鋪首頁的所有訪客總的停留時

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

停留時長的日均值。和首頁人均點擊次數(shù)一樣，首頁平均停留

時間也可以用來判斷一個店鋪首頁是否能留住訪客。

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

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

不同的電商平臺對店招的圖片尺寸有不同的要求，下面以

淘寶網(wǎng)為例來介紹店招的視覺設(shè)計規(guī)范。

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

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

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

在店招上可以添加品牌宣傳語、近期的打折促銷信息、收

藏按鈕、移動端二維碼等元素，但這些元素最好不要超過3個,

因為足夠的留白空間有利于打造視覺重點，讓設(shè)計元素發(fā)揮出

最大的效能。

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

修飾元素與風(fēng)格的相似性來營造視覺上的一致性，打造出獨特

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

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

1.用不同字體和字號的組合營造藝術(shù)感

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

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

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

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

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

的變化。

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

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

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

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

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

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

一、設(shè)計聚焦消費者視線

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

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

瀏覽店鋪頁面的可能性。相較于在首焦位置使用大量文字說明

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

讀與輕松購物體驗的心理。同時，放置消費者最渴望看到的信

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

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

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

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

的廣告文字。

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

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

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

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

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

11

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

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

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

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

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

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

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

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

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

效果。

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

一、營造視覺動線

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

列讓消費者獲得輕松感，并且還要注意圖片不宜過多，橫排圖

片最好不超過五張，因為過多的圖片容易讓消費者感到瀏覽壓

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

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

動線，也能減少過于死板的排列組合帶來的枯燥與乏味感。

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

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

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

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

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

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

1.方塊式布局

2.折線型布局

3.隨意型布局

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

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

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

店招視覺設(shè)計規(guī)

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

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

方法。

店鋪首頁在電商店鋪中所起到的作用就好像實體店的店面,

作為品牌的門

臉，它的主要作用是向消費者做展示，通過視覺、氛圍、

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

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

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

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

讓設(shè)計能夠聚集消費者

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

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

提高

第5章商品詳情頁視覺設(shè)計

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

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

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

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

12

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

四、女鞋商品詳情頁視覺設(shè)計案例

【知識目標(biāo)】

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

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

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

教學(xué)要求

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

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

【技能目標(biāo)】

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

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

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

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

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

教學(xué)難點

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

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

課時數(shù)4課時

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

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

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

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

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

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

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

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

x700像素時，商品詳情頁會自動提供放大鏡功能。

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

主圖尺寸為800像素x800像

13

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

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

拼接、水印，不得包含促銷、夸大描述等文字說明，該文字說

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

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

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

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

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

類型。

1.展不商品的全貌

2.場景化的設(shè)計

3.拼接式設(shè)計

4.突出商品賣點

三、添加文案提高主圖點擊率

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

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

的點擊興趣和購買欲望。

在添加主圖文案時，需要注意以下兩點。

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

費者產(chǎn)生點擊沖動的誘惑力。

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

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

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

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

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

式有以下兩種。

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

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

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

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

和素材。

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

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

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

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

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

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

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

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

電商平臺商品詳情頁設(shè)計尺寸規(guī)范

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

750像素，加

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

以顯示950像素寬，

否則只顯示750像素寬

天貓商城詳情頁布局與淘寶類似，不同之處在于天貓商城

新版頁面的寬度由

14

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

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

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

像素

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

歸納，通過文字、色彩和修飾元素的完美搭配來提升文字的可

讀性。

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

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

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

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

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

得更具象化，在給消費者帶來美好的視覺享受的同時有助于消

費者深入了解商品的功效。

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

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

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

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

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

形式，掌握了商

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

方法。

商品詳情頁是所有營銷的落地點。消費者通過搜索進(jìn)入店

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

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

買的職責(zé)；消費者在

購買前要對詳情頁仔細(xì)看、反復(fù)看，甚至對比看，才能決

定是否咨詢賣家、是

否下單。如果詳情頁不能滿足消費者的需求，不能解決消

費者的實際問題，那

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

么店鋪，都要對商品

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

歸納與

提高

15

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

第6章高點擊率推廣圖片視覺設(shè)計

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

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

三、鉆展圖設(shè)計

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

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

【知識目標(biāo)】

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

2.掌握直通車圖片設(shè)計的要點。

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

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

教學(xué)要求

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

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

【技能目標(biāo)】

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

播封面圖和聚劃算主圖。

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

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

教學(xué)重點3.鉆展圖設(shè)計

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

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

教學(xué)難點1.直通車圖片設(shè)計

16

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

2.鉆展圖設(shè)計

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

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

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

課時數(shù)6課時

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

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

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

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

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

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

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

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

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

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

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

三、對稱式構(gòu)圖

對稱式構(gòu)圖給人一種畫面平衡、穩(wěn)定、商品突出的感覺，

缺點是畫面比較呆板、缺少變化。

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

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

沒有新意。平衡式構(gòu)圖不像對稱式構(gòu)圖那樣老氣、呆板，所以

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

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

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

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

六、X形構(gòu)圖

X形構(gòu)圖是對角線構(gòu)圖的升級版，也稱放射式構(gòu)圖。它是

將視覺焦點放置在畫面的中央位置，讓每一條放射線的中點都

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

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

感受到活力與激情。

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

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

17

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

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

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

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

析他們的消費能力，以確定什么樣的促銷方式是其最容易接受

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

對手形成差異，以提高投放效率。

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

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

2.保證圖片清晰度

3.精簡文字，去除“牛皮癬”

4.巧用素材搭配

二、突出商品賣點的設(shè)計

在店鋪推廣直通車主圖中添加店鋪品牌更多的說明信息，

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

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

能促使消費者進(jìn)行點擊。

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

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

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

的，但其有針對的對象，所以也不難抓住。例如，拍攝商品時

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

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

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

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

主題是圖片的重點，對于鉆展圖而言，主題是激發(fā)消費者

潛在需求的重要武器，明確的主題能夠促使消費者點擊圖片。

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

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

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

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

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

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

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

適當(dāng)?shù)纳省⒖刂坪孟嚓P(guān)元素的尺寸也是讓鉆展圖具有足夠吸

引力的關(guān)鍵。

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

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

一、直播封面圖尺寸要求

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

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

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

像素。

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

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

以下原則。

1.符合直播主題

18

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

2.封面圖要美觀、清晰

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

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

5.禁用合成圖

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

7.封面圖不要雷同

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

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

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

圖和詳情頁主圖四部分。

1.商品拍攝

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

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

2.商品背景

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

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

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

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

或漸變色背景。

3.商品構(gòu)圖

多色商品展示盡量使用實拍圖，沒有實拍圖時也可以使用

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

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

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

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

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

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

促銷方案，以及簡單的廣告詞來突出產(chǎn)品優(yōu)勢，具體操作過程

略。

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

車圖片設(shè)計的要

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

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

路與方法。

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

的重要性不言而

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

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

是視覺設(shè)計的關(guān)鍵點。

歸納與

提高

19

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

第7章網(wǎng)店促銷活動頁視覺設(shè)計

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

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

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

【知識目標(biāo)】

1.掌握如何營造促銷廣告的氛圍。

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

教學(xué)要求

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

【技能目標(biāo)】

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

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

教學(xué)重點

2.營造促銷氛圍

20

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

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

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

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

教學(xué)難點

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

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

課時數(shù)3課時

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

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

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

具有視覺營銷力的促銷廣告需要具備基本的設(shè)計美感與清

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

注意以下四個方面。

1.平衡

2.勢能

3.集群

4.標(biāo)簽分割

二、營造促銷氛圍

在設(shè)計促銷廣告時，除了促銷活動的本身內(nèi)容以外，還可

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

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

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

2.添加限制提示

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

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

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

1.主題突出

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

3.目標(biāo)明確

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

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

對于剛起步的小店而言，店鋪幾乎沒有自然流量，此時便

需要通過推廣來進(jìn)行流量的引入，而促銷就是引流最為見效的

手段。新店或許并沒有足夠的經(jīng)濟(jì)實力去開展大規(guī)模的促銷活

動，此時可以選擇單品進(jìn)行促銷，并投放一定比例的單品促銷

廣告，打造爆款成為

21

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

為店鋪引流的法寶。

為打造爆款而設(shè)計的促銷廣告主要需要表現(xiàn)單品的賣點以

及單品優(yōu)惠的幅度，以此來吸引消費者對促銷圖片的點擊，同

時也可以添加“掌柜熱推”等說明文案，告知消費者這件單品為

重點推薦商品，以此來營造更為濃厚的單品促銷氛圍。

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

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

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

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

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

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

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

圖與字體使用等。

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

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

的首要任務(wù)，此時賣家可以增加更傾向于為老客戶而展開的促

銷活動。老客戶對品牌已經(jīng)有了一定的認(rèn)知與信任度，抓住他

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

在設(shè)計促銷活動頁時，可以專門設(shè)計一個促銷頁面，說明

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

系老客戶，增強(qiáng)消費者的凝聚力。需要注意的是，促銷頁面的

設(shè)計需要顧及消費者的感官體驗，否則也是無法獲取消費者好

感的。

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

促銷廣告的三大

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

促銷活動幾乎是網(wǎng)店運營中最常見、最重要的內(nèi)容，可以

說一個成功的店

鋪是離不開各種各樣的促銷活動的。能讓促銷活動得到直

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

覺，促銷活動的內(nèi)容也只有通過視覺的表現(xiàn)才能更好地傳

遞給消費者。歸納與

提高

第8章移動端網(wǎng)店用戶體驗設(shè)計

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

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

二、移動端網(wǎng)店視覺設(shè)計

【知識目標(biāo)】

教學(xué)要求

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

22

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

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

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

【技能目標(biāo)】

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

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

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

教學(xué)重點

2.移動端網(wǎng)店視覺設(shè)計

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

教學(xué)難點

2.移動端網(wǎng)店視覺設(shè)計

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

課時數(shù)3課時

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

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

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

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

是因為符號化的店標(biāo)更容易加深消費者對店鋪的印象，另一方

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

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

蛇添足的感覺。

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

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

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

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

能明白店鋪銷售的主營商品。

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

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

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

字號N20磅；圖片高度3960像素（建議高度不超過600像素），

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

480像素?620像素（建議不超過608像素）；每個詳情頁可以

增加一個音頻，時長不超過30秒，大小不超過200KB,格式

為MP3。每個圖片、音頻的大小不得超過1.5MB。

23

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

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

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

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

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

鋪各級界面。

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

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

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

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

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

所理解，阻礙消費者的購買進(jìn)程。

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

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

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

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

息無法清晰、明確地加載與顯示，消費者也很難讀懂精華信息,

不能快速找到自己想要看到的界面，就很有可能會選擇離開。

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

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

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

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

二、簡單方便的操作與交互

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

行信息的瀏覽，簡單且易于操作的方式更容易被消費者所接受。

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

要的設(shè)計，讓消費者不必因為多余的操作而忘記了購買的初衷,

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

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

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

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

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

風(fēng)格的一致性，店鋪形象的不鮮明感就會帶來視覺的混亂體驗,

也無法讓消費者對店鋪形成視覺記憶。

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

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

的色彩，因為這樣既能給消費者帶來較好的瀏覽體驗，同時也

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

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

對于利用碎片化時間來進(jìn)行商品購買的手機(jī)移動端消費者

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

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

閱讀的感受與體驗。

五、保持常換常新

手機(jī)移動端的視覺設(shè)計保持常換常新的狀態(tài)，不僅能夠滿

足這部分消費群體對新奇事物的追求，也不會讓店鋪看起來像

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

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

24

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

歸納與

提高

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

了解了移動端

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

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

法與技巧。

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

“用戶體驗”這

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

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

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

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

App一樣，在設(shè)計手機(jī)移動端店鋪頁面時要結(jié)合智能手機(jī)

平臺的特色設(shè)計出更

加注重交互體驗與友好度的頁面，只有這樣才能博得消費

者的歡心。

25

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

第9章手機(jī)移動端淘寶店鋪視覺設(shè)計

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

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

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

四、家紡視覺設(shè)計案例實操

【知識目標(biāo)】

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

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

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

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

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

法。

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

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

【技能目標(biāo)】

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

設(shè)計。

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

教學(xué)重點

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

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

教學(xué)難點

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

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

課時數(shù)4課時

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

第一節(jié)手機(jī)移動端淘寶店鋪首頁優(yōu)化設(shè)計

一、輪播圖片優(yōu)化設(shè)計

通常情況下，輪播圖片會包含店鋪上新活動通知、促銷活

動展示等內(nèi)容。輪播圖內(nèi)

26

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

容要盡量簡潔，文字表現(xiàn)清晰，主次分明且能達(dá)到快速傳

播的目的，這是輪播圖片設(shè)計的要點。

此外，賣家在設(shè)計時也要注意控制好輪播圖片的數(shù)量，以

及展示的先后順序。在設(shè)計時賣家可以根據(jù)店鋪活動的重要程

度或先后順序?qū)啿D片的位置進(jìn)行相應(yīng)的調(diào)整。二、優(yōu)惠券

的優(yōu)化設(shè)計

在進(jìn)行視覺設(shè)計時，一般都將優(yōu)惠券放在店招或輪播圖片

的下方，并留出足夠的空間，使用較為鮮明的色彩，讓消費者

能夠注意到優(yōu)惠券，只有這樣才能真正發(fā)揮其引流與促進(jìn)轉(zhuǎn)化

的作用。

過于花哨的設(shè)計有時反而會讓優(yōu)惠券淹沒在各種視覺元素

的沖擊之中。店鋪中的某些優(yōu)惠活動也可以被設(shè)計成優(yōu)惠券的

形式。有的優(yōu)惠活動還設(shè)計了優(yōu)惠券按鈕，讓消費者更有互動

參與感。

在優(yōu)惠券上添加“立即領(lǐng)取”之類的視覺元素，可以在一定

程度上左右消費者的點擊行為，相對于沒有明顯按鈕引導(dǎo)的優(yōu)

惠券板塊而言，有按鈕引導(dǎo)更富操作的提示感。三、商品分類

導(dǎo)航優(yōu)化設(shè)計

通常情況下，在手機(jī)移動端店鋪首頁中，展示完輪播圖片

或是優(yōu)惠券板塊后便會出現(xiàn)分類導(dǎo)航板塊。在設(shè)計這個板塊時,

要注意控制好顯示尺寸與比例，使其能夠清晰與完整地展示在

消費者面前，起到快速導(dǎo)航的作用。

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

與PC端有足夠的空間去裝飾與美化商品分類展示板塊不

同，在手機(jī)移動端為了迎合目標(biāo)群體求快、求便的心理，應(yīng)當(dāng)

盡量簡潔，并在第一時間展示商品圖片。

通常情況下，手機(jī)移動端店鋪首頁商品分類展示會以爆款

或促銷的商品圖片形式呈獻(xiàn)，將全店最受歡迎或最優(yōu)惠的商品

放在第一區(qū)，以促進(jìn)手機(jī)移動端店鋪購買力的轉(zhuǎn)化。手機(jī)移動

端消費者較為關(guān)注店鋪新品與應(yīng)季產(chǎn)品的發(fā)布，因此在商品分

類展示的第二區(qū)中可以對新品與應(yīng)季產(chǎn)品進(jìn)行展示。在在第三

區(qū)、第四區(qū)等區(qū)域中可以根據(jù)店鋪需求放置不同的商品。

商品分類展示區(qū)的分區(qū)不宜過多，商品分類展示的每一區(qū)

中的商品圖片也不宜過多，因為手機(jī)顯示屏幕較窄，圖片橫向

組合時要想讓消費者看清商品圖片，那么每一行放2張圖片最

為合適。簡潔、整齊的圖片排列組合能讓手機(jī)移動端的消費者

獲得更好的瀏覽與購物體驗。

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

在對手機(jī)移動端店鋪進(jìn)行視覺設(shè)計時，賣家應(yīng)注意保持色

彩與文字的鮮明感，因為消費者在碎片化的時間里利用手機(jī)進(jìn)

行購物，更多的是希望獲得放松感，而店鋪過于沉悶的色彩搭

配則無法達(dá)到這一目的。

這并不意味著手機(jī)移動端店鋪的視覺設(shè)計只能是明亮的色

調(diào)，其實也可以使用一些較為暗沉的色彩。例如，對于一些經(jīng)

營手機(jī)配件類商品的店鋪而言，其所銷售的商品具有較為濃郁

的科技感與炫酷感，而這也很可能成為店鋪品牌的定位方向。

為了迎合這一特性，店鋪可以采用象征深沉與神秘的黑色作為

店鋪首頁的主要色彩，從而突出商品與品牌具備的科技特性。

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

27

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

一、詳情頁設(shè)計的FABE原則

FABE是一種通過四個關(guān)鍵環(huán)節(jié)來解答消費者訴求，且巧

妙地處理好消費者關(guān)心的問題，從而順利實現(xiàn)商品銷售訴求的

銷售模式，具體表現(xiàn)為四個方面。

F——特征(Features)：介紹商品的特質(zhì)、特性等基本功

能，以及它是如何滿足消費者需要的。

A----優(yōu)點(Advantages)：就是商品的賣點與優(yōu)勢，向

消費者證明商品的賣點，其實就是給消費者提供了更多購買該

商品的理由。

B——利益(Benefits)：以消費者利益為中心，告知并強(qiáng)

調(diào)消費者購買商品后會得到的利益，能夠激發(fā)消賽者的購買欲

望。

E----證據(jù)(Evidence)：指第三方認(rèn)知、新聞輿論或技

術(shù)報告等信息，它們需要有足夠的權(quán)威性、客觀性、可靠性與

可見證性，這樣才能獲得消費者的信任。

在FABE原則的指引下，還需要做到以下六點具體內(nèi)容,

讓商品描述變得更加符合網(wǎng)絡(luò)的銷售環(huán)境，從而增加消費者的

購買動力。

1.真實感

2.邏輯感

3.親切感

4.對話感

5.氛圍感

6.正規(guī)感

二、商品詳情頁的設(shè)計誤區(qū)

在設(shè)計商品詳情頁時，要注意避免以下幾個誤區(qū)，把握好

描述設(shè)計的尺度是促成消費者購買的重要前提。

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

2.海報宣傳需凸顯商品的真實性

3.注意控制商品與關(guān)聯(lián)銷售商品圖片的數(shù)量

三、根據(jù)消費者的頁面平均停留時間設(shè)計

手機(jī)瀏覽的連貫性不如PC端，并且消費者在頁面中的平

均停留時間很短，所以在設(shè)計手機(jī)移動端的詳情頁面時，必須

做到簡單、直截了當(dāng)。

在PC端商品詳情頁的開端可能會出現(xiàn)“新品推薦”“搭配

套餐''等信息，這些在手機(jī)移動端顯得不那么實用。手機(jī)移動

端必須在前三屏中對商品的賣點和重要信息進(jìn)行清晰的描述，

因為過于煩瑣的其他關(guān)聯(lián)信息可能需要占用好幾屏的空間，每

占用一屏的空間便會使消費者多一次滑動操作，并且還有可能

看不到與商品相關(guān)的信息，讓其失去對商品的購買興趣，造成

流量跳失。

第四節(jié)家紡視覺設(shè)計案例實操

本案例結(jié)合前面所講的內(nèi)容為一款空調(diào)被設(shè)計商品詳情頁,

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

晰、準(zhǔn)確地展示與說明空調(diào)被的特點。具體操作過程略。

歸納與

提高

通過本章的學(xué)習(xí)，我們掌握了店招、輪播圖片、優(yōu)惠券的

優(yōu)化設(shè)計方法，

商品分類導(dǎo)航及商品分類展示的優(yōu)化方法，了解了店鋪詳

情頁設(shè)計的FABE

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

28

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

越來越多的消費者選擇通過手機(jī)移動端淘寶店鋪進(jìn)行購物,

是因為手機(jī)移

動端店鋪所具備的特點給予了他們很好的用戶體驗，但是

這些特點并不足以讓

消費者決定購買，所以還需要對店鋪進(jìn)行個性化且更為具

體的設(shè)計，對店鋪的

各個細(xì)節(jié)進(jìn)行優(yōu)化，營造出良好的銷售氛圍，讓消費者最

終被店鋪所吸引并產(chǎn)

生購買行為。

第10章手機(jī)移動端微店視覺設(shè)計

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

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

三、母嬰微店視覺設(shè)計案例構(gòu)思

四、母嬰微店視覺設(shè)計案例實操

【知識目標(biāo)】

1.掌握微店首頁的優(yōu)化設(shè)計方法。

2.掌握商品詳情頁的優(yōu)化設(shè)計方法。

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

教學(xué)要求

3.根據(jù)母嬰微店視覺設(shè)計案例進(jìn)行實戰(zhàn)練習(xí)。

【技能目標(biāo)】

能夠熟練地進(jìn)行手機(jī)移動端微店視覺設(shè)計。

1.微店首頁的優(yōu)化設(shè)計

教學(xué)重點

2.商品詳情頁優(yōu)化設(shè)計

1.微店首頁的優(yōu)化設(shè)計

教學(xué)難點

2.商品詳情頁優(yōu)化設(shè)計

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

課時數(shù)4課時

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

29

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

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

一、首頁的框架設(shè)計

微店首頁主要由店鋪招牌、微店公告、焦點大圖、商品分

類與商品展示五部分構(gòu)成。

1.店鋪招牌

首先，店主需要考慮的是店鋪招牌要給消費者傳達(dá)什么樣

的信息；其次，店主需要對店鋪風(fēng)格進(jìn)行定位，并使店鋪招牌

與其保持一致；再次，設(shè)計要簡潔明了，字?jǐn)?shù)不要過多；最后,

店鋪招牌要突出主體，千萬不可喧賓奪主。

2.微店公告

微店公告常以文字來說明店鋪優(yōu)勢、商品賣點、促銷信息

及服務(wù)內(nèi)容等。只要是能增加消費者對店鋪的信任度且便于消

費者瀏覽的相關(guān)信息，店主就可以將其展示在微店公告中。不

過文字必須要簡潔、清晰，要讓消費者一看就懂，且不會消磨

其耐心。

3.焦點大圖

無圖不成焦點，焦點必須有圖片。可以說，焦點大圖也是

圖片內(nèi)容的一種展現(xiàn)形式。具體來說，焦點大圖設(shè)計就是由一

張圖片或多張圖片自動輪流播放展示在首頁上。因為輪播圖片

是動態(tài)的，所以具有一定的視覺吸引力，容易引起消費者的注

,?O

4.商品分類

在微店首頁中，店主可以根據(jù)商品的特點將商品劃分為幾

大類，并根據(jù)類別對商品進(jìn)行排列。

一般來說，如果消費者有需求，進(jìn)入微店后他們首先會點

開首頁中的“商品分類”模塊，然后根據(jù)商品類型選擇符合自己

需求的區(qū)域，從中尋找所需的商品。商品分類的布局很重要，

店主要按照消費者的瀏覽和購買習(xí)慣對商品進(jìn)行分類，以便消

費者能夠快速找到所需的商品，提高其購物體驗度。

5.商品展不

商品展示一般可以分為“熱賣商品”“店長推薦”和“全部商

品”三個模塊。

(1)熱賣商品

(2)店長推薦

(3)全部商品

二、清晰而準(zhǔn)確的設(shè)計思路

消費者在看手機(jī)的時候會比較放松，如果微店頁面在短時

間內(nèi)不能將其吸引住，那么他們會無情地離開，因此擁有一個

清晰而準(zhǔn)確的設(shè)計思路是非常重要的。微店首頁的核心是模塊

化，官方對頁面板塊的數(shù)量也是有限制的，因此賣家要利用有

限的板塊創(chuàng)造更多的價值。

一般微店首頁是由店招、海報、分類入口、優(yōu)惠券和單品

展示等部分組成的。三、遵守設(shè)計學(xué)的“七秒定律”

在設(shè)計學(xué)中有一條“七秒定律”，據(jù)專業(yè)機(jī)構(gòu)研究發(fā)現(xiàn)，人

關(guān)注一個商品的時間通常為七秒，而這七秒內(nèi)影響70%的人

購買的第一要素是色彩。

首先，同一板塊內(nèi)不要超過3種顏色，這3種顏色可以看

作是主色、輔助色與點綴色。另外，賣家在設(shè)計首頁時可以多

使用萬能搭配色，如黑、白、灰等顏色。因為這些顏色比較百

搭，跟任何顏色搭配起來都會比較和諧，容易表現(xiàn)出高端的感

覺。背景色盡量以淺色調(diào)為主，因為在移動端上觀看，淺色的

背景色更能突出商品本身，使消費者的注意力集中

30

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

在商品上。

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

賣家在設(shè)計微店首頁時，還要注重細(xì)節(jié)上的設(shè)計，比如在

首頁上可以選取半身圖或局部特寫圖。因為微店首頁大多是以

“豆腐塊”的形式展現(xiàn)的，范圍確實有限，所以賣家在選擇圖片

時要盡量使用半身圖或局部特寫圖，以避免視覺上的不清晰。

如果全部都使用半身圖或特寫圖，那么微店頁面會顯得單調(diào)、

乏味，所以可以適當(dāng)穿插一些全景圖，有意識地調(diào)整頁面的節(jié)

奏，使整個頁面更加和諧、活潑。

此外，在頁面面積較小的情況下，圖文搭配的巧妙排列能

讓頁面看起來更大，還能避免因為“亂''和"雜”而產(chǎn)生的廉價感。

第二節(jié)商品詳情頁優(yōu)化設(shè)計

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

在商品詳情頁中，商品主圖的設(shè)計尤為重要。因為消費者

在瀏覽商品時最先看到的圖片就是商品主圖，其基本尺寸要求

是640像素x640像素。在設(shè)計商品主圖時，圖片要清晰，主

題與背景要主次分明，圖片中的文字大小要適中、簡潔明了、

突出賣點，這樣商品主圖才會更加美觀、更能吸引消費者。

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

商品描述圖包括商品圖片和商品描述。在商品描述圖中，

適當(dāng)?shù)奈淖置枋瞿軌蚱鸬轿M者、提高商品成交率的作用。

商品描述圖應(yīng)與商品主圖、商品標(biāo)題相契合，能夠真實地介紹

商品的屬性。

在進(jìn)行商品描述時，文字內(nèi)容要盡量簡短，突出商品的優(yōu)

點、特點和賣點。商品描述頁面在重新排列、展示商品細(xì)節(jié)的

過程中只能利用文字和圖片這種靜態(tài)信息類的溝通方式。這就

要求店主在整個商品詳情頁面的布局中要注意一個關(guān)鍵點，那

就是闡述邏輯。

店主在設(shè)計圖文詳情時，要多圖少文。圖要美觀，文字描

述要與圖片相契合。文字最好是中文，字體不可過大，也不可

過小，可根據(jù)目標(biāo)客戶來定。字體顏色盡量不要太亮，以免使

人產(chǎn)生一種視覺上的不舒適感。

第三節(jié)母嬰微店視覺設(shè)計案例構(gòu)思

一、首頁設(shè)計布局規(guī)劃

①微店店招：在店招模塊中使用母嬰圖片進(jìn)行展示，通過

漸隱效果來讓文字更加突出，讓店鋪主題更加明確。

②首頁導(dǎo)航：該區(qū)域?qū)Ш皆O(shè)置清晰，設(shè)計簡潔明快。

③促銷廣告：該區(qū)域通過使用商品圖片與文字結(jié)合的方式

進(jìn)行展示，能夠完整地表現(xiàn)出商品的特點和形象。

④特價專區(qū)：使用商品圖片搭配色調(diào)和外形和諧的標(biāo)題文

字，并加入相應(yīng)的鏈接按鈕，讓消費者能夠隨時進(jìn)入其頁面了

解詳情。

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

1.頁面背景及設(shè)計元素配色：高純度色彩

31

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

2.商品及輔助配色：類似色調(diào)

三、案例配色擴(kuò)展

1.擴(kuò)展配色：互補色系

2.擴(kuò)展配色：同類色系

四、案例設(shè)計流程

①制作微店店招和導(dǎo)航

②制作微店促銷廣告

③制作微店特價專區(qū)

第四節(jié)母嬰微店視覺設(shè)計案例實操

母嬰微店視覺設(shè)計主要分為制作微店店招、首頁導(dǎo)航、促

銷廣告、特價專區(qū)四部分。一、制作微店店招

二、制作首頁導(dǎo)航

三、制作促銷廣告

四、制作特價專區(qū)

通過本章的學(xué)習(xí)，我們掌握了微店首頁、商品詳情頁的優(yōu)

化設(shè)計方法，并

根據(jù)母嬰微店視覺設(shè)計案例進(jìn)行了實戰(zhàn)練習(xí)。

無論是淘寶還是微店，店鋪視覺設(shè)計是否能夠吸引消費者

的眼球、是否能

夠突出自己商品的特色都是至關(guān)重要的。在微店中，頁面

位置有限，要想讓