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

目錄

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

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

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

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

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

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

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

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

3.2網頁動態特效設計.............................................45

4設計總結..........................................................50

參考資料............................................................51

I

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

長沙羅莎食品有限公司網站Web端網頁設計

1網站設計需求分析

1.1網站建設背景

長沙羅莎食品有限公司是臺商獨資從事開發、生產、銷售食品的企業，經

省外事辦引進，于1993年3月創立于長沙。

選擇ROSA羅莎這個品牌，是因為它在注重口味的同時，羅莎一直致力于開

發營養健康的特色產品，給無數消費者帶來美味又健康的食品。

基于對ROSA羅莎這一品牌的了解，以及對糕點蛋糕的喜愛而關注這個網站，

并且發現長沙羅莎食品有限公司沒有具體的官方網站以更完美的形象展示出給

大家，目的是為了樹立企業的口碑，提高品牌的知名度。通過查詢ROSA羅莎旗

艦店信息了解到長沙羅莎食品有限公司背景資料，相關產品，視覺風格，人群

定位，對用戶需求進行分析調研，通過對大部分網站的功能設計和網頁結構設

計，我打算將網站的風格定為健康時尚。

1.1.1用戶需求分析

通過以下總結分析出隨著人們生活品質的提高，消費者對于健康越發的重

視，在購買蛋糕的時候，會選用更加安全健康的蛋糕。網站風格設計為一個親

近自然、新鮮健康的設計風格，采用的色調是冷色調，淺青色在空間里的點綴

也恰巧呼應了品牌，各種材質與色彩之間的搭配應用讓空間呈現的是極簡又不

失細節的視覺效果。

(1)優質的體驗感:為了讓客戶有更好的體驗感，因該使網頁的風格在不呆

板的前提下盡量簡潔化，讓客戶能一目了然就能看到自己喜歡和想要買的商品。

(2)優質的網站形象:可以讓客戶能夠對我們的網站有更深刻的了解，成為

我們的回頭客,美觀的產品圖必不可少,簡約的設計背景，并且在適當的位置上

添加修飾元素,加強視覺沖擊力。

(3)優質的產品與服務:營養健康的產品以及蛋糕的多樣性正是大家需求的

東西，同時提供優質的售后服務，能讓客戶更加的相信企業，增強企業的信賴

度。

1

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

1.1.2競品分析

表1競品分析表

品牌產品定位目標消費群體品牌主張產品賣點

新鮮高質量的烘

健康、時尚、注重生活質量和時讓產品有溫

烤產品、低脂低

仟吉安全、安心、尚品味的白領消費度、讓品牌有

油、低熱量的產

美味群體感情

品

“精致禮品名精美包裝、創新

中高收入的城市消忠于原味、崇

元祖家”，以吃為質感、充滿藝術

費群體尚自然

輔，以送為主性的產品

中年婦女、學生群體，皇冠出品、必新鮮健康的食品、

新鮮、健康、

皇冠中檔路線的消費群屬精品，用心優雅的購物環境、

美味、營養

體做蛋糕熱情周到的服務

通過對同類產品的分析，得出蛋糕的產品定位以新鮮、安全、健康綠色、

營養美味、時尚品質為主，目標消費群體為年輕消費群體或者中高收入群體、

注重生活質量、時尚品味的白領消費群體。所以長沙羅莎食品有限公司面向的

消費群體為年輕的和注重時尚品質中高收入的婦女人群。品牌主張以質量、服

務第一。產品賣點為質量保證、綠色健康天然、豐富美味。

1.1.3網站功能設計

ROSA羅莎網頁設計主要實現的功能模塊有:

首頁:主要由banner、享受美味.享受生活、每日推薦、我們的優勢組成;

精選系列:展示的是熱款爆賣和美好的下午時光還有DIY定制蛋糕這三塊

產品展示;

商品詳情頁：是產品的詳情頁，主要內容是介紹產品商品信息圖、價格、

產品規格尺寸、用戶可以點擊加入購物車購買商品。

產品分類:有熱門關鍵詞搜索和優惠券，還有產品分類的模塊：現做蛋糕、

甜品系列、面包系列、切塊系列這四類組成，下面還有服務模塊。

食材:我們的食材，主要的食材有動物奶油、新鮮水果、農家土雞蛋和優質

小麥組成，下面還有圖片展示。

品牌故事:由羅莎文化、品牌介紹和羅莎成長史構成。

最新活動:主要是有親子活動、愛心活動和溫暖活動三個模塊構成，點擊可

以切換模塊。

聯系我們:是消費者的一個售后保障功能，有公司的聯系方式、地址、郵箱、

2

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

地圖和在線留言。

登錄和注冊:如果用戶沒有賬號的話可以點擊注冊，有賬號的話直接點擊登

錄進到首頁頁面。

1.2網站結構設計

1.2.1網站層次設計

設計一個好的網站結非常重要的，一個邏輯清晰的網站結構更能夠讓客戶

看明白我們的產品，不需要思考肉眼就能找到自己想要的東西，更能夠打動人

心，提高客戶的體驗感，讓人知道我們的整體架構。

圖1網頁層次結構圖

1.2.2交互邏輯設計

本網站最主要的人機交互方式是鼠標點擊操作。用戶在瀏覽器中點擊網站

各頁面的文字鏈接或圖片按鈕，實現頁面間的跳轉。

本網站的每一個網頁，都有一個導航欄。導航欄上設有網站首頁、精選系

列、產品分類、食材、品牌故事、最新活動、聯系我們等功按鈕，用戶點擊每

個功能可以前往網站的相應模塊。

(1)在網站導航欄上面，用戶可以點擊“登錄/注冊”按鈕，可以進入登

錄頁面,登錄頁面輸入相關的賬號信息就可以登錄進到首頁，如果用戶還沒賬號

的話還可以點擊登錄界面上的“還沒有賬號，點擊賬號注冊”文字鏈接進行跳

3

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

轉注冊頁面，往冊好之后會有提示注冊成功，進入登錄頁面。

在首頁，用戶還可以點擊產品圖上面的查看詳情進入到產品信息頁后點擊

進行購買。

(2)在精選系列頁面中，用戶把鼠標停留在“熱賣爆款”上，會出現查看更

多的箭頭，點擊查看更多就會跳轉到相應產品的詳情頁面進行購買。

點擊跳轉

DIY定制蛋糕中可以填寫自己的電話和定制要求，點擊提交按鈕彈出提交成

功的對話框。底部TOP按鈕點擊回到頂部，更方便查看我們的網頁，給客戶一

個更好的網頁體驗感。

(3)在商品詳情頁面里點擊導航欄下面的文字可以跳轉到相關頁面。點擊商

品信息圖下面的圖片，商品信息圖也會相對于的改變切換，點擊收藏空心的就

會變成實心的愛心。價格那一快鼠標停留在價格明細上會向左滑動出價格明細

的介紹，下面可以修改配送時間和購買數量，點擊加入購物車會進入到相對應

的購買界面。產品詳情、用戶評價、售后保證可以點擊快換下面介紹的模塊。

(3)在產品分類頁面里有關鍵詞搜索框，點擊進去可以進行關鍵詞搜索。優

惠券可以點擊優惠券就會彈出相應的領取成功對話框。產品分類有現做蛋糕、

甜品系列、面包系列和切塊系列四個模塊可以來回點擊切換。底部TOP按鈕點

擊回到頂部，更方便查看我們的網頁，給客戶一個更好的網頁體驗感。

(4)品牌故事的品牌介紹里面有三個模塊：品牌風格、產品特色和市場定位，

點擊文字框右下角的藍色圓點可以切換相應的文字說明，目的就是為了讓顧客

更加的了解我們的品牌信息，品牌的歷程，讓顧客對我們的產品加以的信賴，

相信我們的產品是安全健康可靠的，是有品質保障的。底部TOP按鈕點擊回到

4

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

頂部，更方便查看我們的網頁，給客戶一個更好的網頁體驗感。

(5)在最新活動頁面里，客戶可以看到左邊三個模塊，親子、愛心、溫暖可

以點擊文字切換到相應的模塊，更有利于顧客看到我們品牌注重參與社會活動。

底部TOP按鈕點擊回到頂部，更方便查看我們的網頁，給客戶一個更好的網頁

體驗感。

(6)在聯系頁面里，客戶可以看到我們的一個承諾和保障，讓客戶放心的購

買我們的這個產品，可以直接找到企業的聯系方式，有地址、電話，郵箱方便

客戶聯系我們。還可以看到一個在線留言模塊，可以輸入自己的姓名、電話、

郵箱、留言信息，點擊提交按鈕會彈出一個留言成功的對話框，點擊關閉按鈕

留言信息就會刷新消失，目的是有利于知道顧客對我們的意見和看法，讓我們

加以改變，塑造品牌形象。底部TOP按鈕點擊回到頂部，更方便查看我們的網

頁，給客戶一個更好的網頁體驗感。

2網站視覺設計

網站的視覺包括版式、風格、色彩、尺寸等方面,這些方面都非常重要的，

想要讓用戶對網站有一個好的視覺印象，那都是要對網站的形象要嚴格規劃和

設計的。

2.1頁面版式設計

頁面版式設計是很重要的一個部分，頁面版式的設計代表了網頁后面的結

構版式設計，前面工作的好壞都能夠表示我們后面做的工作如何。在這一設計

中我主要使用的工具是Axure來制作低保真線框圖，在制作線框圖之前，我對

其尺寸大小內容結構等都進行了合理的布局安排。

5

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

2.1.1網站首頁

圖2首頁層次結構圖

6

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

圖3網站首低保真頁

7

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

此頁為首頁布局圖，如圖(2)為結構圖，圖(3)為線稿圖。主要部分為頂部

導航和頁尾部分，頂部最左側是1ogo,右側有熱線電話。第一部分為導航欄:導

航欄里面一共有八個模塊，用戶可以點擊不同的分類導航進入不同的頁面。導

航下面為第二板塊是banner:banner里面放了一些產品的展示圖，以便于吸引

顧客的眼球。第三板塊展示的是產品展示和每日推薦以及我們的優勢，每個模

塊分別采用了不同的版式，每個模塊都用了修飾文字的元素，分別用了矩形、

圓角矩形、圓形進行排版，以及文字有小標題和大標題，這樣讓我們的標題更

有吸引力，產品也更有吸引力，吸引用戶的眼球，沖擊力比較強。第四板塊是

頁尾部分，展示的是企業二維碼，QQ、微信號、官方微博，還有一些相關鏈接。

長沙羅莎食品有限公司網站首頁的線框圖采用RP軟件制作而成，可以分為

四步。第一步把頭部導航欄用矩形工具繪制，在LOGO區繪制了一個圖片,導航

欄的文字采用文本標簽實現，在右側展示我們官方的熱線電話，以便客戶聯系

我們。第二步把banner區域用占位符繪制出，文字用文本標簽實現。第三步用

矩形紅具和橢圓工具和文本標簽繪制出頁面的大標題以及小標題，產品信息圖

分別用了矩形、圓角矩形、圖片和文本標簽繪制出。我們的優勢模塊里品牌故

事用文本標簽和文本段落實現。第四步是用文本標簽和圖片來實現頁尾部分。

首頁代表的是網站的最重要的一個形象，用戶一進去看到的就是首頁，所

以在首頁部分我花費了比較大的心思來進行排版設計，我想讓用戶一進去的時

候心里就有一種舒適美觀的感受，能讓用戶一進去就知道自己想要的商品是

在哪里，讓用戶還有看下去的欲望。Banner部分主要就是以產品圖進行展示，

是企業的招牌，產品分類是讓用戶選擇自己想要的那一個類目，以及下面的產

品展示利用不同的版式讓用戶還想往下看。

8

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

2.1.2精選系列頁

圖4精選系列頁結構圖

9

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

圖5精選系列頁低保真圖

10

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

此頁為精選系列頁，如圖(4)為結構圖，圖(5)為線稿圖。主要部分分

為五個部分小塊，第一個部分:頂端是頭部導航欄，左側是網站logo，1ogo

展示的是企業的文化與口碑，1ogo位于最頂端的左側也是最醒目的，導航欄的

功能就是引導顧客快速找到自己想要的信息，便于顧客體驗瀏覽網頁。第二部

分:導航欄的下方是廣告圖，廣告圖是熱款爆賣模塊，當用戶鼠標移動到熱賣爆

款圖上，會向上滑出模板，點擊查看更多進去就會展示商品購買頁面，方便用

戶購買，購買頁面展示的產品信息圖，價格規格等以及一些購買的保障。第三

個部分是標題是美好下午時光的展示區，圖片加文字文字說明，使得網頁更加

美觀簡約。第四部分是DIY定制蛋糕區，客戶可以定制自己的蛋糕，留下自己

的聯系方式和定制要求點擊提交按鈕，彈出定制成功的對話框，操作簡單方便，

第五部分是頁尾部分，展示的是企業官方二維碼，QQ、微信、微博、相關鏈接

和郵箱地址。

精選系列頁的線框圖采用AxureRP軟件制作而成，可以分為三步。第一步

用矩形畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文

字，導航欄下面制作一張廣告圖。第二步放入三張圖片制作滑動的特效，點擊

查看更多跳轉新的頁面進入商品詳情圖。第三步畫兩個圓角矩形加上圖片加文

字，調整合適的位置。第四部分在左側插入一個大圓角矩形的圖片，右側弄兩

個文本框，一個是個人電話和一個定制要求，文本框內輸入提示信息，文本框

下側制作提交按鈕，給提交按鈕制作彈出輸入定制要求成功的網頁效果對話框，

還有關閉按鈕，提交按鈕下面標注提示文字。第五步是頁尾部分:左側是企業的

官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然后相關鏈接文字，最后

下面標出企業郵箱和地址。

11

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

2.1.3精選系列頁

圖6商品詳情頁頁結構圖

12

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

圖7商品詳情頁低保真圖

此頁為商品詳情頁，如圖(6)為結構圖，圖(7)為線稿圖。主要部分分

為四個部分小塊。第一個部分:頂端是頭部導航欄，左側是網站logo，1ogo

展示的是企業的文化與口碑，1ogo位于最頂端的左側也是最醒目的，導航欄的

功能就是引導顧客快速找到自己想要的信息，便于顧客體驗瀏覽網頁。第二部

13

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

分左側是商品展示區，右邊是商品的詳細標題、價格介紹、購買注意事項、配

送時間、數量。第三部分是介紹商品規格尺寸、產品信息、用戶評價和售后服

務。第四部分是頁尾部分，展示的是企業官方二維碼，QQ、微信、微博、相關

鏈接和郵箱地址。

產品分類頁的線框圖采用RP軟件制作而成，可以分為六步。第一步用矩形

畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文字。

第二步導航欄下面添加文字鏈接跳轉。第三步畫一個大矩形框做底圖，在上面

添加商品信息圖、點擊商品圖切換特效、點擊收藏按鈕網頁特效設計、文字標

題、配送時間下拉框、數量添加按鈕、加入購物車鏈接。第四步是矩形框加文

字做出商品信息。第五步是產品信息、用戶評價和售后服務模塊切換的網頁特

效。第六步是頁尾部分:左側是企業的官方二維碼，下面插入QQ、微信、微博的

圖標按鈕，然后相關鏈接文字，最后下面標出企業郵箱和地址。

14

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

2.1.4產品分類頁

圖8產品分類頁結構圖

15

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

圖9產品分類頁低保真圖

16

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

此頁為產品分類頁，如圖(8)為結構圖，圖(9)為線稿圖。主要部分分

為六個部分小塊。第一個部分:頂端是頭部導航欄，頂部最左側是1ogo,中間是

八個模塊的文字，右側有熱線電話，導航欄下面添加占位符，來添加廣告圖。

第二部分:廣告圖的下方是關鍵詞搜索，文本框制作關鍵詞搜索框，提示請輸入

關鍵詞的提示，地下有熱門關鍵詞。第三部分是優惠券，當用戶鼠標點擊優惠

券會彈出領取成功的對話框。第四部分是四個小模塊：現做蛋糕、甜品系列、

面包系列、切塊系列，當鼠標點擊上面的模塊按鈕時就會切入到相對于的模塊，

查看不同系列的產品，方便客戶查看。第五部分是服務展示，正品保證、特色

服務、物流服務、售后服務，給客戶留下一個靠譜品牌的形象。第六部分是頁

尾部分，展示的是企業官方二維碼，QQ、微信、微博、相關鏈接和郵箱地址。

產品分類頁的線框圖采用RP軟件制作而成，可以分為六步。第一步用矩形

畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文字。

第二步添加文本框輸入提示文字，修改矩形參數變成圓角矩形，下面添加熱門

關鍵詞文字。第三步添加優惠券圖片，在每個優惠券上面設計網頁特效，再點

擊時可以彈出領取成功的對話框。第三步添加四個小圓角矩形框上面添加文字

和圖片，在上面設計熱區，在點擊時切換下面的模塊。第四步添加圖片和服務

項目的文字。第五步TOP，點擊可以回到頂部。第六步是頁尾部分:左側是企業

的官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然后相關鏈接文字，最

后下面標出企業郵箱和地址。

17

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

2.1.5食材頁

圖10食材頁結構圖

18

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

圖11食材頁低保真圖

19

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

此頁為食材頁，如圖(10)為結構圖，圖(11)為線稿圖。主要部分分

為四個部分小塊。第一個部分:頂端是頭部導航欄，頂部最左側是1ogo,中間是

八個模塊的文字，右側有熱線電話，導航欄下面添加占位符，來添加廣告圖。

第二部分是聯系我們，向顧客展示我的產品食材，動物奶油、新鮮水果、農家

土雞蛋和優質小麥，帶上文字和圖片的展示，反映出我們的食材新鮮健康、營

養美味、純天然的綠色食品、吸引更多注重食品品質的優質客戶。第三部分也

是圖片展示區，加小標題介紹。第四部分是頁尾部分，展示的是企業官方二維

碼，QQ、微信、微博、相關鏈接和郵箱地址。

食材頁的線框圖采用RP軟件制作而成，可以分為五步。第一步用矩形畫出

導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文字，下面插

入廣告圖片。第二步圖片加英文制作我們的食材的標題，四個圓角矩形上面添

加圖片和文字展示，旁邊還有圖案修飾，更加美觀。第三步圖片加小標題進一

步制作食材展示區。第四步TOP，點擊可以回到頂部。第五步是頁尾部分:左側

是企業的官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然后相關鏈接文

字，最后下面標出企業郵箱和地址。

20

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

2.1.6品牌故事頁

圖12品牌故事頁結構圖

21

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

圖13品牌故事頁低保真圖

22

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

此頁為品牌故事頁，如圖(12)為結構圖，圖(13)為線稿圖。主要部分分

為五個部分小塊。第一個部分:頂端是頭部導航欄，頂部最左側是1ogo,中間是

八個模塊的文字，右側有熱線電話，導航欄下面添加占位符，來添加廣告圖。

第二部是我們羅莎文化，介紹一下我們的企業文化，表明給客戶提供優質的產

品以及優質的服務。第三個部分是品牌介紹模塊，講解的品牌風格、產品特色、

市場定位三個小模塊，下面三個模塊相對于的文字說明，點擊右下角的圓形圖

標的切換文字模塊，更簡潔美觀的展示解釋說明每個模塊。第四部分是羅莎的

成長史展示，品牌歷史久，讓客戶更好的了解咱們企業。第五部分是頁尾部分，

展示的是企業官方二維碼，QQ、微信、微博、相關鏈接和郵箱地址。

食材頁的線框圖采用RP軟件和ps軟件制作而成，可以分為六步。第一步

用矩形畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文

字，下面插入廣告圖片。第二步圓角矩形上面添加圖片和矩形，還有文字和線

段來修飾。第三步圖片加英文制作品牌介紹標題，使用ps制作三張圖片，品牌

風格、產品特色、市場定位三個用一個圓角矩形和漸變的圓角矩形來修飾，下

面添加動態模板，點擊圓角矩形右下角的小圓點可以切換文字模塊。第四部分

文字加圓角矩形框來展示介紹時間段，用小圓點修飾我們的時間線。第五步

TOP，點擊可以回到頂部。第六步是頁尾部分:左側是企業的官方二維碼，下面

插入QQ、微信、微博的圖標按鈕，然后相關鏈接文字，最后下面標出企業郵箱

和地址。

23

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

2.1.7最新活動頁

圖14最新活動頁結構圖

24

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

圖15最新活動頁低保真圖

25

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

此頁為最新活動頁，如圖(14)為結構圖，圖(15)為線稿圖。主要部分分

為三個部分小塊。第一個部分:頂端是頭部導航欄，頂部最左側是1ogo,中間是

八個模塊的文字，右側有熱線電話，導航欄下面添加占位符，來添加廣告圖。

第二部分最新活動模塊：親子、愛心、溫暖，點擊左側的模塊按鈕可以切換到

相應的模塊，使得網頁簡潔美觀，給用戶一個優質的體驗感。第三部分是頁尾

部分，展示的是企業官方二維碼，QQ、微信、微博、相關鏈接和郵箱地址。

最新活動線框圖采用RP軟件制作而成，可以分為四步。第一步用矩形畫出

導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文字，下面插

入廣告圖片。第二步文字標題，左側添加圓角矩形分成三個模塊的熱區，右邊

添加三個圓角矩形的動態面板，上面有文字小標題、文字和圖片，設計點擊左

側，右側能相對應切換的網頁效果。第三步TOP，點擊可以回到頂部。第四步是

頁尾部分:左側是企業的官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然

后相關鏈接文字，最后下面標出企業郵箱和地址。

26

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

2.1.8聯系我們頁

圖16聯系我們頁結構圖

27

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

圖17聯系我們頁低保真圖

28

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

此頁為聯系我們頁，如圖(16)為結構圖，圖(17)為線稿圖。主要部分分

為五個部分小塊。第一個部分:頂端是頭部導航欄，頂部最左側是1ogo,中間是

八個模塊的文字，右側有熱線電話，導航欄下面添加占位符，來添加廣告圖。

第二部分是聯系我們有我們公司的地址、電話、郵箱。第三部分是地圖圖片。

第四部分是我們的一個在線留言區，可以留下客戶的姓名、電話、郵箱和留言

信息，下面一個提交按鈕，客戶可以向我們反饋自己寶貴的意見或者對我們品

牌的喜愛，有利于企業與客戶更好的進行互動，提供一個優質的服務。第五部

分是頁尾部分，展示的是企業官方二維碼，QQ、微信、微博、相關鏈接和郵箱

地址。

聯系我們線框圖采用RP軟件和ps制作而成，可以分為六步。第一步用矩

形畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，在導航欄上打上文字，

下面插入廣告圖片。第二步文字圖片加英文制作標題，下面制作三個圓角矩形

框，上面添加文字和用ps制作好的圖片。第三步添加一個地圖圖片。第四步用

虛線劃分界面，圓角矩形框加文字制作在線留言，四個文本框分別設置條件和

對應的文字，還有輸入的條件設置，制作提交按鈕，點擊提交會彈出留言成功

的對話框，上面有關閉按鈕。第五步TOP，點擊可以回到頂部。第六步是頁尾部

分:左側是企業的官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然后相關

鏈接文字，最后下面標出企業郵箱和地址。

29

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

2.1.9登錄/注冊頁

圖18登錄/注冊頁結構圖

30

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

圖19登錄頁低保真圖1

圖19注冊頁低保真圖2

31

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

此頁為登錄注冊頁，如圖(18)為結構圖，圖(19)為線稿圖。這兩個頁面都

是采用比較簡潔的排版方式排版的，主要是能讓用戶簡單易懂的進行操作。

登錄注冊線框圖采用RP軟件和ps制作而成，可以分為六步。第一步用矩

形畫出導航欄，在導航欄上方左側畫一個1ogo的圖片，導航欄下面制作一個返

回首頁的文字鏈接。第二步左側圓角矩形圖片，右側圓角矩形文本框上面添加

用戶和密碼的圖標和文本框，將文本框設置隱藏和提示文字和輸入的要求條件，

制作登錄按鈕和QQ微信登錄方式。第三步在登錄按鈕的上面標注：還沒有賬號？

點擊注冊賬號，給它添加文字鏈接跳轉到注冊頁面。第四步制作注冊界面，輸

入手機號填寫圖片驗證碼，同意羅莎協議，點擊下一步進入設置密碼界面，在

點擊下一步進入注冊成功的界面，點擊確認返回登錄界面。第六步是頁尾部分:

左側是企業的官方二維碼，下面插入QQ、微信、微博的圖標按鈕，然后相關鏈

接文字，最后下面標出企業郵箱和地址。

2.2頁面視覺元素設計

2.2.1網站配色設計

網站的配色是根據原有品牌的1ogo以及品牌文化進行延展而來的，主色是

淺青色，淺青色是藍綠色的結合而成的青色，寓意為青春、健康、親切、柔和、

愉悅，象征著希望、自由和優雅。淺青色是一個平易近人的和諧色彩，和其他

熱情暖色調的食品類網站不一樣，用淺青色做底色,清脆而不張揚,伶俐而不圓

滑，清爽而不單調，這種顏色反而讓人心情愉悅，顯得美麗優雅，顯得時尚又

符合當代年輕人的審美。點綴色為深藍色、米白色，用來區分頁面的層次感。

搭配這種顏色更能吸引人的目光，襯托蛋糕的美麗，激發用戶對蛋糕的購買欲

望，如圖(20)所示。

圖20網頁配色圖

32

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

2.2.2標準字

網頁的主體字是Arial字體。導航欄的字體也為Arial，正文為Arial字體，

網頁文字標題為SitkaText和幼圓字體，如圖(21)所示。

圖21網頁字體規范圖

2.2.3圖標

網頁的圖標設計通常能展示體現出網站設計的風格與細節，在這個網頁中

我所使用的圖標有以下圖標，圖標的大小是28pt，便于記憶和識別，如圖(22)

所示。

圖22網頁圖標規范圖

2.2.4導航

導航的設計比較簡約美觀，能讓用戶迅速找到自己想要的模塊，簡單快捷

高效的功能，如圖(23)所示。

圖23網頁圖標規范圖

33

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

2.2.5網站LOGO

網站logo代表著企業的形象，通過logo的形象標志來讓消費者記住公司

品牌和文化，ROAS的logo設計非常簡單直觀，一眼就能讓顧客識別，如(24)

所示。

圖24網站logo圖

2.2.6布局

網站布局代表著整個網頁的排版架構，網站的內容大小在1500px,如(25)

所示。

圖25網頁布局規范圖

34

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

2.2.7彈窗

網站的彈窗是網頁中的點擊效果圖，當在diy模塊中，填寫電話和定制要

求，點擊提交按鈕就會彈出，如圖(26)網頁彈窗大小圖1所示。在支付成功頁

支付成功就會彈出，點擊確認或者關閉就會關閉對話，如圖(26)網頁彈窗大小

圖2所示。

圖26網頁彈窗大小圖1

圖26網頁彈窗大小圖2

3網站前端設計

3.1網頁高保真原型圖設計

在網頁高保真原型圖設計過程中，我使用到了axurerp和ps工具軟件來制

作。

35

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

3.1.1網站首頁

網站首頁的設計思路：網站首頁最先看到的是banner圖，banner是網站吸

引消費者最重要的圖片，我做了三張banner,三張banner放的都是比較吸引人

的熱銷產品圖，網站的1ogo在左上角，1ogo是企業品牌文化的象征，一般的用

戶瀏覽網頁都是Z字形，一眼進去就能看到logo，導航欄使用的是最常見的排

版方式，用的背影色是深藍色，banner的下面是產品、每日推薦、我們的優勢

這三個模塊，這三個模塊采用的都是不同的排版，顯得不是那么的呆板，讓用

戶有看下去的欲望，放的產品圖都是比較熱門的產品，整體頁面簡潔大方，干

凈舒適，如圖(27)所示。

36

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

圖27網頁首頁

3.1.2精選系列頁

精選系列的設計思路：一個廣告圖下面分別是爆款熱賣、美好的下午時光，

DIV定制蛋糕，前兩部分主要是展示商品為主，用戶能直觀的看見我們精致的商

37

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

品圖，DIV定制蛋糕是一個很有創意的設計，更能了解顧客需求，提供更加多樣

化、個性化的飾品材料和工具，滿足不同顧客的需求，如圖(28)所示。

圖28精選系列頁

38

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

3.1.3商品詳情頁

商品詳情頁設計是采用最常見的左圖右文的排版，方便用戶瀏覽。主要展

示的商品詳情信息、規格尺寸、數量和售后保障，用戶進入這個界面可以加入

購物車購買商品，如圖(29)所示。

圖29商品詳情頁

39

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

3.1.4產品分類頁

產品分類頁的設計思路：先設置個熱門關鍵詞搜索，方便顧客搜索自己喜

歡的商品，下面是一個優惠券領取，適當的給顧客發放一些優惠券來吸引顧客，

進行引流，然后就是點擊上面四個標簽可以切換到分類的產品展示圖去，簡約

美觀又更好的展示了產品，最下面是一個服務保障，給到顧客一個安心購買的

服務，如圖(30)所示。

圖30產品分類頁

40

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

3.1.5食材頁

食材頁設計思路：食材是顧客最重視的一個部分，我們要把我們綠色新鮮、

安全可靠的食材展示出來，利用圖文來進行排版，規則又不顯呆板的設計排版，

更好的展示給顧客，如圖(31)所示。

圖31食材頁

41

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

3.1.6品牌故事頁

品牌故事頁展示的是企業文化，設計了三個模塊：一個是我們羅莎文化，

讓顧客知道我們全心全意為顧客服務；第二個品牌介紹，讓顧客跟了解我們這

個品牌；第三個是羅莎的成長史，記錄我們品牌的歷史，企業發展之久，讓顧

客對企業產生信賴感，如圖(32)所示。

圖32品牌故事頁

42

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

3.1.7最新活動頁

設計這個最新活動的頁面最主要的是讓顧客了解長沙羅莎食品有限公司是

一個有溫度的企業、有溫度的產品，是再給社會做貢獻，以人為主。最新活動

分為了三個模塊親子、愛心、溫暖這樣子來展示我們的活動內容，如圖(33)所

示。

43

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

圖33品牌故事頁

3.1.8聯系我們頁

聯系我們頁里我做了連個模塊，一個是展示了我們企業的地址、聯系方式

和一個地圖部分；第二個是我們的一個在線留言的模塊，這個是讓喜歡或者覺

得我們有上面不足的顧客進行留言，讓長沙羅莎食品有限公司更好的改進，如

圖(34)所示。

44

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

圖34聯系我們頁

3.1.9登錄/注冊頁

登錄/注冊是每個企業網站都應該有的一個部分，設計的是一個左圖右文的

一個版式，簡約美觀，通俗易懂的操作模式，如圖(35)所示。

45

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

圖35登錄/注冊1

46

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

圖35登錄/注冊2

3.2網頁動態特效設計

3.2.1網頁動態特效原型

動態特效(1)：banner輪播特效

圖36banner效果圖1

47

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

圖36banner效果圖2

圖36banner效果圖3

在首頁放入三張banner圖，利用axure軟件實現圖片輪播特效。首先在ps

軟件里制作三張大小一致的圖，然后用axure軟件建立動態面板，把圖片插入

進去，在屬性面板設置好狀態，最終實現圖片輪播效果，如圖(36)所示。

動態特效(2)：向上滑動進入商品詳情頁

圖37向上滑動進入商品詳情頁效果圖

48

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

在爆款熱賣模塊的商品圖上制作一個藍色矩形，然后在上面添加查看更多

的文字，在屬性面板設置好狀態，最終實現向上滑動進入商品詳情頁效果，如

圖(37)所示。

3.2.2網頁動態特效實現

Banner輪播特效制作步驟:

第一建立一個動態面板并且為動態面板命名為banner顯示區，在動態面板

中添加三個不同的面板狀態分別命名為banner1、banner2、banner3。

第二選中動態面板在右邊的屬性欄里為其添加載入時的用例，選擇設置面

板狀態，勾選banner顯示區，選擇狀態為next,依次勾選向后循環，循環間隔

為1000毫秒，首個狀態延時1000毫秒后向后切換。設置好進入動畫和退出動

畫的效果。

第三畫三個橢圓按鈕，分別為其命名為序號1、序號2、序號3,為其設置交

互樣式為選中時改變顏色，第一個橢圓按鈕默認為勾選狀態。在banner的兩側

畫兩個箭頭按鈕命名為向左和向右，設置為隱藏。

第四選中動態面板為其添加三個狀態改變時的用例，點擊編輯條件，如果

banner顯示區等于banner1，則設置選中狀態于1為“true”，其它兩個用例

同上操作。

第五為第一個按鈕添加鼠標單擊時的用例，設置banner顯示區選擇狀態為

banner1，設置進入動畫和退出動畫的效果和時間。設置等待時間為1000毫秒，

再為其banner顯示區設置選擇狀態為next，依次勾選向后循環，循環間隔為

1000毫秒，首個狀態延時1000毫秒后向后切換。設置好進入動畫和退出動畫的

效果，其它兩個用例同上操作。

最后為其設置banner顯示區的動態面板添加鼠標移入時的用例，選擇顯示

隱藏原件，設置banner顯示區為停止循環。鼠標移出時設置狀態為next,繼續

向后循環。

49

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

圖38控件動態面板設置