CINVAI KROSE网站Web端网页设计

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

目录

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

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

1.1.1用户需求分析.......................................................................................1

1.1.2网站功能设计.......................................................................................2

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

1.2.1网页层次设计.......................................................................................2

1.2.2交互逻辑设计.......................................................................................2

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

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

2.1.1网站首页版式.......................................................................................3

2.1.2品牌故事页版式...................................................................................5

2.1.3全部产品页版式...................................................................................6

2.1.4女士专区页及男士专区页版式...........................................................7

2.1.5时尚配饰页版式...................................................................................8

2.1.6拉杆箱系列页版式...............................................................................9

2.2页面视觉元素设计....................................................................................10

2.2.1网站配色设计.....................................................................................10

2.2.2网站图标设计.....................................................................................11

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

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

3.1.1网站首页原型.....................................................................................11

3.1.2品牌故事页原型.................................................................................13

3.1.3全部产品页原型.................................................................................14

3.1.4女士专区页及男士专区页原型.........................................................15

3.1.5时尚配饰页原型.................................................................................16

3.1.6拉杆箱系列页原型.............................................................................17

I

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

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

4设计总结..................................................................................................................19

参考资料.........................................................................................................................20

II

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

CINVAIKROSE网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

1.1.1用户需求分析

自5G网络兴起以来，随着消费水平的不断提高和网购的快速普及，各种箱

包逐渐成为大家不可或缺的配饰，已经由简单的用于装东西功能逐步过度服饰

搭配，甚至是奢侈品等领域！越来越多的购物者们选择足不出户就能在网上购

买，尽情享受网络购物的便利与快捷。

CINVAIKROSE品牌有着清晰的愿景，精选代表品牌的牛皮面料为主要面料，

成为实践应用更可靠的条件，也是保证其产品广泛应用，让整体产品品质更有

优势，同时把东方美学和西方元素完美结合，保留一贯的法式风情，灵活运用

艺术设计，证明品牌实力。

在奢侈品箱包网站中，我国箱包行业的头部品牌市占率较高的主要是LV、

古驰、蔻驰、MK等品牌。其中LV是LVMH集团的旗下品牌之一，古驰的母公司

是开云集团，随着奢侈品需求持续走高，两家企业全球营收持续的提升、数据

显示，其中2021年国内市场占比39%。我国箱包加价率低，箱包新零售加速我

国消费结构升级。我国箱包产业链长，箱包销售渠道稳定。未来电子商务以及

相关平台运营模式日益成熟，运营成本将持续降低，箱包行业的电商化将是大

势所趋。

CINVAIKROSE避开与大牌奢侈品的价格竞争。国内一线品牌以国际品牌形

象出现在中国市场，如DISSONA、COBO等。这类公司在国内采用直销与加盟相

结合的方式，在国内渠道拓展迅速，销售点多，覆盖国内主要市辖区、省级城

市等大都市。而CINVAIKROSE品牌另辟蹊径，通过了解用户的真正需求，以及

精选代表品牌的牛皮面料为主要面料，让整体产品品质更有优势，把东方美学

和西方元素完美结合，保留一贯的法式风情，灵活运用艺术设计来吸引客源，

以此为背景建设网站。

CINVAIKROSE通过“全部产品”帮助客户导航，让客户找到自己心仪的箱

包。CINVAIKROSE通过“品牌故事”页面让顾客更好地了解CINVAIKROSE的

品牌历程。通过“女士专区”“男士专区”“配饰专区”页面，对男女产品的分

类及配饰的具体展示让客户更好的选择自己所需，达到轻松购物的效果。

1

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

1.1.2网站功能设计

CINVAIKROSE的网站实现的主要功能包括首页、品牌故事、全部产品、女

士专区、男士专区、时尚配饰、以及拉杆箱系列七个模块，其中“首页”的功

能通常是让用户在短时间内掌握网站的最新产品。其中包括了logo展示、登录

图标的展示、新产品宣传banner的展示、商品的展示以及底部的企业信息。“品

牌故事”页面主要展示了CINVAIKROSE的品牌个性，让客户了解产品采用精选

的材料的优势、独特创新设计。“全部产品”展示包括了顶部导航栏、logo展示、

登录图标的展示、商品详情的展示、底部的企业信息展示。“女士专区”主要展

示了女士产品，让客户通过认真筛选，选择自己心仪的包包，是CINVAIKROSE

网站的特色部分。“男士专区”主要展示了男士产品，让男性客户通过认真筛选，

选择适合自己成熟品味的箱包。然后“时尚配饰”页面让客户选择心仪的箱包

后，来用配饰来更好的搭配箱包。最后“拉杆箱系列”页面主要行李箱商品的

展示。同时每个板块都包含了logo、导航栏、登录按钮。

1.2网站结构设计

1.2.1网页层次设计

图1网站结构设计

1.2.2交互逻辑设计

本网站最主要的人机交互方式是鼠标点击操作、更换图片及弹出弹框。用

户在浏览器中点击网站各页面的导航栏的文字链接或图片按钮，实现页面间的

跳转。触碰导航栏标题，文字变色。

本网站的每一个网页，都有一个导航栏。导航栏上设有首页、品牌故事、

2

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

全部产品、女士专区、男士专区、时尚配饰、以及拉杆箱系列按钮，可以前往

网站的相应模块。

（1）在网站首页中，用户可以点击产品展示中的一些产品，进入到产品展

示的详情页。

（2）在品牌故事中，有CINVAIKROSE简介。这个页面是对CINVAIKROSE

的介绍，就是让客户知道我们是做什么的，我们的品牌理念，让消费者对我们

的产品更加的放心。

（3）在全部产品中，有女士箱包、男士箱包、时尚配饰类目，可以在每个

类目里点击产品进行跳转，客户点击产品图进入产品描述页，可以点击购买进

入相应的页面。

（4）在女士专区中，客户进入到女士专区展示能看到独特设计的女士包包，

点击产品图可以直接进入产品详情页中。

（4）在男士专区中，客户可以选择符合自己品味的箱包，点击产品图可以

直接进入产品详情页中。

（5）在时尚配饰和拉杆箱系列中，客户可以能够选择适合搭配配饰和行李

箱，点击具体产品图可以直接进入产品详情页中。

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

使用工具软件：主要使用PS、RP软件完成本模块的页面版式设计。如图1

是网站首页的版式设计，主要部分为导航栏、Banner、重磅热品、男士专区、

新款专区以及底部引导等。Banner设计将给客户一种强烈的视觉冲击感，激发

消费者的购买欲望，从而促进销售。

3

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

图2网站首页线框图

4

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

2.1.2品牌故事页版式

图3品牌故事页线框图

此图是品牌故事版式图，主要部分为导航栏、Banner、品牌故事及品牌个

性以及底部引导等，主要介绍了公司的企业文化和背景、同时通过这种简洁明

了的版式设计让用户更清晰的了解到品牌。

5

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

2.1.3全部产品页版式

图4全部产品页线框图

此图是全部产品版式，主要部分是商品展示，女士专区、男士专区及配饰

专区分区展示商品，我们根据具体的分块，版式设计分区域，给产品展示的空

间，将版式设计由繁化简、分类后的服装更加让客户快速的找到自己需要的产

6

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

品，通过这样的方式大大节省了客户的时间，同时也提升了客户对店铺的忠诚

度。

2.1.4女士专区页及男士专区页版式

图5女士专区及男士专区页面线框图

此图是是女士专区及男士专区版式，主要部分为导航栏、Banner、产品展

示、以及底部引导栏。采用矩形的框架设计、简约大方、在一定程度上进行美

化与设计，让顾客一眼就能看到自己喜爱的潮流包，将会是精英人士必不可少

7

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

的时尚单品。

2.1.5时尚配饰页版式

图6时尚配饰页面线框图

此图是时尚配饰版式页面、主要部分为导航栏、Banner、产品展示、以及

底部引导栏。主要展示为商品区展示、客户可以对选中的产品进行配饰搭配，

8

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

配饰在整体搭配中的作用，就好比画龙点睛的最后一笔，让整体灵动起来。

2.1.6拉杆箱系列页版式

图7拉杆箱系列页面线框图

此图是拉杆箱系列版式页面、主要部分为导航栏、Banner、产品展示、以

及底部引导栏。版式设计简约大方，让客户能够快速找到自己想要的产品，从

而促进消费。

9

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

2.2页面视觉元素设计

2.2.1网站配色设计

关于CINVAIKROSE网站的主要消费群体是成熟、自信、独立、高贵、大

方的时代女性。主色上选用饱和度比较高的的颜色，黑、灰、白经典搭配加上

米色、点缀色为橙色、浅蓝色、红色以及蓝色，主色调使整个页面显得高级、

简约、成熟，搭配这种配色符合时代女性追求的品质，更符合网站简约高端的

风格设计。

图8网站配色设计

在组色选择时，网页的色彩搭配主要运用几种颜色的特点，主色上选用黑灰

白三色加上米色、点缀色运用了橙色、浅蓝色、红色以及蓝色，红色，让人感

到温暖。红色象征着激情且活力、有强烈的刺激性，所以红色来弱化单一色彩

的表现力，在一定程度上能吸引住消费者的目光，使之眼前一亮，用红色点缀

显得高贵而富有品味；橙色代表温暖、激情和活泼的颜色，是暖色中最温暖的

颜色，所以我们引入橙色点缀，让色彩感更饱和。同时我们掺杂了浅蓝色与冷

色调的蓝色，浅蓝色象征着沉稳、安定，这种颜色冷静且理智、淡化之后的蓝

色给人一种个性的色彩。而冷色系的蓝色，给人以沉稳的特性，具有科技感、

理智的意向，通常与黑色白色作为搭配，是一种常见的色彩搭配，给整个页面

带来神秘酷炫的感觉；几种颜色的混合搭配使得构成图形更加明显，中间的扩

张感和收缩感综合，让人感觉到了一种平和安稳柔顺恬静满足，同时又增加了

一些低调含蓄的内涵，让人感觉到高级质感。

10

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

2.2.2网站图标设计

图9网站图标设计

CINVAIKROSE网站小图标一共制作了一个用户小图标。图标设计理念的本

质是减到最简形态，作用是辅助理解。用户在使用网站时会注意观察网站的细

节化处理，小图标就是网站的细节化处理的，最好体现注意了细节处理简约而

具有凝聚性。我采用简单的线条组成，色彩搭配简单不繁琐。

3网站前端设计

3.1网页高保真原型设计

使用工具软件：在网页高保真原型设计过程中，我运用到了PS、RP等软件。

3.1.1网站首页原型

首先制作的是时尚箱包类型的网站，将LOGO放在网页正中间角的位置可以

让客户快速就能知道是什么网站，网站上的LOGO就相当于实体店的门面招牌，

所以把LOGO展示在正中间可以让消费者第一眼就看到，中间放置了导航栏，导

航栏的作用就是引导人们在浏览过程中查看网页各种类型的内容。导航栏下面

做了banner图，展示最新的活动海报，banner下方是商品展示区域，在商品的

展示区域主要进行了排版设计，我把商品的排列设计的非常整齐，进行了设计

的排版可以使版面变得丰富起来、变得更有活力一些，简约大方设计感会很舒

适、让用户更有兴趣的浏览后面的页面，这样可以加深顾客对网页好的印象。

商品展示区域下方是网页的尾部，展示网页版权信息等。

11

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

图10网站首页原型

12

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

3.1.2品牌故事页原型

品牌故事页面白色调为主，其中采用图文混合排版的板块。将网页设计的简

约大方、排版细节化处理做到了细微。图中灰色与冷色浅紫的搭配融合自然，

即引起人们的注意，又提升了网页的整体形象气质以及规格。简约大方的版式

设计使整个网店优有品味、高级的氛围感，给人一种舒适的感觉。

图11品牌故事页原型

13

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

3.1.3全部产品页原型

全部产品网页界面，主打了一张简约的设计。这张页面通过分过模块分工

版式设计、线条与文字的搭配，将网页的内容从侧面衬托出来，同时具体的分

类以及每个模块的查看更多，点击进去能跳转到相应的页面，让客户能够明确

的选择自己所需、简约工整的设计体现了网站品味与定位。

图12全部产品页原型

14

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

3.1.4女士专区页及男士专区页原型

女士专区和男士专区页面的界面设计版式是一样，为了让受众更清晰的了解

到品牌的商品，为了满足男性、女性的审美需求，颜色设计色彩经典大气，精

选优质材质，利用精致的巧妙设计、简约大方的线条营造沉稳成熟的气质，所

以版式设计简约大方、客户一眼就能看到自己喜爱的时尚单品。页面设计十分

简单简洁，其中的线条与形状的搭配色彩的碰撞又突出了杂志观感的不同感觉。

图13女士专区页及男士专区原型

15

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

3.1.5时尚配饰页原型

时尚配饰网页界面，页面设计简洁、采用清雅稳重的设计风格，将CINVAIKRO

SE网站散发出一种高品调高格调气息，让客户能够舒适放松的氛围中进行购物，

从而进行消费，同时为品牌的口碑的传播有一定效果作用。

图14时尚配饰页原型

16

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

3.1.6拉杆箱系列页原型

拉杆箱系列网页界面，页面设计的简洁大方、banner设计采用清新且沉稳

的风格，来吸引消费的眼球。产品采用方块展示，放在正中间，版式设计整齐、

大方，突出产品、让视觉冲击效果更强烈，同时整体的配色带给消费者舒适的

购物体验。

图15拉杆箱系列页原型

17

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

3.2网页动态特效设计

网页动态特效使用AxureRP8实现。

动态特效1：网页文字特效（鼠标触碰导航栏文字变色）

图16网页文字特效效果

动态特效2：网页图片更换特效（鼠标触碰图片更换图片）

图17网页图片更换特效效果

18

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

4设计总结

这次CINVAIKEOSE网页的设计，来来回回耗时很多，中途进行了三到四次

的修改，真的非常感谢指导老师的辅导和指导帮助，我才能够按时完成，给自

己的丰富多彩的大学生活划上圆满的句号。

在制作过程中，体会到了独自制作网页的难处，困难比较多，真是万事开

头难，不明白如何入手，需要花费很长的时间去研究、去解决、发现了之前学

习专业课时不太懂的部分、现在通过研究询问，巩固了之前不足。最后做完了

有种如释重负的感觉。首先，在选题上，经过多次的筛选才确定。在设计网站

的过程中，开始是用PS软件进行设计，但在设计后端程序代码的过程中，技巧

与经验的不足，最终放弃了，重新选用AxureRP这个软件。在页面的版