无趣工社品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

2.1首页..............................................................................................................4

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

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

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

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

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

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

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

II

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

无趣工社品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

目前，网络的发展逐步影响了人们的日常生活，传统的生活模式正在发生

变化。网络的发展颠覆了传统信息甚至是物质之间的交流，改变了受限制在空

间和时间中的壁垒。也正是这种新发展诞生了许多基于网络形成的特色赛道。

电商，正是由此形成并且逐渐的发展壮大。

自1999年电商元年发展至今，电商的模式已经完成了摸索阶段，形成了成

熟的商业体系。线上，有大量的电商平台作为渠道，如淘宝京东等网站，将买

卖双方联系起来进行交易。线下，通过物流派送，线下门店等方式完成商品的

交付，人们对于网络购物早就习惯甚至产生依赖性。

网络购物的兴起不仅是对传统商务的一种冲击，也是对企业发展的一种机

遇。这是一种全新的赛道，可以通过电商扩大企业的影响力、竞争力。不少的

品牌都选择了建设自己的独立网店，也有包括三只松鼠在内的，是基于电商而

兴起的品牌，从网络中发展如今也成了零食行业的龙头企业。这给了许多品牌

一个发展的启示。

无趣工社，也正是随着电商的发展而同步进行的品牌。致力于打造新颖的、

具有个性化服务的一家潮流礼品的公司。根据调查，目前无趣工社尚没有属于

自己的专属网站，仅是在天猫京东等网络购物平台上有属于自己的具有购买能

力的旗舰店。

1.2项目需求分析

根据调查，无趣工社在天猫和京东均有自己的网店。但是随着时代的发展，

潮流趋势已经产生了一定的变化，可能之前建立的网店装修设计不太契合如今

人们的喜好。根据数据分析，在潮玩一类商品的消费者当中，消费的主要人群

是15-25岁之间的年轻人群，其中性别以女性偏多。这一类人群有着大量的娱

乐活动，潮流玩具也是他们选择的满足自身需求的商品。而且这一类人具有购

买的频率高但购买的力度不大，购买的目的性很强，个性化差异大。所以在网

站的建设中就要注重服务与这部分人群。无趣工社在商品上面是满足这一点的，

1

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

首先价格方面与相似的品牌并无太大的差别，所以从视觉和网店设计上就要体

现自己的竞争力。根据对竞争对手品牌的研究分析发展，现多数的潮流品牌推

出的产品带有科技风、赛博风。而无趣工社不同的是产品有特有的文艺风、温

情风等有创意的产品，这可以作为品牌的一个独有竞争点。

无趣工社一直以“诚信”“共赢”“开创”作为自身的经营理念。现在的网

店装修因为没有变化，已经失去了新颖力，而且排版结构也不符合当下的潮流，

首页没能将产品和品牌有一个良好的展示和宣传甚至出现了部分死链接，导航

栏过于隐蔽，导航指引的功能不太能体现出现，这些都是现在的网店存在的问

题。网店的设计上就可以基于这几点进行改进，计划打造一个有新创意的门面，

同时也要展现出品牌个性化十足的特点满足更多不同需求的消费者。设计的风

格偏向明亮，活跃富有动态的形式，视觉上能第一时间抓住客户的眼球，引起

客户的注意，从而促进消费，增长无趣工社品牌的影响力。

1.3色彩设计

色彩对人视觉上的影响很大，良好的色彩的搭配会使得用户的观感舒适.在

本次网店的建设中，选择了以黄色系作为他的主色调。黄色会给人一种温和、

欢愉的情感，客户看到网店会激发心理上的愉悦产生兴奋的感觉，心情良好才

会促进消费。同时添加了邻近色橙色进行对比，使得画面更加的和谐，也利用

了黄色的分布将整个网页进行划分布局。辅色选择使用降低了明亮度的浅黄色，

用于突出主体，也能使网页显得不单调。整体的色彩上以暖色调为主，目的是

给客户营造出一种温馨明亮的环境，进入无趣工社的网店能产生热烈兴奋的情

绪，同时又保证了网店年轻活力的氛围。（如图1所示）

2

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

图1标准色

1.4字体规范

无趣工社网店的建设使用字体一共有四种，分别是：黑体、微软雅黑、思

源黑体、宋体。（如图2所示）

3

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

图2标准字体

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

2.1首页

首页的布局将整体分为了四个模块，从上到下依次是banner区域，优惠券

区域，产品区域和品牌介绍区域。Banner区放置首位目的是快速的引起客户对

无趣工社品牌的兴趣。下方的优惠券区域是用于放置各种活动依次保留用户。

产品区域中也做了详细划分，分为热卖产品推荐和新品上市促销将依次介绍产

品，最后的品牌介绍目的是向用户宣传品牌文化获得用户的认同。（如图3所示）

4

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

图3首页原型图

5

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

2.2搜索结果页

搜索结果页的布局中，最上方设置了一个搜索导航栏以便于用户能够快速

准确的找到心仪的商品。下方则是做了分类，将产品总的分类作为主要，也设

置了根据人群进行区分和根据价格进行区分。并且在下面还向用户展示了商品

分类为小夜灯分类的搜索结果。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页的布局可以分为四块。上方是商品的一个店招展示，而且标明

了种类和价格，在这里可以实现购买功能。右侧导航是热卖产品的推荐，用于

展示更多的商品。左侧是一个所有产品的导航栏，可以跳转到其他的商品。中

间部分是详情页的主体，里面将对整个产品的功能，设计，使用方式等数据进

行一个详细的介绍，让用户更加精确的了解产品。（如图5所示）

6

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

图5商品详情页原型图

7

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

2.4登录注册页

登录注册页的布局相对简单，分为了左右两块。右侧的模块用于放置图片

对整个页面进行装饰。左边是登录模块，是实现登录的功能的模块，除了账号

登录以外还设置了第三方软件登录。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车页面目的是实现对商品订单进行支付结算的功能。在最上方介绍了

完成支付的流程，中间是对商品数据的简易介绍，如单价，总价和数量等。并

在最后计算出总共需要支付的价格给客户结算。在购物车的下方做了相关产品

的一个推荐，吸引用户进行购买推进销量。（如图7所示）

8

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

图7购物车原型图

2.6订单结算页

订单结算页的结构根据功能的不同进行划分，最上方是完整的订单流程介

绍，也让用户能够明白当前处于哪个步骤。下面是收获地址的确认，保证商品

能够到达正确的地址。最下方是商品完整的订单信息，包括商品名称、单价、

数量、小计部分，最后完成对商品订单的统计提交订单进入到下一个步骤。（如

图8所示）

9

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

图8订单结算页原型图

2.7个人中心

个人中心是用户在本网站上的账号信息的总和。左侧的导航栏是对个人中

心功能的介绍，包含了个人信息，订单，商场等便于用户快速导航。右边的个

人信息模块为主要部分，首先是用户的专属ID卡，上面有用户的名称等级和账

户钱包、地址等数据。ID卡的下方是对会员福利的一个介绍，会员享受优惠的

同时也是增长了对品牌的信任喜爱。最后是对近期活动的介绍。（如图9所示）

10

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

首页的设计，首先映入眼帘的是两张banner图，活动banner图选择的是

以61儿童节作为活动。结构采用的是左右式，右边是商品图展示，左侧是文字

描述和活动主题：六一欢乐购。背景采用蓝色为主，这种色彩更能吸引儿童的

兴趣，装修了彩带积木这些童年常见的元素来使主题更加完善。（如图10所示）

11

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

图10品牌节日活动banner

另一张banner图作为促销宣传的作业，促销的主题是限时特价，买一送一。

同样的使用左右结构将主题和产品进行一个区分，背景使用的音符等装修是为

了契合产品的属性。（如图11所示）

图11品牌爆品促销banner

Banner图之后是优惠券区域，此处的优惠券根据优惠力度不同进行区分。

下面的产品展示区域为首页的主体部分，整体的背景采用黄色+一些线条的装饰。

这种向内收缩的线条可以将用户的目光也向内收缩突出主体的商品，而且线条

显得二维化。主体的商品介绍采用了立体效果的框架，与背景形成了一个对比

更能够吸引眼球。气球爱心等装饰是为了体现青春活力的整体风格。最下方的

品牌介绍利用了无趣工社的吉祥物作为装饰。（如图12所示）

12

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

3.1.2设计效果

13

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

图12首页效果图

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

3.2.1设计思路

搜索结果页的布局在上方利用了方框对结构进行一个划分，将各种分类给

区分出来，利用改变颜色的方式表面所处的页面是所有分类中的小夜灯产品分

类。下方用两行每行三个产品展示向客户展现搜索的结果。（如图13所示）

14

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

3.2.2设计效果

图13搜索结果页效果图

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

商品详情页是面向用户展示产品的重要部分，根据无趣工社具有创意性的

特点我选择了产品：创意乐乐杯栽培，进行详情页设计。分为了产品主体、商

品信息、左侧导航、右侧促销和产品详情等部分。排版结构集中在网页的中间

部分，背景颜色选择浅绿色，给人的感觉舒适清新，也契合产品健康的主体。

整体结构统一，以下是介绍产品详情内容。

3.3.1乐乐杯栽培设计思路

产品详情内容上方以绿色为主，白色为辅。开头以长图对产品进行展示，

然后开始介绍产品的特点。利用对用料的介绍对布局进行一个划分，下方以粉

色为主，绿色为辅，使颜色不单调，整个页面更完整。接着向用户介绍使用方

15

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

法和进一步的特点。最后是产品的参数展示。（如图14所示）

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个人中心视觉设计与制作

3.7.1设计思路

个人中心页的背景同样使用浅灰黄色，但利用白色将中间1300像素的区域

划分出来作为个人中心的主体部分。主体的左侧是导航栏，用橙色方块说明此

刻处于会员中心模块。右边是主要内容，最上方是用户的专属