吉普号品牌网店视觉方案设计

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

目录

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

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

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

1.3色彩设计......................................................................................................2

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

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

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

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

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

2.4登录注册页..................................................................................................7

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

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设计效果.............................................................................................13

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

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

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

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

3.4.1设计思路.............................................................................................17

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

I

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

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

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

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

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

3.6.1设计思路.............................................................................................18

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

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

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

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

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

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

II

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

吉普号品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着网络技术的发展，多媒体等电商行业也在飞速成长的同时，视觉的设

计也在各种行业里逐渐受到了越来越多的重视，随着这些年线下的市场饱和的

影响让竞争越来越激烈，在这样的趋势的影响下许多的品牌都不在局限于线下

的销售，转为线上结合形。譬如怡清源、裕禧礼品正是在这种结合下也纷纷的

建立起自己的品牌独立线上网店，同样的拥有一个自己品牌的网店，不仅仅能

增强美观度和用户的体验度，还可以提高品牌的形象和市场的竞争力。

吉普号一直秉持着年轻人极致的玩家精神，深度根植茶山，死磕古老行业

多年的过程中，独创了“NPS晒青新茶评测体系”和熟茶发酵“元”工艺，长期

致力于世界茶源产地——云南的茶产业产品、体验、文化的优化及革新。该品

牌缺少自己pc端的独立网店，综上所述拥有一个属于自己品牌线上且有买卖功

能的网店是有必要的。

1.2项目需求分析

吉普号的故事起源于世界茶源产地云南，秉持着年轻人极致的玩家精神，

企业的核心目标是将理性的制茶态度与买家的探索之心结合，致力于打造唤起

普洱茶发烧友心底幸福感的茶品。自从该品牌的创立以来，就深受广大消费者

的喜爱，也得到了业界的一致好评。企业一直传承着普洱茶千百年的工艺和文

化，基于该品牌多年在原产地的深厚积淀，始终坚守产品为王的产品研发理念。

吉普号虽有自己独有的公众号以及官网，但官网缺少可以独立购买的功能，无

法及时的满足消费者的需求。在设计企业网店的时候，希望了解到相关的信息

通过以视觉元素的合理化的应用，可以更加的符合当下消费者的认知和追求，

进行合理优化更好的实现视觉设计的效果，添加一些创新的元素，给消费者更

加直观的带来信息的反馈，设计过程中可以采用较多的图文结合的表达形式，

通过对有关元素的调整，让其在界面中都处于合理的布局之中，直接将产品所

秉持的理念以图文搭配的方式传递给广大的消费者，同时也可以让广大消费者

们满足进行浏览视觉设计作品时追求的美感。

1

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

1.3色彩设计

提及茶叶往往联想到的是稳重、历史悠久等，在该品牌的色彩设计中保持

了品牌的原有包装色彩特征搭配了素净雅致的古风背景，针对较为年轻的新消

费的人群则采用了胭脂红、蜜黄等与之形成了深浅的搭配。红色可以带来比较

强的视觉冲击感，而黄色是属于给人轻松、活力的感觉，红黄的搭配画面饱满

富有激情且可以营造出亲近、随和的效果，有主有次，既满足了消费者的需求

又不失品味和档次，以迎合消费者对于色彩的习惯与心理，同样增强视觉可以

带来的冲击感从而促进用户的购买欲。（如图1所示）

图1标准色

1.4字体规范

文字设计是我们在视觉设计中的比较细小的一个部分，也是在设计的过程

中容易被忽视掉的一部分。在视觉设计的时候可以考虑两个因素：辨识度和易

读性。一个有层次的页面视觉设计，可以清楚的区分页面元素彼此的轻重次要

关系，调整运用的适当时候，可以相对的提高整个页面的可读性。（如图2所示）

图2标准字体

2

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

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

2.1首页

人们经常说第一印象很重要，同理那么网店的首页对品牌来说也是很重要

的，所以我在设计的时候为了突出核心信息，避免太多繁琐的元素会给用户带

来观感的疲惫，目的是想要给用户在视觉可以有更好的体验，从而可以勾起用

户在浏览时有消费的欲望和继续浏览的想法，所以主要用的都是简单的布局。

在图形的排版中，通过图形与文字的相互匹配，在确保可读性的前提下，我预

设通过颜色和字体等设计方式提高精美度。背景采用淡雅的图片打底，可以突

出主要产品元素的同时，减少界面单一无趣感，还可以根据产品或品牌的特点

突出页面的人性化，给用户带来更为舒适的体验。

首先在首页的爆款推荐部分，运用了折线型的布局将产品图片按照错位的

方式进行排序，用户的视线也会沿着商品的图片进行折现运动，这样的布局可

以给用户一种清爽、利落的感觉具有韵律感。接着店长推荐的部分用的是统一

型的布局，虽然说统一的确是一种比较保守传统的布局方式，但也是有需要注

意的事项的。譬如，设计的时候为了使得客户使用时的轻松感，所以在展示产

品图片的排列设计上并没有用过多的排列，产品标题也是简用特点的进行展示。

最后在品牌故事的部分则采用的是随意型的布局，搭配图文在随意中营造出一

种特定的氛围和感觉。（如图3所示）

3

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

图3首页原型图

4

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

2.2搜索结果页

现在大部的用户没有足够的耐心，他们可能不会根据我们所设计的导航一

个一个的去点击，找寻他们所要的东西，除非用户想要的商品可以在导航栏很

容易的点击寻找到，所以为了确保用户在这种情况下的丢失，在设计的时候我

明确了这点目标，把用户最常用的功能放在了显著的位置，同时考虑页面的美

观和创意，以吸引用户。（如图4所示）

图4搜索结果页原型图

5

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

2.3商品详情页

商品详情页是比较重要的界面之一，也是大多的用户在购买产品时会被用

户看到的内容，对用户喜不喜欢这件产品，想要了解的用户了解完之后是否继

续选择购买，都有着非常重要的作用。因此考虑到这一点，我在设计商品详情

页面的时候，尽可能的将能够反映商品特点的内容放置在这块页面上，这样能

够激发用户的消费欲望，在树立信任感的同时打消用户消费过程中所产生的疑

惑，吸引用户更加深层次的了解从而促进购买。在给商品进行修饰的时候，避

免多种的修图装饰等，以免造成产品与实物商品相差过大，减少后期产生的纠

纷。我在构建设计时觉得商品实物大图以及细节的图片是详情页中不可缺失的

一部分，目的是全方面的给用户展示商品的全貌与细节。（如图5所示）

图5商品详情页原型图

6

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

2.4登录注册页

我觉得登录页不仅仅可以实现登录与注册这单一的功能，除此之外预设展

示产品、表达欢迎等让用户感受到亲切感。在右边登陆部分用了白背景打底，

其余文字素材放在了背景中央，进行了留白的处理，使得整个界面增加了一些

空间感的同时突出显示重要部分。大背景用纯色拼接，加上产品进行装饰，让

整个界面简洁直观。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车主要的功能是用来显示用户所选择了的商品，我认为在设计的时候

不宜添加过多的装饰，反而加重用户视觉上的疲劳。所以整个界面还是保持着

统一淡雅的背景图，简洁大方，在全部商品的导航栏中增加了折扣商品的选项，

可以更用户更加直观的了解到添加的商品中，哪些是具有优惠的。在商品信息

我增加了一个修改的按键，目的是让用户在想更改商品规格时可以直接进行修

改，更加的方便。（如图7所示）

7

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

图7购物车原型图

2.6订单结算页

订单结算页我用线框将文字元素规整了起来，把界面的整体感设计成像一

张纸质订单的感觉。在收件人区域添加了一个下拉按钮，让用户可以容纳更多

的信息，确认订单的部分预设了一个留言区，可以让用户直接给该订单进行留

言备注，提升用户使用时的体验感。（如图8所示）

8

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

图8订单结算页原型图

2.7个人中心

个人中心的页面用来显示用户账号的相关信息，在左侧的区域用了一个列

表式的导航框，可以给用户带来层次展现清晰，灵活性高感受。在右侧的区域

9

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

利用搭配图片来进行突出，图片相比于图标、文字是最容易吸引用户点击的。

会员权益用宫格式进行的摆列，页面视觉效果更好，提升用户视觉上面的观感。

（如图9所示）

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

结合吉普号品牌，基于长久的销售利益，我在该Banner中的文案重复使用

了“好茶”一词组句进行排版，其目的是为了加强用户对企业、品牌或者服务

的印象，向用户传达一种长期不变的企业观念。以中线为基准，将版面分为了

10

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

左右俩个设计区域，因为主要的色彩是采用淡雅的风格，所以为使留白不会过

多显得空旷，在中间加入了明显的文字元素从而增加画面的平衡感。（如图10

所示）

图10品牌节日活动banner

促销的广告目的就是为了吸引用户，引起用户对其购买的兴趣。在设计创

作时我将标题重点放在了版面靠中的位置，通过对文字进行交错的排列设计，

让文字更加的显目从而吸用户的注意，后面的背景中加了几片叶子进行了点缀，

增加画面感，将产品图像的色调做了一下调整，让图像的颜色与banner整体的

画面感可以相协调。（如图11所示）

图11品牌爆品促销banner

首页整体在方案设计中，根据和谐、简约与突出重点的原则，将不同的色

彩和元素进行组合、搭配形成一个悦目画面。（如图12所示）

11

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

3.1.2设计效果

图12首页效果图

12

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

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

3.2.1设计思路

结合原型图的设计思路，大部的用户没有足够的耐心，所以为了确保用户

在这种情况下的丢失，在设计搜索页的时候，第一栏的位置则设置的就是搜索

框，搜索按钮中使用了红色加强注意，精确查找的导航栏以最为简单明了的列

表方式进行的排列。设计时保持了整个界面的统一性，画面的整体舒适不杂乱，

没有设用过多的文字和元素，做到清晰且有重点。页面整体的空间有限所搜索

结果商品的排列方式可以直接影响到用户的视觉体验，杂乱的呈现方式也会直

接的降低潜在用户的购买欲望，所以我在搜索结果产品，产品图以大图的方式

进行呈现，给用户更加简单直观的感觉。搜索结果的下面添加了销量产品的推

荐展示，增加潜在用户的购买几率。（如图13所示）

13

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

3.2.2设计效果

图13搜索结果页效果图

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

产品详情页是比较重要的页面之一。在设计详情页的时我把主体内容分成

了三个区域，产品主图及相关信息、左侧悬挂导航栏、产品详情内容区来进行

设计。结合所选的品牌特性，所以在风格方面采用了原胭脂红和代表沉稳、热

爱的暗红色为主色调相结合形成一个渐变的背景，在原本的胭脂红基础上降低

了色彩上的名度。随着色彩深浅的变化，暗红色可以营造处深邃复古的故事氛

围感。

3.3.1吉普号设计思路

现在的生活比较偏快节奏，绝大多数的用户在浏览的时候都没有太多的耐

心去看成片的图片或者我呢子，所以在设计的时候我用的简约风格，让用户在

14

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

浏览的时候可以较快速的了解到所想要了解的内容。在设计焦点图的时候，给

产品添加了倒影与一块纯色背景充当展示台的作用，使得画面的整体更加的空

间感，在结尾处加了一个小三角衔接，目的是减少两块不同的内容部分连接处

的突兀、不和谐。在整体画满的边缘用了一个金色线框装饰，使得整体更加整

洁美观。最后在结尾处安插了一个返回顶部的按钮，方便用户在了解结束之后

可以快速的回到页面顶端。（如图14所示）

15

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

3.3.2吉普号设计效果

16

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

图14吉普号详情页效果图

17

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

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

3.4.1设计思路

在设计宗旨是为企业提供一张简洁、美观、便于操作的界面，所以采用了

现代简约风格，运用了大面积的黄色与少量的浅灰色进行搭配，符合产品特点

和企业形象，让用户在使用时能够快速的找到所需的功能，提高用户体验感。

部分元素采用了与背景反差较大的红色作为点缀，以突出重点。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车的界面，一如既往的采用了简单、直观和易于用户感官的布局与结

构。在导航栏的交互背景上使用了蒙版对其进行了淡化擦除，使其本身的颜色

在界面的整体效果上不会太抢眼。在呈现文字素材的矩形背景上添加了斜角阴

18

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

影，视觉效果看起来较为新颖、有亮点。（如图16所示）

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

根据原型图的想法设计像纸质订单的视觉效果。为了让界面看着清晰、简

洁、有条理所以所有的边框线都是用的细边框，这样不会给用户在使用时一种

19

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

莫名的沉重感，设计的同时考虑到了界面的颜色元素与文字的搭配排版设计，

让用户易于查看与理解。收件人信息里右下角的边框勾选并没有直接搭配使用，

而是做了一个镂空的设计，使其多了一丝灵动。在留言区域衔接搭配了主色调

作为背景色的同时做了一个淡化的处理，突显内容的同时看上其与整体不相违

和，也让页面整体的视觉感更优。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

20

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

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

3.7.1设计思路

从用户的角度触发考虑，习惯、喜欢与需求等将这些元素融入到设计中。

在悬挂的列表中所选择的按钮背景，所采用的灵感是根据按键按下时起始段的

角度最小越往后越大，就像钢琴的按键一样。会员积分的背景框采用了倾斜设

计，打破了横平竖直的视觉思维，斜线与横平竖直的线形成对比，可以为画面

增加创意性，让画面不那么的平淡，提升张力。（如图18所示）

3.7.2设计效果

图18个人中心效果图