匹克網(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ì).......................................................................................1

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

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

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

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

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

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

2.1.2新品推薦頁(yè)版式...................................................................................5

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

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

2.1.5品牌故事頁(yè)版式...................................................................................7

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

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

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

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

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

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

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

3.1.2新品推薦頁(yè)原型.................................................................................11

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

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

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

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

I

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

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

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

II

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

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

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

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

1.1.1用戶需求分析

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

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

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

進(jìn)了品牌形象的建立，提升了品牌競(jìng)爭(zhēng)優(yōu)勢(shì)。

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

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

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

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

消費(fèi)者更加趨向線上購(gòu)物，這不僅節(jié)約了大量的人力、物力、財(cái)力、精力，同

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

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

類似于匹克這種運(yùn)動(dòng)品牌還有很多，他們不僅擁有多家線下門店，同時(shí)也

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

阿迪達(dá)斯、彪馬、斐樂(lè)等等，它們?cè)隗w育運(yùn)動(dòng)這一消費(fèi)行業(yè)都是極具影響力的。

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

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

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

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

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

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

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

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

離。

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

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

1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2

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

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

3

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

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

若用戶恰巧是一個(gè)運(yùn)動(dòng)愛(ài)好者，熱愛(ài)體育，喜歡健身。那么他將會(huì)有目的

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

模塊第一步就幫助消費(fèi)者選擇自己想進(jìn)入的頁(yè)面?？梢愿鶕?jù)自己的性別來(lái)選擇

點(diǎn)擊男生專區(qū)或是女生專區(qū)，方便快捷。同時(shí)首頁(yè)輪播的海報(bào)，以自動(dòng)輪播的

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

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

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

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

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

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

匹克網(wǎng)頁(yè)首頁(yè)設(shè)計(jì)的時(shí)候運(yùn)用了最新版的AdobePhotoshopCC2018來(lái)

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

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

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

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

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

4

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

2.1.2新品推薦頁(yè)版式

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

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

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

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

形式更加直接清晰。

圖3新品推薦頁(yè)線框圖

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

男生專區(qū)頁(yè)主要針對(duì)的用戶都是男性，相比較女生來(lái)說(shuō)，男生對(duì)于購(gòu)物沒(méi)

有太多要求。往往都是在缺乏某類用品時(shí)才會(huì)購(gòu)物，不會(huì)花費(fèi)太多時(shí)間在商品

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

省用戶耗費(fèi)在商品選擇上的時(shí)間。并且每種商品都是經(jīng)過(guò)精挑細(xì)選后才會(huì)集中

在此區(qū)域。當(dāng)用戶點(diǎn)擊某一個(gè)商品后，則會(huì)有價(jià)格、領(lǐng)券、活動(dòng)、選擇顏色、

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

意向購(gòu)買后直接下單。

5

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

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

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

女生專區(qū)頁(yè)是相對(duì)于男生專區(qū)頁(yè)而言的，對(duì)比男生專區(qū)的簡(jiǎn)約，女生專區(qū)

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

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

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

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

廣泛，女生在挑選時(shí)也會(huì)綜合考慮實(shí)用性、便利性、廉價(jià)實(shí)惠等因素，并且進(jìn)

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

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

6

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

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

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

品牌故事頁(yè)則是純文本的形式，更加簡(jiǎn)約高效。用戶只需要通過(guò)文字就能

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

是以三個(gè)小矩形文本框橫向排列的，位于集團(tuán)簡(jiǎn)介與品牌理念之間。減少用戶

的視覺(jué)疲勞，增加頁(yè)面停留時(shí)間，提升用戶對(duì)品牌的信賴，建立良好的品牌形

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

7

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

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

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

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

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

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

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

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

景的理念。藍(lán)色就是象征匹克始終堅(jiān)持初心，在體育品牌界一直力爭(zhēng)向上，保

持前十的位置，為運(yùn)動(dòng)者們提供最好的運(yùn)動(dòng)鞋、最舒適的運(yùn)動(dòng)服裝以及潮流的

運(yùn)動(dòng)配飾，使運(yùn)動(dòng)者們信賴匹克品牌，相信匹克的運(yùn)動(dòng)精神、體育精神，同時(shí)

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

8

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

品牌的自然純真，就像宣傳“匹克品牌，帶你重回大自然”的標(biāo)語(yǔ)，使消費(fèi)者

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

行動(dòng)。藍(lán)色與綠色都有一種清新簡(jiǎn)約的風(fēng)格，以一種簡(jiǎn)單質(zhì)樸的方式拉近與用

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

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

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

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

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

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

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

表性的物體，一般人們會(huì)通過(guò)一個(gè)易于識(shí)別的logo去認(rèn)識(shí)一個(gè)品牌，并由此

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

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

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

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

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

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

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

具有流暢感。

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

9

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

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

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

讓整個(gè)頁(yè)面更加具有一點(diǎn)活潑感，不會(huì)給人一種死板的感覺(jué)。圖標(biāo)是小型的，

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

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

圖標(biāo)我設(shè)計(jì)的是五角星的幾何圖形，點(diǎn)擊這個(gè)圖標(biāo)就可以將心儀的商品移入收

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

好的消費(fèi)體驗(yàn)。分類的圖標(biāo)是在商品種類數(shù)量過(guò)多時(shí)使用的，我設(shè)計(jì)的是四個(gè)

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

大的板塊，使頁(yè)面看起來(lái)更加具有邏輯，也方便用戶找到自己想要購(gòu)買的商品，

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

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

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

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

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

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

我設(shè)計(jì)了三張banner，每張banner底部都有三個(gè)白色圓形，是用來(lái)表示當(dāng)前

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

域。這三個(gè)標(biāo)題是以豎型文本的形式展示的，且以平行四邊形打底。在點(diǎn)擊某

個(gè)區(qū)域時(shí)平行四邊形會(huì)顯示紅色，未點(diǎn)擊區(qū)域則是灰色。紅色與灰色有一個(gè)明

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

相等的矩形表示更多商品，在查看更多商品時(shí)有收藏圖標(biāo)，可以對(duì)商品進(jìn)行收

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

藍(lán)綠色的漸變。

10

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

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

3.1.2新品推薦頁(yè)原型

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

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

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

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

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

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

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

11

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

圖11新品推薦頁(yè)原型

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

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

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

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

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

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

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

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

12

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

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

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

的。整個(gè)頁(yè)面均以豐富的產(chǎn)品來(lái)來(lái)吸引消費(fèi)者。產(chǎn)品系列對(duì)用戶的視覺(jué)沖擊更

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

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

時(shí)整個(gè)頁(yè)面也是藍(lán)綠色的漸變填充。

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

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

品牌故事頁(yè)主要是匹克集團(tuán)簡(jiǎn)介、品牌宣傳、品牌理念三個(gè)部分。匹克集

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

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

個(gè)都有一個(gè)小小的圖形說(shuō)明。同時(shí)文本下方有不規(guī)則圖形作為點(diǎn)綴。為圓角矩

形及加號(hào)。品牌理念部分與匹克集團(tuán)簡(jiǎn)介部分排版相似。

13

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

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

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

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

圖15banner輪播特效效果

首頁(yè)的banner輪播主要是三張海報(bào)的自動(dòng)輪播以及手動(dòng)輪播的結(jié)合，每張

海報(bào)下方都有三個(gè)白色圓形，按順序來(lái)分別代表一張海報(bào)。即表示當(dāng)前海報(bào)已

經(jīng)輪播到第幾張，一目了然。每當(dāng)輪播到一張海報(bào)時(shí)，下方對(duì)應(yīng)的白色圓形便

14

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

會(huì)變大，其他則是原來(lái)的形狀。同時(shí)在網(wǎng)站載入時(shí)，海報(bào)會(huì)自動(dòng)往后輪播，且

可以點(diǎn)擊下方的圓形手動(dòng)輪