繭緣家紡網(wǎng)站W(wǎng)eb端網(wǎng)頁設(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)頁層次設(shè)計(jì).......................................................................................2

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

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

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

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

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

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

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

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

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

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

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

2.2.3首頁原型...............................................................................................9

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

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

2.2.6新聞中心頁原型.................................................................................13

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

2.3網(wǎng)頁動(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)頁設(shè)計(jì)

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

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

1.1.1用戶需求分析

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

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

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

選擇進(jìn)行網(wǎng)購，因?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í)代的到來會(huì)提供大量的網(wǎng)絡(luò)用戶，從而使得互聯(lián)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1

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

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

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

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

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

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

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

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

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

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

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

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

1.2.1網(wǎng)頁層次設(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)客戶有購買家紡的想法，卻沒有明確的選擇，那么當(dāng)他打開繭緣家紡，

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

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

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

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

是自己的心儀所選，于是選擇購買。

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

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

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

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

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

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

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

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

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

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

3

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

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

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

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

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

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

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

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

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

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

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

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

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

4

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

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

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

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

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

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

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

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

5

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

2.1.4新聞中心版式

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

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

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

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

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

對(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)銷商的一個(gè)頁面，主要是吸引線下家紡店引進(jìn)品牌，達(dá)到加盟的

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

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

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

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

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

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

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

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

彩里面，選擇了合適的配色。提高網(wǎng)頁設(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)頁的標(biāo)志標(biāo)題主菜單和主色塊，另

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

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

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

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

淺不一的綠可以給空間營造不同的感覺。在一定程度上可以讓用戶感受到舒適，

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

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

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

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

魅力。

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

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

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

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

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

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

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

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

把家紡的柔和和舒適表達(dá)出來，所以選擇了圓潤(rùn)的線條的來進(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)頁主體。同時(shí)，考慮到家紡行業(yè)產(chǎn)

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

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

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

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

思想。

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

2.2.3首頁原型

9

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

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

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

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

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

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

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

圖9首頁原型

10

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

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

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

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

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

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

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

進(jìn)而激發(fā)用戶的潛在購買欲望。

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

11

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

2.2.5產(chǎn)品中心頁

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

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

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

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

購買的效果。

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

12

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

2.2.6新聞中心頁原型

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

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

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

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

圖12新聞中心頁原型

13

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

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

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

以達(dá)到聯(lián)系的目的，點(diǎn)明此頁面的主題，開門見山，目的明確，方便用戶瀏覽，

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

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

圖13新聞中心頁原型

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

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

14

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

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

圖14banner輪播特效效果

02動(dòng)態(tài)特效2：網(wǎng)頁點(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)頁的設(shè)計(jì)，整整耗時(shí)兩個(gè)月的時(shí)間，中途進(jìn)行了多次的修

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