繭緣家紡網(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ù)需求分析.......................................................................................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

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

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

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

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

2.1.2走進(jìn)繭緣頁(yè)版式...................................................................................4

2.1.3產(chǎn)品中心頁(yè)版式...................................................................................4

2.1.4新聞中心版式.......................................................................................6

2.1.5聯(lián)系我們版式.......................................................................................7

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

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

2.2.2網(wǎng)站LOGO設(shè)計(jì).....................................................................................8

2.2.3首頁(yè)原型...............................................................................................9

2.2.4走進(jìn)繭緣頁(yè)原型.................................................................................11

2.2.5產(chǎn)品中心頁(yè).........................................................................................12

2.2.6新聞中心頁(yè)原型.................................................................................13

2.2.7聯(lián)系我們頁(yè)原型....................................................................................14

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

3設(shè)計(jì)總結(jié)..................................................................................................................16

參考資料.........................................................................................................................17

I

湖南商務(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è)背景

1.1.1用戶(hù)需求分析

自互聯(lián)網(wǎng)時(shí)代到來(lái)，電子商務(wù)發(fā)展異常迅猛的當(dāng)下，網(wǎng)上購(gòu)物也逐漸成為

了人們?nèi)粘Ｉ钪械谋憬莘绞?，越?lái)越多的用戶(hù)選擇足不出戶(hù)在網(wǎng)上購(gòu)買(mǎi)家紡，

盡情享受網(wǎng)絡(luò)時(shí)代的方便與快捷，家紡四件套，這類(lèi)生活用品，越來(lái)越多的人

選擇進(jìn)行網(wǎng)購(gòu)，因?yàn)楸憬菪院瓦x擇多樣性。

繭緣家紡的建設(shè)背景是在B2C、B2B經(jīng)濟(jì)發(fā)展迅速，以及互聯(lián)網(wǎng)經(jīng)濟(jì)普及

的現(xiàn)在。網(wǎng)絡(luò)發(fā)展迅速,5G時(shí)代的到來(lái)會(huì)提供大量的網(wǎng)絡(luò)用戶(hù)，從而使得互聯(lián)

網(wǎng)經(jīng)濟(jì)更為發(fā)達(dá)。大部分購(gòu)入人群是居家女性，第一點(diǎn)，便捷性，通過(guò)網(wǎng)上購(gòu)

物的方向選擇商品，比線下實(shí)體店購(gòu)買(mǎi)更加省時(shí)省力，方便快捷。第二點(diǎn)，選

擇多樣性，通過(guò)網(wǎng)絡(luò)使得商品的選擇變多，在網(wǎng)上可以瀏覽的家紡的樣式，材

質(zhì)，面料，選擇相對(duì)于線下而比較，選擇更多。

在同類(lèi)型家紡網(wǎng)站中，發(fā)展較為良好的有五家網(wǎng)站，分別是水星家紡，富

安娜家紡，多喜愛(ài)家紡，博洋家紡，夢(mèng)潔家紡。在這些家紡網(wǎng)站中，作為專(zhuān)業(yè)

家紡購(gòu)置網(wǎng)站的是富安娜家紡，多喜愛(ài)家紡。從經(jīng)營(yíng)模式和技巧規(guī)模上看水星

家紡和夢(mèng)潔家紡。

繭緣家紡避開(kāi)與傳統(tǒng)家紡品牌高度相似的線下宣傳模式的大方向。選擇使

用大型B2C平臺(tái)，以線下宣傳為輔的方式來(lái)進(jìn)行品牌化的宣傳，家紡是生活必

需品，更加注重品質(zhì)。繭緣家紡以此為基點(diǎn)，通過(guò)了解用戶(hù)的真正需求，和對(duì)

于產(chǎn)品的關(guān)注點(diǎn)以及樹(shù)立繭緣家紡品牌的專(zhuān)業(yè)性，以此為背景來(lái)搭建品牌網(wǎng)站。

繭緣家紡?fù)ㄟ^(guò)“首頁(yè)”頁(yè)面，幫助用戶(hù)快速導(dǎo)航，在首頁(yè)頁(yè)面上對(duì)于繭緣

能夠產(chǎn)生一定的了解，而“產(chǎn)品分類(lèi)”頁(yè)面幫助客戶(hù)找到自己心儀的家紡產(chǎn)品。

“走進(jìn)繭緣”頁(yè)面幫助用戶(hù)了解品牌，產(chǎn)生信任度，從而對(duì)產(chǎn)品方面放心。人

們對(duì)家紡的選擇了解的不夠全面，可能會(huì)購(gòu)買(mǎi)到不符合自己需求的家紡,通過(guò)

產(chǎn)品分類(lèi)進(jìn)入“詳情頁(yè)”，通過(guò)對(duì)單個(gè)產(chǎn)品的宣傳讓客戶(hù)更好的了解家紡材質(zhì)

的區(qū)別，選擇需要的家紡。

1

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

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

繭緣家紡的網(wǎng)站實(shí)現(xiàn)的主要功能包括，首頁(yè)、走進(jìn)繭緣、產(chǎn)品中心、新聞

中心、以及聯(lián)系我們五個(gè)模塊，其中“首頁(yè)”的功能主要是讓用戶(hù)在最短的時(shí)

間內(nèi)了解網(wǎng)站的基本功能，其中包括了繭緣logo展示、商品推薦的展示、商

品詳情的展示、產(chǎn)品宣傳banner的展示以及底部的企業(yè)信息?！白哌M(jìn)繭緣”展

示包括了公司簡(jiǎn)介展示、企業(yè)文化展示、品牌故事展示。“產(chǎn)品中心”主要通

過(guò)產(chǎn)品特征分類(lèi)展示產(chǎn)品，是繭緣產(chǎn)品的特色部分。然后“新聞中心”頁(yè)面主

要展示了品牌過(guò)往的大事件，取得的成就，產(chǎn)品技術(shù)上的突破，產(chǎn)品理念的宣

傳。對(duì)于品牌的建設(shè)人才是必不可少的，所以在進(jìn)行品牌建設(shè)的同時(shí)，也要通

過(guò)“聯(lián)系我們”頁(yè)面來(lái)展示聯(lián)系方式，公司地址，達(dá)到吸引用戶(hù)和人才的目的。

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

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

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

2

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

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

當(dāng)客戶(hù)有購(gòu)買(mǎi)家紡的想法，卻沒(méi)有明確的選擇，那么當(dāng)他打開(kāi)繭緣家紡，

他可以根據(jù)自己的需求和喜好在產(chǎn)品頁(yè)面中選擇他喜歡的家紡，這樣他選擇了

喜歡的家紡之后可以點(diǎn)擊購(gòu)買(mǎi)。同時(shí)，在他由于網(wǎng)頁(yè)的設(shè)計(jì)的獨(dú)特，在閑逛網(wǎng)

頁(yè)的時(shí)候，他看到了繭緣家紡的產(chǎn)品推薦頁(yè)面，發(fā)現(xiàn)其中推薦的家紡四件套他

很喜歡，于是，點(diǎn)擊進(jìn)入詳情頁(yè)，了解到材質(zhì)，面料，具體的細(xì)節(jié)工藝，發(fā)現(xiàn)

是自己的心儀所選，于是選擇購(gòu)買(mǎi)。

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

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

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

繭緣網(wǎng)頁(yè)網(wǎng)站整體版面設(shè)計(jì)的時(shí)候運(yùn)用了AdobePhotoshopCC2019來(lái)制

作網(wǎng)頁(yè)的美化，同時(shí)運(yùn)用了AdobeIllustratorCS6來(lái)制作網(wǎng)頁(yè)首頁(yè)的logo以及

細(xì)節(jié)化圖標(biāo)，網(wǎng)站首頁(yè)的功能主要是讓用戶(hù)在最短的時(shí)間內(nèi)了解網(wǎng)站的基本功

能并且通過(guò)簡(jiǎn)約的設(shè)計(jì)對(duì)于品牌有一個(gè)簡(jiǎn)單的認(rèn)識(shí)，所以在網(wǎng)站首頁(yè)時(shí)，將網(wǎng)

站首頁(yè)的內(nèi)容有繁化簡(jiǎn)，將導(dǎo)航欄、收藏、底部設(shè)計(jì)簡(jiǎn)約容易了解，并且在品

牌logo上進(jìn)行設(shè)計(jì)，將品牌理念能夠在logo上呈現(xiàn)出來(lái)。

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

3

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

2.1.2走進(jìn)繭緣頁(yè)版式

走進(jìn)繭緣頁(yè)是作為繭緣家紡的一個(gè)品牌頁(yè)，向客戶(hù)展示的是擁有優(yōu)秀企業(yè)

文化，濃厚品牌理念的綜合頁(yè)面，主要是向用戶(hù)介紹產(chǎn)品的由來(lái)和品牌的歷史

與榮譽(yù)，從這個(gè)方面切入可以讓用戶(hù)了解到我們的品牌文化和品牌價(jià)值，從而

能夠給用戶(hù)營(yíng)造我們品牌的獨(dú)特化，讓用戶(hù)對(duì)我們的品牌和產(chǎn)品信賴(lài)與放心。

繭緣家紡基于完整的網(wǎng)站建設(shè)，通過(guò)品牌的產(chǎn)品和網(wǎng)店相互搭配，利用客戶(hù)對(duì)

產(chǎn)品的親近感和依賴(lài)感，使得客戶(hù)更加了解產(chǎn)品的內(nèi)容，從而使客戶(hù)更加了解

我們的家紡產(chǎn)品內(nèi)容，讓大家更容易接受這些，從而突出我們網(wǎng)站的個(gè)性化特

點(diǎn)，輸出品牌的優(yōu)秀文化和理念，從而吸引顧客，達(dá)到引流的目的，提高用戶(hù)

的體驗(yàn)質(zhì)量。

圖3走進(jìn)繭緣線框圖

2.1.3產(chǎn)品中心頁(yè)版式

4

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

產(chǎn)品中心頁(yè)是作為繭緣家紡的一個(gè)產(chǎn)品頁(yè)，向客戶(hù)展示的是各系列類(lèi)型的

產(chǎn)品的綜合頁(yè)面，向用戶(hù)介紹產(chǎn)品的材質(zhì)工藝，讓顧客可以快捷的找到自己需

求的產(chǎn)品，如果用戶(hù)對(duì)于我們的系列產(chǎn)品感興趣，那么他可以點(diǎn)擊感興趣的系

列查看。繭緣家紡基于完整的網(wǎng)站建設(shè)，通過(guò)品牌的產(chǎn)品之間的相互搭配，利

用客戶(hù)對(duì)產(chǎn)品的親近感和依賴(lài)感，從而把用戶(hù)轉(zhuǎn)換成顧客，通過(guò)網(wǎng)站個(gè)性化的

推薦，產(chǎn)品優(yōu)勢(shì)，吸引顧客，引導(dǎo)客戶(hù)購(gòu)買(mǎi)。

圖4產(chǎn)品中心線框圖

5

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

2.1.4新聞中心版式

新聞中心主要是繭緣家紡的產(chǎn)品進(jìn)行更新迭代，取得了技術(shù)上的突破，獲

得了產(chǎn)品上的榮譽(yù)，品牌過(guò)往的大事件在新聞中心這個(gè)專(zhuān)門(mén)的板塊進(jìn)行廣而告

之，目的是加強(qiáng)用戶(hù)對(duì)于產(chǎn)品的信賴(lài)，相信產(chǎn)品的品質(zhì)，對(duì)于品牌的信任加深，

從而達(dá)到用戶(hù)對(duì)于產(chǎn)品購(gòu)買(mǎi)的這一目的，完成轉(zhuǎn)化率。對(duì)于此頁(yè)面設(shè)計(jì)，使用

了圖文結(jié)合的模式，能夠讓用戶(hù)一眼就獲取到重要信息，從而了解品牌，加深

對(duì)品牌的印象，其次在配色上采用了網(wǎng)站主要配色，在此上添加花紋疊加，簡(jiǎn)

約而不簡(jiǎn)單。

圖5新聞中心線框圖

6

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

2.1.5聯(lián)系我們版式

聯(lián)系我們這一塊分為兩個(gè)小模塊，聯(lián)系我們和加入我們。其中聯(lián)系我們主

要是給線下經(jīng)銷(xiāo)商的一個(gè)頁(yè)面，主要是吸引線下家紡店引進(jìn)品牌，達(dá)到加盟的

一個(gè)目地。加入我們這一塊，主要是是為了吸引人才，一個(gè)品牌的進(jìn)步與發(fā)展，

是離不開(kāi)人才的,所以主要目的是吸引人才引進(jìn)人才。

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

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

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

關(guān)于繭緣家紡網(wǎng)站色彩設(shè)計(jì)與搭配主要是從網(wǎng)頁(yè)主色系里面選擇，主要是

從品牌理念中提取，以及對(duì)于家紡行業(yè)這一塊，根據(jù)它的性質(zhì)特點(diǎn)，然后進(jìn)行

一定的定位，之后來(lái)進(jìn)行的色彩搭配，家紡的特性以及公司的調(diào)性都包含在色

彩里面，選擇了合適的配色。提高網(wǎng)頁(yè)設(shè)計(jì)感。

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

7

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

在組色選擇時(shí)，選擇了透明度不同飽和度不同綠色作為主色系，其中占比

從40%-60%不等。標(biāo)準(zhǔn)色中參照了運(yùn)用于網(wǎng)頁(yè)的標(biāo)志標(biāo)題主菜單和主色塊，另

外主要搭配的形狀有長(zhǎng)方形圓形等對(duì)稱(chēng)類(lèi)元素，其中占比5%左右，網(wǎng)頁(yè)的色彩

搭配a主要運(yùn)用了幾個(gè)原則以及顏色的特點(diǎn)主要運(yùn)用綠色，綠色，是極具自然

特征的顏色，同時(shí)，綠色是高頻率顏色，人們會(huì)在高頻率顏色的環(huán)境下產(chǎn)生平

靜的感覺(jué)，這也符合產(chǎn)品的特性，同時(shí)綠色在設(shè)計(jì)中是一種平衡協(xié)調(diào)效果，深

淺不一的綠可以給空間營(yíng)造不同的感覺(jué)。在一定程度上可以讓用戶(hù)感受到舒適，

達(dá)到品牌目的，其次，選擇了透明度飽和度不同的綠色，雖然是同一色系，但

可以帶來(lái)不一樣的視覺(jué)體驗(yàn)，不會(huì)產(chǎn)生是視覺(jué)疲勞的同時(shí)，賞心悅目感到綠色

帶來(lái)的舒適，同時(shí)白色，藍(lán)色點(diǎn)綴搭配給人不期而遇春天的感覺(jué)，柔和的白色

與活潑的黃色給綠色帶來(lái)生機(jī)如同春雨中的薄荷，感嘆顏色帶給我們的震撼與

魅力。

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

在網(wǎng)站設(shè)計(jì)中，Logo作為公司或者網(wǎng)站的標(biāo)識(shí)起著非常重要的作用。一個(gè)

制作精美Logo不僅可以很好的樹(shù)立公司形象，還可以傳達(dá)豐富的產(chǎn)品信息。

網(wǎng)站Logo設(shè)計(jì)是網(wǎng)站特色和理念的集中表現(xiàn)，它用于傳遞網(wǎng)站的定位和經(jīng)營(yíng)

理念，同時(shí)也便人用戶(hù)識(shí)別公司。一個(gè)網(wǎng)站的首頁(yè)美觀與否往往是初訪者決定

是否進(jìn)行深入瀏覽的標(biāo)準(zhǔn)，而Logo作為首先映入訪問(wèn)者眼簾的具體形象，其

重要性不言而喻。一般的網(wǎng)站logo有圖案或者文字組合而成，繭緣家紡對(duì)于l

ogo設(shè)計(jì)側(cè)重強(qiáng)調(diào)的是表達(dá)出繭緣家紡的內(nèi)涵所在設(shè)計(jì)理念所在，所以主旨是

把家紡的柔和和舒適表達(dá)出來(lái)，所以選擇了圓潤(rùn)的線條的來(lái)進(jìn)行l(wèi)ogo的設(shè)計(jì)。

同時(shí)為清楚的表達(dá)出我們的主體，所以我們將繭緣兩個(gè)個(gè)字進(jìn)行了設(shè)計(jì)，運(yùn)用

幼圓字體，加以線條，字形的變化，加上家紡產(chǎn)業(yè)柔和舒適的產(chǎn)品特點(diǎn)，融合

而成的繭緣家紡logo。

8

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

繭緣家紡logo中內(nèi)容包括了優(yōu)美的字形，流暢的線條，還有產(chǎn)品的特點(diǎn)，

簡(jiǎn)潔大方，美觀自然，渾然一體，迎合了網(wǎng)頁(yè)主體。同時(shí)，考慮到家紡行業(yè)產(chǎn)

品特點(diǎn)的柔和舒適感，所以我們將字體進(jìn)行了短暫的變形，使其更加自然和諧，

融為一體，同時(shí)，將顏色定義成網(wǎng)站主色調(diào)的綠色，相得益彰。繭緣家紡logo，

它符合了國(guó)際標(biāo)準(zhǔn)，同時(shí)包括了精美，獨(dú)特與一體，與網(wǎng)站的整體風(fēng)格相融合，

又能突出繭緣家紡網(wǎng)頁(yè)的類(lèi)型內(nèi)容以及風(fēng)格，完美地表達(dá)了出家紡家紡的主體

思想。

圖8網(wǎng)站logo原型

2.2.3首頁(yè)原型

9

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

繭緣家紡的首個(gè)頁(yè)面選用了綠色和白色的搭配，讓用戶(hù)初瀏覽能夠感覺(jué)到

頁(yè)面帶來(lái)的舒適感，產(chǎn)生好感，其次其中參雜了小元素和鏈接塊。在模塊的處

理上將中國(guó)風(fēng)的元素融入到細(xì)節(jié)，將網(wǎng)頁(yè)的細(xì)節(jié)化處理做到了細(xì)微。從細(xì)節(jié)中

體現(xiàn)出品牌理念，讓用戶(hù)感受到如沐春風(fēng)般的溫暖。在背景圖片選取時(shí)，特意

選用了與書(shū)籍文藝類(lèi)有關(guān)的圖片，襯托出整個(gè)網(wǎng)店優(yōu)雅清淡高雅的氛圍，給人

一種儒雅的氣質(zhì)感覺(jué)。

圖9首頁(yè)原型

10

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

2.2.4走進(jìn)繭緣頁(yè)原型

在走進(jìn)繭緣網(wǎng)頁(yè)界面，主要是展示品牌理念，品牌主張，品牌思想。主要

分為三個(gè)部分，公司簡(jiǎn)介，企業(yè)文化，品牌故事，公司簡(jiǎn)介主要是對(duì)應(yīng)于公司

的概括介紹，通過(guò)簡(jiǎn)短的介紹，讓用戶(hù)更直觀的了解品牌，展示公司風(fēng)采。企

業(yè)文化頁(yè)輸出企業(yè)特有的文化形象，從而樹(shù)立企業(yè)的社會(huì)形象。品牌故事，輸

出品牌精神，使得用戶(hù)被這種精神感染，在用戶(hù)心中留下印象，形成品牌口碑，

進(jìn)而激發(fā)用戶(hù)的潛在購(gòu)買(mǎi)欲望。

圖10走進(jìn)繭緣頁(yè)原型

11

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

2.2.5產(chǎn)品中心頁(yè)

產(chǎn)品展示頁(yè)面從網(wǎng)頁(yè)高保真圖片來(lái)看，頁(yè)面設(shè)計(jì)十分簡(jiǎn)單簡(jiǎn)潔，由簡(jiǎn)單的

圖文，鏈接以及圖案組成。其中模塊之間簡(jiǎn)潔分明，一目了然，對(duì)于圖片的排

列與文字的組合，進(jìn)行看一些巧思，看上去精致舒適，其中的線條組合與色塊

的不同排列，讓用戶(hù)產(chǎn)生視覺(jué)美感，從而進(jìn)行下一步點(diǎn)擊查看，，以達(dá)到點(diǎn)擊

購(gòu)買(mǎi)的效果。

圖11產(chǎn)品介紹頁(yè)原型

12

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

2.2.6新聞中心頁(yè)原型

新聞中心頁(yè)面的設(shè)計(jì)采用了圖文結(jié)合的方式，方便用戶(hù)瀏覽，能夠快速的

獲取信息，標(biāo)題醒目，能夠達(dá)到很好的點(diǎn)擊效果。整體設(shè)計(jì)是網(wǎng)站整體風(fēng)格的

延續(xù)，對(duì)于新聞模塊之間，進(jìn)行了不同的組合排列，添加了配圖，能夠能加醒

目的突出特點(diǎn)，吸引用戶(hù)的視線，從而更好的進(jìn)行宣傳與推廣。

圖12新聞中心頁(yè)原型

13

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

2.2.7聯(lián)系我們?cè)?/p>

聯(lián)系我們頁(yè)面的設(shè)計(jì)簡(jiǎn)潔明了，能夠讓用戶(hù)在快速瀏覽中找尋需要的信息，

以達(dá)到聯(lián)系的目的，點(diǎn)明此頁(yè)面的主題，開(kāi)門(mén)見(jiàn)山，目的明確，方便用戶(hù)瀏覽，

引導(dǎo)用戶(hù)行為，并且設(shè)置了一個(gè)地圖模塊，寫(xiě)明了地址，能夠讓用戶(hù)的操作更

加簡(jiǎn)潔化，瀏覽時(shí)間減少，更好的獲取信息。

圖13新聞中心頁(yè)原型

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

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

14

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

動(dòng)態(tài)特效1：網(wǎng)頁(yè)banner自動(dòng)輪播（箭頭可切換頁(yè)面）

圖14banner輪播特效效果

02動(dòng)態(tài)特效2：網(wǎng)頁(yè)點(diǎn)擊特效（鼠標(biāo)移動(dòng)上去即可出現(xiàn)效果）

圖15導(dǎo)航點(diǎn)擊效果

02動(dòng)態(tài)特效3：網(wǎng)站收藏效果（鼠標(biāo)點(diǎn)擊即可出現(xiàn)效果）

圖16收藏點(diǎn)擊效果

15

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

3設(shè)計(jì)總結(jié)

關(guān)于繭緣家紡網(wǎng)頁(yè)的設(shè)計(jì)，整整耗時(shí)兩個(gè)月的時(shí)間，中途進(jìn)行了多次的修

改，非常感謝老師的輔導(dǎo)和指導(dǎo)幫助，在制作過(guò)程中為我解答疑惑。在