CINVAI KROSE網(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用戶需求分析.......................................................................................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ì).......................................................................................2

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

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

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

2.1.2品牌故事頁(yè)版式...................................................................................5

2.1.3全部產(chǎn)品頁(yè)版式...................................................................................6

2.1.4女士專區(qū)頁(yè)及男士專區(qū)頁(yè)版式...........................................................7

2.1.5時(shí)尚配飾頁(yè)版式...................................................................................8

2.1.6拉桿箱系列頁(yè)版式...............................................................................9

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

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

2.2.2網(wǎng)站圖標(biāo)設(shè)計(jì).....................................................................................11

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

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

3.1.1網(wǎng)站首頁(yè)原型.....................................................................................11

3.1.2品牌故事頁(yè)原型.................................................................................13

3.1.3全部產(chǎn)品頁(yè)原型.................................................................................14

3.1.4女士專區(qū)頁(yè)及男士專區(qū)頁(yè)原型.........................................................15

3.1.5時(shí)尚配飾頁(yè)原型.................................................................................16

3.1.6拉桿箱系列頁(yè)原型.............................................................................17

I

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

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

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

參考資料.........................................................................................................................20

II

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

CINVAIKROSE網(wǎng)站W(wǎng)eb端網(wǎng)頁(yè)設(shè)計(jì)

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

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

1.1.1用戶需求分析

自5G網(wǎng)絡(luò)興起以來(lái)，隨著消費(fèi)水平的不斷提高和網(wǎng)購(gòu)的快速普及，各種箱

包逐漸成為大家不可或缺的配飾，已經(jīng)由簡(jiǎn)單的用于裝東西功能逐步過(guò)度服飾

搭配，甚至是奢侈品等領(lǐng)域！越來(lái)越多的購(gòu)物者們選擇足不出戶就能在網(wǎng)上購(gòu)

買，盡情享受網(wǎng)絡(luò)購(gòu)物的便利與快捷。

CINVAIKROSE品牌有著清晰的愿景，精選代表品牌的牛皮面料為主要面料，

成為實(shí)踐應(yīng)用更可靠的條件，也是保證其產(chǎn)品廣泛應(yīng)用，讓整體產(chǎn)品品質(zhì)更有

優(yōu)勢(shì)，同時(shí)把東方美學(xué)和西方元素完美結(jié)合，保留一貫的法式風(fēng)情，靈活運(yùn)用

藝術(shù)設(shè)計(jì)，證明品牌實(shí)力。

在奢侈品箱包網(wǎng)站中，我國(guó)箱包行業(yè)的頭部品牌市占率較高的主要是LV、

古馳、蔻馳、MK等品牌。其中LV是LVMH集團(tuán)的旗下品牌之一，古馳的母公司

是開(kāi)云集團(tuán)，隨著奢侈品需求持續(xù)走高，兩家企業(yè)全球營(yíng)收持續(xù)的提升、數(shù)據(jù)

顯示，其中2021年國(guó)內(nèi)市場(chǎng)占比39%。我國(guó)箱包加價(jià)率低，箱包新零售加速我

國(guó)消費(fèi)結(jié)構(gòu)升級(jí)。我國(guó)箱包產(chǎn)業(yè)鏈長(zhǎng)，箱包銷售渠道穩(wěn)定。未來(lái)電子商務(wù)以及

相關(guān)平臺(tái)運(yùn)營(yíng)模式日益成熟，運(yùn)營(yíng)成本將持續(xù)降低，箱包行業(yè)的電商化將是大

勢(shì)所趨。

CINVAIKROSE避開(kāi)與大牌奢侈品的價(jià)格競(jìng)爭(zhēng)。國(guó)內(nèi)一線品牌以國(guó)際品牌形

象出現(xiàn)在中國(guó)市場(chǎng)，如DISSONA、COBO等。這類公司在國(guó)內(nèi)采用直銷與加盟相

結(jié)合的方式，在國(guó)內(nèi)渠道拓展迅速，銷售點(diǎn)多，覆蓋國(guó)內(nèi)主要市轄區(qū)、省級(jí)城

市等大都市。而CINVAIKROSE品牌另辟蹊徑，通過(guò)了解用戶的真正需求，以及

精選代表品牌的牛皮面料為主要面料，讓整體產(chǎn)品品質(zhì)更有優(yōu)勢(shì)，把東方美學(xué)

和西方元素完美結(jié)合，保留一貫的法式風(fēng)情，靈活運(yùn)用藝術(shù)設(shè)計(jì)來(lái)吸引客源，

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

CINVAIKROSE通過(guò)“全部產(chǎn)品”幫助客戶導(dǎo)航，讓客戶找到自己心儀的箱

包。CINVAIKROSE通過(guò)“品牌故事”頁(yè)面讓顧客更好地了解CINVAIKROSE的

品牌歷程。通過(guò)“女士專區(qū)”“男士專區(qū)”“配飾專區(qū)”頁(yè)面，對(duì)男女產(chǎn)品的分

類及配飾的具體展示讓客戶更好的選擇自己所需，達(dá)到輕松購(gòu)物的效果。

1

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

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

CINVAIKROSE的網(wǎng)站實(shí)現(xiàn)的主要功能包括首頁(yè)、品牌故事、全部產(chǎn)品、女

士專區(qū)、男士專區(qū)、時(shí)尚配飾、以及拉桿箱系列七個(gè)模塊，其中“首頁(yè)”的功

能通常是讓用戶在短時(shí)間內(nèi)掌握網(wǎng)站的最新產(chǎn)品。其中包括了logo展示、登錄

圖標(biāo)的展示、新產(chǎn)品宣傳banner的展示、商品的展示以及底部的企業(yè)信息?！捌?/p>

牌故事”頁(yè)面主要展示了CINVAIKROSE的品牌個(gè)性，讓客戶了解產(chǎn)品采用精選

的材料的優(yōu)勢(shì)、獨(dú)特創(chuàng)新設(shè)計(jì)?！叭慨a(chǎn)品”展示包括了頂部導(dǎo)航欄、logo展示、

登錄圖標(biāo)的展示、商品詳情的展示、底部的企業(yè)信息展示。“女士專區(qū)”主要展

示了女士產(chǎn)品，讓客戶通過(guò)認(rèn)真篩選，選擇自己心儀的包包，是CINVAIKROSE

網(wǎng)站的特色部分?！澳惺繉^(qū)”主要展示了男士產(chǎn)品，讓男性客戶通過(guò)認(rèn)真篩選，

選擇適合自己成熟品味的箱包。然后“時(shí)尚配飾”頁(yè)面讓客戶選擇心儀的箱包

后，來(lái)用配飾來(lái)更好的搭配箱包。最后“拉桿箱系列”頁(yè)面主要行李箱商品的

展示。同時(shí)每個(gè)板塊都包含了logo、導(dǎo)航欄、登錄按鈕。

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ì)

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

本網(wǎng)站最主要的人機(jī)交互方式是鼠標(biāo)點(diǎn)擊操作、更換圖片及彈出彈框。用

戶在瀏覽器中點(diǎn)擊網(wǎng)站各頁(yè)面的導(dǎo)航欄的文字鏈接或圖片按鈕，實(shí)現(xiàn)頁(yè)面間的

跳轉(zhuǎn)。觸碰導(dǎo)航欄標(biāo)題，文字變色。

本網(wǎng)站的每一個(gè)網(wǎng)頁(yè)，都有一個(gè)導(dǎo)航欄。導(dǎo)航欄上設(shè)有首頁(yè)、品牌故事、

2

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

全部產(chǎn)品、女士專區(qū)、男士專區(qū)、時(shí)尚配飾、以及拉桿箱系列按鈕，可以前往

網(wǎng)站的相應(yīng)模塊。

（1）在網(wǎng)站首頁(yè)中，用戶可以點(diǎn)擊產(chǎn)品展示中的一些產(chǎn)品，進(jìn)入到產(chǎn)品展

示的詳情頁(yè)。

（2）在品牌故事中，有CINVAIKROSE簡(jiǎn)介。這個(gè)頁(yè)面是對(duì)CINVAIKROSE

的介紹，就是讓客戶知道我們是做什么的，我們的品牌理念，讓消費(fèi)者對(duì)我們

的產(chǎn)品更加的放心。

（3）在全部產(chǎn)品中，有女士箱包、男士箱包、時(shí)尚配飾類目，可以在每個(gè)

類目里點(diǎn)擊產(chǎn)品進(jìn)行跳轉(zhuǎn)，客戶點(diǎn)擊產(chǎn)品圖進(jìn)入產(chǎn)品描述頁(yè)，可以點(diǎn)擊購(gòu)買進(jìn)

入相應(yīng)的頁(yè)面。

（4）在女士專區(qū)中，客戶進(jìn)入到女士專區(qū)展示能看到獨(dú)特設(shè)計(jì)的女士包包，

點(diǎn)擊產(chǎn)品圖可以直接進(jìn)入產(chǎn)品詳情頁(yè)中。

（4）在男士專區(qū)中，客戶可以選擇符合自己品味的箱包，點(diǎn)擊產(chǎn)品圖可以

直接進(jìn)入產(chǎn)品詳情頁(yè)中。

（5）在時(shí)尚配飾和拉桿箱系列中，客戶可以能夠選擇適合搭配配飾和行李

箱，點(diǎn)擊具體產(chǎn)品圖可以直接進(jìn)入產(chǎn)品詳情頁(yè)中。

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

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

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

使用工具軟件：主要使用PS、RP軟件完成本模塊的頁(yè)面版式設(shè)計(jì)。如圖1

是網(wǎng)站首頁(yè)的版式設(shè)計(jì)，主要部分為導(dǎo)航欄、Banner、重磅熱品、男士專區(qū)、

新款專區(qū)以及底部引導(dǎo)等。Banner設(shè)計(jì)將給客戶一種強(qiáng)烈的視覺(jué)沖擊感，激發(fā)

消費(fèi)者的購(gòu)買欲望，從而促進(jìn)銷售。

3

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

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

4

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

2.1.2品牌故事頁(yè)版式

圖3品牌故事頁(yè)線框圖

此圖是品牌故事版式圖，主要部分為導(dǎo)航欄、Banner、品牌故事及品牌個(gè)

性以及底部引導(dǎo)等，主要介紹了公司的企業(yè)文化和背景、同時(shí)通過(guò)這種簡(jiǎn)潔明

了的版式設(shè)計(jì)讓用戶更清晰的了解到品牌。

5

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

2.1.3全部產(chǎn)品頁(yè)版式

圖4全部產(chǎn)品頁(yè)線框圖

此圖是全部產(chǎn)品版式，主要部分是商品展示，女士專區(qū)、男士專區(qū)及配飾

專區(qū)分區(qū)展示商品，我們根據(jù)具體的分塊，版式設(shè)計(jì)分區(qū)域，給產(chǎn)品展示的空

間，將版式設(shè)計(jì)由繁化簡(jiǎn)、分類后的服裝更加讓客戶快速的找到自己需要的產(chǎn)

6

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

品，通過(guò)這樣的方式大大節(jié)省了客戶的時(shí)間，同時(shí)也提升了客戶對(duì)店鋪的忠誠(chéng)

度。

2.1.4女士專區(qū)頁(yè)及男士專區(qū)頁(yè)版式

圖5女士專區(qū)及男士專區(qū)頁(yè)面線框圖

此圖是是女士專區(qū)及男士專區(qū)版式，主要部分為導(dǎo)航欄、Banner、產(chǎn)品展

示、以及底部引導(dǎo)欄。采用矩形的框架設(shè)計(jì)、簡(jiǎn)約大方、在一定程度上進(jìn)行美

化與設(shè)計(jì)，讓顧客一眼就能看到自己喜愛(ài)的潮流包，將會(huì)是精英人士必不可少

7

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

的時(shí)尚單品。

2.1.5時(shí)尚配飾頁(yè)版式

圖6時(shí)尚配飾頁(yè)面線框圖

此圖是時(shí)尚配飾版式頁(yè)面、主要部分為導(dǎo)航欄、Banner、產(chǎn)品展示、以及

底部引導(dǎo)欄。主要展示為商品區(qū)展示、客戶可以對(duì)選中的產(chǎn)品進(jìn)行配飾搭配，

8

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

配飾在整體搭配中的作用，就好比畫龍點(diǎn)睛的最后一筆，讓整體靈動(dòng)起來(lái)。

2.1.6拉桿箱系列頁(yè)版式

圖7拉桿箱系列頁(yè)面線框圖

此圖是拉桿箱系列版式頁(yè)面、主要部分為導(dǎo)航欄、Banner、產(chǎn)品展示、以

及底部引導(dǎo)欄。版式設(shè)計(jì)簡(jiǎn)約大方，讓客戶能夠快速找到自己想要的產(chǎn)品，從

而促進(jìn)消費(fèi)。

9

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

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

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

關(guān)于CINVAIKROSE網(wǎng)站的主要消費(fèi)群體是成熟、自信、獨(dú)立、高貴、大

方的時(shí)代女性。主色上選用飽和度比較高的的顏色，黑、灰、白經(jīng)典搭配加上

米色、點(diǎn)綴色為橙色、淺藍(lán)色、紅色以及藍(lán)色，主色調(diào)使整個(gè)頁(yè)面顯得高級(jí)、

簡(jiǎn)約、成熟，搭配這種配色符合時(shí)代女性追求的品質(zhì)，更符合網(wǎng)站簡(jiǎn)約高端的

風(fēng)格設(shè)計(jì)。

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

在組色選擇時(shí)，網(wǎng)頁(yè)的色彩搭配主要運(yùn)用幾種顏色的特點(diǎn)，主色上選用黑灰

白三色加上米色、點(diǎn)綴色運(yùn)用了橙色、淺藍(lán)色、紅色以及藍(lán)色，紅色，讓人感

到溫暖。紅色象征著激情且活力、有強(qiáng)烈的刺激性，所以紅色來(lái)弱化單一色彩

的表現(xiàn)力，在一定程度上能吸引住消費(fèi)者的目光，使之眼前一亮，用紅色點(diǎn)綴

顯得高貴而富有品味；橙色代表溫暖、激情和活潑的顏色，是暖色中最溫暖的

顏色，所以我們引入橙色點(diǎn)綴，讓色彩感更飽和。同時(shí)我們摻雜了淺藍(lán)色與冷

色調(diào)的藍(lán)色，淺藍(lán)色象征著沉穩(wěn)、安定，這種顏色冷靜且理智、淡化之后的藍(lán)

色給人一種個(gè)性的色彩。而冷色系的藍(lán)色，給人以沉穩(wěn)的特性，具有科技感、

理智的意向，通常與黑色白色作為搭配，是一種常見(jiàn)的色彩搭配，給整個(gè)頁(yè)面

帶來(lái)神秘酷炫的感覺(jué)；幾種顏色的混合搭配使得構(gòu)成圖形更加明顯，中間的擴(kuò)

張感和收縮感綜合，讓人感覺(jué)到了一種平和安穩(wěn)柔順恬靜滿足，同時(shí)又增加了

一些低調(diào)含蓄的內(nèi)涵，讓人感覺(jué)到高級(jí)質(zhì)感。

10

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

2.2.2網(wǎng)站圖標(biāo)設(shè)計(jì)

圖9網(wǎng)站圖標(biāo)設(shè)計(jì)

CINVAIKROSE網(wǎng)站小圖標(biāo)一共制作了一個(gè)用戶小圖標(biāo)。圖標(biāo)設(shè)計(jì)理念的本

質(zhì)是減到最簡(jiǎn)形態(tài)，作用是輔助理解。用戶在使用網(wǎng)站時(shí)會(huì)注意觀察網(wǎng)站的細(xì)

節(jié)化處理，小圖標(biāo)就是網(wǎng)站的細(xì)節(jié)化處理的，最好體現(xiàn)注意了細(xì)節(jié)處理簡(jiǎn)約而

具有凝聚性。我采用簡(jiǎn)單的線條組成，色彩搭配簡(jiǎn)單不繁瑣。

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

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

使用工具軟件：在網(wǎng)頁(yè)高保真原型設(shè)計(jì)過(guò)程中，我運(yùn)用到了PS、RP等軟件。

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

首先制作的是時(shí)尚箱包類型的網(wǎng)站，將LOGO放在網(wǎng)頁(yè)正中間角的位置可以

讓客戶快速就能知道是什么網(wǎng)站，網(wǎng)站上的LOGO就相當(dāng)于實(shí)體店的門面招牌，

所以把LOGO展示在正中間可以讓消費(fèi)者第一眼就看到，中間放置了導(dǎo)航欄，導(dǎo)

航欄的作用就是引導(dǎo)人們?cè)跒g覽過(guò)程中查看網(wǎng)頁(yè)各種類型的內(nèi)容。導(dǎo)航欄下面

做了banner圖，展示最新的活動(dòng)海報(bào)，banner下方是商品展示區(qū)域，在商品的

展示區(qū)域主要進(jìn)行了排版設(shè)計(jì)，我把商品的排列設(shè)計(jì)的非常整齊，進(jìn)行了設(shè)計(jì)

的排版可以使版面變得豐富起來(lái)、變得更有活力一些，簡(jiǎn)約大方設(shè)計(jì)感會(huì)很舒

適、讓用戶更有興趣的瀏覽后面的頁(yè)面，這樣可以加深顧客對(duì)網(wǎng)頁(yè)好的印象。

商品展示區(qū)域下方是網(wǎng)頁(yè)的尾部，展示網(wǎng)頁(yè)版權(quán)信息等。

11

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

圖10網(wǎng)站首頁(yè)原型

12

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

3.1.2品牌故事頁(yè)原型

品牌故事頁(yè)面白色調(diào)為主，其中采用圖文混合排版的板塊。將網(wǎng)頁(yè)設(shè)計(jì)的簡(jiǎn)

約大方、排版細(xì)節(jié)化處理做到了細(xì)微。圖中灰色與冷色淺紫的搭配融合自然，

即引起人們的注意，又提升了網(wǎng)頁(yè)的整體形象氣質(zhì)以及規(guī)格。簡(jiǎn)約大方的版式

設(shè)計(jì)使整個(gè)網(wǎng)店優(yōu)有品味、高級(jí)的氛圍感，給人一種舒適的感覺(jué)。

圖11品牌故事頁(yè)原型

13

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

3.1.3全部產(chǎn)品頁(yè)原型

全部產(chǎn)品網(wǎng)頁(yè)界面，主打了一張簡(jiǎn)約的設(shè)計(jì)。這張頁(yè)面通過(guò)分過(guò)模塊分工

版式設(shè)計(jì)、線條與文字的搭配，將網(wǎng)頁(yè)的內(nèi)容從側(cè)面襯托出來(lái)，同時(shí)具體的分

類以及每個(gè)模塊的查看更多，點(diǎn)擊進(jìn)去能跳轉(zhuǎn)到相應(yīng)的頁(yè)面，讓客戶能夠明確

的選擇自己所需、簡(jiǎn)約工整的設(shè)計(jì)體現(xiàn)了網(wǎng)站品味與定位。

圖12全部產(chǎn)品頁(yè)原型

14

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

3.1.4女士專區(qū)頁(yè)及男士專區(qū)頁(yè)原型

女士專區(qū)和男士專區(qū)頁(yè)面的界面設(shè)計(jì)版式是一樣，為了讓受眾更清晰的了解

到品牌的商品，為了滿足男性、女性的審美需求，顏色設(shè)計(jì)色彩經(jīng)典大氣，精

選優(yōu)質(zhì)材質(zhì)，利用精致的巧妙設(shè)計(jì)、簡(jiǎn)約大方的線條營(yíng)造沉穩(wěn)成熟的氣質(zhì)，所

以版式設(shè)計(jì)簡(jiǎn)約大方、客戶一眼就能看到自己喜愛(ài)的時(shí)尚單品。頁(yè)面設(shè)計(jì)十分

簡(jiǎn)單簡(jiǎn)潔，其中的線條與形狀的搭配色彩的碰撞又突出了雜志觀感的不同感覺(jué)。

圖13女士專區(qū)頁(yè)及男士專區(qū)原型

15

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

3.1.5時(shí)尚配飾頁(yè)原型

時(shí)尚配飾網(wǎng)頁(yè)界面，頁(yè)面設(shè)計(jì)簡(jiǎn)潔、采用清雅穩(wěn)重的設(shè)計(jì)風(fēng)格，將CINVAIKRO

SE網(wǎng)站散發(fā)出一種高品調(diào)高格調(diào)氣息，讓客戶能夠舒適放松的氛圍中進(jìn)行購(gòu)物，

從而進(jìn)行消費(fèi)，同時(shí)為品牌的口碑的傳播有一定效果作用。

圖14時(shí)尚配飾頁(yè)原型

16

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

3.1.6拉桿箱系列頁(yè)原型

拉桿箱系列網(wǎng)頁(yè)界面，頁(yè)面設(shè)計(jì)的簡(jiǎn)潔大方、banner設(shè)計(jì)采用清新且沉穩(wěn)

的風(fēng)格，來(lái)吸引消費(fèi)的眼球。產(chǎn)品采用方塊展示，放在正中間，版式設(shè)計(jì)整齊、

大方，突出產(chǎn)品、讓視覺(jué)沖擊效果更強(qiáng)烈，同時(shí)整體的配色帶給消費(fèi)者舒適的

購(gòu)物體驗(yàn)。

圖15拉桿箱系列頁(yè)原型

17

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

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

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

動(dòng)態(tài)特效1：網(wǎng)頁(yè)文字特效（鼠標(biāo)觸碰導(dǎo)航欄文字變色）

圖16網(wǎng)頁(yè)文字特效效果

動(dòng)態(tài)特效2：網(wǎng)頁(yè)圖片更換特效（鼠標(biāo)觸碰圖片更換圖片）

圖17網(wǎng)頁(yè)圖片更換特效效果

18

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

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

這次CINVAIKEOSE網(wǎng)頁(yè)的設(shè)計(jì)，來(lái)來(lái)回回耗時(shí)很多，中途進(jìn)行了三到四次

的修改，真的非常感謝指導(dǎo)老師的輔導(dǎo)和指導(dǎo)幫助，我才能夠按時(shí)完成，給自

己的豐富多彩的大學(xué)生活劃上圓滿的句號(hào)。

在制作過(guò)程中，體會(huì)到了獨(dú)自制作網(wǎng)頁(yè)的難處，困難比較多，真是萬(wàn)事開(kāi)

頭難，不明白如何入手，需要花費(fèi)很長(zhǎng)的時(shí)間去研究、去解決、發(fā)現(xiàn)了之前學(xué)

習(xí)專業(yè)課時(shí)不太懂的部分、現(xiàn)在通過(guò)研究詢問(wèn)，鞏固了之前不足。最后做完了

有種如釋重負(fù)的感覺(jué)。首先，在選題上，經(jīng)過(guò)多次的篩選才確定。在設(shè)計(jì)網(wǎng)站

的過(guò)程中，開(kāi)始是用PS軟件進(jìn)行設(shè)計(jì)，但在設(shè)計(jì)后端程序代碼的過(guò)程中，技巧

與經(jīng)驗(yàn)的不足，最終放棄了，重新選用AxureRP這個(gè)軟件。在頁(yè)面的版