梵德卡普爾網(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.1.1用戶需求分析.......................................................................................1

1.1.2網(wǎng)站功能設(shè)計.......................................................................................1

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

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

1.2.2交互邏輯設(shè)計.......................................................................................2

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

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

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

2.1.2最新作品頁版式...................................................................................4

2.1.3精品推薦頁版式...................................................................................5

2.1.4生活藝術(shù)頁版式...................................................................................6

2.1.5品牌頁版式...........................................................................................7

2.2頁面視覺元素設(shè)計......................................................................................8

2.2.1網(wǎng)站配色設(shè)計.......................................................................................8

2.2.2網(wǎng)站LOGO設(shè)計.....................................................................................9

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

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

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

3.1.2最新作品頁原型.................................................................................11

3.1.3精品推薦頁原型.................................................................................12

3.1.4生活藝術(shù)頁.........................................................................................13

3.1.5品牌頁原型.........................................................................................14

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

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

I

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

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

II

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

梵德卡普爾網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計

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

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

1.1.1用戶需求分析

近年來我國女包的市場不斷發(fā)展。數(shù)據(jù)顯示，2019年中國消費市場中女包

的市場規(guī)模已經(jīng)超過了6000億元人民幣，且每年都保持著10%以上的增速。且

在日趨增長的消費水平和需求帶動下，女包市場的規(guī)模還在不斷擴增。而在市

場前景足夠好的情況下，各個品牌也跑馬圈地，在質(zhì)量、價格、設(shè)計款式等環(huán)

節(jié)提升自己的核心競爭力，希望在國內(nèi)女包市場中尋得快速成長的機會。但如

何立足市場，在眾多品牌競爭中脫穎而出，獲得消費者的青睞，成為國內(nèi)各女

包品牌在努力尋找的方向。

目前女包市場需求規(guī)模不斷擴增的因素主要有以下幾點：

一是我國女性消費群體基數(shù)龐大。

二是女性消費能力越來越強。

三是女性一直是消費品市場的主力。

四是“她力量”在消費市場凸顯。

五是“她經(jīng)濟”不斷崛起，女性消費市場不斷擴大。

在上述“她經(jīng)濟”不斷崛起背景下，女性消費市場不斷擴大。而作為女性

市場消費品的龍頭，女包市場也有著很大的市場需求。梵德卡普爾正在基于這

一市場環(huán)境所發(fā)展，致力于打造潮流前沿的時尚美感，并帶你領(lǐng)略創(chuàng)新世界的

萬般魅力。

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

梵德卡普爾的網(wǎng)站實現(xiàn)的主要功能包括，首頁、最新作品、精品推薦、生

活藝術(shù)、以及品牌五個模塊，其中“首頁”的功能主要是讓用戶在最短的時間

內(nèi)了解網(wǎng)站的基本功能，其中包括了logo的展示、宣傳banner的展示以及底

部的企業(yè)信息和法律聲明?！白钚伦髌贰闭故景朔诸悓?dǎo)航欄、logo展示、

最新的商品詳情的展示、挑選了最新商品中最熱賣的型號，其中每個商品的詳

情都可以通過點擊進入到購買頁面還可以加入到購物車中，還能返回“最新作

品”中選購其他商品，底部的企業(yè)信息和法律聲明的展示?！熬吠扑]”展示logo

1

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

和宣傳banner外，為用戶推薦了最熱賣的包包配件，其中每個配件的詳情都可

以通過點擊進入到購買頁面還可以加入到購物車中，然后還能返回到“精品推

薦”頁面去選購其他商品?！吧钏囆g(shù)”展示包括了分類導(dǎo)航欄、logo展示，

宣傳banner展示?！捌放啤表摰男麄鱞anner的文字是關(guān)于梵德卡普爾，以及

梵德卡普爾的品牌介紹，公司介紹，知名流量，設(shè)計理念，品牌材料，精美包

裝，制造工藝。

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

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

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

1.2.2交互邏輯設(shè)計

用戶有購買需求時，搜索女包品牌，被首頁所吸引，點擊網(wǎng)站，首先映入

眼簾的是品牌名以及網(wǎng)站的分類，再是一個帶有商品的banner。用戶就會被其

中所展示的商品吸引，然后點擊分類導(dǎo)航欄中的最新作品或者是精品推薦進行

查看，當(dāng)用戶進入到這些頁面之后，就會被后續(xù)推薦的熱銷產(chǎn)品所吸引，從而

進行詳細了解，從而進行購買消費。

2

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

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

2.1頁面版式設(shè)計

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

梵德卡普爾網(wǎng)頁首頁板式由上至下分別是logo，分類導(dǎo)航欄、宣傳banner

的展示以及最后底部的企業(yè)信息和法律聲明，這些設(shè)計都運用了最新版的PS來

制作網(wǎng)頁的美化，網(wǎng)站首頁的功能主要是讓用戶在最短的時間內(nèi)了解網(wǎng)站的基

本功能以及凸顯網(wǎng)站風(fēng)格，所以在設(shè)計網(wǎng)站首頁時，將網(wǎng)站首頁的內(nèi)容由繁化

簡，將導(dǎo)航欄和底部設(shè)計簡化到極致，而中間的宣傳banner展示了模特效果圖，

以及熱款商品，為的就是激起用戶的興趣和探索欲望。

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

3

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

2.1.2最新作品頁版式

圖3最新作品頁線框圖

最新作品頁分為三個板塊，最上方的板塊是banner模特圖，用于展示商品

效果，第二個板塊用橫向展示，更直觀的展現(xiàn)了銷量最好的商品，讓用戶醒目。

第三格板塊則采用左右結(jié)構(gòu)來分別展示商品，體現(xiàn)商品多樣性，同時也保持了

板式的對稱。梵德卡普爾作為新潮流購物平臺，同其他很多一線品牌采用一樣

的網(wǎng)站管理設(shè)計。在保證了基本的需求之后，在一定程度對網(wǎng)頁美化與設(shè)計，

這樣的設(shè)計可以讓用戶更方便，更直觀的了解商品，通過這樣的方式可以大大

節(jié)省客戶的時間。

4

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

2.1.3精品推薦頁版式

圖4精品推薦頁線框圖

精品推薦頁，同樣是最上方的banner板塊，是為了保持整個網(wǎng)頁板式的統(tǒng)

一整齊。下方商品展示板塊，左右結(jié)構(gòu)居中于整個網(wǎng)頁，商品的文字設(shè)計在商

品圖片的下方，更清晰的展示了商品信息，以便于用戶更好的獲取商品信息，

也避免了網(wǎng)站整體版式過于一致而讓用戶覺得單調(diào)。梵德卡普爾基于完整的網(wǎng)

站建設(shè)，通過的產(chǎn)品和網(wǎng)店相互搭配，從而突出我們網(wǎng)站的個性化特點，提高

客戶的體驗質(zhì)量，吸引顧客，達到引流的目的。

5

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

2.1.4生活藝術(shù)頁版式

圖5生活藝術(shù)頁線框圖

生活藝術(shù)頁的板式設(shè)計以簡約為主。為了保持整個網(wǎng)頁的整齊統(tǒng)一，所以

板式也是為頂部logo的展示、宣傳banner的展示以及底部的企業(yè)信息和法律

聲明。

6

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

2.1.5品牌頁版式

圖6品牌頁線框圖

品牌頁板式除了之前網(wǎng)頁都有的頂部logo的展示和底部的企業(yè)信息和法律

聲明外，對于banner做了特殊的設(shè)計，在banner上方有對于梵德卡普爾大致

的說明文字，在banner下方則分別展示了品牌介紹、公司介紹、知名流量、設(shè)

計理念、品牌材料、精美包裝、制造工藝。每個小版塊都對應(yīng)了相應(yīng)的頁面，

頁面內(nèi)有具體的說明，而這樣的設(shè)計則使得在本頁面對品牌方面繁多的內(nèi)容進

行簡化，但又保持豐富的內(nèi)容，讓用戶在本頁面就可以更方便的操作又能讓用

戶在本頁面能更清晰的了解到各種品牌文化內(nèi)涵，拉進品牌和用戶之間的聯(lián)系，

增強品牌對于用戶的凝聚力和影響力。

7

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

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

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

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

梵德卡普爾網(wǎng)站色彩設(shè)計與搭配主要是用于banner制作，其顏色主要是冷

色調(diào)，冷色調(diào)能給予用戶涼爽感覺，能營造寧靜的氣氛，令用戶心情輕松，根

據(jù)它的性質(zhì)特點，然后進行一定的定位，之后來進行的色彩搭配，加深用戶對

網(wǎng)站的印象，提高網(wǎng)站的設(shè)計感。

梵德卡普爾網(wǎng)站色彩設(shè)計與搭配時增加了暖色，使得整個網(wǎng)站的視覺效果更

生動突出，打造更抓眼球的畫面感和高級感。網(wǎng)站使用不同的色彩用來劃分網(wǎng)

站的布局，不同的內(nèi)容通過色彩進行劃分，這樣是為了方便用戶更快的找到自

己想要的信息所在區(qū)域。

對于網(wǎng)站的導(dǎo)航欄和底部的顏色采用了黑色為主色，這樣選擇是因為黑色

能吸收所有光線而且沒有反射，是所有色彩中最有力量的顏色，黑色能很快吸

引用戶的注意力。也為了和導(dǎo)航中的文字與logo形成對比，黑白搭配，從而產(chǎn)

生富有節(jié)奏感和韻律感，強烈、明快的視覺效果。主色中的粉色是戀愛之色，

從心理學(xué)角度而言，能穩(wěn)定激動的情緒，能使用戶感到明朗，而粉色和黑色

搭配起來使得網(wǎng)站優(yōu)雅柔美的氣質(zhì)更加別具一格。綠色讓人聯(lián)想到清新、健康、

青春、活力、生命與希望等，這是其他任何色彩都不能比擬的，能夠營造出清

爽，自然的頁面，還能讓用戶感到輕松自在，增加親切感和愉悅感，綠色和黑

色搭配看起來更加活躍鮮明。黃色與其他色彩相比，有著強烈反射作用的黃色

更容易吸引人們的視線，黃色是與眾不同的顏色，用在搭配上能很好地被用戶

所接受。黃黑搭配更加大膽，讓人眼前一亮。粉紫色對于梵德卡普爾這個女包

8

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

品牌來說充滿了少女感，跟黑色搭配體現(xiàn)了優(yōu)雅、成熟、穩(wěn)重的魅力，還能感

受到女性的柔美，典雅的氣質(zhì)。藍色給人一種清新、舒暢的感覺，用在網(wǎng)站顏

色設(shè)計中避免了空間過于單調(diào)。藍色是冷色調(diào)當(dāng)中最為典型的代表色，也是網(wǎng)

店美工設(shè)計中最常用的色彩，它往往可以襯托出其他具有擴張力的色彩，讓整

個網(wǎng)頁看起來更加豐富，讓人聯(lián)想到大海、藍天，突出了產(chǎn)品的特性。不同的

藍色調(diào)使得整個網(wǎng)頁更具有層次性，不再呆板單調(diào)。藍色與黑色是很耐看也很

常見的一種運用方式，它們之間組合彰顯沉穩(wěn)大氣。這種穩(wěn)定的基礎(chǔ)色調(diào)既能

搭配出各種風(fēng)格裝飾，也能自成一派表現(xiàn)獨特的風(fēng)格，讓整體設(shè)計更有沉淀。

棕色常被被聯(lián)想到泥土、大地、落葉，非常接地氣，它給人自然、樸實的感覺。

棕色系可以歸屬于中性色系，總的來說是一種沉穩(wěn)舒適、冷暖平衡的色彩。當(dāng)

棕色與黑色完美地搭配在一起，所產(chǎn)生的效果絕對能沖擊視覺感觀。無論是

看似無心的隨意點綴，還是刻意兩者交叉使用，令整個空間呈現(xiàn)活色生香且

有高貴典雅的迷人氣質(zhì)，卻又是那么的自然，充滿個性。

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

圖8網(wǎng)站LOGO設(shè)計

logo是一個企業(yè)的象征物是企業(yè)理念的外化符號。一個好的logo可以讓人

過目不忘并且便于人們記憶傳播。同時良好的標(biāo)識還具有強烈的裝飾性和藝術(shù)

感染力，讓受眾對企業(yè)留下深刻印象從而提高其認知度和美譽程度。好的logo

能體現(xiàn)獨特的企業(yè)文化內(nèi)涵以及特有的產(chǎn)品定位等特征，有利于增強消費者的

購買欲和提高產(chǎn)品的市場競爭力。一個好的logo不僅具備實用性而且還要兼顧

觀賞性這樣才能起到更好的廣告效應(yīng)。logo設(shè)計是平面設(shè)計中感染力和表現(xiàn)力

的方式之一。通過不同的造型、色彩及肌理變化使整體產(chǎn)生和諧的美感效果并

能夠提升的度和美譽度，達到宣傳目的。因此越來越多的企業(yè)在建立的同時也

注重對形象的保護與推廣。而隨著網(wǎng)絡(luò)信息時代的到來，LOGO的設(shè)計已經(jīng)不僅

僅局限在傳統(tǒng)印刷品上而是逐漸向網(wǎng)站應(yīng)用延伸發(fā)展，以適應(yīng)時代的發(fā)展需求。

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

梵德卡普爾以獨特的色彩搭配與時尚的外形設(shè)計為主要特點，現(xiàn)已成為非

常受歡迎的時尚品牌之一，而logo設(shè)計方面很簡潔，這樣能夠更好的加深記憶

9

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

點，能夠適應(yīng)多變的企業(yè)需求，應(yīng)用場景的適應(yīng)性也比較強。

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

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

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

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

梵德卡普爾高保真網(wǎng)站首頁圖片的設(shè)計為頂部的logo，再是分類導(dǎo)航欄、

然后是帶有產(chǎn)品和模特展示的banner以及最后底部的企業(yè)信息和法律聲明。Log

o作為品牌的一個標(biāo)志，象征著形象，放于頂部是為了更加醒目，也是迎合了目

前大多數(shù)品牌的排版設(shè)計。banner展示了模特效果圖，以及本品牌的各種商品，

這樣不僅可以更好的體現(xiàn)商品的上身具體效果，也能讓用戶更直觀的感受的到

濃郁的設(shè)計感，美化整個頁面，順勢推廣了各個商品，激起用戶對于品牌的興

趣和探索欲望，一個設(shè)計做到了推廣，引導(dǎo)，傳達，美化等多種用途，在首頁

中起到重要的作用。

10

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

3.1.2最新作品頁原型

圖10最新作品頁原型

梵德卡普爾最新作品頁面banner板塊與首頁相呼應(yīng)，保持整個網(wǎng)頁一致整

齊。banner的綠色中和了黑色的沉悶，且在黑色的搭配下增強了視覺沖擊力，

非常吸睛，既高端也不會失氣場。Banner下方第一個商品用橫向展示，更符合

用戶的閱讀習(xí)慣和視覺感受，尤其是在觀看圖片或視頻等需要橫向展示的內(nèi)容

時更加方便。更直觀的展現(xiàn)了銷量最好的商品，讓用戶醒目。而下方則采用左

右結(jié)構(gòu)來分別展示商品，體現(xiàn)商品多樣性，同時也保持了板式的對稱，更好地

利用屏幕空間，讓用戶一次性瀏覽更多內(nèi)容，減少不必要的滑動和翻頁操作，

更人性化，提高用戶對于品牌網(wǎng)站的體驗感。

11

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

3.1.3精品推薦頁原型

圖11精品推薦頁原型

精品推薦頁banner板塊還是一樣是為了保持整個網(wǎng)頁板式的統(tǒng)一整齊。下

方商品展示板塊，左右結(jié)構(gòu)居中于整個網(wǎng)頁，對齊分布讓整個界面看起來整齊

簡潔，內(nèi)容劃分也變得比較明確，可讀性強，方便瀏覽者瀏覽，而商品的文字

設(shè)計在商品圖片的下方，更清晰的展示了商品信息，以便于用戶更好的獲取商

品信息，也避免了網(wǎng)站整體版式過于一致而讓用戶覺得單調(diào)。

12

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

3.1.4生活藝術(shù)頁

圖12生活藝術(shù)頁原型

生活藝術(shù)頁的板式設(shè)計以簡約為主。為了保持整個網(wǎng)頁的整齊統(tǒng)一，所以

板式也是為頂部logo的展示，banner的文字意思為：“梵德卡普爾通過日常生

活中的美來看待和詮釋時尚?！毙麄髌放频奈幕?，拉進與用戶之間的距離。

13

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

3.1.5品牌頁原型

圖13品牌頁原型

最后的品牌頁，清新淡雅的設(shè)計風(fēng)格，對于banner做了特殊的設(shè)計，在banne

r上方有關(guān)于梵德卡普爾，在banner下方則分別展示了品牌介紹、公司介紹、

知名流量、設(shè)計理念、品牌材料、精美包裝、制造工藝這幾個小版塊，而每個

小版塊都對應(yīng)了相應(yīng)的頁面，頁面內(nèi)有具體的說明，這樣使得在本頁面對品牌

方面繁多的內(nèi)容進行簡化，但又保持豐富的內(nèi)容，讓用戶在本頁面就可以更方

便的操作又能讓用戶在本頁面能更清晰的了解到各種品牌文化內(nèi)涵，拉進品牌

和用戶之間的聯(lián)系，增強品牌對于用戶的凝聚力和影響力。

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

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

動態(tài)特效1：網(wǎng)頁導(dǎo)航欄浮動變色

2：點擊鏈接可跳轉(zhuǎn)購買頁面

3：banner輪播效果

14

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

圖14跳轉(zhuǎn)購買頁面特效效果