妮雅絲網(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ì)..................................................................................................3

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

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

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

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

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

2.1.2護(hù)膚頁面版式.......................................................................................5

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

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

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

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

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

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

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

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

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

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

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

3.1.2護(hù)膚頁面原型.....................................................................................13

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

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

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

牌選擇入駐淘寶、天貓、京東等電商平臺(tái)。一方面，利用電商技術(shù)手段擴(kuò)大市

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

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

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

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

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

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

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

分析。首先，站在消費(fèi)者的角度進(jìn)行設(shè)計(jì)，妮雅絲網(wǎng)站應(yīng)更為直觀的讓消費(fèi)者

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

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

雅絲的主要消費(fèi)群體大多為女性，并且她們有線上購物的習(xí)慣，對(duì)于她們來說，

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

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

的產(chǎn)品并適合自己的產(chǎn)品的網(wǎng)站風(fēng)格。總的來說，我希望設(shè)計(jì)出簡(jiǎn)約大方，便

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

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

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

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

1

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

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

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

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

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

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

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

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

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

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

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(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ì)

當(dāng)客戶有了購買美妝產(chǎn)品的欲望，卻沒有明確的目標(biāo)時(shí)，當(dāng)他進(jìn)入妮雅絲

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

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

3

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

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

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

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

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

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

制作妮雅絲的整體網(wǎng)站設(shè)計(jì)的時(shí)候運(yùn)用了AdobeDreamweaver（網(wǎng)頁制作

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

妝、品牌介紹、熱銷榜單、新聞動(dòng)態(tài)），同時(shí)運(yùn)用了AdobeIllustratorCS6來制

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

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

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

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

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

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

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

的位置。

4

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

2.1.2護(hù)膚頁面版式

此版式設(shè)計(jì)為護(hù)膚類產(chǎn)品類目頁版式，主要包括logo、導(dǎo)航欄、banner、

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

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

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

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

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

管理

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

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

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

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

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

越容易形成忠實(shí)的顧客和店主關(guān)系，同時(shí)通過這種簡(jiǎn)單的設(shè)計(jì)能最高效率的保

圖3護(hù)膚頁面線框圖

證。

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

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

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

5

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

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

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

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

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

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

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

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

底部左側(cè)還設(shè)計(jì)導(dǎo)航欄，便于客戶瀏覽到底部時(shí)進(jìn)入下一頁面。

6

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

2.1.4商品資訊詳情頁版式

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

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

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

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

解產(chǎn)品

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

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

圖5商品詳情頁線框圖

7

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

2.1.5品牌介紹頁版式

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

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

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

有品牌LOGO的圖片，強(qiáng)調(diào)這頁面是關(guān)于妮雅絲介紹的頁面，展示區(qū)的版式設(shè)計(jì)，

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

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

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

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

品牌介紹這一塊是作為妮雅絲美妝進(jìn)行外部宣傳，以及對(duì)于客戶作為一個(gè)

圖6品牌介紹頁線框圖

8

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

簡(jiǎn)單的介紹的項(xiàng)目，中間的設(shè)計(jì)包含了簡(jiǎn)單的線條與文字的搭配，對(duì)動(dòng)態(tài)內(nèi)容

的版式進(jìn)行圖文混合排版設(shè)計(jì)，重點(diǎn)是突出其中的設(shè)計(jì)風(fēng)格。品牌介紹頁面文

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

2.1.6熱銷榜單頁版式

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

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

式，每個(gè)產(chǎn)品展示區(qū)都會(huì)標(biāo)出產(chǎn)品的排名，設(shè)計(jì)圖文左右對(duì)稱的混合版式，每

圖7熱銷榜單頁線框圖

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

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

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

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

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

9

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

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

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

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

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

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

客戶的體驗(yàn)感，同時(shí)提高品牌的知名度。

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

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

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

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

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

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

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

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

10

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

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

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

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

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

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

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

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

在組色選擇時(shí)，我們選擇了透明度不同飽和度的藍(lán)色組合原組合元素特點(diǎn)，

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

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

頁的色彩搭配主要運(yùn)用了幾個(gè)原則以及幾種顏色的特點(diǎn)主要運(yùn)用了藍(lán)色，藍(lán)色

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

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

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

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

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

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

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

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

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

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

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

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

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

11

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

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

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

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

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

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

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

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

12

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

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

牌標(biāo)識(shí)，應(yīng)該放在客戶第一眼能夠看見的位置。LOGO下方設(shè)置了導(dǎo)航欄，包括

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

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

時(shí)想要點(diǎn)擊進(jìn)入首頁，只要點(diǎn)擊LOGO圖標(biāo)即可。導(dǎo)航欄下方是輪播banner，設(shè)

置了爆款海報(bào)和活動(dòng)海報(bào)。Banner下面是產(chǎn)品展示區(qū)，前面設(shè)計(jì)了圖文混合排

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

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

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

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

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

3.1.2護(hù)膚頁面原型

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

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

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

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

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

圖12護(hù)膚頁面原型

13

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

3.1.3彩妝頁面原型

圖13彩妝頁面原型

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

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

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

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

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

14

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

3.1.4品牌介紹頁原型

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

文字描述以及圖案組成，同時(shí)設(shè)置了藍(lán)色漸變的背景，但是其中不同的模塊呈

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

圖14品牌介紹頁原型

3.1.5熱銷榜單頁原型

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

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

文左圖交叉排列的形式，形成一個(gè)沖擊感較強(qiáng)的排行榜單，同時(shí)采用平鋪的表

15

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

現(xiàn)手

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

圖15熱銷榜單頁原型

16

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

3.1.6商品資訊詳情頁原型

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

圖16商品詳情頁原型

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

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

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

最后的新聞動(dòng)態(tài)頁面，清新淡雅的設(shè)計(jì)風(fēng)格，從妮雅絲網(wǎng)站展