花花牛品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

2.3商品详情页..................................................................................................7

2.4登录注册页..................................................................................................9

2.5购物车........................................................................................................10

2.6订单结算页................................................................................................11

2.7个人中心....................................................................................................12

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

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

3.1.1设计思路.............................................................................................14

3.1.2设计效果.............................................................................................16

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

3.2.1设计思路.............................................................................................17

3.2.2设计效果.............................................................................................18

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

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

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

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

3.4.1设计思路.............................................................................................22

3.4.2设计效果.............................................................................................22

I

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

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

3.5.1设计思路.............................................................................................22

3.5.2设计效果.............................................................................................23

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

3.6.1设计思路.............................................................................................23

3.6.2设计效果.............................................................................................24

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

3.7.1设计思路.............................................................................................25

3.7.2设计效果.............................................................................................25

4总结..........................................................................................................................27

参考资料............................................................28

II

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

花花牛品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

近年来，随着电子商务的发展，网购已成为人们购物的主要方式之一，同

时网络购物也为企业带来了巨大的网络商机。因此，越来越多的企业选择在网

络上开设自己的网店。在这个竞争激烈的市场上，一个好的网店视觉设计能够

很好地吸引顾客，提高销售额，提升品牌形象。因此，对于开设网店的企业来

说，进行网店视觉设计是非常必要的，毕竟消费者购物时只能通过网上的文字

和图片等信息来了解店铺和产品。视觉设计不仅包括网站整体的色彩搭配、排

版、图片处理等方面，还需要考虑到用户体验、页面风格等细节方面的设计。

一个好的网店视觉设计能够为企业提升品牌形象，拓展市场份额，增强竞争力。

在庞大的市场竞争激烈下，众多品牌和企业选择成立自己的独立网店。例

如：蒙牛在天猫、京东等电商平台有售。同时，蒙牛也拥有自己的独立官方网

店“蒙牛乳选网上商城”，作为企业线上直营渠道；还有光明，光明是中国奶制

品行业领先企业，其官方网店在天猫、京东等电商平台均有售。此外，光明乳

业旗下的“光明汇”官方网店也是企业线上直营渠道之一。建立独立的网店不

仅能更好地为消费者提供全系列产品线上订购，而且能够提供更多的精细化服

务，例如特价促销、积分兑换等。同时品牌本身自己也能从中获取更多的客户

数据，实现更加全面化、定向化、标准化的营销活动，从而使自己的品牌形象

更加突出。

河南花花牛品牌成立于1997年，主营业务为鲜奶、乳饮酸乳蛋白等产品的

生产和销售、经过多年的发展，已成为河南省乃至全国乳制品行业的知名品牌。

同时品牌在其官方网站“花花牛官网”上提供了公司概况、产品介绍、新闻动

态、加盟指南等信息，并且在天猫、京东、拼多多扥电商平台拥有自己的官方

旗舰店，除了可以购买鲜奶、酸奶、乳饮料等产品，消费者还可以参与各种促

销活动和领取优惠劵等。总之，河南花花牛品牌拥有较强的实力和影响力，其

独立的品牌网店也提供方便快捷的购买服务，让消费者可以更加方便地购买到

自己需要的花花牛牛奶产品。

1

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

1.2项目需求分析

随着当今时代互联网的快速发展和消费者逐渐形成频繁在线上购物的习惯，

各个品牌都在努力积极创建自己的电商平台，以努力满足消费者在线上购物各

方面的需求。河南花花牛企业作为一个知名的乳制品品牌，也更加需要对其网

店页面进行重新设计，以适应现阶段的市场和消费者的需求，提高品牌的知名

度和竞争力。首先，作为一个知名品牌，河南花花牛企业需要对其独立网页重

新设计的原因：随着时代的快速发展以及消费者需求的变化，消费者在选择乳

制品品牌的时候不只仅仅关注品牌的知名度和口感，有时候加强品牌的传播和

渠道也是一种很好的营销方法。乳制品行业竞争愈发激烈，各个品牌在追求扩

大市场份额和提高品牌声誉的同时，也在不断地提高品牌自身实力。

在重新设计网店页面的时候，河南花花牛品牌可以从以下几个方面进行调

整创新：花花牛经过多年的发展有着悠久的历史和深厚的文化底蕴，“新鲜在你

身边”是花花牛品牌传播给消费者最真诚的服务承诺。作为中原地区排名前列

的乳制品企业——花花牛紧抓奶业市场发展趋势，坚守“新鲜”道路，用实际

行动引领牛奶消费的“新鲜”理念，打开了中原地区低温乳制品和巴氏鲜奶市

场并实现了高速增长。花花牛秉持着始终坚持“为消费者提供100%安全的优质

乳制品”“质量就是生命”的质量管理理念。花花牛不断打造科研平台，健全企

业内部创新管理体系，激发企业创新内生动力。因此在重新设计页面时应该体

现品牌的内涵和文化特点，增强品牌的价值和形象；花花牛企业产品涵盖巴氏

杀菌乳、发酵乳、灭菌乳、调制乳、乳饮料、乳粉、奶酪、汽水、冰淇淋等系

列120余个品种，深受广大消费者喜爱。所以应该对每个系列进行明确的定位

以及差异化的推广；在重新设计设计页面时，要注重提高消费者的使用体验，

以及提供便利的搜索和购买功能，不断完善在线咨询和售后服务等方面。

通过重新设计网店页面，可以使品牌提高知名度和影响力，加强品牌的价

值和形象；增强在各大电商平台的营销能力，提升企业盈利能力扩大企业市场

份额；提供更满意的购物购物体验，增强消费者对品牌的忠诚度和满意度。总

之，重新设计网店页面是河南花花牛奶品牌发展的必然趋势，也是针对市场和

顾客需求的一种回应。通过设计提供更优质的用户体验，提高品牌知名度和影

响力，还可以增强与其他竞争对手之间的差异性，提高品牌的竞争力。

1.3色彩设计

在色彩方面选择了蓝色和白色为主调的色彩搭配更相得益彰。蓝色是一种

2

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

稳重、高贵、清新的色彩，经常与白色一起使用，白色则给人一种清爽、洁净、

纯真的感觉。两种颜色配合使用能够让页面显得舒适、优雅，同时也更突显产

品的高品质和品牌内涵。且蓝色和白色的色彩设计也符合对品牌定位：河南花

花牛品牌是以高端、洁净、安全、纯正的鲜奶品质为标志的，而蓝色和白色的

色彩组合可以很好地体现这些品牌形象的特点，传递出品牌的价值和品质感。

蓝色和白色的色彩搭配设计能够增加消费者的体验感：购物体验对于消费者至

关重要，因此色彩设计方面也应注重消费者的视觉感觉体验。蓝色和白色搭配

的网店页面可以让消费者在购买产品的过程中感受到品质、洁净、纯净等多方

面的优势，提升购物体验。

总之，蓝色和白色的这种色彩组合可以更好地体现出品牌的高品质、高端、

纯净的形象特点，同时也能够增加消费者的购物体验，达到优化品牌形象、提

升品牌价值的目的。

色彩具体规格：（如图1所示）

图1标准色

3

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

1.4字体规范

字体规范选择采用四种标准字体分别应用于各效果页面图有：黑体，优设

字由棒棒体，点字浅夏体和微软雅黑（如图2所示）

图2标准字体

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

2.1首页

将首页区域共分为了五个模块，依次为：新品上市、热卖推荐、更多产品、

关于我们、加入我们。

在新品上市模块中采用了直排式的排列方式和左图右文字搭配的排版方式

内容整体性强,聚焦度高，可以对产品的价格，规格和进行详细介绍，产品清晰

可观；在热卖推荐模块中采用了两行两列的排列方式和上图下文的版式对产品

进行详细展示店铺销售量较高的产品，并设置了“立即购买”按钮可以刺激顾

客进行下单消费；在更多产品模块中采用横排式的排列方式，并将产品进行分

类，使消费者体验感强，方便快捷找到需要购买所系列的产品。同时设置滑动

4

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

按钮可查看更多产品；在关于我们模块中采用左图右文的版式对品牌历史，价

5

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

值观念进行大概的介绍，且设置了“更多”按钮可进行详细查看；在加入我们

6

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

模块中为感兴趣的用户介绍了加盟的流程和加盟条件及优势等并在底部设置了

“返回顶部”按钮，方便用户可以一键快速回到顶部，简单直接。（如图3所示）

7

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

图3首页原型图

8

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

2.2搜索结果页

搜索结果页分为了两个模块：一个是对产品进行分类筛选的模块，在此模

块中用户可以直接搜索需要的产品，也可以对产品的要求进行筛选，按产品的

销量、口味、价格等进行选择。第二个模块是对按要求筛选出的产品进行展示

和介绍。同时也设置了“立即购买”按钮，在消费者看到需要的产品的同时可

刺激消费者下单，提高成交率，为顾客提高方便快捷的购买功能。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页是提高转化率的入口，它能激发顾客的消费欲望，树立信任感，

打消顾客的消费疑虑，促使顾客下单，同时可以传达企业品牌信息，完成从流

量到有效流量再到忠实流量的一个转化。

9

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

将商品详情页分为了商品模块、左侧导航栏模块、图文详情和右侧推荐模

块。在商品模块中采用左图右文的排版方式，内容包含商品属性如商品图、购

买说明规格选择、价格优惠等。以及设置了收藏、加入购物车和立即购买按钮

提高消费者的购物体验感，布局合理。在导航栏模块中采用直排式的排列方式

对商品进行了分类，可以更好的人消费者选择需要的产品种类。图文详情模块

在此模块中可对产品进行详细介绍。在推荐模块中采用了上图下文的排版方式

以及可供方便加入购物车按钮和查看“更多”热销产品的设置。可以推荐用户

相关同类产品或者与此页产品相搭配的其他产品，给用户提供更多选择机会（如

图5所示）

图5商品详情页原型图

10

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

2.4登录注册页

登录注册页是电商平台的重要入口之一。登录注册页包含了注册功能模块、

登录功能模块、找回密码功能模块、第三方登录模块。

在注册功能模块可以允许用户在平台上创建一个新的账户。注册页需要收

集用户的姓名、电话号码、电子邮箱地址等信息，并设置一个安全的密码来保

护用户的账户安全。登录功能模块允许用户使用注册时的信息来登录账户。找

回密码功能模块：用户可能会忘记自己的密码，因此应该提供找回密码的功能，

让他们能够方便的重新设置密码第三方登录功能：平台可以提供第三方登录功

能（例如微信、微博、QQ等）来让用户更方便地登录账户，并加强账户的安全

性。

将注册/登录/找回密码/第三方登录功能分别排列成不同的区块，以便于用

户快速找到需要的功能。采用不同字号文字：使用不同字号的文字标题和路径，

使用户更容易理解自己正在哪个页面，以及需要进行什么操作。采用这种版式

的优点简单明了，易于使用，并且美观大方。用户也可以快速找到所需要的功

能，从而也能提高用户的满意度和购物体验。（如图6所示）

图6登录注册页原型图

11

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

2.5购物车

购物车是电商平台的重要组成部分之一，它允许用户向购物车中添加多个

商品，并在最终确认购买时一次性结算。购物车页面分为了购物车功能模块和

店内推荐功能模块。

购物车功能模块中包含了商品列表：显示用户已经添加到购物车中的所有

商品信息，包括名称、价格、数量、小计等信息；商品数量修改：消费者可以

在购物车页中修改商品数量，以便更准确地控制购买数量；商品删除：消费者

删除购物车中不需要的商品，以便更好地控制购买流程；优惠券/折扣码：购物

车页面应该允许消费者选择优惠券，以获得更多的折扣或优惠；结算功能：结

算功能允许消费者完成整个购买流程，并支付已选的商品。商品列表展示：购

物车页面上展示用户已经添加到购物车中的商品列表，显示名称、价格、数量、

小计等信息。同时，在底部清晰地说明总计、折扣等信息，能让用户一目了然。

引导用户付款：在购物车页面上设置了结算按钮引导用户完成整个购买流程。

店内推荐模块中采用的横排展示产品的版式，可以为用户推荐相似的产品，

给消费者提供了更多的选择。

12

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

采用以上设计构思的版式的优点是简洁明了、易于使用，并且强调了购物

车中的商品信息，让用户清晰了解购物车中的商品和价格信息，为用户提供更

好的购物体验。（如图7所示）

图7购物车原型图

2.6订单结算页

订单结算页是电商平台的最后一个页面，在该页面用户可以确认自己的订

单信息，并完成支付。将订单结算页分为了确定收货地址功能模块和确认订单

信息模块。在确定收货地址模块中消费者可以选择需要的配送的收货地址，修

改收货地址或删除/增加收货地址等功能。在确认订单信息模块中，展示所有的

13

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

订单信息，包括商品名称、价格、数量、配送地址、小计等依次排列。消费者

如有额外要求也可向店铺留言。此外也设置必不可少的“提交订单”按钮对用

户进行支付流程的提示和引导，以便用户更好地完成整个支付流程。（如图8所

示）

图8订单结算页原型图

2.7个人中心

个人中心是电商平台的重要组成部分之一，它允许用户查看和管理他们的

个人信息、浏览订单、查看账户积分、修改密码等。个人中心页分为了四个模

块：个人信息模块、会员成长经历模块、会员福利模块、会员推荐模块。

在个人信息模块中用户可以清晰地了解如何修改和管理自己的个人信息和

14

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

更方便快捷地让用户查看和管理自己的订单信息。

在会员成长经历模块中采用横排的线条向消费者展示会员成长方式，消费

者可以清晰地知道会员成长规则还可以查询会员成长等级。

在会员福利模块采用了两排三列的排版方式向顾客展示加入会员可获取的

福利，这样的设计有助于提高用户的使用体验和粘着度，从而提升用户的忠诚

度和购买意愿。

在会员推荐模块中向会员用户推荐产品，设置立即购买按钮可引导顾客消

费，提高消费者购物体验度。（如图9所示）

图9个人中心原型图

15

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

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

3.1首页视觉设计与制作

3.1.1设计思路

在电商页面设计中，Banner作为最显眼的展示内容之一，需要吸引用户的

注意力，让用户产生浏览和购买的兴趣。

在这个Banner设计中，采用了与牛奶相关的主打元素，通过这些元素有效

地突出了花花牛奶的新鲜，特点以彰显品牌的特色。营造出牛奶健康的品牌形

象。使用“鲜奶大放送！!乳此优惠！！”“花花牛周年庆”等语句来突出节日

活动卖点。色彩使用粉红色和白色等色调，以营造新鲜、自然的感觉。图形采

用线条，礼炮等元素来营造节日特惠的氛围，画面设计自然且活泼。（如图10

所示）

图10品牌节日活动banner

在这个Banner中强调了花花牛奶的优质品质，采用了牛奶等元素，以及牛

奶流动的样式，以彰显产品的质量和鲜美。画面设计采用了动态效果，让用户

目光始终留在宣传牛奶上。文字使用“新鲜生活点滴营养”、“每一口都在见证

有机牛奶的新鲜”等语句来强调产品的优质特点。“全场9折”突出活动主题。

在色彩上使用蓝色和白色等清新、自然、安心的色调，以凸显花花牛奶的品质

和健康理念。图形上选用了牛奶流动元素，集中突出了花花牛奶的品质和健康

特色。（如图11所示）

16

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

图11品牌爆品促销banner

首页背景采用蓝色作为底色，蓝色非常纯净,通常让人联想到海洋、天空给

人一种沉稳、晴朗的感觉，画面采用白云和奶牛等自然元素突出花花牛奶的品

质。新品上市模块中，用白色形状和虚线搭载产品，加上草地等元素使其简单、

安静。热卖推荐模块中采用奶牛，草地等颜色点缀产品。更多产品模块中使用

钢笔工具描绘出的牛奶元素形状为承载体符合花花牛产品特点，彰显产品特色。

在关于我们和加入我们模块中使用钢笔工具为所展示内容创建打底形状使得文

字与图形间更有层次感。返回底部按钮采用奶瓶形状作为设计元素符合品牌特

点。标题设计突出品牌形象，鲜明易识：引导用户快速了解品牌特点、产品特

征和卖点等。所有的布局设计都明了：用户可以轻松找到需要的内容。符合企

业文化和品牌形象：采用清新、显眼和简单隆重元素，符合花花牛奶品牌宣传

理念，强调产品的健康和品质的特点（如图12所示）

17

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

3.1.2设计效果

18

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

图12首页效果图

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

3.2.1设计思路

在搜索结果页的设计中，在搜索结果页中，使用品牌主色调，并和搜索结

果相结合。使用椭圆工具绘制搜索框和搜索标志，绘制蓝色矩形作为筛选项的

底色包括：分类排序、价格等。筛选内容使用白色打底与筛选项区别开来，最

外围绘制浅蓝色矩形使得画面更具有层次感。

19

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

搜索结果包含产品图片、名称、价格信息等元素。被选择的产品显示为白

色矩形为底的加入购物车和红色矩形为底色的立即购买按钮。产品图片放置直

观美观。这样设计的页面使用户快速找到所需信息，提高用户体验。加深用户

对产品的了解和理解，增加销售机会。通过设计来传达品牌形象，增强品牌认

同感。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

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

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

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

详情内容、右侧热销产品推荐。这里背景色选择淡蓝色和明亮的白色让人联想

到蓝天和一缕白云，是经典搭配，永恒而优雅。淡蓝色给人以明快、安全、静

谧的感觉。整体结构设计都是比较统一，除产品主图和购买信息与中间产品详

20

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

情内容设计不同。以下是介绍这三种产品详情内容的设计思路。

3.3.1产品名称设计思路

产品详情页模块分为上部商品模块左侧导航栏模块、图文详情和右侧推荐

模块。在商品模块中采用左图右文的排版方式，消费者可对产品进行口味数量

的选择，并绘制圆角矩形按钮可引导消费者加入购物车或立即购买。在左侧导

航栏模块中使用白蓝色边框为底色。对商品进行分类，可供消费者选择。图文

详情模块产品主图采用蓝色为底色，使用动态的牛奶效果突出了花花牛奶的品

质和健康特色。抠圆型牛奶的形状作为花花牛牛奶特色卖点吸引消费者眼球，

再添加“清甜奶香口感丝滑”“品质好奶放心喝”强调产品的特色。卖点图使用

剪贴蒙版和矩形结合对图像进行色彩处理。对比图采用明亮的黄色作为底色使

用渐变的金黄色矩形突出本产品相比与其他同类产品的优势所在，绘制金黄色

箭头营造氛围。产品属性图使用白蓝色渐变打底，底部采用动态的牛奶元素彰

显产品的品质，营造出牛奶健康的品牌形象。场景图采用，明亮的淡黄色为底

色，采用高斯模糊给几片飘落的树叶，给人营造一种轻松休闲的感受。场景图

裁剪为圆角矩形为其添加阴影使得更有层次感。温馨提示图展示物流内容，以

及产品退换货要求等。主要是让客户提前了解到购物时候可能产生的问题以及

解决方法，避免因为物流慢产生大量差评。

这样的产品详情页设计有以下优点：视觉效果强。通过页面的设计和图片

的处理，展示商品的优势和特色，吸引用户的注意力。操作便捷。通过页面的

设计，使用户能够方便快捷地选择商品和了解商品信息，以提高交互体验度。

（如图14所示）

3.3.2产品名称设计效果

21

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

22

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

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

23

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

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

3.4.1设计思路

产品模块绘制云朵形状为底衬托店铺主营产品，吸引消费者的眼球，简单

直接。右边用户登录模块采用用户头像、输入框、按钮简单易懂、直观美观的

图形和元素，并绘制矩形框将各区域区分开来用户可输入用户名和密码、验证

码进行登录。下方三个圆型按钮为第三方登录账号，为消费者提供多种选择。

入口清晰。在登录注册页中，用户可以更加方便快速的完成操作，界面简介明

了。通过页面中文字提示、配色和设计，使用户快速了解如何进行注册或登录

操作。提高品牌曝光度。通过界面的设计，增加了品牌曝光度，为品牌进行宣

传。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车分为上下两个模块。上面购物车模块绘制白色半透明圆角矩形与背

景区别开更具层次感。在商品列表中，使用左图右文的搭配来概述产品信息，

简单易懂。色彩上使用蓝色等活力鲜明的色调，增强购物车页面的视觉效果，

24

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

以符合品牌形象和特点。产品图片的选择突出产品特点和品质，同时增加美观

程度，吸引用户的注意力。在设计中绘制简单易懂、直观美观的图形和元素，

如结算、价格、数量、全选等按钮，以使用户完成操作更加快捷可靠。在购物

车中，用户可以方便地查看和管理购物信息，并随时进行添加、修改、删除等

操作。信息清晰。通过界面的设计，用户可以快速清晰地了解购物信息，如价

格、数量、优惠券、地址等。提升品牌形象。通过设计来传达品牌形象，增强

品牌的认知度和信任度。（如图16所示）

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

订单结算页分为确定收货地址模块与确认订单模块，收货地址模块采用浅

25

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

白色为底色与背景色区别开，绘制圆角矩形承载用户的收货地址和信息，具备

可修改增加删除等功能。确认订单信息模块也同样采用浅白色的正方形框为底

色采用左图右文的排版使用简洁明了的文字向消费者展示所购买的商品信息，

价格明细。绘制红色矩形为提交订单按钮，以使用户完成操作更加方便快捷。

这样的订单结算页设计有以下优点：信息全面。在订单结算页中，用户可以清

晰地了解商品详情、价格明细、配送信息等，以便用户更好的完成下单和交易。

操作便捷。通过页面设计，用户可以方便快捷地修改和确认订单信息，并完成

相应的操作。提升品牌形象。通过设计来传达品牌形象，增强品牌的认知度和

信任度。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

26

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

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

3.7.1设计思路

个人中心模块绘制淡紫色长矩形作为左侧导航栏的底色，导航栏可查看我

的订单、我的会