自然派品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

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

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

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

2.6订单结算页..................................................................................................7

2.7个人中心......................................................................................................8

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

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

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

3.1.2设计效果.............................................................................................11

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

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

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

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

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

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

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

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

3.4.2设计效果.............................................................................................18

I

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

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

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

3.5.2设计效果.............................................................................................19

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

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

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

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

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

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

4总结..........................................................................................................................22

参考资料............................................................24

II

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

自然派品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

由于互联网近几年的飞速发展，网络购物已经成为市场的重要组成部分，

在给人们的生活带来便利的同时，同时也有许多麻烦而应运而生。在平时网购

的时候网店多，种类杂乱繁多。这时建立独立的品牌形象网店，保持良好的形

象，就能够在众多网店中脱颖而出。比如说现在的三只松鼠以可爱的动物形象

给用户刻上了良好的印象，短短几年就迅速成为零食巨头。还有良品铺子、百

草味等品牌。

我所选的自然派品牌成立于1969年，历史悠久，现拥国内1万多名员

工，并以“健康、专业、休闲”的经营理念飞速成长。

1.2项目需求分析

关于自然派品牌，它们1969年成立于香港，是集贸易、生产、分销、零售

一体化集团公司，是国内休闲食品领导者之一。自然派成立至今，已拥有54年

的悠久历史，现拥有国内职工近1万多人，流动资金超过10亿元。2005年11

月，深圳市自然派商贸发展有限公司正式成立，公司秉承：“健康、专业、休

闲”的经营理念快速发展、服务客户。展望未来，自然派充满信心，将秉承“合

作双赢”的企业理念，通过持续的优化与发展，致力于成为改善大众生活的卓

越零售企业！随着电商行业的兴起，自然派品牌在网店中，也慢慢的在发展起

来，2014年10月23日在自然派官方网站上发布了天猫旗舰店、天猫专营店、

淘宝集市店、京东旗舰店、工商融已购、苏宁易购店、深商天下店等知名电商

平台的店铺。虽然进入电商行业时间悠久，但没有很多知名度很大的原因就是

自然派品牌的网店视觉效果不够显眼，此次项目给自然派品牌网店制作一系列

电商网店所需的效果图，让其显得更加美观，增加顾客对品牌的认识度。

1.3色彩设计

色彩是一个页面很重要的东西，它在人们精神文化中扮演着和非常重要的

角色。如果人类没有了色彩，那将会是一件很恐怖的事。而相对于页面的色

1

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

彩，也是同样的道理，它可以给用户带来视觉冲击，让用户产生不同的心里感

觉，从而购买的欲望。通过合理的色彩搭配，可以让作品得到更好的宣传，让

用户看着就心情舒适。

设计方案以蓝色和浅黄色为主，这些颜色结合就是深绿色，给人一种舒适

感，但它又有独特个性。旁边的山和仙鹤更是点睛之笔，给深绿色增添了一抹

亮丽的色彩，也让人感到云霄中的一股仙气。

C：80M：40Y：58K：1

图1标准色

1.4字体规范

字体规范的重要性有很多，字体能够传递信息，在品牌视觉设计的过程中

字体设计也尤为重要，字体的形式特征，冲击用户的眼球，让用户欣赏，激发

购买欲。选择什么字体也是其中很细节的一部分，所以我精心挑选的以下字体

来设计我的效果图。（如图2所示）

图2标准字体

2

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

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

2.1首页

顶部有导航店招，店招下面放了三张banner，并且设置了轮播效果展示，

这是最显眼的部位，也能够让用户最清楚的看到产品，了解品牌。中间部分是

产品展示，购买产品，可以让用户看到自然派品牌的特色产品，也是做的热卖

产品，激发用户的购买欲望，增加销量。在下方一点有我们品牌故事，让用户

看完产品后了解我们自然派品牌的文化，给用户心里打造深刻的品牌印象。最

后底部展示有联系我们、会员中心、个性化零食等。可以让想联系我们实地考

察的用户容易的找到我们，也可以让用户很容易的注册会员。（如图3所示）

图3首页原型图

3

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

2.2搜索结果页

顶部有导航店招，店招下方布置了一个搜索框，用户可以点击搜索想要的

产品，可以更快的找的想要购买的产品。在分类那一行点击想要购买的哪一类

产品，就会直接跳转到那一类产品的页面，让用户更加快捷，更加方便的找到

想要的产品。中间部位就是一部分的产品展示和掌柜推荐的产品，让用户可以

直接看到产品，吸引用户眼球，从而产生消费。尾部设置的是自然派品牌的位

置、电话等品牌信息。（如图4所示）

图4搜索结果页原型图

4

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

2.3商品详情页

顶部有导航店招，店招下方放置一个产品展示，可以选择口味，选择所购

买的数量，直接购买或者加入到购物车保存。中间部位就是展示详情页面，让

用户了解产品，怎么制作出来的，原产地在哪等信息，也让用户更加相信我们

品牌的产品让其更放心。详情旁边还设置了一个评价功能，让用户看到其他用

户评价的好评，从第三方角度诉说增加用户信任度，激发用户的购买欲望。尾

部设置的是自然派品牌的位置、电话等品牌信息。（如图5所示）

图5商品详情页原型图

5

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

2.4登录注册页

顶部有店招导航，用一张茶杯图片作为装饰；用户登录账号密码可以输

入，记住密码也可以勾选。还可以更多方式登录。整体看起来清晰简洁。登

录，注册模块可以保证用户的隐私、个人信息不被泄露。用户也可以在此注册

账号，方便以后的登录。登录页面流畅、用户体验好，可以增加用户粘性，也

可以利用这个增加回头客的数量。尾部设置的是自然派品牌的位置、电话等品

牌信息点击相应的文字也会跳转到相应的位置。（如图6所示）

图6登录注册页原型图

6

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

2.5购物车

顶部用店招导航，购物车是让用户可以在网店上购买功能，就像超市里面

的购物推车一样，把商品放进购物车，期间也可以增加商品或者删除商品的一

个功能，购物车是网上购买东西的一个快捷工具。中间部位可以查询到添加到

购物车的商品。尾部设置的是自然派品牌的位置、电话等品牌信息点击相应的

文字也会跳转到相应的位置。（如图7所示）

图7购物车原型图

2.6订单结算页

顶部是导航店招，店招下方可以选择地址；然后就是商品订单信息，在下

面就是可以选择是否开具发票，选择运送方式，给卖家留言，结算等信息，给

卖家留言设置了一个留言框，输入留言信息就可以收到。订单结算页是一个让

用户结算，下单的页面，相当于一个收银员的功能。所以订单结算页是作为网

7

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

店来说必不可少的一个页面。尾部设置的是自然派品牌的位置、电话等品牌信

息点击相应的文字也会跳转到相应的位置。（如图8所示）

图8订单结算页原型图

2.7个人中心

最上方是导航店招，店招下面防止的是自己的个人信息，在下方是自己的

会员积分和相应的特权。可以让用户真切感受到注册会员可以领取优惠。尾部

8

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

设置的是自然派品牌的位置、电话等品牌信息点击相应的文字也会跳转到相应

的位置。个人中心能够增加用户的粘性，也能让用户看到自己的个人信息。优

惠卷、优惠活动都会提前通知。让用户能够真切地感受到优惠力度。这样更容

易让用户增加消费。（如图9所示）

图9个人中心原型图

9

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

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

3.1首页视觉设计与制作

3.1.1设计思路

背景用浅绿色转变为浅黄色的渐变，山峰重峦叠嶂、仙鹤直冲云霄让人感

到一种身处仙境的舒适感。对年货盛典进行了描边使其更加明显，增加美感；

还使用了渐变，让颜色由深变浅，突出层次感。促销文字用圆环围着，圆环采

用两个椭圆叠在一起让其有一个描边的效果，上面那一层的椭圆还用了渐变使

其更加美观。最下面把零食放在桌子上，这样更加显眼，增加食欲。（如图10

所示）

图10品牌节日活动banner

背景底层用一个红色三角形以相同角度进行旋转一圈放在黄色背景上就可

以得到红黄交替的画面了。“爆款促销”文字旁边的扇形边框是用正圆和三角

形制作而成，使用“多边套索工具”选择出扇形区域，在进行反选，然后删除

掉就可以得到扇形图形。“高蛋白猪肉脯”旁边的框用正圆、椭圆、矩形剪切

出来。猪肉脯图片切在一个圆里，且给它增亮，调色使其更加美观。整体看起

来简约、舒适，也突出了爆款产品，让人更加有购买力。爆款促销作为产品的

一个重要营销模式，增加消费群体，这个爆款banner也显得尤其重要，一张好

的爆款促销banner可以让产品直接爆单，吸引消费者，产生销量。Banner中的

文字排版最为重要，让用户第一眼就看到卖点是什么，卖的产品是什么。五折

的折扣也让用户眼前一亮，感觉很优惠，激发消费欲。（如图11所示）

10

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

图11品牌爆品促销banner

首页有导航栏、店招、banner、优惠劵、产品展示、品牌故事六大部分组

成；整体颜色为深绿色，显得高端，两侧有山、有仙鹤、有云雾作为装饰。首

页是作为品牌视觉设计很重要的一个效果图，是让用户第一眼就看到的图片，

所以整体视觉给它设计的很仔细。（如图12所示）

3.1.2设计效果

(此处直接展示首页效果图片)

11

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

12

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

图12首页效果图

13

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

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

3.2.1设计思路

用多边形框突出里面的文字，呈现浅黄色，里面用浅色的山作为装饰。多

边形框边缘用了投影和调色，四角用扇形等距离切了一下让其更加美观

产品展示用的是俯视角度长方体，长方体上方用了橙色和浅黄色的渐变，

前面边缘用橙色线条包装，而价格用深绿色和白色的渐变横条显示在上面，

“抢”字特意用红色圆圈围住让人有点击的欲望。（如图13所示）（如图13所

示）

3.2.2设计效果

(此处直接展示搜索结果页效果图片)

图13搜索结果页效果图

14

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

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

3.3.1产品名称设计思路

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

我根据产品种类和特性，选了鳕鱼片产品进行详情页设计。产品详情页设计我

共分了六个部分，店招导航、产品主图及产品原料信息、中间产品详情内容。

这里背景色选择深蓝色，深蓝色寓意神秘、纯净。深蓝色是一种健康的颜色，

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

购买信息与中间产品详情内容设计不同。鳕鱼片的原料来源于海里，所以用深

蓝色作为主要的背景颜色突出在海里的氛围；首先是介绍产品的配料，制作过

程都剪切到一个圆里使其更加美观，中间部分介绍鳕鱼的生长环境、真材实

料，让人感觉更加健康。最后用橙色作为背景色更加显眼呈现出实物。（如图

14所示）

3.3.2产品名称设计效果

15

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

16

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

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

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

3.4.1设计思路

顶部套用店招导航，中间部分用白色背景作为登陆页面，还用了一杯茶、

树叶、水果进行装饰，这样让人感到舒适、简洁明了。（如图15所示）

17

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

3.4.2设计效果

(此处直接展示登录注册页效果图片)

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

顶部店招导航，中间用圆角矩形框装饰。产品购物车里有三样不同的商品

展示，最左边给用户看到图片，图片旁边用文字介绍商品，有价格、数量、删

除和收藏商品。最下面是结算总金额。可以让用户有很好的体验感。（如图16

18

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

所示）

3.5.2设计效果

(此处直接展示购物车效果图片)

图16购物车效果图

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

3.6.1设计思路

顶部用店招导航，接下来就是展示收货地址，可以选择默认收货地址，用

矩形围着地址。然后还可以增加收货人信息。下面就是展示需要购买商品，可

以给买家留言，然后就是确认支付。（如图17所示）

19

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

3.6.2设计效果

(此处直接展示订单结算页效果图片)

图17订单结算页效果图

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

3.7.1设计思路

顶端有导航店招，然后就是个人信息展示，下面一点就是会员中心，可以

看到自己会员的积分和可领取的会员权益。页面简洁明了，可以让用户了解到

自己的信息和特权，给他们一个优惠，让其增加购买。（如图18所示）

20

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

3.7.2设计效果

(此处直接展示个人中心效果图片)

图18个人中心效果图

21

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

4总结

此次对于自然派品牌网店的设计方案，我已全部完成。我所选的毕业设计

题目是“自然派品牌网店视觉方案设计”，之所以选这个题目，是因为在大学

三年里对设计这一方面非常感兴趣，也希望自己以后在设计这一方面工作。

在本次设计“自然派品牌网店视觉方案”的过程中，让我又复习了许多没学

会的专业知识。设计初期，我复习了AxureRP8、AdobePhotoshopCC等软件

的使用。查找了关于原型图如何制作、海报制作的资料；还与同学相互学习，

在指导老师开会课上，规划如何做好毕业设计；设计中期，在网上找了许多图

片素材来制作banner、详情页、首页等，还在自然派品牌官网上查阅了大量该

品牌文化，并且进行了深入了解，在零售业务中，自然派充满信心，对未来抱

有很大希望，将秉承“合作双赢”的企业理念，通过持续的优化与发展，致力于

成为改善大众生活的卓越零售企业！随着电商行业的兴起，自然派品牌在网店

中，也慢慢的在发展起来。在设计末期，也是最难的一步，就是实际操作做出

作品。首先制作的是banner效果图，一开始毫无头绪，然后我参考了“三只松

鼠”，“良