梵德卡普爾網(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ì)..................................................................................................2

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

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

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

2.1頁面版式設(shè)計(jì)..............................................................................................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è)計(jì)......................................................................................8

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

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

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

3.1網(wǎng)頁高保真原型設(shè)計(jì)................................................................................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)頁動(dòng)態(tài)特效設(shè)計(jì)....................................................................................14

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

I

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

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

II

湖南商務(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用戶需求分析

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

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

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

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

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

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

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

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

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

二是女性消費(fèi)能力越來越強(qiáng)。

三是女性一直是消費(fèi)品市場的主力。

四是“她力量”在消費(fèi)市場凸顯。

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

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

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

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

萬般魅力。

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

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

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

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

部的企業(yè)信息和法律聲明。“最新作品”展示包括了分類導(dǎo)航欄、logo展示、

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

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

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

1

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

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

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

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

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

梵德卡普爾的品牌介紹，公司介紹，知名流量，設(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ì)

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

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

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

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

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

進(jìn)行詳細(xì)了解，從而進(jìn)行購買消費(fèi)。

2

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

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

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

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

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

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

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

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

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

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

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

3

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

2.1.2最新作品頁版式

圖3最新作品頁線框圖

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

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

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

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

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

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

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

4

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

2.1.3精品推薦頁版式

圖4精品推薦頁線框圖

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

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

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

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

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

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

5

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

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

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

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

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

聲明。

6

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

2.1.5品牌頁版式

圖6品牌頁線框圖

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

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

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

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

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

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

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

增強(qiáng)品牌對于用戶的凝聚力和影響力。

7

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

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

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

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

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

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

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

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

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

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

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

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

對于網(wǎng)站的導(dǎo)航欄和底部的顏色采用了黑色為主色，這樣選擇是因?yàn)楹谏?/p>

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

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

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

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

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

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

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

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

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

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

8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

9

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

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

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

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

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

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

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

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

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

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

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

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

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

中起到重要的作用。

10

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

3.1.2最新作品頁原型

圖10最新作品頁原型

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

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

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

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

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

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

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

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

11

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

3.1.3精品推薦頁原型

圖11精品推薦頁原型

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

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

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

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

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

12

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

3.1.4生活藝術(shù)頁

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

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

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

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

13

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

3.1.5品牌頁原型

圖13品牌頁原型

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

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

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

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

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

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

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

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)頁導(dǎo)航欄浮動(dòng)變色

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

3：banner輪播效果

14

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

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