兰网站Web端网页设计

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

目录

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

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

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

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

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

2.2网站视觉设计元素.............................................16

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

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

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

4设计总结..........................................................30

参考资料............................................................32

I

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

兰网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

兰（LAN）品牌诞生于2019年，国内较早贯彻“以油养肤”护肤理念的护肤

品品牌，兰所倡导“纯净有效护肤”，移除一切不必要的概念和成分，天然、有效、

透明配方的理念受到广大消费者的认可和喜爱，其产品更是凭借富含“钻石油脂、

科技油溶性植物成分、玫瑰果油”等滋养肌肤、抗皮肤衰老成分迅速打入护肤品

市场。

我自己本身比较了解这个品牌，也挺喜欢这个品牌的产品，有发现它在许

多平台上进行宣传推广，但是却没有找到它的官网。通过调研发现品牌官网无

论是在树立品牌形象还是产品推广上都发挥着重要作用，而刚好我在实习过程

中组长要求我们独立构建网站作为考核，考虑到兰并没有官网，我决定将兰网

站设计作为我的被考核项目，同时我希望把兰的网站设计成与它品牌理念相符

合以及满足消费者需求的独一无二的网站。

1.1.1用户需求分析

网站用户需求对于甲方来说，兰的网站设计需要让客户更加直观的了解到

它的产品系列、产品展示、产品理念、产品研发标准、品牌文化以及一系列与

企业相关的营销活动，能够让顾客快速直观的深入了解整个品牌，增加消费者

对该品牌的信任感以及促进销售。

兰网站针对的主要顾客群体为女性购买者，其中大部分肤质属于大干皮、

干皮、干敏皮，对护肤品要求高，使用护肤品频率高的女性。而这部分女性年

龄大概在20~40岁左右，中等收入且有独立经济来源、消费能力强。女性在网

上购物人数占比最高，而且护肤品对于女性生活来说是必不可少的一部分。随

着消费水平的提高，女性选择护肤产品的要求越来高和严格，除追求精致美观

的产品设计、包装和产品所属品牌价值以外，对产品提供的基本效用、功能以

及更高层次的使用功能也格外重视。消费者不再购买毫无用处的“花瓶”，而是更

加注重产品使用的实际效用。因此，网站页面设计除了要美观舒适以外，还需

简单直观凸显产品“特色”，直击消费者购买产品时的痛点，满足消费者购买需求，

在消费者心中形成清晰的产品辨认度。兰倡导“极简有效护肤”理念，可以将品牌

1

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

理念贯彻至网站设计的过程当中。兰主要针对的客户群体是女性，网站设计也

需抓住女性的心理特征和审美观念，做到“极简、舒适”的设计风格，给消费者留

下深刻的产品印象和品牌形象。

1.1.2竞品分析

表1竞品分析表

品牌产品定位目标消费群体品牌主张产品卖点

逐本双效舒缓、保针对26-35岁追逐本质，寻十味高浓精油

湿、日抵抗、中国敏感肌肤求本心。复配、双重舒

夜修复轻熟女性，有愈科技。

独立经济来源、

消费能力强。

PMPM抗老紧致、舒年轻中等收入、去往世界，探富含玫瑰角鲨

缓修护、提亮有独立消费能索世界。烷舒缓物质、

肤色力的女性。透亮抗氧强韧

屏障。

萃乐活密集修复、长欧美国家和中简单、纯净、天然亲肤油脂、

（Trilogy）效滋润、舒缓国女性消费群活力。紧缩肌肤水分。

泛红干痒体

天露芬抗初老、修复全世界消费者实现自然健康德国原装进口、

保湿、紧致肌群体与肌肤呵护和抗老修复、轻

肤。谐统一。薄好吸收。

通过对同类竞争产品进行分析，得出以油护肤系列产品的定位以修复、抗

老、保湿为主，目标客户群体为年轻有购买能力的女性顾客。所以兰品牌面向

的是年轻、有护肤习惯且有独立经济来源的女性顾客群体，品牌主张为“纯净有

效护肤”，产品卖点为移除一切不必要的概念和成分，天然、有效、透明配方，

用最少的产品达到最有效的护肤效果。

1.1.3网站功能设计

兰网站网页设计主要实现的功能模块有：

首页：主要由banner、明星臻品、极简护肤组成。用户在浏览首页时可以点

击banner进入相应链接，也可以通过点击产品图片或者点击了解详情按钮可以

进入到产品的详情介绍页面中。

品牌故事：主要banner、品牌理念、品牌哲学、产品开发标准四个部分组成。

精油系列：介绍企业精油系列的相关产品，包括时光精油、修复精油、凤

凰精油等比较热门的几款产品。

2

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

洗护系列：介绍企业其他护肤产品，包括卸妆油、洗面奶、修复面霜、面

膜等产品。用户可以点击产品图片或者点击了解详情按钮进入相应的链接。

油乐场：是用来介绍产品配套产品瑜伽板的使用方法以及产品优惠活动，

用户在这个页面可以了解相关产品的活动以及参与活动的地点、方式等。

商品详情页面：是产品的详情页，主要包括商品主图、商品详细信息、用

户购买评价，用户可以点击加入购物车或者点击立即购买按钮进行购买。

登录和注册页面：用户可以进入登录页面进行登录，如果用户没有注册账

号，可以点击立即注册注册好账号之后再进行登录。

1.2网站结构设计

1.2.1网页层次设计

图1网站结构层次图

1.2.2交互逻辑设计

本网站主要人机交互式设计是点击鼠标跳转页面，即用户在浏览器浏览网

站时通过鼠标进入相应的页面查看相关信息。

网站的每一个页面都设计了一个导航栏，导航栏主要有首页、品牌文化、

精油系列、滋养护肤、油乐场按钮，用户可以通过点击导航栏上的按钮进入相

应的页面模块。

3

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

在网站首页，用户可以点击去登录进入会员登录页面，已经入会的用户可

以使用注册好了的账号密码直接登录，用户登录后成功后会有提示是进入首页

还是取消登录，用户可以自行选择。尚未入会的用户可以点击立即入会按钮进

行入会操作，入会成功可以点击登录按钮进行登录，点击登录页面的logo图片

按钮进入网站首页。回到网站首页，点击明星臻品栏里想要了解的产品图片进

入产品详情页，在产品详情页里可以点击购买按钮立即购买，也可点击加购按

钮将产品加入购物车，点击导航栏上的首页按钮即可返回首页页面。

在品牌故事页面，用户点击导航栏的品牌故事按钮可以进入品牌文化介绍

页面，了解相应品牌信息，让用户更快更好的了解到品牌信息，增加对品牌的

信任度。

在精油系列页面，用户点击精油系列按钮进入精油系列产品展示页面，点

击产品图片或了解详情按钮进入产品详情页面，帮助用户更详细的了解产品信

息。

在滋养护肤系列页面，用户点击滋养护肤按钮进入对应产品的展示页。点

击展示页里展示的产品图片或者点击了解详情可以进入对应产品的详情页面，

可以看到产品的详细介绍以及其他用户的购买体验。

在油乐场页面里面，用户点击油乐场按钮进入油乐场页面，在这个页面里

面，用户可以了解到产品配套产品瑜伽刮板的使用方法与功效，还可以了解企

业产品活动时间和参与地点。

在产品详情页里，用户可以鼠标点击加购按钮将想要购买的产品加入购物

车，也可以鼠标点击立即购买按钮购买该产品，向下滑动，可以点击宝贝详情

看到详细的宝贝介绍，点击宝贝评价可以看到以及购买过该产品的用户评价和

使用感受。

2网站视觉设计

2.1页面版式设计

网站的每个网页的版式设计我是先在稿纸上画出草稿线稿图，设计好草稿

线稿图之后采用AxureRP软件制作低保真线稿图，最后进行整个网站的高保真

图的制作。在确定整个网站的设计框架之前，我查阅了许多关于网站设计规范

的资料，同样也浏览了许多优秀的同行业品牌的网站设计，根据兰品牌不同产

品的特点来进行网页设计。

4

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

2.1.1网站首页

此页面为网站首页布局，网站首页整体框架包括顶部导航、主要内容、底

部导航三个部分。顶部导航包括logo导航、去登录和整个网站的主要导航栏目

区。主要内容包括热卖产品banner、明星臻品和极简护肤。底部导航包括公司相

关信息。

首页线框图主要采用AxureRP软件进行制作。制作过程主要分为三个步骤：

第一步使用矩形工具制作好顶部导航栏；第二步使用占位符工具确定爆款banner

的位置，用矩形工具和图片设计明星臻品以及极简护肤产品区域；最后使用矩

形工具绘制出底部导航栏。

网站首页是整个网站最重要第一个页面，因为用户浏览网站时看到的第一

个页面就是首页，首页的设计决定了用户对整个网站的第一个印象。我在首页

设计时首先考虑到的是要让用户直观且快速的知道整个网站传递给他的有价值

信息，吸引用户眼球，让用户有兴趣的接着浏览。所有我在首页内容版式设计

时采用了逻辑式思维，首先制作了产品的大banner给用户视觉冲击力；其次在

明星臻品区域使用四列式排列，产品与介绍左右交叉排列，这样用户在浏览时

不会决定枯燥无味；最后在极简护肤区域对产品采用竖向排列式，整个版面看

起来简单舒适，整齐一致。

图2首页层次结构图

5

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

图3首页线框图

2.1.2品牌故事页

此页面为品牌故事页，主要包括顶部导航栏、品牌故事内容区、底部导航

栏。顶部导航包括logo导航、去登录和整个网站的主要导航栏目区。品牌故事

6

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

内容区括banner、品牌理念、品牌哲学和开发标准。底部导航包括公司相关信息。

首页线框图主要采用AxureRP软件进行制作。制作过程分为三个步骤：第

一步，使用矩形工具绘制出顶部导航栏；第二步，使用占位符确定banner位置，

分别使用图片文字和矩形工具绘制出品牌理念、品牌哲学、开发标准区域；第

三步，使用矩形工具绘制出底部导航。

品牌故事页版面设计总体讲究一个简洁，目的在于让用户能够快速了解品

牌信息，文字与图片结合的方式将品牌理念赋予在产品本身，理念贯彻于产品

本身，用户在使用产品时能够联想到本企业的品牌文化，加深用户对产品的印

象。

图4品牌故事层次图

7

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

图5品牌故事线框图

8

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

2.1.3产品类目页

此页面为产品类目页，主要包括顶部导航栏、产品展示区、底部导航栏。

顶部导航包括logo导航、去登录和整个网站的主要导航栏目区。

产品类目页主要是展示企业不同产品种类，显示不同产品功能，同时增加

产品banner区展示产品大类。产品类目页用AxureRP制作，首先使用矩形工具

绘制出导航栏目；其次使用占位符确定banner区域；最后采用上图下文的样式

设计产品展示区，上方采用图片工具，下方使用圆角矩形加文字进行制作。产

品排列主要采用横向加纵向方式排列，上图下文排版产品信息整齐清晰，让用

户更快的找到与自己需求相关的产品。

图6产品类目页层次图

9

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

图7产品类目页线框图

2.1.4产品资讯页

此页面为产品资讯页，主要包括顶部导航栏、产品资讯、底部导航栏。顶

部导航包括logo导航、去登录和整个网站的主要导航栏目区。

产品资讯活动页主要是展示企业产品的配套工具以及相关活动，帮助用户

快速了解相关产品的使用方法，关注相关活动的开展。增加产品banner吸引用

户参与活动。产品类目页使用AxureRP制作，首先使用矩形工具绘制出导航栏

目；其次使用占位符确定banner区域；最后采用矩形绘制出配套工具使用教程

区域和活动开展内容区域，采用上文下图的方式进行排列。产品资讯页主要采

10

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

用纵向方式排列，图文结合便于用户清晰了解产品配套工具的使用，积极参与

企业活动，增加用户对企业的品牌忠诚度。

图8产品资讯层次图

11

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

图9产品资讯线框图

12

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

2.1.5商品详情页

此页面为商品详情页，主要包括顶部导航栏、产品详情、产品评价、底部

导航栏。顶部导航包括logo导航、去登录和整个网站的主要导航栏目区。

制作产品详情页的目的在于简单齐全的展示产品全部信息，让用户以最快

速度了解整个产品。在商品详情页版式设计上采用了左图右文的排版，左边是

产品主图，右边是产品介绍。在左图右文的排列下设置了产品详情图介绍以及

产品评价区域，用户通过滑动网页可以看到更加详细的产品介绍和产品评价信

息。商品详情页使用AxureRP软件进行设计，主要有三个步骤：第一步，使用

矩形工具绘制顶部底部导航栏目；第二步，使用图片工具和文字工具绘制出产

品详情区域，使用矩形工具绘制购买加购按钮；第三步使用矩形工具绘制产品

详细介绍和产品评价区域。

图10商品详情层次图

13

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

图11商品详情页线框图

14

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

2.1.6注册登录页

注册登录页面采用了左图右登录面的排版方式，这样的排版方式增加整个

页面的美感，不会让用户看起来单调和枯燥。

注册登录页使用AxureRP进行制作，首先使用矩形工具制作注册登录大致

内容区域；然后使用文本框制作注册登录具体内容区域；最后对整体内容区域

进行纵向排列。

图12注册登录页面层次图

图13注册登录页面线框图1

15

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

图13注册登录页面线框图2

2.2网站视觉设计元素

2.2.1颜色

网站整体的配色设计根据在产品本身颜色的基础上进行扩展选取的，主要

选择了淡黄色作为网站的主色调。黄色能够给用户一种“舒适，简单”的感觉，并

且与企业品牌理念“极简有效护肤”相适应。选取与产品同色系的颜色作为网站配

色，在展示产品时不会显得突兀。同样选用了与主色类似的淡色系作为网站的

辅助色。红色作为按钮的颜色。

16

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

图14网站配色图

2.2.2导航

导航栏采用了最常见的版式设计，导航栏可以把整个页面的大体内容呈现

在用户眼前，让用户迅速找到自己想了解的内容区域。

图15网页导航规范图

2.2.3布局

网站内容控制在1300px以内，Banner大小为1920*900px。

图16网页布局规范图

17

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

2.2.4字体

网页的主体字是华文楷体。banner内部的字体为华文新魏，网站导航栏和主

要内容部分使用的字体均为华文楷体。

图17网页字体规范图

2.2.5Logo

网站的logo凸显企业形象，富有创造和新颖性的logo往往能够让企业快速

被用户记住，用户在看到企业logo时会产生熟悉和亲近感。兰网站的logo来自

于兰这个字的拼写，logo设计简单易记。

图18网站logo图

3网站前端设计

3.1网页高保真原型设计

网页的高保真原型设计是用AxureRP完成制作的。

18

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

3.1.1网站首页

用户在浏览网站时第一个看到的就是网站首页，因此在网站首页设计里面

我首先是设计了产品的banner来吸引顾客注意。往下滑动设计了明星臻品和极

简护肤产品两个区域，明星臻品主要是本品牌的主打产品，极简护肤里主要是

不同功效的产品，用户可以根据自己肌肤特点和需要选择对应的产品。

19

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

图19网站首页效果图

20

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

3.1.2品牌故事页

品牌故事页面在版型设计方面采用了文字图形相结合的纵向排列，将产品

图片与品牌故事结合在一起，一来用户在浏览时避免枯燥单调的感觉，二来可

以加深用户对产品的印象。

图20品牌故事页效果图

21

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

3.1.3产品类目页

产品类目页的版型设计采用了三排纵向分布的版式设计，不同系列的产品

采用相同的版式设计，统一布局、简洁明了，方便用户浏览。

图21产品类目页效果图

22

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

3.1.4产品资讯页

产品咨询页里我制作了两个主要的内容：产品配套工具介绍和产品相关活

动介绍。用户可以在产品咨询页里了解产品配套工具的使用方法，也可以在这

里参与相关产品的活动。

图22产品资讯页效果图

23

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

3.1.5商品详情页

商品详情页采用了左图右文结合的版型设计，往下滑可以浏览到更详细的

商品介绍和宝贝评价，能够让用户在最短的时间内了解到商品信息。

图23商品详情页效果图

24

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

3.1.6注册登录页

注册登录面的设计我主要是想做的简单，容易操作，太过繁杂的注册登录

会让用户觉得麻烦，从而放弃购买。注册登录页整个版面我采用图框结合，放

置图片元素有美观版面效果，不会让页面显得单调。

图24注册登录页效果图1

图24注册登录页效果图2

25

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

3.2网页动态特效设计

3.2.1网页动态特效原型

1、Banner轮播特效：

图25banner效果图1

图26banner效果图2

图27banner效果图3

26

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

在首页banner轮播里面做了三张图，利用AxureRP软件中的动态面板实现

banner轮播效果。首先将三张图片做好，在AxureRP软件中设置动态面板，动

态面板编辑为三个内容页面，将对应的图片放进内容页面中，把想要显示的第

一个图片放到第一个内容页面中，在面板属性中设置好面板状态，最终实现轮

播效果。

2、导航栏滑动条滑动特效：

图28导航栏滑动条效果图1

图28导航栏滑动条效果图2

图28导航栏滑动条效果图3

图28导航栏滑动条效果图4

图28导航栏滑动条效果图5

在网站导航栏中做了滑动条特效，在AxureRP软件中使用矩形工具绘制出

滑动条的样式，确定滑动条在每个栏目文字下的位置，在属性中使用滑动属性

实现滑动条滑动效果。

3.2.2网页动态特效实现

1、Banner轮播动态特效实现步骤：

第一步：在AxureRP软件中设置一个动态面板，并给这个面板命名为banner

并在面板中设置三个不同的面板状态分别命名为banner1、banner2、banner3。

第二步：将制作好的banner图片分别放进以及命名好了的不同面板状态中

去，把第一个想要显示出来的banner放在最前面，之后的banner可以有选择的

27

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

放置。设置轮播效果时，首先要考虑到自己想要实现的轮播效果是什么。在设

计兰网站banner动态特效时，我想要实现的是当用户鼠标移进banner区域时，

banner轮播效果暂停，当鼠标移出时，banner轮播循环播放，而当用户对banner

里面的产品感兴趣时，点击图片可以进入到产品的详情页面进行购买。

第三步：选中面板点击属性里的属性，设置鼠标移出时面板状态，依次勾

选banner面板，选择状态为Next，时间间隔设置为为2000毫秒，首个状态延迟

2000毫秒后向后切换。设置鼠标移入状态，先勾选banner面板，再将选择转态

选为停止循环。

第四步：双击banner面板进入各个设置好的三个面板里面，选中已经放好

的banner图片，设置属性中鼠标单击时链接到对应产品详情页，对三张banner

图片进行依次操作实现链接之间的跳转，完成动态特效的实现。

图29banner轮播动态效果实现步骤图1

图29banner轮播动态效果实现步骤图2

2、导航栏滑动条滑动特效实现步骤：

第一步：在AxureRP软件中拖拽5个文本标签，将文本标签的内容分别编

辑为首页、品牌故事、精油系列、滋养护肤、油乐场，在文字样式中设置文字

颜色为黑色。然后拖拽一个横线部件，将横线部件样式设置为第五个宽度，颜

色设置为红色；再拖拽一个三角形部件，调整三角形大小，颜色设置为红色，

28

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

然后组合这两个部件，将它们命名为滑动条。再接着设置文字样式，依次选择

首页、品牌故事、精油系列、滋养护肤、油乐场文字，在属性中设置鼠标移入

时文字颜色为红色，鼠标移出时文字颜色设置为黑色。

第二步：确定滑动条在导航栏首页文字下的位置（X：281Y：171），在首

页页面属性中的页面载入时设置首页文字富文本，在富文本中设置颜色为红色，

字体加粗，然后设置滑动条移动到达（X：281Y：171），动画设置为线性，时

间为400毫秒。

第三步：将滑动条分别移动到品牌故事、精油系列、滋养护肤、油乐场文

字下确定滑动到的位置（X：569Y：171）；（X：905Y：171）；（X：1242

Y：171）；（X：1553Y：171）；然后在品牌故事页面属性页面载入时设置品

牌故事文字富文本，在富文本中设置颜色为红色，字体加粗，然后设置首页文

字富文本，在富文本中设置首页文字为黑色，字体不加粗，再设置滑动条滑动

到达（X：569Y：171），动画设置为线性，时间为400毫秒。

第四步：在精油系列页面属性页面载入时设置精油系列文字富文本，在富

文本中设置颜色为红色，字体加粗，然后设置品牌故事文字富文本，在富文本

中设置首页文字为黑色，字体不加粗，再设置滑动条滑动到达（X：905Y：

171），动画设置为线性，时间为400毫秒。

第五步：在滋养护肤系列页面属性页面载入时设置滋养护肤文字富文本，

在富文本中设置颜色为红色，字体