湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1網(wǎng)站設(shè)計(jì)需求分析.......................................................................................................1

1.1網(wǎng)站建設(shè)背景....................................................................................................1

1.1.1客戶需求設(shè)計(jì).........................................................................................1

1.1.2目標(biāo)群體分析.........................................................................................2

1.1.3網(wǎng)站功能設(shè)計(jì).........................................................................................2

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì).....................................................................................................3

1.2.1網(wǎng)頁層次設(shè)計(jì).........................................................................................3

1.2.2交互邏輯設(shè)計(jì).........................................................................................3

2網(wǎng)站視覺設(shè)計(jì)...............................................................................................................4

2.1頁面版式設(shè)計(jì)....................................................................................................4

2.1.1網(wǎng)站首頁版式.........................................................................................4

2.1.2明星產(chǎn)品頁版式.....................................................................................6

2.1.3品牌故事頁版式.....................................................................................7

2.1.4團(tuán)隊(duì)介紹頁版式.....................................................................................9

2.1.5公司新聞頁版式...................................................................................10

2.1.6聯(lián)系我們頁版式...................................................................................11

2.1.7產(chǎn)品詳情頁版式...................................................................................12

2.1.8新聞內(nèi)容頁版式...................................................................................13

2.2頁面視覺元素設(shè)計(jì)..........................................................................................14

2.2.1網(wǎng)站配色設(shè)計(jì).......................................................................................14

3網(wǎng)站前端設(shè)計(jì).............................................................................................................15

3.1網(wǎng)頁高保真原型設(shè)計(jì)......................................................................................15

3.1.1網(wǎng)站首頁原型.......................................................................................15

3.1.2明星產(chǎn)品頁原型...................................................................................16

I

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.1.3品牌故事頁原型...................................................................................17

3.1.4團(tuán)隊(duì)介紹頁原型...................................................................................19

3.1.5公司新聞頁原型...................................................................................20

3.1.6聯(lián)系我們頁原型...................................................................................21

3.1.7產(chǎn)品詳情頁原型...................................................................................22

3.1.8新聞內(nèi)容頁原型...................................................................................23

3.2網(wǎng)頁動(dòng)態(tài)特效設(shè)計(jì)...........................................................................................24

3.2.1網(wǎng)頁動(dòng)態(tài)特效原型.................................................................................24

3.2.2網(wǎng)頁動(dòng)態(tài)特效實(shí)現(xiàn).................................................................................25

4設(shè)計(jì)總結(jié).....................................................................................................................26

參考資料.........................................................................................................................28

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

孔鳳春網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

1網(wǎng)站設(shè)計(jì)需求分析

1.1網(wǎng)站建設(shè)背景

孔鳳春（KOPHENIX）創(chuàng)立于清同治元年（公元1862年），孔鳳春前身“孔

記香粉號(hào)”在清河坊開張。后掌柜孔傳鴻得“鳳雀托夢(mèng)”將店名改為“孔鳳春”

并沿用至今。上世紀(jì)二、三十年代，孔鳳春進(jìn)入鼎盛期，營業(yè)額占化妝品行業(yè)

50%。經(jīng)過三個(gè)世紀(jì)，孔鳳春得到“非物質(zhì)文化遺產(chǎn)”稱號(hào)認(rèn)可。2011年，孔鳳

春榮獲商務(wù)部頒發(fā)的“中華老字號(hào)”稱號(hào)并接受授牌，成為中國國妝行業(yè)內(nèi)為

數(shù)不多的老字號(hào)碩果之一。2015年，由中華全國工商聯(lián)合會(huì)美容化妝品業(yè)商會(huì)

認(rèn)定孔鳳春品牌為“中華美業(yè)百年傳承品牌”。

選擇孔鳳春這個(gè)網(wǎng)站是因?yàn)樗前倌陣浕瘖y品品牌和其植物護(hù)膚的觀念。

孔鳳春主打的產(chǎn)品是植物精粹成分系列護(hù)膚品，還有百年產(chǎn)品鵝蛋粉之類的韓

粉系列。植物精粹系列所有有效成分都來至于天然植物，不添加酒精、激素、

治痘成分、紅標(biāo)防腐劑等傷害客戶肌膚的成分，所有產(chǎn)品都有經(jīng)過相關(guān)檢測(cè)和

適用才能投入市場(chǎng)，為使每一位客戶都能放心使用。

基于對(duì)孔鳳春這一品牌的了解，以及對(duì)國貨化妝品的喜愛而關(guān)注這個(gè)品牌

網(wǎng)站，并且發(fā)現(xiàn)網(wǎng)站的問題，為了將孔鳳春這個(gè)官方網(wǎng)站以更完美的形象展示

出給大家，樹立企業(yè)口碑，提高品牌的知名度。通過查詢孔鳳春的官方網(wǎng)站以

及旗艦店信息了解到孔鳳春背景資料，相關(guān)產(chǎn)品，視覺風(fēng)格，人群定位，對(duì)客

戶需求進(jìn)行分析調(diào)研，通過對(duì)大部分網(wǎng)站的功能設(shè)計(jì)和網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)，我將網(wǎng)

頁風(fēng)格定位自然簡(jiǎn)約。

1.1.1客戶需求設(shè)計(jì)

目前國內(nèi)消費(fèi)者對(duì)國貨的需求增加，“國潮”一詞頻頻上熱搜。年輕一代

消費(fèi)者已經(jīng)從心底樹立起民族身份認(rèn)同和文化自覺，開始對(duì)中國品牌和中國產(chǎn)

品產(chǎn)生濃厚興趣，這無疑給了國貨品牌更多的市場(chǎng)機(jī)遇?？坐P春抓住這個(gè)機(jī)遇，

產(chǎn)品包裝全面升級(jí)更符合現(xiàn)代消費(fèi)者審美。而如今，草本、花本以及中草藥成

分已經(jīng)成為了護(hù)膚品中的熱門成分。天然的自然植物萃取成分以及可食用的植

物原料提煉的成分能夠?yàn)樽o(hù)膚或者美容不當(dāng)導(dǎo)致的肌膚受損等問題提供有效的

解決方案。所以我的網(wǎng)站設(shè)計(jì)里植物精純系列產(chǎn)品較多，方便客戶的需求。網(wǎng)

站的風(fēng)格設(shè)計(jì)為一個(gè)簡(jiǎn)潔大方、自然舒心的風(fēng)格設(shè)計(jì)，采用的色調(diào)是冷色調(diào)。

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

（1）優(yōu)質(zhì)的體驗(yàn)感：為了讓客戶有更好的體驗(yàn)感，因該網(wǎng)頁在不呆板的前

提下盡量簡(jiǎn)潔化，讓客戶能一目了然就能看到品牌熱銷和推薦產(chǎn)品。

（2）優(yōu)質(zhì)的網(wǎng)站形象：可以讓客戶能夠?qū)ξ覀兊钠放凭W(wǎng)站有更深刻的了解，

成為我們的回頭客，美觀的產(chǎn)品圖必不可少，并且在適當(dāng)位置上添加修飾元素，

加強(qiáng)視覺沖擊。

（3）優(yōu)質(zhì)的產(chǎn)品和服務(wù)：綠色安全健康的產(chǎn)品以及適合各種人群的產(chǎn)品正

是大家所需求的東西，能讓客戶更加相信企業(yè)，增強(qiáng)對(duì)企業(yè)的信賴度。

1.1.2目標(biāo)群體分析

《騰訊國貨美妝報(bào)告》數(shù)據(jù)顯示，目前國貨美妝消費(fèi)群遍布70后至00后，

根據(jù)其特點(diǎn)及消費(fèi)習(xí)慣可劃分為嘗新黨、生活家、潮流家、真愛粉、品質(zhì)控及

跟隨者六大客群。以15歲-25歲為首的嘗新黨在選擇美妝產(chǎn)品時(shí)更注重消費(fèi)體

驗(yàn)及口碑推薦。對(duì)于她們來說，專業(yè)口碑種草及IP聯(lián)名爆款等創(chuàng)新營銷，能快

速捕捉其注意力、滿足其獵奇心。以輕熟齡女性為主的生活家則是國貨美妝的

中堅(jiān)力量，她們追隨潮流的同時(shí)，對(duì)于美妝的成分、設(shè)計(jì)包裝和性價(jià)比也同樣

嚴(yán)苛，對(duì)于她們來說，性價(jià)比及購買體驗(yàn)是選擇產(chǎn)品時(shí)的決定因素。

所以孔鳳春面向的消費(fèi)群體是15-30歲的年輕女性群體。品牌主張為“百

年傳承專注敏感肌膚”，產(chǎn)品賣點(diǎn)為以秉承百年古妝理念萃取自然植物原始特

性將植沁之精華結(jié)合現(xiàn)代工藝技術(shù)以傳統(tǒng)文化和現(xiàn)代技藝為產(chǎn)品載體詮釋養(yǎng)膚

與美妝新概念

1.1.3網(wǎng)站功能設(shè)計(jì)

孔鳳春網(wǎng)站主要實(shí)現(xiàn)的功能模塊有：

首頁：主要由導(dǎo)航欄、banner、春夏好物推薦、Pick超值心選套裝組成；

明星產(chǎn)品：展示品牌熱賣爆款；

品牌故事：由banner、傳承、匠心、品牌、發(fā)展五個(gè)模塊構(gòu)成；

團(tuán)隊(duì)介紹：展示團(tuán)隊(duì)核心人員；

公司新聞：展示公司新聞；

聯(lián)系我們：由公眾號(hào)、淘寶旗艦店、京東旗艦店、公司地址、郵編、咨詢

電話、新浪微博組成；

產(chǎn)品詳情頁：是產(chǎn)品的詳情頁，主要內(nèi)容是產(chǎn)品信息圖、產(chǎn)品名稱、產(chǎn)品

規(guī)格、產(chǎn)品功效、產(chǎn)品詳情，客戶可以點(diǎn)擊鏈接立即購買；

新聞內(nèi)容夜：是公司新聞的詳細(xì)內(nèi)容，主要由頁頭、面包屑導(dǎo)航、文章標(biāo)

題和正文內(nèi)容構(gòu)成。

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

1.2.1網(wǎng)頁層次設(shè)計(jì)

圖1網(wǎng)站層次設(shè)計(jì)

1.2.2交互邏輯設(shè)計(jì)

本網(wǎng)站最主要的人機(jī)交互方式是鼠標(biāo)點(diǎn)擊操作?？蛻粼跒g覽器中點(diǎn)擊網(wǎng)站

各頁面的文字鏈接或圖片按鈕，實(shí)現(xiàn)頁面間的跳轉(zhuǎn)。

本網(wǎng)站的每一個(gè)網(wǎng)頁，都有一個(gè)導(dǎo)航欄。導(dǎo)航欄上設(shè)有網(wǎng)站首頁、明星產(chǎn)

品、品牌故事、團(tuán)隊(duì)介紹、公司新聞、聯(lián)系我們等功按鈕，客戶點(diǎn)擊每個(gè)功能

可以前往網(wǎng)站的相應(yīng)模塊。

1)在網(wǎng)站首頁，有banner、春夏好物推薦、Pick超值心選套裝，客戶可

以了解到我們當(dāng)季首推產(chǎn)品，可以點(diǎn)擊產(chǎn)品圖片進(jìn)入詳情頁進(jìn)行購買。

2)在明星產(chǎn)品頁面里，客戶可以看見品牌熱銷產(chǎn)品，可以點(diǎn)擊產(chǎn)品圖片進(jìn)

入詳情頁進(jìn)行購買。

3)在品牌故事里有banner、傳承、匠心、品牌、發(fā)展五個(gè)模塊，目的就是

為了讓客戶更加的了解我們的品牌的歷程，讓客戶對(duì)我們的產(chǎn)品加以的信賴，

相信我們的產(chǎn)品是安全可靠有效的，是有品質(zhì)保障的。

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

4)在公司新聞頁面里，客戶可以看到公司歷年來的新聞、決策和大事，更

加深入的了解品牌。

5)在網(wǎng)站的聯(lián)系我們頁面中，客戶可以看到我們的淘寶、京東官方旗艦店，

讓客戶放心的進(jìn)入官方旗艦店購買我們的產(chǎn)品，也可以直接找到企業(yè)的聯(lián)系方

式，有公眾號(hào)、地址、電話，郵箱等方便客戶聯(lián)系我們。

2網(wǎng)站視覺設(shè)計(jì)

2.1頁面版式設(shè)計(jì)

2.1.1網(wǎng)站首頁版式

此頁為首頁線稿圖，主要部分為頂部導(dǎo)航和內(nèi)容部分。頂部最左側(cè)是logo，

右側(cè)是導(dǎo)航。第一部分為導(dǎo)航欄：導(dǎo)航欄里一共有六個(gè)模塊，客戶可以點(diǎn)擊不

同的分類導(dǎo)航，進(jìn)入不同的頁面。第二個(gè)板塊是banner：banner里放置了一些

產(chǎn)品展示圖和活動(dòng)宣傳圖，以便于吸引客戶的眼球，第三板塊展示的是主推產(chǎn)

品，每個(gè)模塊分別采用了不同的排版，都使用了一些裝飾元素，這樣讓我們的

標(biāo)題更醒目，產(chǎn)品也更突出，更貼合我們網(wǎng)站的主題。第四板塊是頁尾部分展

示了品牌的悠久歷史和返回頂部的按鈕。

孔鳳春網(wǎng)站首頁的線框圖采用RP軟件制作而成，可分為四步走，第一步把

頭部導(dǎo)航欄用矩形工具繪制在logo區(qū)，繪制了一個(gè)占位符導(dǎo)航區(qū)的文字，采用

文本標(biāo)簽實(shí)現(xiàn)；第二步，把banner區(qū)域用占位符繪出，用文本標(biāo)簽實(shí)現(xiàn)；第三

步，用矩形工具和文本標(biāo)簽規(guī)劃出不同的區(qū)域，再加圖片加入到對(duì)應(yīng)的模塊；

第四步是用文本標(biāo)簽和矩形工具來實(shí)現(xiàn)頁尾部分。

首頁代表的是品牌的門面，是至關(guān)重要的，客戶一進(jìn)去看到的就是首頁，

所以我在設(shè)計(jì)首頁的時(shí)候是希望客戶一進(jìn)來是能一眼知道我們品牌的理念和歷

史的，要給客戶帶來舒適美觀的瀏覽體驗(yàn)，能讓客戶一進(jìn)去就知道自己想要了

解的東西在哪里，讓客戶還有看下去的欲望，提高品牌的轉(zhuǎn)化率。banner部分

主要就是以產(chǎn)品圖和活動(dòng)圖進(jìn)行展示，是企業(yè)的招牌。我將品牌應(yīng)季主推的產(chǎn)

品陳列于首頁，既能提高產(chǎn)品的推廣效果，又能讓客戶選擇到更適合自己的產(chǎn)

品。

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖2首頁線框圖

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.2明星產(chǎn)品頁版式

此頁為明星產(chǎn)品頁的線框圖。主要分為三個(gè)小塊。第一個(gè)是頂部的導(dǎo)航欄，左側(cè)是網(wǎng)

站logologo展示的，是企業(yè)的文化與理念，logo位于頂端的左側(cè)，是最為醒目的，導(dǎo)航

欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗(yàn)。第二個(gè)是導(dǎo)航欄下面的產(chǎn)

品圖，這些都是選取品牌旗艦店最暢銷的六個(gè)產(chǎn)品進(jìn)行排列，便于客戶知道我們品牌最熱

銷的產(chǎn)品，客戶點(diǎn)擊圖片進(jìn)去，就會(huì)跳轉(zhuǎn)出產(chǎn)品的詳情頁，方便客戶更加了解這個(gè)產(chǎn)品，

客戶可以通過點(diǎn)擊立即購買跳轉(zhuǎn)到旗艦店對(duì)應(yīng)的產(chǎn)品頁進(jìn)行購買，更方便客戶的購買體驗(yàn)。

第三部分是頁尾部分，展示的是企業(yè)的歷史故事和返回頂部按鈕。

明星產(chǎn)品頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步，

把每個(gè)產(chǎn)品展示圖用圖片繪制。第三步是頁尾部分，用矩形工具和文本標(biāo)簽繪

制。

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖3明星產(chǎn)品頁線框圖

2.1.3品牌故事頁版式

此頁為品牌故事頁的線框圖。主要分為四個(gè)小塊。第一是導(dǎo)航區(qū)，方便客

戶切換頁面；第二是banner；第三是內(nèi)容區(qū)，主要是品牌傳承、匠心、發(fā)展的

故事；第四是頁尾區(qū)，有品牌故事和返回頂部按鈕。

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

品牌故事頁線框圖使用RP軟件制作而成，可分為四步，第一步用矩形畫出

導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步banner

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

區(qū)域用占位符繪制。第三步內(nèi)容部分，用矩形工具和文本標(biāo)簽分別排列出來；

第四步是頁尾部分，用矩形工具和文本標(biāo)簽繪制。

圖4品牌故事頁線框圖

2.1.4團(tuán)隊(duì)介紹頁版式

此頁為團(tuán)隊(duì)介紹頁的線框圖。主要分為三個(gè)小塊。第一個(gè)是頂部導(dǎo)航欄，

能讓客戶快速切換到自己想要的頁面。第二個(gè)是團(tuán)隊(duì)人員介紹區(qū)，都是品牌團(tuán)

隊(duì)的核心人員。第三部分是頁尾部分，展示的是企業(yè)的歷史故事和返回頂部按

鈕。

團(tuán)隊(duì)介紹頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步，

把每個(gè)成員的信息用圖片工具和矩形工具繪制排版。第三部分是頁尾部分，用

矩形工具和文本標(biāo)簽繪制。

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖5團(tuán)隊(duì)介紹頁線框圖

2.1.5公司新聞頁版式

此頁為公司新聞頁的線框圖。主要分為三個(gè)小塊。第一個(gè)是導(dǎo)航欄能讓客

戶快速切換到自己想要的頁面。第二個(gè)是新聞區(qū)，客戶點(diǎn)擊圖片進(jìn)去，就會(huì)跳

轉(zhuǎn)出新聞的具體內(nèi)容，使客戶更加了解品牌。第三部分是頁尾部分，展示的是

企業(yè)的歷史故事和返回頂部按鈕。

公司新聞頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步，

把每個(gè)新聞?dòng)脠D片和文本標(biāo)簽繪制。第三部分是頁尾部分，用矩形工具和文本

標(biāo)簽繪制。

圖6公司新聞頁線框圖

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.6聯(lián)系我們頁版式

此頁為聯(lián)系我們頁的線框圖。主要分為五個(gè)小塊。第一個(gè)是頂部的導(dǎo)航欄。

第二個(gè)是官方旗艦店，客戶可以通過點(diǎn)擊圖片跳轉(zhuǎn)到旗艦店，更方便客戶的購

買。第三個(gè)是公眾號(hào)，客戶可以掃描二維碼添加官方公眾號(hào)。第四個(gè)是聯(lián)系方

式，客戶可以通過相關(guān)的聯(lián)系方式從而聯(lián)系到我們。第五步是頁尾部分，展示

的是企業(yè)的歷史故事和返回頂部按鈕。

聯(lián)系我們頁的線框圖采用RP軟件制作而成，可分為五步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步，

將兩個(gè)官方旗艦店用圖片繪制。第三步公眾號(hào)部分，矩形工具圖片和文本標(biāo)簽

繪制。第四部分聯(lián)系方式是用圖片和文本標(biāo)簽繪制。第五步是頁尾部分，用矩

形工具和文本標(biāo)簽繪制。

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖7聯(lián)系我們頁線框圖

2.1.7產(chǎn)品詳情頁版式

此頁為產(chǎn)品詳情頁的線框圖。主要分為三個(gè)小塊。第一個(gè)是頂部的導(dǎo)航欄，

導(dǎo)航欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗(yàn)。第二個(gè)是

產(chǎn)品的詳細(xì)信息，有產(chǎn)品圖和產(chǎn)品信息可以讓客戶更加了解這個(gè)產(chǎn)品，客戶可

以通過點(diǎn)擊立即購買跳轉(zhuǎn)到旗艦店對(duì)應(yīng)的產(chǎn)品頁進(jìn)行購買，更方便客戶的購買

體驗(yàn)。第三部分是產(chǎn)品詳情圖，展示的是產(chǎn)品的一些具體信息和產(chǎn)品的賣點(diǎn)。

明星產(chǎn)品頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步把

每個(gè)產(chǎn)品信息用圖片和文本標(biāo)簽繪制。第三個(gè)產(chǎn)品詳情圖部分，用圖片工具繪

制。

圖8產(chǎn)品詳情頁線框圖

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.8新聞內(nèi)容頁版式

此頁為新聞內(nèi)容頁的線框圖。主要分為三個(gè)小塊。第一個(gè)是頂部的導(dǎo)航欄，

導(dǎo)航欄能讓客戶快速切換到自己想要的頁面，便于客戶的瀏覽體驗(yàn)。第二個(gè)是

面包屑導(dǎo)航，面包屑導(dǎo)航方便客戶返回上一個(gè)頁面，更加方便客戶瀏覽下一個(gè)

新聞頁面。第三個(gè)是新聞內(nèi)容頁，通過對(duì)標(biāo)題和正文內(nèi)容的排版，正文內(nèi)容中

加入了圖片能使客戶更有趣的瀏覽。

新聞內(nèi)容頁的線框圖采用RP軟件制作而成，可分為三步，第一步用矩形畫

出導(dǎo)航欄，在導(dǎo)航欄左側(cè)用一個(gè)logo的占位符，右側(cè)使用文本標(biāo)簽。第二步面

包屑導(dǎo)航區(qū)，用文本標(biāo)簽繪制。第三步是新聞內(nèi)容區(qū)，用文本標(biāo)簽和圖片繪制。

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖9新聞內(nèi)容頁線框圖

2.2頁面視覺元素設(shè)計(jì)

2.2.1網(wǎng)站配色設(shè)計(jì)

關(guān)于孔鳳春網(wǎng)站色彩設(shè)計(jì)與搭配主要是從網(wǎng)頁主色系里面選擇，主要從產(chǎn)

品包裝里面提取顏色，以及對(duì)產(chǎn)品的賣點(diǎn)，尤其是植物精粹這一部分，以及根

據(jù)它的性質(zhì)特點(diǎn)，然后進(jìn)行一定的定位，之后來進(jìn)行的色彩搭配，產(chǎn)品的特性

以及公司的理念都包含在色彩里面，選擇了合適的配色。提高網(wǎng)頁設(shè)計(jì)感。

圖10網(wǎng)站配色設(shè)計(jì)

主色使用白色，打造簡(jiǎn)約的風(fēng)格，輔助色：淺藍(lán)色象征天真、純潔、安定和

和平，而綠色象征清新、安全、舒適、生命、和平、寧靜、自然、生機(jī)，剛好

和孔鳳春的產(chǎn)品相吻合，三個(gè)顏色的交替，用來區(qū)分層次感，使客戶不會(huì)感覺

枯燥無味，提升瀏覽體驗(yàn)感。

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3網(wǎng)站前端設(shè)計(jì)

3.1網(wǎng)頁高保真原型設(shè)計(jì)

3.1.1網(wǎng)站首頁原型

孔鳳春網(wǎng)頁首頁設(shè)計(jì)的時(shí)候運(yùn)用了rp8來制作網(wǎng)頁的制作和美化，網(wǎng)站首頁

的功能主要是讓客戶在最短的時(shí)間內(nèi)了解網(wǎng)站的基本功能，所以在網(wǎng)站首頁時(shí)，

將網(wǎng)站首頁的內(nèi)容化繁為簡(jiǎn)，將導(dǎo)航欄和底部設(shè)計(jì)簡(jiǎn)化到極致，能讓客戶一目

了然，更加了解品牌。首頁中放置了產(chǎn)品推薦，是隨著季節(jié)放置我們的產(chǎn)品的，

能讓客戶對(duì)我們主推的產(chǎn)品有一個(gè)大致的了解，客戶也可以通過這里看見自己

的想要購買的產(chǎn)品，給客戶帶來便利性，增加客戶對(duì)品牌的好感度。

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖11網(wǎng)站首頁原型

3.1.2明星產(chǎn)品頁原型

對(duì)于明星產(chǎn)品頁，是依據(jù)網(wǎng)店銷售量進(jìn)行選取的，選取了天貓店熱銷的六

位產(chǎn)品作為明星產(chǎn)品進(jìn)行展示。作為老牌國貨的孔鳳春，同其他很多國貨美妝

品牌一樣不同，沒有走中國風(fēng)設(shè)計(jì)，反而是極簡(jiǎn)設(shè)計(jì)，這和孔鳳春的品牌理念"

極簡(jiǎn)護(hù)膚"相吻合。明星產(chǎn)品頁在于在保證了客戶了解了熱銷產(chǎn)品之后，在一定

程度對(duì)網(wǎng)頁美化與設(shè)計(jì)。熱銷產(chǎn)品能讓客戶快速方便快捷的了解到品牌的熱銷

產(chǎn)品以及是否是自己需要的。通過這樣的方式大大節(jié)省了客戶的時(shí)間，同時(shí)也

提升了客戶對(duì)店鋪的依賴，容易形成客戶對(duì)品牌的忠實(shí)度。并且通過網(wǎng)站的產(chǎn)

品和網(wǎng)店相互搭配，利用客戶對(duì)產(chǎn)品的親近感和依賴感，使得客戶點(diǎn)擊進(jìn)入我

們的網(wǎng)店，從而使客戶方便購買和對(duì)品牌了解更加深入，從而突出我們網(wǎng)站的

個(gè)性化特點(diǎn)，吸引客戶點(diǎn)擊進(jìn)入我們的網(wǎng)站，達(dá)到引流的目的，提高客戶的體

驗(yàn)質(zhì)量。通過這種簡(jiǎn)單的設(shè)計(jì)能最高效率讓客戶了解到我們的品牌。

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖12明星產(chǎn)品頁原型

3.1.3品牌故事頁原型

對(duì)于品牌故事頁，他的風(fēng)格與其他頁面有些不一樣，主要想用中國風(fēng)的元

素和背景突出孔鳳春“百年國貨”的特點(diǎn)，同時(shí)圖片和文字的排版是s型的，

象征著孔鳳春在歷史的長河中，即使經(jīng)過百年歲月的洗禮，依舊存在于大眾的

視野中，并且有了新的理念和適合現(xiàn)代人的產(chǎn)品。著重強(qiáng)調(diào)了孔鳳春歷史悠久

和其在新的機(jī)遇與挑戰(zhàn)下改革換新的精神。

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖13品牌故事頁原型

3.1.4團(tuán)隊(duì)介紹頁原型

對(duì)于團(tuán)隊(duì)介紹頁，我選取了團(tuán)隊(duì)核心人員來介紹，核心團(tuán)隊(duì)在企業(yè)的發(fā)展

過程中發(fā)揮著不可替代的重要作用，他們就像是一個(gè)企業(yè)的大腦，是整個(gè)企業(yè)

運(yùn)行的指揮者。他們能夠帶領(lǐng)企業(yè)走向正確的發(fā)展道路，他們優(yōu)秀的經(jīng)歷和豐

富的經(jīng)驗(yàn)可以讓客戶更加信賴我們，相信品牌具有無限的發(fā)展力，對(duì)品牌未來

的發(fā)展有期望，同時(shí)背景使用了植物來點(diǎn)綴，能讓客戶對(duì)我們的植物精粹概念

更加深刻。

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖14團(tuán)隊(duì)介紹頁原型

3.1.5公司新聞頁原型

對(duì)于公司新聞頁面，簡(jiǎn)潔明了的設(shè)計(jì)風(fēng)格，將公司的新聞?wù)R的排列出來，

井然有序，可以讓客戶感受體會(huì)到孔鳳春的定位與產(chǎn)品理念，頁面簡(jiǎn)介明了更

方便客戶瀏覽。

圖15公司新聞頁原型

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.1.6聯(lián)系我們頁原型

對(duì)于聯(lián)系我們頁面，簡(jiǎn)單自然的設(shè)計(jì)風(fēng)格，將孔鳳春的植物護(hù)膚理念展現(xiàn)

的淋漓盡致，同時(shí)也對(duì)圖片加入了植物邊框進(jìn)行裝飾，可以讓客戶馬上感受到

孔鳳春的定位與特色，從而更好的宣傳與推廣。

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖16聯(lián)系我們頁原型

3.1.7產(chǎn)品詳情頁原型

對(duì)于產(chǎn)品詳情頁面，清新淡雅的設(shè)計(jì)風(fēng)格讓人賞心悅目，將產(chǎn)品的重要的

信息提煉出來排列到產(chǎn)品圖片旁邊，更加方便顧客了解該產(chǎn)品，提升客戶使用

體驗(yàn)，從而更好的宣傳與推廣。在商品信息的下方有產(chǎn)品詳情圖，加深客戶對(duì)

該產(chǎn)品的了解度，提高產(chǎn)品的購買率，同時(shí)客戶可以通過點(diǎn)擊立即購買按鈕，

直接跳轉(zhuǎn)至淘寶旗艦店該產(chǎn)品的鏈接內(nèi)進(jìn)行購買，更加方便客戶，同時(shí)也達(dá)到

了對(duì)網(wǎng)店的引流效果。

圖17產(chǎn)品詳情頁原型

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.1.8新聞內(nèi)容頁原型

對(duì)于新聞內(nèi)容頁面，簡(jiǎn)單精致的設(shè)計(jì)風(fēng)格，體現(xiàn)了孔鳳春的極簡(jiǎn)護(hù)膚理念。

加入了面包屑導(dǎo)航方便用戶返回至企業(yè)新聞頁面，優(yōu)化了客戶的閱讀體驗(yàn)。對(duì)

文字區(qū)域進(jìn)行了精心的排版，并且插入了相關(guān)的圖片，使客戶瀏覽新聞時(shí)更加

有趣，不枯燥。

圖18新聞內(nèi)容頁原型

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.2網(wǎng)頁動(dòng)態(tài)特效設(shè)計(jì)

3.2.1網(wǎng)頁動(dòng)態(tài)特效原型

網(wǎng)頁動(dòng)態(tài)特效使用RP軟件實(shí)現(xiàn)。

動(dòng)態(tài)特效1：banner自動(dòng)輪播特效

圖20banner效果圖1

圖21banner效果圖2

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖22banner效果圖3

圖23banner效果圖4

圖24banner效果圖5

在首頁的banner里放置了五張圖，利用RP工具實(shí)現(xiàn)banner輪播效果。

先在RP軟件中建立建立動(dòng)態(tài)面板，把圖片導(dǎo)入進(jìn)動(dòng)態(tài)面板中，在屬性中選定

頁面載入時(shí)，再將數(shù)據(jù)填入，最終實(shí)現(xiàn)圖片輪播效果

3.2.2網(wǎng)頁動(dòng)態(tài)特效實(shí)現(xiàn)

Banner輪播特效制作步驟：

第一建立一個(gè)動(dòng)態(tài)面板并且為動(dòng)態(tài)面板命名為banner，在動(dòng)態(tài)面板中添加

五個(gè)不同的面板狀態(tài)。

第二畫五個(gè)橢圓按鈕，全選將其設(shè)為動(dòng)態(tài)面板，命名為跳轉(zhuǎn)。在動(dòng)態(tài)面板

中添加五個(gè)不同的面板狀態(tài)，分別為其命名為1、2、3、4、5。在五個(gè)頁面中分

別將對(duì)應(yīng)的橢圓換成空心的。

第二選中屬性欄里頁面載入時(shí)，選擇設(shè)置面板狀態(tài)，勾選banner和跳轉(zhuǎn)，

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

選擇狀態(tài)為Next，依次勾選向后循環(huán)，循環(huán)間隔為3000毫秒，首個(gè)狀態(tài)延時(shí)3000

毫秒后向后切換。設(shè)置進(jìn)入動(dòng)畫和退出動(dòng)畫為逐漸效果。

第四將五個(gè)熱區(qū)變?yōu)闄E圓按鈕大小，并覆蓋上去，點(diǎn)擊熱區(qū)，在屬性欄選

擇鼠標(biāo)移入時(shí)，勾選banner動(dòng)態(tài)面板頁面為Stater1和跳轉(zhuǎn)動(dòng)態(tài)面板頁面為1；

在鼠標(biāo)移除時(shí)，勾選banner和跳轉(zhuǎn)，選擇狀態(tài)為Next，依次勾選向后循環(huán)，循

環(huán)間隔為