寧波博洋服飾集團有限公司網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計

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

目錄

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

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

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

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

2.1頁面版式設(shè)計...............................................5

2.2頁面元素設(shè)計..............................................17

3網(wǎng)站前端設(shè)計.....................................................19

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

3.2網(wǎng)頁動態(tài)特效設(shè)計..........................................25

4設(shè)計總結(jié).........................................................31

參考資料............................................................32

I

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

寧波博洋服飾集團有限公司網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計

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

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

寧波博洋服飾集團有限公司，創(chuàng)立于1995年，該公司旗下品牌估值達(dá)64.26

億人民幣。年銷售規(guī)模高達(dá)30多億元、市場增長實力每年30%遞增，呈現(xiàn)出廣

闊的前景，成為深受當(dāng)代中國新青年喜愛的時尚潮流品牌。目前全國實體門店20

00余家，主要分布在華東、東北、華北、華中等核心區(qū)域，其中以北京、杭州、

寧波、合肥、石家莊、鄭州、濟南等城市為主要戰(zhàn)略性城市。單店銷售規(guī)模高

于500萬、形象佳的門店在各地市級城市核心區(qū)域均有開設(shè)。

選擇做寧波博洋服飾集團有限公司網(wǎng)站這個選題，是因為它堅持著"因改變

而驚喜"的創(chuàng)新主張，秉持著"我有我的方式"的時尚態(tài)度，宣揚"LiveitReal"

的品牌精神，為中國年輕消費群體打造專屬于他們的潮流風(fēng)尚服飾品牌。品牌

的產(chǎn)品包括T恤系列，襯衫系列，外套系列，風(fēng)衣系列，羽絨服系列，褲類系

列等。服裝從生產(chǎn)制作，銷售，物流都是經(jīng)過了嚴(yán)格把控，確?？蛻糍徺I的產(chǎn)

品品質(zhì)。通過品牌推廣、社會化的生產(chǎn)、加盟之路，已統(tǒng)一企業(yè)形象、統(tǒng)一管

理、統(tǒng)一模式、統(tǒng)一核算、統(tǒng)一培訓(xùn)、為客戶提供更加優(yōu)秀的品牌和產(chǎn)品。

基于對該品牌這一網(wǎng)站的了解，以及對服裝的喜歡而關(guān)注這個網(wǎng)站，并且

發(fā)現(xiàn)了品牌網(wǎng)站所存在的問題，為了將這個官方網(wǎng)站以更加完美的形象展示給

大家，讓更多的人了解該品牌服裝。我通過查詢該品牌的官方網(wǎng)站以及京東旗

艦店,唯品會官方特賣旗艦店，天貓旗艦店信息了解到品牌的背景資料，相關(guān)產(chǎn)

品，視覺風(fēng)格，人群定位，對用戶的需求進行分析調(diào)研，通過對大部分的網(wǎng)站

功能設(shè)計和網(wǎng)頁結(jié)構(gòu)設(shè)計，我將網(wǎng)頁的風(fēng)格定位青春有活力。

1.1.1用戶需求分析

該品牌主要針對的消費人群是年輕人，年輕人一直是網(wǎng)絡(luò)購物的主要消費

人群，其占比非常大，服裝是生活中不可缺少的一部分。而除了產(chǎn)品的好壞以

外，最能打動消費者的是品牌的價值。品牌的價值很重要，logo，產(chǎn)品包裝等

等都很重要。而品牌網(wǎng)站的建設(shè)中式程度是不可忽視的一部分，它決定了消費

者要不要繼續(xù)了解你的品牌和產(chǎn)品。品牌的定位是青春有活力，舒適時尚。所

以我在頁面上針對年輕消費者去設(shè)計，打造一個讓消費者產(chǎn)生記憶點的網(wǎng)站。

1

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

1.1.2競品分析

表1競品分析表

品牌產(chǎn)品定位目標(biāo)消費群體品牌主張產(chǎn)品賣點

時尚百搭，柔軟舒

適，價格親民，潮

時尚，休閑，年輕，年輕人和年輕化的

真維斯名牌大眾化流，優(yōu)質(zhì)的材料，

舒適中年人群體

精致的設(shè)計，精湛

的工藝

活力產(chǎn)品線：針對1

高顏值，高品質(zhì)，6-22歲學(xué)生群體傳遞自信，舒服，物美價廉，款式流

森馬時尚，有活力，年時尚產(chǎn)品線：針對1年輕時尚的生活方行，優(yōu)質(zhì)的服務(wù)，

輕，有個性8-25歲都市化生式設(shè)計精巧，高品質(zhì)

活的職業(yè)人群

針對18-35歲之間

款式新穎，做工精

青春，年輕，時尚，的年輕學(xué)生、都市為顧客呈奉物超所

以純細(xì)質(zhì)量好，品質(zhì)有

優(yōu)質(zhì)，平價時尚人士、中高端值的優(yōu)質(zhì)時裝

保障，價格實惠

商務(wù)人士

年輕有活力，青春，做自己，發(fā)現(xiàn)自我，優(yōu)質(zhì)的品質(zhì)，專業(yè)

針對18-25歲的年

美特斯邦威有個性，時尚，大發(fā)揮潛能，追求極的服務(wù)，時尚，有

輕、活力的消費者

眾化致個性，自然

通過對同類產(chǎn)品的分析，得出服裝的定位以年輕、時尚、青春、舒適、高

品質(zhì)、平價、大眾化、有活力為主，目標(biāo)消費群體為年輕學(xué)生、時尚人士、年

輕有活力、都市化生活的消費群體。所以該品牌面向的消費群體為年輕或者是

追求時尚的人群。品牌主張為“因改變而驚喜，我有我的方式”，產(chǎn)品賣點為年

輕時尚、有個性、品質(zhì)有保障。

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

該網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計主要實現(xiàn)的功能模塊有：

1）首頁：主要由banner、公司介紹、熱賣推薦、產(chǎn)品分類組成。

2）關(guān)于我們：由公司介紹和企業(yè)文化組成。

2

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

3）品牌中心：由品牌故事和大事記組成。

4）產(chǎn)品展示：由Banner、新品嘗鮮、男裝專區(qū)、女裝專區(qū)、IP聯(lián)合系列、

熱銷專區(qū)、情侶專區(qū)等構(gòu)成。

5）聯(lián)系我們：由加盟介紹、加盟優(yōu)勢、加盟流程、加盟條件、加盟扶持這

五個板塊構(gòu)成。

6）登錄和注冊、忘記密碼：如果用戶沒有賬號的話可以直接點擊注冊進行

賬號注冊，有賬號的話可以直接點擊登錄進行登錄后進到官網(wǎng)首頁，忘記密碼

是顧客有賬號但是不記得密碼，可以通過忘記密碼重新設(shè)置密碼。

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

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

想要設(shè)計一個優(yōu)秀的網(wǎng)站，網(wǎng)站的結(jié)構(gòu)是非常重要的，一個邏輯清晰的網(wǎng)

站結(jié)構(gòu)更能夠讓客戶明白我們的網(wǎng)站的布局和包含的產(chǎn)品，可以讓客戶一眼就

能了解我們網(wǎng)站的大致結(jié)構(gòu)，能幫助客戶快速找到自己需要瀏覽的內(nèi)容的位置。

如圖1所示。

圖1寧波博洋服飾集團有限公司網(wǎng)站結(jié)構(gòu)圖

1.2.2交互邏輯設(shè)計

本網(wǎng)站最重要的就是人機交互，方法是點擊鼠標(biāo)實現(xiàn)操作。用戶在瀏覽器

中點擊各個網(wǎng)頁的文字鏈接或者圖片，實現(xiàn)頁面之間的跳轉(zhuǎn)。

本網(wǎng)站的每一個頁面，都有一個導(dǎo)航欄。導(dǎo)航欄上由官網(wǎng)首頁、關(guān)于我們、

品牌中心、產(chǎn)品展示、聯(lián)系我們等五個按鈕，用戶點擊每個按鈕可以實現(xiàn)每個

3

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

頁面之間的跳轉(zhuǎn)和進入到相應(yīng)的模塊。

（1）在官網(wǎng)首頁，用戶可以點擊“登錄”按鈕，就可以進入到登錄頁面，

登陸頁面輸入相關(guān)的賬號信息就可以登錄進入官網(wǎng)首頁，如果用戶

不記得密碼，可以點擊忘記密碼，進入到忘記密碼頁面，填寫相關(guān)

信息，設(shè)置好新密碼后，點擊“立即登錄”按鈕，可以進入登錄頁

面，進行登錄就可以了。如果用戶沒有注冊賬號的話，可以通過點

擊“注冊”按鈕，進入到注冊頁面，填寫注冊相關(guān)的信息后會顯示

注冊成功，點擊“取消”按鈕可以留在注冊頁面，鼠標(biāo)點擊“確認(rèn)

登錄”按鈕，會跳轉(zhuǎn)到登錄頁面。在官網(wǎng)首頁，用戶可以點擊熱銷

產(chǎn)品下的產(chǎn)品，可以進入到相關(guān)的產(chǎn)品詳情頁進行購買。用戶點擊

返回頂部可以跳轉(zhuǎn)到官網(wǎng)首頁的開頭。

（2）在關(guān)于我們頁面中，用戶把鼠標(biāo)停留在“關(guān)于我們”上，會出現(xiàn)下

拉菜單公司介紹、企業(yè)文化這兩個選項，點擊相應(yīng)的按鈕就會跳轉(zhuǎn)

到相應(yīng)的頁面中，同時公司介紹和企業(yè)文化兩個頁面也可以互相跳

轉(zhuǎn)，還會出現(xiàn)導(dǎo)航欄，鼠標(biāo)移出關(guān)于我們，導(dǎo)航欄就會消失。

（3）在品牌中心頁面里面由品牌故事和大事記，點擊相應(yīng)的按鈕可以實

現(xiàn)頁面之間的跳轉(zhuǎn)，大事記里面點擊1995可以切換到動態(tài)面板之間

的轉(zhuǎn)換。讓客戶更加了解我們的品牌故事和榮譽，使得客戶對我們

的產(chǎn)品更加信賴。相信我們的產(chǎn)品品質(zhì)是有保障的。

（4）在產(chǎn)品展示頁面里，客戶可以通過點擊新品嘗鮮、男裝專區(qū)、女裝

專區(qū)、IP聯(lián)合系列、熱銷專區(qū)、情侶專區(qū)切換到相應(yīng)的動態(tài)面板，

點擊動態(tài)面板的產(chǎn)品下的立即選購，可以進入相應(yīng)的產(chǎn)品詳情頁。

（5）在聯(lián)系我們頁面中，可以看到有五個按鈕，分別是加盟介紹、加盟

優(yōu)勢、加盟流程、加盟條件、加盟扶持，鼠標(biāo)單擊相應(yīng)的按鈕可以

進入到相對應(yīng)的板塊信息，這樣方便客戶了解我們的加盟信息，有

興趣的可以通過頁頭的電話或者郵箱進行聯(lián)系。

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

網(wǎng)站的視覺設(shè)計包括logo、文字、banner、動畫效果、色彩、風(fēng)格、版式

等方面，用戶來到你的官網(wǎng)，第一眼看到的就是你的風(fēng)格和格調(diào)，你能不能吸

引顧客繼續(xù)瀏覽下去，全靠第一眼印象。如果你的風(fēng)格設(shè)計的不錯，但是配色

方面不到位，也是留不住客戶的，所以，這些方面都是非常重要的，需要對網(wǎng)

4

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

站進行嚴(yán)格的規(guī)劃和設(shè)計的。

2.1頁面版式設(shè)計

頁面版式的設(shè)計是非常重要的一個部分，頁面版式設(shè)計在整個頁面中起到

了信息傳播和引導(dǎo)性的作用，它決定了整個網(wǎng)站的風(fēng)格和視覺效果，在這里我

主要用的是AxureRP8軟件來制作低保真線框圖，在制作線框圖之前，我對網(wǎng)

站的頁面尺寸大小、內(nèi)容結(jié)構(gòu)都進行了合理的布局。

2.1.1網(wǎng)站首頁

圖2官網(wǎng)首頁結(jié)構(gòu)圖

5

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

圖3官網(wǎng)首頁線框圖

此頁為首頁布局圖，如圖所示為結(jié)構(gòu)體和線框圖。主要部分為頂部導(dǎo)航和

頁尾部分，頂部最左側(cè)的是logo，然后是郵箱和電話，右側(cè)是登錄和注冊按鈕。

第一部分是導(dǎo)航欄，導(dǎo)航欄有五個模塊，用戶點擊不同的模塊可以進入相應(yīng)的

頁面。導(dǎo)航欄下面的是第二個板塊，第二個板塊是Banner，Banner里面放了產(chǎn)

品的展示圖，以便于吸引客戶的眼球，點擊Banner可以進入相應(yīng)的產(chǎn)品詳情頁。

第三個板塊展示的是公司介紹，熱賣推薦以及產(chǎn)品分類三個模塊，每個模塊分

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

以及文字有大小的區(qū)別，這樣使得我們的產(chǎn)品更加具有吸引力，吸引客戶眼球。

第四個板塊是返回頂部的按鈕，點擊可使頁面回到頂部，這樣避免了頁面太長，

6

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

想看前面的內(nèi)容，還要手動往前翻，節(jié)省了時間。第五個模塊是頁尾部分，展

示的是微信公眾號二維碼，官方微博，天貓旗艦店，京東旗艦店，友情鏈接。

2.1.2關(guān)于我們

圖4關(guān)于我們結(jié)構(gòu)圖

7

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

圖5關(guān)于我們線框圖

此頁為關(guān)于我們布局圖，如圖所示為結(jié)構(gòu)圖和線框圖。主要部分為頂部導(dǎo)

航和頁尾部分，頂部最左側(cè)的是logo，然后是郵箱和電話，右側(cè)是登錄和注冊

按鈕。第一部分是導(dǎo)航欄，導(dǎo)航欄可以幫助用戶定位，找到想要瀏覽的內(nèi)容。

導(dǎo)航欄下面的是第二個板塊，第二個板塊是Banner，Banner里面放了產(chǎn)品的展

示圖，以便于吸引客戶的眼球，點擊Banner可以進入相應(yīng)的產(chǎn)品詳情頁。第三

個板塊展示的是關(guān)于我們，關(guān)于我們包括了公司介紹和企業(yè)文化兩個模塊，這

兩個模塊用了兩個按鈕，這樣使得我們的產(chǎn)品更加具有吸引力，吸引客戶眼球。

第四個是返回頂部按鈕，點擊可回到頁面頂部，第五部分是頁尾部分，有天貓、

友情鏈接、微博等。

8

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

2.1.3品牌中心

圖6品牌中心結(jié)構(gòu)圖

圖7品牌中心線框圖

此頁為品牌中心頁，如上圖所示為結(jié)構(gòu)圖和線框圖，頂部最左側(cè)的是

9

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

logo，然后是郵箱和電話，右邊的是登錄和注冊兩個按鈕，點擊按鈕可以進入

到相應(yīng)的頁面。第一部分是導(dǎo)航欄，可以幫助用戶定位，第二部分為品牌中心，

包括品牌故事和大事記兩個按鈕，點擊按鈕可以展現(xiàn)相應(yīng)的內(nèi)容，第三部分是

返回頂部的按鈕，點擊可回到頁面頂部，第四部分是頁尾部分，包括天貓，京

東，微信公眾號等。

2.1.4產(chǎn)品展示

圖8產(chǎn)品展示結(jié)構(gòu)圖

10

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

圖9產(chǎn)品展示線框圖

此頁為產(chǎn)品展示頁，如上圖所示為結(jié)構(gòu)圖和線框圖，頂部最左側(cè)的是

logo，然后是郵箱和電話，右邊的是登錄和注冊兩個按鈕，點擊按鈕可以進入

到相應(yīng)的頁面。第一部分是導(dǎo)航欄，可以幫助用戶定位和找到想要瀏覽的內(nèi)容，

第二部分為產(chǎn)品展示，有新品嘗鮮，男裝專區(qū)，女裝專區(qū)，IP聯(lián)合系列，情侶

專區(qū)，熱賣專區(qū)六個標(biāo)題按鈕，下面是產(chǎn)品的展示以及購買按鈕，點擊相應(yīng)的

標(biāo)題按鈕，可以展現(xiàn)對應(yīng)的產(chǎn)品，點擊產(chǎn)品下方的購買按鈕，可以進入相應(yīng)產(chǎn)

品的詳情頁，第三部分是返回頂部的按鈕，點擊可回到頁面頂部，第四部分是

頁尾部分，包括微信公眾號二維碼、微博、友情鏈接等。

11

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

2.1.5聯(lián)系我們

圖10聯(lián)系我們結(jié)構(gòu)圖

12

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

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

此頁為聯(lián)系我們頁，如上圖所示為結(jié)構(gòu)圖和線框圖，頂部最左側(cè)的是

logo，然后是郵箱和電話，右邊的是登錄和注冊兩個按鈕，點擊按鈕可以進入

到相應(yīng)的頁面。第一部分是導(dǎo)航欄，可以幫助用戶更加方便的找到并定位想要

的內(nèi)容，第二部分為動態(tài)面板，有加盟流程，加盟介紹，加盟優(yōu)勢，加盟扶持，

加盟條件五個按鈕，點擊按鈕可以展現(xiàn)相應(yīng)的內(nèi)容，第三部分是返回頂部的按

鈕，可以點擊返回頂部按鈕，跳轉(zhuǎn)到頂部，第四部分是頁尾部分，有京東旗艦

店，微信公眾號二維碼，天貓，官方微博，友情鏈接。

13

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

2.1.6詳情頁

圖12產(chǎn)品詳情頁結(jié)構(gòu)圖

14

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

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

此頁為商品詳情頁，如上圖所示為結(jié)構(gòu)圖和線框圖，頂部最左側(cè)的是

logo，然后是郵箱和電話，右邊的是登錄和注冊兩個按鈕，點擊按鈕可以進入

到相應(yīng)的頁面。第一部分是導(dǎo)航欄，點擊模塊可以進入到相應(yīng)的頁面，第二部

分為商品展示，左側(cè)為商品展示圖，右邊為商品名稱，商品規(guī)格，價格，發(fā)貨

地，購買按鈕以及加入購物車的按鈕，第三部分為產(chǎn)品信息圖，展現(xiàn)了產(chǎn)品的

尺碼，材質(zhì)，顏色，模特展示等，第四部分是返回頂部的按鈕，點擊可定位到

15

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

頂部，第五部分是頁尾部分，有京東旗艦店，微博，友情鏈接等。

2.1.7登錄注冊

圖14登錄注冊結(jié)構(gòu)圖

圖15登錄線框圖

16

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

圖16注冊線框圖

此頁為登錄注冊頁，如上圖所示為結(jié)構(gòu)圖和線框圖，頂部最左側(cè)的是

logo，然后是郵箱和電話，在右邊有登錄和注冊兩個按鈕，點鼠標(biāo)點擊相應(yīng)的

按鈕可以跳轉(zhuǎn)到相應(yīng)的頁面。第一部分是導(dǎo)航欄，點擊相應(yīng)的模塊可以進入到

相應(yīng)的頁面，第二部分為登錄注冊頁，采用了簡潔明了的排版方式，讓客戶一

眼就可以看出來要做什么，第三部分是返回頂部的按鈕，點擊跳轉(zhuǎn)到頂部，第

四部分是頁尾部分，有微博，京東旗艦店，微信公眾號二維碼等。

2.2頁面元素設(shè)計

2.2.1標(biāo)準(zhǔn)字

網(wǎng)頁的正文用的Adobe黑體Std字體28號字，導(dǎo)航用的是黑體24號字，

標(biāo)題用的是微軟雅黑36號字，28號字，輔助字體是Arial字體，24號字和

16號字。如圖17所示。

圖17網(wǎng)頁字體規(guī)范圖

17

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

2.2.2網(wǎng)站配色

網(wǎng)站的配色是根據(jù)品牌文化延展開來的，主色用的是藍(lán)色，藍(lán)色象征著時

尚、流行，清新、潔凈、清澈、純潔，給人一種朝氣蓬勃、舒適的感覺，點綴

色為橙色、黃色，粉色用來區(qū)分頁面層次感。如圖18所示。

主色#D1E4F3

輔助色#FEC200#FF9966#FFCCCC

圖18網(wǎng)站配色

2.2.3導(dǎo)航

導(dǎo)航設(shè)置的是最常見的頂部導(dǎo)航，導(dǎo)航的設(shè)置，可以讓用戶快速的看到模

塊，引導(dǎo)用戶，協(xié)助用戶在頁面之間進行移動，切換頁面，提示用戶當(dāng)前網(wǎng)站

的位置。如圖19所示。

圖19導(dǎo)航

2.2.4網(wǎng)站logo

網(wǎng)站的logo代表了企業(yè)的形象，簡潔鮮明的標(biāo)識易于記憶和識別，通過標(biāo)

識，可以更快，更準(zhǔn)確的識別和判斷出商品的質(zhì)量。如圖20所示。

圖20網(wǎng)站logo

2.2.5彈窗

網(wǎng)頁中的彈窗是非常常見的效果，點擊相對應(yīng)的內(nèi)容就會彈出彈窗提示。

如圖21所示。

18

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

圖21彈窗

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

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

在制作網(wǎng)頁高保真原型設(shè)計的過程中，我使用的工具是AxureRP8和Adobe

PhotoShop。

19

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

圖22首頁效果圖

此頁為首頁效果圖，網(wǎng)站首頁最顯眼的是banner，我在banner里面放了三

張熱賣的產(chǎn)品，網(wǎng)站的logo是放在左上角的，logo是企業(yè)的形象，客戶進入網(wǎng)

頁，一眼就能看到，公司介紹、熱賣推薦和產(chǎn)品分類三個模塊用的是不同的排

版，這樣顯得不那么單調(diào)。

20

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

圖23關(guān)于我們效果圖

此頁為關(guān)于我們效果圖，我在導(dǎo)航欄下面放了張圖片，顯得不那么單調(diào)，

在圖片里面做了個標(biāo)題動態(tài)面板，進入對應(yīng)的頁面，標(biāo)題也會隨著改變，可以

讓客戶清楚的知道在那個頁面，企業(yè)文化顏色用了紅色，凸顯出企業(yè)文化的重

要性，讓客戶一眼就能看到。

圖24登錄頁面效果圖

21

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

圖25注冊頁面效果圖

此頁為登錄注冊效果圖，我用的是比較傳統(tǒng)的排版，方便客戶操作起來簡

單便捷，在登陸和注冊頁面中，我用了一些圖標(biāo)和文本框提示，這樣可以使用

戶一眼就能明白要干什么。

圖26產(chǎn)品展示效果圖

22

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

此頁為產(chǎn)品展示效果圖，最顯眼的是banner區(qū)域，我放的是三張熱賣的產(chǎn)

品圖，可以讓用戶一眼就能看到熱賣產(chǎn)品是哪個，用戶點擊banner可以進入到

相應(yīng)的詳情頁，產(chǎn)品展示我分成了六個按鈕，用戶點擊相應(yīng)的按鈕可以顯示相

對應(yīng)的產(chǎn)品展示，這樣使得頁面版式更加整齊。

圖27詳情頁效果圖

23

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

此頁為詳情頁效果圖，我用的是比較傳統(tǒng)的排版，方便客戶操作起來簡單

便捷，用戶可以選擇產(chǎn)品的尺碼，顏色，數(shù)量加入購物車，加入購物車會有提

示彈窗，用戶點擊相應(yīng)的顏色，左側(cè)產(chǎn)品圖會顯示產(chǎn)品的圖片。

圖28品牌中心效果圖

此頁為品牌中心效果圖，展現(xiàn)的是品牌故事和品牌的榮譽，在這個內(nèi)容里

面我做了兩個按鈕，一個是品牌故事，一個是大事記，用戶可以通過點擊相應(yīng)

的按鈕進入對應(yīng)的頁面，在品牌故事里面，我設(shè)計了一個了解更多的圖標(biāo)，用

戶可以通過點擊了解更多這個圖標(biāo)進入到品牌故事頁面。

24

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

圖29聯(lián)系我們效果圖

此頁為聯(lián)系我們效果圖，展現(xiàn)的是加盟的內(nèi)容，在這個內(nèi)容里面我做了五

個按鈕，加盟介紹，加盟優(yōu)勢，加盟流程，加盟條件，加盟扶持，這樣可以使

得用戶更加了解我們的加盟程序。

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

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

動態(tài)特效1：Banner的輪播效果

Banner效果圖1

25

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

Banner效果圖2

Banner效果圖3

在首頁和產(chǎn)品展示里面都放了Banner的輪播，打開Axure軟件，建立動態(tài)

面板，在動態(tài)面板里面設(shè)置三個狀態(tài)，每個狀態(tài)包含一張Banner圖片，然后在

頁面載入時設(shè)置動態(tài)面板自動輪播。

動態(tài)特效2：下拉菜單和滑動條

圖30下拉列表和滑動條

在關(guān)于我們導(dǎo)航欄中設(shè)有下拉菜單，下拉菜單的內(nèi)容包括公司介紹和企業(yè)

文化，當(dāng)鼠標(biāo)移入關(guān)于我們時，會顯示下拉菜單，點擊下拉菜單中的菜單項，

可以進入相應(yīng)的網(wǎng)頁，移入菜單項，字體顏色會發(fā)生變化，這樣便于識別，當(dāng)

鼠標(biāo)移入關(guān)于我們時，會顯示滑動條，移出后會隱藏滑動條。

26

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

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

Banner的輪播特效的制作方法

（1）建立一個1920*700像素的動態(tài)面板，命名為圖片，在圖片動態(tài)面板

里面建立三個面板狀態(tài)，命名為t1,t2,t3，然后在三個面板狀態(tài)中

添加Banner圖片，保存。

（2）建立一個265*126像素的動態(tài)面板，命名為序號，在序號動態(tài)面板

中建立三個狀態(tài)，命名為x1，x2，x3，然后在x1面板狀態(tài)里面添加

三個橢圓形，大小為53*53像素，并加上文字1，2，3，文字為Arial

字體，36號字，加粗，白色，狀態(tài)一中第1個橢圓形為紅色，第

2、3個橢圓形為黑色，狀態(tài)二中第2個橢圓形為紅色，第1、3個橢

圓形為黑色，狀態(tài)三中第3個橢圓形為紅色，第1、2個橢圓形為黑

色，然后保存。

（3）繪制一個向左，向右的形狀，背景為矩形，顏色為灰色，不透明度

為27%，然后向左的形狀和矩形組合，命名為向左，向右的形狀和矩

形組合，命名為向右，向左向右組合進行隱藏。點擊選中向左，向

右組合，在右側(cè)的用例里面添加鼠標(biāo)單擊時，鼠標(biāo)移入時，鼠標(biāo)移

出時。設(shè)置如圖所示。

圖31向左設(shè)置

27

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

圖32向右設(shè)置

（4）點擊圖片動態(tài)面板，選中，在右側(cè)的用例里面設(shè)置鼠標(biāo)移入、移出。

如圖所示。

圖33鼠標(biāo)移入移出設(shè)置

（5）在頁面載入時設(shè)置圖片為Next逐漸out2000ms逐漸in2000mswra

p循環(huán)間隔500毫秒delayfirstchange，在序號動態(tài)面板上添加三

個熱區(qū)，命名為熱區(qū)1，2，3，然后對熱區(qū)進行如圖所示的操作。

28

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

圖34設(shè)置熱區(qū)1、熱區(qū)2、熱區(qū)3

Banner輪播特效說明：

（1）左右切換：點擊向左向右的按鈕可以對Banner進行隨時切換。

（2）序號切換：鼠標(biāo)移入對應(yīng)的序號，可以切換到相應(yīng)的Banner，并停

止Banner的自動輪播，鼠標(biāo)移出，Banner自動輪播。

（3）懸停效果：鼠標(biāo)移入banner上，停止banner的自動輪播，并顯示

左右切換按鈕，鼠標(biāo)移出banner，繼續(xù)自動輪播，并隱藏左右切換

按鈕。

下拉列表和滑動條的制作方法：

首先在關(guān)于我們下面加一個垂直菜單，菜單命名為關(guān)于我們菜單，設(shè)置Item

29

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

1為公司介紹，Item2為企業(yè)文化，在兩個Item上面加上兩個熱區(qū)，分別命名

為公司介紹1和企業(yè)文化2，加上一個滑動條，顏色為橙色，在公司介紹1和企

業(yè)文化2熱區(qū)做鼠標(biāo)單擊、鼠標(biāo)移入時、