禧玛诺品牌网店视觉方案设计

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

目录

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

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

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

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

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

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

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

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

2.3商品详情页......................................................................................................4

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

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

2.6订单结算页......................................................................................................7

2.7个人中心..........................................................................................................8

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

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

3.1.1设计思路...............................................................................................9

3.1.2设计效果.............................................................................................11

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

3.2.1设计思路.............................................................................................12

3.2.2设计效果.............................................................................................12

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

3.3.1STELLASW设计思路..........................................................................13

3.3.2STELLASW设计效果..........................................................................14

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

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

3.4.2设计效果.............................................................................................16

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

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

3.5.2设计效果.............................................................................................17

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

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

I

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

3.6.2设计效果.............................................................................................18

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

3.7.1设计思路.............................................................................................19

3.7.2设计效果.............................................................................................19

4总结..........................................................................................................................20

参考资料.........................................................................................................................21

II

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

禧玛诺品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

伴随电子商务进入迅猛发展的阶段，各方面的竞争都愈发激烈，产品品类

越来越丰富，消费者的选择空间越来越大。品牌的实力开始体现在更多的方

面，比如拥有一个设计精美符合品牌气质的品牌的独立网店。像完美日记、华

硕、华为等国际品牌都有自己的独立网店。

禧玛诺作为国际一线的渔具品牌，创始于1921年，子公司遍布全球17个

国家，已在渔具领域深耕100多年。

然而其品牌在中国国内的官方网站却显得十分落后简陋，并且还没有独立

的购买功能。

1.2项目需求分析

禧玛诺品牌没有官方旗舰店也没有独立购买功能的官方网站，禧玛诺品牌

在国际渔具品牌中也是属于一线的水平，之前介于中国国内的收入水平和垂钓

运动的爱好者数量不多，一直没有在中国建立官方旗舰店和有独立购买功能的

官网。但是随着国内收入提高和垂钓运动的兴起和普及，中国的渔具市场也空

前繁盛，作为具有国际一线水平的渔具品牌，却没有官方网店，所以此时建立

一个官方网店显得尤为重要。

结合禧玛诺品牌的高端渔具的品牌定位，和具有科技感和工业美感的产品

风格，瞄准高消费垂钓爱好者的销售目标，又参考了竞争对手（达亿瓦、阿

布、领峰）的设计风格。分析出禧玛诺品牌需要是一个具有独立购买功能的官

方网站网店，这是其他竞争对手不具备的。在视觉表达方面禧玛诺品牌需要一

个时尚美观具有科技感和高级感的设计风格，让禧玛诺品牌和产品更加具有吸

引力。届时这个具有独立购买功能的官方网站势必可以大幅提升在中国这个庞

大市场的销售量和市场占有率，进一步提升禧玛诺品牌的知名度和影响力。

1.3色彩设计

主体色彩使用品牌logo中的白色和蓝色，还有可以凸显品牌科技感的黑

1

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

色。其中白色和蓝色分别代表浪花和大海蓝天，应和

ClosertoNature,ClosertoPeople.的品牌理念。

图1标准色

1.4字体规范

楷体、仿宋、黑体、微软黑体。如图2所示）

图2标准字体

2

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

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

2.1首页

首页页面有从上到下分别是店招导航、banner、轮播推销窗口、热销推

荐、拟饵推荐、鱼线推荐六个部分。

其中轮播推销窗口用轮播的方式展现推销商品的主图信息和价格，还设

计了立即抢购和收藏的按键，更好的向用户展现产品信息。

接下来热销推荐、拟饵推荐、鱼线推荐，其中热销推荐将热门商品以醒目

的排版可以更好的引导用户购买。拟饵、鱼线作为垂钓中的消耗品，需求量很

大将它们的推荐放置在首页可以有效提高购买率。（如图3所示）

图3首页原型图

3

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

2.2搜索结果页

搜索结果页面包含店招导航关键词搜索、索引搜索、搜索结果四个部分。

索引搜索可以根据用户所需完美的将用户所需品类的商品呈现给用户。搜索结

果模块，除了将商品主图、商品名称商品价格展现出来，还将立即购买和加入

购物车的选项按键放置在下方，更加方便用户进行选购。（如图4所示）

图4搜索结果页原型图

2.3商品详情页

商品详情页包含店招导航、产品主图及购买信息、右侧客服中右侧商品分

类导航、中间产品详情内容六个部分。产品主图及购买信息模块将商品主图、

名称、价格、配送等购买信息，再配合规格、数量和下方加入购物车、立即购

买按键方便用户购买。右侧客服中心模块方便了快速联系客服及时了解产品具

4

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

体信息。右侧商品分类搜索模块可以让用户快速的进入所有商品页面或者特定

类别商品分类搜索页面，挑选用户心仪的商品。（如图5所示）

图5商品详情页原型图

5

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

2.4登录注册页

登录注册页包含店招导航、登录、注册三个部分。登录界面除了传统的账

号密码输入框下方还贴心的添加了忘记密码链接，可以方便用户在忘记账号或

密码时快速找回。还有第三方登录选项可以使用手机QQ、微信、支付宝完成

扫码登录。

注册界面包括自定义用户名、密码、确认密码、手机号码、手机验

证码输入框，最下方勾选《禧玛诺服务条款》。（如图6所示）

图6登录注册页原型图

2.5购物车

购物车页包含店招导航、选购商品信息、猜你喜欢三个部分。购物车商品

模块除包含产品基本信息，还包含自由选择选购数量，收藏商品，移除商品的

选项。小计模块可以清晰的罗列选购商品的总价和店铺活动满减的优惠。猜你

喜欢模块通过后台算法推荐用户可能喜欢有兴趣的商品，用户还可以通过自己

点击左右按钮，刷新寻找自己喜欢感兴趣的商品进行了解和购买购买。（如图

7所示）

6

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

图7购物车原型图

2.6订单结算页

订单结算页包含店招导航、收货人信息、支付方式、所购商品四个部分。

其中收货人信息模块简单醒目的将用户的收货人信息罗列出来，降低用户选错

地址的几率，提升用户体验。（如图8所示）

7

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

图8订单结算页原型图

2.7个人中心

个人中心页包含店招导航、个人中心导航、账户信息、钱包、会员卡、热

销推荐六个模块。

其中热销推荐模块通过后台算法显示用户可能喜欢的热销商品，吸引用户

进行购买，提升用户购买欲望。（如图9所示）

8

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

作为用户进入店铺最先映入眼帘的banner，其中活动banner我以黑色和藏

蓝色构建尖锐具有科技感的图片背景轮廓，再用深蓝色的几何图形点缀其中营

造视觉美感的背景，搭配两个不同颜色搭叠的五边形标记视觉重点。然后在图

案上用醒目的文字标注活动信息。达到让用户第一眼就感受到企业魅力，抓住

用户的心，留住用户，吸引用户了解活动的目的。（如图10所示）

9

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

图10品牌节日活动banner

其中产品banner我选择22年新款TWINPOWERXD泛用纺车轮作为

banner主题产品，整体背景使用纯黑背景，运用通道抠图将产品完美抠出，然

后对产品主图进行一个高斯模糊加低不透明度处理营造出高级的科技感。然后

在右侧标出信息和价格，下方立即购买按键点缀与店招和品牌logo撞色的橙色

边框增加视觉吸引力让整体更加美观。（如图11所示）

图11品牌爆品促销banner

首页是整个店铺用户最先看到的页面。所以在了解和发掘禧玛诺品牌过程

中，根据品牌特性对首页进行了设计，首页设计我共分了六个部分，店招导

航、banner、轮播推销窗口、热销推荐、拟饵推荐、鱼线推荐。背景选择纯白

与灰色，衬托出产品的高级、简约的气质。

热销推荐、拟饵推荐、鱼线推荐用灰色白色背景点缀蓝色外发光按键，营

造出明快舒适的购物氛围，提升用户购物体验和选购欲望。（如图12所示）

10

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

3.1.2设计效果

图12首页效果图

11

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

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

3.2.1设计思路

搜索结果页是店铺中用户选购商品的重要页面。所以在了解和发掘禧玛诺

品牌过程中，根据品牌特性对搜索结果页进行了设计，搜索结果页设计我共分

了四个部分，店招导航、关键词搜索、分类索引、搜索结果。背景选择纯白，

点缀鲜艳明亮的按键衬托出简约时尚的气息。搜索结果醒目的红色标注价格，

加大的立即购买加入购物车按键吸引用户进行选购。（如图13所示）

3.2.2设计效果

图13搜索结果页效果图

12

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

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

商品详情页是整个店铺成交的关键页面。所以在了解和发掘禧玛诺品牌过

程中，根据品牌特性对产品详情页进行了设计，产品详情页设计我共分了六个

部分，店招导航、产品主图及购买信息、右侧客服中右侧商品分类导航、中间

产品详情内容。背景选择纯白与详情内容主调的黑色相衬，衬托出产品的科技

感、高级感和精致气息，也能增加用户购买欲望。整体设计语言统一，以下介

绍产品详情内容的设计思路。

3.3.1STELLASW设计思路

详情页从上到下，首先是产品主图及购买信息将商品主图、名称、价格、

配送等购买信息，再配合规格、数量和下方蓝底白字的加入购物车、立即购买

按键醒目美观又符合整体配色，还方便了用户进行购买。右侧客服中心醒目的

按键方便了用户快速联系客服及时了解产品具体信息，让用户更好的了解和购

买商品。商品分类可以让用户快速的进入所有商品页面或者特定类别商品分类

搜索页面，用户挑选和购买心仪的商品。

中间产品详情内容最上方用细长优美的的艺术字写出产品名称，下方整体

使用黑色背景配合ps锐化的精美产品图片，衬托产品的科技感和工业美感。

（如图14所示）

13

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

3.3.2STELLASW设计效果

14

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

图14STELLASW详情页效果图

15

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

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

3.4.1设计思路

登录注册页是整个店铺展现产品理念的。所以在了解和发掘禧玛诺品牌过

程中，根据品牌理念对登录注册页进行了设计，产品详情页设计我共分了三个

部分，店招导航、登录、注册。背景选择贴近自然的溪流俯视图加上白色的品

牌标语，表达出品牌亲近自然的品牌理念。精美的背景也能更加用户。

登陆界面注册界面，整体用一个地不透明度矩形框出，登录界面除了传统

的账号密码输入框下方还贴心的添加了忘记密码链接，可以方便用户在忘记账

号或密码时快速找回。还有第三方登录选项可以使用手机QQ、微信、支付宝

完成扫码登录。

注册界面包括自定义用户名、密码、确认密码、手机号码、手机验

证码输入框，最下方勾选《禧玛诺服务条款》。整体设计语言统一。（如图15

所示）

3.4.2设计效果

图15登录注册页效果图

16

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

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页是店铺成交的关键页面。所以在了解和发掘禧玛诺品牌过程中，

根据品牌特性对购物车页进行了设计，购物车页设计我共分了三个部分，店招

导航、选购商品信息、猜你喜欢。背景选择纯白点缀蓝色按键符合主题颜色，

使页面简洁大方。猜你喜欢模块通过后台算法推荐用户可能喜欢有兴趣的商

品，用户还可以通过自己点击左右按钮，刷新寻找自己喜欢感兴趣的商品进行

了解和购买。（如图16所示）

3.5.2设计效果

图16购物车效果图

17

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

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

3.6.1设计思路

订单结算页是店铺成交的重要页面。所以在了解和发掘禧玛诺品牌过程

中，根据品牌特性对订单结算页进行了设计，订单结算页设计我共分了四个部

分，店招导航、收货人信息、支付方式、所购商品。背景选择纯白点缀蓝色、

绿色按键符合主题颜色，使页面简洁大方。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

18

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

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

3.7.1设计思路

个人中心页是店铺中用户完成购买重要页面。所以在了解和发掘禧玛诺品

牌过程中，根据品牌特性对个人中心进行了设计，个人中心页设计我共分了六

个部分，店招导航、左侧个人中心导航、账户信息、钱包、会员卡、热销推

荐。背景选择纯白，点缀鲜艳明亮的按键衬托出简约时尚的气息。账户信息、

钱包可以让用户快速了解用户基础信息。

会员卡栏可以向用户展示加入会员提升会员等级后的优惠特权增加用户购

买欲望。热销推荐模块通过后台算法显示用户可能喜欢的热销商品，吸引用户

进行购买，提升用户购买欲望。（如图18所示）

3.7.2设计效果

图18个人中心效果图

4总结

毕业设计是一个总结我们对专业知识综合运用的过程，也是一个学习提高