和路雪品牌网店视觉方案设计

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

目录

1网店视觉设计需求分析............................................................................................1

1.1项目背景......................................................................................................1

1.2项目需求分析..............................................................................................1

1.3色彩设计......................................................................................................2

1.4字体规范......................................................................................................3

2网店页面原型图分析与设计方案............................................................................4

2.1首页..............................................................................................................4

2.2搜索结果页..................................................................................................6

2.3商品详情页..................................................................................................6

2.4登录注册页..................................................................................................7

2.5购物车..........................................................................................................8

2.6订单结算页..................................................................................................9

2.7个人中心......................................................................................................9

3网店页面视觉效果设计与制作..............................................................................10

3.1首页视觉设计与制作................................................................................10

3.1.1设计思路.............................................................................................10

3.1.2设计效果.............................................................................................12

3.2搜索结果页视觉设计与制作....................................................................14

3.2.1设计思路.............................................................................................14

3.2.2设计效果.............................................................................................14

3.3商品详情页视觉设计与制作....................................................................14

3.3.1商品详情页设计思路.........................................................................14

3.3.2商品详情页设计效果.........................................................................15

3.4登录注册页视觉设计与制作....................................................................17

3.4.1设计思路.............................................................................................17

3.4.2设计效果.............................................................................................17

I

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

3.5购物车视觉设计与制作............................................................................18

3.5.1设计思路.............................................................................................18

3.5.2设计效果.............................................................................................18

3.6订单结算页视觉设计与制作....................................................................19

3.6.1设计思路.............................................................................................19

3.6.2设计效果.............................................................................................20

3.7个人中心视觉设计与制作........................................................................20

3.7.1设计思路.............................................................................................20

3.7.2设计效果.............................................................................................21

4总结..........................................................................................................................21

参考资料.........................................................................................................................23

II

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

和路雪品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

近年来，伴随着互联网的快速发展，以及物流行业的突飞猛进，再加上淘

宝等大型电商企业的推波助澜，电子商务行业得到了充分的发展。如今电子商

务行业竞争越来越大，想要赢得一席之地必须费劲心思，从各方面入手做到极

致，一个好的店铺，必须要建立独立的品牌形象网店，要有与商品对应融合的

店铺装修，这样不仅能吸引消费者的眼球，更能增加点击率和成交量。

放眼望去，现在的网店越来越多，在选择和购买商品的时候，个性有创新

的网店设计尤为重要，买家往往只能从网上的图片和文字以及宝贝评价来了解

产品。如大家所熟知的“三只松鼠”、“良品铺子”和“百草味”等众多食品品

牌都拥有自己的网站店铺，店铺装修可以有效地增加顾客的回头率以及提升产

品的销售量。

和路雪生产冰淇淋已有很长的历史，属于联合利华集团旗下品牌。1993年，

和路雪正式进入了中国。和路雪始终以卓越的技术、严格的品质、创新的精神

创造产品，一直保持着冰淇淋行业的领导地位。和路雪在淘宝、天猫、京东等

购物平台上都有自己独立品牌网店。

1.2项目需求分析

当前国内冰淇淋市场的消费属性正悄然生变。中国食品产业分析师朱丹蓬

认为，“以往的冰淇淋产品被视为季节性产品，伴随年轻消费者对冰淇淋产品消

费行为的改变，冰淇淋已成长为无季节限制的一类产品。”近年食品行业发展迅

速，多个食品品牌崛起，食品行业竞争压力大。虽然和路雪拥有自己独立品牌

网站，但实际的购买人数并不多。和路雪独立品牌网站的网页视觉设计过于简

单朴素，网页的排版布局也有些许不合理的地方，品牌的品牌性和独特性没有

很好的表现出来。

根据市场调查发现，中国家庭收入和家庭消费水平逐年提高，人们对于休

闲食品的需求量提升，中国冰淇淋行业的市场规模也在逐年上升。2020年冰淇

淋线上销售占比约为5%，到2021年，这一比例上升至20%。尽管受限于冰淇淋

1

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

自身的产品特性，线上销售很难成为冰淇淋的主要销售方式，但是在运输技术、

运输速度不断发展的大环境下，线上销售在冰淇淋行业的比重将会越来越高，

因此线上品牌网店建设尤为重要。

冰淇淋的消费群体主要是12-35岁的年轻人。为品牌注入新的活力与年轻

元素，是与年轻消费者对话的一个重要途径，所以和路雪的线上网店视觉设计

应该充满浪漫与活力。为吸引广大的年轻人，我将粉色设定为网页的主色，体

现出浪漫与活力。根据品牌概念sharehappy设计各个页面，通过使用简单的图

形元素和鲜艳的色彩来传达品牌基调和风格。在详情页中以冰淇淋包装和产品

联名为主题创作，可用于推出新口味或与消费者进行更积极、更友好的交流；

在首页中主要突出和路雪的品牌性和独特性，吸引消费者，增强消费者的购买

欲，增加产品的销量。

1.3色彩设计

网页的色彩设计主要为粉色，冰淇淋的消费群体主要是年轻的女性或者小

朋友，粉色能很好的符合目标客户的审美，同时也能够很好的体现出和路雪品

牌的品牌风格。“粉色是最温柔的颜色，”ChristianDior先生说“每个女人都

应该拥有粉色，粉色是幸福和女性的象征。”粉色是一个梦幻的颜色，散发着一

种甜甜的糖果的气息，带给人无限美好，在童话里，粉色通常是公主的配色。

粉色代表甜美，温柔和天真纯真，可以软化攻击，舒缓不安，充满活力和生机。

为了使网页看起来不单调，色彩和谐统一，我还是使用了紫色和粉色相近

色作为辅助色。深浅各异的粉色彼此衬托，使整个页面散发出甜甜的味道，激

发消费者的购买欲，同时体现出和路雪品牌的内涵和文化。根据各个页面和产

品的不同，在页面中的“立即抢购”、“加入购物车”、“去结算”等按钮，运用

了红色作为点缀色，引起消费者的注意，起到强调的作用。蓝色为辅助色，主

要运用在“会员中心”页面和“详情页”页面中，更好的依托出会员信息和产

品特色，同时也代表了生机与活力。（如图1所示）

2

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

图1标准色

1.4字体规范

网页的字体大部分使用了“微软雅黑”和“黑体”，首页中产品的相关名称

使用了“千里江山小隶书”，各个页面的小标题处使用了“凯铭体”（如图2所

示）

图2标准字体

3

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

2网店页面原型图分析与设计方案

2.1首页

首页主要由店招、导航栏、banner、品类推荐、热销产品、精品推荐、品

牌故事和页尾这六个模块组成。店招主要有品牌名、品牌logo、品牌宣传语、

收藏店铺按钮、搜索框、用户登录、购物车和二维码。通过品牌名、品牌logo

和品牌宣传语体现出品牌的内涵、文化及品牌实力，搜索框、用户登录、购物

车和二维码方便了消费者的使用。导航栏中设置了“首页”、“企业介绍”、“所

有产品”、“爆款畅销”、“精品系列”、“联系我们”、“个人中心”、“会员中心”

八个小块，将产品和服务分类，可以很好的引导浏览者游历各个页面，消费者

通过点击相应的区域，页面会自动跳转，使操作更加便捷高效。

网站banner可以用来美化网站，增加页面的色彩和视觉效果，提升用户体

验。banner设计的美观大气，直接提升了网站的整体气质，直击消费者的眼球，

吸引消费者的购买。

“品类推荐”模块展示出了和路雪旗下的三款产品品类，分别是“可爱

多”、“梦龙”、“和路雪”。每个品类区域都放置了自己的logo及热门产品，消

费者可以很轻松的选择自己想要的品类。

“热销产品”模块展示出销售额最高的两个产品，用云朵的形状作为底图，

在底图中添加了高光和阴影的效果，在底图两侧添加了装饰画，使底图充满设

计感，丰富了视觉效果。两款产品z字型展示，使模块层次结构丰富。在产品

介绍下方添加了“立即购买”按钮，方便顾客下单购买。

“和路雪·品牌故事”模块设计了一个广告牌的样式，左边放置了和路雪

的产品及logo的图片，右边放置公司的简介，消费者能更好的了解和路雪的相

关信息。

页尾部分设置了四个标识“优”、“七”、“特”、“客”，展示出品牌的优势和

特点。底部添加了“进入官方微信”、“进入官方微博”按钮，使消费者可以快

速的进入相应的公众号和微博账号。（如图3所示）

4

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

图3首页原型图

5

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

2.2搜索结果页

搜索结果页主要由店招、导航栏、搜索框、分类表格、产品展示、页尾模

块组成，店招、导航栏和页尾与首页相同。分类表格分为分类、口味、规格，

消费者可以通过选择相应的标签浏览自己想要的产品，也可在搜索框中直接输

入关键词找到自己想要的产品。产品展示区域放置了六个产品板块，在每个板

块中放置一个产品图片和“立即购买”、“加入购物车”的按钮方便消费者操作。

（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页主要由店招、导航栏、面包屑导航、热销产品、详情自定义区

域、页尾模块组成，店招、导航栏和页尾与首页相同。导航栏的下方设置了一

个面包屑导航，便于用户了解当前页面所处的位置，以及当前页面在整个网站

中所处的位置；便于用户了解网站的层次结构，进而浏览网站，提高用户体验。

在页面的右上侧放置了三个热销产品推荐，起到宣传产品的作用。页面的左侧

放置了一个导航条，导航条包括产品分类、在线客服、售后服务，消费者可以

通过点击快速跳转到相应的页面，方便消费者的访问和查询。页面的最中间为

详情页的自定义区域。（如图5所示）

6

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

图5商品详情页原型图

2.4登录注册页

登录注册页主要由店招、导航栏、图片区域、登录账号区域、页尾模块组

成，店招、导航栏和页尾与首页相同。登录页的左侧是一个大的图片区域，放

置了和路雪的相关图片，以增加视觉体验；右侧是登录账号区域，放置了“请

输入用户名”、“请输入密码”、“请输入验证码”这三个表单控件，和“立即登

录”的提交按钮。设计简单大方，方便消费者登录的同时又不失良好的视觉体

验。（如图6所示）

7

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

图6登录注册页原型图

2.5购物车

购物车页主要由店招、导航栏、商品选择区域、结算区域、产品展示区、

页尾模块组成，店招、导航栏和页尾与首页相同。导航栏的下方是商品选择区

域，包含的信息有全选、商品、单价、数量、小计、操作，消费者可以清楚的

看到每个算选择的商品的基本信息，方便消费者的使用。结算区域设置的功能

有“全选”、“删除选中的商品”、“移动到收藏”、“去结算”，使消费者使用更加

方便便捷。产品展示区设置了热销产品、猜你喜欢、足迹，能很好的引导雄消

费者浏览商品，促成购买。（如图7所示）

图7购物车原型图

8

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

2.6订单结算页

订单结算页主要由店招、导航栏、收货地址、所选商品展示区域、提交订

单、页尾模块组成，店招、导航栏和页尾与首页相同。导航栏的下方是收货地

址，消费者可以在此页面直接选择收货地址，如果保存有多个收货地址可以进

行左右滑动选择，给消费者良好的购物体验。提交订单处可以查看是否使用了

优惠券、所选商品总金额、运费、应付总额等信息，方便消费者确认购买信息，

降低信息的错误性。（如图8所示）

图8订单结算页原型图

2.7个人中心

登录注册页主要由店招、导航栏、面包屑导航、用户基本信息、VIP卡、会

员专享福利、产品展示、页尾模块组成，店招、导航栏和页尾与首页相同。导

航栏的下方设置了一个面包屑导航，便于用户了解当前页面所处的位置，以及

当前页面在整个网站中所处的位置；便于用户了解网站的层次结构，进而浏览

网站，提高用户体验。消费者可以通过查看VIP卡片信息轻松的了解自己的VIP

等级、积分、金币和卡券等信息。会员专享福利放置了三个瓷片，使消费者能

跟企业进行一系列的互动，加强了注册用户的粘着度。产品展示区域放置了四

个展示台，每个展示台都设置了产品图、产品名称、产品单价和加入购物车的

9

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

按钮方便消费者的浏览，引导消费者进行加购，提升产品的销售量。（如图9所

示）

图9个人中心原型图

3网店页面视觉效果设计与制作

3.1首页视觉设计与制作

3.1.1设计思路

首页是网站的精华体现处，同时也是网站的品牌独特性的体现处，我们通

常会通过一个网站的首页来对网站进行评估和评价，因此首页的设计显得尤为

重要。首页的作用是一个网站内容的汇总和目录，在首页有许多图标和链接，

栏目也有很多，首页就像一个房屋的大门一样，用户可以通往各个板块，首页

在建设网站时必需的。首页的底图使用粉色，使整个页面充满生机与活力，搭

配粉色的云朵和白色的星星的元素，给人一种香甜松软、生机盎然的感觉。“产

10

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

品推荐”模块设置了三个小瓷块，每个瓷块做了双层的效果，增加了瓷块的层

次性和趣味性，符合目标消费客户的审美。“热销产品”模块依然使用了云朵的

元素，与背景相互衬托。这两个瓷块也做了双层的效果还添加了阴影和高光，

在云朵展示台的周围放置了冰淇淋元素的装饰品，增加了页面的丰富度。“精品

推荐”模块设置了一个相框样式，以白色为打底色，能更好的突显出产品的颜

色，“立即抢购”按钮字体使用了大红色，起到了强调的作用，方便消费者加购。

“和路雪·品牌故事”模块做了广告牌样式的展台，淡黄色和淡粉色搭配，丰

富了视觉效果。

导航栏下方是banner区域，banner设计尤为重要，当用户进入平台或店铺，

第一眼看到的就是banner，banner的设计应该突出企业特色，让用户一眼就能

感受到企业的魅力特点。品牌节日活动banner能够很好的展示店铺的活动，可

以使消费者了解活动的主要内容和相关的活动。我将粉色作为主色，绿色为点

缀色，粉色和绿色形成强烈的视觉冲突，能够很好的吸引消费者的注意。在活

动banner的左上角放置了和路雪的logo，右方设计了三只手拿着和路雪冰淇淋

的样子，旁边用五彩斑斓的彩带做装饰，突显出双11狂欢的喜悦心情，符合和

路雪的“分享快乐，分享和路雪”的口号。左边设置了活动语和广告语，绿色

和黄色搭配，丰富页面设计。（如图10所示）

图10品牌节日活动banner

产品banner主要介绍的是可爱多的一款热门冰淇淋，根据这款冰淇淋的口

味和特点做出了相呼应的设计。底图使用了牛奶的效果，增加了视觉效果的的

同时突出了产品丝滑香甜的特点。Banner左上方依旧放置了和路雪的logo，右

侧放置了和路雪热门产品的产品图，用牛奶作为产品图的背景，与底图相呼应。

“和路雪乐全家，分享爱分享快乐”的宣传语字体为凯铭体，颜色用了黄色作

为点缀色，同时添加了立体效果，丰富字体的同时吸引了消费者的注意。左下

方添加了草莓和华夫饼的装饰，将产品的原料展示出来，突出产品优势和特点，

增加消费者的购买欲。（如图11所示）

11

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

图11品牌爆品促销banner

3.1.2设计效果

12

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

图12首页效果图

13

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

3.2搜索结果页视觉设计与制作

3.2.1设计思路

搜索结果页设置了搜索框、所有分类、搜索关键词、产品展示、立即购买

和加入购物车的按钮。所有分类里面将和路雪旗下的五个品牌列出来，消费者

可以轻松的找到自己想要的产品。产品展示区域一排放置了三个小块，当产品

没有选中时，显示产品图、产品名称和产品单价，方便消费者看到产品的基本

信息：当产品选中时，出现“立即购买”、“加入购物车”的按钮，当按钮被选

中时按钮颜色会产生黄色的点击效果，增加了视觉设计的趣味性。（如图13所

示）

3.2.2设计效果

图13搜索结果页效果图

3.3商品详情页视觉设计与制作

3.3.1商品详情页设计思路

商品详情页是整个店铺成交的关键页面。所以在分析和路雪品牌过程中，

14

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

我根据产品种类和特性，选了三种不同的产品进行详情页设计。产品详情页设

计我共分了六个部分，店招导航、产品主图及购买信息、左侧导航栏、中间产

品详情内容、右侧热销产品推荐。这里背景色选择淡粉色，淡粉色表现出清新

活力，衬托出产品的香甜可口的特点。左侧导航栏使用了玫瑰花的形状，增加

页面的设计性，玫瑰花与冰淇淋的造型相同，突出了冰淇淋的特点和卖点，导

航栏展示出了各个品牌和在线客服，使消费者能快速的选择自己想要查看的产

品的详情页，点击在线客服可以快速的与品牌沟通，及时的解决消费者的疑问。

右侧热销产品推荐展示了三个热销产品，由产品图、产品名称和产品单价组成，

能够引导消费者浏览商品和进行加购，增加产品的销售量。中间的产品详情内

容由商品主图、联名图、产品原料、食用环境推荐、运输特点和产品信息构成

消费者可以清楚的查看到产品的相关详情信息，同时突出产品的特点和卖点，

能够吸引消费者购买。（如图14所示）

3.3.2商品详情页设计效果

15

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

16

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

图14产品名称详情页效果图

3.4登录注册页视觉设计与制作

3.4.1设计思路

登陆注册页面的背景依然用了粉红色，同时添加了网格的效果，丰富了视

觉设计。整体的布局是左图右文字的排版方式，左侧的图片展示区域放置了冰

淇淋卡通小人，生动形象的表现了冰淇淋，图片的颜色依旧运用了粉色系列的，

避免了颜色太多太过复杂的现象，做到整个页面的颜色的和谐统一。右边用户

登录区域，做了三个输入框，输入框以白色为打底，粉色为边框，并设计了相

应的图标进行提示，下方做了记住密码的选择框，以方便用户下次登录能快速

登录，立即登录的按钮做了粉色打底，深粉色做为字体颜色展示，维护页面色

彩统一的同时引起用户的注意。（如图15所示）

3.4.2设计效果

17

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

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页面的背景图为符合整个网站的色调依旧以粉色为背景色。收货人

信息部分做了独立的小框框，字体设置为常用的微软雅黑，字体颜色用较深的

老红色，当框框被选中时框框的边框颜色变为与字体颜色一致的老红色，并在

右下角出现一个小勾，显示选中效果。商品信息展示部分做了表格样式，在最

后一列设置了“删除”和“移动到收藏”选项，能够方便消费者进行查看和操

作。在表格的下方设置了全选框和“去结算”的按钮，结算按钮使用了红色为

底色，白色为字体颜色的搭配，起到突出的作用。在页尾的上方是一个产品展

示区，里面包含热销产品、猜你喜欢、足迹。当未悬停时，字体颜色为老红色，

当鼠标悬停在相应的字体上时，字体颜色变成醒目的正红色并在字体下方出现

下划线。产品展示包括产品主图、产品名称、产品价格和加入购物车的按钮，

产品主图外设有边框，产品价格字体颜色为红色，加入购物车的按钮为红色，

红色起到点缀的作用的同时，又能够引起消费者的注意。（如图16所示）

3.5.2设计效果

18

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

图16购物车效果图

3.6订单结算页视觉设计与制作

3.6.1设计思路

在订单页中我设置了收件人信息、商品信息、发票信息、确认信息、结算。

在收信人信息中设置了一个可以左右拉动的横向列表，消费者可以轻松的选择

正确的收货信息。商品信息中设置了一个表格列表，所选商品的信息一目了然。

在发票信息中用户可以选择使用电子发票还是纸质发票。信息确认区显示了收

货地址、收货人、收货人电话号码、应付总金额，以方便消费者再次确认订单

信息。应付金额中的金额数使用了红色为字体颜色，这样消费者可以一眼就看

到自己应付的金额数。提交订单按钮放置在信息确认的正下发，方便消费者在

确认完订单信息后直接点击付款。（如图17所示）

19

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

3.6.2设计效果

图17订单结算页效果图

3.7个人中心视觉设计与制作

3.7.1设计思路

个人中心页面的底图设置与其他页面有点不同，做了一个波浪形遮罩的效

果，波浪形遮罩使用了粉色，遮罩下方使用了纯白色，在底图上放置了大小不

一的五角星做装饰，使视觉设计层次丰富。在页面的左侧设置了一个导航条，

里面包含“我的订单”、“信息中心”、“我的收藏”。右侧是一张VIP卡，里面有

用户的VIP等级、卡券等信息。下方的会员权益做了可以左右拉动的小瓷块，

消费者可以通过点击瓷块进入相应的板块获取优惠。页尾上方的热销推荐模块

很好的引导了消费者浏览网站的其他商品，引导消费者加购，以获取最大的销

量。（如图18所示）

20

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

3.7.2设计效果

图18个人中心效果图

4总结

此次毕业设计的任务我已完成。任务主要包括首页、一张节日