白沙溪品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

2.1首页..............................................................................................................2

2.2搜索结果页..................................................................................................4

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

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

2.5购物车..........................................................................................................6

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

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

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

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

3.1.1设计思路.............................................................................................10

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

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

3.2.1设计思路.............................................................................................13

3.2.2设计效果.............................................................................................14

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

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

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

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

3.4.1设计思路.............................................................................................16

3.4.2设计效果.............................................................................................17

I

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

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

3.5.1设计思路.............................................................................................17

3.5.2设计效果.............................................................................................18

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

3.6.1设计思路.............................................................................................19

3.6.2设计效果.............................................................................................19

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

3.7.1设计思路.............................................................................................20

3.7.2设计效果.............................................................................................20

4总结..........................................................................................................................21

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

II

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

白沙溪品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着互联网的发展，网上购物已经成为我们日常生活中一种新的购物模式。

在日常生活中，消费者越来越接受网购作为一种购物方式，网购市场不断发展，

购物网站也在增加，竞争也越来越激烈，在网上开店的商家数量也在增加。如

何将你的网店从摊位的状态升级为精品店的高端店态，必须提升店铺的形象，

只有让店铺的形象深入人心，顾客在购物时就会被吸引，产生购买欲望，从而

实现更大的销量。因此，网店的视觉设计作为提升网店形象的重要组成部分变

得越来越重要。

白沙溪品牌作为一个传承数十年的老品牌拥有自己的官网，官网功能齐全，

可以给消费者提供很好的品牌介绍服务，同样也拥有自己独立的天猫京东旗舰

店。

1.2项目需求分析

我选择白沙溪作为网店视觉方案设计品牌，白沙溪茶厂创立于1939年，至

今有83年历史，并且白沙溪黑茶进入了“2010年上海世博会”联合国馆，被誉

为“一个地球、一个联合国、一杯中国茶”，还创立了湖南黑茶的国家标准。在

网店视觉设计上，我将品牌背景与企业文化相结合，让消费者感受到白沙溪品

牌产品服务的高质量。在排版方面，我使用简单而大气的布局，在颜色上，我

选择了低调复古的白灰色搭配咖啡色，可以更好地提升品牌形象。经过这些年

的医学专家实验，发现黑茶有很好的脱脂、降三高、促进消化的功能，所以我

在网店广告的设计中结合这些功能，更好地稳定消费群体，也收获更多的潜在

客户，提高品牌知名度。

1.3色彩设计

通过对白沙溪品牌和产品定位的分析，最终选择了白灰色为主色调，白灰

色代表沉稳、优雅、谦逊，能更好地推广品牌理念;同时，使用咖啡色作为辅助

色可以与主色调形成对比，“一暗一亮”给人强烈的视觉冲击感，可以吸引消

1

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

费者的注意力，更好地记住店铺。（如图1所示）

图1标准色

1.4字体规范

在字体上我选择了adobe黑体std和黑体，这两种字体都笔画粗壮带有纤

细笔触，给人一种严肃的感觉可以让消费者更加直观的了解店铺信息和产品信

息。（如图2所示）

图2标准字体

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

2.1首页

我的首页版面分为：店招、导航栏、二级导航、banner、店长推荐、热销

爆款、品牌故事、底部导航八个区块。整个版面简洁明了、功能齐全。

店招中白沙溪的logo有1939的标志，标志着其创建时间更体现出其品牌

悠久的历史。其次广告语“黑茶之源，遍留九州”不但表达了对品牌的自信也

是白沙溪传承古典的决心。右边是购物车、个人中心图标和搜索栏可以让消费

者更快的买到自己心仪的产品。

接下来是店长推荐板块，我采用的是左右交叉布局，使整体布局不至于太

死板。然后就是热销爆款板块，我把四款爆款产品放一块形成视觉冲击，吸引

消费者眼球，更能刺激消费者的购买欲望。接着是品牌故事板块，可以使消费

者更了解品牌的由来和初心，更能说服消费者购买。最下面的底部导航我还设

置了一个可以让消费者快速返回顶部的按钮，底部导航栏可以方便消费者遇到

2

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

购物困难时进行咨询（如图3所示）

图3首页原型图

3

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

2.2搜索结果页

我的搜索结果页分为：店招、导航栏、搜索区域、搜索结果区域、底部导

航五个区块，搜索区域的关键词可以让消费者更快的购买自己需要的“宝贝”

节约购物时间，提高消费者购物体验。（如图4所示）

图4搜索结果页原型图

4

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

2.3商品详情页

我的商品详情页分为：店招、导航栏、产品介绍区域、产品信息、产品卖

点、产品特点、底部导航七个区块。详情页的作用是可以让客户更好的了解产

品的特点，更好的展示产品的价值促进客户下单，也可以通过产品参数了解看

是否适合自己（如图5所示）

图5商品详情页原型图

5

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

2.4登录注册页

为了更加方便消费者操作我把登录和注册放在一个页面，这样就不用跳转

其他页面操作减少视觉疲劳，同时我也加入了一个广告，可以使整个页面没有

那么枯燥无味更有色彩，还可以强调品牌形象以及推销产品。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车原型图分为：店招，导航栏，购物车，猜你喜欢，底部导航五个区

块。同时我还在购物车导航制作了全选、商品图片、规格、单价、数量、总价、

操作的标志，这样客户可以通过勾选来选择购买心仪的产品，同时也可以增减

6

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

购买产品数量，如果不想要了也可以选择移除购物车。在购物车的下方我还设

置了猜你喜欢，可以推销热销产品，同时促进客户二次购买，整体页面布局清

晰整洁（如图7所示）

图7购物车原型图

7

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

2.6订单结算页

通过了购物车结算我们就进入了订单页，订单页包括店招、导航栏、收货

地址、商品信息、底部导航五个区块。我把运行费、运输方式、优惠、发票放

在一块可以让消费者一目了然更快的确认商品信息，从而快速支付购买。（如图

8所示）

图8订单结算页原型图

8

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

2.7个人中心

个人中心原型图分为：店招、导航栏、用户信息、会员等级、积分兑换、

底部导航六个区块。整体布局我是从上往下的先是用户资料，然后点击会员中

心就显示会员等级、积分兑换。整个界面条理清晰版面整洁，可以让客户快速

了解会员权益。（如图9所示）

图9个人中心原型图

9

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

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

3.1首页视觉设计与制作

3.1.1设计思路

首页作为整个网店的门面，其作用是为了让消费者留下来了解产品，同时

他也体现品牌的形象和品牌的理念。我将首页的布局分为：店招、导航栏、banner、

店长推荐、热销爆款、品牌故事、底部导航。整体布局简约大气。整体颜色我

选择灰白色和咖啡色为主，给人一种清新淡雅的感觉，同时也有一种岁月积累

的成熟，让人看一眼就不能忘记，在一些特别需要注意的地方我采用了醒目的

红色字体。

店招就是网店的招牌，一个好的店招决定了消费者的第一印象。在店招的

左侧我放置了白沙溪logo的标志，让消费者了解我们的网店的标志和名字；还

有一个关注的按钮挨着，这样可以让对店铺感兴趣的消费者第一时间关注防止

下次找不到店铺，同时也可以后期推送营销活动。在logo的旁边放置了品牌的

广告：黑茶之源，遍留九州；彰显出品牌强大的自信，以及品牌的伟大目标，

也标志着品牌传承古法制茶的决心。接着是个人中心和购物车的图标，可以方

便消费者快速查看购物清单和进入个人中心。最后是搜索框，消费者可以根据

自己的喜好快速搜索自己想要的产品。消费者想要更多了解品牌仅仅靠店招是

不够的，此时导航栏的作用就出来了，我把导航栏分为首页、所有茶叶、陈年

茶叶、湘尖、千两花卷、VIP会员福利、品牌故事、登录/注册；消费者想要了

解什么就可以直接点击跳转到相对应的页面。

接下来是轮播banner，第一张是品牌节日活动banner，我选择的节日是端

午节，因为黑茶的采摘时间在六月左右也恰巧是端午节，这样就可以以黑茶上

新来做活动。为了更好地宣传品牌的名气，营造节日气氛，我在白沙溪端午节

海报用绿色的粽叶、粽子、小船来装饰设计，主题文字我也用绿色来呼应节日。

整体布局为：文案在左边，产品在右边，主题文字清晰，优惠信息也用其他颜

色框起来，突出活动主题。（如图10所示）

10

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

图10品牌节日活动banner

第二张爆品促销banner，在爆品促销banner中的产品一般都是销量最高的

最具有代表性的，我选择的这款黑砖茶始于品牌建立时间1939年的经典配方与

古法非遗茶技，同时自身销量也是靠前的。这张爆品促销banner以白灰色为背

景给人一种超凡脱俗，仙气飘飘的感觉。我添加了若隐若现的山峦、祥云和树

木装饰，也突出了品牌深厚的历史底蕴。在排版上，我用左右排版，在文案上，

我强调老树黑茶，古老的制作方法也是为了契合主题。折扣力度是爆款产品促

销横幅的重点，我以红色为基底，用白色字体强调折扣力度，吸引消费者的眼

球。

（如图11所示）

图11品牌爆品促销banner

Banner完成之后就是产品的展示，产品展示分为店长推荐、热销爆款，店

长推荐设计中我选的两款产品排版为上下排版分别是左图右文、左文右图，形

成交叉分布使得整体布局与众不同而不失规矩，使得消费者产生浓厚的继续看

下去的兴趣。热销爆款我选了店铺销量最好的四款产品四宫格紧凑分布与店长

推荐交叉宽松分布形成一种反差感使得整体布局差异化不单调，更好区别于其

他店铺，给消费者一种焕然一新的感觉让消费者更加记忆犹新。

11

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

产品展示完成之后就是品牌故事介绍，我选择了咖啡色为底色，这样可以

和背景色形成对比给人一种强烈的视觉冲击，可以让消费者更好的了解白沙溪

的品牌故事和发展理念。

底部导航包括品牌logo、茶叶种类、和一个返回顶部的按键、购物售后服

务、购物咨询服务。消费者想要了解直接点击就可以进入相应的界面。整个首

页设计布局简约，让人一目了然。（如图12所示）

3.1.2设计效果

12

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

图12首页效果图

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

3.2.1设计思路

搜索结果页中我主要设计了店招、导航栏、搜索栏、搜索导航、搜索结果、

底部导航六个区块。搜索框设计在界面的左上方，搜索框里会出现本店铺的爆

款，然后顾客点击搜索，直接更快的了解本店铺的特色产品。搜索导航设计在

搜索框的下面，让消费者更快的了解店铺的经营内容，更快的找到自己需要的

产品。搜索结果设计在界面居中的位置在搜索框和搜索导航的正下方，使顾客

搜索出来的产品在醒目的位置，供消费者方便了解。（如图13所示）

13

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

3.2.2设计效果

图13搜索结果页效果图

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

3.3.1天茯茶设计思路

我选择天茯茶做详情页的展示产品。详情页我分成：购买区、产品参数、

产品主图、产品信息、制茶工艺、产品展示。在购买区我用白色作为底色，和

背景色形成色差，这样可以更好的区别其他区域，排版更让消费者舒适。然后

就是产品的详细生产数据：生产日期、保质期、产地、净含量等。产品主图我

用红色作为底色与背景色形成对比，天茯茶产品在图片正中位置，右上角用白

色字体写出了茯砖茶研发的时间，同时也有其他两款茶的研发时间并用线按时

间连接。接着是制茶工艺的展示、汤色的展示，最后是产品实物细节的展示。

14

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

（如图14所示）

3.3.2天茯茶设计效果

15

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

图14天茯茶详情页效果图

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

3.4.1设计思路

登录注册页我把登录和注册用线从中间隔开放在同一个页面，这样消费者

就可以在同一页面登录或者注册更加便捷。背景还是白灰色我还加入了一些若

隐若现的山使得整个页面不那么单调。同时我还在上面插入了一条广告，广告

中：始于1939、非遗茶技等文案宣传了白沙溪茶的悠久历史和古典传承，在加

16

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

入一些山、梅花、绿叶等点缀使整体画面更加富有美感。人人都喜欢美的东西，

爱美之心人皆有之，这样就可以激发消费者的强烈的购买欲望。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

在购物车设计上我采用简洁明了的方法，给消费者最直观的视觉感受，这

样可以让消费者觉得没那么多套路，让消费者下单的时候没那么多心理顾虑。

购物车内容包括商品、规格、单价、数量、总价、操作。在合计和店铺活动的

17

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

字体上我采用红色这样可以让消费者清楚的看到优惠之后的金额，感受到店铺

优惠活动的力度大。购物车下面是猜你喜欢设计，可以让消费者在犹豫是否购

买购物车商品时有更多的选择。（如图16所示）

3.5.2设计效果

图16购物车效果图

18

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

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

3.6.1设计思路

在订单结算页上我选择和购物车设计一样采用简洁明了的方法，给消费者

最直观的视觉感受。先是选择收货地址，然后确认商品信息，最后提交订单。

在确认商品信息中用细线隔开，在视觉上更有层次感，同时有勾选的标记来提

醒消费者选择的选项，避免误买。最后优惠和总计用红色字体提醒消费者是否

确认购买，是否误买。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

19

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

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

3.7.1设计思路

个人中心页设计包括：用户信息资料、个人中心导航栏、会员等级、积分

兑换、积分获取。在店招导航栏下面的用户信息中消费者可以点击编辑信息更

换自己的昵称和头像，还可以看到自己积分数据。在会员等级、积分兑换、积

分获取内容中都标志了相应的规则，可以让消费者体验到会员带来的福利，从

而可以让消费