妮雅丝网站Web端网页设计

湖南商务职业技术学院毕业设计

目录

1网站设计需求分析....................................................................................................1

1.1网站建设背景..............................................................................................1

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

1.1.2网站功能设计.......................................................................................1

1.2网站结构设计..................................................................................................3

1.2.1网页层次设计.......................................................................................3

1.2.2交互逻辑设计.......................................................................................3

2网站视觉设计............................................................................................................4

2.1页面版式设计..............................................................................................4

2.1.1网站首页版式.......................................................................................4

2.1.2护肤页面版式.......................................................................................5

2.1.3彩妆类产品页版式...............................................................................5

2.1.4商品资讯详情页版式...........................................................................6

2.1.5品牌介绍页版式...................................................................................8

2.1.6热销榜单页版式...................................................................................9

2.1.7新闻动态页版式.................................................................................10

2.2页面视觉元素设计....................................................................................11

2.2.1网站配色设计.....................................................................................11

2.2.2网站字体规范设计设计.....................................................................11

3网站前端设计..........................................................................................................12

3.1网页高保真原型设计................................................................................12

3.1.1网站首页原型.....................................................................................12

3.1.2护肤页面原型.....................................................................................13

3.1.3彩妆页面原型.....................................................................................14

3.1.4品牌介绍页原型.................................................................................15

3.1.5热销榜单页原型.................................................................................15

I

湖南商务职业技术学院毕业设计

3.1.6商品资讯详情页原型.........................................................................16

3.1.7新闻动态页原型.................................................................................17

3.2网页动态特效设计....................................................................................17

4设计总结..................................................................................................................18

参考资料.........................................................................................................................19

II

湖南商务职业技术学院毕业设计

妮雅丝网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

1.1.1用户需求分析

随着时代的进步以及经济的迅速发展，人们的生活水平和消费意识不断提

升，不在满足于基本需求，追求更高层次的需求。美妆产品正好契合消费者的

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

互联网应用技术的普及，使得电子商务迅速发展以及移动支付和物流不断

提升，网上购物逐渐成为一种生活习惯，越来越多的消费者选择在网络购物平

台购买商品，足不出户就能拥有方便快捷的购买体验。现如今，越来越多的品

牌选择入驻淘宝、天猫、京东等电商平台。一方面，利用电商技术手段扩大市

场，提高企业的利润水平；另一方面，也可以维持品牌的地位和提高品牌知名

度，为了提高品牌知名度，越来越多的企业建立起了属于自己的品牌官网。而

建立品牌官网，需要根据用户需求来对网站的结构设计和功能设计进行分析和

了解，设计出让消费者视觉美观、浏览便捷的网站，对消费者具有吸引力和用

户友好性，从而提高品牌知名度。

所以我在设计妮雅丝美妆网站的页面时，查阅了品牌影响力较大的一些美

妆品牌，通过对它们官网的设计风格、结构设计以及功能设计了解并进行对比

分析。首先，站在消费者的角度进行设计，妮雅丝网站应更为直观的让消费者

看到其品牌的品牌产品、品牌文化和理念，以最快的方式认识和了解品牌并在

消费者的心里留下非常深刻的印象，从而提高消费者采取购买行为的几率。妮

雅丝的主要消费群体大多为女性，并且她们有线上购物的习惯，对于她们来说，

买到健康产品并且适合自身的产品是她们的主要购买需求之一，所以针对消费

者的需求分析，要好好设计出让消费者在浏览网站时能够快速的找到自己喜欢

的产品并适合自己的产品的网站风格。总的来说，我希望设计出简约大方，便

捷直观的官网。

1.1.2网站功能设计

妮雅丝美妆的网站实现的主要功能包括，妮雅丝首页、护肤、彩妆、品牌

介绍、热销榜单以及新闻动态六个模块，其中“妮雅丝首页”的功能主要是让

1

湖南商务职业技术学院毕业设计

用户快速的了解认识网站的基本功能，其中包括了妮雅丝品牌logo展示、导航

栏、商品详情的展示、妮雅丝产品宣传banner的展示以及底部的企业信息。

“护肤”页面展示包括了搜索导航栏、妮雅丝品牌logo展示、商品分类详情的

展示、宣传banner的展示、底部的企业信息展示。然后“品牌介绍”页面主要

展示了妮雅丝美妆品牌的创造由来以及品牌历程，还包括品牌理念和品牌文化。

“热销榜单”主要导航栏、妮雅丝品牌logo展示、宣传banner的展示、底部

的企业信息展示以及本品牌销量较好且进行销量排名的产品展示，是妮雅丝美

妆网站的特色部分。最后“新闻动态”页面主要展示了妮雅丝品牌的相关动态，

包含一些护肤美妆技巧的分享以及相关产品的介绍等。

2

湖南商务职业技术学院毕业设计

1.2网站结构设计

1.2.1网页层次设计

图1网站结构设计

1.2.2交互逻辑设计

当客户有了购买美妆产品的欲望，却没有明确的目标时，当他进入妮雅丝

美妆网站，他可以根据自己的需求在导航栏选择护肤还是彩妆产品页面，这样

他在看到自己喜欢的产品时即可以立即购买。同时，由于网页设计的独特，在

3

湖南商务职业技术学院毕业设计

用户闲逛网页时，他看到了热销榜单专栏，发现其中推荐的销量较高的产品他

很喜欢且适合自己的肤质，于是，再次点击并选择购买。

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

制作妮雅丝的整体网站设计的时候运用了AdobeDreamweaver（网页制作

软件）来制作网页的美化和原型图样，以及排序（如导航栏：首页、护肤、彩

妆、品牌介绍、热销榜单、新闻动态），同时运用了AdobeIllustratorCS6来制

作网页首页的logo以及细节化图片及图标。

网站首页的功能主要是充分展示产品和服务，让用户简单迅速的认知了解

网站的基本功能。这一部分包括顶部logo、导航栏、轮播banner、热销产品展

示图、产品组合以及底部信息栏（包含企业的所在地址以及联系方式）。在设

计网站首页时，将网站首页的内容做精简化设计，将导航栏以及底部设计简化

到极致，一目了然，能够快速地让用户进入页面后找到自己所需要了解的东西

图2网站首页线框图

的位置。

4

湖南商务职业技术学院毕业设计

2.1.2护肤页面版式

此版式设计为护肤类产品类目页版式，主要包括logo、导航栏、banner、

产品展示以及底部信息栏。

对于护肤页面，是依据妮雅丝的所有产品进行分类，妮雅丝是包含护肤、

彩妆、个人护理等全系列美妆品牌，则将产品页面分为彩妆和护肤两大页面，

根据妮雅丝护肤类产品的产品系列来进行的梯级式设计。作为新时尚的销售美

妆产品的小众品牌网站，同其他很多一线网络美妆品牌网站一样采用美妆分类

管理

设计。妮雅丝网站设计的独特创新在于保证了基本的查找需求之后，在一定程

度对网页美化与设计。分类后的护肤类产品，大图小字、上图下文（介绍产品

的图片、功效以及价格）的排版模式构成了商品展示区，能够让客户更加清楚

地了解品牌的产品，同时能够快捷的找到自己所需要的产品，产品通过这样的

方式大大节省了客户的时间，同时也提升了客户对店铺的依赖，依赖程度越高

越容易形成忠实的顾客和店主关系，同时通过这种简单的设计能最高效率的保

图3护肤页面线框图

证。

2.1.3彩妆类产品页版式

此版式设计为彩妆类产品详情页版式，主要分为三个部分，第一部分是顶

部logo和导航栏，LOGO区位于网站顶部中间，代表品牌的标识和形象，导航栏

5

湖南商务职业技术学院毕业设计

引导客户浏览网站，可以让客户快速地查找品牌的信息；第二部包含宣传banner

以及产品展示区，宣传banner的设置能够让客户看到彩妆类销售较好的产品，

提高客户的购物体验感，产品展示区使用大图小字、上图下文的混合版式设计，

文字描述产品的特点及功效，客户可以点击产品图片进入该产品详情页进行查

看并直接扫码购买，这样能够让客户更加清楚地了解产品的信息，找到自己所

图4彩妆类产品页线框图

需要的产品；最后一部分是底部企业信息栏，包含企业的地址以及联系方式，

底部左侧还设计导航栏，便于客户浏览到底部时进入下一页面。

6

湖南商务职业技术学院毕业设计

2.1.4商品资讯详情页版式

此版式为商品资讯详情页面版式，主要包括顶部LOGO、导航栏、商品详情

展示区以及底部企业信息栏。导航栏能够让客户快速地找到自己想要的东西的

位置；商品详情展示区的版式设计是图文结合的混合排版模式，左侧为产品图

片，右侧文案介绍产品的信息以及价格，介绍产品的特点与功效，方便客户了

解产品

的性能对自己是否合适，右下侧还添置了二维码，便于客户遇到喜欢的产品扫

码联系并购买。

图5商品详情页线框图

7

湖南商务职业技术学院毕业设计

2.1.5品牌介绍页版式

此版式为品牌介绍页面版式，主要包括三个部分，第一部分是顶部LOGO和

导航栏；第二部分是banner以及品牌信息内容展示区（包含企业介绍、品牌建

设历程、品牌文化和品牌理念，还包括企业的社会责任历程），banner使用带

有品牌LOGO的图片，强调这页面是关于妮雅丝介绍的页面，展示区的版式设计，

首先为企业介绍文字居中位于banner下方，然后是品牌历程，左文右图的混合

排版，品牌文化以及品牌理念相继排列，位于页面中间，最后是社会责任，采

用左图右文的混合排版，使用矩形浅色背景把文字突显出来。这样的版式设计

能够让客户一目了然，清楚了解品牌的信息；最后是底部企业信息栏。

品牌介绍这一块是作为妮雅丝美妆进行外部宣传，以及对于客户作为一个

图6品牌介绍页线框图

8

湖南商务职业技术学院毕业设计

简单的介绍的项目，中间的设计包含了简单的线条与文字的搭配，对动态内容

的版式进行图文混合排版设计，重点是突出其中的设计风格。品牌介绍页面文

字这一块，主要是强调了妮雅丝的服务宗旨，以及建设理念。

2.1.6热销榜单页版式

此版式为热销榜单页面版式，主要包括三个部分，第一部分是顶部LOGO和

导航栏；第二部分是产品展示区，筛选出销售量前六的产品制作成排行榜的形

式，每个产品展示区都会标出产品的排名，设计图文左右对称的混合版式，每

图7热销榜单页线框图

个产品的展示区图文版式左右变化，灵活布局，简单明了，能够让客户了解品

牌的热销产品信息，增强客户的购物体验感，通过产品的信息浏览使客户找到

适合自己的，喜欢的产品；第三部分为底部企业信息栏，包含导航栏、企业的

地址以及联系方式。

热销榜单页面是作为妮雅丝网站的特色，向客户展示的是网页的综合性和

9

湖南商务职业技术学院毕业设计

独特性于一体的综合页面，我们从用户的需求和用户的浏览行为上来看，客户

习惯性浏览较美观完整和特色的网页。妮雅丝美妆基于完整的网站建设，通过

妮雅丝的产品和网店相互搭配，利用客户对产品的亲近感和依赖感，使得客户

更加了解产品的内容，从而使客户更加了解我们的产品版式内容，让大家更容

易接受，从而突出我们网站的个性化特点，吸引顾客，达到引流的目的，提升

客户的体验感，同时提高品牌的知名度。

2.1.7新闻动态页版式

此版式为妮雅丝的新闻动态页面版式，新闻动态是妮雅丝推出的另一个特

色，网页内容主要分享了各种护肤小技巧，每一动态内容以幽默的方式和知心

小姐姐的口吻向广大客户介绍护肤的“小秘密”，还包括一些产品介绍等内容，

为客户满足新式护肤知识各方面的需求。在动态分享或描述一些网络上比较有

特色的护肤秘诀或产品，这些动态都是通过一线品牌和对美妆行业较为火的“热

词”了解进行发布，这也体现了妮雅丝的综合软实力。

图8新闻动态页线框图

10

湖南商务职业技术学院毕业设计

2.2页面视觉元素设计

2.2.1网站配色设计

关于妮雅丝网站色彩设计与搭配主要是从网页主色系里面选择，主要从LOG

O里面提取颜色，以及对于美妆行业，美妆网络行业这一块，根据它的性质特点，

进行定位，最后再进行色彩搭配，美妆产品的特性以及公司的调性都包含在色

彩里面，选择了合适的配色。提高网页设计感。

图9网站配色设计

在组色选择时，我们选择了透明度不同饱和度的蓝色组合原组合元素特点，

其中占比从10%-30%不等。标准色中参照了运用于网页的标志标题主菜单和主色

块，另外主要搭配的形状有三角形正方形等对称类元素，其中占比5%左右，网

页的色彩搭配主要运用了几个原则以及几种颜色的特点主要运用了蓝色，蓝色

色，让人感到沉着稳定，但却有强烈的刺激性，所以我们降低了蓝色的明度，

使他的紧张冲动的这种视觉疲劳的颜色，能激起人的吸引注意力。绿色有象征

一种宁静舒适的情绪，而且绿色还能代表青春、活力、生机，这样让色彩感更

丰富，一定程度上吸引了客户的阅读兴趣，同时我们掺杂了蓝色与白色色相间

的颜色，这种颜色沉稳自然，跟我们网站产品内容相符合，正依据的是崇尚北

欧与大自然相融合的品牌理念。使得构成图形更加明显，中间的扩张感和收缩

感综合，让人感觉到了一种平和安稳柔顺恬静满足。同时，白色，棕灰色的点

缀搭配给人一种纯洁且朴实快乐的感觉，同时又增加了一些低调含蓄的内涵。

2.2.2网站字体规范设计设计

网站中主体内容采用“华文细黑”字体。此外在导航栏、热销榜单、新闻

动态等页面部件中使用了“Arial”、“微软雅黑”这些字体。

网站正文字体大小随着版式的变动而调整大小粗细，除了“Arial”字体以

外，“华文细黑”字体为网站的主要字体，此字体灵活显绢细、秀气，使人感

11

湖南商务职业技术学院毕业设计

觉清爽、不易让读者在浏览网站时产生阅读疲劳。

图10网站字体规范图

3网站前端设计

3.1网页高保真原型设计

3.1.1网站首页原型

首先制作的是妮雅丝网站首页，作为商业类型的网站，我将LOGO放在显眼

图11网站首页原型

12

湖南商务职业技术学院毕业设计

的位置-网页顶部的正中间，可以让客户快速的了解这是什么网站，LOGO作为品

牌标识，应该放在客户第一眼能够看见的位置。LOGO下方设置了导航栏，包括

首页、护肤、彩妆、品牌介绍、热销榜单、新闻动态，它的作用就是能够引导

客户浏览网站，使其快速地找到自己所需东西的位置。同时，浏览完其他页面

时想要点击进入首页，只要点击LOGO图标即可。导航栏下方是轮播banner，设

置了爆款海报和活动海报。Banner下面是产品展示区，前面设计了图文混合排

版的产品展示区，中间则是多张产品图片灵活排版，最后是一张大的图片宣传

品牌理念，吸引客户探索妮雅丝。在排版设计上并没有整齐的排列，而是采用

灵活的排版形式，更好的展现产品，加深客户对网站的印象。最后是底部企业

信息栏，其中还设置了一排导航栏方便客户进入下一页面，还包含了企业地址、

邮箱以及联系方式。

3.1.2护肤页面原型

妮雅丝的护肤分类产品页面同样是蓝色调为主，其中参杂了许多链接块。

将网页的细节化处理做到了细微。宣传banner图中蓝色与肉色的搭配即引起人

们的注意，也提升了网页的整体形象气质以及规格。背景颜色为浅蓝色，产品

展示图用象牙白打底，整个色调比较清冷。产品展示区的左侧是产品分类指南，

点击产品系列可以看到每个系列的产品图和介绍。

图12护肤页面原型

13

湖南商务职业技术学院毕业设计

3.1.3彩妆页面原型

图13彩妆页面原型

在妮雅丝彩妆网页界面，同样主打了一张简约蓝色调的产品海报。这张海

报通过产品简单的摆放，将网页的内容从侧面衬托出来，同时通过网页banner

的宣传，更加强调了网站的设计品味与定位。展示区主要内容是产品的主图以

及文字描述，能够让客户直接看到并了解我们的产品信息，同时设置了链接块，

能够点击主图进入产品详情页，查看产品信息并点击购买。

14

湖南商务职业技术学院毕业设计

3.1.4品牌介绍页原型

品牌介绍页面从网页高保真图片来看，页面设计十分简单简洁，只有简单的

文字描述以及图案组成，同时设置了蓝色渐变的背景，但是其中不同的模块呈

现出不一样的感觉。

图14品牌介绍页原型

3.1.5热销榜单页原型

热销榜单页面同样设置了LOGO、导航栏以及宣传banner，能够让客户快速

地浏览整个网站，页面的主要内容为产品展示区，在设计上采用左文右图、右

文左图交叉排列的形式，形成一个冲击感较强的排行榜单，同时采用平铺的表

15

湖南商务职业技术学院毕业设计

现手

法，使展示区视觉效果更好。

图15热销榜单页原型

16

湖南商务职业技术学院毕业设计

3.1.6商品资讯详情页原型

商品详情页同样有LOGO、导航栏，主要内容是单个产品的展示区，左侧是

图16商品详情页原型

产品主图，右侧是产品相关文案以及价格，右下方还放置了扫码购买的字样和

二维码，方面客户在想要购买此产品时立即扫码购买。

3.1.7新闻动态页原型

最后的新闻动态页面，清新淡雅的设计风格，从妮雅丝网站展