妮雅絲網(wǎng)站W(wǎng)eb端網(wǎng)頁設計

湖南商務職業(yè)技術學院畢業(yè)設計

目錄

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

1.1網(wǎng)站建設背景..............................................................................................1

1.1.1用戶需求分析.......................................................................................1

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

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

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

1.2.2交互邏輯設計.......................................................................................3

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

2.1頁面版式設計..............................................................................................4

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

2.1.2護膚頁面版式.......................................................................................5

2.1.3彩妝類產(chǎn)品頁版式...............................................................................5

2.1.4商品資訊詳情頁版式...........................................................................6

2.1.5品牌介紹頁版式...................................................................................8

2.1.6熱銷榜單頁版式...................................................................................9

2.1.7新聞動態(tài)頁版式.................................................................................10

2.2頁面視覺元素設計....................................................................................11

2.2.1網(wǎng)站配色設計.....................................................................................11

2.2.2網(wǎng)站字體規(guī)范設計設計.....................................................................11

3網(wǎng)站前端設計..........................................................................................................12

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

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

3.1.2護膚頁面原型.....................................................................................13

3.1.3彩妝頁面原型.....................................................................................14

3.1.4品牌介紹頁原型.................................................................................15

3.1.5熱銷榜單頁原型.................................................................................15

I

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.6商品資訊詳情頁原型.........................................................................16

3.1.7新聞動態(tài)頁原型.................................................................................17

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

4設計總結(jié)..................................................................................................................18

參考資料.........................................................................................................................19

II

湖南商務職業(yè)技術學院畢業(yè)設計

妮雅絲網(wǎng)站W(wǎng)eb端網(wǎng)頁設計

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

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

1.1.1用戶需求分析

隨著時代的進步以及經(jīng)濟的迅速發(fā)展，人們的生活水平和消費意識不斷提

升，不在滿足于基本需求，追求更高層次的需求。美妝產(chǎn)品正好契合消費者的

社交需求和尊重需求。美妝護膚是大部分家庭女性生活中不可缺少的一部分。

互聯(lián)網(wǎng)應用技術的普及，使得電子商務迅速發(fā)展以及移動支付和物流不斷

提升，網(wǎng)上購物逐漸成為一種生活習慣，越來越多的消費者選擇在網(wǎng)絡購物平

臺購買商品，足不出戶就能擁有方便快捷的購買體驗?，F(xiàn)如今，越來越多的品

牌選擇入駐淘寶、天貓、京東等電商平臺。一方面，利用電商技術手段擴大市

場，提高企業(yè)的利潤水平；另一方面，也可以維持品牌的地位和提高品牌知名

度，為了提高品牌知名度，越來越多的企業(yè)建立起了屬于自己的品牌官網(wǎng)。而

建立品牌官網(wǎng)，需要根據(jù)用戶需求來對網(wǎng)站的結(jié)構(gòu)設計和功能設計進行分析和

了解，設計出讓消費者視覺美觀、瀏覽便捷的網(wǎng)站，對消費者具有吸引力和用

戶友好性，從而提高品牌知名度。

所以我在設計妮雅絲美妝網(wǎng)站的頁面時，查閱了品牌影響力較大的一些美

妝品牌，通過對它們官網(wǎng)的設計風格、結(jié)構(gòu)設計以及功能設計了解并進行對比

分析。首先，站在消費者的角度進行設計，妮雅絲網(wǎng)站應更為直觀的讓消費者

看到其品牌的品牌產(chǎn)品、品牌文化和理念，以最快的方式認識和了解品牌并在

消費者的心里留下非常深刻的印象，從而提高消費者采取購買行為的幾率。妮

雅絲的主要消費群體大多為女性，并且她們有線上購物的習慣，對于她們來說，

買到健康產(chǎn)品并且適合自身的產(chǎn)品是她們的主要購買需求之一，所以針對消費

者的需求分析，要好好設計出讓消費者在瀏覽網(wǎng)站時能夠快速的找到自己喜歡

的產(chǎn)品并適合自己的產(chǎn)品的網(wǎng)站風格?？偟膩碚f，我希望設計出簡約大方，便

捷直觀的官網(wǎng)。

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

妮雅絲美妝的網(wǎng)站實現(xiàn)的主要功能包括，妮雅絲首頁、護膚、彩妝、品牌

介紹、熱銷榜單以及新聞動態(tài)六個模塊，其中“妮雅絲首頁”的功能主要是讓

1

湖南商務職業(yè)技術學院畢業(yè)設計

用戶快速的了解認識網(wǎng)站的基本功能，其中包括了妮雅絲品牌logo展示、導航

欄、商品詳情的展示、妮雅絲產(chǎn)品宣傳banner的展示以及底部的企業(yè)信息。

“護膚”頁面展示包括了搜索導航欄、妮雅絲品牌logo展示、商品分類詳情的

展示、宣傳banner的展示、底部的企業(yè)信息展示。然后“品牌介紹”頁面主要

展示了妮雅絲美妝品牌的創(chuàng)造由來以及品牌歷程，還包括品牌理念和品牌文化。

“熱銷榜單”主要導航欄、妮雅絲品牌logo展示、宣傳banner的展示、底部

的企業(yè)信息展示以及本品牌銷量較好且進行銷量排名的產(chǎn)品展示，是妮雅絲美

妝網(wǎng)站的特色部分。最后“新聞動態(tài)”頁面主要展示了妮雅絲品牌的相關動態(tài)，

包含一些護膚美妝技巧的分享以及相關產(chǎn)品的介紹等。

2

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

1.2.2交互邏輯設計

當客戶有了購買美妝產(chǎn)品的欲望，卻沒有明確的目標時，當他進入妮雅絲

美妝網(wǎng)站，他可以根據(jù)自己的需求在導航欄選擇護膚還是彩妝產(chǎn)品頁面，這樣

他在看到自己喜歡的產(chǎn)品時即可以立即購買。同時，由于網(wǎng)頁設計的獨特，在

3

湖南商務職業(yè)技術學院畢業(yè)設計

用戶閑逛網(wǎng)頁時，他看到了熱銷榜單專欄，發(fā)現(xiàn)其中推薦的銷量較高的產(chǎn)品他

很喜歡且適合自己的膚質(zhì)，于是，再次點擊并選擇購買。

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

2.1頁面版式設計

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

制作妮雅絲的整體網(wǎng)站設計的時候運用了AdobeDreamweaver（網(wǎng)頁制作

軟件）來制作網(wǎng)頁的美化和原型圖樣，以及排序（如導航欄：首頁、護膚、彩

妝、品牌介紹、熱銷榜單、新聞動態(tài)），同時運用了AdobeIllustratorCS6來制

作網(wǎng)頁首頁的logo以及細節(jié)化圖片及圖標。

網(wǎng)站首頁的功能主要是充分展示產(chǎn)品和服務，讓用戶簡單迅速的認知了解

網(wǎng)站的基本功能。這一部分包括頂部logo、導航欄、輪播banner、熱銷產(chǎn)品展

示圖、產(chǎn)品組合以及底部信息欄（包含企業(yè)的所在地址以及聯(lián)系方式）。在設

計網(wǎng)站首頁時，將網(wǎng)站首頁的內(nèi)容做精簡化設計，將導航欄以及底部設計簡化

到極致，一目了然，能夠快速地讓用戶進入頁面后找到自己所需要了解的東西

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

的位置。

4

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.2護膚頁面版式

此版式設計為護膚類產(chǎn)品類目頁版式，主要包括logo、導航欄、banner、

產(chǎn)品展示以及底部信息欄。

對于護膚頁面，是依據(jù)妮雅絲的所有產(chǎn)品進行分類，妮雅絲是包含護膚、

彩妝、個人護理等全系列美妝品牌，則將產(chǎn)品頁面分為彩妝和護膚兩大頁面，

根據(jù)妮雅絲護膚類產(chǎn)品的產(chǎn)品系列來進行的梯級式設計。作為新時尚的銷售美

妝產(chǎn)品的小眾品牌網(wǎng)站，同其他很多一線網(wǎng)絡美妝品牌網(wǎng)站一樣采用美妝分類

管理

設計。妮雅絲網(wǎng)站設計的獨特創(chuàng)新在于保證了基本的查找需求之后，在一定程

度對網(wǎng)頁美化與設計。分類后的護膚類產(chǎn)品，大圖小字、上圖下文（介紹產(chǎn)品

的圖片、功效以及價格）的排版模式構(gòu)成了商品展示區(qū)，能夠讓客戶更加清楚

地了解品牌的產(chǎn)品，同時能夠快捷的找到自己所需要的產(chǎn)品，產(chǎn)品通過這樣的

方式大大節(jié)省了客戶的時間，同時也提升了客戶對店鋪的依賴，依賴程度越高

越容易形成忠實的顧客和店主關系，同時通過這種簡單的設計能最高效率的保

圖3護膚頁面線框圖

證。

2.1.3彩妝類產(chǎn)品頁版式

此版式設計為彩妝類產(chǎn)品詳情頁版式，主要分為三個部分，第一部分是頂

部logo和導航欄，LOGO區(qū)位于網(wǎng)站頂部中間，代表品牌的標識和形象，導航欄

5

湖南商務職業(yè)技術學院畢業(yè)設計

引導客戶瀏覽網(wǎng)站，可以讓客戶快速地查找品牌的信息；第二部包含宣傳banner

以及產(chǎn)品展示區(qū)，宣傳banner的設置能夠讓客戶看到彩妝類銷售較好的產(chǎn)品，

提高客戶的購物體驗感，產(chǎn)品展示區(qū)使用大圖小字、上圖下文的混合版式設計，

文字描述產(chǎn)品的特點及功效，客戶可以點擊產(chǎn)品圖片進入該產(chǎn)品詳情頁進行查

看并直接掃碼購買，這樣能夠讓客戶更加清楚地了解產(chǎn)品的信息，找到自己所

圖4彩妝類產(chǎn)品頁線框圖

需要的產(chǎn)品；最后一部分是底部企業(yè)信息欄，包含企業(yè)的地址以及聯(lián)系方式，

底部左側(cè)還設計導航欄，便于客戶瀏覽到底部時進入下一頁面。

6

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.4商品資訊詳情頁版式

此版式為商品資訊詳情頁面版式，主要包括頂部LOGO、導航欄、商品詳情

展示區(qū)以及底部企業(yè)信息欄。導航欄能夠讓客戶快速地找到自己想要的東西的

位置；商品詳情展示區(qū)的版式設計是圖文結(jié)合的混合排版模式，左側(cè)為產(chǎn)品圖

片，右側(cè)文案介紹產(chǎn)品的信息以及價格，介紹產(chǎn)品的特點與功效，方便客戶了

解產(chǎn)品

的性能對自己是否合適，右下側(cè)還添置了二維碼，便于客戶遇到喜歡的產(chǎn)品掃

碼聯(lián)系并購買。

圖5商品詳情頁線框圖

7

湖南商務職業(yè)技術學院畢業(yè)設計

2.1.5品牌介紹頁版式

此版式為品牌介紹頁面版式，主要包括三個部分，第一部分是頂部LOGO和

導航欄；第二部分是banner以及品牌信息內(nèi)容展示區(qū)（包含企業(yè)介紹、品牌建

設歷程、品牌文化和品牌理念，還包括企業(yè)的社會責任歷程），banner使用帶

有品牌LOGO的圖片，強調(diào)這頁面是關于妮雅絲介紹的頁面，展示區(qū)的版式設計，

首先為企業(yè)介紹文字居中位于banner下方，然后是品牌歷程，左文右圖的混合

排版，品牌文化以及品牌理念相繼排列，位于頁面中間，最后是社會責任，采

用左圖右文的混合排版，使用矩形淺色背景把文字突顯出來。這樣的版式設計

能夠讓客戶一目了然，清楚了解品牌的信息；最后是底部企業(yè)信息欄。

品牌介紹這一塊是作為妮雅絲美妝進行外部宣傳，以及對于客戶作為一個

圖6品牌介紹頁線框圖

8

湖南商務職業(yè)技術學院畢業(yè)設計

簡單的介紹的項目，中間的設計包含了簡單的線條與文字的搭配，對動態(tài)內(nèi)容

的版式進行圖文混合排版設計，重點是突出其中的設計風格。品牌介紹頁面文

字這一塊，主要是強調(diào)了妮雅絲的服務宗旨，以及建設理念。

2.1.6熱銷榜單頁版式

此版式為熱銷榜單頁面版式，主要包括三個部分，第一部分是頂部LOGO和

導航欄；第二部分是產(chǎn)品展示區(qū)，篩選出銷售量前六的產(chǎn)品制作成排行榜的形

式，每個產(chǎn)品展示區(qū)都會標出產(chǎn)品的排名，設計圖文左右對稱的混合版式，每

圖7熱銷榜單頁線框圖

個產(chǎn)品的展示區(qū)圖文版式左右變化，靈活布局，簡單明了，能夠讓客戶了解品

牌的熱銷產(chǎn)品信息，增強客戶的購物體驗感，通過產(chǎn)品的信息瀏覽使客戶找到

適合自己的，喜歡的產(chǎn)品；第三部分為底部企業(yè)信息欄，包含導航欄、企業(yè)的

地址以及聯(lián)系方式。

熱銷榜單頁面是作為妮雅絲網(wǎng)站的特色，向客戶展示的是網(wǎng)頁的綜合性和

9

湖南商務職業(yè)技術學院畢業(yè)設計

獨特性于一體的綜合頁面，我們從用戶的需求和用戶的瀏覽行為上來看，客戶

習慣性瀏覽較美觀完整和特色的網(wǎng)頁。妮雅絲美妝基于完整的網(wǎng)站建設，通過

妮雅絲的產(chǎn)品和網(wǎng)店相互搭配，利用客戶對產(chǎn)品的親近感和依賴感，使得客戶

更加了解產(chǎn)品的內(nèi)容，從而使客戶更加了解我們的產(chǎn)品版式內(nèi)容，讓大家更容

易接受，從而突出我們網(wǎng)站的個性化特點，吸引顧客，達到引流的目的，提升

客戶的體驗感，同時提高品牌的知名度。

2.1.7新聞動態(tài)頁版式

此版式為妮雅絲的新聞動態(tài)頁面版式，新聞動態(tài)是妮雅絲推出的另一個特

色，網(wǎng)頁內(nèi)容主要分享了各種護膚小技巧，每一動態(tài)內(nèi)容以幽默的方式和知心

小姐姐的口吻向廣大客戶介紹護膚的“小秘密”，還包括一些產(chǎn)品介紹等內(nèi)容，

為客戶滿足新式護膚知識各方面的需求。在動態(tài)分享或描述一些網(wǎng)絡上比較有

特色的護膚秘訣或產(chǎn)品，這些動態(tài)都是通過一線品牌和對美妝行業(yè)較為火的“熱

詞”了解進行發(fā)布，這也體現(xiàn)了妮雅絲的綜合軟實力。

圖8新聞動態(tài)頁線框圖

10

湖南商務職業(yè)技術學院畢業(yè)設計

2.2頁面視覺元素設計

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

關于妮雅絲網(wǎng)站色彩設計與搭配主要是從網(wǎng)頁主色系里面選擇，主要從LOG

O里面提取顏色，以及對于美妝行業(yè)，美妝網(wǎng)絡行業(yè)這一塊，根據(jù)它的性質(zhì)特點，

進行定位，最后再進行色彩搭配，美妝產(chǎn)品的特性以及公司的調(diào)性都包含在色

彩里面，選擇了合適的配色。提高網(wǎng)頁設計感。

圖9網(wǎng)站配色設計

在組色選擇時，我們選擇了透明度不同飽和度的藍色組合原組合元素特點，

其中占比從10%-30%不等。標準色中參照了運用于網(wǎng)頁的標志標題主菜單和主色

塊，另外主要搭配的形狀有三角形正方形等對稱類元素，其中占比5%左右，網(wǎng)

頁的色彩搭配主要運用了幾個原則以及幾種顏色的特點主要運用了藍色，藍色

色，讓人感到沉著穩(wěn)定，但卻有強烈的刺激性，所以我們降低了藍色的明度，

使他的緊張沖動的這種視覺疲勞的顏色，能激起人的吸引注意力。綠色有象征

一種寧靜舒適的情緒，而且綠色還能代表青春、活力、生機，這樣讓色彩感更

豐富，一定程度上吸引了客戶的閱讀興趣，同時我們摻雜了藍色與白色色相間

的顏色，這種顏色沉穩(wěn)自然，跟我們網(wǎng)站產(chǎn)品內(nèi)容相符合，正依據(jù)的是崇尚北

歐與大自然相融合的品牌理念。使得構(gòu)成圖形更加明顯，中間的擴張感和收縮

感綜合，讓人感覺到了一種平和安穩(wěn)柔順恬靜滿足。同時，白色，棕灰色的點

綴搭配給人一種純潔且樸實快樂的感覺，同時又增加了一些低調(diào)含蓄的內(nèi)涵。

2.2.2網(wǎng)站字體規(guī)范設計設計

網(wǎng)站中主體內(nèi)容采用“華文細黑”字體。此外在導航欄、熱銷榜單、新聞

動態(tài)等頁面部件中使用了“Arial”、“微軟雅黑”這些字體。

網(wǎng)站正文字體大小隨著版式的變動而調(diào)整大小粗細，除了“Arial”字體以

外，“華文細黑”字體為網(wǎng)站的主要字體，此字體靈活顯絹細、秀氣，使人感

11

湖南商務職業(yè)技術學院畢業(yè)設計

覺清爽、不易讓讀者在瀏覽網(wǎng)站時產(chǎn)生閱讀疲勞。

圖10網(wǎng)站字體規(guī)范圖

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

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

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

首先制作的是妮雅絲網(wǎng)站首頁，作為商業(yè)類型的網(wǎng)站，我將LOGO放在顯眼

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

12

湖南商務職業(yè)技術學院畢業(yè)設計

的位置-網(wǎng)頁頂部的正中間，可以讓客戶快速的了解這是什么網(wǎng)站，LOGO作為品

牌標識，應該放在客戶第一眼能夠看見的位置。LOGO下方設置了導航欄，包括

首頁、護膚、彩妝、品牌介紹、熱銷榜單、新聞動態(tài)，它的作用就是能夠引導

客戶瀏覽網(wǎng)站，使其快速地找到自己所需東西的位置。同時，瀏覽完其他頁面

時想要點擊進入首頁，只要點擊LOGO圖標即可。導航欄下方是輪播banner，設

置了爆款海報和活動海報。Banner下面是產(chǎn)品展示區(qū)，前面設計了圖文混合排

版的產(chǎn)品展示區(qū)，中間則是多張產(chǎn)品圖片靈活排版，最后是一張大的圖片宣傳

品牌理念，吸引客戶探索妮雅絲。在排版設計上并沒有整齊的排列，而是采用

靈活的排版形式，更好的展現(xiàn)產(chǎn)品，加深客戶對網(wǎng)站的印象。最后是底部企業(yè)

信息欄，其中還設置了一排導航欄方便客戶進入下一頁面，還包含了企業(yè)地址、

郵箱以及聯(lián)系方式。

3.1.2護膚頁面原型

妮雅絲的護膚分類產(chǎn)品頁面同樣是藍色調(diào)為主，其中參雜了許多鏈接塊。

將網(wǎng)頁的細節(jié)化處理做到了細微。宣傳banner圖中藍色與肉色的搭配即引起人

們的注意，也提升了網(wǎng)頁的整體形象氣質(zhì)以及規(guī)格。背景顏色為淺藍色，產(chǎn)品

展示圖用象牙白打底，整個色調(diào)比較清冷。產(chǎn)品展示區(qū)的左側(cè)是產(chǎn)品分類指南，

點擊產(chǎn)品系列可以看到每個系列的產(chǎn)品圖和介紹。

圖12護膚頁面原型

13

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.3彩妝頁面原型

圖13彩妝頁面原型

在妮雅絲彩妝網(wǎng)頁界面，同樣主打了一張簡約藍色調(diào)的產(chǎn)品海報。這張海

報通過產(chǎn)品簡單的擺放，將網(wǎng)頁的內(nèi)容從側(cè)面襯托出來，同時通過網(wǎng)頁banner

的宣傳，更加強調(diào)了網(wǎng)站的設計品味與定位。展示區(qū)主要內(nèi)容是產(chǎn)品的主圖以

及文字描述，能夠讓客戶直接看到并了解我們的產(chǎn)品信息，同時設置了鏈接塊，

能夠點擊主圖進入產(chǎn)品詳情頁，查看產(chǎn)品信息并點擊購買。

14

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.4品牌介紹頁原型

品牌介紹頁面從網(wǎng)頁高保真圖片來看，頁面設計十分簡單簡潔，只有簡單的

文字描述以及圖案組成，同時設置了藍色漸變的背景，但是其中不同的模塊呈

現(xiàn)出不一樣的感覺。

圖14品牌介紹頁原型

3.1.5熱銷榜單頁原型

熱銷榜單頁面同樣設置了LOGO、導航欄以及宣傳banner，能夠讓客戶快速

地瀏覽整個網(wǎng)站，頁面的主要內(nèi)容為產(chǎn)品展示區(qū)，在設計上采用左文右圖、右

文左圖交叉排列的形式，形成一個沖擊感較強的排行榜單，同時采用平鋪的表

15

湖南商務職業(yè)技術學院畢業(yè)設計

現(xiàn)手

法，使展示區(qū)視覺效果更好。

圖15熱銷榜單頁原型

16

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.6商品資訊詳情頁原型

商品詳情頁同樣有LOGO、導航欄，主要內(nèi)容是單個產(chǎn)品的展示區(qū)，左側(cè)是

圖16商品詳情頁原型

產(chǎn)品主圖，右側(cè)是產(chǎn)品相關文案以及價格，右下方還放置了掃碼購買的字樣和

二維碼，方面客戶在想要購買此產(chǎn)品時立即掃碼購買。

3.1.7新聞動態(tài)頁原型

最后的新聞動態(tài)頁面，清新淡雅的設計風格，從妮雅絲網(wǎng)站展