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

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

目录

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

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

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

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

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

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

2.1首页..............................................................................................................3

2.2搜索结果页..................................................................................................5

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

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

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

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

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

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

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

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

3.1.2设计效果.............................................................................................13

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

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

3.2.2设计效果.............................................................................................15

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

3.3.1详情页所做产品设计思路.................................................................16

3.3.2详情页所做产品设计效果.................................................................17

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

3.4.1设计思路.............................................................................................19

3.4.2设计效果.............................................................................................20

I

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

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

3.5.1设计思路.............................................................................................20

3.5.2设计效果.............................................................................................21

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

3.6.1设计思路.............................................................................................21

3.6.2设计效果.............................................................................................22

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

3.7.1设计思路.............................................................................................22

3.7.2设计效果.............................................................................................23

4总结..........................................................................................................................24

参考资料............................................................25

II

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

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

1网店视觉设计需求分析

1.1项目背景

随着社会经济的迅猛发展，人们的生活质量也在不断提高，人们的消费习

惯也有了很大的改变，越来越多的人们都接受并且适应网络购物。随着电商的

发展，网上的各品牌之间的竞争也愈发激烈。近些年，许多知名企业也相继创

立属于自己独立品牌形象的网店，例如：创立于2012年，主打做坚果和休闲零

食的三只松鼠电商品牌、创立于1999年，综合型家纺类多喜爱企业等等，创立

自己品牌独立运营的形象店，打造精美、独特的网店视觉设计，通过网络挖掘

市场。

北京味多美食品有限公司成立于1996年，是国内著名的蛋糕烘焙连锁食品

企业。从成立至今，在国内已经创办了300多家直营连锁门店，以丰富、高品

质的产品，平民化的价格，亲切友善的服务赢得众多消费者的青睐。为了更好

地树立品牌独有的形象，需要打造品牌独立运营的网店，以更好的诠释品牌理

念和品牌形象。

1.2项目需求分析

“味多美”蛋糕网店通过互联网平台为消费者送达高品质、优惠的服务,随

着电商行业的发展，品牌网店形象与同类蛋糕网店的竞争对比下，显得有些落

后，所以对品牌网店形象进行重新视觉设计。

品牌企业内涵以丰富、高品质的产品，平民化的价格，亲切友善的服务赢

得众多消费者的青睐，品牌企业主打蛋糕烘焙类食品，让消费者不再只是为了

填饱肚子，还可以为消费者带来美好、浪漫、愉快的享受，更能够让消费者找

到一种归属感和温馨感以及对美味的感动。

1.2.1色彩设计

主体色：网店主体色彩采用粉色，粉色是浪漫美好的象征色，同时也代表

温柔、甜美、梦幻、轻松和安抚。味多美是蛋糕烘焙类品牌，蛋糕可以给人一

种甜蜜美好、轻松愉快的幸福感，与粉色代表寓意相符合，让消费者在进入网

1

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

店挑选产品时，都带着这份美好的心情挑选产品。也可以治愈那些生活中遇到

不开心的事情时，想给自己买一个甜品，进入网店逛逛时，看见这份美好的颜

色，安抚消费者的心灵，暂时忘记那些不开心的事情，给消费者带来重新点燃

美好生活的希望。

辅助色：辅助色采用跟主体色相呼应的淡粉色，配合着主体的深粉色，使

网店风格更加和谐、精致，更好地呈现出网店整体风格想表达出的设计效果。

（如图1所示）

图1标准色

1.3字体规范

店铺字体采用了四种标准中文字体，使店铺网页整体完整和谐。（如图2

所示）

2

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

图2标准字体

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

2.1首页

首页由四个模块组成。第一部分店招的设计，设有店铺标识、收藏按钮、

广告语、搜索栏、定位、购物车、手机逛、导航条，同时导航条设置了首页、

所有产品、人气爆品、同城配送、关于我们、联系我们、会员中心、登录/注册

超链接，方便消费者在逛网店时，通过这些超链接和按钮可以迅速了解到店铺

信息和自己所需要的产品，也可以在不知道买什么产品时根据人气爆品等店铺

推荐购买到自己所需要的产品。设置收藏店铺按钮，方便消费者在回购产品时

找不到店铺，可以通过收藏按钮再次找到店铺购买产品。定位功能方便店铺获

取客户地理位置，将客户定制的蛋糕安全准时的配送到消费者手中，也方便消

费者知道最近店铺的位置，预留好蛋糕制作和配送的时间。

第二部分banner区，在此模块，放至五幅滚动的banner，店铺可在此区域

放置热销产品和店铺活动海报，让客户在进入店铺后第一时间就知道这些信息。

第三部分展示区，最上面设有四个精美的优惠券，留住消费者，激发客户

的购买欲，同时还特别设置了一个25元的新会员入会专享优惠券，留住一波忠

3

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

实客户。设置“TOP爆款”板块，在此板块放置三款店铺热销产品，打造店铺经

典款。设有“零食场景优选”板块，此板块设置了一个瓷片区，设置五块瓷片，

通过瓷片错落的凌乱的设计感，展示店铺除开蛋糕外的其他烘焙类产品。设置

“品牌介绍”板块，通过八个长方形，图片和文字上下交错展示出味多美食品

有些公司的发展历程和所取得的重要成就，让客户更加亲耐和信任味多美。在

最后设置三个味多美品牌的专业品质按钮，客户通过这三个按钮，可以了解味

多美这些专业品质，放心的都买味多美的产品。最底部设有返回按钮，方便用

户返回到前面的板块。

第四部分页尾区，设置关于、条块、帮助、联系、关注四组超链接，用户

可通过下面的子链接找到自己需要的服务和想要了解得店铺信息，同时关注设

有官方微博二维码，用户可通过扫描下方二维码关注店铺动态会员活动等等（如

图3所示）

图3首页原型图

4

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

2.2搜索结果页

搜索结果页设置了三种客户搜索产品时会常用的几种分类：“系列”、“口

味”、“价格”，客户也可以根据自己习惯的搜索方式搜索到自己需要的产品。

搜索出的结果会按六种结果进行排序，默认排序方式为“综合排序”，客户也

可以选择其他排序方式对搜索出来的产品进行排序。每个搜索结果都会由产品

图、产品名称、价格和总销量组成。每页展示六个产品信息。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情图展示商品的详细信息。商品详情图展示了商品的精美图片，从

商品的原材料到商品的口味再到商品的服务都有很详细的展示。客户可以从上

往下尽情的浏览商品详细信息，让客户买的放心，吃的放心。客户满意可在此

5

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

页面选择自己适合或喜欢的口味、尺寸和数量进行下单购买，也可加入购物车。

商品详情图还设置了宝贝排行榜，展示了店铺卖的最好的十款商品，让客户在

浏览商品详情的同时，对展示的感兴趣的商品也点击进去购买。（如图5所示）

图5商品详情页原型图

6

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

2.4登录注册页

登录页面设计了两种登录方式，分别是密码登录和短信登录，客户可以选

择其中一种更方便自己登录的方式登录，或当客户忘记登录密码时也可以选择

短信登录的方式登录，更用户提供便利的登录方式。在登录页左侧设置了一个

展示区，可以放置店铺插画或者放置店铺活动图，让客户在登录或注册时也可

以浏览到店铺的一些活动和商品信息。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车页面列出客户加入购物车的商品，包括客户选择该商品的口味、规

格、数量、价格等等，还设置了收藏和删除按钮，客户对喜欢的商品可以收藏，

方便客户下次购买时找不到商品。当客户选择所购买商品后，点击下边或者上

边的结算按钮进行结算。在此页面还设计了三个可以滚动的模块，分别是“猜

你喜欢”、“随手购”、“我的关注”，让客户在看购物车页面时，顺便看到

下面的板块，看到感兴趣的加入购物车购买，或者看看“我的关注”模块，对

关注的商品想再次购买。（如图7所示）

7

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

图7购物车原型图

2.6订单结算页

订单结算页面是最后客户下单商品的结算页面。在此页面，客户选择收货

地址后，在确认订单信息模块中，列出客户所选商品的详细信息、商品的运送

方式、是否赠送运费险、客户享有何种优惠活动，客户也可以选择是否开具发

票，还可以在给卖家留言框中输入一些注意事项，好为客户提供特殊的服务。

最后客户确认完这些信息，点击最后的提交订单即可下单商品。（如图8所示）

8

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

图8订单结算页原型图

2.7个人中心

个人中心页面由三个模块组成。第一个模块为会员卡，卡片上有客户的头

像、卡号、等级信息，还有会员积分、会员权益、购物金，这三项是客户成为

会员后才能享用的，可以兑换商品或者享有一些会员的特殊权益，也能留住更

多客户。第二个模块为本月会员权益，在此模块会显示会员上月、本月、下月

所享有的会员权益，每月都会发放一张会员专享优惠券。第三个模块为热销推

荐，设置四个展示区，展示热销的四种商品，促使客户可对感兴趣的商品进行

浏览和购买。（如图9所示）

9

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

品牌节日活动banner我选择的是38女神节为主题制作的节日活动banner。

10

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

整体采用淡粉色来映衬女神节的节日氛围，放一些丝带、花瓣、花朵更凸显使

主题更加灵动、浪漫的氛围。文字和商品采用左右的摆放方式，使得banner整

体协调完整。“38女神节”采用描边、外发光和投影的效果，突出主体字，最

下边用一个渐变的椭圆框柱本次活动所享的优惠，使得不失去美观的同时，客

户也能看见本次优惠活动的力度，促使顾客点击活动按钮进去购买商品。（如

图10所示）

图10品牌节日活动banner

品牌爆品促销banner我选用本品牌买的最火爆的草莓蛋糕作为品牌爆品

促销banner的主图。同样文字和商品采用左右的摆放方式，使得banner整体

协调完整。草帽蛋糕和下边的三颗草莓都添加了阴影的效果，使草莓蛋糕和所

用的原材料草莓更加新鲜立体。文字部分，用红色凸显主题，配合着黑色描述

草莓蛋糕的品质和同城当日送达的优势，让客户看见就想立马下单，所以最后

设置了一个“立即购买”的按钮，方便客户下单或者进店逛逛其他商品。背景

采用深粉色和草莓的部分剪影，使得banner整体更加协调美观。（如图11所

示）

图11品牌爆品促销banner

11

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

首页整体采用甜蜜浪漫粉色和线条拼条组成，既呼应蛋糕可以给人一种甜

蜜美好、轻松愉快的幸福感，也能更好将“TOP爆款”、“零食场景优选”、

“品牌介绍”三个模块区分开来。在“TOP爆款”上端设置了四个优惠券的摆放，

用小蛋糕进行点缀，吸引客户注意力，留住客户，激发客户的购买欲，同时还

特别设置了一个25元的新会员入会专享优惠券，留住一波忠实客户并成为会员。

“TOP爆款”设置三个展示展示区，可用来展示店铺最火爆或想推销的三种商品。

“零食场景优选”模块，此模块设置了一个瓷片区，由五块瓷片区组成，通过

瓷片错落的凌乱的设计感，展示店铺除开蛋糕外的其他烘焙类商品。“品牌介

绍”模块，通过八个长方形，图片和文字上下交错展示出味多美食品有些公司

的发展历程和所取得的重要成就，让客户更加亲耐和信任味多美。在最后设置

三个味多美品牌的专业品质按钮，客户通过这三个按钮，可以了解味多美这些

专业品质，放心的都买味多美的产品。最底部设有返回按钮，方便用户返回到

前面的板块。（如图12所示）

12

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

3.1.2设计效果

13

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

图12首页效果图

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

3.2.1设计思路

搜索结果页面根据商品的特点做了几种分类方式方便客户搜索到所需的商

品。在最顶部设计了搜索框，客户可在搜索框中输入关键词进行搜索商品，也

可按下边的分类方式进行搜索商品。同时还设置了几种排序方式，客户也可对

搜索结果进行排序。每页展示仅展示六个搜索商品结果，不造成客户的眼睛疲

14

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

劳，而且展示商品的图片、名称、价格、销量等信息，方便客户快速选择到所

需商品进行购买。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

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

商品详情页是客户对商品详情进行浏览，是决定店铺商品成交数量的关键

页面。所以根据商品的种类和特点，选择其中一款产品进行商品详情页的设计。

商品详情页由商品主图、商品购买信息、左侧宝贝排行榜、中间商品详情内容

组成。背景色选择淡粉色，粉色是浪漫美好的象征色，营造了一种甜蜜愉快的

氛围，同时也是一种温暖的颜色，可以刺激顾客的味觉的颜色。整体的设计完

15

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

整和谐。以下是介绍这款商品详情内容的设计思路和设计的内容。

3.3.1详情页所做产品设计思路

商品详情页分成上下二个部分。上边我设置了商品主图和商品购买信息，

下边设置了宝贝排行榜、宝贝详情、宝贝评价三个页面。首先上边部分：左侧

摆放的是商品主图，客户可直观看见商品样式；右侧有商品名称、月销数量、

价格基本信息，还有蛋糕尺寸、蛋糕口味、数量的选择，客户可选择需要的参

数后点击马上抢按钮进行购买，也可先加入购物车，最后逛完全部商品后付款

购买。下边部分：左侧摆放宝贝排行榜，按照销售量和收藏数进行排列，展示

八种靠前的商品。客户有时就会有种从众的心理，在自己没有明确购买想法的

时候，会根据大众的推荐和购买量进行购买，此时宝贝排行榜展示出的商品，

客户就会点击进去浏览详情进行购买。右侧为宝贝详情和宝贝评价，宝贝评价

是展示购买商品后，客户对商品的反馈，店铺可根据客户的反馈进行改良和保

持，也可以作为其他客户下单时看见反馈不错而下单购买商品；宝贝详情首先

展示草莓蛋糕的三个优点“精选食材”、“手工烘焙”、“天然奶油”作为草

莓蛋糕最主要的三大卖点，让客户看见这三个卖点就对草莓蛋糕产生强烈的好

感和购买欲，然后从草莓蛋糕的颜值高，展示草莓蛋糕的细节图，看出草莓蛋

糕的内部和用料，到草莓蛋糕的制作食材，让客户吃的放心，再到草莓蛋糕的

多种口味，客户可根据自己的喜好，选择自己喜欢的口味，最后是配送服务和

注意事项，客户可根据自己的需求定制蛋糕，使客户享用到味道绝美的草莓蛋

糕。（如图14所示）

16

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

3.3.2详情页所做产品设计效果

17

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

18

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

图14详情页所做产品效果图

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

3.4.1设计思路

登录注册页面选择深粉色作为背景，是整体完整协调，呼应店铺主图。在

19

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

左侧设置了一个展示区，我选择了一个蛋糕的插画摆放在这，凸显店铺主体，

给登录页面增添几分精致和美好。设置了密码和短信二种登录方式，客户可选

择一款自己适合的登录方式，方便客户登录。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页面采用一个圆角矩形区分，里面列出客户所加入购物车所选商品

的详情信息，包括商品的图片、名称、价格、数量等参数，方便选择和确认商

品参数后点击结算按钮即可下单购买商品。下边的“猜你喜欢”、“随手购”、

“我的关注”可根据的在店铺所购买的产品和搜索词，推荐客户感兴趣的商品，

让客户在看见感兴趣的商品点进去浏览和加购，促进店铺商品的销量。（如图16

所示）

20

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

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

订单结算页是客户最后对所想购买的商品进行下单结算的页面。由二个部

分组成，分别是“选择收货的地址”和“确认订单信息”。客户可在“选择收

货的地址”中选择商品商品的收货地，这里用粉色矩形框和灰色矩形框区分选

中和为现中的状态。“确认订单信息”中详细列出客户所想下单的商品的参数、

21

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

享用的服务和优惠活动、预计送达的时间，最后点击“提交订单”按钮完成下

单。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

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