《電子商務視覺設計》-教學教案

《電子商務視覺設計（第2版）》教案

第1章初識電商視覺設計

教學內容

一、什么是視覺設計

二、電商視覺設計前的準備

三、電商視覺設計的黃金構圖法

【知識目標】

1.了解視覺設計的定義。

2.了解電商視覺設計前的準備工作。

教學要求

3.掌握電商視覺設計黃金構圖法。

【技能目標】

學會電商視覺設計的常用構圖方法。

1.網店的視覺定位

教學重點

2.電商視覺設計黃金構圖法

1.網店的視覺定位

教學難點

2.電商視覺設計黃金構圖法

教學方法講授法、案例法

課時數2課時

教學內容

第一節什么是視覺設計

視覺設計是針對眼睛功能的表現手段，通俗地說就是通過

一些設計讓產品的視覺效果更加出彩。

一、視覺識別設計

企業視覺識別系統是企業理念的視覺化，通過企業形象廣

告、標識、商標、品牌、產品包裝、企業內部環境布局和廠容

廠貌等媒體及其他方式向大眾表現、傳達企業理念，使消費者

對企業產生一致的認同感與價值觀。企業視覺識別系統既可以

形成獨特的企業形象，又是企業無形資產的重要組成部分。

1

《電子商務視覺設計（第2版）》教案

二、視覺傳達設計

視覺傳達設計是以視覺媒介為載體，以文字、圖形和色彩

作為創作要素，利用視覺形象傳達特定的信息給受眾，從而對

被傳達對象產生影響的過程。視覺傳達的作用是讓人與人之間

利用“看''的形式進行交流。

第二節電商視覺設計前的準備

一、網店的視覺定位

不同的消費群體有著不同的視覺偏好，關鍵是要將產品的

定位和消費群體的視覺偏好進行整合，使店鋪在風格上能夠呈

現出一種整體效果。

營銷型網店的視覺定位原則在于營造促銷氛圍，主要體現

在通過對比強烈的顏色突出顯示打折、包郵、半價等優惠活動

的字眼。

品牌型網店的視覺定位原則是突出品牌優勢，整體設計風

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

服務關系型網店的視覺定位原則是包裝服務形象。

二、明確視覺規范的作用

(1)統一識別

視覺規范可以確保網店在整體風格、售前售后服務和產品

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

別和區分店鋪，也可以避免消費者在瀏覽時出現理解困難，甚

至是理解錯誤的現象。

（2）節約資源

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

規范進行設計可以極大地減少設計時間，從而達到節約資源的

目的

（3）重復利用

設計相同屬性的模塊或頁面時，執行視覺規范有利于減少

無關的信息，方便消費者的閱讀和信息傳遞。同時，視覺規范

也有利于美工人員之間的協調工作。標準化的視覺規范不僅可

以節約設計時間，還可以避免出錯。

第三節電商視覺設計的黃金構圖法

一、對稱切割構圖法

對稱切割構圖法的前提一般是將內容分為對立的兩部分，

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

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

二、組合切割構圖法

組合切割構圖法是通過集中而有規律的排列從整體上抓住

人們的視覺，讓整個頁面設計更具有立體感。這種構圖方式適

合每個區塊中的內容屬于平級關系產品的展示，能夠保持各種

內容的并列關系，讓布局更具創意。

三、整體場景構圖法

整體場景構圖法專題內容不多，適用于促銷、節日、活動

等頁面。整體場景構圖法可以將目標客戶快速帶入頁面氛圍中,

使商品信息更加精準、流暢。

2

《電子商務視覺設計（第2版）》教案

四、多重切割構圖法

多重切割構圖法的構圖不規則，穩定而銳利，可以讓單一

的頁面變得生動、復雜的頁面變得時尚，避免畫面出現生硬感,

不宜產生審美疲勞。

五、簡單切割構圖法

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

面，使頁面變得有趣、生動，使內容區域得到有效劃分。

六、流程構圖法

如果設計創意需要按照循序漸進的方式展現產品，那么不

妨采用流程構圖法。流程構圖法能夠將步驟、關系、各個節點

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

十足，并充滿趣味性。

七、放射構圖法

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

到導向的作用，讓整體頁面呈現出立體與空間感，畫面沖擊力

強，富有動感。

八、物體輪廓構圖法

物體輪廓構圖法主要適用于活動、節日或新品創意等專題。

我們可以根據專題的主要內容從整體上構建一個邊界或外形線,

形成一個大的輪廓，將內容巧妙地填充進去。物體輪廓構圖法

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

通過本章的學習，我們了解了視覺設計的定義，電商視覺

設計前的準備工

作，并掌握了電商視覺設計黃金構圖法。

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

重第一眼的感

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

視覺設計。電商視覺

設計近年來受到了國內各大企業和知名品牌的高度重視，

特別是在以淘寶天貓

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

效果也很明顯。歸納與

提高

3

《電子商務視覺設計（第2版）》教案

第2章電商網站視覺配色設計

教學內容

一、網店頁面的配色方案

二、網店頁面的配色誤區

三、網店的整體配色案例

【知識目標】

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

2.掌握色彩聯覺現象的定義。

教學要求3.了解網店風格的幾大形成要素。

4.了解網店頁面常見的配色誤區。

【技能目標】

學會網店的整體配色方法。

1.網店頁面的配色方案

教學重點2.網店頁面的配色誤區

3.網店的整體配色案例

1.網店頁面的配色方案

教學難點

2.網店的整體配色案例

教學方法講授法、案例法

課時數4課時

教學內容

第一節網店頁面的配色方案

4

《電子商務視覺設計（第2版）》教案

一、色搭原則七要素

1.漸進配色

2.對比配色

3.色調配色

4.近似配色

5.單重點配色

6.分隔式配色

7.夜配色

二、色彩的聯覺聚焦圖片

色彩的聯覺現象是人們感知色彩的一種經驗，在消費過程

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

們的視覺對于色彩的感知最為敏感，因此當他們在瀏覽購物網

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

要想聚焦消費者的目光，就需要根據消費者的認知習慣尋

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

用到與商品相關的視覺設計之中，這樣才能避免消費者因為色

彩而造成誤會，從而放棄對商品的進一步關注。

三、網店風格的形成要素

店鋪風格的形成要素主要包括店鋪的主要風格、產品的情

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

1.店鋪的主要風格

(1)簡約清爽型

(2)商業型

(3)炫酷型

(4)可愛型

(5)特色型

2.產品的情緒

(1)女裝風格

?韓式風格

?淑女風格

?嬉皮風格

?波西米亞風格

?田園風格

?民族風格

(2)男裝風格

?傳統風格

?商務休閑風格

?運動風格

?英倫風格

?時尚休閑風格

3.活動的主題氣氛

4.店鋪的包裝色彩

5.VI配色

(1)單色VI

5

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

(2)雙色VI

(3)多色VI

第二節網店頁面的配色誤區

一、色彩過多

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

但色彩數量的增加并不能與頁面的表現力成正比。在設計配色

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

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

二、背景和文字對比不強烈

背景與文字對比不強烈，則文字內容沒法突出，且昏暗的

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

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

的辨識度降低。

三、過分強調色彩的刺激度

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

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

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

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

第三節網店的整體配色案例

一、店鋪頁面主色設計

二、店鋪頁面文案配色設計

三、店鋪頁面輔色設計

通過本章的學習，我們了解了色搭原則七要素，掌握了色

彩聯覺現象的定

義，還了解了網店風格的幾大形成要素，以及網店頁面常

見的配色誤區。

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

消費者注意。因

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

用。大多數人對色彩

畫面的敏感度強于文字，同時色彩是通過人的印象或者聯

想來產生心理上的影

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

環境氣氛來滿足人們

各方面的要求。如何正確地進行視覺配色設計是電商視覺

設計者必備的技能。歸納與

提高

6

《電子商務視覺設計（第2版）》教案

第3章店鋪標志視覺設計

教學內容

一、徽標的設計

二、店標的設計

【知識目標】

1.了解店標的幾種設計形態。

2.掌握店標設計的七大技巧。

教學要求

3.熟練掌握店標的設計流程。

【技能目標】

能夠熟練設計店標。

1.店標設計的七大技巧

教學重點

2.店標的設計流程

1.店標設計的七大技巧

教學難點

2.店標的設計流程

教學方法講授法、案例法

7

《電子商務視覺設計（第2版）》教案

課時數2課時

教學內容

第一節店標的設計形態

從設計的表達形態來看，店標可以分為以下幾種。

1.中文文字型店標

中文文字型店標主要以文字單獨構成，適用于多種傳播方

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

好辨識也好記憶。

2.非中文型店標

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

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

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

3.組合型店標

組合型店標讓消賽者有一種中西結合、和國際接軌的大牌

感覺。在表達形式上，非中文的部分設計感比較強，視覺沖擊

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

4.圖形型店標

圖形型店標就是直接用圖形作為店標。這類店標上沒有什

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

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

5.圖文結合型店標

圖文結合型店標就是圖形與文字相結合的店標形式。這種

店標既具有圖形化的視覺沖擊力，又能清楚地表達店鋪品牌信

息。

第二節店標的設計技巧

1.設計要有造型

2.設計要有領導性

3.標志設計的統一性

4.標志的識別性

5.標志的時代性

6.標志的系統性

7.標志的延伸性

第三節不同行業的店標設計

1.表現柔美型

針對女性的行業和類目，多數要表現出女性的柔美與嬌媚。

2.表現陽剛型

針對男性的行業和類目，要重點表現男性的陽剛之美。

3.表現可愛型

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

的感覺

第四節店標的設計流程

8

《電子商務視覺設計（第2版）》教案

在設計店標前，首先要和客戶或領導進行溝通，對店標設

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

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

店標設計上要體現出水果店鋪的風格。經過分析和構思，首先

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

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

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

飾文字等。

通過本章的學習，我們了解了店標的幾種設計形態，掌握

了店標設計的七

大技巧，以及店標的設計流程。

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

店鋪標志。店鋪

標志包括徽標和店標。企業與品牌的視覺符號稱為徽標，

網店的標志稱為店標。

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

作用。優秀的店鋪標

志設計不僅能對網店起到美化作用，還可以強化消費者對

網店的記憶。同時，

高大上的徽標和店標也是網店品牌和實力的一種體現。

歸納與

提高

第4章店鋪首頁視覺設計

一、首頁視覺水平的四大指標

二、店招視覺設計

三、首焦輪播區視覺設計

四、商品陳列區視覺設計

五、茶葉店鋪首頁視覺設計案例

【知識目標】

1.了解首頁視覺水平的四大指標。

2.掌握店招視覺設計規范及技巧。

教學內容

教學要求

3.掌握首焦輪播區視覺設計技巧。

4.了解商品陳列區的布局設計。

【技能目標】

9

《電子商務視覺設計（第2版）》教案

能夠熟練設計店鋪首頁。

1.店招視覺設計

教學重點2.首焦輪播區視覺設計

3.商品陳列區的布局設計

1.店招視覺設計

教學難點2.首焦輪播區視覺設計

3.商品陳列區的布局設計

教學方法講授法、案例法

課時數4課時

教學內容

第一節首頁視覺水平的四大指標

一、首頁跳失率

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

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

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

頁面進行優化與調整。

二、首頁點擊率

首頁點擊率是商品在首頁展現后的被點擊比率，即首頁點

擊率:首頁點擊量?首頁展現量。通過首頁點擊率可以看出店

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

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

這時就需要優化店鋪中的商品、優化商品圖片和推廣標題或者

優化商品詳情頁面中的信息，讓商品的展現盡可能多地帶來點

擊量。

三、首頁人均點擊次數

首頁人均點擊次數是指在一段時間內人均點擊了多少次。

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

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

產品，那么訪客自然會離開。運營者要根據首頁人均點擊次數

來優化整體的導航，美化產品圖片，這對訪客的引導非常重要。

四、首頁平均停留時間

10

《電子商務視覺設計（第2版）》教案

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

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

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

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

第二節店招視覺設計

一、店招視覺設計規范

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

淘寶網為例來介紹店招的視覺設計規范。

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

寸為950像素X120像素，加上導航條高度30像素，共150像

素，可避免發布后導航不顯示的問題。

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

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

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

最大的效能。

在設計店招時要注意和導航條的風格進行統一，利用色彩、

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

的店鋪裝修風格。

二、店鋪名稱的藝術化處理

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

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

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

三、圖層樣式的應用

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

用就是對設計元素進行修飾和美化，實現色彩、質感與光澤上

的變化。

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

計元素添加內陰影、外發光等特殊的光澤效果，還可以營造立

體浮雕、圖案紋理等特殊效果。需要注意的是，導航條的設計

風格應當和店招乃至整個店鋪首頁的裝修風格一致，不能一味

地追求華麗而讓導航條顯得突兀、不協調。

第三節首焦輪播區視覺設計

一、設計聚焦消費者視線

首焦位置是消費者進入店鋪后第一時間看到的內容，如果

這部分內容能夠首先抓住消費者的眼球，就會大大提高其繼續

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

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

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

息內容也是這個板塊設計的重點。

二、構建設計圖三要素

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

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

的廣告文字。

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

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

色調和光影處理，能夠真實再現商品的色彩和品質，或者根據

背景和文字的風格和影調做過適當修飾。藝術化的文字編排在

首焦輪播區中顯得尤

11

《電子商務視覺設計（第2版）》教案

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

為關鍵的環節。

三、溶圖的應用規范

溶圖是用兩張或兩張以上的圖片拼合起來的一張圖片，構

圖嚴謹，細節處理得當。

在選擇溶圖時要注意，要么溶圖的色調與商品相似，要么

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

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

效果。

第四節商品陳列區視覺設計

一、營造視覺動線

在進行商品展示圖片的排列設計時，要首先使用整潔的排

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

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

力并產生疲倦感。

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

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

二、商品布局藝術化

商品照片的布局是影響商品陳列區整個版式的關鍵，也是

確立整個首頁風格的關鍵。為了吸引消費者的眼球，可以根據

商品的功能、外形特點、設計風格來對商品陳列區布局進行精

心的規劃與設計，將店鋪中的商品藝術化地展現出來。

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

1.方塊式布局

2.折線型布局

3.隨意型布局

第五節茶葉店鋪首頁視覺設計案例

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

通過本章的學習，我們了解了首頁視覺水平的四大指標，

店招視覺設計規

范及技巧，掌握了首焦輪播區視覺設計技巧，還了解了商

品陳列區的布局設計

方法。

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

作為品牌的門

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

商品和服務的綜合感受

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

新意直接關系到商品信

息的轉化率，因此在進行店鋪首頁視覺設計時要盡可能地

讓設計能夠聚集消費者

的注意力，提高商品信息的轉化率，這才是首頁視覺設計

要達到的重要目的。歸納與

提高

第5章商品詳情頁視覺設計

教學內容

一、商品主圖設計

二、商品細節展示區設計

三、商品功效簡介區設計

12

《電子商務視覺設計（第2版）》教案

四、女鞋商品詳情頁視覺設計案例

【知識目標】

1.了解商品主圖的設計規范。

2.掌握商品主圖的設計形式。

3.掌握商品細節展示區的設計技巧。

教學要求

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

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

【技能目標】

能夠熟練設計商品詳情頁。

1.商品主圖設計

教學重點2.商品細節展示區設計

3.商品功效簡介區設計

1.商品主圖設計

教學難點

2.商品細節展示區設計

教學方法講授法、案例法

課時數4課時

教學內容

第一節商品主圖設計

一、商品主圖的設計規范

淘寶網對商品主圖的尺寸和設計都提出了具體的要求和規

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

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

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

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

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

天貓商城的商品主圖設計規范與淘寶網不同，其規定商品

主圖尺寸為800像素x800像

13

《電子商務視覺設計（第2版）》教案

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

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

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

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

二、商品主圖的設計形式

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

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

類型。

1.展不商品的全貌

2.場景化的設計

3.拼接式設計

4.突出商品賣點

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

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

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

的點擊興趣和購買欲望。

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

（1）文案說明信息的表達形式要簡潔明了，要有引發消

費者產生點擊沖動的誘惑力。

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

第二節商品細節展示區設計

一、商品細節展示區的表現形式

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

計商品細節展示區時可以采用不同的表現形式。常見的表現形

式有以下兩種。

1.指示型表現形式

2.局部圖解型表現形式

二、商品細節展示區的通用設計方式

商品細節展示區通用的一種設計方式就是添加必要的文字

和素材。

1.利用文字對細節進行說明

2.素材讓細節展示更直觀

第三節商品功效簡介區設計

一、商品功效簡介區的設計規范

商品功效簡介區是商品詳情頁的一部分，其設計寬度受到

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

天貓和京東的商品詳情頁設計尺寸規范。

表1淘寶、天貓和京東的商品詳情頁設計尺寸規范

電商平臺商品詳情頁設計尺寸規范

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

750像素，加

淘寶網起來總寬度為950像素。如果關閉左側邊欄，就可

以顯示950像素寬，

否則只顯示750像素寬

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

新版頁面的寬度由

14

《電子商務視覺設計（第2版）》教案

750像素變為790像素

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

像素

商品功效簡介區的設計重點就是對商品的功效進行總結與

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

讀性。

二、修飾元素在設計中的重要性

在設計商品功效簡介區時，為了將商品功效表述得更加直

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

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

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

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

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

第四節女鞋商品詳情頁視覺設計案例

本節將結合前面所講的內容為一款女鞋設計商品詳情頁，

設計內容包括商品主圖、商品介紹等，要求設計的頁面要能清

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

通過本章的學習，我們了解了商品主圖的設計規范和設計

形式，掌握了商

品細節展示區的設計技巧，以及商品詳情頁各元素的設計

方法。

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

鋪后，首先進入

的便是詳情頁；所有頁面上有且僅有詳情頁承擔著下單購

買的職責；消費者在

購買前要對詳情頁仔細看、反復看，甚至對比看，才能決

定是否咨詢賣家、是

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

費者的實際問題，那

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

么店鋪，都要對商品

詳情頁進行重點設計。

歸納與

提高

15

《電子商務視覺設計（第2版）》教案

第6章高點擊率推廣圖片視覺設計

一、推廣圖片構圖法則

二、直通車圖片設計

三、鉆展圖設計

四、直播封面圖設計

五、聚劃算主圖設計

【知識目標】

1.掌握推廣圖片的構圖法則。

2.掌握直通車圖片設計的要點。

3.掌握鉆展圖設計的關鍵點。

教學內容

教學要求

4.掌握直播封面圖的設計原則。

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

【技能目標】

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

播封面圖和聚劃算主圖。

1.推廣圖片構圖法則

2.直通車圖片設計

教學重點3.鉆展圖設計

4.直播封面圖設計

5.聚劃算主圖設計

教學難點1.直通車圖片設計

16

《電子商務視覺設計（第2版）》教案

2.鉆展圖設計

3.直播封面圖設計

4.聚劃算主圖設計

教學方法講授法、案例法

課時數6課時

教學內容

第一節推廣圖片構圖法則

一、變化式構圖

變化式構圖又稱留白式構圖。設計者將商品圖安排在某一

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

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

二、對角線構圖

對角線構圖就是把商品圖安排在對角線上，利用畫面對角

線來整體統一畫面元素，同時也能使陪體與主體區分明顯。這

種構圖的特點是富有動感，活潑生動，容易產生線條的匯聚趨

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

三、對稱式構圖

對稱式構圖給人一種畫面平衡、穩定、商品突出的感覺，

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

四、平衡式構圖

平衡式構圖給人一種祥和、平靜的感覺，缺點是缺乏創新,

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

很多電商設計者都會選擇這種構圖方法。

五、緊湊式構圖

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

具有緊湊、細膩、微觀等特點。

六、X形構圖

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

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

位于視覺焦點之上。采用X形構圖能夠獲得嚴謹的美感，盡

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

感受到活力與激情。

第二節直通車圖片設計

一、圖片整體風格設計

17

《電子商務視覺設計（第2版）》教案

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

等因素來進行風格定位。設計時，要確定推廣的商品所針對的

消費群體，同時分析他們的喜好，以確定設計風格及顏色；分

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

的；分析他們的生活習慣，合理調整投放時間和策略，與競爭

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

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

1.運用適當的背景

2.保證圖片清晰度

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

4.巧用素材搭配

二、突出商品賣點的設計

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

能讓消費者從更多方面認識品牌，進一步增強消費者對品牌的

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

能促使消費者進行點擊。

第三節鉆展圖設計

一、博取眼球的創意設計

創意需要靈感和積累，并不是在短期內就能隨隨便便產生

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

轉換相機的位置，用不同的角度進行表現，便可以為鉆展圖帶

來不一樣的表現形式與視覺沖擊力。

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

設也能體現創意與吸引力。二、統一圖片設計風格

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

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

同時，圖片的設計也需要擁有統一的風格。

通過圖片背景的設計可以烘托出圖片的整體氛圍與設計風

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

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

確定重點表現元素

只有統一的圖片風格是不夠的，鉆展圖更重要的意義在于

通過圖片的設計對店鋪或商品進行推廣，從而帶來流量。搭配

適當的色彩、控制好相關元素的尺寸也是讓鉆展圖具有足夠吸

引力的關鍵。

在設計鉆展圖時，需要確定圖片的重點表現元素。

第四節直播封面圖設計

一、直播封面圖尺寸要求

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

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

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

像素。

二、直播封面圖設計原則

要想打造優質的直播封面圖，主播在設計封面圖時要遵循

以下原則。

1.符合直播主題

18

《電子商務視覺設計（第2版）》教案

2.封面圖要美觀、清晰

3.色彩要適當

4.不要妨礙重要內容的展現

5.禁用合成圖

6.拒絕不當信息

7.封面圖不要雷同

第五節聚劃算主圖設計

一、聚劃算主圖設計思路

聚劃算主圖的設計主要包括商品拍攝、商品背景、商品構

圖和詳情頁主圖四部分。

1.商品拍攝

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

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

2.商品背景

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

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

背景，也不建議出現水印。背景的選擇應該是為了襯托主題商

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

或漸變色背景。

3.商品構圖

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

色卡。盡量在主圖展示上不出現細節圖，否則只會喧賓奪主。

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

品和模特放在統一場景中進行拍攝，盡量不出現拼圖現象。

二、聚劃算主圖設計案例

本案例結合前面所講的內容為一款化妝品設計聚劃算主圖。

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

促銷方案，以及簡單的廣告詞來突出產品優勢，具體操作過程

略。

通過本章的學習，我們掌握了推廣圖片的構圖法則，直通

車圖片設計的要

點，鉆展圖設計的關鍵點，直播封面圖的設計原則，以及

聚劃算主圖的設計思

路與方法。

圖片是電商營銷的基礎與靈魂，尤其是推廣圖片，其設計

的重要性不言而

喻。可以說優質的推廣圖片是吸引流量、促進點擊、提高

轉化率的必需品，也

是視覺設計的關鍵點。

歸納與

提高

19

《電子商務視覺設計（第2版）》教案

第7章網店促銷活動頁視覺設計

教學內容

一、促銷廣告的黃金設計要素

二、不同發展階段的促銷廣告設計

【知識目標】

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

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

教學要求

3.掌握不同發展階段的促銷廣告設計方法。

【技能目標】

能夠熟練設計網店促銷廣告。

1.保證設計的基本美感

教學重點

2.營造促銷氛圍

20

《電子商務視覺設計（第2版）》教案

3.促銷廣告圖片的設計原則

4.不同發展階段的促銷廣告設計

1.保證設計的基本美感

教學難點

2.不同發展階段的促銷廣告設計

教學方法講授法、案例法

課時數3課時

教學內容

第一節促銷廣告的黃金設計要素

一、保證設計的基本美感

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

晰度。如果想使促銷廣告圖片更富吸引力與協調感，就要特別

注意以下四個方面。

1.平衡

2.勢能

3.集群

4.標簽分割

二、營造促銷氛圍

在設計促銷廣告時，除了促銷活動的本身內容以外，還可

以添加引導標簽、限制提示等元素，營造出更為濃郁的促銷氛

圍，進一步引導與促使消費者點擊促銷廣告圖片。

1.添加引導標簽

2.添加限制提示

三、促銷廣告圖片的設計原則

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

的設計還要遵循主題突出、風格統一與目標明確的設計原則。

1.主題突出

2.風格統一

3.目標明確

第二節不同發展階段的促銷廣告設計

一、發展初期——為打造爆款而促銷

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

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

手段。新店或許并沒有足夠的經濟實力去開展大規模的促銷活

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

廣告，打造爆款成為

21

《電子商務視覺設計（第2版）》教案

為店鋪引流的法寶。

為打造爆款而設計的促銷廣告主要需要表現單品的賣點以

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

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

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

二、發展中期——為品牌而促銷

在店鋪發展的中期階段，品牌的樹立起到了穩固店鋪發展

的作用。在這一基礎上，促銷活動應更具品牌宣傳的效應，相

應地促銷廣告也可以為品牌服務。

在為打造品牌店鋪設計促銷廣告圖片時，圖片展示標準的

建立能夠很好地展示店鋪中不同的商品，而且統一的表現形式

也能讓消費者形成對品牌的聯想。展示標準包括商品攝影、構

圖與字體使用等。

三、發展成熟期——為客戶而促銷

當店鋪發展到成熟階段以后，維系客戶已經成為這個階段

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

銷活動。老客戶對品牌已經有了一定的認知與信任度，抓住他

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

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

會員享有的一系列優惠政策，增強會員的歸屬感，幫助賣家維

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

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

感的。

通過本章的學習，我們掌握了如何營造促銷廣告的氛圍，

促銷廣告的三大

設計總則，以及不同發展階段的促銷廣告設計方法。

促銷活動幾乎是網店運營中最常見、最重要的內容，可以

說一個成功的店

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

接體現的手段就是視

覺，促銷活動的內容也只有通過視覺的表現才能更好地傳

遞給消費者。歸納與

提高

第8章移動端網店用戶體驗設計

教學內容

一、移動端網店的設計標準

二、移動端網店視覺設計

【知識目標】

教學要求

1.了解移動端網店的店標設計方法。

22

《電子商務視覺設計（第2版）》教案

2.掌握移動端網店的圖片尺寸標準和框架結構安排。

3.掌握移動端網店進行視覺設計的方法與技巧。

【技能目標】

1.學會設計移動端網店店標和圖片。

2.學會手機移動端店鋪裝修的視覺設計。

1.移動端網店的設計標準

教學重點

2.移動端網店視覺設計

1.移動端網店的設計標準

教學難點

2.移動端網店視覺設計

教學方法講授法、案例法

課時數3課時

教學內容

第一節移動端網店的設計標準

一、移動端網店店標設計

手機淘寶的店標適合采用圖形或字母組合的形式，一方面

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

面是店鋪頭上已經明確地標注了店鋪名稱，圖文結合和中英文

混合形式的店標不僅讓店標的構圖變得擁擠，還會讓人產生畫

蛇添足的感覺。

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

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

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

移動端網店還可以使用商品的實物照片作為店標，讓人一眼就

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

二、移動端網店圖片尺寸標準

為了規范設計，手機淘寶對圖片的發布尺寸做出了要求：

需在圖片上添加文字時，中文字號N30磅，英文和阿拉伯數字

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

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

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

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

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

23

《電子商務視覺設計（第2版）》教案

三、移動端網店框架結構安排

移動端網店和PC端網店一樣，也存在著頁面間的跳轉以

及頁面結構層級關系的安排與布置。這里所說的頁面不再是指

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

鋪各級界面。

賣家雖然可以不考慮圖標、按鈕等用戶界面（UI）設計,

也不必過多地考慮店鋪的結構組成，但需要注意在已有的框架

結構中添加能夠促進消費者購買的內容。此外，根據框架結構

層面給所添加的內容設置相應的商品或活動鏈接也尤為重要，

否則混亂的鏈接會導致店鋪框架結構變得很混亂，不被消費者

所理解，阻礙消費者的購買進程。

第二節移動端網店視覺設計

一、信息內容簡潔，便于快速傳播

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

息的呈現也會受限，如果信息量過多且不做取舍，只會導致信

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

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

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

收信息的關鍵。

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

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

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

無須進行縮放操作，只需伸出手指執行單一操作便可以進

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

因此，在進行手機移動端的店鋪視覺設計時，要簡化一切不必

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

這也是促進手機移動端店鋪銷量增加的有效手段之一。

三、整體設計風格首尾呼應

店鋪整體的裝修與設計風格需要做到首尾呼應，否則就不

利于店鋪完整設計風格的塑造。不同于PC端店鋪，手機移動

端店鋪屬于狹窄視覺展示，如果不依據店鋪品牌基調保持設計

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

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

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

在進行手機移動端店鋪的視覺設計時，最好采用較為鮮亮

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

能與淘寶平臺所提供的背景相融合，讓店鋪的整體設計風格更

加統一與完整。

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

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

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

閱讀的感受與體驗。

五、保持常換常新

手機移動端的視覺設計保持常換常新的狀態，不僅能夠滿

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

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

牌設計風格不變的基礎之上的。

24

《電子商務視覺設計（第2版）》教案

歸納與

提高

通過本章的學習，我們掌握了移動端網店的店標設計方法,

了解了移動端

網店的圖片尺寸標準和框架結構安排，還掌握了移動端網

店進行視覺設計的方

法與技巧。

移動端網店可以看作PC端的延續，在設計時更需要把握

“用戶體驗”這

一關鍵點。手機移動端網店是依附于智能手機這一平臺的,

而智能手機又讓人

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

端中其他應用軟件或

App一樣，在設計手機移動端店鋪頁面時要結合智能手機

平臺的特色設計出更

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

者的歡心。

25

《電子商務視覺設計（第2版）》教案

第9章手機移動端淘寶店鋪視覺設計

一、手機移動端淘寶店鋪首頁優化設計

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

三、手機淘寶店鋪詳情頁優化設計

四、家紡視覺設計案例實操

【知識目標】

1.掌握店招的優化設計方法。

2.掌握輪播圖片的優化設計方法。

3.掌握優惠券的優化設計方法。

教學內容

教學要求4.掌握商品分類導航及商品分類展示的優化方

法。

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

6.熟練掌握手機淘寶店鋪詳情頁的設計方法。

【技能目標】

能夠熟練地對手機移動端淘寶店鋪首頁和詳情頁優化

設計。

1.手機移動端淘寶店鋪首頁優化設計

教學重點

2.手機淘寶店鋪詳情頁優化設計

1.手機移動端淘寶店鋪首頁優化設計

教學難點

2.手機淘寶店鋪詳情頁優化設計

教學方法講授法、案例法

課時數4課時

教學內容

第一節手機移動端淘寶店鋪首頁優化設計

一、輪播圖片優化設計

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

動展示等內容。輪播圖內

26

《電子商務視覺設計（第2版）》教案

容要盡量簡潔，文字表現清晰，主次分明且能達到快速傳

播的目的，這是輪播圖片設計的要點。

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

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

度或先后順序對輪播圖片的位置進行相應的調整。二、優惠券

的優化設計

在進行視覺設計時，一般都將優惠券放在店招或輪播圖片

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

能夠注意到優惠券，只有這樣才能真正發揮其引流與促進轉化

的作用。

過于花哨的設計有時反而會讓優惠券淹沒在各種視覺元素

的沖擊之中。店鋪中的某些優惠活動也可以被設計成優惠券的

形式。有的優惠活動還設計了優惠券按鈕，讓消費者更有互動

參與感。

在優惠券上添加“立即領取”之類的視覺元素，可以在一定

程度上左右消費者的點擊行為，相對于沒有明顯按鈕引導的優

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

導航優化設計

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

或是優惠券板塊后便會出現分類導航板塊。在設計這個板塊時,

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

消費者面前，起到快速導航的作用。

四、商品分類展示優化設計

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

同，在手機移動端為了迎合目標群體求快、求便的心理，應當

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

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

或促銷的商品圖片形式呈獻，將全店最受歡迎或最優惠的商品

放在第一區，以促進手機移動端店鋪購買力的轉化。手機移動

端消費者較為關注店鋪新品與應季產品的發布，因此在商品分

類展示的第二區中可以對新品與應季產品進行展示。在在第三

區、第四區等區域中可以根據店鋪需求放置不同的商品。

商品分類展示區的分區不宜過多，商品分類展示的每一區

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

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

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

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

第二節電子數碼類商品店鋪首頁案例解析

在對手機移動端店鋪進行視覺設計時，賣家應注意保持色

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

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

配則無法達到這一目的。

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

調，其實也可以使用一些較為暗沉的色彩。例如，對于一些經

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

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

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

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

第三節手機淘寶店鋪詳情頁優化設計

27

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

一、詳情頁設計的FABE原則

FABE是一種通過四個關鍵環節來解答消費者訴求，且巧

妙地處理好消費者關心的問題，從而順利實現商品銷售訴求的

銷售模式，具體表現為四個方面。

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

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

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

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

商品的理由。

B——利益(Benefits)：以消費者利益為中心，告知并強

調消費者購買商品后會得到的利益，能夠激發消賽者的購買欲

望。

E----證據(Evidence)：指第三方認知、新聞輿論或技

術報告等信息，它們需要有足夠的權威性、客觀性、可靠性與

可見證性，這樣才能獲得消費者的信任。

在FABE原則的指引下，還需要做到以下六點具體內容,

讓商品描述變得更加符合網絡的銷售環境，從而增加消費者的

購買動力。

1.真實感

2.邏輯感

3.親切感

4.對話感

5.氛圍感

6.正規感

二、商品詳情頁的設計誤區

在設計商品詳情頁時，要注意避免以下幾個誤區，把握好

描述設計的尺度是促成消費者購買的重要前提。

1.切忌密不透風的文字說明

2.海報宣傳需凸顯商品的真實性

3.注意控制商品與關聯銷售商品圖片的數量

三、根據消費者的頁面平均停留時間設計

手機瀏覽的連貫性不如PC端，并且消費者在頁面中的平

均停留時間很短，所以在設計手機移動端的詳情頁面時，必須

做到簡單、直截了當。

在PC端商品詳情頁的開端可能會出現“新品推薦”“搭配

套餐''等信息，這些在手機移動端顯得不那么實用。手機移動

端必須在前三屏中對商品的賣點和重要信息進行清晰的描述，

因為過于煩瑣的其他關聯信息可能需要占用好幾屏的空間，每

占用一屏的空間便會使消費者多一次滑動操作，并且還有可能

看不到與商品相關的信息，讓其失去對商品的購買興趣，造成

流量跳失。

第四節家紡視覺設計案例實操

本案例結合前面所講的內容為一款空調被設計商品詳情頁,

設計內容包括商品首圖、商品介紹等，要求設計的頁面要能清

晰、準確地展示與說明空調被的特點。具體操作過程略。

歸納與

提高

通過本章的學習，我們掌握了店招、輪播圖片、優惠券的

優化設計方法，

商品分類導航及商品分類展示的優化方法，了解了店鋪詳

情頁設計的FABE

原則，還掌握了手機淘寶店鋪詳情頁的設計方法等。

28

《電子商務視覺設計（第2版）》教案

越來越多的消費者選擇通過手機移動端淘寶店鋪進行購物,

是因為手機移

動端店鋪所具備的特點給予了他們很好的用戶體驗，但是

這些特點并不足以讓

消費者決定購買，所以還需要對店鋪進行個性化且更為具

體的設計，對店鋪的

各個細節進行優化，營造出良好的銷售氛圍，讓消費者最

終被店鋪所吸引并產

生購買行為。

第10章手機移動端微店視覺設計

一、微店首頁優化設計

二、商品詳情頁優化設計

三、母嬰微店視覺設計案例構思

四、母嬰微店視覺設計案例實操

【知識目標】

1.掌握微店首頁的優化設計方法。

2.掌握商品詳情頁的優化設計方法。

教學內容

教學要求

3.根據母嬰微店視覺設計案例進行實戰練習。

【技能目標】

能夠熟練地進行手機移動端微店視覺設計。

1.微店首頁的優化設計

教學重點

2.商品詳情頁優化設計

1.微店首頁的優化設計

教學難點

2.商品詳情頁優化設計

教學方法講授法、案例法

課時數4課時

教學內容

29

《電子商務視覺設計（第2版）》教案

第一節微店首頁優化設計

一、首頁的框架設計

微店首頁主要由店鋪招牌、微店公告、焦點大圖、商品分

類與商品展示五部分構成。

1.店鋪招牌

首先，店主需要考慮的是店鋪招牌要給消費者傳達什么樣

的信息；其次，店主需要對店鋪風格進行定位，并使店鋪招牌

與其保持一致；再次，設計要簡潔明了，字數不要過多；最后,

店鋪招牌要突出主體，千萬不可喧賓奪主。

2.微店公告

微店公告常以文字來說明店鋪優勢、商品賣點、促銷信息

及服務內容等。只要是能增加消費者對店鋪的信任度且便于消

費者瀏覽的相關信息，店主就可以將其展示在微店公告中。不

過文字必須要簡潔、清晰，要讓消費者一看就懂，且不會消磨

其耐心。

3.焦點大圖

無圖不成焦點，焦點必須有圖片。可以說，焦點大圖也是

圖片內容的一種展現形式。具體來說，焦點大圖設計就是由一

張圖片或多張圖片自動輪流播放展示在首頁上。因為輪播圖片

是動態的，所以具有一定的視覺吸引力，容易引起消費者的注

,?O

4.商品分類

在微店首頁中，店主可以根據商品的特點將商品劃分為幾

大類，并根據類別對商品進行排列。

一般來說，如果消費者有需求，進入微店后他們首先會點

開首頁中的“商品分類”模塊，然后根據商品類型選擇符合自己

需求的區域，從中尋找所需的商品。商品分類的布局很重要，

店主要按照消費者的瀏覽和購買習慣對商品進行分類，以便消

費者能夠快速找到所需的商品，提高其購物體驗度。

5.商品展不

商品展示一般可以分為“熱賣商品”“店長推薦”和“全部商

品”三個模塊。

(1)熱賣商品

(2)店長推薦

(3)全部商品

二、清晰而準確的設計思路

消費者在看手機的時候會比較放松，如果微店頁面在短時

間內不能將其吸引住，那么他們會無情地離開，因此擁有一個

清晰而準確的設計思路是非常重要的。微店首頁的核心是模塊

化，官方對頁面板塊的數量也是有限制的，因此賣家要利用有

限的板塊創造更多的價值。

一般微店首頁是由店招、海報、分類入口、優惠券和單品

展示等部分組成的。三、遵守設計學的“七秒定律”

在設計學中有一條“七秒定律”，據專業機構研究發現，人

關注一個商品的時間通常為七秒，而這七秒內影響70%的人

購買的第一要素是色彩。

首先，同一板塊內不要超過3種顏色，這3種顏色可以看

作是主色、輔助色與點綴色。另外，賣家在設計首頁時可以多

使用萬能搭配色，如黑、白、灰等顏色。因為這些顏色比較百

搭，跟任何顏色搭配起來都會比較和諧，容易表現出高端的感

覺。背景色盡量以淺色調為主，因為在移動端上觀看，淺色的

背景色更能突出商品本身，使消費者的注意力集中

30

《電子商務視覺設計（第2版）》教案

在商品上。

四、注重細節設計

賣家在設計微店首頁時，還要注重細節上的設計，比如在

首頁上可以選取半身圖或局部特寫圖。因為微店首頁大多是以

“豆腐塊”的形式展現的，范圍確實有限，所以賣家在選擇圖片

時要盡量使用半身圖或局部特寫圖，以避免視覺上的不清晰。

如果全部都使用半身圖或特寫圖，那么微店頁面會顯得單調、

乏味，所以可以適當穿插一些全景圖，有意識地調整頁面的節

奏，使整個頁面更加和諧、活潑。

此外，在頁面面積較小的情況下，圖文搭配的巧妙排列能

讓頁面看起來更大，還能避免因為“亂''和"雜”而產生的廉價感。

第二節商品詳情頁優化設計

一、商品主圖的設計

在商品詳情頁中，商品主圖的設計尤為重要。因為消費者

在瀏覽商品時最先看到的圖片就是商品主圖，其基本尺寸要求

是640像素x640像素。在設計商品主圖時，圖片要清晰，主

題與背景要主次分明，圖片中的文字大小要適中、簡潔明了、

突出賣點，這樣商品主圖才會更加美觀、更能吸引消費者。

二、商品描述圖的設計

商品描述圖包括商品圖片和商品描述。在商品描述圖中，

適當的文字描述能夠起到吸引消費者、提高商品成交率的作用。

商品描述圖應與商品主圖、商品標題相契合，能夠真實地介紹

商品的屬性。

在進行商品描述時，文字內容要盡量簡短，突出商品的優

點、特點和賣點。商品描述頁面在重新排列、展示商品細節的

過程中只能利用文字和圖片這種靜態信息類的溝通方式。這就

要求店主在整個商品詳情頁面的布局中要注意一個關鍵點，那

就是闡述邏輯。

店主在設計圖文詳情時，要多圖少文。圖要美觀，文字描

述要與圖片相契合。文字最好是中文，字體不可過大，也不可

過小，可根據目標客戶來定。字體顏色盡量不要太亮，以免使

人產生一種視覺上的不舒適感。

第三節母嬰微店視覺設計案例構思

一、首頁設計布局規劃

①微店店招：在店招模塊中使用母嬰圖片進行展示，通過

漸隱效果來讓文字更加突出，讓店鋪主題更加明確。

②首頁導航：該區域導航設置清晰，設計簡潔明快。

③促銷廣告：該區域通過使用商品圖片與文字結合的方式

進行展示，能夠完整地表現出商品的特點和形象。

④特價專區：使用商品圖片搭配色調和外形和諧的標題文

字，并加入相應的鏈接按鈕，讓消費者能夠隨時進入其頁面了

解詳情。

二、主色調：高純度暖色調

1.頁面背景及設計元素配色：高純度色彩

31

《電子商務視覺設計（第2版）》教案

2.商品及輔助配色：類似色調

三、案例配色擴展

1.擴展配色：互補色系

2.擴展配色：同類色系

四、案例設計流程

①制作微店店招和導航

②制作微店促銷廣告

③制作微店特價專區

第四節母嬰微店視覺設計案例實操

母嬰微店視覺設計主要分為制作微店店招、首頁導航、促

銷廣告、特價專區四部分。一、制作微店店招

二、制作首頁導航

三、制作促銷廣告

四、制作特價專區

通過本章的學習，我們掌握了微店首頁、商品詳情頁的優

化設計方法，并

根據母嬰微店視覺設計案例進行了實戰練習。

無論是淘寶還是微店，店鋪視覺設計是否能夠吸引消費者

的眼球、是否能

夠突出自己商品的特色都是至關重要的。在微店中，頁面

位置有限，要想讓