宁波博洋服饰集团有限公司网站Web端网页设计

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

目录

1网站设计需求分析..................................................1

1.1网站建设背景...............................................1

1.2网站结构设计...............................................3

2网站视觉设计......................................................4

2.1页面版式设计...............................................5

2.2页面元素设计..............................................17

3网站前端设计.....................................................19

3.1网页高保真原型设计........................................19

3.2网页动态特效设计..........................................25

4设计总结.........................................................31

参考资料............................................................32

I

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

宁波博洋服饰集团有限公司网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

宁波博洋服饰集团有限公司，创立于1995年，该公司旗下品牌估值达64.26

亿人民币。年销售规模高达30多亿元、市场增长实力每年30%递增，呈现出广

阔的前景，成为深受当代中国新青年喜爱的时尚潮流品牌。目前全国实体门店20

00余家，主要分布在华东、东北、华北、华中等核心区域，其中以北京、杭州、

宁波、合肥、石家庄、郑州、济南等城市为主要战略性城市。单店销售规模高

于500万、形象佳的门店在各地市级城市核心区域均有开设。

选择做宁波博洋服饰集团有限公司网站这个选题，是因为它坚持着"因改变

而惊喜"的创新主张，秉持着"我有我的方式"的时尚态度，宣扬"LiveitReal"

的品牌精神，为中国年轻消费群体打造专属于他们的潮流风尚服饰品牌。品牌

的产品包括T恤系列，衬衫系列，外套系列，风衣系列，羽绒服系列，裤类系

列等。服装从生产制作，销售，物流都是经过了严格把控，确保客户购买的产

品品质。通过品牌推广、社会化的生产、加盟之路，已统一企业形象、统一管

理、统一模式、统一核算、统一培训、为客户提供更加优秀的品牌和产品。

基于对该品牌这一网站的了解，以及对服装的喜欢而关注这个网站，并且

发现了品牌网站所存在的问题，为了将这个官方网站以更加完美的形象展示给

大家，让更多的人了解该品牌服装。我通过查询该品牌的官方网站以及京东旗

舰店,唯品会官方特卖旗舰店，天猫旗舰店信息了解到品牌的背景资料，相关产

品，视觉风格，人群定位，对用户的需求进行分析调研，通过对大部分的网站

功能设计和网页结构设计，我将网页的风格定位青春有活力。

1.1.1用户需求分析

该品牌主要针对的消费人群是年轻人，年轻人一直是网络购物的主要消费

人群，其占比非常大，服装是生活中不可缺少的一部分。而除了产品的好坏以

外，最能打动消费者的是品牌的价值。品牌的价值很重要，logo，产品包装等

等都很重要。而品牌网站的建设中式程度是不可忽视的一部分，它决定了消费

者要不要继续了解你的品牌和产品。品牌的定位是青春有活力，舒适时尚。所

以我在页面上针对年轻消费者去设计，打造一个让消费者产生记忆点的网站。

1

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

1.1.2竞品分析

表1竞品分析表

品牌产品定位目标消费群体品牌主张产品卖点

时尚百搭，柔软舒

适，价格亲民，潮

时尚，休闲，年轻，年轻人和年轻化的

真维斯名牌大众化流，优质的材料，

舒适中年人群体

精致的设计，精湛

的工艺

活力产品线：针对1

高颜值，高品质，6-22岁学生群体传递自信，舒服，物美价廉，款式流

森马时尚，有活力，年时尚产品线：针对1年轻时尚的生活方行，优质的服务，

轻，有个性8-25岁都市化生式设计精巧，高品质

活的职业人群

针对18-35岁之间

款式新颖，做工精

青春，年轻，时尚，的年轻学生、都市为顾客呈奉物超所

以纯细质量好，品质有

优质，平价时尚人士、中高端值的优质时装

保障，价格实惠

商务人士

年轻有活力，青春，做自己，发现自我，优质的品质，专业

针对18-25岁的年

美特斯邦威有个性，时尚，大发挥潜能，追求极的服务，时尚，有

轻、活力的消费者

众化致个性，自然

通过对同类产品的分析，得出服装的定位以年轻、时尚、青春、舒适、高

品质、平价、大众化、有活力为主，目标消费群体为年轻学生、时尚人士、年

轻有活力、都市化生活的消费群体。所以该品牌面向的消费群体为年轻或者是

追求时尚的人群。品牌主张为“因改变而惊喜，我有我的方式”，产品卖点为年

轻时尚、有个性、品质有保障。

1.1.3网站功能设计

该网站Web端网页设计主要实现的功能模块有：

1）首页：主要由banner、公司介绍、热卖推荐、产品分类组成。

2）关于我们：由公司介绍和企业文化组成。

2

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

3）品牌中心：由品牌故事和大事记组成。

4）产品展示：由Banner、新品尝鲜、男装专区、女装专区、IP联合系列、

热销专区、情侣专区等构成。

5）联系我们：由加盟介绍、加盟优势、加盟流程、加盟条件、加盟扶持这

五个板块构成。

6）登录和注册、忘记密码：如果用户没有账号的话可以直接点击注册进行

账号注册，有账号的话可以直接点击登录进行登录后进到官网首页，忘记密码

是顾客有账号但是不记得密码，可以通过忘记密码重新设置密码。

1.2网站结构设计

1.2.1网页层次设计

想要设计一个优秀的网站，网站的结构是非常重要的，一个逻辑清晰的网

站结构更能够让客户明白我们的网站的布局和包含的产品，可以让客户一眼就

能了解我们网站的大致结构，能帮助客户快速找到自己需要浏览的内容的位置。

如图1所示。

图1宁波博洋服饰集团有限公司网站结构图

1.2.2交互逻辑设计

本网站最重要的就是人机交互，方法是点击鼠标实现操作。用户在浏览器

中点击各个网页的文字链接或者图片，实现页面之间的跳转。

本网站的每一个页面，都有一个导航栏。导航栏上由官网首页、关于我们、

品牌中心、产品展示、联系我们等五个按钮，用户点击每个按钮可以实现每个

3

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

页面之间的跳转和进入到相应的模块。

（1）在官网首页，用户可以点击“登录”按钮，就可以进入到登录页面，

登陆页面输入相关的账号信息就可以登录进入官网首页，如果用户

不记得密码，可以点击忘记密码，进入到忘记密码页面，填写相关

信息，设置好新密码后，点击“立即登录”按钮，可以进入登录页

面，进行登录就可以了。如果用户没有注册账号的话，可以通过点

击“注册”按钮，进入到注册页面，填写注册相关的信息后会显示

注册成功，点击“取消”按钮可以留在注册页面，鼠标点击“确认

登录”按钮，会跳转到登录页面。在官网首页，用户可以点击热销

产品下的产品，可以进入到相关的产品详情页进行购买。用户点击

返回顶部可以跳转到官网首页的开头。

（2）在关于我们页面中，用户把鼠标停留在“关于我们”上，会出现下

拉菜单公司介绍、企业文化这两个选项，点击相应的按钮就会跳转

到相应的页面中，同时公司介绍和企业文化两个页面也可以互相跳

转，还会出现导航栏，鼠标移出关于我们，导航栏就会消失。

（3）在品牌中心页面里面由品牌故事和大事记，点击相应的按钮可以实

现页面之间的跳转，大事记里面点击1995可以切换到动态面板之间

的转换。让客户更加了解我们的品牌故事和荣誉，使得客户对我们

的产品更加信赖。相信我们的产品品质是有保障的。

（4）在产品展示页面里，客户可以通过点击新品尝鲜、男装专区、女装

专区、IP联合系列、热销专区、情侣专区切换到相应的动态面板，

点击动态面板的产品下的立即选购，可以进入相应的产品详情页。

（5）在联系我们页面中，可以看到有五个按钮，分别是加盟介绍、加盟

优势、加盟流程、加盟条件、加盟扶持，鼠标单击相应的按钮可以

进入到相对应的板块信息，这样方便客户了解我们的加盟信息，有

兴趣的可以通过页头的电话或者邮箱进行联系。

2网站视觉设计

网站的视觉设计包括logo、文字、banner、动画效果、色彩、风格、版式

等方面，用户来到你的官网，第一眼看到的就是你的风格和格调，你能不能吸

引顾客继续浏览下去，全靠第一眼印象。如果你的风格设计的不错，但是配色

方面不到位，也是留不住客户的，所以，这些方面都是非常重要的，需要对网

4

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

站进行严格的规划和设计的。

2.1页面版式设计

页面版式的设计是非常重要的一个部分，页面版式设计在整个页面中起到

了信息传播和引导性的作用，它决定了整个网站的风格和视觉效果，在这里我

主要用的是AxureRP8软件来制作低保真线框图，在制作线框图之前，我对网

站的页面尺寸大小、内容结构都进行了合理的布局。

2.1.1网站首页

图2官网首页结构图

5

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

图3官网首页线框图

此页为首页布局图，如图所示为结构体和线框图。主要部分为顶部导航和

页尾部分，顶部最左侧的是logo，然后是邮箱和电话，右侧是登录和注册按钮。

第一部分是导航栏，导航栏有五个模块，用户点击不同的模块可以进入相应的

页面。导航栏下面的是第二个板块，第二个板块是Banner，Banner里面放了产

品的展示图，以便于吸引客户的眼球，点击Banner可以进入相应的产品详情页。

第三个板块展示的是公司介绍，热卖推荐以及产品分类三个模块，每个模块分

别用了不同的版式，每个模块都用了不同的文字修饰元素，有圆角矩形、矩形，

以及文字有大小的区别，这样使得我们的产品更加具有吸引力，吸引客户眼球。

第四个板块是返回顶部的按钮，点击可使页面回到顶部，这样避免了页面太长，

6

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

想看前面的内容，还要手动往前翻，节省了时间。第五个模块是页尾部分，展

示的是微信公众号二维码，官方微博，天猫旗舰店，京东旗舰店，友情链接。

2.1.2关于我们

图4关于我们结构图

7

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

图5关于我们线框图

此页为关于我们布局图，如图所示为结构图和线框图。主要部分为顶部导

航和页尾部分，顶部最左侧的是logo，然后是邮箱和电话，右侧是登录和注册

按钮。第一部分是导航栏，导航栏可以帮助用户定位，找到想要浏览的内容。

导航栏下面的是第二个板块，第二个板块是Banner，Banner里面放了产品的展

示图，以便于吸引客户的眼球，点击Banner可以进入相应的产品详情页。第三

个板块展示的是关于我们，关于我们包括了公司介绍和企业文化两个模块，这

两个模块用了两个按钮，这样使得我们的产品更加具有吸引力，吸引客户眼球。

第四个是返回顶部按钮，点击可回到页面顶部，第五部分是页尾部分，有天猫、

友情链接、微博等。

8

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

2.1.3品牌中心

图6品牌中心结构图

图7品牌中心线框图

此页为品牌中心页，如上图所示为结构图和线框图，顶部最左侧的是

9

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

logo，然后是邮箱和电话，右边的是登录和注册两个按钮，点击按钮可以进入

到相应的页面。第一部分是导航栏，可以帮助用户定位，第二部分为品牌中心，

包括品牌故事和大事记两个按钮，点击按钮可以展现相应的内容，第三部分是

返回顶部的按钮，点击可回到页面顶部，第四部分是页尾部分，包括天猫，京

东，微信公众号等。

2.1.4产品展示

图8产品展示结构图

10

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

图9产品展示线框图

此页为产品展示页，如上图所示为结构图和线框图，顶部最左侧的是

logo，然后是邮箱和电话，右边的是登录和注册两个按钮，点击按钮可以进入

到相应的页面。第一部分是导航栏，可以帮助用户定位和找到想要浏览的内容，

第二部分为产品展示，有新品尝鲜，男装专区，女装专区，IP联合系列，情侣

专区，热卖专区六个标题按钮，下面是产品的展示以及购买按钮，点击相应的

标题按钮，可以展现对应的产品，点击产品下方的购买按钮，可以进入相应产

品的详情页，第三部分是返回顶部的按钮，点击可回到页面顶部，第四部分是

页尾部分，包括微信公众号二维码、微博、友情链接等。

11

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

2.1.5联系我们

图10联系我们结构图

12

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

图11联系我们线框图

此页为联系我们页，如上图所示为结构图和线框图，顶部最左侧的是

logo，然后是邮箱和电话，右边的是登录和注册两个按钮，点击按钮可以进入

到相应的页面。第一部分是导航栏，可以帮助用户更加方便的找到并定位想要

的内容，第二部分为动态面板，有加盟流程，加盟介绍，加盟优势，加盟扶持，

加盟条件五个按钮，点击按钮可以展现相应的内容，第三部分是返回顶部的按

钮，可以点击返回顶部按钮，跳转到顶部，第四部分是页尾部分，有京东旗舰

店，微信公众号二维码，天猫，官方微博，友情链接。

13

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

2.1.6详情页

图12产品详情页结构图

14

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

图13产品详情页线框图

此页为商品详情页，如上图所示为结构图和线框图，顶部最左侧的是

logo，然后是邮箱和电话，右边的是登录和注册两个按钮，点击按钮可以进入

到相应的页面。第一部分是导航栏，点击模块可以进入到相应的页面，第二部

分为商品展示，左侧为商品展示图，右边为商品名称，商品规格，价格，发货

地，购买按钮以及加入购物车的按钮，第三部分为产品信息图，展现了产品的

尺码，材质，颜色，模特展示等，第四部分是返回顶部的按钮，点击可定位到

15

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

顶部，第五部分是页尾部分，有京东旗舰店，微博，友情链接等。

2.1.7登录注册

图14登录注册结构图

图15登录线框图

16

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

图16注册线框图

此页为登录注册页，如上图所示为结构图和线框图，顶部最左侧的是

logo，然后是邮箱和电话，在右边有登录和注册两个按钮，点鼠标点击相应的

按钮可以跳转到相应的页面。第一部分是导航栏，点击相应的模块可以进入到

相应的页面，第二部分为登录注册页，采用了简洁明了的排版方式，让客户一

眼就可以看出来要做什么，第三部分是返回顶部的按钮，点击跳转到顶部，第

四部分是页尾部分，有微博，京东旗舰店，微信公众号二维码等。

2.2页面元素设计

2.2.1标准字

网页的正文用的Adobe黑体Std字体28号字，导航用的是黑体24号字，

标题用的是微软雅黑36号字，28号字，辅助字体是Arial字体，24号字和

16号字。如图17所示。

图17网页字体规范图

17

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

2.2.2网站配色

网站的配色是根据品牌文化延展开来的，主色用的是蓝色，蓝色象征着时

尚、流行，清新、洁净、清澈、纯洁，给人一种朝气蓬勃、舒适的感觉，点缀

色为橙色、黄色，粉色用来区分页面层次感。如图18所示。

主色#D1E4F3

辅助色#FEC200#FF9966#FFCCCC

图18网站配色

2.2.3导航

导航设置的是最常见的顶部导航，导航的设置，可以让用户快速的看到模

块，引导用户，协助用户在页面之间进行移动，切换页面，提示用户当前网站

的位置。如图19所示。

图19导航

2.2.4网站logo

网站的logo代表了企业的形象，简洁鲜明的标识易于记忆和识别，通过标

识，可以更快，更准确的识别和判断出商品的质量。如图20所示。

图20网站logo

2.2.5弹窗

网页中的弹窗是非常常见的效果，点击相对应的内容就会弹出弹窗提示。

如图21所示。

18

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

图21弹窗

3网站前端设计

3.1网页高保真原型设计

在制作网页高保真原型设计的过程中，我使用的工具是AxureRP8和Adobe

PhotoShop。

19

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

图22首页效果图

此页为首页效果图，网站首页最显眼的是banner，我在banner里面放了三

张热卖的产品，网站的logo是放在左上角的，logo是企业的形象，客户进入网

页，一眼就能看到，公司介绍、热卖推荐和产品分类三个模块用的是不同的排

版，这样显得不那么单调。

20

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

图23关于我们效果图

此页为关于我们效果图，我在导航栏下面放了张图片，显得不那么单调，

在图片里面做了个标题动态面板，进入对应的页面，标题也会随着改变，可以

让客户清楚的知道在那个页面，企业文化颜色用了红色，凸显出企业文化的重

要性，让客户一眼就能看到。

图24登录页面效果图

21

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

图25注册页面效果图

此页为登录注册效果图，我用的是比较传统的排版，方便客户操作起来简

单便捷，在登陆和注册页面中，我用了一些图标和文本框提示，这样可以使用

户一眼就能明白要干什么。

图26产品展示效果图

22

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

此页为产品展示效果图，最显眼的是banner区域，我放的是三张热卖的产

品图，可以让用户一眼就能看到热卖产品是哪个，用户点击banner可以进入到

相应的详情页，产品展示我分成了六个按钮，用户点击相应的按钮可以显示相

对应的产品展示，这样使得页面版式更加整齐。

图27详情页效果图

23

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

此页为详情页效果图，我用的是比较传统的排版，方便客户操作起来简单

便捷，用户可以选择产品的尺码，颜色，数量加入购物车，加入购物车会有提

示弹窗，用户点击相应的颜色，左侧产品图会显示产品的图片。

图28品牌中心效果图

此页为品牌中心效果图，展现的是品牌故事和品牌的荣誉，在这个内容里

面我做了两个按钮，一个是品牌故事，一个是大事记，用户可以通过点击相应

的按钮进入对应的页面，在品牌故事里面，我设计了一个了解更多的图标，用

户可以通过点击了解更多这个图标进入到品牌故事页面。

24

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

图29联系我们效果图

此页为联系我们效果图，展现的是加盟的内容，在这个内容里面我做了五

个按钮，加盟介绍，加盟优势，加盟流程，加盟条件，加盟扶持，这样可以使

得用户更加了解我们的加盟程序。

3.2网页动态特效设计

3.2.1网页动态特效原型

动态特效1：Banner的轮播效果

Banner效果图1

25

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

Banner效果图2

Banner效果图3

在首页和产品展示里面都放了Banner的轮播，打开Axure软件，建立动态

面板，在动态面板里面设置三个状态，每个状态包含一张Banner图片，然后在

页面载入时设置动态面板自动轮播。

动态特效2：下拉菜单和滑动条

图30下拉列表和滑动条

在关于我们导航栏中设有下拉菜单，下拉菜单的内容包括公司介绍和企业

文化，当鼠标移入关于我们时，会显示下拉菜单，点击下拉菜单中的菜单项，

可以进入相应的网页，移入菜单项，字体颜色会发生变化，这样便于识别，当

鼠标移入关于我们时，会显示滑动条，移出后会隐藏滑动条。

26

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

3.2.2网页动态特效实现

Banner的轮播特效的制作方法

（1）建立一个1920*700像素的动态面板，命名为图片，在图片动态面板

里面建立三个面板状态，命名为t1,t2,t3，然后在三个面板状态中

添加Banner图片，保存。

（2）建立一个265*126像素的动态面板，命名为序号，在序号动态面板

中建立三个状态，命名为x1，x2，x3，然后在x1面板状态里面添加

三个椭圆形，大小为53*53像素，并加上文字1，2，3，文字为Arial

字体，36号字，加粗，白色，状态一中第1个椭圆形为红色，第

2、3个椭圆形为黑色，状态二中第2个椭圆形为红色，第1、3个椭

圆形为黑色，状态三中第3个椭圆形为红色，第1、2个椭圆形为黑

色，然后保存。

（3）绘制一个向左，向右的形状，背景为矩形，颜色为灰色，不透明度

为27%，然后向左的形状和矩形组合，命名为向左，向右的形状和矩

形组合，命名为向右，向左向右组合进行隐藏。点击选中向左，向

右组合，在右侧的用例里面添加鼠标单击时，鼠标移入时，鼠标移

出时。设置如图所示。

图31向左设置

27

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

图32向右设置

（4）点击图片动态面板，选中，在右侧的用例里面设置鼠标移入、移出。

如图所示。

图33鼠标移入移出设置

（5）在页面载入时设置图片为Next逐渐out2000ms逐渐in2000mswra

p循环间隔500毫秒delayfirstchange，在序号动态面板上添加三

个热区，命名为热区1，2，3，然后对热区进行如图所示的操作。

28

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

图34设置热区1、热区2、热区3

Banner轮播特效说明：

（1）左右切换：点击向左向右的按钮可以对Banner进行随时切换。

（2）序号切换：鼠标移入对应的序号，可以切换到相应的Banner，并停

止Banner的自动轮播，鼠标移出，Banner自动轮播。

（3）悬停效果：鼠标移入banner上，停止banner的自动轮播，并显示

左右切换按钮，鼠标移出banner，继续自动轮播，并隐藏左右切换

按钮。

下拉列表和滑动条的制作方法：

首先在关于我们下面加一个垂直菜单，菜单命名为关于我们菜单，设置Item

29

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

1为公司介绍，Item2为企业文化，在两个Item上面加上两个热区，分别命名

为公司介绍1和企业文化2，加上一个滑动条，颜色为橙色，在公司介绍1和企

业文化2热区做鼠标单击、鼠标移入时、