嘉顿品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1.2设计效果............................................................................................12

3.1.3品牌节日活动Banner设计思路......................................................13

3.1.4设计效果............................................................................................14

3.1.5品牌爆品促销Banner设计思路......................................................14

3.1.6设计效果............................................................................................14

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

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

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

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

3.3.1嘉顿威化饼干设计思路....................................................................15

I

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

3.3.2嘉顿威化饼干设计效果....................................................................16

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

3.4.1设计思路............................................................................................18

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

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总结.........................................................................................................................21

参考资料........................................................................................................................22

II

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

嘉顿品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

电子商务行业迅猛发展，网店的视觉设计对于吸引顾客，提升品牌形象和

促进销售起着至关重要的作用。现如今不仅是网上的电商品牌在各大平台开拓

自己的网店，线下的很多实体门店都会开通自己的独立网店了。嘉顿是知名的

国产品牌食品制造公司，专门生产和销售各种食品产品，包括面包、饼干、蛋

糕、糖果等。该品牌虽然有自己的网店,但却是在平台上建立的，有基本的各项

功能却没有专门的设计是比较单调的，本次方案专门针对该品牌分析需求，研

究策略设计出独立网店的视觉效果图。

1.2项目需求分析

随着时代的发展和行业竞争的加剧，网店页面的设计需要与时俱进，以更

好地满足消费者的需求和期望。嘉顿这个品牌是一个老品牌虽然有自己的平台

网店，但是在页面设计方面并没有很完善，很多功能都会比较简单。所以因此

需要重新设计网店页面，我希望能够通过重新设计独立网店视觉来提升品牌形

象，突出企业内涵，展示产品优势，并与竞争对手区分开来。重新设计的网店

页面将更加注重用户体验，提供简洁明了的导航和易于操作的购买流程，从而

提高消费者的购买转化率。同时，通过精心设计的页面布局和视觉元素，更好

地传达企业的品牌价值和产品特点，增加消费者对品牌的认知和信任。

此外，我将深入了解消费者的需求和行为，根据消费者的反馈和数据分析，

优化网店页面的内容和功能，提供个性化的推荐和服务，以提高消费者的满意

度和忠诚度。与竞争对手相比，重新设计的网店页面将具备更独特的品牌风格

和更强的市场竞争力，吸引更多潜在客户，为企业带来更大的商业价值。

1.3色彩设计

嘉顿主营食品类目的产品，目标群体是多年龄段的。主色调我会采用温和、

优雅的米色它给人舒适、自然的感觉。搭配辅助色橙色又会给人亮眼，吸睛的

效果。Logo采用的是中国红，在两种色彩中不会显得突兀但是又具有醒目的效

1

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

果，三种颜色搭配对比强烈且协调。在其他的设计区域中我采用了大面积的黄

色，作为橙色的相邻色会更加融合背景。字体颜色则是用的灰色也是为了更加

柔和自然。这是一个充满活力和热情的色彩组合！米色为整体增添了温暖和柔

和的感觉，如同温暖的阳光洒在大地上。橙色代表着活力和热情，为组合带来

了鲜明的个性和活力。红色是一种充满力量和激情的颜色，它能吸引注意力并

传达出强烈的情感。黄色则散发着明亮和欢快的气息，给人带来积极向上的感

觉。这四种颜色的组合既相互衬托，又相互辉映，形成了一个富有层次感和视

觉冲击力的搭配。这样的色彩组合能吸引人们的目光，传达出积极向上的信息。

让米色、橙色、红色和黄色共同创造出一个引人注目的、充满生机的世界！（如

图1所示）

图1标准色

2

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

1.4字体规范

黑体为主，微软雅黑为辅：在设计中以黑体作为主要字体，用于标题、重

要信息等，突出强调作用。微软雅黑则用于正文或辅助信息，保证阅读的舒适

性。我将混合使用：根据设计的需求，将黑体和微软雅黑灵活使用，在同一段

落中交替使用，或在特定部分使用其中一种字体进行强调。响应式设计：考虑

在不同屏幕尺寸或设备上，根据可读性和布局需要，灵活了调整黑体和微软雅

黑的使用方式。字体设计保证了完整性和统一性阅读更为舒适。（如图2所示）

图2标准字体

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

2.1首页

首页的设计思路主要是店招，导航栏，轮播图，品牌故事，产品展示，售

后保障，页尾等几个模块为布局来进行设计。设计排版是从上而下，要体现出

条理性，还要有一定的逻辑，还要体现出品牌形象，给人留下印象。从中心的

3

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

第一个模块海报就是首先给顾客第一印象，让他知道我们最近有哪些活动，哪

个产品卖得好。到下面的品牌介绍，让他对我们有一个初步的了解。然后和他

拉近关系，给他优惠券。有了优惠券，就推销产品，让他看看我们最近其他顾

客喜欢购买的产品。如果不喜欢的话，可以自行选择有什么感兴趣的产品类。

如果是第一次访问的顾客不了解我们品牌的话，我们也有完善的售后服务，可

以放心购买。初步的构思就是需要加上各种各样的样式来做出层次感，空间感，

有设计感，通过不断地做加减法不断地排版来使这些搭配更加适合阅读，赏心

悦目。从上到下的排版设计是符合阅读习惯的设计这也是最常见的方式。整张

图的模块分布从上到下就是店招，导航栏、海报、品牌介绍、优惠券、产品分

类、售后介绍和页尾。（如图3所示）

4

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

图3首页原型图

5

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

2.2搜索结果页

搜索结果页面显示效果会相对简约，对于使用搜索功能的用户我会减去一

些不必要的信息而是把重点放在用户关注的商品上面。搜索出来的商品会处于

画面的正中心，以用户需求为中心设计理念。如果用户想要更精准的搜索我还

设计了更细致的分类部分，例如用户想要该商品卖的最好的或者我们最新上架

和各个价位段的该类商品。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

详情页放的模块会比较多但是主要还是给顾客介绍这款感兴趣的商品，通

过这个页面来促销，让他产生购买的想法，这个页面很长也很适合做推销，所

以整个页面的设计我还是围绕着营销来展开。最上面的部分是正常的商品图片

和规格选择可以进行数量，加购物车选择也可以直接购买。往下左边有一个小

6

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

的商品分类选择可以方便直接跳转其它感兴趣的品类，右边则是一个商品推荐。

中间就是常规的商品信息介绍，还可以选择查看商品评价。再往下就是这款产

品的自定义区用来介绍这款产品。最下面的部分则是有售后模块可以打消消费

者的疑虑。（如图5所示）

图5商品详情页原型图

7

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

2.4登录注册页

登录注册页主要分为左右两个部分，当消费者已经有了成为我们用户的想

法，我认为只需要给他提供他想要的。所以整个注册页面我只设计了登录注册

的模块如果他已经是我们的用户只需要输入账号密码即可登录，如果需要注册

则点击忘记密码或者无账号即可。（如图6所示）

图6登录注册页原型图

2.5购物车

当用户进入购物车页面说明应该已经挑选好了自己需要的商品，中心位置

就是已经加入购物车的商品，如果突然发现自己某样商品不想购买了的话也可

以进行删除操作，同样也可以只选择自己最终对比后想要购买的商品，或者是

直接一键全部选择购买。左边部分也是方便用户可以再次跳转到其他的页面。

下面则是有我们的微信公众号二维码还有我做了一点推销，有一个推荐商品模

块。最右边还有一个小的跳转页面的设计。（如图7所示）

8

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

图7购物车原型图

2.6订单结算页

结算页面就会比较固定了，需要的模块就是那几个方面，我的设计思路从

上到下依次是用户的收获地址这个是重中之重，然后主要部分则是要显示用户

选购的商品，这是两个主体的部分。设计中心就是围绕着怎样的页面更能够让

顾客的操作和点击会更加的方便，不会产生不适的感觉。首先是用户的收货地

址可以设置多个，同时也可以在这个页面自己选择当前地址。左下角和右下角

则设置了按钮可以增加地址或者管理删除不需要的地址。中心则是需要结算的

商品信息。我们可以开发票也可以添加备注。最下面可以看到自己购买了几件

商品优惠了多少钱送到哪个地址还有多种支付方式如果还需要管理商品则可以

返回购物车页面。（如图8所示）

9

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

图8订单结算页原型图

2.7个人中心

个人中心页的设计思路我觉得其实还是营销，所以整个页面的设计我会更

偏向于给用户一种仪式感，让他自己有一种被我们重视，是我们会员用户的感

觉。所以我整个页面的设计模块重点我会放在会员卡和会员体系的设计上面，

围绕这两点来进行排版制作。从上到下可以看到自己的账号，拥有的积分，还

有手机号码这些信息资料都可以修改如果想注销账号也是可以的。左边部分也

是信息栏和工具栏。中间是一张大大的会员卡，右下角有充值中心和充值记录

按钮。下面则是会员成长体系模块，同时提示了要怎么样才能提升会员等级。

（如图10所示）

10

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

首页是一个品牌网店的门面，当顾客访问我们店铺时第一时间看到的就是

我们的这个模块，所以必须在很短的时间内吸引到顾客，给人的第一印象就一

定要有足够的视觉冲击力。所以整个页面加上了橙色黄色等颜色的幻彩效果还

有朵朵的白云，渐变效果等等的设计来使页面显得更加的美观和优雅。因为我

们售卖的品类是食品零食类所以我选择的主色是比较清醒的米白色。而首页的

海报则是顾客最可能第一时间关注到的东西所以我设计的是高饱和的亮眼的橙

色。下面紧挨着的模块则是我们的品牌介绍，主要介绍了这个品牌的历史和实

力，这个区域我没有设计的很大主要是起到一个点缀，锦上添花的作用。再滑

11

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

到下面是重点吸引顾客的优惠券模块，主要作用就是引起消费者的购物心理。

即使他们不用也可能会顺手点一下领取，这就为后面的推荐模块做了铺垫，我

们的商品单价会比较便宜，可能他们在购物的过程中发现可以用这些券，达到

销售的目的。如果是带有购买目的的消费者来到我们店铺，没有在上面的店招

部分或者搜索栏搜索想要的商品，也可以在我们首页的最下面的一个产品分类

中找到我们店铺有的商品的各大分类。（如图10所示）

3.1.2设计效果

12

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

图10首页效果图

3.1.3品牌节日活动Banner设计思路

活动海报设计主题我选择了近期的情人节，整张图片的会有一些可爱的小

设计。比如小花朵，小爱心，棉花糖一样的云朵，主要就是塑造一种甜蜜的氛

围。包括粉色的主色调也是为了契合主题。排版方面是左右分开的两个主体，

13

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

左边是营销按钮右边就是商品，两边相互衬托。广告词优惠方式等都是引起顾

客的购买欲望。（如图11所示）

3.1.4设计效果

图11品牌节日活动banner

3.1.5品牌爆品促销Banner设计思路

爆品促销重点就是产品所以我选择中心构图方式围绕产品来进行设计，在

中心位置搭建一个平台来衬托达到醒目的效果，两旁飘出优惠券营造促销的氛

围。再加上“抢购”，“限时”等营造紧张的火爆氛围，设置跳转按钮方便用户

查看详情。（如图11所示）

3.1.6设计效果

图12品牌爆品促销banner

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

3.2.1设计思路

搜索页的设计的思路主要是以展示这个关键词相关的商品为主，上面的搜

14

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

索属性，精准搜索模块我设计了一个矩形框住，作为一个独立的模块，下面的

商品展示部分使用蒙版技巧排列了部分商品，还需查看更多内容即可往下滑动

3.2.2设计效果

图13搜索结果页效果图

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

3.3.1嘉顿威化饼干设计思路

每一个详情页都是对这款商品的专属定制，对于威化饼干这款产品因为主

图的背景色是淡黄色的，所以我会考虑其它模块的使用颜色根据这个颜色来设

计，在详情页的自定义区域中，收最上面的部分我设计了白色的“牛奶”的图

形创意，又在右上角加了一朵香草的小设计，下面的介绍区域有各个规格的信

息展示，每种口味的字体颜色都是人们的印象色彩比如说草莓的粉红色，柠檬

的绿色等等。再往下面的介绍区域就是常规的图片加文字的结合，我会使用蒙

版技巧，还有交叉版本这些方法来使介绍变得更加灵动（如图14所示）

15

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

3.3.2嘉顿威化饼干设计效果

16

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

图14嘉顿威化饼干详情页效果图

17

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

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

3.4.1设计思路

登录注册页就只有一个单页面，底色我换成了棕色底色和中间图片搭配，

并且背景底色中还加上了和威化饼干一样的网格底纹。中间的主体部分左边是

一张装饰图片，主题就是顾客进店铺购买面包，符合我们店铺销售的产品风格。

右边还是米色主体色，这样设计的好处就是简洁明了。（如图15所示）

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