轩妈品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

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

2.4登录注册页.............................................8

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

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

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

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

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

3.1.1设计思路..........................................12

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

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

3.2.1设计思路..........................................16

3.2.2设计效果...........................................16

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

3.3.1设计思路..........................................17

3.3.2设计效果...........................................18

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

3.4.1设计思路..........................................20

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

I

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

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

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

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

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

3.6.1设计思路..........................................22

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

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

3.7.1设计思路..........................................23

3.7.2设计效果...........................................24

4总结........................................................25

II

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

轩妈品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

当前，国家大力发展基础建设，交通越来越便利，物流业也得到快速发

展，次日达、隔日达方便快捷的物流让更多的消费者愿意使用网购。在这种发

展趋势下，电商行业的竞争也越来越激烈，怎样吸引更多的客户进入自己的网

店，使得各网店经营者越来越重视视觉营销设计。例如：像“良品铺子”、

“百草味”等一些知名品牌，他们都会设计自己的独立网店，一个好的视觉设

计可以直接吸引消费者的关注，让消费者产生点击的兴趣，从而调动消费者购

买的热情。因此，设计建立一个属于自己品牌的形象网店是十分必要的。

而“轩妈”作为一家生产蛋黄酥多年的品牌，他的品质和品牌信誉度都是

非常好的。但是他缺少一个能够吸引消费者的品牌形象网店，想要在电商行业

里发展的更好，视觉设计是不可或缺的。

1.2项目需求分析

随着物流的发展，电商平台之间的竞争越来越激烈，导致同品类产品的竞

争也越来越激烈。如果想在这么多的同品类产品店铺里面脱颖而出，视觉营销

越来越重要。而在如此激烈的竞争下，想要视觉营销占据有利地位，我们就要

分析我们视觉设计的目的是什么，我们的设计最终都是给我们消费者看的，想

要吸引消费者产生购买欲望，那么首先就是要有视觉冲击，为了将产品、品牌

与企业文化全方位的展现给消费者，我们需要将文字、图片、功能模块有机融

合。特别是在网店页面设计时不能太过于花哨，确保页面的舒适性的同时要能

准确的传达有价值的信息。同时我们可以根据了解消费者的需求和消费习惯，

制定一些有特色的功能模块。在配图、颜色、布局、文字等各个环节上应保持

统一性，文字数量与大小要适中、图片明确清晰、图文排版简化、突出关键信

息。以消费者为中心，从细节着手。

1.3色彩设计

颜色设计上面使用黄色、红色为主，黄色代表阳光、温暖，让消费者一进

1

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

我们的店就能感受到温馨舒适家的感觉；同时黄色也是一种能刺激消费者食欲

的颜色。红色是一种鲜艳的颜色，代表热情、积极乐观，能够吸引消费者的眼

球，给消费者带来正面的积极向上的心情。标准色使用（如图1所示）

图1标准色

1.4字体规范

标准字体使用的是黑体、楷体、宋体，黑体的特点是字体非常的突出、字

体方正、粗细一致，同时黑体字具有百搭性，亲和感，相比其他字体来说，它

非常地显眼，所以我把它运用在标题和一些重要文字上。楷体的特点是规矩整

齐，给人带来赏心悦目的感觉；宋体的特点是自行方正、整齐均匀、有较强的

笔画规律性，能够使人在阅读时有一种舒适醒目的感觉；所以所有页面大部分

文字使用的都是这两种字体。标准字体使用（如图2所示）

2

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

图2标准字体

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

2.1首页

首页我们分为四个模块：第一个模块是轩妈工厂主要展示轩妈对产品品质

的把控，让消费者买得放心吃的安心。第二个模块是热销产品展示可以让消费

者直观的看到我们的产品并且可以直接点击购买。第三个模块是产品系列模

块，消费者可以根据自己的需求选择自己想要的系列。第四个模块是关于我

们，把我们的品牌形象文化传递给消费者，让消费者对我们品牌产生信赖感。

版式方面，我们采用的是中心布局，这样的好处是简洁明了、突出重点，消费

者可以直观明了的看到我们的产品信息。（如图3所示）

3

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

4

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

图3首页原型图

5

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

2.2搜索结果页

搜索结果页分为三个模块：第一个模块是搜索框，消费者可以直接搜索店

铺的任何产品。第二个模块是商品导航信息框，消费者可以根据自己喜好点击

直接跳转到那种商品。第三个模块是商品展示图，一排三个商品图，可以把图

片调大一点，消费者可以更直观的看到我们的产品。版式：水平分布，这样的

好处是页面整洁，让消费者看的舒适。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页我们分为四个模块：第一个模块是我们的商品信息，消费者可

以点击购买或者加入购物车。第二个模块是热销产品展示，主要展示销量比较

6

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

好的几款商品。第三个模块是所有产品导航条，消费者可以点击进入自己喜欢

的产品系列。第四个模块就是我们的商品详细图了，这个也是我们整个页面最

重要的一部分，我们可以在上面添加产品效果图、产品信息表、产品细节展示

和购买须知等，同时在进行排版设计，让消费者看了留下深刻印象。（如图5

所示）

图5商品详情页原型图

7

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

2.4登录注册页

登录注册页分为三个模块：第一个模块是我们的产品图，我们要利用所有

可以利用的空间去展示我们的商品，第二个模块是登录框，消费者输入账号密

码和验证码即可登录，第三个模块是我们的第三方登录，可以通过QQ、微信和

微博登录。版式方面：我们采用左右对齐的方式，左边放我们的商品图，右边

放我们的登录框，这样设计比较符合消费者的操作习惯。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车我们分为三个模块：第一个模块是我们的商品信息条，消费者可以

直观的看见商品的数量和价格，第二个模块是结算条，当消费者选择好商品，

上面就可以显示总金额，第三个模块是猜你喜欢，这个模块我们可以放我们的

产品，合理的利用空间。版式方面：中心分布，这样的好处是直观简洁。（如

图7所示）

8

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

图7购物车原型图

2.6订单结算页

订单结算页分为四个模块;第一个模块是收货地址，消费者可以选择收货

地址也可以新增收货地址，第二个模块是商品信息，可以看到选择的商品数量

和金额，第三个模块是支付方式条，消费者可以自由选择付费方式，第四个模

块是发货信息图，消费者可以看到自己是否用了优惠劵，花了多少钱同时还可

以核对收货信息。版式方面：采用左对齐的方式，这样的好处是整个页面显得

更加工整，看着更加舒服。（如图8所示）

9

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

图8订单结算页原型图

2.7个人中心

个人中心分为四个模块：第一个模块是我们的会员卡，会员卡上面有会员

等级、积分、金币、卡劵，提升会员消费体验。第二个模块是优惠卷，时不时

发个优惠券，可以让消费者感受到会员带来的特殊优惠，第三个模块是会员权

益，这个模块我们可以把会员可以带来的权益告诉消费者，提升消费者的兴

趣，第四个模块是轩妈推荐，推荐我们的产品，不放过任何一个可以利用的空

10

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

间。（如图9所示）

图9个人中心原型图

11

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

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

3.1首页视觉设计与制作

3.1.1设计思路

品牌节日banner设计上，首先背景我们采用的是红色为主，在加上灯笼

作为点缀，突出红红火火喜庆的感觉。然后排版方面，我采用的是左边文字右

边图片，然后图片和文字尽量放在整个图片的中心位置的设计，这样设计的好

处是突出重点、整体整洁、美观且有吸引力。文字设计上面，我们采用中心对

齐、大小搭配，合理的排版并且设有引导购买按钮采用蓝底白字，大方美观。

右边的商品图片大小符合正常视觉，产品具有吸引力。banner整体色彩协调，

搭配合理，整体视觉效果好。（如图10所示）

图10品牌节日活动banner

品牌爆品促销banner设计上，背景色彩上面我们采用黄色为主蓝色作为

点缀，黄色一种阳光温暖的颜色，也是一种能购刺激消费者食欲的颜色，蓝色

给人一种大方美观的感觉，两者结合整个画面协调美观。然后整体排版上面我

们依然采用左边文字右边图片的设计，因为这样的设计简洁大方，画面感比较

好。文字上面采用中心对齐、大小搭配，字体颜色采用红色，因为红色会更加

显眼，主标题字体采用琥珀字体每个字用分隔符隔开，这个小设计让文字没那

么单调，副标题采用白底红字，协调好看，最后还设有价格和引导购买按钮，

红底白字显眼好看。（如图11所示）

12

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

图11品牌爆品促销banner

首页作为整个店铺的牌面，它的设计我一共分为五个部分：banner、轩妈

工厂、热销产品、产品系列、关于我们。排版方面我们采用中心分布，把我们

想要展示的信息放在中心位置，突出重点，聚焦消费者的目光，将产品、品牌

与文化理念全方位展现给消费者，直观的视觉冲击，让消费者产生相关联想，

以此来调动消费者的消费需求与冲动。banner作为第一个进入消费者眼球画

面，我把它的颜色和设计做的能更加吸引消费者，给消费者留下一个比较好的

第一印象。后面是我们的轩妈工厂，我采用图片和文字的方式展示，通过对图

片和文字的合理排版，向消费者传递我们对品质的严格把控，让消费者知道我

们不仅是在卖我们的产品，更是在用心做好我们的产品。下面就是我们的热销

产品，热销产品的每一个商品都有一个背景框，同样以黄色和蓝色结合，文字

的话我会更加突出它的价格，并且设有引导购买按钮，方便消费者购买，布局

的话上下分布，更加有层次感。其次是我们的产品系列，每一个产品系列都有

一个花形状的国风线框，更加美观，增加设计感。最后就是关于我们，这个部

门同样采用的是图片和文字的结合，左边图片右边文字，并且我也给它添加了

一个背景，让它更加醒目，这个部分主要是要展示我们的品牌文化理念，突出

品牌特色，以此深化消费者产品的良好印象。（如图12所示）

13

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

3.1.2设计效果

14

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

图12首页效果图

15

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

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

3.2.1设计思路

搜索结果页我选用的背景是淡黄色，淡黄色是一种阳光温暖的颜色，同时

淡黄色也是能够起到刺激消费者食欲的颜色。然后整体布局上面，我设计了三

个部分：搜索框、商品导航框、产品展示信息。整个设计的版面规整而不单

调，把我们的产品特点与优势完美的展现给消费者，同时每个商品下面都有购

买按钮，方便消费者购买。同时商品导航框我也精心做了四个大板块，每个板

块又细分出五个种类，消费者还可以再根据自己的口味选择不同的馅。如果消

费者不想选也可以在我们上方的搜索框直接搜索。整个设计比较简洁方便，方

便消费者使用。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

16

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

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

3.3.1设计思路

商品详情页作为消费者选择购买的关键页面，我通过对比多家卖的好的同

行，研究他们的商品详情页，取长补短，再加上自己的一些设计，完成了商品

详情页的制作。商品详情页一共分为四个部分：产品主图及购买信息、右侧热

销产品推荐、左侧导航条、中间产品详情内容。首先背景颜色，我依然选择的

是淡黄色，和其他页面做到统一，然后左侧导航条和右侧热销产品推荐我设计

一个国风的线框，颜色使用的是深红色，给整体页面增加了一些活力与设计

感。中间的产品详情内容我做了四个部分：产品主图、产品信息、产品细节和

买家须知。产品主图主要是突出产品加上一些文字设计，背景选择黄色和淡黄

色结合与整体页面协调，产品信息采用左图片右文字的排版，下面还设计了一

张下午茶追剧小卡片，设计这张卡片的作用是吸引消费者与消费者达到共鸣，

激发消费者的需求和购买欲望。产品细节主要讲述我们的用料，采用的也是图

片和文字的展示，文字的话我采用的是竖排文字，更具有特色，和图片进行合

理的排版，画面比较美观且高档。最后是我们的卖家须知，这个也是必须要有

的，上面关于价格、发货、运费、售后等问题都是顾客比较在意的东西。（如

图14所示）

17

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

3.3.2设计效果

18

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

图14详情页效果图

19

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

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

3.4.1设计思路

登录注册页的设计我就尽量简洁突出，大胆的留白，本来在消费者的心中

登录注册就是一个很麻烦的过程，而简洁和大量留白就会让消费者感觉“原来

也就这几个步骤”，能大大提高消费者的用户体验。同时在这个的前提下我在

页面的左侧添加了轩妈的产品图，因为我们电商的目的就是多推广，多销售我

们的产品，但是图片的话要设计的尽量美观，不能让消费者产生厌恶的心情。

整体页面的话，背景同样采用淡黄色，并添加一些小彩带作为点缀，让整个画

面更加生动，右侧的登陆框尽量保持简洁，消费者输入账号、密码、验证码就

可以登录，并且还可以选择第三方登录。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页面的设计我分为三个部分：商品信息条、结算按钮、猜你喜欢。

20

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

商品信息条设计了可以让消费者全选或者单选我们的商品，并且后方也可以删

除或者收藏我们的商品，尽量提升消费者的用户体验。结算按钮，可以多个商

品一起下单结算，优化体验。猜你喜欢这个部分，主要是为了更多的向消费者

展示我们的商品，如果有喜欢的商品消费者也可以直接点击下方的加入购买车

按钮添加到购物车，十分方便。（如图16所示）

3.5.2设计效果

图16购物车效果图

21

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

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

3.6.1设计思路

订单结算页作为购买商品的最后步骤，所以这个页面我们要做的符合消费

者的需求并且不能太复杂。所以订单结算页可分为五个部分：收货地址、商品

信息条、支付方式、发票信息、支付按钮。首先是我们的收货地址，消费者可

以选择收货地址或者添加新的收货地址。商品信息条消费者可以选择或者取消

选择商品。支付方式我设计了多种支付方式按钮，方便消费者选择，提升消费

者的购物体验。发票信息也是不能少的。最后是支付按钮，我设计的是红底白

字，这样的好处是显眼好看，消费者点击支付后，可以退出页面或者返回购物

车，非常的便捷。如图17所示）

3.6.2设计效果

图17订单结算页效果图

22

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

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

3.7.1设计思路

个人中心主要是为了让消费者体验到会员带来的特殊感和优惠，进而刺激

他们的消费欲望。所以个人中心设计有四个部分：会员卡、优惠券、轩妈会员

权益、轩妈推荐。首先是会员卡，会员卡是身份的象征，所以在会员卡上面消

费者可以看到自己的会员等级、会员加速、积分、金币、卡券还有每日打卡，

尽量让消费者体验到会员带来的乐趣。优惠券我们可以设计每月几号为我们的

会员日，提升消费者的活跃度。轩妈会员权益，这个部分也是重要的一部分，

只有消费者看到了会员能给他带来的好处，他才会选择去消费，这个部分的设

计我采用的是图文结合的方式，并且设有使用按钮，简洁好看。最后是轩妈推

荐，这个部分设计主要还是想让消费者更多的看到我们的产品，引起他的购买

欲望。（如图18所示）

23

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

3.7.2设计效果

图18个人中心效果图

24