味多美品牌网店视觉设计方案

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

目录

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

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

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

1.3色彩设计......................................................................................................1

1.4字体规范......................................................................................................2

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

2.1首页..............................................................................................................2

2.2搜索结果页..................................................................................................4

2.3商品详情页..................................................................................................5

2.4登录注册页..................................................................................................6

2.5购物车..........................................................................................................7

2.6订单结算页..................................................................................................8

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

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

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

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

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

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

3.2.1设计思路.............................................................................................12

3.2.2设计效果.............................................................................................13

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

3.3.1产品名称设计思路.............................................................................14

3.3.2产品名称设计效果.............................................................................14

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

3.4.1设计思路.............................................................................................16

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

I

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

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

3.5.1设计效果.............................................................................................18

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

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

3.6.2设计效果.............................................................................................19

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

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

3.7.2设计效果.............................................................................................20

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

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

II

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

味多美品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着电商环境的蓬勃发展，竞争也越来越激烈，与此同时品牌实力的彰显

变得尤为重要。例如知名品牌holiland好利来，好利来拥有自己的独立网店，

网店整体风格活泼清新，商品种类新颖丰富，成为当今年轻人的首选之一。以

及知名品牌芝洛洛，同样拥有自己的独立网店，网店整体风格是可爱欢乐为主

调，芝洛洛推出的新品盒子蛋糕，深受广大消费者的青睐。味多美作为国内著

名的烘焙连锁食品品牌，味多美坚持以优质的服务、健康美味的产品，致力于

为消费者提供高品质的生活享受，其独立品牌网店拥有购买功能。

1.2项目需求分析独立

味多美虽然已经拥有了自己的网店，但是随着时间的推移，时代在进步，

行业竞争在加剧，因此味多美必须要突破传统观念，实现品牌创新，来迎合消

费者的喜好以及需求。

味多美需要在保持核心理念的前提下，转变店铺以及首页页面的整体风格，

并加入部分蛋糕元素的动态按钮来吸引消费者眼球，提升消费者对味多美的品

牌记忆点。味多美亦可设计专属品牌IP的形象，专属品牌IP形象能够更鲜明

的将味多美品牌呈现给消费者，消费者更容易接受。

味多美同类型同风格的产品可以精简一些，味多美还可以和其他IP形象联

名合作产品，提高品牌知名度。在产品的呈现上，利用不同角度的展示让消费

者全方位了解产品，产品的背景多添加一些创意，还可以在页面上增加指引消

费者的按钮，让消费者的购物体验更加便捷，从而提高销量。

1

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

1.3色彩设计

主色调使用的是淡黄色。黄色是所有色彩中最明亮并且富有光辉的颜色，

淡黄色象征着活力与欢乐，与带有平静、洁净的橙色相搭配，可呈现出最明

亮、最柔雨的色彩，在淡黄色的图像画面中正是因为添加了橙色的调而给人

清爽、柔和的感觉，更容易吸引消费者的视线。（如图1所示）

图1标准色

1.4字体规范

微软雅黑这款字体无论是放大还是缩小，形体整体看起来都非常的规整舒

服。所以在页面设计过程中多次使用了微软雅黑这款字体，大标题使用加粗字

体，正文使用常规字体。笔画清晰简洁，这个系类的字体可以基本满足排版设

计的需要。（如图2所示）

图2标准字体

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

2.1首页

店招、导航栏、banner、关于味多美、掌柜推荐、新品尝鲜、尾部导航等

八大功能模块，构成了首页的核心元素。在店招模块中，消费者可以轻松的找

到会员入口，其中包括会员登录、注册和关注店铺等功能。在右侧设置了一个

2

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

可供消费者自主搜索所需产品的区域。在导航栏里提供了各种功能图标及相关

链接。在导航栏中，消费者能找到首页、所有商品、关于我们、会员中心、新

品尝鲜、加入我们、积分换礼等功能，这些功能能够满足消费者购物过程中的

各种需求。Banner模块为消费者提供了一种快捷的方式，让消费者迅速了解到

味多美的产品。另外还增加了关于味多美模块，是为了提升消费者对味多美的

认知度和品牌形象。掌柜推荐模块是为初次领略味多美的消费者提供了宝贵的

建议，为店铺推出畅销产品提供了有力的支持。新品尝鲜模块的设置是为了推

广新品，也是为了满足消费者的喜好，其中关于产品的部分，都设有立即购买

的按钮，使得消费者对感兴趣的产品能够流畅的进入下一个购物环节，从而有

效提升了他们的购物体验。在尾部导航模块中，提供了大量维护消费者权益的

信息，这些信息能够让消费者更加信任味多美。此外，该模块还设置了一个返

回顶部的按钮，当消费者浏览到首页底部后可以快速返回首页顶部。（如图3

所示）

3

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

图3首页原型图

2.2搜索结果页

搜索结果页是由店招、导航栏、搜索结果、产品展示、尾部导航五大模块

组成。在店招模块中，消费者可以轻松的找到会员入口，其中包括会员登录、

注册和关注店铺等功能。在右侧设置了一个可供消费者自主搜索所需产品的区

域。在导航栏里提供了各种功能图标及相关链接。在导航栏中，消费者能找到

首页、所有商品、关于我们、会员中心、新品尝鲜、加入我们、积分换礼等功

能，这些功能能够满足消费者购物过程中的各种需求。搜索结果模块是为了消

费者能够一览无余的查看搜索结果，消费者还可以自主选择想要的口味、价格

等，为消费者提供了便利。产品展示模块当中，设置了消费者选中时和未选中

时两种状态，当消费者点击到感兴趣的产品时，出现的查看详情按钮可以直接

进入产品详情页，起到指引消费者的作用，未选中时消费者也能够了解到产品

的属性。尾部导航模块设有很多维护消费者权益的相关资讯，让消费者对味多

美更有信任感。（如图4所示）

图4搜索结果页原型图

4

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

2.3商品详情页

商品详情页中有店招、导航栏、购买产品、宝贝分类、销量前三、焦点图、

公主的魅力、公主的姿态、公主的养成、买家须知等十大模块。在店招模块中，

消费者可以轻松的找到会员入口，其中包括会员登录、注册和关注店铺等功能。

在右侧设置了一个可供消费者自主搜索所需产品的区域。在导航栏里提供了各

种功能图标及相关链接。在导航栏中，消费者能找到首页、所有商品、关于我

们、会员中心、新品尝鲜、加入我们、积分换礼等功能，这些功能能够满足消

费者购物过程中的各种需求。其中宝贝分类模块对店铺所有的产品进行分类，

方便消费者能够搜索到自己喜爱的产品。销量前三模块的设置，向消费者推荐

店铺的标志性产品，能够引起消费者的购买欲望，从而实现购买。焦点图能够

从视觉上吸引买家的目光，感兴趣的消费者会继续了解产品。公主的魅力模块

是关于产品的细节介绍，是为了让消费者更加清晰的了解产品的细节以及品质，

能够加强产品的立体感与质感。公主的姿态模块是关于产品的具体介绍，消费

者能从中了解到产品的名称、尺寸等基本信息。公主的养成模块是关于产品原

材料、生产地的介绍，让消费者更加了解产品的生产环境，让消费者更加放心

安心。买家须知模块中，向消费者告知了关于产品的配送、预定、存储等问题，

为消费者的售前售后保驾护航。尾部导航模块设有很多维护消费者权益的相关

资讯，让消费者对味多美更有信任感。（如图5所示）

5

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

图5商品详情页原型图

2.4登录注册页

登录注册页中有店招、导航栏、登录注册、尾部导航四大模块。在店招模

块中，消费者可以轻松的找到会员入口，其中包括会员登录、注册和关注店铺

等功能。在右侧设置了一个可供消费者自主搜索所需产品的区域。在导航栏里

提供了各种功能图标及相关链接。在导航栏中，消费者能找到首页、所有商品、

关于我们、会员中心、新品尝鲜、加入我们、积分换礼等功能，这些功能能够

满足消费者购物过程中的各种需求。登录注册模块中，设置了会员登录注册时

必要的功能按钮，保证消费者在会员登录注册时的顺利进行。尾部导航模块设

有很多维护消费者权益的相关资讯，让消费者对味多美更有信任感。（如图6

6

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

所示）

图6登录注册页原型图

2.5购物车

购物车页中有店招、导航栏、购物车、掌柜推荐、尾部导航五大模块。在

店招模块中，消费者可以轻松的找到会员入口，其中包括会员登录、注册和关

注店铺等功能。在右侧设置了一个可供消费者自主搜索所需产品的区域。在导

航栏里提供了各种功能图标及相关链接。在导航栏中，消费者能找到首页、所

有商品、关于我们、会员中心、新品尝鲜、加入我们、积分换礼等功能，这些

功能能够满足消费者购物过程中的各种需求。购物车模块的设置能够帮助消费

者暂存商品，为消费者购物提供了便捷。掌柜推荐是为了吸引消费者的目光，

达到推广产品、提高访问量和曝光度的目的。尾部导航模块设有很多维护消费

者权益的相关资讯，让消费者对味多美更有信任感。（如图7所示）

7

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

图7购物车原型图

2.6订单结算页

订单结算页中有店招、导航栏、核对订单、尾部导航四个模块。在店招模

块中，消费者可以轻松的找到会员入口，其中包括会员登录、注册和关注店铺

等功能。在右侧设置了一个可供消费者自主搜索所需产品的区域。在导航栏里

提供了各种功能图标及相关链接。在导航栏中，消费者能找到首页、所有商品、

关于我们、会员中心、新品尝鲜、加入我们、积分换礼等功能，这些功能能够

满足消费者购物过程中的各种需求。核对订单模块的设置是为了提醒消费者再

次确认订单信息，以免出现差错，耽误消费者的时间，影响味多美品牌的口碑。

尾部导航模块设有很多维护消费者权益的相关资讯，消费者会对味多美更有信

任感。（如图8所示）

8

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

图8订单结算页原型图

2.7个人中心

个人中心页中有店招、导航栏、个人中心、会员卡、特权服务、签到中心、

尾部导航七个模块。在店招模块中，消费者可以轻松的找到会员入口，其中包

括会员登录、注册和关注店铺等功能。在右侧设置了一个可供消费者自主搜索

所需产品的区域。在导航栏里提供了各种功能图标及相关链接。在导航栏中，

消费者能找到首页、所有商品、关于我们、会员中心、新品尝鲜、加入我们、

积分换礼等功能，这些功能能够满足消费者购物过程中的各种需求。个人中心

模块消费者可以查看自己的积分、券包等信息。特权服务模块是为了把会员与

普通消费者区别开来，以此来吸引消费者办理会员。签到中心模块是通过签到

给消费者发放优惠券和小礼品，引导消费者来店铺浏览，增加店铺的用户黏度

和用户活跃度。尾部导航模块设有很多维护消费者权益的相关资讯，增加消费

者对味多美的信任感。（如图9所示）

9

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

在店招的左侧加上了品牌LOGO，LOGO采用了红色，增加消费者对品牌的辨

识度。紧接着是品牌名的全称，还添加了关注、登录、注册三个按钮，在右侧

还设计了矩形搜索栏和购物车图标。导航栏部分设计了首页、所有商品、关于

我们、会员中心、新品尝鲜、加入我们、积分换礼七个模块，消费者正在浏览

的首页模块运用了醒目的红色。节日活动Banner设计的主题是六一儿童节，所

以选择了深受小朋友喜爱的凯蒂猫联名款蛋糕，整体采用了产品同色系的红色

作为主色调，还添加了小礼花和星星的装饰，让整体更具有节日氛围。此外，

还推出了限时折扣，以激发消费者的购买欲望，从而促进消费。（如图10所示）

图10品牌节日活动banner

10

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

爆品促销Banner中选择的是销量最好的海绵宝宝蛋糕，为了增加趣味性，

采用了与产品颜色相呼应的黄色描边来设计字体。背景还添加了海绵宝宝元素

的泡泡以及海绵宝宝卡通形象，吸引消费者注意力的同时也让页面内容更加丰

富多彩。价格和产品规格的颜色运用了引人注目的红色。（如图11所示）

图11品牌爆品促销banner

在关于味多美模块的字体设计中，采用了全拼和“关于味多美”的叠放，

形成了一个阴影的效果，两侧还精心设计了用于蛋糕制作的食材樱桃，而味多

美介绍的边框则采用了奶油元素，此外，还展示了六张制作细节，让消费者能

够更加深入的了解品牌故事以及产品制作的细节。掌柜推荐采用全拼形成阴影

的效果，同时两侧精心设计了草莓这一食材。在掌柜推荐模块中，精选了三款

销量最佳的产品，采用圆角矩形工具和剪切蒙版，以更好地向消费者展示产品，

每个产品都标注了价格、立即购买和品名，品名和立即购买设有超链接，可以

提高消费者的购物体验。在新品尝新字体的设计中，融入了阴影效果，同时在

两侧添加了蓝莓等食材，这些元素能够激发消费者的购买欲望，橙黄色的色彩

不仅能提高消费者食欲，而且选择了颜值高、性价比高的产品，采用左右对称

的版式，使得消费者浏览的时候不会感到视觉疲劳。价格和立即购买设有超链

接提高消费者的购物体验。在尾部导航模块中，提供了大量关于维护消费者权

益的信息，并设置了超链接，以确保有需求的消费者能够及时得到解决方案，

同时提高了消费者的粘性。采用的明亮的淡黄色作为背景，使得整个页面呈现

出一种充满活力和清新气息的效果。（如图12所示）

11

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

3.1.2设计效果

图12首页效果图

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

3.2.1设计思路

在店招的左侧添加了品牌LOGO，LOGO采用了红色，增加消费者对品牌的辨

12

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

识度。紧接着是品牌名的全称，还添加了关注、登录、注册三个按钮，在右侧

还设计了矩形搜索栏和购物车图标。导航栏部分设计了首页、所有商品、关于

我们、会员中心、新品尝鲜、加入我们、积分换礼七个模块，消费者正在浏览

的首页模块运用了引人注目的红色。搜索结果部分为消费者筛选了口味、价格

不同的商品，为消费者挑选到自己想要的商品提供了便利，商品展示区分了选

中和未选中状态，采用了矩形工具和边框来展示商品，还添加了商品有多少人

喜欢过，通过这种形式来提高消费者的购买欲。在尾部导航模块中，提供了大

量关于维护消费者权益的信息，并设置了超链接，以确保有需求的消费者能够

及时得到解决方案，同时提高了消费者的粘性。背景添加了平铺的蛋糕、牛奶

素材，页面整体效果更加活泼清新。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

13

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

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

3.3.1产品名称设计思路

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

我根据产品种类和特性，选了最具代表性的产品进行详情页设计。产品详情页

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

产品详情内容、右侧销量前三产品推荐。背景色选择淡红色，淡红色是一种温

暖的颜色，也是能够刺激消费者食欲的颜色。整体结构设计都是比较统一，除

产品主图和购买信息与中间产品详情内容设计不同。产品主图的右侧有关于产

品的详细介绍以及加入购物车等功能。左侧导航栏宝贝分类设有法式月饼、新

品上市、生日蛋糕、西点/下午茶、馈赠对象、门店提货卡、门店到店券、月饼，

消费者可以根据自己的喜好需求进行选择。右侧导航栏向消费者推荐了销量前

三的商品，并且都设有超链接。产品详情页部分对产品的制作材料进行了详细

的图文解释。商品的尺寸、口味、包装形式、保存状态等都进行了详细的介绍，

还有商品四种不同规格的展示。以及产品制作的工序和原材料都向消费者公开

透明的图标图片展示，品牌故事的介绍采用了图文结合的方式。买家须知部分

增加图标，由于蛋糕特殊的保存条件，所以要求消费者知悉商品的配送要求。

在尾部导航模块中，提供了大量关于维护消费者权益的信息，并设置了超链接，

以确保有需求的消费者能够及时得到解决方案，同时提高了消费者的粘性。（如

图14所示）

3.3.2产品名称设计效果

14

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

15

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

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

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

3.4.1设计思路

店招的左侧添加了品牌LOGO，LOGO采用了红色，增加了消费者对品牌的辨

识度。接下来呈现的是完整的品牌名称，此外还增加了关注、登录、注册三个

按钮，在右侧还设计了一个矩形搜索栏和购物车图标。导航栏部分设计了首页、

16

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

所有商品、关于我们、会员中心、新品尝鲜、加入我们、积分换礼七个模块，

而消费者正在浏览的首页模块则运用了醒目的红色。采用平铺黄色格子的背景

样式，为整体画面注入了生动可爱的元素，同时融入了蛋糕主题的卡通形象，

使得消费者在的登录注册的过程中不会感到枯燥乏味，字体颜色采用与整体风

格相符的淡黄色，消费者登录注册需要用到的功能具备齐全，清晰明了。还设

置了通俗易懂的图标提示和文字提示，为消费者提供了全方位的体验感保障，

在尾部导航模块中，提供了大量关于维护消费者权益的信息，并设置了超链接，

以确保有需求的消费者能够及时得到解决方案，同时提高了消费者的粘性。（如

图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

店招的左侧添加了品牌LOGO，LOGO采用了红色，增加消费者对品牌的辨识

度。接着是完整的品牌名称，还增加了关注、登录、注册三个按钮，右侧还设

计了矩形搜索栏和购物车图标。导航栏部分设计了首页、所有商品、关于我们、

会员中心、新品尝鲜、加入我们、积分换礼七个模块，消费者正在浏览的首页

模块则运用了引人注目的红色。背景设计了平铺样式的蛋糕装饰元素，在购物

17

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

车部分消费者可以进行增减商品数量、从购物车移除商品等操作，方便消费者

统一结算商品，参与活动优惠也能清晰的了解到。掌柜推荐部分能为纠结的消

费者提供参考建议，也为想凑单参与店铺活动的消费者提供了便捷。在尾部导

航模块中，提供了大量关于维护消费者权益的信息，并设置了超链接，以确保

有需求的消费者能够及时得到解决方案，同时提高了消费者的粘性。（如图16

所示）

3.5.1设计效果

图16购物车效果图

18

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

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

3.6.1设计思路

店招的左侧加入品牌LOGO，LOGO采用了红色，增加消费者对品牌的辨识度。

随即是品牌名的全称，并增加了关注、登录、注册三个按钮，右侧还设计了矩

形搜索栏和购物车图标。导航栏部分设计了首页、所有商品、关于我们、会员

中心、新品尝鲜、加入我们、积分换礼七个模块，消费者正在浏览的首页模块

运用了显眼的红色。订单结算中有收货人信息、支付方式、配送方式、商品清

单四个部分，收货人信息部分可以进行修改、删除和增加收货人信息等操作，

支付方式有多种方式可供消费者选择，商品清单部分消费者需要确认要购买的

商品金额、商品数量等，还可以向商家备注对商品的喜好要求等，一系列的功

能都是为消费者的购物过程保驾护航。在尾部导航模块中，提供了大量关于维

护消费者权益的信息，并设置了超链接，以确保有需求的消费者能够及时得到

解决方案，同时提高了消费者的粘性。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

19

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

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

3.7.1设计思路

店招的左侧添加了品牌LOGO，LOGO采用了红色，增加消费者对品牌的辨识

度。紧接着是品牌名的全称，还添加了关注、登录、注册三个按钮，在右侧还

设计了矩形搜索栏和购物车图标。导航栏部分设计了首页、所有商品、关于我

们、会员中心、新品尝鲜、加入我们、积分换礼七个模块，消费者正在浏览的

首页模块运用了醒目的红色。个人中心页面中有左侧导航栏、会员卡、特权服

务、签到中心四个部分，左侧导航栏设有我的资料、我的订单、我的会员、我

的积分、我的券包、我的购物金、会员福利日，消费者可以根据自己的需求选

择。会员卡消费者可以了解到会员等级、会员规则等信息，还可以领取会员专

属优惠券。三大特权服务以及加入会员无门槛能够吸引消费者加入品牌会员。

签到中心部分的设置，通过签到获取优惠券和小礼品来增加店铺流量和点击率，

还能增加消费者对品牌的信赖。在尾部导航模块中，提供了大量关于维护消费

者权益的信息，并设置了超链接，以确保有需求的消费者能够及时得到解决方

案，同时提高了消费者的粘性。（如图18所示）

3.7.2设计效果

20

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

图18个人中心效果图

4总结

随着毕业时间的