福鼎白茶網(wǎng)站網(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用戶需求分析.......................................................................................1

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

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

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

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

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

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

2.1.2商品類目頁(yè)版式...................................................................................5

2.1.3商品詳情頁(yè)版式...................................................................................6

2.1.4品牌新聞頁(yè)版式...................................................................................8

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

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

2.2.2網(wǎng)站字體設(shè)計(jì).......................................................................................9

2.2.3導(dǎo)航欄目設(shè)計(jì).....................................................................................10

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

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

3.1.1網(wǎng)站首頁(yè).............................................................................................11

3.1.2商品類目頁(yè).........................................................................................13

3.1.3商品詳情頁(yè).........................................................................................14

3.1.4新聞資訊頁(yè).........................................................................................16

3.2網(wǎng)頁(yè)動(dòng)態(tài)特效實(shí)現(xiàn)....................................................................................17

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

參考資料.........................................................................................................................20

I

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

福鼎白茶網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)

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

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

“秋夜涼風(fēng)夏時(shí)雨，石上清泉竹里茶?！蔽覈?guó)自古以來(lái)就有飲茶的習(xí)慣，

中國(guó)是茶的故鄉(xiāng)，也是茶文化的發(fā)源地。中國(guó)茶的發(fā)現(xiàn)和利用已有四千七百多

年的歷史，且長(zhǎng)盛不衰，傳遍全球。如今的社會(huì)發(fā)展迅速，互聯(lián)網(wǎng)已經(jīng)成為我

們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?。在這種時(shí)代背景下，像淘寶、京東、拼多多

等B2C電子商務(wù)平臺(tái)也迎來(lái)了風(fēng)口，網(wǎng)上購(gòu)物已成為一種時(shí)尚和常態(tài)，茶葉也

不例外，消費(fèi)者在網(wǎng)上購(gòu)買茶葉很是方便。

在如今這個(gè)時(shí)代，幾乎每個(gè)企業(yè)都會(huì)有自己的官網(wǎng)，一方面是因?yàn)楝F(xiàn)在互

聯(lián)網(wǎng)時(shí)代的大環(huán)境所致；另一方面則是作為企業(yè)的門面和形象，起到宣傳效果，

最后實(shí)現(xiàn)產(chǎn)品下單轉(zhuǎn)化率，公司實(shí)現(xiàn)盈利的過(guò)程；那么創(chuàng)建一個(gè)企業(yè)官網(wǎng)的核

心要素就是要和自身產(chǎn)品掛鉤，要建立一個(gè)與自身企業(yè)文化與企業(yè)產(chǎn)品相關(guān)聯(lián)、

有特色的官網(wǎng)。

對(duì)于網(wǎng)站建設(shè)，首先要了解。我查詢了許多關(guān)于網(wǎng)站建設(shè)的相關(guān)資料，并

找尋了相同類目的官網(wǎng)進(jìn)行參考，對(duì)于福鼎白茶原來(lái)的官網(wǎng)也進(jìn)行了分析，結(jié)

果如下：第一，首頁(yè)整體架構(gòu)過(guò)于簡(jiǎn)單，對(duì)于一個(gè)官網(wǎng)來(lái)說(shuō)，首頁(yè)就相當(dāng)于它

的門面，是決定消費(fèi)者能否有興趣繼續(xù)往下看的根本原因，但是福鼎白茶原官

網(wǎng)內(nèi)容太過(guò)稀少，導(dǎo)致給人的第一印象并不理想，自然沒(méi)有繼續(xù)瀏覽下去的欲

望；第二，內(nèi)容太過(guò)空洞，無(wú)論是首頁(yè)還是分類頁(yè)，內(nèi)容整體沒(méi)有層次感，顯

得過(guò)于空洞和敷衍；第三，對(duì)于自身品牌企業(yè)文化比較輕描淡寫(xiě)。以上就是原

官網(wǎng)云鼎白茶所出現(xiàn)的問(wèn)題，希望本次畢業(yè)設(shè)計(jì)能夠真正解決原官網(wǎng)的毛病，

從而設(shè)計(jì)出一個(gè)簡(jiǎn)約、內(nèi)容豐富、視覺(jué)效果恰當(dāng)?shù)母６Π撞韫倬W(wǎng)。

1.1.1用戶需求分析

一個(gè)網(wǎng)站的建設(shè)是否到位，不是我說(shuō)了算，也不是你說(shuō)了算，而是客戶說(shuō)

了算，能否把你所想要傳達(dá)的信息精準(zhǔn)而有效的傳達(dá)給消費(fèi)者，成了重中之重。

福鼎白茶主要針對(duì)的消費(fèi)受眾是35—60歲的經(jīng)濟(jì)條件較優(yōu)渥的男性客

戶，根據(jù)此類客戶群體，我們需要設(shè)計(jì)出高端、沉穩(wěn)、且又內(nèi)容豐富的門戶類

網(wǎng)站，這樣才能讓更多的客戶相信福鼎白茶品牌的產(chǎn)品，減少跳失率的同時(shí)提

1

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

高轉(zhuǎn)化率，同時(shí)可以通過(guò)本網(wǎng)站宣傳品牌，使消費(fèi)者對(duì)該品牌有所了解，形成

品牌粘性，從而增加回購(gòu)率。

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

福鼎白茶官網(wǎng)主要包括以下功能：

1.制作一張與網(wǎng)站主題相關(guān)的結(jié)構(gòu)思維圖。

導(dǎo)航欄條目包括：首頁(yè)、關(guān)于我們、合伙人招聘、茶山定制、產(chǎn)品系列、

新聞中心、聯(lián)系我們。

2.使導(dǎo)航欄的每個(gè)子欄目都得以表現(xiàn)

3.將網(wǎng)站內(nèi)容元素效果得以實(shí)現(xiàn)。

如導(dǎo)航欄的按鈕顯示

4.添加相對(duì)應(yīng)的頁(yè)面和菜單使其網(wǎng)頁(yè)特色更加豐富。

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

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

網(wǎng)站結(jié)構(gòu)按照內(nèi)容覆蓋范圍大小劃分為:首頁(yè)、關(guān)于我們、合伙人招聘、

茶山定制、產(chǎn)品系列、新聞中心、聯(lián)系我們7個(gè)部分。

效果如下圖圖1所示。

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

2

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

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

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

在頁(yè)面版式設(shè)計(jì)中，我所使用的軟件工具是AdobePhotoshopCC2018、Adob

eIllustrator2018以及AxureRP這三個(gè)軟件來(lái)完成本模塊的頁(yè)面版式設(shè)計(jì)。

所謂的頁(yè)面版式設(shè)計(jì)就是構(gòu)造一個(gè)大概的框架圖，而后來(lái)的視覺(jué)設(shè)計(jì)則是用來(lái)

點(diǎn)綴，有錦上添花的效果。頁(yè)面版式設(shè)計(jì)我首先根據(jù)參考資料和其它同類目品

牌的官網(wǎng)與自身品牌進(jìn)行分析手繪出了一副草圖，再運(yùn)用AxureRP軟件進(jìn)行網(wǎng)

頁(yè)低保真線框圖的制作，這樣能夠使自己的邏輯思維更加清晰，也為下一步進(jìn)

行視覺(jué)設(shè)計(jì)打基礎(chǔ)。

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

圖2為福鼎白茶網(wǎng)站首頁(yè)版式圖，此版式設(shè)計(jì)圖大致可分為四個(gè)部分：

第一部分包括Logo、導(dǎo)航欄、聯(lián)系電話等系列小圖標(biāo)，這一部分的設(shè)計(jì)是

讓消費(fèi)者能夠更加方便清晰的瀏覽官網(wǎng)內(nèi)的子欄目；第二部分是Banner、滾動(dòng)

橫幅海報(bào)，主要目的是為了通過(guò)其banner巨大顯眼的特點(diǎn)起到引人矚目的效果，

以圖片的形式宣傳和推廣品牌文化；第三部分是對(duì)品牌內(nèi)容的介紹和產(chǎn)品的推

薦，也就是首頁(yè)的主干；最后第四部分底部則是引導(dǎo)區(qū)域，相當(dāng)于一個(gè)底部的

導(dǎo)航欄，但是內(nèi)容更加豐富。

利用Axure-RP軟件制作主頁(yè)的布局線框，分為三個(gè)步驟：第一步根據(jù)規(guī)

范計(jì)算每個(gè)區(qū)域的大??；第二步，用占位符和矩形顯示圖片和內(nèi)容的對(duì)應(yīng)部分

第三步是輸入相應(yīng)的文本。效果如下圖2所示。

3

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

圖2網(wǎng)站首頁(yè)版式線框圖

4

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

2.1.2商品類目頁(yè)版式

圖3為福鼎白茶網(wǎng)站商品類目頁(yè)版式圖，主要分為logo、導(dǎo)航欄、Banner、

產(chǎn)品分類導(dǎo)航欄、產(chǎn)品展示以及底部引導(dǎo)欄。商品類目頁(yè)主要是展示產(chǎn)品的多

樣化，同時(shí)給產(chǎn)品分類，讓消費(fèi)者能夠準(zhǔn)確瀏覽到自己想要的信息，其產(chǎn)品圖

構(gòu)圖方式采用了比較常用的中心構(gòu)圖法，將其放在了視覺(jué)中心的位置，使得比

較顯眼突出。

商品類目頁(yè)版式低保真線框圖的制作使用的軟件是Axure-RP軟件，可以

分為四步：第一步計(jì)算出每個(gè)位置占用的大??；第二步給圖片占用的位置用占

位符和矩形表現(xiàn)出來(lái)；第三步將其他的小按鈕及圖標(biāo)標(biāo)示出來(lái)；第四步加入底

部引導(dǎo)按鈕并將其一一對(duì)應(yīng)整齊。

5

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

2.1.3商品詳情頁(yè)版式

圖4商品詳情頁(yè)版式線框圖

圖4為福鼎白茶網(wǎng)站商品詳情頁(yè)版式圖，主要部分為頂部導(dǎo)航欄、Banner、

產(chǎn)品分類導(dǎo)航欄、當(dāng)前網(wǎng)頁(yè)定位、商品宣傳圖展示、商品細(xì)節(jié)參數(shù)展示以及底

部引導(dǎo)欄等。產(chǎn)品詳情頁(yè)就是要讓消費(fèi)者了解該產(chǎn)品，對(duì)該產(chǎn)品產(chǎn)生興趣，最

后形成購(gòu)買的全過(guò)程，所以只有抓住消費(fèi)者的心理的“痛點(diǎn)”，才能夠把流量

變成較高的轉(zhuǎn)化率。

商品詳情頁(yè)版式線框圖利用AxureRP軟件制作，可以分為四步：第一步計(jì)

6

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

算出圖片與文字覆蓋的大?。坏诙接谜嘉环途匦螌⑵鋱D片和詳情信息表現(xiàn)

出來(lái)；第三步是將圖標(biāo)和按鈕加上；第四步則是加上底部引導(dǎo)按鈕并排列整齊。

效果如上圖圖4所示。

7

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

2.1.4品牌新聞頁(yè)版式

圖5新聞資訊頁(yè)版式線框圖

8

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

圖5為福鼎白茶網(wǎng)站品牌新聞頁(yè)版式圖，分別有頂部導(dǎo)航欄、Banner、產(chǎn)

品分類導(dǎo)航欄、當(dāng)前網(wǎng)頁(yè)定位、新聞資訊圖文結(jié)合區(qū)域以及底部引導(dǎo)欄等。新

聞資訊區(qū)域采用了左右結(jié)構(gòu)的構(gòu)圖方式，給人一種清晰明朗的感覺(jué)。文字部分

層次分明、結(jié)構(gòu)清晰，閱讀起來(lái)也更加的方便。品牌新聞頁(yè)版式保真線框圖使

用AxureRP軟件制作，主要分為四步：第一步確定每張圖片所占用的大小以及

所處的位置；第二步用矩形和占位符的方式將圖片和詳情表現(xiàn)出來(lái)；第三步繪

制出文字段落；第四步則是加上引導(dǎo)按鈕并排列整齊。效果如上圖圖5所示。

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

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

福鼎白茶網(wǎng)站是以淡綠色、白色和黑色為主色調(diào)，白色主要是用于其網(wǎng)頁(yè)

背景，使其保持簡(jiǎn)約風(fēng)，黑色用于字體設(shè)計(jì)，使其字體更加顯眼，而淡綠色用

于底部的引導(dǎo)按鈕背景，顯得清新淡雅；輔助色運(yùn)用了黃色和玫紅色等暖色調(diào)，

用于點(diǎn)綴，也能使人眼前一亮。

福鼎白茶網(wǎng)站在頁(yè)面布局上簡(jiǎn)潔卻不空洞，給人一種“麻雀雖小，五臟俱

全”的感覺(jué)，能夠很好的給客戶展示出想要的效果。效果如下圖圖7示。

圖7網(wǎng)頁(yè)配色規(guī)范圖

2.2.2網(wǎng)站字體設(shè)計(jì)

網(wǎng)站的標(biāo)準(zhǔn)字采用了“方正準(zhǔn)圓簡(jiǎn)體”此外，在品牌新聞、產(chǎn)品詳情頁(yè)等

頁(yè)面部件中使用了黑體、微軟雅黑這些字體。

網(wǎng)站正文文本字體大小為5.5px，在banner廣告圖、品牌定制、品牌故事

等頁(yè)面因?qū)嶋H情況需要將字體變大并加粗，使其更加顯眼。效果如下圖圖8所

9

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

示。

圖8網(wǎng)頁(yè)字體規(guī)范圖

2.2.3導(dǎo)航欄目設(shè)計(jì)

導(dǎo)航欄目的設(shè)計(jì)采用的是最常見(jiàn)的頂部導(dǎo)航欄，頂部導(dǎo)航欄可以使網(wǎng)頁(yè)的

每個(gè)欄目清晰的展現(xiàn)給消費(fèi)者，使消費(fèi)者能夠迅速瀏覽到他們想看的內(nèi)容。頂

部導(dǎo)航這樣的設(shè)計(jì)形式較為簡(jiǎn)潔但是邏輯條理清晰。效果如下圖圖10所示。

圖10網(wǎng)頁(yè)圖標(biāo)規(guī)范圖

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

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

在網(wǎng)頁(yè)高保真原型頁(yè)面設(shè)計(jì)中，我所利用的軟件工具是AdobePhotoshopCC

2018來(lái)完成本模塊的原型設(shè)計(jì)。

10

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

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

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

11

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

網(wǎng)站首頁(yè)的設(shè)計(jì)思路：

首頁(yè)的設(shè)計(jì)首先是頂部的店招，店招分為三部分：左邊的logo、中間的導(dǎo)

航欄和右上角的電話號(hào)碼。店招背景簡(jiǎn)單的選取了白色，簡(jiǎn)約風(fēng)使得整體顯得

簡(jiǎn)單又清晰，店招的作用是讓客戶更清晰的認(rèn)識(shí)到網(wǎng)站，方便他們?yōu)g覽與篩選

網(wǎng)站信息。店招的下方緊接著是滾動(dòng)banner，滾動(dòng)banner能夠很好的利用視覺(jué)

營(yíng)銷讓消費(fèi)者迅速的了解該品牌。滾動(dòng)banner的下方是新聞中心，通過(guò)這些企

業(yè)新聞也能讓客戶對(duì)企業(yè)有一個(gè)更全面的了解。新聞中心的下方是產(chǎn)品系列，

簡(jiǎn)而言之就是產(chǎn)品大概的一個(gè)展示，也是客戶最關(guān)注的一部分，所以將它放在

了中間。下方放了一張圖片將內(nèi)容隔開(kāi)使其不那么擁擠，接著最后就是公司簡(jiǎn)

介，對(duì)公司的背景進(jìn)行了一個(gè)介紹，并運(yùn)用了左右構(gòu)圖的構(gòu)圖方式，整體結(jié)構(gòu)

也顯得十分清晰。最后底部引導(dǎo)按鈕背景色使用了冷色調(diào)的天藍(lán)色，能夠給人

一種很舒適的感覺(jué)，引導(dǎo)按鈕同樣也是給頂部導(dǎo)航欄的一個(gè)補(bǔ)充。

首頁(yè)整體效果大方簡(jiǎn)潔，符合產(chǎn)品特色，同樣也能讓客戶產(chǎn)生購(gòu)買欲。效

果如上圖圖11所示。

12

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

3.1.2商品類目頁(yè)

圖12商品類目頁(yè)高保真原型圖

商品類目頁(yè)主要是方便消費(fèi)者尋找自己想看的產(chǎn)品，同樣的也可以讓他們

更好的了解我們的產(chǎn)品。

運(yùn)用了中心構(gòu)圖的方式，使頂部店招和中間的產(chǎn)品分類以及底部引導(dǎo)按鈕

都位于視覺(jué)中間，給消費(fèi)者良好的視覺(jué)效果。而其banner和底部按鈕底色為通

版也不會(huì)太突兀，大方得體，一目了然。效果如上圖圖12所示。

13

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

3.1.3商品詳情頁(yè)

圖13商品詳情頁(yè)高保真原型圖

商品詳情頁(yè)主要的目的是為了方便消費(fèi)者更好的了解該產(chǎn)品，從而讓消費(fèi)

14

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

者達(dá)到購(gòu)買的目的。

商品詳情頁(yè)的主要內(nèi)容為：logo、導(dǎo)航欄、電話號(hào)碼、banner、產(chǎn)品分類

導(dǎo)航、產(chǎn)品主圖、產(chǎn)品介紹以及底部引導(dǎo)按鈕。其頂部導(dǎo)航欄banner等與官網(wǎng)

一樣，詳情頁(yè)主要在于其產(chǎn)品介紹。產(chǎn)品介紹這一部分主要分為：產(chǎn)品焦點(diǎn)圖、

產(chǎn)品信息圖和產(chǎn)品細(xì)節(jié)圖。這樣的順序無(wú)疑是從簡(jiǎn)到繁，滿足了消費(fèi)者的心理。

效果如上圖圖13所示。

15

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

3.1.4新聞資訊頁(yè)

圖14新聞資訊頁(yè)高保真原型圖

16

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

新聞資訊頁(yè)為企業(yè)最新的新聞動(dòng)態(tài)資訊，主要分為：logo、導(dǎo)航欄、電話

號(hào)碼、banner、新聞分類導(dǎo)航、新聞資訊以及底部引導(dǎo)按鈕。

其頂部導(dǎo)航欄banner等與官網(wǎng)一樣，其新聞分類導(dǎo)航放在了banner下方

的正中央，使其更加顯眼。新聞資訊板塊采用了左右結(jié)構(gòu)的構(gòu)圖方式，使其整

體看來(lái)?xiàng)l理比較清晰。

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

網(wǎng)頁(yè)動(dòng)態(tài)特效是使用JavaScript實(shí)現(xiàn)。

動(dòng)態(tài)特效1：鼠標(biāo)點(diǎn)擊導(dǎo)航欄右上角電話號(hào)碼，網(wǎng)頁(yè)標(biāo)題將自動(dòng)跳轉(zhuǎn)成官網(wǎng)

電話號(hào)碼。效果如下圖所示：

圖15LOGO特效原型圖與效果圖

動(dòng)態(tài)特效2：鼠標(biāo)移入產(chǎn)品圖片時(shí)，則觸發(fā)特效代碼并顯示效果：產(chǎn)品圖片

擴(kuò)大1.2倍并增加虛化效果。效果如下圖所示：

圖16友情鏈接特效原型圖與效果圖

17

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

部分特效代碼如下圖所示：

圖18