網(wǎng)店裝修（第二版）學(xué)習(xí)情境六 教案

任務(wù)一自定義頁面策劃一

一、教學(xué)目標(biāo)

1、知識目標(biāo)

(1)了解網(wǎng)店自定義頁面的基礎(chǔ)理論知識。

(2)熟悉網(wǎng)店自定義頁面的主要類型。

2、技能目標(biāo)

(1)能正確理解自定義頁面的作用。

(2)能區(qū)分不同類型的自定義頁面

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個優(yōu)秀的自定義頁面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁面打

破了常規(guī)頁面的局限，給賣家?guī)砹烁嗟目刹僮餍?，越來越多的賣家通過發(fā)揮自定義頁面的創(chuàng)意

來展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁面的定義。

2、自定義頁面的主要類型。

3、自定義頁面的作用。

教學(xué)難點(diǎn)：1、區(qū)分自定義頁面的類型。

三、教學(xué)過程設(shè)計(jì)

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

展示網(wǎng)店電腦端首頁導(dǎo)航，網(wǎng)店首頁導(dǎo)航里除了一般的產(chǎn)看展示的網(wǎng)激發(fā)學(xué)生思

1、創(chuàng)設(shè)品分類之外，還有一些“特別”的頁面導(dǎo)航，這是屬于什店首頁導(dǎo)航，考，引出課程

情景引么頁面呢？思考特別的內(nèi)容

入課題頁面導(dǎo)航里

面有什么？

生先

讓學(xué)

行

一、認(rèn)識網(wǎng)店自定義頁面了解自定義

網(wǎng)店

自

了解

頁面的定義

的

頁面

自定義頁面又稱二級頁面，是網(wǎng)店裝修中的一個獨(dú)立定義

定義

頁面，目前電腦端和無線端的網(wǎng)店裝修后臺均可根據(jù)需求

增添數(shù)量不限的自定義頁面。自定義頁面是賣家圍繞某個

2、新課

主題焦點(diǎn)的一個內(nèi)容聚合頁，一般是文案、圖片、視頻等

講解

多種組合優(yōu)化美觀后的頁面，再配合商品詳情信息、活動

優(yōu)惠信息等鏈接，繼而增加頁面的訪問深度，也起到頁面

關(guān)聯(lián)和購物引導(dǎo)的作用。

能熟悉自定

生

自

讓學(xué)

義頁面的主對

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

二、自定義頁面的主要類型要類型，學(xué)習(xí)定義頁面的

加以區(qū)分。類型熟悉了

1）活動專題頁面解，加以區(qū)

活動專題頁面是賣家圍繞網(wǎng)店促銷活動的主題，結(jié)合店內(nèi)分，便于后面

的優(yōu)惠信息以圖文組合形式給消費(fèi)者詳細(xì)地展示促銷詳細(xì)的策劃

內(nèi)容的頁面。

2）品牌介紹頁面

為了消除消費(fèi)者的購買疑慮、提高消費(fèi)者的信任感，賣

家會添加品牌介紹頁面來傳播企業(yè)精神和品牌文化，從而

提高品牌信服力，樹立良好的企業(yè)形象

①品牌價值

②品牌故事

③品牌背書

④品牌愿景

3）會員活動頁面

會員活動頁面是向消費(fèi)者介紹會員積分的價值，展現(xiàn)會員

權(quán)益活動內(nèi)容的頁面。

4）售后服務(wù)頁面

售后服務(wù)頁面是向消費(fèi)者展示網(wǎng)店的發(fā)貨收貨服務(wù)、退換

貨服務(wù)、安裝服務(wù)、保修維修服務(wù)等一系列細(xì)致售后服務(wù)

信息的頁面。

認(rèn)識自定義

三、自定義頁面的作用頁面的作用

1）加深消費(fèi)者訪問深度

2）提高店鋪轉(zhuǎn)化率

3）提升消費(fèi)者粘度

在淘寶網(wǎng)上的10家網(wǎng)店首頁，進(jìn)入其自定義頁面，并分別搜索不同網(wǎng)通過搜索思

說出不同的自定義頁面屬于哪種類型。店的自定義考區(qū)分，提高

3、學(xué)生

頁面。學(xué)生對自定

實(shí)訓(xùn)

義頁面類型

的認(rèn)識。

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后1、自定義頁面的定義自己要掌握

小結(jié)2、自定義頁面的主要類型的知識點(diǎn)

3、自定義頁面的作用

任務(wù)一自定義頁面策劃二

一、教學(xué)目標(biāo)

1、知識目標(biāo)

（1）掌握自定義頁面的布局。

（2）掌握自定義頁面的策劃。

2、技能目標(biāo)

（1）能正確設(shè)計(jì)出自定義頁面策劃書。

（2）能根據(jù)策劃書布局自定義頁面模塊。

3、情感目標(biāo)

（1）培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

（2）培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個優(yōu)秀的自定義頁面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁面打

破了常規(guī)頁面的局限，給賣家?guī)砹烁嗟目刹僮餍裕絹碓蕉嗟馁u家通過發(fā)揮自定義頁面的創(chuàng)意

來展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁面的布局。

教學(xué)難點(diǎn)：1、自定義頁面策劃書的撰寫。

三、教學(xué)過程設(shè)計(jì)

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

請同學(xué)們翻出上節(jié)課所搜索到的自定義頁面，說說這些頁面的布局是怎樣觀察上節(jié)課激發(fā)學(xué)生

1、創(chuàng)設(shè)的？找到的自定思考。

問題引義頁面，思

入課題考其布局特

點(diǎn)。

一、自定義頁面的布局熟悉自定義為學(xué)生在

雖然現(xiàn)在很多店鋪的自定義頁面呈現(xiàn)出各種別具風(fēng)格的樣式，但實(shí)際上它頁面的布局下面的自

們的基本框架和組成部分都是有共性的。定義頁面

策劃中有

一般來說，無論是哪種類型的自定義頁面都由四大部分組成

明確的方

向。

2、新課

講解

3

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

頭部Banner圖+樓層模塊（至少一個）+背景+氛圍點(diǎn)綴物

以兩張不同的自定義頁面為案例，分別分析其布

局?

以某店鋪電腦端“雙旦禮遇季”活動專題頁面為例，

其布局為：雙旦禮遇季Banner圖一一優(yōu)惠券樓層

模塊一一活動主推產(chǎn)品樓層模塊一一明星單品樓

層模塊。再看看某店鋪無線端會員活動頁

某店鋪無線端會員活動頁其布局為：會員日

Banner圖一一會員分享抽獎活動樓層模塊。

自定義頁面布局中的樓層模塊沒有數(shù)

量的硬性要求，只要能滿足頁面信息的傳

4

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

達(dá),給予消費(fèi)者良好的體驗(yàn)感即可。

二、自定義頁面策劃書的撰寫

1、自定義頁面的設(shè)計(jì)流程

確定自定義頁面類型。

1

明確自定義頁面主題”

分析優(yōu)秀自定義頁面“熟悉自定義讓學(xué)生學(xué)

頁面的策劃會策劃自

P流程。定義頁面

撰寫自定義頁面策劃方案”的流程，有

明確的方

向才開始

1.確定自定義頁面類型設(shè)計(jì)。

本次任務(wù)是為店鋪推廣宣傳的“年貨節(jié)”促銷活動設(shè)計(jì)自定義頁面，

根據(jù)自定義頁面的類型定義，可確定該頁面為活動專題頁面類型。

2.明確自定義頁面主題

仔細(xì)分析年貨節(jié)活動營銷策劃方案，頁面主題是圍繞年貨節(jié)促銷活動

開展的，故“年貨節(jié)”為主題核心。為了讓頁面的主題標(biāo)語更打動人心，

可以結(jié)合店鋪產(chǎn)品屬性進(jìn)行構(gòu)思，該店鋪是一家專營生活日用品的網(wǎng)店，

所以最后確定自定義頁面的主題為“年貨家居好禮購”。

3.分析優(yōu)秀自定義頁面

分析知名電商網(wǎng)店的優(yōu)秀自定義頁面，了解其活動專題頁面的布局，

為自定義頁面方案策劃做好前提準(zhǔn)備。

4.撰寫自定義頁面策劃方案

根據(jù)自定義頁面的布局組成要求，在撰寫策劃方案前需明確樓層模塊

的數(shù)量以及內(nèi)容。結(jié)合本次自定義頁面的任務(wù)單內(nèi)容，可確定該頁面布局

中的樓層模塊共四個，分別為：優(yōu)惠券模塊、免單商品模塊、五折搶購模

塊、八折回饋模塊。

通過以上操作，最后策劃如下：

5

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

YIMI生活日用品店年貨節(jié)活動自定義頁面策劃書

頁面類型活動專題頁面

頁面主題年貨家居好禮購

頭圖Banner圖

主題：家居好禮購

優(yōu)惠券樓層模塊

滿50減5元，滿100減10元，滿300減5場

免單活動樓層模塊

參與活動商品：抽紙、保溫玻璃杯

頁面布局

五折搶購樓層模塊

參與活動商品：牙膏、紙巾筒、紙巾盒、洗發(fā)水

八折回饋樓層模塊

參與活動商品:飯盒、紙手帕、洗臉毛巾、玻璃杯、筷子套

裝、洗潔精

發(fā)布實(shí)訓(xùn)任務(wù)：為網(wǎng)店策劃會員活動頁根據(jù)上面的通過此任

任務(wù)要求：某電器網(wǎng)店已開張五周年，為回饋會員，該店鋪策劃了“五周知識點(diǎn)，完務(wù)的完成，

年會員日”會員活動，故需要為店鋪制作一張網(wǎng)店會員活動頁，請你根據(jù)成網(wǎng)店會員懂得如何

營銷策略資料，策劃該會員活動頁的方案?；顒禹摬邉澴珜懽远?/p>

營銷策略：書的撰寫。義頁面的

1、分享抽獎活動：(沒有弄清策劃書。

楚的地方可

分享店鋪給3位好友即可獲得一次抽獎機(jī)會。參看微課)

2、明星單品會員8.8折購：

(1)網(wǎng)紅懶人鍋(原價180)；(2)北歐風(fēng)烤箱(原價280)；

3、學(xué)生

實(shí)訓(xùn)(3)多功能養(yǎng)生壺(原價140)；(4)迷你電飯煲(原價220)；

3、積分兌換樂園：

(1)優(yōu)惠券兌換：99積分兌換3元優(yōu)惠券；199積分兌換5元優(yōu)惠券；299

積分兌換9元優(yōu)惠券；

(2)禮品兌換：1900兌換紅糖養(yǎng)生茶；2900積分兌換櫻花碗四件套；；

3900積分兌換小熊公仔；

(3)產(chǎn)品兌換：18999兌換加濕器；25999積分兌換養(yǎng)生壺；

注冊會員入口

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后

1.自定義頁面的布局。自己要掌握

小結(jié)

2.自定義頁面策劃書的撰寫。的知識點(diǎn)

6

任務(wù)二自定義頁面設(shè)計(jì)一

一、教學(xué)目標(biāo)

1、知識目標(biāo)

(1)了解網(wǎng)店自定義頁面的常見尺寸。

(2)熟悉網(wǎng)店自定義頁面的設(shè)計(jì)原則。

(3)熟悉自定義頁面的色彩搭配

2、技能目標(biāo)

(1)能合理運(yùn)用自定義頁面的設(shè)計(jì)原則。

(2)能靈活對不同類型的自定義頁面搭配合適色彩。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個優(yōu)秀的自定義頁面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁面打

破了常規(guī)頁面的局限，給賣家?guī)砹烁嗟目刹僮餍?，越來越多的賣家通過發(fā)揮自定義頁面的創(chuàng)意

來展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁面的設(shè)計(jì)原則。

2、自定義頁面的色彩搭配。

教學(xué)難點(diǎn)：1、區(qū)分不同類型自定義頁面的色彩搭配方法。

三、教學(xué)過程設(shè)計(jì)

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

展示一張優(yōu)秀的的自定義頁面，請同學(xué)們談?wù)勂湓O(shè)計(jì)優(yōu)秀觀察自定義激發(fā)學(xué)生思

1、創(chuàng)設(shè)

的地方在哪里？為什么？頁面,談?wù)勂淇?，引出課程

問題引

設(shè)計(jì)優(yōu)秀之內(nèi)容

入課題

處。

一、自定義頁面的常見尺寸了解自定義讓學(xué)生先行

頁面的電腦了解網(wǎng)店自

由于電腦和手機(jī)的屏幕大小不同，電腦端和無線端的

端和無線端定義頁面的

的尺寸常見尺寸

自定義頁面尺寸有所

不同。

1)電腦端自定義頁面的尺寸

2、新課

講解寬：950px/1920px

高：3000px?6000px(僅建議，具體根據(jù)頁面內(nèi)容決定)

2)無線端自定義頁面的尺寸

寬：640px/750px(根據(jù)無線端裝修后臺的不同模塊尺寸限讓學(xué)生對熟

悉自定義頁

面的設(shè)計(jì)原

7

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

制決定）則，為后面的

設(shè)計(jì)奠定基

高：1500px~5000px（僅建議，具體根據(jù)頁面內(nèi)容決定）熟悉自定義礎(chǔ)。

頁面的設(shè)計(jì)

二、自定義頁面的設(shè)計(jì)原則原則。

1）首尾呼應(yīng)

在設(shè)計(jì)自定義頁面時基本都是從上往下、從框架搭建到細(xì)

化細(xì)節(jié)的流程順序進(jìn)行的。在這個過程中，需要至少一個

的主要元素貫穿整體頁面。

2）協(xié)調(diào)統(tǒng)一

保證頁面里的模特、文案、點(diǎn)綴物、各種顏色、布局排版

以及所有這些元素匯聚在一起所組成的是同一種風(fēng)格，從

而達(dá)成視覺協(xié)調(diào)統(tǒng)一的目的。

3）層次分明

自定義頁面的層次主要涉及兩個方面的層次，一方面是信

息的層次級別有主次之分，另一方面是整個頁面的層次節(jié)

奏，如空間層次中的近景中景遠(yuǎn)景等，借此使頁面看起來

更立體。

三自定義頁面的色彩搭配

根據(jù)自定義內(nèi)容的需要，采用適合的色彩搭配，能準(zhǔn)確地

表達(dá)出相應(yīng)的主題內(nèi)涵。

活動專題頁的常見配色

活動專題頁面一般也會以暖色為主色調(diào)，如紅色、橙色、

黃色等，這種色調(diào)的運(yùn)用可以使頁面給人帶來熱情、興奮、認(rèn)識區(qū)分不

歡快的心理感受。同類型自定

活動專題頁面為了能與節(jié)日主題相呼應(yīng)，很多時候會選擇義頁面的色

節(jié)日代表色。彩搭配方案。

節(jié)日相關(guān)顏色

春節(jié)紅色金色中國紅

情人節(jié)紫色粉色紅色

婦女節(jié)玫紅色丁香色

兒童節(jié)鵝黃色天藍(lán)色綠色

中秋節(jié)普藍(lán)色紅色橙黃色

國慶節(jié)中國紅黃色

圣誕節(jié)紅色綠色白色

2、品牌介紹頁的常見配色

在設(shè)計(jì)品牌介紹頁時必須考慮品牌本身的風(fēng)格與色調(diào)。為

了讓消費(fèi)者在瀏覽品牌介紹頁的過程中，能深深地把店鋪

品牌形象烙在心間，品牌介紹頁的配色一般是挑選能代表

該品牌形象風(fēng)格的顏色。

3、會員活動頁的常見配色

會員活動頁的配色通常表現(xiàn)為以暖色調(diào)為主，同時采用對

比色或者間隔色的搭配，給人活潑輕松的感覺，從而襯托

會員活動氛圍。

除此配色方案外，也有一些店鋪為了深化會員對品牌的認(rèn)

知，在會員活動頁面的配色設(shè)計(jì)中融合能代表品牌形象風(fēng)

格的顏色。

4、售后服務(wù)頁的常見配色

8

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

售后服務(wù)頁的配色一般以冷色調(diào)為主，如：藍(lán)色、綠色等

等，或者運(yùn)用非彩色搭配，如黑字白底、白字黑底。

發(fā)布實(shí)訓(xùn)任務(wù)：搜索不同類通過分析，充

在淘寶網(wǎng)上搜索不同類型的自定義頁面，并嘗試分析其遵型的自定義分掌握自定

循了哪些設(shè)計(jì)原則以及運(yùn)用了怎樣的色彩搭配方案。頁面,并分析義頁面的設(shè)

3、學(xué)生其遵循了哪計(jì)原則和色

實(shí)訓(xùn)些設(shè)計(jì)原則彩搭配方案。

以及運(yùn)用了

怎樣的色彩

搭配方案

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

4、課后自己要掌握

1自定義頁面的設(shè)計(jì)原則。

小結(jié)的知識點(diǎn)

2、自定義頁面的色彩搭配。

9

任務(wù)二自定義頁面設(shè)計(jì)二

一、教學(xué)目標(biāo)

1、知識目標(biāo)

(1)了解網(wǎng)店自定義頁面的排版形式。

(2)熟悉網(wǎng)店自定義頁面的點(diǎn)綴元素。

(3)掌握自定義頁面的設(shè)計(jì)流程。

2、技能目標(biāo)

(1)能靈活對不同類型的自定義頁面運(yùn)用合適的排版形式。

(2)能合理運(yùn)用自定義頁面的點(diǎn)綴元素。

(3)能根據(jù)自定義頁面設(shè)計(jì)的計(jì)劃方案設(shè)計(jì)自定義頁面。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個優(yōu)秀的自定義頁面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁面打

破了常規(guī)頁面的局限，給賣家?guī)砹烁嗟目刹僮餍裕絹碓蕉嗟馁u家通過發(fā)揮自定義頁面的創(chuàng)意

來展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、自定義頁面的排版形式。

2、自定義頁面的點(diǎn)綴元素。

教學(xué)難點(diǎn)：1、區(qū)分不同類型自定義頁面的排版形式運(yùn)用。

2、自定義頁面的設(shè)計(jì)流程。

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

觀察在任務(wù)一實(shí)訓(xùn)中搜集到的自定義頁面，可發(fā)現(xiàn)其排版觀察自定義激發(fā)學(xué)生思

形式有很多種類型，那么什么樣的自定義頁面適合什么樣頁面的排版考，引出課程

的排版形式呢？形式,思考其內(nèi)容

1、創(chuàng)設(shè)

排版的不同

問題引

以及不同類

入課題

型的自定義

頁面適合何

種排版形式。

一、自定義頁面的排版形式了解不同的讓學(xué)生先行

排版形式適了解自定義

1)常規(guī)樓層形

合何種自定頁面的排版

常規(guī)樓層形的專題頁面比較簡潔利落，主要把控好背景顏義頁頁面。形式以及其

2、新課色要有深-淺-深-淺的層次節(jié)奏，每一個樓層模塊都是獨(dú)立適用情況，為

講解的，清晰明了，有利于信息閱讀。這種排版形式應(yīng)用比較后面的設(shè)計(jì)

廣泛，常用于品牌介紹頁或售后服務(wù)頁。奠定基礎(chǔ)。

大部分新手美工在設(shè)計(jì)活動專題頁面時也偏愛使用

常規(guī)樓層形排版，但為了打破常規(guī)樓層形排版過于單調(diào)的

局限，往往會在其基礎(chǔ)上做一些細(xì)微的演變，比如整體頁

10

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

面背景不做切割，只需在中間部分進(jìn)行分割，作獨(dú)立的樓

層模塊。

還有一種排版是在原來的基礎(chǔ)上，對某一塊樓層的內(nèi)

部進(jìn)行一些小變化。

2)“S”形

“S”形排版的自定義頁面，對比于常規(guī)樓層的排版形式

不會顯得枯燥呆板，而是給人輕松活潑的感覺，而且消費(fèi)

者閱讀起來也十分流暢。這種排版形式適用于不同類型的

自定義頁面。

3)“Z”形

“Z”形排版會比“S”形排版多了一份厚重感，更適合用

于男性化風(fēng)格的自定義頁面，比如汽車、男性護(hù)膚、游戲、

電子器械等類目的自定義頁面。

4)T字形

“1”字形排版的自定義頁面，給人呈現(xiàn)一種硬朗大氣的感

覺。這種形式的自定義頁面需要有高質(zhì)量模特大圖或產(chǎn)品

圖鎮(zhèn)樓才能避免背景搶鏡的情況。因此，“1”字形排版一

般情況很少用到，但對于那些追求獨(dú)特和個性化的賣家來

說，“1”字形排版是不錯的選擇。

5)自由排版形

自由排版形的自定義頁面適合用于高端路線的時尚服飾類

目，這種排版設(shè)計(jì)雖看上去簡潔干凈，但是對于設(shè)計(jì)師的

排版功力要求卻比較高，新手美工一般不太適合嘗試。

認(rèn)識自定義

二、自定義頁面的點(diǎn)綴元素

頁面的點(diǎn)綴

點(diǎn)綴元素的應(yīng)用較多地出現(xiàn)在活動專題頁或者會員活元素以及適

動頁，設(shè)計(jì)時在頁面背景上適當(dāng)?shù)卦黾狱c(diǎn)綴元素能有效地用情況。

烘托主題，活躍氣氛，比起空白干凈的背景更有吸引力一

些。

增加點(diǎn)綴元素的時候需要考慮是否與節(jié)日主題相匹

配，在頁面中加入一些與主題吻合的點(diǎn)綴元素，會讓消費(fèi)

者在瀏覽頁面時更有代入感。

節(jié)日點(diǎn)綴物元素

春節(jié)燈籠、對聯(lián)、炮竹煙花、紅包、中國結(jié)、書

法字體

端午節(jié)粽子、龍舟、竹、山水、水墨

七夕節(jié)愛心、絲帶、巧克力、手捧花、情書、花瓣、

蝴蝶結(jié)

中秋節(jié)月亮、月餅、玉兔、燈籠、夜空

圣誕節(jié)雪花、紅帽子、圣誕樹、雪人、圣誕老人、

禮物

三、自定義以頁面的設(shè)計(jì)計(jì)劃

熟悉自定義以設(shè)計(jì)案例

頁面的設(shè)計(jì)展示一份優(yōu)

11

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

流程。秀的自定義

分析策劃方案頁面設(shè)計(jì)的

流程，幫助學(xué)

生舉一反三。

明確風(fēng)格、配色、排版、點(diǎn)綴物、字體

搜索收集相關(guān)素材

Photoshop制作自定義頁面

1.分析策劃方案

(1)本次任務(wù)所設(shè)計(jì)的自定義頁面類型為活動主題頁面，

此類頁面要求主題鮮明，活動氛圍濃厚，且其包含的促銷

信息較多，所以在設(shè)計(jì)時須突出不同的促銷活動信息，最

大化地滿足不同消費(fèi)者的優(yōu)惠需求。

(2)頁面主題為：年貨家居好禮購。從這里可提取的信息

有：活動背景對應(yīng)的節(jié)日是春節(jié)，店鋪類目是生活用品類。

春節(jié)的節(jié)日特征是歡慶喜悅，生活用品類的特征則是給人

溫暖溫馨的感覺。通過主題標(biāo)語“好禮購”字樣可知店鋪

希望消費(fèi)者在瀏覽頁面時能將本店商品和贈送親朋戚友的

年貨禮物聯(lián)想在一起，從而萌生購買心理。

(3)從頁面的布局規(guī)劃圖可知，除了頭部Banner圖外，

樓層模塊一共有四個，分別對應(yīng)的促銷活動是：優(yōu)惠券、

免單活動、五折搶購、八折回饋。該頁面容納的優(yōu)惠信息

較多，故在設(shè)計(jì)時盡量使用統(tǒng)一協(xié)調(diào)的配色和元素，把多

個優(yōu)惠活動連接一起，讓活動主題貫穿頁面。

2.明確風(fēng)格、配色、排版、點(diǎn)綴物、字體

(1)風(fēng)格：根據(jù)策劃書的分析，初定YIMI生活日用品店

年貨節(jié)活動專題頁設(shè)計(jì)風(fēng)格以喜慶、熱鬧、動感為主。

(2)配色：選取暖色為主色調(diào)，再結(jié)合節(jié)日代表色表，最

終敲定頁面色彩為紅色、金黃色，營造活潑熱鬧的氛圍。

(3)排版：因優(yōu)惠活動和參與活動的商品較多，頁面排版

采用常規(guī)樓層形(局部自由排版)的形式。

(4)點(diǎn)綴物：本任務(wù)的頁面主題為年貨節(jié)，根據(jù)節(jié)日主題

12

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

點(diǎn)綴物代表所示，頁面中可加入燈籠、煙花爆竹、紅包等

具有春節(jié)特色的點(diǎn)綴元素。

(5)字體：頭部Banner圖的主標(biāo)題字體選用傳統(tǒng)韻律感

比較強(qiáng)的葉根友毛筆行書，與春節(jié)活動背景相呼應(yīng)。小標(biāo)

題和正文部分選用微軟雅黑字體。

3.搜索收集相關(guān)素材

四、自定義頁面設(shè)計(jì)

通過以上操作，最后設(shè)計(jì)自定義頁面如下：

■星濯特久去m護(hù)頭皮郵水

*:/,海飛絲去屑洗發(fā)水

/''3KSOOMI大存■持久去UM舟再*?1。*皮

新年你￥38.99

^223^^3

歐式創(chuàng)愚家用餐巾耐跑廉

木質(zhì)收納紙巾盒

?約*居?廳木《(8支

新年價：￥15.99

生優(yōu)惠專享先領(lǐng)券再購物2

年黃優(yōu)惠壽?]八年管優(yōu)?壽Tm年黃優(yōu)**'

5[3U

￡全年最低價免單推回家百

前兩名免單

瑞￥13.9

0mBi形多色的海卷紙同

振興圓形紙巾筒

*第11的號自住3t用射0*用4HSW

新年價：￥13.99

露是?10.9

港新口氣潸除牙斑牙骨

佳潔士美白牙膏

3006*0版美日酒*冰口燙日月統(tǒng)

新年你￥19.99

黑￥14.9踹￥19.9

發(fā)布實(shí)訓(xùn)任務(wù)：為網(wǎng)店設(shè)計(jì)會員活動頁根據(jù)上面的通過此任務(wù)

任務(wù)要求:請把任務(wù)一的自定義頁面策劃方案設(shè)計(jì)成圖片。知識點(diǎn)，完成的完成，懂得

3、學(xué)生制作規(guī)范：寬1920像素，高2500像素以上，jpg格式。網(wǎng)店會員活舉一反三設(shè)

實(shí)訓(xùn)動頁的設(shè)計(jì)。計(jì)不同類型

的自定義頁

頁面。。

本節(jié)課要掌握的重點(diǎn)：明白本節(jié)課

自己要掌握

4、課后1.自定義頁面的排版形式。

的知識點(diǎn)

小結(jié)2.自定義頁面的點(diǎn)綴元素。

3.自定義頁面的設(shè)計(jì)流程。

13

任務(wù)三自定義頁面上傳

一、教學(xué)目標(biāo)

1、知識目標(biāo)

(1)分別了解電腦端和手機(jī)端自定義頁面的上傳方法。

2、技能目標(biāo)

(1)能靈活上傳手機(jī)端自定義頁面。

3、情感目標(biāo)

(1)培養(yǎng)學(xué)生積極思考、大膽探索，舉一反三的能力。

(2)培養(yǎng)學(xué)生自主學(xué)習(xí)、協(xié)助學(xué)習(xí)的能力。

二、教學(xué)內(nèi)容分析

一個優(yōu)秀的自定義頁面能將商品信息和店鋪實(shí)力很好地傳達(dá)給顧客。網(wǎng)店的自定義頁面打

破了常規(guī)頁面的局限，給賣家?guī)砹烁嗟目刹僮餍?，越來越多的賣家通過發(fā)揮自定義頁面的創(chuàng)意

來展示店鋪的獨(dú)特性。

教學(xué)重點(diǎn)：1、電腦端和手機(jī)端自定義頁面的上傳方法。

教學(xué)難點(diǎn)：1、手機(jī)端自定義頁面的上傳以及熱區(qū)鏈接的設(shè)置。

三、教學(xué)過程設(shè)計(jì)

教學(xué)步

教師活動學(xué)生活動設(shè)計(jì)意圖

驟

展示網(wǎng)店后臺電腦端和手機(jī)端自定義頁面的裝修頁面觀察不同端激發(fā)學(xué)生思

1、創(chuàng)設(shè)提問：網(wǎng)店裝修后臺電腦端自定義頁面的裝修頁面和手機(jī)口的自定義考，引出課程

問題引端的截然不同，那么兩個不同端口的上傳方法會有所不同頁面的裝修內(nèi)容

入課題么？頁面,思考教

師問題。

電

腦端

一、電腦端自定義頁面的上傳了解讓學(xué)生先行

端

機(jī)

自

和

電腦端的自定義頁面和首頁的裝修基礎(chǔ)模塊大同小手了解電腦端

面

頁

上

定

異，所以兩者的上傳步驟大致相同。值得一提的是，在智義和手機(jī)端自

法

方

并

傳

能版的電腦端裝修平臺中，自定義頁面的某些基礎(chǔ)模塊新的定義頁面的

種

兩

情

區(qū)

增了同步功能。如圖下圖所示，寶貝推薦模塊、全屏寬圖分上傳方法。

況

模塊、雙列圖片模塊、文本鏈接模塊、圖文模塊、文本模。

塊、多端輪播模塊、全屏輪播模塊均能實(shí)現(xiàn)電腦端和無線

端的同步效果。但目前智能版的同步功能只支持電腦端自

定義頁面自動同步生成無線自定義頁面，不支持從無線端

同步到電腦端。

2、新課

智能版的同步功能方便于將設(shè)計(jì)好的電腦端自定義

講解

頁面上傳后直接同步生成無線端的