老街口品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

2.2搜索结果页.................................................................................................5

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

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

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

2.6订单结算页.................................................................................................8

2.7个人中心.....................................................................................................9

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产品详情页视觉设计与制作...................................................................14

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

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

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

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

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

参考资料........................................................................................................................23

II

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

老街口品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着时代科技的进步，电商发展越来越迅速，越来越多的品牌都会建立自

己的网店。电商市场走进了稳定发展的阶段。我们熟悉的良品铺子，恰恰，三

只松鼠，百草味这些独立品牌都有着自己在各个平台上的网店，在网页上可以

查找到自己独立网页，品牌形象，产品宣传，我所选的品牌是老街口，成立于

2012年，这个品牌主要是宣传自己的品牌情感，让每个家庭都吃到实惠的老街

口，让每个家庭都可以回到童年的记忆，在这个电商行业发展如此蒸蒸日上的

时代，我们可以有着自己的一家属于自己独立能力购买的品牌网店，在各大平

台上都可以查询到我们的踪迹，如此可在电商行业，在未来的发展绝对会成为

一颗璀璨的星星。

1.2项目需求分析

老街口始创于2012年，主要经营的产品主要有瓜子、花生等坚果类食品

以及麻花、果脯、蜜饯类食品。如今有了12年的企业影响力，随着社会经济的

高速发展，同类品牌越来越多，竞争力的剧增，不少竞争对手已不满足于单纯

的销售或单纯的品牌文化宣传，他们合二为一，纷纷开起了网店，建立了品牌

文化与购买并存的属于自己的独立运营网站，所以根据发展趋势，这个品牌主

要是宣传自己的品牌情感，让每个家庭都吃到实惠的老街口，让每个家庭都可

以回到童年的记忆，如果老街口继续保持原始的销售模式显然是不行的，我们

应该顺应时代发展的潮流，建立起属于自己的独立运营的品牌网店，让老街口

的发展又上一个新高度。

1.3色彩设计

色彩设计灵感来源于老街口品牌产品自身。老街口涉及的多是休闲零食产

品。所以我主体色采用了与瓜子色比较相似的棕色，棕色是很温暖的颜色，属

于暖色调,能让人沉浸其中。我用了2个辅助色分别是宁静的浅蓝色，明媚的

亮黄色。Banner部分采用浅蓝色点缀，吸引顾客眼球。会员卡部分用的亮黄色，

1

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

给人带来希望，让顾客心旷神怡。（如图1所示）

图1标准色

1.4字体规范

设计采用了以下三种主要字体：Adobe黑体、楷体、叶根友毛笔行书2.0，

这几种字体都是我们中国传统字体，叶根友毛笔行书这个字体具有时代感，能

够体现我们这个企业的传统文化，思念家乡情。（如图2所示）

2

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

图2标准字体

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

2.1首页

首先是店铺的logo和宣传标语，可以让客户一眼明白我们表达的情感，然

后是搜索框，此功能可以非常方便的为有需求的顾客提供便利，帮助他们快速

找到所需，然后是店招部分的词条，分门别类，点击相应类别即可跳转至相应

界面，接下去就是最醒目的banner，可以更好的吸引顾客眼球畅销新品爆款等，

然后是店长推荐镇店之宝，奶香花生和焦糖瓜子，然后是我们的新品，老街口

南瓜子、老街口葵瓜子，老街口西瓜子，老街口葡萄干，价格都是非常优惠，

点击价格可以直接购买，顺下去就是品牌故事，我们这个品牌主要成立于2012

年，源于金华瓜子，旁边有商品的包装，主要是图片是儿时购买瓜子的记忆，

保留了儿时的味道和自立袋设计防止倒放更放心，点击价格可以直接购买，最

后便是页尾部分，有着我们的宣传理念、地址和联系电话，可以扫描二维码关

注我们。（如图3所示）

3

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

图3首页原型图

4

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

2.2搜索结果页

此页面尽可能的满足顾客的需求，让顾客在最短的时间内，找到最满意的

产品，搜素主要以透明格子，能更好的查找。搜索产品部分有分详细的类别，

此页面中包括两个模块，搜索产品与产品展示。搜索产品部分有分详细的类别，

例如包装方式，销量，价格等，选择的因素越多，筛选出来的商品更能符合顾

客心意。产品展示部分多为图片展示，图片是最直观的方式，方便顾客一目了

然，展示部分也可以调整商品展示的顺序，可根据销量，价格，口碑等，还有

老板娘推荐的产品，都是老板娘自己喜欢，还可以更具价格的范围内搜索，顾

客预算里合适的产品。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

此页面分为两个板块，其中第一个板块是我们爆款商品的推荐，是一款办

公室休闲小零食，可以选择自己喜欢的口味进行下单，如果有不确定可以加入

购物车，其二就是宝贝详情基本以图片展示为主，介绍了我们的产品真实的原

产地生长环境和我们的严格把控产品的细节，每一件产品都是我们细心呵护，

做到百分之百的挑选颗颗饱满的品控，然后是我们的产品信息，每袋克重500g，

无任何添加防腐剂，以及我们的储存方式，最后再有关快递方面做一下说明，

如遇到快递公司暴力运送快递，可拒收快点包裹和支持7天无理由退货，给顾

5

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

客最高的的保障和权益。（如图5所示）

图5商品详情页原型图

2.4登录注册页

此页面分别为商品图和登录，主要功能模块为输入框，一是用户名输入框，

用户输入自己的用户名，然后是密码框输入密码，不记得密码可以点忘记密码

即可切换到验证码登陆界面，然后还有一键登录功能，通过第三方授权QQ、微

信、微博一键登录，直接快速的登录，更加的便捷。（如图6所示）

6

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

图6登录注册页原型图

2.5购物车

此页面显示满60减10的活动，可以让消费者在加入购物车中看到优惠，

这样可以提高商品的销量，其次有购买数量加减功能，方便一次性多购买，在

商品介绍部分，可以看到全部商品、降价商品、库存紧张商品可以让消费者一

幕了然自己的购物车的情况，列表上方有个全选按钮，此按钮皆可包含购物车

内所有商品，方便一次性勾选。右下方有着商品结算，随手带一件模块，依据

顾客的消费心理设计出了此模块，根据顾客喜好推荐，带上喜欢的商品一起下

单。（如图7所示）

7

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

图7购物车原型图

2.6订单结算页

此页面显示订单结算页，首先输入我们的收货地址，选择配送方式，选择

付款方式，如需要备注内容可以输入备注内容，再者显示满60减10的活动，

可以让消费者在加入购物车中看到优惠，这样可以提高商品的销量，其次有购

买数量加减功能，方便一次性多购买，在商品介绍部分，可以看到全部商品、

降价商品、库存紧张商品可以让消费者一幕了然自己的购物车的情况列表下方

有个全选按钮，此按钮皆可包含购物车内所有商品，方便一次性勾选。（如图

8所示）

8

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

图8订单结算页原型图

2.7个人中心

此模块首先映入眼帘的就是这张会员卡，用真实的会员卡做模型，设计了

这个电子版会员卡其中可以会员积分，增加会员等级，和会员名下有着几张优

惠券，使用会员卡可以享受优惠。会员卡的下面展示的是未付款的订单可以提

示如果需要可以立即下单，左边是我们的一系列服务详细，需要了解什么直接

点击即可直接转连接，到需要的页面，上面是我们自己的个人信息，我们的地

址，绑定手机号，会员积分。（如图10所示）

9

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

首先是店招部分，店招左边是收藏店铺加品牌logo与品牌名不曾忘记家

乡情，右边设置了一个比较简单的搜索框有着热门搜词，以及购物车和店铺两

个按钮，点击可切换到相应页面，然后接下来是8个词条，词条部分根据本店

商品大类做了分类，方便顾客选择然后接下来是banner部分，选的是爆款

banner图，是我们的葵花籽有着价格可以直接点击购买，我们主推的首选第一

回购率，我主要的背景是以棕色为主有着那种小时候的感觉，因为我们这个品

牌理念就是思念家乡情，让人一下子就可以想起小时候的回忆，接下来是我们

的重磅商品推荐和重磅新品推荐，我采用了白色打底，可以突出我们产品的干

净整洁，用了橙色来作为下单按钮按钮，橙色是吸引色让人一目了然，加强消

费者的购买欲望，可以点击购买，再接下来是我们的品牌故事、成立时间、设

计包装，帮助了解公司企业文化，最后便是页尾部分，有着我们的宣传理念、

地址和联系电话，可以扫描二维码关注我们。（如图10所示）

10

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

3.1.2设计效果

11

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

图10首页效果图

12

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

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

这是双十一活动的banner图，我的主要背景是天空的照应，我认为天空是

纯净的就是我们的产品也是安全放心的，更加突出了是我们品牌的红色礼盒包

装，在这次活动中，价格优惠，红色是喜庆的象征，可以将买到的产品送人送

礼，都最合适不过，其中包含了11种不同的坚果零食，只卖99.9元，相当于

每种产品只需要9.99元就可以品尝到我们品牌的美味，而且我们全场有着满

100元减130元，满300元减50元的活动，叠加在一切购买还是比较划算的。

（如图11所示）

3.1.4设计效果

图11品牌节日活动banner

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

第二张海报是爆款海报，首先我选用水墨画背景，可以更加的突出我们的

产品是带着小时候的味道，介绍的是我们爆款是焦糖味瓜子，这款瓜子颗大饱

满，自然清香，和小时候的味道是一模一样的，有着我们的活动价格，旁边的

橙色按钮一目了然可以点击购买。（如图11所示）

3.1.6设计效果

图12品牌爆品促销banner

13

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

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

3.2.1设计思路

此页面尽可能的满足顾客的需求，让顾客在最短的时间内，找到最满意的

产品，搜素主要以透明格子，能更好的查找。搜索产品部分有分详细的类别，

例如包装方式，销量，价格等，选择的因素越多，筛选出来的商品更能符合顾

客心意，产品展示部分多为图片展示，图片是最直观的方式，方便顾客一目了

然，展示部分也可以调整商品展示的顺序，可根据销量，价格，口碑等，还有

老板娘推荐的产品，都是老板娘自己喜欢，这个的背景主要的就是一个怀念小

时候的感觉，还可以更具价格的范围内搜索，顾客预算里合适的产品。（如图

13所示）

3.2.2设计效果

图13搜索结果页效果图

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

商品详情页是整个店铺当中最重要的部分，此页面我主要分为两个个板块，

其中第一个板块是商品的购物页面，可以选择自己喜欢的口味进行下单，如果

有不确定可以加入购物车，其二就是宝贝详情基本以图片展示为主，真实客观

的展示商品的原产地以及检测报告等，再有关快递方面做一下说明，给顾客应

14

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

有的保障。这里背景色选择淡棕色，淡棕色是一种温暖的颜色，也是能够刺激

消费者食欲的颜色。整体结构设计都是比较统一，除产品主图和购买信息与中

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

3.3.1老街口设计思路

产品主图以瓜子实物图为核心，简明阐述了我们瓜子的甄选原料，是选自

北纬43°葵园，日照300jh，大盘株25-28cm，是精英级培育自然生态圈，无

污染无添加，自然环境下生长的，主要展示的是瓜子的匠心工艺和颗颗饱满。

一采摘，二烘焙。完全不用担心有添加剂，是用放大镜都能看得见的品质，是

用时间慢慢发觉瓜子的清香。在休闲时刻，旅行时刻，家庭团聚时都可以享用

葵花籽，一起共度美好时光。然后介绍了我们的瓜子信息，每袋克重500g，无

任何添加剂吃的放心，以及我们的储存方式，最后通过电商行业的迅速发展，

物流的快速发展，和包裹的累计，快递公司可能会暴力对待我们的产品，如客

户收到货不满意，收到破损快递这些情况都是有的，我们保障顾客的权益。所

以页尾处的物流以及售后介绍，可以说是让消费者吃一颗定心丸，也许有些消

费者看见详情页还有些犹豫，要不要下单，但看见我们提供的强有力的售后保

障后，也许就打消了顾虑，我们商品的外包装如有损坏是可以直接拒收，所以

完全不用担心暴力物流，检查商品无误后再签收即可，也支持七天无理由退款。

（如图14所示）

15

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

3.3.2老街口设计效果

16

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

图14老街口详情页效果图

17

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

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

3.4.1设计思路

此页面我采用的是棕色，因为棕色是一种安定的感觉，可以让顾客置身其

中，左右结构分别为商品图和登录，左边有着我们最主要的商品图起到宣传作

用，有着小时候的味道，右边是最主要功能模块为输入框，一是用户名输入框，

用户输入自己的用户名，然后是密码框输入密码，不记得密码可以点忘记密码

即可切换到验证码登陆界面，然后还有一键登录功能，通过第三方授权QQ、微

信、微博一键登录，直接快速的登录，更加的便捷。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

此页面首先显示的是满60减10的活动，可以让消费者在加入购物车中看

到优惠，这样可以提高商品的销量，其次有购买数量加减功能，方便一次性多

购买，在商品介绍部分，可以看到全部商品、降价商品、库存紧张商品可以让

消费者一幕了然自己的购物车的情况，列表上方有个全选按钮，此按钮皆可包

含购物车内所有商品，方便一次性勾选。右下方有着商品结算，结算主要采用

棕色点缀，给人一种舒适的感觉，如果有喜欢的产品，可以随手带一件模块，

18

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

依据顾客的消费心理设计出了此模块，根据顾客喜好推荐，带上喜欢的商品一

起下单。（如图16所示）

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

此页面显示订单结算页，首先输入我们的收货地址，我采用了棕色加深，

可以更好的清楚看到我们的收获信息，选择配送方式，选择付款方式，如需要

备注内容可以输入备注内容，再者显示满60减10的活动，可以让消费者在加

入购物车中看到优惠，这样可以提高商品的销量，其次有购买数量加减功能，

方便一次性多购买，在商品介绍部分，可以看到全部商品、降价商品、库存紧

张商品可以让消费者一幕了然自己的购物车的情况列表下方有个全选按钮，此

按钮皆可包含购物车内所有商品，方便一次性勾选，点击去结算就好。（如图

17所示）

19

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

3.6.2设计效果

图17订单结算页效果图

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

3.7.1设计思路

此页面首先映入眼帘的就是这张会员卡，是采用黄色作为背景，黄色可以

吸引眼球，用真实的会员卡做模型，设计了这个电子版会员卡其中可以会员积

分，增加会员等级，和会员名下有着几张优惠券，使用会员卡即可享受会员权

益，来吸引顾客办理会员卡。会员卡的下面展示的是未付款的订单，提示如果

需要可以立即下单，左边是我们的一系列服务详细，需要了解什么直接点击即

可直接转连接，到需要的页面，上面是我们自己的个人信息，我们的地址，绑

定手机号，会员积分。（如图18所示）

20

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

3.7.2设计效果