簡佰格網(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è)計.......................................................................................2

1.1.3交互邏輯設(shè)計.......................................................................................3

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

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

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

2.1.2產(chǎn)品展示頁版式...................................................................................5

2.1.3關(guān)于我們頁版式...................................................................................6

2.1.4新聞資訊頁版式...................................................................................7

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

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

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

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

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

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

3.1.2產(chǎn)品展示頁原型.................................................................................10

3.1.3關(guān)于我們頁原型.................................................................................11

3.1.4新聞資訊頁.........................................................................................12

3.1.5產(chǎn)品詳情頁原型.................................................................................13

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

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

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

I

湖南商務(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ā)展，人們的生活水平逐漸的提高，線上的消費水平也隨著提

高，各種各樣的包包已經(jīng)成為女生或男生們必不可少的時尚單品了，而簡佰格

針對于受眾人群建立獨立網(wǎng)站讓用戶進行網(wǎng)上購買包包，隨時了解該品牌的產(chǎn)

品信息。

簡佰格網(wǎng)站的建設(shè)背景是在線上銷售的經(jīng)濟發(fā)展迅速，以及互聯(lián)網(wǎng)經(jīng)濟繁

盛的現(xiàn)在。在網(wǎng)絡(luò)發(fā)展迅速的情況下,簡佰格品牌也擁有了大量的粉絲和自己的

受眾人群。從而使得互聯(lián)網(wǎng)經(jīng)濟更為發(fā)達。包包作為當(dāng)今的時尚商品，在女性

群體的占比較大，男生占據(jù)少數(shù)部分。原因有一下幾點，第一，女性是愛美群

體，包包也代表著品味，是日常搭配服飾的最佳飾品，第二，女性出門的安全

感，女生出門會帶上少許的化妝品、紙巾等，正好需要一個包包裝這些東西同

時可以起到裝飾效果。第三，大數(shù)據(jù)分析得出女生的網(wǎng)上消費欲望明顯的高于

男生，女生的網(wǎng)上購買力度更大。所以該品牌的受眾人群更多的是女性群體，

當(dāng)然也是有少部分的男性的受眾群體的，在節(jié)假日的時候購買包包作為節(jié)日禮

物送給異性。

在同類型包包網(wǎng)站中，有幾個包包的品牌非常的有影響力發(fā)展較為良好的

有六家品牌，分別是路易斯威登、古馳、香奈兒、愛馬仕、蔻馳、普拉達。在

這些品牌網(wǎng)站中，作為影響力最大的包包網(wǎng)站的是古馳網(wǎng)站，和香奈兒網(wǎng)站，

而簡佰格網(wǎng)站走的是中低端路線，受眾群體的消費能力也處于中下端。從品牌

的銷量和知名度來講，古馳和香奈兒的消費者最多。

簡佰格網(wǎng)站避開與大品牌包包的競爭。大品牌包包網(wǎng)站受眾人群都是高端

消費水平，而大多數(shù)人都想購買追求大牌包包，簡佰格針對的是中下端的消費

水平人群，可能受眾人群會遠(yuǎn)遠(yuǎn)少于大牌包包。但是不是所有的人都有能力去

購買大牌包包和追求高端品牌，處中下端水平的消費人群也非常龐大簡佰格緊

緊抓住了屬于自己的受眾人群，產(chǎn)出的產(chǎn)品都非常符合當(dāng)下人群的審美，價格

也非常的合適，絕大多數(shù)的用戶都可以消費的起，以多風(fēng)格、多元素、多款式

來吸引顧客以此作為背景來設(shè)計網(wǎng)站的。

1

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

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

簡佰格的網(wǎng)站實現(xiàn)的主要功能包括，首頁、產(chǎn)品展示、關(guān)于我們、新聞資

訊、以及聯(lián)系我們五個模塊，其中“首頁”的功能主要是讓用戶能夠一目了然，

通過首頁用戶可以了解到網(wǎng)站的基本功能，首頁包括網(wǎng)站的logo展示、網(wǎng)站導(dǎo)

航欄展示、網(wǎng)站宣傳banner的展示、商品圖片的展示、以及底部的企業(yè)信息。

“產(chǎn)品展示”包括商品分類的展示（上新系列、靈感系列、婚包系列）、底部的

企業(yè)信息展示。“新聞資訊”包括企業(yè)近期產(chǎn)品新出的產(chǎn)品信息和怎樣搭配靈感。

“關(guān)于我們”頁面主要展示了簡佰格的品牌理念和品牌發(fā)展歷程。最后“聯(lián)系

我們”頁面主要展示了企業(yè)的聯(lián)系方式有官方微信二維碼和官方手機號碼。

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

2

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

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

1.1.3交互邏輯設(shè)計

當(dāng)用戶有購買包包的欲望的時候，但是沒有明確的目標(biāo)，當(dāng)他進簡佰格官

網(wǎng)，她可以根據(jù)首頁的新品上市和熱銷產(chǎn)品還有產(chǎn)品展示頁面選擇他喜歡的一

款包包，在逛網(wǎng)站的時她在看到自己喜歡的包包的時候即可以直接購買。同時，

她想直接購買婚包的話是可以直接點擊產(chǎn)品展示頁進入到婚包系列專區(qū)，在婚

包系列里購買自己中意的包包。每個頁面的最上方都是有導(dǎo)航欄的，可以點擊

想要瀏覽的頁面名稱，就可以跳轉(zhuǎn)到想要的頁面，頁面之間都可以相互跳轉(zhuǎn)。

3

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

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

2.1頁面版式設(shè)計

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

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

4

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

簡佰格網(wǎng)站首頁設(shè)計的時候主要運用的設(shè)計軟件是AdobePhotoshopCC

2018來制作網(wǎng)站的美化效果，首頁主要展示的是一個品牌形象，讓用戶可以了

解到整個網(wǎng)站的內(nèi)容和功能。首頁主要分為五個板塊，導(dǎo)航欄是第一個板塊展

示網(wǎng)站的主要功能，logo放在導(dǎo)航欄的最左邊，用戶第一眼就可以看到。導(dǎo)航

欄的最右邊是搜索框，用戶可以根據(jù)自己的需要去精確的搜索查找，增加用戶

體驗。第二個板塊是banner，展示一些活動信息和新款產(chǎn)品。第三個板塊是新

品上市，展示一些近期新款產(chǎn)品。第四個板塊是熱銷產(chǎn)品，銷量最好和人氣最

高的產(chǎn)品。第五個板塊是尾部，展示網(wǎng)站地圖和企業(yè)二維碼。

2.1.2產(chǎn)品展示頁版式

圖3產(chǎn)品展示頁線框圖

簡佰格的產(chǎn)品展示是根據(jù)包包的不同系列來進行分類進行設(shè)計的，很多大

牌包包，他們也是按照包包的款式來進行分類的。簡佰格是按照包包不同的系

列來分類的，比如上新系列是把每上新的產(chǎn)品從剛上新和以前上新的排列順序

來排列的，可以更好讓用戶找到自己想要購買的包包，這樣既滿足用戶的基本

購買需求，而且在一定的程度上，用戶的體驗感會很好的提升，可以更快的找

到自己想要購買的產(chǎn)品。同時也可以提升用戶對該品牌的信賴，這樣進行分類

5

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

之后，用戶使用起來會很方便，不會破壞用戶的體驗感，從而導(dǎo)致網(wǎng)站跳失率

的增加，可以高效率的使用該網(wǎng)站。

2.1.3關(guān)于我們頁版式

圖4關(guān)于我們頁線框圖

關(guān)于我們頁面主要展示的是簡佰格的故事，第一部分是導(dǎo)航欄可以實現(xiàn)點

擊跳轉(zhuǎn)頁面的功能，第二部分是banana區(qū)域，輪播的是企業(yè)的活動和新品上市

的banner。第三部分主要展示的是簡佰格品牌的品牌故事，用圖片加文字結(jié)合

的方式講述了簡佰格的品牌故事，就好比簡佰格的品牌名片一般。品牌故事可

以讓用戶更加深入的了解到簡百格的品牌理念。第四部分是簡佰格的發(fā)展歷程，

用圓角矩形作為文本框?qū)懥信e出來簡佰格這些年所發(fā)生的事情。用戶可以了解

到簡佰格從最初的成立到現(xiàn)在時期這一段時間的發(fā)展故事和所拿到的品牌成就。

可以更好的增加用戶對于品牌的信賴感，讓用戶更加忠誠于簡佰格這個品牌。

6

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

2.1.4新聞資訊頁版式

圖5新聞資訊線框圖

簡佰格新聞資訊頁總共由四個部分組成展示的主要是簡佰格近期的新聞內(nèi)

容，第一部是導(dǎo)航欄，第二部分是banner輪播部分，第三部分就是新聞的主體

內(nèi)容了，每條新聞的左邊都標(biāo)注了該條新聞的日期，新聞右邊就是新聞的標(biāo)題

加新聞圖片，第四部分就是網(wǎng)頁的尾部了。

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

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

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

7

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

簡佰格網(wǎng)站色彩設(shè)計與搭配主要是從網(wǎng)頁主色系里面選擇，主要從包包的

顏色里提取的顏色，以及從banner的顏色搭配上選取的，包包網(wǎng)站這一塊，根

據(jù)其他的網(wǎng)站性質(zhì)特點得出越簡單的顏色搭配更受用戶喜歡，所以就對顏色進

行了比對，然后再進行顏色的搭配，網(wǎng)站的總體顏色和各種顏色的包包放在一

起都不顯得突兀，整體看上去很和諧，提升了網(wǎng)站的整體美感。

在組色選擇時，我選擇了低飽和度的淺黃色作為主色和棕色、黑色、淺灰度

作為輔助色。在主色確定之前，有去翻閱大量的包包網(wǎng)站顏色大多以黑白灰為

主色，顏色及其低調(diào)簡單。經(jīng)過參考之后了解到簡單的顏色更有利于整個網(wǎng)站

美化的和諧感，但是用黑白灰做主色的網(wǎng)站太多，于是我選用了飽和度較低的

淺黃色和低調(diào)的白色作為主色，同樣也是給用戶一種簡單低調(diào)的感覺但是從中

能感受到一種溫暖的感覺。另外與主色淺黃色進行搭配的其中一個輔助色跟淺

黃色處于同一個色系中的棕色，不會形成很強烈的對比，反而是一種相輔相成

的感覺，讓整個網(wǎng)站看起來更加的有層次感。另外的兩個輔助色淺灰和黑色，

運用到的地方較少，但是卻是兩個不可缺少的顏色為網(wǎng)站的總體又添加的穩(wěn)重

和含蓄的感覺。主色和輔助色總體搭配上，既可以襯托出每個產(chǎn)品又不會搶掉

產(chǎn)品的風(fēng)頭，讓用戶更容易被產(chǎn)品吸引從而產(chǎn)生點擊購買產(chǎn)品的欲望。

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

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

在網(wǎng)站設(shè)計中，Logo代表著公司的企業(yè)形象，一個企業(yè)核心的視覺要素就

是Logo。Logo可以幫助公司的企業(yè)形象傳播，集結(jié)了公司的企業(yè)文化和產(chǎn)品風(fēng)

格，Logo作為公司或者網(wǎng)站的標(biāo)識起著非常重要的作用。一個好的Logo不僅僅

代表著公司的形象，還可以向用戶表達公司的產(chǎn)品風(fēng)格。網(wǎng)站的logo是用戶點

進網(wǎng)站進入的第一個頁面就能看到的，所以用戶可以通過Logo去辨別于其他的

網(wǎng)站，一個完美的Logo設(shè)計就會讓用戶一眼辨別出從而更好的向其他用戶推薦

和傳播。Logo的組成有很多種形式比如文字Logo、圖案Logo、圖文結(jié)合Logo。

簡佰格的logo風(fēng)格是根據(jù)簡佰格的品牌理念來設(shè)計的，簡佰格的品牌理念是簡

8

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

約、佰搭、格調(diào)。所以運用簡單明了的線條來裝飾簡佰格文字，把簡佰格三個

字更加的凸顯出來，文字底下加了簡佰格的英文縮寫“JONBAG”，整體簡潔大方，

和品牌的理念融為一體。Logo的顏色選擇的是黑色，黑色代表著嚴(yán)謹(jǐn)展現(xiàn)出來

的是值得信賴、有能力、有力量，符合簡佰格的品牌形象。

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

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

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

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

9

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

簡佰格的首頁高保真圖主要展示網(wǎng)站的主題，通過導(dǎo)航欄能看出整個網(wǎng)站

的功能，banner可以向用戶傳達最近上新的單品信息，新品上市和熱銷產(chǎn)品主

要就是展示產(chǎn)品，從首頁可以看出網(wǎng)站的總體風(fēng)格簡潔大方。

3.1.2產(chǎn)品展示頁原型

圖10書籍分類頁原型

產(chǎn)品展示的高保圖主要展示網(wǎng)站的產(chǎn)品，產(chǎn)品按方格的樣式陳列出來，井

然有序的。產(chǎn)品展示頁風(fēng)格整體依然是保持著品牌的理念簡約、佰搭、格調(diào)，

10

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

這樣的設(shè)計也非常的符合用戶瀏覽網(wǎng)站的習(xí)慣。

3.1.3關(guān)于我們頁原型

圖11元味推薦頁原型

關(guān)于我們頁面主要的內(nèi)容是兩部分，一個是有講到簡佰格的品牌故事，品

牌故事可以建立良好的品牌印象，增強品牌傳播的效果，用戶在第一次與一個

品牌接觸的時候會在腦海中形成對品牌和產(chǎn)品的整體認(rèn)知，通過故事的內(nèi)容，

可以使品牌更加的深入人心，吸引更多的消費者，品牌故事可以為消費者提供

更多關(guān)于企業(yè)和產(chǎn)品的信息。另一個部分是品牌歷程，品牌歷程在營銷中的價

11

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

值在于喚起人們的懷舊情緒，而懷舊情感正好是消費者的重要需求之一。

3.1.4新聞資訊頁

圖12時代刊物頁原型

新聞資訊頁面主要的展示的是新聞內(nèi)容部分，頁面排版簡潔易讀，新聞采

用文圖結(jié)合的展現(xiàn)形式。文圖結(jié)合的展現(xiàn)方式有利于提升影虎的閱讀體驗，符

合用戶的閱讀習(xí)慣，并沒有采用大長篇幅的文字，這樣可以使用戶更順利、愉

快的接受品牌信息。

12

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

3.1.5產(chǎn)品詳情頁原型

圖13產(chǎn)品詳情頁原型

產(chǎn)品詳情圖主要展示的就是產(chǎn)品的一個產(chǎn)品信息，采用的是圖片豎排列的

一個方式非常的直觀，產(chǎn)品信息讓用戶更加了解該產(chǎn)品，上身的效果圖可以吸

引消費者的注意力給到一個感同身受的效果。

13

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

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

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

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

圖14banner輪播特效效果

動態(tài)特效2：導(dǎo)航欄放大小郭（點擊導(dǎo)航欄文字會變大）

圖15導(dǎo)航欄放大特效效果

14

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

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

這次簡佰格網(wǎng)站的網(wǎng)頁設(shè)計，整整花費了兩個月的時間，在設(shè)計過程中進

行了四到五次的修改，幸好有老師的指導(dǎo)的建議，才能夠按時完成。在設(shè)計制

作的過程中，清晰的認(rèn)識到獨自設(shè)計并制作網(wǎng)頁的難點，經(jīng)常會碰到難題翻來

覆去的修改但是還是修改的不對，需要花大量的時間去琢磨，在制作的過程中

也明顯的能感覺到在上課學(xué)到的知識運用起來還是很困難的，通過自己重新復(fù)

習(xí)之前學(xué)過的知識并和老師討論，在老師的幫助下才能夠這么快的獨立完成網(wǎng)

頁的設(shè)計。這一次設(shè)計完成也就代表了我們馬上畢業(yè)了，回顧一下這次的設(shè)計

過程讓我本就薄弱的網(wǎng)頁設(shè)計知識變得豐富起來，讓我的設(shè)計技術(shù)也提高了許

多，軟件的運用也比之前熟練了。設(shè)計一個網(wǎng)站首先要明確自己要設(shè)計什么網(wǎng)

站，要設(shè)計網(wǎng)站的哪些功能，這個網(wǎng)站要給用戶提高什么樣的服務(wù)。最初在選

擇做什么網(wǎng)站的時候，花了一周的時間最后還是決定做一個包包的品牌網(wǎng)站，

因為個人也比較喜歡這個品牌的包包，也比較熟悉女生在網(wǎng)上購物的習(xí)慣和審

美風(fēng)格，而這個品牌的包包確沒有一個真正的官方網(wǎng)站。在設(shè)計的過程中發(fā)現(xiàn)

包包行業(yè)非常的內(nèi)卷，有去比較其他的包包網(wǎng)站，都設(shè)計的非常有吸引力，每

個網(wǎng)站設(shè)計的都有自己的特別之處。當(dāng)我選擇做簡佰格網(wǎng)站的時候也只是單方

面的比較喜歡這個品牌，但是真正動起手來跟想象的完全不一樣，每一個步驟

都需