湖南商務職業技術學院畢業設計

目錄

1網站設計需求分析....................................................................................................1

1.1網站建設背景..............................................................................................1

1.1.1用戶需求分析.......................................................................................1

1.1.2網站功能設計.......................................................................................2

1.2網站結構設計..............................................................................................2

1.2.1網頁層次設計.......................................................................................2

2網站視覺設計............................................................................................................3

2.1頁面版式設計..............................................................................................3

2.1.1網站首頁版式.......................................................................................3

2.1.2商品類目頁版式...................................................................................5

2.1.3商品詳情頁版式...................................................................................6

2.1.4品牌新聞頁版式...................................................................................8

2.2頁面視覺元素設計......................................................................................9

2.2.1網站配色設計.......................................................................................9

2.2.2網站字體設計.......................................................................................9

2.2.3導航欄目設計.....................................................................................10

3網站前端設計..........................................................................................................10

3.1網頁高保真原型設計................................................................................10

3.1.1網站首頁.............................................................................................11

3.1.2商品類目頁.........................................................................................13

3.1.3商品詳情頁.........................................................................................14

3.1.4新聞資訊頁.........................................................................................16

3.2網頁動態特效實現....................................................................................17

4設計總結..................................................................................................................18

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

I

湖南商務職業技術學院畢業設計

福鼎白茶網站網頁設計

1網站設計需求分析

1.1網站建設背景

“秋夜涼風夏時雨，石上清泉竹里茶。”我國自古以來就有飲茶的習慣，

中國是茶的故鄉，也是茶文化的發源地。中國茶的發現和利用已有四千七百多

年的歷史，且長盛不衰，傳遍全球。如今的社會發展迅速，互聯網已經成為我

們日常生活中不可或缺的一部分。在這種時代背景下，像淘寶、京東、拼多多

等B2C電子商務平臺也迎來了風口，網上購物已成為一種時尚和常態，茶葉也

不例外，消費者在網上購買茶葉很是方便。

在如今這個時代，幾乎每個企業都會有自己的官網，一方面是因為現在互

聯網時代的大環境所致；另一方面則是作為企業的門面和形象，起到宣傳效果，

最后實現產品下單轉化率，公司實現盈利的過程；那么創建一個企業官網的核

心要素就是要和自身產品掛鉤，要建立一個與自身企業文化與企業產品相關聯、

有特色的官網。

對于網站建設，首先要了解。我查詢了許多關于網站建設的相關資料，并

找尋了相同類目的官網進行參考，對于福鼎白茶原來的官網也進行了分析，結

果如下：第一，首頁整體架構過于簡單，對于一個官網來說，首頁就相當于它

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

網內容太過稀少，導致給人的第一印象并不理想，自然沒有繼續瀏覽下去的欲

望；第二，內容太過空洞，無論是首頁還是分類頁，內容整體沒有層次感，顯

得過于空洞和敷衍；第三，對于自身品牌企業文化比較輕描淡寫。以上就是原

官網云鼎白茶所出現的問題，希望本次畢業設計能夠真正解決原官網的毛病，

從而設計出一個簡約、內容豐富、視覺效果恰當的福鼎白茶官網。

1.1.1用戶需求分析

一個網站的建設是否到位，不是我說了算，也不是你說了算，而是客戶說

了算，能否把你所想要傳達的信息精準而有效的傳達給消費者，成了重中之重。

福鼎白茶主要針對的消費受眾是35—60歲的經濟條件較優渥的男性客

戶，根據此類客戶群體，我們需要設計出高端、沉穩、且又內容豐富的門戶類

網站，這樣才能讓更多的客戶相信福鼎白茶品牌的產品，減少跳失率的同時提

1

湖南商務職業技術學院畢業設計

高轉化率，同時可以通過本網站宣傳品牌，使消費者對該品牌有所了解，形成

品牌粘性，從而增加回購率。

1.1.2網站功能設計

福鼎白茶官網主要包括以下功能：

1.制作一張與網站主題相關的結構思維圖。

導航欄條目包括：首頁、關于我們、合伙人招聘、茶山定制、產品系列、

新聞中心、聯系我們。

2.使導航欄的每個子欄目都得以表現

3.將網站內容元素效果得以實現。

如導航欄的按鈕顯示

4.添加相對應的頁面和菜單使其網頁特色更加豐富。

1.2網站結構設計

1.2.1網頁層次設計

網站結構按照內容覆蓋范圍大小劃分為:首頁、關于我們、合伙人招聘、

茶山定制、產品系列、新聞中心、聯系我們7個部分。

效果如下圖圖1所示。

圖1網頁層次設計圖

2

湖南商務職業技術學院畢業設計

2網站視覺設計

2.1頁面版式設計

在頁面版式設計中，我所使用的軟件工具是AdobePhotoshopCC2018、Adob

eIllustrator2018以及AxureRP這三個軟件來完成本模塊的頁面版式設計。

所謂的頁面版式設計就是構造一個大概的框架圖，而后來的視覺設計則是用來

點綴，有錦上添花的效果。頁面版式設計我首先根據參考資料和其它同類目品

牌的官網與自身品牌進行分析手繪出了一副草圖，再運用AxureRP軟件進行網

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

行視覺設計打基礎。

2.1.1網站首頁版式

圖2為福鼎白茶網站首頁版式圖，此版式設計圖大致可分為四個部分：

第一部分包括Logo、導航欄、聯系電話等系列小圖標，這一部分的設計是

讓消費者能夠更加方便清晰的瀏覽官網內的子欄目；第二部分是Banner、滾動

橫幅海報，主要目的是為了通過其banner巨大顯眼的特點起到引人矚目的效果，

以圖片的形式宣傳和推廣品牌文化；第三部分是對品牌內容的介紹和產品的推

薦，也就是首頁的主干；最后第四部分底部則是引導區域，相當于一個底部的

導航欄，但是內容更加豐富。

利用Axure-RP軟件制作主頁的布局線框，分為三個步驟：第一步根據規

范計算每個區域的大??；第二步，用占位符和矩形顯示圖片和內容的對應部分

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

3

湖南商務職業技術學院畢業設計

圖2網站首頁版式線框圖

4

湖南商務職業技術學院畢業設計

2.1.2商品類目頁版式

圖3為福鼎白茶網站商品類目頁版式圖，主要分為logo、導航欄、Banner、

產品分類導航欄、產品展示以及底部引導欄。商品類目頁主要是展示產品的多

樣化，同時給產品分類，讓消費者能夠準確瀏覽到自己想要的信息，其產品圖

構圖方式采用了比較常用的中心構圖法，將其放在了視覺中心的位置，使得比

較顯眼突出。

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

分為四步：第一步計算出每個位置占用的大小；第二步給圖片占用的位置用占

位符和矩形表現出來；第三步將其他的小按鈕及圖標標示出來；第四步加入底

部引導按鈕并將其一一對應整齊。

5

湖南商務職業技術學院畢業設計

2.1.3商品詳情頁版式

圖4商品詳情頁版式線框圖

圖4為福鼎白茶網站商品詳情頁版式圖，主要部分為頂部導航欄、Banner、

產品分類導航欄、當前網頁定位、商品宣傳圖展示、商品細節參數展示以及底

部引導欄等。產品詳情頁就是要讓消費者了解該產品，對該產品產生興趣，最

后形成購買的全過程，所以只有抓住消費者的心理的“痛點”，才能夠把流量

變成較高的轉化率。

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

6

湖南商務職業技術學院畢業設計

算出圖片與文字覆蓋的大小；第二步用占位符和矩形將其圖片和詳情信息表現

出來；第三步是將圖標和按鈕加上；第四步則是加上底部引導按鈕并排列整齊。

效果如上圖圖4所示。

7

湖南商務職業技術學院畢業設計

2.1.4品牌新聞頁版式

圖5新聞資訊頁版式線框圖

8

湖南商務職業技術學院畢業設計

圖5為福鼎白茶網站品牌新聞頁版式圖，分別有頂部導航欄、Banner、產

品分類導航欄、當前網頁定位、新聞資訊圖文結合區域以及底部引導欄等。新

聞資訊區域采用了左右結構的構圖方式，給人一種清晰明朗的感覺。文字部分

層次分明、結構清晰，閱讀起來也更加的方便。品牌新聞頁版式保真線框圖使

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

所處的位置；第二步用矩形和占位符的方式將圖片和詳情表現出來；第三步繪

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

2.2頁面視覺元素設計

2.2.1網站配色設計

福鼎白茶網站是以淡綠色、白色和黑色為主色調，白色主要是用于其網頁

背景，使其保持簡約風，黑色用于字體設計，使其字體更加顯眼，而淡綠色用

于底部的引導按鈕背景，顯得清新淡雅；輔助色運用了黃色和玫紅色等暖色調，

用于點綴，也能使人眼前一亮。

福鼎白茶網站在頁面布局上簡潔卻不空洞，給人一種“麻雀雖小，五臟俱

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

圖7網頁配色規范圖

2.2.2網站字體設計

網站的標準字采用了“方正準圓簡體”此外，在品牌新聞、產品詳情頁等

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

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

等頁面因實際情況需要將字體變大并加粗，使其更加顯眼。效果如下圖圖8所

9

湖南商務職業技術學院畢業設計

示。

圖8網頁字體規范圖

2.2.3導航欄目設計

導航欄目的設計采用的是最常見的頂部導航欄，頂部導航欄可以使網頁的

每個欄目清晰的展現給消費者，使消費者能夠迅速瀏覽到他們想看的內容。頂

部導航這樣的設計形式較為簡潔但是邏輯條理清晰。效果如下圖圖10所示。

圖10網頁圖標規范圖

3網站前端設計

3.1網頁高保真原型設計

在網頁高保真原型頁面設計中，我所利用的軟件工具是AdobePhotoshopCC

2018來完成本模塊的原型設計。

10

湖南商務職業技術學院畢業設計

3.1.1網站首頁

圖11網站首頁高保真原型圖

11

湖南商務職業技術學院畢業設計

網站首頁的設計思路：

首頁的設計首先是頂部的店招，店招分為三部分：左邊的logo、中間的導

航欄和右上角的電話號碼。店招背景簡單的選取了白色，簡約風使得整體顯得

簡單又清晰，店招的作用是讓客戶更清晰的認識到網站，方便他們瀏覽與篩選

網站信息。店招的下方緊接著是滾動banner，滾動banner能夠很好的利用視覺

營銷讓消費者迅速的了解該品牌。滾動banner的下方是新聞中心，通過這些企

業新聞也能讓客戶對企業有一個更全面的了解。新聞中心的下方是產品系列，

簡而言之就是產品大概的一個展示，也是客戶最關注的一部分，所以將它放在

了中間。下方放了一張圖片將內容隔開使其不那么擁擠，接著最后就是公司簡

介，對公司的背景進行了一個介紹，并運用了左右構圖的構圖方式，整體結構

也顯得十分清晰。最后底部引導按鈕背景色使用了冷色調的天藍色，能夠給人

一種很舒適的感覺，引導按鈕同樣也是給頂部導航欄的一個補充。

首頁整體效果大方簡潔，符合產品特色，同樣也能讓客戶產生購買欲。效

果如上圖圖11所示。

12

湖南商務職業技術學院畢業設計

3.1.2商品類目頁

圖12商品類目頁高保真原型圖

商品類目頁主要是方便消費者尋找自己想看的產品，同樣的也可以讓他們

更好的了解我們的產品。

運用了中心構圖的方式，使頂部店招和中間的產品分類以及底部引導按鈕

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

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

13

湖南商務職業技術學院畢業設計

3.1.3商品詳情頁

圖13商品詳情頁高保真原型圖

商品詳情頁主要的目的是為了方便消費者更好的了解該產品，從而讓消費

14

湖南商務職業技術學院畢業設計

者達到購買的目的。

商品詳情頁的主要內容為：logo、導航欄、電話號碼、banner、產品分類

導航、產品主圖、產品介紹以及底部引導按鈕。其頂部導航欄banner等與官網

一樣，詳情頁主要在于其產品介紹。產品介紹這一部分主要分為：產品焦點圖、

產品信息圖和產品細節圖。這樣的順序無疑是從簡到繁，滿足了消費者的心理。

效果如上圖圖13所示。

15

湖南商務職業技術學院畢業設計

3.1.4新聞資訊頁

圖14新聞資訊頁高保真原型圖

16

湖南商務職業技術學院畢業設計

新聞資訊頁為企業最新的新聞動態資訊，主要分為：logo、導航欄、電話

號碼、banner、新聞分類導航、新聞資訊以及底部引導按鈕。

其頂部導航欄banner等與官網一樣，其新聞分類導航放在了banner下方

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

體看來條理比較清晰。

3.2網頁動態特效實現

網頁動態特效是使用JavaScript實現。

動態特效1：鼠標點擊導航欄右上角電話號碼，網頁標題將自動跳轉成官網

電話號碼。效果如下圖所示：

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

動態特效2：鼠標移入產品圖片時，則觸發特效代碼并顯示效果：產品圖片

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

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

17

湖南商務職業技術學院畢業設計

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

圖18