邹有才品牌网店视觉方案设计

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

目录

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.1.3品牌节日活动Banner设计思路......................................................12

3.1.4设计效果............................................................................................13

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

3.1.6设计效果............................................................................................13

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

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

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

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

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

3.3.2东北糯玉米详情页设计效果............................................................16

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

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

3.4.2设计效果............................................................................................19

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

I

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

3.5.1设计思路............................................................................................19

3.5.2设计效果............................................................................................20

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

3.6.1设计思路............................................................................................20

3.6.2设计效果............................................................................................21

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

3.7.1设计思路............................................................................................21

3.7.2设计效果............................................................................................22

4总结............................................................22

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

II

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

邹有才品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着智能手机的广泛使用，以及5G等新技术的应用，电商市场也进入了

快速增长阶段。这些年线下的市场饱和的影响让竞争越来越激烈，在这样的趋

势的影响下许多的品牌都不在局限于线下的销售，转为线上结合形。例如，新

东方甄选EASTBUY，盒马日日鲜，润之家，这些知名品牌他们都有开自己独立

网店，新东方甄选最初是新东方推出的直播带货新平台，润之家也是华润万象

零售连锁企业品牌，也在线上开了独立网店，采取了线上线下结合的方式。邹

有才品牌自成立以来，为客户提供很好的产品、良好的技术支持、健全的售后

服务，逐渐成为行业内知名企业，但是在这个竞争的互联网时代，邹有才品牌

只依赖第三方平台来销售，肯定是没有竞争力的，需要建立一个独立的品牌形

象网店，不断创新来设计和定制自己的特色服务，并且采取线上和线下结合营

销的模式，增强自己的品牌影响力，提高市场竞争力。

1.2项目需求分析

邹有才品牌自创立至今，深受广大用户们的喜爱，虽然邹有才已经取得一

些不错的成绩，但并没有放慢前进的步伐，仍在为成为行业中的最顶尖品牌努

力。邹有才品牌在互联网上开设了官方旗舰店邹有才旗舰店，让广大网民在网

上也能买到与邹有才实体店同款的商品，但是现在随着互联网的发达，行业竞

争大，邹有才更要突破传统观念，实现品牌创新，来满足消费者的需求和喜好。

邹有才该需要要设立自己独立运营的网店，这样可以更好的建立品牌形象，通

过一个有特色的页面，来让消费者记住，增加回头率。并且该品牌建立自己独

立运营的网店，可以定制设计自己的特色，比如优惠券，团购，以此来提高客

户的体验，最重要的是还能够灵活的安排经营时间。并且邹有才品牌可以和其

他的IP形象联合推出新产品，增加消费者对品牌的新认知。

1.3色彩设计

主色调是绿色，辅助色是淡黄色，因为该品牌主营的是绿色食品，强调该

1

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

产品以天然，无化肥的原料制成，旨在提成绿色健康的视频，并且绿色与健康

概念联系最为密切，是自然，环境，有机等主题的代表色，所以绿色更能让消

费者产生信任感，黄色可以代表土，阳光和丰收，更加符合该品牌的产品特性

还有黑龙江独特的地理环境“黑土地”，能给消费者更贴切的品牌关联性。

图1标准色

1.4字体规范

文字主要是用来传达信息的，字体的线条长短，形状各异，粗细搭配主要

是强调信息重点和增加美感，让字体具有较高的感染力，在页面设计中用黑体

比较多，因为在视觉上表现更醒目，提高阅读者的注意力和理解，楷体运用于

模块标题，有一种书法艺术，铿锵有力的美感。（如图2所示）

2

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

图2标准字体

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

2.1首页

首页的布局设计，我分了八个板块，因为首页对人们的第一印象很重要，

传达的信息也应该简单明了，不能太繁琐，消费者可能会看不到重点，观看感

很差，所以在设计的时候，整个排版都是简单明了，消费者首先第一眼就能看

到核心信息。在图形的排版中，都是图形和文字相结合，在确保文字的可读性

下，我通过对字体的大学，颜色的设计来提高画面的美感，和突出重点信息，

有助于讲消费者的注意力放在内容。对于首页爆品区是对产品进行宣传，能最

先抓住消费者的眼球，并且也是消费者在短时间内对邹有才品牌的信息获取的

一种快捷手段，展示了邹有才品牌的产品，还有一些周到的服务。对于优惠券

的设计构思巧妙，趣味性很足，主要是通过优惠能够吸引消费的注意，引导他

们下单消费，也能刺激到用户的潜在购买需求。对于板块之间的隔开我设计的

是两张图，左右对称的排列，整齐有序，单调不失美感，生态有机系列这部

分，采取的是图文结合的方法，和产品的错落排列，消费者在观看的同时，不

会产生审美疲劳，也是有效的提高了他们购物体验感，在设计时，让产品图片

之间的间隙大，使整个视觉效果越平稳。接着是店铺推荐这一块，图片和文字

的排列更具细致和丰富性，提高了视觉效果。还有模块的标题，利用文字和背

景的差异性，强调了关键信息。（如图3所示）

3

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

图3首页原型图

4

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

2.2搜索结果页

首页由六大模块组成，非常简单明了，消费者能够通过店招上的信息，快

速搜索产品，并且进行加入购物车等行为。在设计时，就把消费者经常会用到

的功能放在顶部，消费者能够快速找到所需产品，非常便捷。在产品展示模

块，考虑到页面的美观，放置的是几款热销产品，图片与文字上下排列，左对

齐，给消费者舒适的观感，在产品的右侧也设计一个按钮，可能继续查看下一

个产品。掌柜推荐模块，布局也是和上一个板块一样，简单排列，不会很突

兀。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页由11大模块组成，在消费者选择一个心仪的产品时，最先看

到的是详情页这一块，在购买产品这一块，主要是主产品的一些详细信息，在

左侧，我设计了一个所有产品的分类，右侧是热销产品，中间是整个产品的焦

点图和信息功能，布局上向俄罗斯方块一样不规则的垂直排列，让整个画面层

次丰富，方便消费者能够通过搜索快速找到自己喜欢的产品，能够激发消费者

的购买欲望。在中间区域的焦点图，首先第一时间能够吸引消费者的目光。在

产品信息这一板块，采用的是图文结合，能够清晰明了的向消费者展示产品的

5

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

名称，产地，保质期等具体信息。在产品展示与功效模块，主要是展示了产品

的健康营养价值，还有鲜甜饱满，配上精致色彩丰富的实物图，进而吸引消费

者的目光。所以在图片的运用上，选择都是比较真实的产品图，还有细节图，

让消费者更加清晰明了。整体布局上，通过对比突出核心的信息。（如图5所

示）

图5商品详情页原型图

2.4登录注册页

在登录注册页这一块，消费者关心的是如何快速的通过文字指示找到相应

的登陆注册入口，所以在整个设计简洁明了，配色柔和，左边部分的的图片都

是与农产品相关，符合该品牌的主营产品，右边登录系统设计的是短信登录和

6

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

密码登录，非常的便捷，保证了消费者登录个人账号的顺利进行。并且为了上

页面更具特色，在背景上我使用了一个牛耕图，淡化融和于背景图，整个画面

营造出丰收，农耕的故事氛围感。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车的功能对于消费者来说非常重要，首先是能够清晰的看到自己所添

加的商品，并且能够对商品进行删减，收藏等行为，为他们购物提供便利。所

以设计之初我采用不同产品隔开，商品数量也能修改，在选择的的产品下，设

计了一个按钮，可以直接付款，并且能够看到优惠，满减等提示，在掌柜推荐

中选的产品能够代表本店特色产品或是销量很好的产品，采取只有图片无文字

搭配，这样能够有神秘感，让消费者注意到，增加购买欲望。（如图7所示）

7

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

图7购物车原型图

2.6订单结算页

订单结算页由四个模块组成。在这个页面，能让消费者明白每个功能是非

常重要的，所以顶部是用多个框架进行排列和重点放大，顾客核对订单模块

中，消费者可以清楚看到自己的各种订单，便于结算，在上面有一个选择收货

地址，是为了不让消费这下单地址出现差错。用多个块状矩形整齐排列，便于

消费者阅读起来不费劲，还有文字的加粗和大小进一步突出信息的重要性，让

总体看起来不死板。（如图8所示）

8

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

图8订单结算页原型图

2.7个人中心

个人中心页主要是来展示用户账号的相关信息，在会员中心这一板块，左

侧设计的是垂直的列表框，可以进行账号管理，修改密码等操作，其他的功能

和信息也是用矩形框起来横向分布，垂直和纵向相互配合的布局使整个页面看

起来更加有层次感，对于图片的摆放是对称和图文结合，会比单纯都是文字更

容易吸引顾客，方便用户能详细的看到自己的特权积分等，可以吸引老客户继

续续费，可以增加复购率。（如图10所示）

9

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1首页设计思路

在首页的设计中，我分了八个板块。首先是关于领取优惠券的设计模块

中，设计的一个图案是玉米粒的形状，也是该品牌卖的比较好的一款产品，并

且左下角还添加了玉米的元素，整体感觉和产品非常符合，精致美观，能够吸

引顾客的注意力，将优惠券放在第一个板块，也是重点去激起消费者的兴趣，

能够引导他往下翻，提高购买力的好办法。第一个板块和第二个板块用一张长

图分开，是一个春天气息浓厚的梯田图，与整体的画风相呼应，生态有机系列

板块，选用的是卖得比较好的原生态产品，每款产品的背景是一个麦穗围起来

的圈，能增加产品的精致度，让消费者觉得看起来具有特色，文案采用一大一

小，黑色与绿色相互配合，既突出产品信息，留下印象，又简单不失美感。在

第三个板块中也是用的蓝天和麦田的图，有丰收氛围，与梯田图相呼应，一左

一右，结构对称，在店铺系列模块中，又细分出了五谷杂粮和礼盒专区，是为

了满足消费者的喜好，让他们挑选产品也更加便捷快速。在每个细分出来的板

10

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

块的图标，采用深绿色背景，两边用麦穗装饰，与店招的配色和谐不生硬。五

谷杂粮区域产品是左右上下排列，能够让消费者产生一种丰富的视觉效果，礼

盒专区区域产品采用一上一下，文案和产品图片左右对称排版，在有限的空间

内将单一的图片和文字生动起来，增加消费者的阅读兴趣。两个板块旁边用了

落叶来修饰，让整体画面更富有视觉效果。在尾部导航模块中，提供了大量维

护消费者权益的信息，也能取得消费者的信任，从而激励他们下单购物。（如

图10所示）

3.1.2设计效果

11

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

图10首页效果图

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

在品牌节日活动banner图的左侧加上了邹有才品牌的logo，颜色和背景

色反差大，醒目，可以让消费者欣赏banner图的同时，可以记住品牌的名

称。主要设计的是春节促销的一个banner图，主色采用的是大红色，整体非

常有节日氛围，有“年味”，给以消费者喜庆的感觉。采用了左右排版，左边

放文案，右边放产品图片，选用的都是店铺销量比较高的产品，这样可以吸引

更多消费者下单，左边部分文案一大一小，突出重点，能让消费者注意到打折

12

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

促销这一活动，从而激发消费者的购买欲望，从而促进消费。（如图11所

示）

3.1.4设计效果

图11品牌节日活动banner

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

爆品促销banner图中选择了促销最好的东北玉米，整体采用绿色和黄色

相互搭配，整体画面看起来和谐自然，又符合产品的特性，并且才采用了和产

品相呼应的颜色来设计字体，给消费者绿色，健康的感觉，整体富有美感，画

面色彩搭配能够吸引消费者的目光。在文案方面，将狂欢促销几个字突出，可

以吸引更多的消费者,增加购买率,从而提高销售额。点击购买图标采用了深绿

色的背景，与大背景色形成反差，可以吸引顾客注意力，进行点击。（如图11

所示）

3.1.6设计效果

图12品牌爆品促销banner

13

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

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

3.2.1设计思路

搜索结果页设计分为了三个板块，在顶部我首先放置的是产品的导航栏，

消费者首先注意的就是这个功能，所以我用了一个线框和文字结合，线框采用

了黄色和绿色的渐变，让整个搜索栏更具有特色感，没有复杂的排列和过多修

饰的元素，便于消费者能准确找到产品。在产品的展示区域，我采用了矩形工

具和边框来展示商品，并且在色彩的搭配上面也是背景图，与店招的颜色设计

相呼应，产品图也是以图片为主，文字为辅，既能展现产品信息又能提高视觉

效果。在产品的右侧有设计一个小图标，便于消费者翻下一页的产品，可以留

住顾客。（如图13所示）

3.2.2设计效果

14

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

图13搜索结果页效果图

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

3.3.1产品名称设计思路

商品的详情页对于店铺成交方面非常重要，所以对邹有才品牌的分析，我

设计了最具有代表性的详情页，总共分为店招，导航栏，购买产品，所有产

品，热销产品，焦点图，产品信息，产品展示和功效，玉米做法，产品健康认

证，关于售后等11个板块，背景色选择的是一个淡黄色，与玉米这个产品的

特性相符合，整体的结构设计非常统一，最上面是中心产品的详情信息，有设

计购物车，数量，和立即购买，方便消费者可以添加和购买产品，产品的焦点

图采用的是蓝色的背景，和详情页的背景形成反差，可以突出产品的形象，让

顾客注意到，产生兴趣，焦点图的左侧是一个产品导航的搜索图标，能够让消

费者快速搜索到心仪的产品，在右侧设计的是热销产品，消费者看主要产品的

时候能够注意到其他产品，这样也能够增加购买率。在产品信息这一板块，采

15

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

用产品主图和文案左右对称结构，消费者对产品的信息清晰明了，在产品展示

和功效这一板块，主要展示了玉米产品的三大功能，在设计方便采用黑色背

景，黄色与白色字体，突出重点。玉米做法，采用了四种做法的图片，色泽诱

人，能够激发消费者的购买欲望。产品健康认证这方面主要是展示品牌的绿色

健康，让消费者能够信赖品牌，关于售后这一模块，目的是为消费者提供保

障，让他们感受到优质服务，提供满意度。在尾部导航模块中，提供了大量维

护消费者权益的信息，也能取得消费者的信任，从而激励他们下单购物。（如

图14所示）

3.3.2东北糯玉米详情页设计效果

16

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

17

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

图143.3.2东北糯玉米详情页效果图

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

3.4.1设计思路

登录注册页我分了四个板块，在设计宗旨上，只要就是为品牌提供一张简

洁，美观，便于操作的页面。首先在店招这一块，左侧采用的四张扇形图片不

规则组合，分别都是和农作物相关的，与品牌形象相符合。登录注册页需要的

18

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

功能具备齐全，还涉及设计通俗易懂的图标提示，和文字讲解，为消费者登录

注册页面提供了保障，字体的不同颜色和大小，突出重点，是为消费者详细的

指引，并且背景有一个牛耕图的元素，将颜色淡化，融入了背景，既不显得突

兀，又增加了这个页面的丰富度。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

在购物车的界面，一如既往的采用了主观，简单明了，又不失设计感的布

局和结构。在购物车这一栏，在布局设计上面，采用的是四个矩形方块垂直排

列，消费者添加的每个产品都能清晰的看到。并且消费者可以看到自己添加的

产品，可以随意的增加和删减产品，为消费者的购物提供了便捷，还设计了

店铺凑单有优惠的活动字样，在掌柜推荐的板块中，采用了线框和文字结合的

结构重点展示产品，是为了刺激达人消费。（如图16所示）

19

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

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

订单结算页面由四个板块组成，在色彩搭配上，始终是绿色和淡黄色的相

互交融，用矩形巧妙的分开几个区域，是为了让顾客对订单结算页的功能分布

更清楚。在顶部我设计了确定收货，确定订单，评价这三个图标，并且用深绿

色的背景和白色文字重点突出这三个图标，让消费者查找的时候会清晰明了，

在选择收货地址和选中产品的时候，我在前面设计了一个边框勾，让整体的设

计感更强，减少画面的死板，使之富有灵动性，并且在运费险，优惠，运输方

式，电子发票，这些方面设计了边框勾，更直观的告诉顾客买产品有保障有优

惠，激发消费者下单。（如图17所示）

20

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

3.6.2设计效果

图17订单结算页效果图

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