匹克網(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è)計..................................................................................................3

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

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

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

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

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

2.1.2新品推薦頁版式...................................................................................5

2.1.3男生專區(qū)頁版式...................................................................................5

2.1.4女生專區(qū)頁版式...................................................................................6

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

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

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

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

2.2.3網(wǎng)站圖標設(shè)計.....................................................................................10

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

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

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

3.1.2新品推薦頁原型.................................................................................11

3.1.3男生專區(qū)頁原型.................................................................................12

3.1.4女生專區(qū)頁原型.................................................................................13

3.1.5品牌故事頁原型.................................................................................13

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

I

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

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

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

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

電子商務(wù)的盛行給予許多品牌更多脫穎而出的機會。網(wǎng)絡(luò)、新媒體的應(yīng)用

刺激B2B、B2C等模式的興起。越來越多的品牌傾向于借助線上網(wǎng)站的設(shè)計吸引

更多消費者，為消費者提供多重選擇，方便生活。線上與線下的良性結(jié)合，促

進了品牌形象的建立，提升了品牌競爭優(yōu)勢。

匹克網(wǎng)站的建立正是響應(yīng)了互聯(lián)網(wǎng)時代背景的需求，大量網(wǎng)絡(luò)用戶通過瀏

覽網(wǎng)站，提升網(wǎng)站點擊量、流量、曝光率，不斷拉近與消費者的心理距離。而

現(xiàn)在全民運動的熱潮也一直在進行中，匹克品牌的影響力也通過品牌代言人的

推廣漸漸在人們心中留下了印象。線下實體店的運行同時借助線上網(wǎng)站的運營。

消費者更加趨向線上購物，這不僅節(jié)約了大量的人力、物力、財力、精力，同

時又反過來促進匹克品牌競爭優(yōu)勢的提高。網(wǎng)站中圖文結(jié)合、點擊跳轉(zhuǎn)、動態(tài)

交互的設(shè)計吸引著用戶瀏覽，進而激發(fā)其消費意識。

類似于匹克這種運動品牌還有很多，他們不僅擁有多家線下門店，同時也

設(shè)計有線上網(wǎng)站，從不同的渠道吸引消費者。比如，鴻星爾克、喬丹、耐克、

阿迪達斯、彪馬、斐樂等等，它們在體育運動這一消費行業(yè)都是極具影響力的。

其中Nike耐克、Adidas阿迪達斯、FILA斐樂、PUMA彪馬以及我所選擇的匹克PEAK

品牌都位居運動鞋品牌排行榜前十。除主要售賣運動鞋之外，還有衣服、手環(huán)、

帽子等其他服飾，擴充產(chǎn)業(yè)鏈。

匹克網(wǎng)站主要是兼具首頁、新品推薦、男生專區(qū)、女生專區(qū)、品牌故事五

個模塊。首頁主要是吸引用戶興趣，主體以海報輪播的形式增加網(wǎng)站亮點。新

品推薦頁面也是幫助用戶直接了解最新售賣動向，節(jié)省更多的消費選擇時間。

而男生專區(qū)與女生專區(qū)是從性別兩個角度幫助用戶快速找準自己的消費區(qū)域。

品牌故事頁面則幫助用戶了解匹克品牌文化。進一步縮短匹克與用戶的心理距

離。

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

匹克的網(wǎng)站實現(xiàn)的主要功能包括，首頁、新品推薦、男生專區(qū)、女生專區(qū)、

1

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

品牌故事五個模塊。其中首頁是囊括以上五個板塊的，可以互相跳轉(zhuǎn)。幫助用

戶直接找準通道。在主要內(nèi)容區(qū)域包括banner輪播；熱銷、籃球鞋、籃球服的

展示；頁尾品牌相關(guān)信息的展示。新品推薦頁面主要介紹網(wǎng)站新品，向用戶傳

達品牌新品的信息，包括匹克國創(chuàng)系列、匹克一云夏季休閑板鞋女款、匹克訓(xùn)

練比賽籃球短套裝、態(tài)極社牛社恐板鞋男款四個商品，每個商品都包含有價格、

名稱、銷量、評價等信息。男生專區(qū)包括男子籃球比賽鞋、橘子男孩聯(lián)名款、

男子緩震跑鞋、男子針織夾克、男子籃球比賽鞋。這些在男生專區(qū)都是以瓷片

區(qū)的形式展示，每個都有相關(guān)商品的詳情信息，讓用戶更加清楚明白。女生專

區(qū)則包括女子涼鞋、女子連帽衛(wèi)衣、女子輕逸跑鞋、女子針織單褲、女子針織

開胸長袖單衣、女子圓領(lǐng)短T恤。這幾個都是相關(guān)商品的集合，每個點擊都都

有相關(guān)系列產(chǎn)品的展示，而非單個產(chǎn)品。提供用戶多種選擇。品牌故事頁面則

基本上是純文本的形式展示，包括匹克集團間接、品牌宣傳、品牌文化等相關(guān)

信息的介紹，幫助用戶了解匹克品牌，更好地為匹克樹立良好的形象。

2

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

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

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

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

3

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

1.2.2交互邏輯設(shè)計

若用戶恰巧是一個運動愛好者，熱愛體育，喜歡健身。那么他將會有目的

性地瀏覽網(wǎng)站，挑選自己意向的商品。在進入匹克網(wǎng)站中。首頁導(dǎo)航欄的五個

模塊第一步就幫助消費者選擇自己想進入的頁面。可以根據(jù)自己的性別來選擇

點擊男生專區(qū)或是女生專區(qū)，方便快捷。同時首頁輪播的海報，以自動輪播的

形式吸引消費者的眼球。在下方的熱銷、籃球鞋、籃球服模塊，可以首先激發(fā)

用戶的興趣，進一步點擊。特別是在有明顯區(qū)分的男生專區(qū)與女生專區(qū)頁面，

展示的商品種類更多，提高訂單成交轉(zhuǎn)化率。

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

2.1頁面版式設(shè)計

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

匹克網(wǎng)頁首頁設(shè)計的時候運用了最新版的AdobePhotoshopCC2018來

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

及細節(jié)化圖標，網(wǎng)站首頁的主要功能是幫助用戶在較短時間內(nèi)了解品牌網(wǎng)站涉

及的內(nèi)容。抓住金剛區(qū)的要點，利用banner輪播首先吸引消費者。同時以列表

形式來邏輯性地展示產(chǎn)品。使整個頁面更加具有條理，內(nèi)容清晰不繁瑣。

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

4

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

2.1.2新品推薦頁版式

對于新品推薦頁，主要是分類與篩選兩個功能，均排列在左側(cè)引導(dǎo)用戶進

行定向選擇，找到自己中意的商品。其中包括鞋類、衛(wèi)衣、馬甲、羽絨服等數(shù)

十種商品系列。它們相當于一個集合，一個產(chǎn)品大類。而右側(cè)則是產(chǎn)品的大圖

展示。每個商品都有相關(guān)價格、顏色選擇、產(chǎn)品編號等信息展示，圖文結(jié)合的

形式更加直接清晰。

圖3新品推薦頁線框圖

2.1.3男生專區(qū)頁版式

男生專區(qū)頁主要針對的用戶都是男性，相比較女生來說，男生對于購物沒

有太多要求。往往都是在缺乏某類用品時才會購物，不會花費太多時間在商品

選擇上。所以這個頁面都是圖片的形式。直接用大圖的形式吸引用戶，同時節(jié)

省用戶耗費在商品選擇上的時間。并且每種商品都是經(jīng)過精挑細選后才會集中

在此區(qū)域。當用戶點擊某一個商品后，則會有價格、領(lǐng)券、活動、選擇顏色、

選擇尺碼、購買數(shù)量，進而加入購物車或是收藏到喜歡列表中，方便在日后有

意向購買后直接下單。

5

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

圖4男生專區(qū)頁線框圖

2.1.4女生專區(qū)頁版式

女生專區(qū)頁是相對于男生專區(qū)頁而言的，對比男生專區(qū)的簡約，女生專區(qū)

的內(nèi)容則更加豐富，恰到好處地迎合女性用戶的多方選擇，在購買中占據(jù)主動

地位，提高成交轉(zhuǎn)化率。頁面內(nèi)不僅有banner，同時還有多種產(chǎn)品的橫豎交錯

排列。并且每個都不是像男生專區(qū)，點擊圖后只有單個產(chǎn)品的信息展示。這個

則是以列表的形式展示多種產(chǎn)品，方便用戶選擇。對于體育運動類產(chǎn)品，種類

廣泛，女生在挑選時也會綜合考慮實用性、便利性、廉價實惠等因素，并且進

行比較后才會使自己的潛在購買需求變?yōu)楝F(xiàn)實需求。女生專區(qū)頁便是抓住用戶

的購買心理，以圖片、文字的形式使消費者詳細了解產(chǎn)品的信息。

6

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

圖5女生專區(qū)頁線框圖

2.1.5品牌故事頁版式

品牌故事頁則是純文本的形式，更加簡約高效。用戶只需要通過文字就能

快速了解匹克品牌文化等信息，皆以矩形文本框縱向垂直排列。其中品牌宣傳

是以三個小矩形文本框橫向排列的，位于集團簡介與品牌理念之間。減少用戶

的視覺疲勞，增加頁面停留時間，提升用戶對品牌的信賴，建立良好的品牌形

象。起到宣傳匹克網(wǎng)站的作用，積累更多的潛在用戶，培養(yǎng)用戶的忠誠感。

7

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

圖6品牌故事頁線框圖

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

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

匹克網(wǎng)站的主色與輔助色搭配我沒有選擇很多，以免使網(wǎng)站的配色讓人產(chǎn)

生眼花繚繞的感覺。在網(wǎng)站的背景這一塊。我主要選擇藍色與綠色兩種顏色，

同時這兩種色彩也是網(wǎng)站的主色。藍色代表一種純潔、靜謐，匹克作為一種體

育運動品牌，需要向人們傳遞的是它一直堅持體育品牌打造，構(gòu)建全民運動愿

景的理念。藍色就是象征匹克始終堅持初心，在體育品牌界一直力爭向上，保

持前十的位置，為運動者們提供最好的運動鞋、最舒適的運動服裝以及潮流的

運動配飾，使運動者們信賴匹克品牌，相信匹克的運動精神、體育精神，同時

打造匹克品牌的優(yōu)良口碑。而綠色則帶給人們大自然的感覺，側(cè)面寓意著匹克

8

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

品牌的自然純真，就像宣傳“匹克品牌，帶你重回大自然”的標語，使消費者

相信匹克品牌的真實，愿意成為匹克品牌的消費者，激發(fā)消費欲望，促成購買

行動。藍色與綠色都有一種清新簡約的風格，以一種簡單質(zhì)樸的方式拉近與用

戶的距離。我利用的是藍綠色的漸變，將兩種色彩有效融合。

而輔助色我選取的是紅色，紅色是匹克logo的主要顏色，直接使用其作為

輔助色，更加接近。同時灰色與黑色也是起到一種輔助、點綴的作用，特別是

在一些小的圖標、按鈕之類上用到這些顏色較多。

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

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

在網(wǎng)站設(shè)計中，logo就是代表了一個品牌最有影響力的載體。其是最具代

表性的物體，一般人們會通過一個易于識別的logo去認識一個品牌，并由此

為品牌帶來潛在的流量。培養(yǎng)更多的種子用戶、關(guān)鍵用戶、重要用戶。logo色

彩我主要利用的是紅色以及白色。紅色是一個很醒目的顏色，也有一種活躍、

新鮮的象征。我設(shè)計的標志是圖形與品牌名稱相結(jié)合。圖形設(shè)計的是一個類似

于三角形的幾何圖形。同時也是匹克品牌“P”的縮影。更好體現(xiàn)品牌的特征。

三角形有一種立體的特征。也從側(cè)面表示匹克品牌會一直屹立不倒，一定程度

上又宣傳了品牌文化，傳遞品牌理念，建立良好的品牌形象。圖形與匹克的英

文我采用的是上下排版的方式，英文我設(shè)計的是連筆形式。直接一氣呵成更加

具有流暢感。

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

9

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

2.2.3網(wǎng)站圖標設(shè)計

匹克網(wǎng)站我主要設(shè)計了三個圖標。分別是電話、收藏、分類。圖標的使用會

讓整個頁面更加具有一點活潑感，不會給人一種死板的感覺。圖標是小型的，

也不會占據(jù)太多板塊，只需要一點小的區(qū)域，可以節(jié)省頁面空間。電話的圖標

更加明顯是表示聯(lián)系方式，并且電話的圖標在網(wǎng)站中還是比較常見的。收藏的

圖標我設(shè)計的是五角星的幾何圖形，點擊這個圖標就可以將心儀的商品移入收

藏中，方便在下次需要購買時直接找到商品，節(jié)約消費者的購物時間，提升良

好的消費體驗。分類的圖標是在商品種類數(shù)量過多時使用的，我設(shè)計的是四個

小正方形整合成一個大正方形的形狀，也就意味著將多個商品系列集合成一個

大的板塊，使頁面看起來更加具有邏輯，也方便用戶找到自己想要購買的商品，

具有明顯的指向性。三個圖標我主要應(yīng)用在首頁、頁尾、新品推薦頁。

圖9網(wǎng)站圖標設(shè)計

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

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

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

匹克網(wǎng)站首頁原型主要涉及以下幾個方面，首先是金剛區(qū)的banner輪播，

我設(shè)計了三張banner，每張banner底部都有三個白色圓形，是用來表示當前

banner輪播到第幾張。Banner下方便是熱銷、籃球鞋、籃球服相關(guān)商品展示區(qū)

域。這三個標題是以豎型文本的形式展示的，且以平行四邊形打底。在點擊某

個區(qū)域時平行四邊形會顯示紅色，未點擊區(qū)域則是灰色。紅色與灰色有一個明

顯的區(qū)分。每個區(qū)域直接顯示的有九款商品，若想查看更多，則是用一個大小

相等的矩形表示更多商品，在查看更多商品時有收藏圖標，可以對商品進行收

藏，同時也可以管理自己感興趣的產(chǎn)品。整個頁面的背景使用的是漸變色彩，

藍綠色的漸變。

10

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

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

3.1.2新品推薦頁原型

匹克網(wǎng)站的第二個頁面新品推薦頁面也是藍綠色漸變打底，這個頁面我設(shè)

計的是左文本右圖文的形式。分類處設(shè)有關(guān)于分類的圖標，其下方是十余種產(chǎn)

品系列文字說明，直接羅列，更加清晰直觀。最后則是篩選，并且可以根據(jù)用

戶的選擇進行多選，給予用戶多種選擇。右方產(chǎn)品展示區(qū)域上方也有排序方式

的通道，可以根據(jù)銷量、爆款、價格等任意排序，根據(jù)用戶的需求進行排序。

產(chǎn)品展示區(qū)域每款產(chǎn)品左上方都有紅色的“New”標記，表示是新品。每款產(chǎn)品

都是灰色矩形作為背景，統(tǒng)一樣式，使頁面更加和諧。

11

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

圖11新品推薦頁原型

3.1.3男生專區(qū)頁原型

在男生專區(qū)網(wǎng)頁界面，以瓷片的形式分割了六個模塊，主要是對男生體育

用品的展示，最左上角的商品利用了類似于海報的形式，并且是男生專區(qū)里銷

售最火的一款產(chǎn)品，直接吸引消費者的興趣，刺激下單。其下方便是兩款聯(lián)名

款的產(chǎn)品，展示的是同一系列的不同產(chǎn)品。右邊也是以豎形海報的形式展示籃

球鞋。最右側(cè)的則與兩款聯(lián)名產(chǎn)品的展示類似，只是是垂直排列的。一個是男

子針織夾克，一個是男子籃球比賽鞋。

圖12男生專區(qū)頁原型

12

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

3.1.4女生專區(qū)頁原型

女生專區(qū)頁面主要是海報的展示以及商品的系列整合。海報是單張實時更新

的。整個頁面均以豐富的產(chǎn)品來來吸引消費者。產(chǎn)品系列對用戶的視覺沖擊更

為強烈，最左側(cè)是豎型的產(chǎn)品，右側(cè)主要是多個矩形的羅列，結(jié)合產(chǎn)品及產(chǎn)品

信息的展示。同時也穿插了橫向的產(chǎn)品。以免產(chǎn)生重復(fù)的感覺，沒有新意。同

時整個頁面也是藍綠色的漸變填充。

圖13女生專區(qū)頁原型

3.1.5品牌故事頁原型

品牌故事頁主要是匹克集團簡介、品牌宣傳、品牌理念三個部分。匹克集

團簡介是以文字及白色填充矩形打底展示的，中間內(nèi)容是三個矩形，每個矩形

分別是是一個段落文本。為品牌國際化、市場研發(fā)國際化、ICANPLAY。這三

個都有一個小小的圖形說明。同時文本下方有不規(guī)則圖形作為點綴。為圓角矩

形及加號。品牌理念部分與匹克集團簡介部分排版相似。

13

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

圖14品牌故事頁原型

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

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

圖15banner輪播特效效果

首頁的banner輪播主要是三張海報的自動輪播以及手動輪播的結(jié)合，每張

海報下方都有三個白色圓形，按順序來分別代表一張海報。即表示當前海報已

經(jīng)輪播到第幾張，一目了然。每當輪播到一張海報時，下方對應(yīng)的白色圓形便

14

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

會變大，其他則是原來的形狀。同時在網(wǎng)站載入時，海報會自動往后輪播，且

可以點擊下方的圓形手動輪