水獭吨吨品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

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

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

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

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

2.7个人中心....................................................................................................10

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

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

3.1.1设计思路.............................................................................................11

3.1.2设计效果.............................................................................................14

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

3.2.1设计思路.............................................................................................15

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

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

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

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

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

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

3.4.2设计效果.............................................................................................19

I

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

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

3.5.1设计思路.............................................................................................19

3.5.2设计效果.............................................................................................20

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

3.6.1设计思路.............................................................................................20

3.6.2设计效果.............................................................................................21

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

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

3.7.2设计效果.............................................................................................22

4总结..........................................................................................................................23

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

II

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

水獭吨吨品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着经济和网络科技的发展，电子商务得到迅速的发展，网络购物方式慢

慢的传播，越来越多的人使用网络购物，现在已成长为人们生活中一种不可或

缺的购物方式。从卖方市场来看，近4000万个企业，1600余万个大大小小的活

跃卖家，运营着544万个在线网站，在线销售超十亿件以上的商品，这些构成

了中国电子商务市场的基本格局。[1]因此，我们更应该设计好我们的网店，一

个好的网店，是能够满足消费者的购物需求，让消费者了解我们的品牌与产品，

也能增加消费者对网店品牌的印象。我所选的品牌，水獭吨吨，是深圳市水獭

吨吨食品科技有限公司旗下消费品品牌，在新时代下，茶饮行业是最火热的赛

道之一，而水獭吨吨以产品形态差异化强势进入茶饮行业竞争中，创造出超即

溶冻干水果茶，致力于为年轻人提供“一杯水现做水果茶”的方便体验，从众

多茶饮品牌中脱颖而出，因此我设计出一个拥有购买功能的独立品牌网店。

1.2项目需求分析

首先，水獭吨吨目前并没有一个独立运营的网店。在新时代下的茶饮行业

激烈市场竞争中，开一个网店能够更大程度的拓展我们的业务，提升我们品牌

的形象知名度，更能展示我们品牌的独有特色，且购买方式快捷方便，为消费

者提供优质的服务。在互联网时代，消费者也形成了互联网行为模式，他们青

睐快速、轻便的阅读体验，因此在进行电商视觉设计时，也要尽可能地为消费

者营造这样的阅读环境。[2]

其次，品牌的目标群体是年轻的白领群体，让用户足不出门也能喝到好喝

的茶饮。因此我把网站设置成清新自然，真实可以激发消费者购买欲望，整个

网站趋于年轻化，亲和化，让消费者对品牌有良好印象，可以满足消费者的视

觉感受，更能体现我们品牌的特点。

最后，在产品上，将产品与自身的特点相结合，产品要突出我们的卖点，

吸引消费者的眼球，激发消费者的购买欲望，与产品理念不背道而驰。

1

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

1.3色彩设计

信息的重要性靠色彩凸显。网站是传递信息的，信息传递的受众是用户，

就算再枯燥的内容，当用色彩调配一下的时候，用户也会忍不住地多看两眼。

网站需要靠设计来提醒用户，一个有效的方式就是在色彩上做足文章，将重要

的内容用色彩凸显出来。[3]在网店视觉设计中，色彩是很重要的一个环节，贯

穿到整个页面。不同的色彩产生的生理和心理效应也不同，不同的商品也有不

同的色彩特性。[4]色彩也会对人的情绪产生一定影响，所以在色彩的选择上尤

为重要，我考虑到品牌特点与品牌理念，更考虑到消费者对网站的第一印象，

我也从产品的特点出发，将产品特色融入于色彩中，吸引消费者眼球使消费者

能够产生购买欲望。因此我选择了绿色为主色，红色为点缀色，使网页呈现温

馨，和煦的氛围。

选择绿色为主色调的原因是因为，绿色是清新健康的颜色，使用绿色刚好

迎合我们的产品，清新的绿色也可以让消费者眼前一亮。以红色为点缀，红色

大方活泼，给人的冲击力强，具有鲜明性，用作点缀是很好的颜色。（如图1

所示）

图1标准色

1.4字体规范

在网店字体的选择上，不同的字体、文字排版、字体颜色大小粗细等细节

都会对网店的页面有着很大的影响，从而也会影响用户体验，因此我按照一定

的字体规范来进行选择。

一般的网店，字体的选择和字体规范都是本着不宜过多的原则来使用的，

2

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

主要字体的选择上，我使用方正粗黑简体和黑体，黑体又称"方体"，笔画粗细

一致，醒目、粗壮，具有强烈的视觉冲击力。它的出现与商业的发展有密切的

关系。[5]该两种字体使得页面能够协调、稳定。并且可以让消费者在视觉上减

少疲劳，阅读更加流畅。文字的风格和整体的设计风格比较一致，能够带动用

户的购买欲。为了使网店更协调，部分地方设计我还选择了胡晓波男神体，该

字体给人感觉很有设计感，趋向年轻化，风格页很符合网店的特点。（如若该

网店视觉设计所使用字体为商用，那么，使用字体者要向字体所属公司获取版

权。如图2所示）

图2标准字体

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

2.1首页

首页的设计上，功能模块有店招导航区、banner、专属优惠、产品上新、

热销产品、关于我们、底部。

网站的导航，包括顶部、底部和侧面的导航都应该尽可能地令用户易用，

保证用户"想"看到的在尽可能显眼的位置，[6]

店招区是设置左文右图的方式，左侧文字，右侧放置了搜索框、个人中心

和购物车，这样做可以提高消费者浏览信息的流畅，通过强大的搜索和导航功

能让顾客快速、方便地找到自己所需的产品。建立好的导航和搜索系统有助于

3

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

商家的定位。通过不同的商品类别和基于用户使用习惯的标签设置来建立清晰

的导航系统，有助于用户浏览网站的其他页面。[7]下方的一行导航条又平衡了

整体的布局看起来不分散。

banner区放在导航下面，可以使消费者直观的看到我们的产品；专属优惠，

将优惠券放置一排，大小统一，平均分布，使消费者看起来更整洁美观。

产品上新使用折线型的布局，将产品图片、文字用相互错位的方式进行排

列，在视觉上达到平衡，给人干爽、灵活的感觉。

热销产品版式是上图下文，图片文字大小统一且平均分布，消费者可以更

加直观的了解到我们的产品信息。关于我们则是使用左图右文，图片在左侧可

以以图片的方式最快时间吸引用户的眼球，可以更快吸引消费者的兴趣。

底部版块就是文字统一分布，两侧和中间留白统一，看起来更加整洁。（如

图3所示）

4

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

图3首页原型图

5

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

2.2搜索结果页

搜索结果页，版式上采用上文下图,上侧文字使用框架包住，使其看起来会

更加规范化且高效，在上方设置了一个搜索按钮，可以指引消费者方便的进行

查找。下侧图片有序分列，当鼠标移入图片区域，将触发立即购买和加入购物

车按钮，可以方便消费者购买。这样的版式简洁清楚，给人利落干净的感觉。

（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页分有产品的购买信息版块和详情版块。购买信息其中有产品的

图片、信息、价格、数量得到选择、设置按钮，选择加入购物车或者立即购买，

6

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

可快速跳转到指定页面，在它的右侧放了一个为您推荐，可以更好的向消费者

推荐我们的产品。下方是产品的自定义版块，用来介绍我们的产品，左侧是导

航栏，消费者可根据不同需求进行点击。（如图5所示）

图5商品详情页原型图

2.4登录注册页

登录注册页分为登录与注册两个功能模块，分为左右两个版块，具有平衡

性，互不干扰、稳定的特点，登录区设置第三方登录，可以更快的登录。（如

7

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

图6所示）

图6登录注册页原型图

2.5购物车

购物车页面使用上文下图的版式，将购物车的信息放在上面，使消费者可

以直观的看到主要信息，下面是掌柜推荐板块，陈列了三个大小相同、间距合

适的图片，整齐划一。我在图片两侧增加向左滑动或向右滑动按钮，消费者可

以根据需要滑动。（如图7所示）

8

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

图7购物车原型图

2.6订单结算页

订单结算页面有收货人信息、支付方式、选择快递、会员专属和结算页面，

订单结算页面主要是文字，各个版块我使用虚线划分开来，这样对页面的版块

看的更清晰。订单清算放在下侧。（如图8所示）

9

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

图8订单结算页原型图

2.7个人中心

个人中心有个人信息功能页板块、会员特权服务、会员成长体系。个人信

息导航放在左侧，会员特权服务与会员成长体系放在右侧，会员服务卡片放在

上层，将图文放在下层，图文按照一定间隔分布，清晰简单，为消费者提供多

种功能，会员成长体系置于会员特权服务下层，简单明了。（如图9所示）

10

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

首先，首页的模块标题的字体，文字上下排列，大小不一，分成两行，颜

色采用相近色，更具有层次感，视觉上更舒适。

店招导航部分，店招色彩使用淡绿和深绿搭配，画面整体和谐，还在背景

下放置了两个柠檬，增加灵动性，能满足消费者的需要，导航条消费者可以根

据自己的需求，点进相应的文字跳转。

Banner区突出我们的热销产品，抓人眼球，激发消费者购买欲望。

11

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

专属优惠，消费者可以在首页领取优惠券，放置优惠券可以推动消费者购

买，优惠券用热情亮眼的红色为主，将产品的包装与优惠券相结合，更具有品

牌特色。

产品上新可以提高消费者的关注度，背景选择不规则形状的柠檬，更符合

我们的品牌理念，文字背景选用日历形状，背景包裹文字，不会显得杂乱无章，

中间还有小标志与线条做点缀，营造出一种舒适的视觉感受。

热销产品可以增加消费者的好奇度，做得好可以提升品牌的知名度，文字

用两个简单的线条包裹，产品有序分布，干净不杂乱。

关于我们介绍我们的品牌，文字简短干练，不会过多引起消费者的疲劳，

让消费者能够深入了解我们的品牌，想到茶饮就会想到我们的品牌。

底部页面：设置了一个返回上层的标志，含有客户服务中心，消费者有什

么疑问都可以得到解答。关于吨吨，就是介绍品牌的故事，简介等。探索更多，

消费者可以点进了解，我们的创意研发和更多产品。联系我们，里面有水獭吨

吨的多种联系方式，消费者可以资讯。

品牌节日我选用了春节，春节是新一年的开始，是我国传统节日中最具有

代表性、最隆重的节日，具有丰厚的历史文化底蕴。在颜色的选择上，我选用

喜庆大方的大红色作为背景色，寓意新的一年喜气洋洋，黄色作为点缀色，黄

色温暖明亮，正如春天的来临。采用左文右图的结构，添加了立即购买的标志，

背景的下方使用了传统云纹，左侧添加两个具有春节特色大红灯笼挂在上方，

采用雪花、祥云、冰糖葫芦、福字等春节特色作为点缀，体现出浓浓的春节气

氛。（如图10所示）

图10品牌节日活动banner

在品牌爆款促销海报中，我选用黄色作为背景色，黄色温暖灿烂，背景添

加多种几何体，丰富背景，添加层次。将圆形置于产品图片下方，可以突出视

觉中心，将视觉聚焦到我们的产品上面，banner用茶叶与冻干作为点缀，营造

12

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

整体氛围。（如图11所示）

图11品牌爆品促销banner

13

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

3.1.2首页设计效果

图12首页效果图

14

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

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

3.2.1设计思路

搜索结果页有宝贝分类和搜索产品结果。宝贝分类，放置了一个搜索框，

消费者可以进行产品查找，也可以在下方进行筛选，筛选分为综合、规格、规

格、价格。可以自己在右侧进行产品的选择，价格中分为4个价格区间，满足

不同消费人群的需求。下面是是搜索的结果，将其有序的排列，整齐划一，具

有干净整洁的氛围。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

15

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

3.3水獭吨吨详情页视觉设计与制作

商品详情页是所有营销的落地点。消费者通过搜索进入店铺后，先进入的

便是详情页。[8]所以在分析水獭吨吨品牌的过程中，我根据产品特点和种类，

选择了产品中的凤梨多多，对其进行详情页设计。产品详情页设计我共分了六

个部分，店招导航、产品主图及购买信息、左侧导航栏、中间产品详情内容、

右侧热销产品推荐。在背景的选择上，我使用了清新自然、舒适的淡绿色为背

景色，深绿色作为点缀色。整体氛围清新自然，结构相对统一，以下是介绍这

三种产品详情内容的设计思路。

3.3.1水獭吨吨设计思路

首先是产品信息，左侧放置产品图，右侧是购买信息。右侧添加了为您推

荐，推广我们店铺的其它产品。左侧是分类导航，使用深绿色作为背景色包裹。

中间详情内容，在将焦点图的设计上，我选择了黄色作为焦点图的背景色，黄

色是可以提高食欲的颜色，焦点图文字不多，但精准的亮出我们的卖点，整体

看起来温暖和谐。

产品档案我将产品图放在上面，产品图有我们的包装好的产品，拆开来的

产品和我们已经泡好之后的成品，可以让消费者更直观的了解到我们的产品，

信息置于下面，用一个方形小框包裹，不会显得散乱。

多种优势，我采用产品图高斯模糊，降低透明度后的图片作为文字的背景，

不会显得突兀，文字中间的分割线我采用了一串凤梨块，看起来更加有视觉效

果。

鲜嫩方便，采用折线形的分布，大标题和小标题看起来更有层次感，图片

切割成圆形，外侧用虚线圆形围绕，更聚焦。

多种喝法，文字背景与文字对比强烈，突出文字内容。版面上上下交错，

有不规则的美感。

温馨提示，站在消费者的立场上，设身处地的来设计出这一版块的内容，

四个小提示：使用方法、储存方法、关于发货和收货提醒。消费者有疑问的也

可以在这里得到解答。（如图14所示）

16

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

3.3.2水獭吨吨设计效果

17

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

图14水獭吨吨详情页效果图

18

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

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

3.4.1设计思路

登陆注册页面，选用淡绿色为背景色，外框和按钮使用深绿色，可以使消

费者浏览的时候更明了。登陆中，可以直接根据手机号或用户名在输入密码进

行登录，也为消费者提供第三方登录，QQ|、微信、支付宝，更加快捷，简便。

注册页面许提供用户名，手机号，再设置自己的密码，方便下次登录，获取验

证码后，勾选《水獭吨吨服务协议》，即可注册成功。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页面有购物车和推荐版块。选用淡绿色为背景色，购物车的标题背

景使用深绿色作为背景色包裹，使消费者更加清晰的看到主要信息。购物车显

19

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

示商品的信息，如净含量、单价、数量、小计、库存、操作等，也可以在前方

选择勾选后放弃勾选。还添加发票信息，发票抬头和结算页面。推荐版块有掌

柜推荐、猜你喜欢、最近浏览三个，展现出的是我们的掌柜推荐，在下方还放

置了三个产品的图片，用户点进去即可快捷购买，没有想要的产品周围也有按

钮方便切换。（如图16所示）

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

订单结算页有填写收件人信息、支付方式、选择快递、会员专属和清算页

面，选用淡绿色为背景色。收件人信息：消费者可以填写自己的地址，或者换

20

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

地址，设置默认地址等都支持，周围用框线包裹，不会显得杂乱，为消费者提

供便利；支付方式分为银行卡、在线支付、货到付款，只需点击即可，还有更

多支付，为消费者提供多种消费方式，更加便捷；会员专属：设置了三张大额

优惠券，红色为背景色，更加吸睛热情，设计上，将水獭与优惠券相结合，更

能展现品牌的特色；商品清单显示商品的信息，发票抬头和结算页面，消费者

也可进行移除订单结算（如图17所示）

3.6.2设计效果