鲜尝厚买网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

3.2网页动态效果设计.............................................15

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

参考资料............................................................18

I

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

鲜尝厚买网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

鲜尝厚买（山东）食品有限公司成立于2019年4月。是一家主打卖糕点类

的食品制造公司。无论是从品质上，还是从服务上来说，公司秉承着着“以质

为本，以诚为信”的经营理念，以优质的产品来服务客户。

选择这个选题，首先是因为它的企业理念和产品品质吸引了我，其次，品

牌取名上也很有用心，第一个“鲜”字，就体现出自己产品的食材选择上就很

有讲究，例如，我最喜欢吃的鲜尝厚买蛋糕卷就是以阿华田可可粉与鲜尝厚买

糕点特色相结合，提取自阿华田可可粉，麦芽蛋白可可粉固态饮料，香浓美美

味加入奶粉调配。均衡营养配比，新鲜制作，具有丝滑细腻的口感。又如，鲜

尝厚买一口鲜手工蛋糕，45%鲜鸡蛋占比，一块蛋糕几乎一半是鸡蛋，因为对产

品的口感从不将就，所以才能做出的蛋糕才会如此柔软，绵润，开袋就能闻到

浓浓蛋香，让人馋涎欲滴。

通过网络调查，鲜尝厚买这家公司并没有进行太多线上宣传和产品推广，

想通过本网站，对该品牌产品进行线上推广，通过网站运营以提升该品牌的知

名度和曝光率。

1.1.1用户需求分析

通过前期调研发现随着人们的生活节奏不断地加快，为了适应这种节奏，

焙烤食品将会是人们食物最好的替代品，人们总说吃面包没有营养，可鲜尝厚

买的面包恰恰满足了客户的需求。而且口味和种类丰富，能满足客户各种需求

和口味。网站的设计简洁大方，因为是食品类网站，所以，网站主色调采用的

是暖色调。

（1）优质的产品。健康安全的产品是当今客户所追求的，且我们主打的就

是一个新鲜和营养，更加容易赢在起跑线。加强企业在客户中的形象。

（2）良好的品牌形象。我将产品的各个细节都展现在客户的眼中，不做任

何虚假宣传，让客户吃的放心。可以让客户对网站有进一步的了解。要牢牢的

锁住客户的味蕾。

（3）良好的客户体验。客户一看到网站就能够一目了然，能找到喜欢的产

品。当然产品美观图可不能少，可以加强视觉冲击力。更好从细节当中抓住客

1

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

户的心理。

1.1.2网站功能设计

经过我对大部分网站的结构和网站要实现的功能进行分析，我决定将鲜尝

厚买网页设计主要实现的功能模块有：

（1）首页：主要有banner，展示页，产品多种分类以及联系我们组成。

（2）产品中心：主要的就是展示当下最火的爆款产品以及产品推荐。

（3）详情页：主要就是让客户更好的了解我们的产品信息，产品服务，将

产品的每个细节都让客户看到，用户点击链接可以收藏和进行购买。

（4）登录和注册：如果用户没有账号的话可以点击注册，有账号的话直接

点击登录进到首页页面。注册会员可以享受会员福利等活动。

1.1.3竞品分析

表1竞品分析表

品牌主打产品产品成分产品大概种产品包装表产品分析结

类现果

面包新语大地震等面面粉，鸡蛋，面包蛋糕产品包装简口感一般，但

包水，黄油等洁大方，印上是很有性价

logo很有格比。

调。

85度C黑森林面包面粉，奶油，咖啡面包蛋产品为塑料价格贵，喜欢

巧克力，黄油，糕包装，印上喝咖啡的朋

鸡蛋等。logo简洁。友可以去试

试。

克莉斯汀蜂蜜果园蛋面粉，奶油，蛋糕，面包，淡紫色包装口感糯糯的

糕巧克力，黄油，饼干，点心等很不错。

鸡蛋等。

鲜尝厚买鸡蛋鲜蛋糕面粉，鸡蛋阿华夫蛋糕，包装简洁，印蛋糕很新鲜，

巧克力等鸡蛋鲜蛋糕有logo用料很足。

1.2网站结构设计

1.2.1交互逻辑设计

在本次网站设计当中运用最多的人机交互就是鼠标点击时以及载入时。实

现了图片与页面之间的跳转，以及图片与图片当中的自动滚动。其次还运用到

了鼠标移入时以及鼠标移出时，图片当中的一个尺寸变化。

（1）在首页当中，当鼠标点击展示页，会实现自动跳转到展示页当中。当

2

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

载入时，首页当中的图片会实现自动滑动，还有一些图片当中要鼠标移入时才

会实现图片移动。还有一些图片会实现图片旋转，当然也是要鼠标移入时才会

实现。

（2）在展示页当中，有许多不同种类的面包。不过当你用鼠标点击时，会

跳转到各个不同的页面.

（3）在详情页当中，当鼠标移入时，图片会实现自动滑动。当你点击加减

号的时候，会实现数字的自动跳动，用鼠标点击，立即抢购时会立马跳转到登

录页面。

（4）在登录与注册页当中，在注册页输入框内输入正确的信息并点击提交

会弹出一个提交成功的页面。然后再用鼠标点击提交成功页面会自动跳转到登

录页。再在登录页当中的输入框内输入信息。用鼠标点击登录按钮。会自动弹

出一个登录成功的页面，然后你再点击登录成功的页面，就会跳转到首页了。

1.2.2网页层次设计

图1网页层次设计图

3

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

2网站视觉设计

在网站设计当中，视觉设计是一个非常重要的部分。可以带给客户一个强

烈的视觉冲击感而且还能够起到吸引顾客的决定性作用。如果设计的网站整个

色调与主题风格不符，产品就无法留住客户，并让其购买你的产品。如果说你

的网站视觉设计风格与主题相符，并且特色突出，客户能在网站中能很快地找

到自己中意的产品，那么客户才会愿意花更多的时间停留在你的网站中，花钱

消费。足以体现网站视觉设计在网站设计当中是非常重要重要。

2.1页面版式设计

设计一个网站，当中的页面版式设计也是必不可少的，整个网站的结构框

架都是非常有讲究的，哪个板块该设计在什么地方都是有讲究的，这可不能乱

来。如果说你的页面版式设计的不合理会让客户看起来很不舒服的。所以对于

页面版式设计我可是精心设计的。

图2首页层次图

4

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

2.1.1网站首页

图3首页层次结构图

该页面为我的首页图，顶部为导航栏。左侧是鲜尝厚买的logo。导航栏的

右边为注册与登录页的框架。然后下面就是我的一个结构设计了。Banner分别

5

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

有“首页”“蛋糕卷”“魔立方”以及“展示页”可以进行点击，分别会跳转

到不同的页面。然后下面就是我的一个图片轮播，放上精美的美观图来吸引顾

客。再往下面看的话，就是一个本周热门零食排行榜。将卖的比较好的产品展

示给客户观看。不过这个环节是需要客户自己将鼠标移到图片时，图片才会自

动进行轮流滑动。然后再往下看就是一个口碑就是推荐。也就是把客户回访较

多的蛋糕设计在网页上。不过这个也是需要客户将鼠标移到图片上时，图片才

会进行转动。当你点击图片时，又会跳转到相应的详情页当中。再往下看的话，

就是“查看更多”的板块。当你点击时，会跳转到登录页面，会自动让你登录

该网站。然后下面就是整个网站的页尾了。也是我们对客户的一个保障，让客

户放心。对于鲜尝厚买这个网站的排版以及设计。我也是思考了许久才决定的。

为的就是让客户一目了然，看的舒适。

2.1.2网站详情页

图4商品详情页结构图

6

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

图5详情页层次结构图

7

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

该页面为商品详情页，当你从首页用鼠标点击进来时。就会跳转到一个商

品详情页当中来。左边就是商品详情的图片轮播设计。不过是需要你用鼠标移

入时才会实现这样的效果。右边的话就是商品的一个标题和销量。价格我是用

红色字体标出来的。然后再一个就是快递的一个配送地址。如果不是你想要的

配送地址，你可以点击箭头号来为选择你想要的地址，不过点击之后就会马上

跳转到登录页面，显示需要你去登录。然后就是一个口味的框架，选择你喜欢

的口味然后再看你需要买几份，可以点击加减号来选择。选择好后点击立即抢

购就好了。再往下的话就是产品的详细信息。产品的种类以及产品的口味，还

有产品的产地以及种种信息都是可以看的到的。然后就是商品详情的框架，可

以看到商品的详细细节以及优点。是可以一直往下滑的。滑到底部就是宝贝推

荐的框架，为客户推荐其他产品。当客户想点击时，也会跳转到相应的详情页

当中。

2.1.3登录注册页

图6登录注册结构图

8

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

图7登录页层次结构图

该页面为登录注册页。顶部都是导航栏和banner，是可以进行点击的。整

个登录注册页面的背景是一张风景图，然后在输入框内都有文字提示，当你输

入的时候，文字提示就会消失。输入完之后就可以点击注册账号。然后页面会

立马弹出一个“注册成功，请登录”的小框架，然后点击的话，就会转到登录

页面。再输入你相同的信息。登录页面的框架也会弹出一个登录成功的字样。

然后点击也会转到首页。整个登录注册页面的结构设计都是简洁大方，让人看

起来很舒服的感觉，重要的是我把整个登录注册页面的框架是放在中间的。

2.2页面视觉元素设计

2.2.1网站配色设计

整个网站的配色我采用的都是一个暖色调，用的是红蓝搭配。色彩分明。

红色鲜明，蓝色沉稳。给人一种时尚、新颖的感觉。红色代表热血兴奋、积极向上的感

觉;蓝色代表了青春活力、积极人生的个性。这两个颜色在色彩学里叫互补色也就是对立色,

它的特点是对比强烈醒目。

主色：

9

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

辅助色：

图8网站配色图

2.2.2标准字

主要就是要色彩分明要鲜艳，红色显得光鲜亮丽，辅助色采用蓝色搭配，

又显得着重沉稳些。字体设计主要采用的是一个Arial字体，然后详情页字体

都是采用微软正黑体字体。

图9网站字体图

2.2.3图标

图标设计方面主要是体现网页的风格。图标的大小都是在13pt，方便大家

识别。

图10网站图标图

2.2.4导航栏

导航采用的是顶部导航，方便人们查找。设计的也比较实用，每个栏目和

框架也能够一清二楚。

图11网站导航栏图

2.2.5网站logo

网站的logo毕竟代表着网站的形象，所以我设计的比较简单易懂。

10

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

图12网站logo图

2.2.6布局

网页的布局代表着整个网页的框架，每个页面的框架的大小为：宽1200px，

高1000px。

图13网页布局图

2.2.7弹窗

网站的弹窗是网页的点击效果，点击相应的内容就会出现。

图14网页弹窗图

3网站前端设计

3.1网页高保真原型设计

在本次的网站设计当中运用到了PS以及Axure软件来对网站进行设计以

及进行合理的排版。

3.1.1网站首页

在网站首页当中，我选用了三张精美的banner图来进行轮播。banner图片

是网站的品牌推广的重要窗口，所以在选图片当中，结合自己做该这个网站的

11

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

目标和审美，banner轮播图既不能做的太多于花哨，我会觉得这让人产生视觉

疲劳，抓不住重点。所以在选用图片的时候，我尽量还是选用图片颜色一致的

图片。做到一击命中吸引顾客。首先客户主要看到的就是我设计的一个大logo。

之后才是看到我的产品。产品也是进行了不同程度的分类。有本周卖的最好的

产品还有客户推荐的产品。进行了一个层次区分，还设计了一个“查看更多”

的框架方便客户浏览。不过在本周热门产品时，我也是进行了一个轮播效果。

在口碑推荐的时候，而是将产品进行了排版，并没有进行轮播。因为都运用轮

播的话，会看起来太单调了，会觉得这个网站没有什么亮点。

12

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

图15网站首页

3.1.2商品详情页

在商品详情页当中，我想要客户看到更多的产品图片，所以我就进行了一

个轮播效果。整体的一个排版就是一个左边是图片轮播，右边是产品细节图的

13

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

介绍。我把商品详情页的整个结构设成了一个竖屏，并没有弄了一个横版的就

敷衍了事了。因为我想让大家看到更多产品细节图和产品信息。让大家进一步

的了解到我们这个产品。

图16商品详情页

14

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

3.2网页动态效果设计

网页的动态效果是网页必不可少的一环，也是至关重要的一环。为了让整

个网站更有趣，我设计了图片轮播特效以及图片旋转特效等。

3.2.1网页动态特效原型

动态特效1：banner轮播特效

图17banner效果图1

图18banner效果图2

图19banner效果图3

在首页的banner当中，选用了三张图片来进行轮播，首先需要把轮播图准

备好。然后再设立一个动态面板，再将图片导进去，再进行用例等参数设置。

动态特效2：旋转图片

15

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

图20旋转图

我在商品的首页当中设置了图片旋转，首页看起来有更多花样，来吸引顾

客。

3.2.2网页动态特效效果实现

首先就是要说要banner的轮播效果制作。第一步就是要建立一个动态面板。

第二步紧接着在动态面板当中设置三个不同的面板，分别命名为面板1.面板2，

面板3。第三步我们再将我们选好的图片依次放到三张不同面板当中。最基础的

做好之后，第四步就是重点来了。我们再面板1当中设置一个属性“载入时”，

也就是说当客户点开这个网页，这个动态面板就会生效。第五步我们在点进载

入时，选择面板状态，选中面板1向面板2进行滑动，再自己选择滑动的时间。

特别提醒一下，滑动的状态一定要是“NEXT”，很多朋友都是忘记选择这个状

态，导致后面的图片无法就行轮播，就是因为你所选取的状态是错的。然后再

依次循环，让面板2向面板3滑动。再让面板3向面板1滑动。轮播效果完成。

图21轮播效果设置

接下来就是鼠标单击时，页面与页面之间进行跳动，以及图片与图片之间

进行跳动。这个其实很简单。只要在属性当中，选中鼠标单击时。如果你是要

实现到页面的环节。那么就选择超链接窗口。再选择你想要的那个页面就行了。

如果说你是实现图片与页面的跳转，也是点击图片，重复上面的操作。还有就

16

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

是鼠标移入时，图片的轮播，其实和banner的图片轮播差不了多少。唯一就区

别的就是两个的属性不同，一个是“载入时”，而另一个确实“鼠标移入时”，

这是它们唯一不同的操作，其他的就是一样的，也是可以实现图片轮播的。还

有一个重点就是图片的隐藏与显示。当我们想要这张图片一开始就隐藏的话，

我们需要给图片设置一个属性，那就是在“载入时”，我们就把这张图片隐藏

起来不显示。如果说在途中的你想要显示这张图片并且设置动态