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

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

目錄

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

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

1.1.1客戶(hù)需求設(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)頁(yè)層次設(shè)計(jì).........................................................................................3

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

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

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

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

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

2.1.3品牌故事頁(yè)版式.....................................................................................7

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

2.1.5公司新聞頁(yè)版式...................................................................................10

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

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

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

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

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

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

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

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

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

I

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

3.1.3品牌故事頁(yè)原型...................................................................................17

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

3.1.5公司新聞頁(yè)原型...................................................................................20

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

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

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

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

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

3.2.2網(wǎng)頁(yè)動(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)頁(yè)設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

品產(chǎn)生濃厚興趣，這無(wú)疑給了國(guó)貨品牌更多的市場(chǎng)機(jī)遇。孔鳳春抓住這個(gè)機(jī)遇，

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

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

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

解決方案。所以我的網(wǎng)站設(shè)計(jì)里植物精純系列產(chǎn)品較多，方便客戶(hù)的需求。網(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)感：為了讓客戶(hù)有更好的體驗(yàn)感，因該網(wǎng)頁(yè)在不呆板的前

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

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

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

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

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

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

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

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

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

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

驗(yàn)及口碑推薦。對(duì)于她們來(lái)說(shuō)，專(zhuān)業(yè)口碑種草及IP聯(lián)名爆款等創(chuàng)新?tīng)I(yíng)銷(xiāo)，能快

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

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

嚴(yán)苛，對(duì)于她們來(lái)說(shuō)，性?xún)r(jià)比及購(gòu)買(mǎi)體驗(yàn)是選擇產(chǎn)品時(shí)的決定因素。

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

年傳承專(zhuān)注敏感肌膚”，產(chǎn)品賣(mài)點(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)的功能模塊有：

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

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

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

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

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

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

電話(huà)、新浪微博組成；

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

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

新聞內(nèi)容夜：是公司新聞的詳細(xì)內(nèi)容，主要由頁(yè)頭、面包屑導(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)頁(yè)層次設(shè)計(jì)

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

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

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

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

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

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

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

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

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

2)在明星產(chǎn)品頁(yè)面里，客戶(hù)可以看見(jiàn)品牌熱銷(xiāo)產(chǎn)品，可以點(diǎn)擊產(chǎn)品圖片進(jìn)

入詳情頁(yè)進(jìn)行購(gòu)買(mǎi)。

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

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

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

3

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

4)在公司新聞頁(yè)面里，客戶(hù)可以看到公司歷年來(lái)的新聞、決策和大事，更

加深入的了解品牌。

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

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

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

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

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

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

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

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

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

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

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

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

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

孔鳳春網(wǎng)站首頁(yè)的線框圖采用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)簽和矩形工具來(lái)實(shí)現(xiàn)頁(yè)尾部分。

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

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

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

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

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

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

品。

4

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

圖2首頁(yè)線框圖

5

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

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

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

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

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

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

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

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

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

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

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

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

制。

6

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

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

2.1.3品牌故事頁(yè)版式

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

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

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

7

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

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

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

8

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

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

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

圖4品牌故事頁(yè)線框圖

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

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

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

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

鈕。

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

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

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

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

9

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

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

2.1.5公司新聞頁(yè)版式

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

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

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

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

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

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

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

標(biāo)簽繪制。

圖6公司新聞頁(yè)線框圖

10

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

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

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

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

買(mǎi)。第三個(gè)是公眾號(hào)，客戶(hù)可以?huà)呙瓒S碼添加官方公眾號(hào)。第四個(gè)是聯(lián)系方

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

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

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

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

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

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

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

11

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

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

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

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

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

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

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

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

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

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

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

制。

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

12

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

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

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

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

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

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

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

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

出導(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)容頁(yè)線框圖

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

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

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

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

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

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

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

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

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

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

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

14

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

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

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

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

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

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

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

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

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

的想要購(gòu)買(mǎi)的產(chǎn)品，給客戶(hù)帶來(lái)便利性，增加客戶(hù)對(duì)品牌的好感度。

15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16

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

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

3.1.3品牌故事頁(yè)原型

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

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

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

視野中，并且有了新的理念和適合現(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品牌故事頁(yè)原型

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

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

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

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

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

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

更加深刻。

19

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

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

3.1.5公司新聞頁(yè)原型

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

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

方便客戶(hù)瀏覽。

圖15公司新聞頁(yè)原型

20

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

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

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

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

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

21

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

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

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

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

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

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

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

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

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

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

22

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

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

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

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

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

有趣，不枯燥。

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

23

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

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

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

網(wǎng)頁(yè)動(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

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

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

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

3.2.2網(wǎng)頁(yè)動(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)。

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

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

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

第二選中屬性欄里頁(yè)面載入時(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)畫(huà)和退出動(dòng)畫(huà)為逐漸效果。

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

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

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

環(huán)間隔為