稻草人男裝網(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ì).......................................................................................1

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

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

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

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

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

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

2.1.2男裝分類頁版式...................................................................................5

2.1.3潮流推薦頁版式...................................................................................5

2.1.4時(shí)代周刊頁版式...................................................................................6

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

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

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

3網(wǎng)站前端設(shè)計(jì)............................................................................................................9

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

3.1.1網(wǎng)站首頁原型.......................................................................................9

3.1.2男裝分類頁原型.................................................................................10

3.1.3潮流推薦頁原型.................................................................................10

3.1.4時(shí)代周刊頁原型.................................................................................11

3.1.5關(guān)于我們頁原型.................................................................................12

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

4設(shè)計(jì)總結(jié)..................................................................................................................14

參考資料.........................................................................................................................16

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用戶需求分析

自5G網(wǎng)絡(luò)普及以來，網(wǎng)上購物現(xiàn)在已經(jīng)普及了，網(wǎng)上買衣服也逐漸成為了

人們?nèi)粘Ｉ钪械谋憬莘绞剑絹碓蕉嗟娜诉x擇足不出戶的在網(wǎng)上購買衣服，

盡情享受網(wǎng)絡(luò)購物的方便和快捷。

稻草人男裝的建設(shè)背景是在電商平臺(tái)經(jīng)濟(jì)發(fā)展迅速，短視頻平臺(tái)以及互聯(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á)。衣服作為大眾商品，在網(wǎng)上的需求量一直都很高。

原因有以下幾點(diǎn)，第一，很多人有購衣的需求，但是對想要的衣服只有一個(gè)朦

朧的概念，不知道自己真正需要什么樣的衣服，所以就喪失購買衣服的欲望；

第二，很多人認(rèn)為線下購買衣服太麻煩，且可以選擇的款式太少了。

在同類型購買衣服網(wǎng)站中，發(fā)展較為良好的有八家網(wǎng)站，分別是唯品會(huì)，

天貓，優(yōu)衣庫，凡客誠品，優(yōu)購網(wǎng)，聚美優(yōu)品，蘑菇街，沙批直購。在這些中，

作為專業(yè)衣服購置網(wǎng)站的是優(yōu)衣庫和唯品會(huì)。從經(jīng)營模式和技巧規(guī)模上看，唯

品會(huì)和優(yōu)衣庫更勝一籌。

稻草人男裝避開與傳統(tǒng)網(wǎng)店的價(jià)格競爭。大型B2C平臺(tái)往往用衣服來做營

銷競爭手段，衣服是標(biāo)準(zhǔn)化商品，很容易體現(xiàn)出價(jià)格優(yōu)勢。稻草人男裝另辟蹊

徑，通過了解用戶的真正需求，以及稻草人男裝特有服務(wù)模式來吸引客源，以

此為背景建設(shè)網(wǎng)站。

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

稻草人男裝的網(wǎng)站實(shí)現(xiàn)的主要功能包括，首頁、男裝分類、潮流推薦、時(shí)

代周刊、以及關(guān)于我們五個(gè)模塊，其中“首頁”的功能主要是讓用戶在最短的

時(shí)間內(nèi)了解網(wǎng)站的基本功能，其中包括了logo的展示、男裝宣傳banner的展

示以及底部的企業(yè)信息和法律聲明。“男裝分類”展示包括了分類導(dǎo)航欄、logo

展示、商品詳情的展示、底部的企業(yè)信息和法律聲明的展示，稻草人男裝通過

“男裝分類”頁面幫助客戶導(dǎo)航，讓客戶找到自己心儀的衣服?！俺绷魍扑]”

主要展示了店家通過認(rèn)真篩選以及專門有海報(bào)宣傳的服裝，海報(bào)下方是新品推

1

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

薦和潮流推薦，展示最近上新的產(chǎn)品以及比較潮流的服裝產(chǎn)品，這個(gè)頁面是稻

草人男裝的特色部分。然后“時(shí)代周刊”頁面主要展示了由專業(yè)媒體制作的關(guān)

于國內(nèi)外一線科學(xué)、藝術(shù)、自然、等一系列的時(shí)代雜志。最后“關(guān)于我們”頁

面主要展示了稻草人男裝的經(jīng)營理念，創(chuàng)造由來，以及一些公司新聞，能夠讓

客戶清楚了解公司的基本信息以及相關(guān)動(dòng)態(tài)。

2

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

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

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

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

3

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

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

當(dāng)客戶有購買衣服的欲望，卻沒有明確的目標(biāo)，當(dāng)他進(jìn)入稻草人男裝時(shí)，

他可以根據(jù)男裝分類頁面選擇他喜歡的一類服裝，這樣他在看到自己喜歡的衣

服即可以立即購買。同時(shí)，在他由于網(wǎng)頁的設(shè)計(jì)的獨(dú)特，在閑逛網(wǎng)頁是，他看

到了推薦專欄，發(fā)現(xiàn)其中推薦的衣服他很喜歡，于是，再次點(diǎn)擊，選擇購買。

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

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

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

稻草人男裝網(wǎng)頁首頁設(shè)計(jì)的時(shí)候運(yùn)用了最新版的AdobePhotoshopCC來

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

及細(xì)節(jié)化圖標(biāo)。

網(wǎng)站首頁的功能主要是讓用戶在最短的時(shí)間內(nèi)了解網(wǎng)站的基本功能，所以

在網(wǎng)站首頁時(shí)，將網(wǎng)站首頁的內(nèi)容有繁化簡，將導(dǎo)航欄和底部設(shè)計(jì)簡化到極致。

頭部是LOGO以及導(dǎo)航欄（包括首頁、男裝分類、潮流推薦、時(shí)代周刊、關(guān)于

我們），導(dǎo)航欄下方是輪播宣傳海報(bào)，宣傳稻草人男裝的潮流產(chǎn)品，最后是法

律聲明以及信息欄。

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

4

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

2.1.2男裝分類頁版式

圖3男裝分類頁線框圖

對于男裝分類頁，是依據(jù)本店根據(jù)服裝品類來進(jìn)行的梯級(jí)式設(shè)計(jì)。作為新

潮流的網(wǎng)絡(luò)購衣平臺(tái)的稻草人男裝，同其他很多一線網(wǎng)絡(luò)平臺(tái)一樣采用服裝品

類管理設(shè)計(jì)。稻草人男裝的獨(dú)特創(chuàng)新在于在保證了基本的需求之后，在一定程

度對網(wǎng)頁美化與設(shè)計(jì)。分類后的服裝更加讓客戶快速方便快捷的找到自己需要

的產(chǎn)品，通過這樣的方式大大節(jié)省了客戶的時(shí)間，同時(shí)也提升了客戶對店鋪的

依賴，心賴程度容易形成忠實(shí)的，顧客和店主關(guān)系，同時(shí)通過這種簡單的設(shè)計(jì)

能最高效率的保證。

2.1.3潮流推薦頁版式

5

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

潮流推薦頁是作為稻草人男裝的特色，向客戶展示的是網(wǎng)頁的綜合性和獨(dú)

圖4潮流推薦頁線框圖

特性于一體的綜合頁面，我們從了解用戶的需求和用戶的瀏覽行為上來看，客

戶習(xí)慣性瀏覽比較優(yōu)美完整和個(gè)性的網(wǎng)頁。稻草人男裝基于完整的網(wǎng)站建設(shè)，

通過的產(chǎn)品和網(wǎng)店相互搭配，利用客戶對產(chǎn)品的親近感和依賴感，使得客戶更

加了解產(chǎn)品的內(nèi)容，從而使客戶更加了解我們的服裝版式內(nèi)容，讓大家更容易

接受這些，從而突出我們網(wǎng)站的個(gè)性化特點(diǎn)，吸引顧客，達(dá)到引流的目的，提

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

2.1.4時(shí)代周刊頁版式

稻草人男裝接下來的兩個(gè)項(xiàng)目包括了時(shí)代周刊和關(guān)于我們的項(xiàng)目網(wǎng)頁內(nèi)容。

時(shí)代周刊是稻草人男裝推出的另一個(gè)特色，網(wǎng)頁內(nèi)容主要推廣了國內(nèi)外各大新

浪潮科技文化娛樂藝術(shù)科學(xué)等各方面的現(xiàn)代高端時(shí)尚的雜志，為客戶滿足新奇

知識(shí)各方面的需求。在周刊中里面較為出名的時(shí)代周刊time，還有自然周刊自

然醫(yī)療周刊柳葉刀等等都是國內(nèi)外著名刊物，這些刊物都是通過一線品牌和對

國內(nèi)外刊物行情了解進(jìn)行訂閱，這也體現(xiàn)了稻草人男裝的綜合軟實(shí)力。關(guān)于我

們這一塊是作為稻草人男裝進(jìn)行外部宣傳，以及對于客戶作為一個(gè)簡單的介紹

的項(xiàng)目，中間的設(shè)計(jì)包含了簡單的線條與形狀的搭配，然后簡單的顏色對比，

重點(diǎn)是突出其中的設(shè)計(jì)風(fēng)格。關(guān)于我們頁面文字這一塊，主要是強(qiáng)調(diào)了稻草人

男裝的服務(wù)宗旨，以及建設(shè)理念。稻草人男裝給自己的定位，也是服務(wù)大眾，

6

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

所以獨(dú)特的設(shè)計(jì)也是針對于這一部分群體而言。

圖5時(shí)代周刊頁線框圖

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

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

關(guān)于稻草人男裝網(wǎng)站色彩設(shè)計(jì)與搭配主要是從網(wǎng)頁主色系里面選擇，主要

從logo里面提取顏色，以及對于服裝行業(yè)，服裝網(wǎng)絡(luò)行業(yè)這一塊，根據(jù)它的性

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

質(zhì)特點(diǎn)，然后進(jìn)行一定的定位，之后來進(jìn)行的色彩搭配，服裝的特性以及公司

7

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

的調(diào)性都包含在色彩里面，選擇了合適的配色。提高網(wǎng)頁設(shè)計(jì)感。

在組色選擇時(shí)，我們選擇了透明度不同飽和度不同黑白灰相間的組合原組合

元素特點(diǎn)，其中占比從10%-30%不等。標(biāo)準(zhǔn)色中參照了運(yùn)用于網(wǎng)頁的標(biāo)志標(biāo)題主

菜單和主色塊，另外主要搭配的形狀有三角形正方形等對稱類元素，其中占比5%

左右，網(wǎng)頁的色彩搭配主要運(yùn)用了幾個(gè)原則以及幾種顏色的特點(diǎn)主要運(yùn)用了紅

色，紅色，讓人感到溫暖，但卻有強(qiáng)烈的刺激性，所以我們降低了紅色的明度，

使他的緊張沖動(dòng)的這種視覺疲勞的顏色，錯(cuò)覺將的同時(shí)又能激起人的吸引注意

力。黃色有敏感和緊張不安的情緒，但卻是一種嬌貴的色彩，所以我們引入黃

色點(diǎn)綴，這樣讓色彩感更豐富，一定程度上吸引了讀者的閱讀興趣，同時(shí)我們

摻雜了藍(lán)色與綠色相間的顏色，這種顏色樸實(shí)且內(nèi)向，跟我們網(wǎng)站服裝內(nèi)容相

符合，這些有張力的色彩提供了一個(gè)更深遠(yuǎn)廣闊平靜的空間，襯托出友善謙虛

的色彩跳躍感，淡化之后的藍(lán)色給人一種個(gè)性的色彩，幾種顏色的適量搭配使

得。使得構(gòu)成圖形更加明顯，中間的擴(kuò)張感和收縮感綜合，讓人感覺到了一種

平和安穩(wěn)柔順恬靜滿足。同時(shí)，白色，米藍(lán)色以及棕灰色的點(diǎn)綴搭配給人一種

純潔且樸實(shí)快樂的感覺，同時(shí)又增加了一些低調(diào)含蓄的內(nèi)涵。

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)站特色和內(nèi)涵的集中表現(xiàn)，它用于傳遞網(wǎng)站的定位和經(jīng)營理念，

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

行深入瀏覽的標(biāo)準(zhǔn)，而Logo作為首先映入訪問者眼簾的具體形象，其重要性不

言而喻。一般的網(wǎng)站logo有圖案或者文字組合而成，稻草人男裝對于logo設(shè)

計(jì)側(cè)重強(qiáng)調(diào)的是表達(dá)出稻草人男裝的內(nèi)涵所在設(shè)計(jì)理念所在，所以我們強(qiáng)調(diào)服

裝是中庸含蓄的東西表達(dá)出來，同時(shí)為清楚的表達(dá)出我們的主體，稻草人男裝

的logo中內(nèi)容包括了坐著的男人，方正的稻草人男裝加上底下的英文字母組成

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

的logo，簡潔大方，美觀自然，渾然一體，迎合了網(wǎng)頁主體。同時(shí)我將英文字

8

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

體進(jìn)行了短暫的變形，使其更加自然和諧，融為一體，同時(shí)，將顏色定義層最

簡單的基本色色調(diào)白色。稻草人logo，它符合了國際標(biāo)準(zhǔn)，同時(shí)包括了精美，

獨(dú)特與一體，與網(wǎng)站的整體風(fēng)格相融合，又能突出稻草人男裝網(wǎng)頁的類型內(nèi)容

以及風(fēng)格，完美地表達(dá)了出稻草人男裝的主體思想。

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

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

3.1.1網(wǎng)站首頁原型

稻草人男裝這一張高保真網(wǎng)站首頁圖片的設(shè)計(jì)理念主要包括了以下幾個(gè)方

面。第一側(cè)重強(qiáng)調(diào)了服裝網(wǎng)店主要主導(dǎo)塊業(yè)務(wù)。第二，從banner中體現(xiàn)出了活

動(dòng)的主題，同時(shí)從側(cè)面反映了店鋪主題。第三一個(gè)從首頁奠基了整體的網(wǎng)頁風(fēng)

格，沉穩(wěn)內(nèi)斂而含蓄。同時(shí)，客戶在看完宣傳海報(bào)后，即可點(diǎn)擊海報(bào)圖片進(jìn)入

男裝分類頁面，進(jìn)行產(chǎn)品瀏覽并購買。

圖9網(wǎng)站首頁原型

9

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

3.1.2男裝分類頁原型

圖10男裝分類頁原型

稻草人男裝的男裝分類頁面同樣是綠色調(diào)為主，其中參雜了鏈接塊。將網(wǎng)

頁的細(xì)節(jié)化處理做到了細(xì)微。圖中灰色與綠色的搭配即引起人們的注意，也提

升了網(wǎng)頁的整體形象氣質(zhì)以及規(guī)格。在背景圖片選取時(shí)，特意選用了與服裝有

關(guān)的圖片，襯托出整個(gè)網(wǎng)店優(yōu)雅清淡高雅的氛圍，給人一種潮流的氣質(zhì)感覺。

3.1.3潮流推薦頁原型

圖11潮流推薦頁原型

10

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

在潮流推薦網(wǎng)頁界面，主打了一張簡約的服裝海報(bào)。這張海報(bào)通過簡單的

服裝與線條文字的搭配，將網(wǎng)頁的內(nèi)容從側(cè)面襯托出來，同時(shí)通過網(wǎng)頁banner

的宣傳，更加強(qiáng)調(diào)了本店的設(shè)計(jì)品味與定位，海報(bào)下方是新品推薦和潮流推薦，

能讓客戶知道品牌最近上新的產(chǎn)品和銷售較好的男裝，提升客戶的購買體驗(yàn)感

和信任。

3.1.4時(shí)代周刊頁原型

圖12時(shí)代刊物頁原型

時(shí)代周刊頁面從網(wǎng)頁高保真圖片來看，頁面設(shè)計(jì)十分簡單簡潔，只有簡單

的雜志，鏈接以及圖案組成。但是其中的線條與形狀的搭配色彩的碰撞又突出

了雜志觀感的不同感覺。

11

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

3.1.5關(guān)于我們頁原型

圖13關(guān)于我們頁原型

最后的關(guān)于我們頁面，頁面中包括公司簡介、公司的發(fā)展現(xiàn)狀和發(fā)展規(guī)劃，

以及公司新聞，能夠讓客戶清楚地了解公司的信息和公司文化理念，還能看到

有關(guān)公司的新聞動(dòng)態(tài)，使客戶相信這個(gè)公司是團(tuán)結(jié)友愛、有能力的公司。清新

淡雅的設(shè)計(jì)風(fēng)格，將服裝店高貴典雅的氣質(zhì)展現(xiàn)的淋漓盡致，同時(shí)從稻草人男

裝展示的文字來看，可以讓讀者客戶馬上感受體會(huì)到稻草人男裝的定位與特色，

從而更好的宣傳與推廣。

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

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

動(dòng)態(tài)特效1：網(wǎng)頁banner自動(dòng)輪播

12

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

在RP中運(yùn)用動(dòng)態(tài)面板添加圖片制作

圖14banner輪播特效效果

運(yùn)用懸浮變化設(shè)置制作

圖15字體顯示特效效果

13

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

運(yùn)用懸浮變化設(shè)置制作

圖16圖片顯示特效效果

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

這次稻草人男裝網(wǎng)頁的設(shè)計(jì)，整整耗時(shí)三個(gè)月的時(shí)間，中途進(jìn)行了很多次

14

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

的修改，多虧了老師的耐心輔導(dǎo)和幫助，每次老師都會(huì)及時(shí)的解答我的問題。

在制作過程中，清楚地體會(huì)到了單獨(dú)制作一個(gè)服裝網(wǎng)頁的難處，知道自己

所學(xué)的知識(shí)只不過一些皮毛，還需要更深的學(xué)習(xí)才行，終于在我的不懈努力和

在老師的幫助下一個(gè)個(gè)解開了這些難題。

雖然這次設(shè)計(jì)的完成意味著我即將畢業(yè)，但是回過頭來想，本次設(shè)計(jì)卻是

使我的各方面的能力和技術(shù)都有所提升。在剛開始的時(shí)候選擇品牌的時(shí)候，有

很多的選擇，但是我最后選擇的服裝，因?yàn)槲矣X得服裝是能夠襯托一個(gè)人的精

神的，建造一個(gè)好的服裝網(wǎng)站可以讓更多的人購買到自己心儀的衣服。一件適

合自己的衣服能讓自己感到神清氣爽，讓別人看到賞心悅目。

一個(gè)服裝網(wǎng)站是否優(yōu)秀，除去品質(zhì)的保障，其次就是網(wǎng)頁結(jié)構(gòu)的設(shè)計(jì)。一

個(gè)好的網(wǎng)站結(jié)構(gòu)設(shè)計(jì)可以讓客戶感覺到依賴感，讓客戶覺得舒適，