茧缘家纺网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

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

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

2.1.2走进茧缘页版式...................................................................................4

2.1.3产品中心页版式...................................................................................4

2.1.4新闻中心版式.......................................................................................6

2.1.5联系我们版式.......................................................................................7

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

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

2.2.2网站LOGO设计.....................................................................................8

2.2.3首页原型...............................................................................................9

2.2.4走进茧缘页原型.................................................................................11

2.2.5产品中心页.........................................................................................12

2.2.6新闻中心页原型.................................................................................13

2.2.7联系我们页原型....................................................................................14

2.3网页动态特效设计....................................................................................14

3设计总结..................................................................................................................16

参考资料.........................................................................................................................17

I

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

茧缘家纺网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

1.1.1用户需求分析

自互联网时代到来，电子商务发展异常迅猛的当下，网上购物也逐渐成为

了人们日常生活中的便捷方式，越来越多的用户选择足不出户在网上购买家纺，

尽情享受网络时代的方便与快捷，家纺四件套，这类生活用品，越来越多的人

选择进行网购，因为便捷性和选择多样性。

茧缘家纺的建设背景是在B2C、B2B经济发展迅速，以及互联网经济普及

的现在。网络发展迅速,5G时代的到来会提供大量的网络用户，从而使得互联

网经济更为发达。大部分购入人群是居家女性，第一点，便捷性，通过网上购

物的方向选择商品，比线下实体店购买更加省时省力，方便快捷。第二点，选

择多样性，通过网络使得商品的选择变多，在网上可以浏览的家纺的样式，材

质，面料，选择相对于线下而比较，选择更多。

在同类型家纺网站中，发展较为良好的有五家网站，分别是水星家纺，富

安娜家纺，多喜爱家纺，博洋家纺，梦洁家纺。在这些家纺网站中，作为专业

家纺购置网站的是富安娜家纺，多喜爱家纺。从经营模式和技巧规模上看水星

家纺和梦洁家纺。

茧缘家纺避开与传统家纺品牌高度相似的线下宣传模式的大方向。选择使

用大型B2C平台，以线下宣传为辅的方式来进行品牌化的宣传，家纺是生活必

需品，更加注重品质。茧缘家纺以此为基点，通过了解用户的真正需求，和对

于产品的关注点以及树立茧缘家纺品牌的专业性，以此为背景来搭建品牌网站。

茧缘家纺通过“首页”页面，帮助用户快速导航，在首页页面上对于茧缘

能够产生一定的了解，而“产品分类”页面帮助客户找到自己心仪的家纺产品。

“走进茧缘”页面帮助用户了解品牌，产生信任度，从而对产品方面放心。人

们对家纺的选择了解的不够全面，可能会购买到不符合自己需求的家纺,通过

产品分类进入“详情页”，通过对单个产品的宣传让客户更好的了解家纺材质

的区别，选择需要的家纺。

1

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

1.1.2网站功能设计

茧缘家纺的网站实现的主要功能包括，首页、走进茧缘、产品中心、新闻

中心、以及联系我们五个模块，其中“首页”的功能主要是让用户在最短的时

间内了解网站的基本功能，其中包括了茧缘logo展示、商品推荐的展示、商

品详情的展示、产品宣传banner的展示以及底部的企业信息。“走进茧缘”展

示包括了公司简介展示、企业文化展示、品牌故事展示。“产品中心”主要通

过产品特征分类展示产品，是茧缘产品的特色部分。然后“新闻中心”页面主

要展示了品牌过往的大事件，取得的成就，产品技术上的突破，产品理念的宣

传。对于品牌的建设人才是必不可少的，所以在进行品牌建设的同时，也要通

过“联系我们”页面来展示联系方式，公司地址，达到吸引用户和人才的目的。

1.2网站结构设计

1.2.1网页层次设计

图1网站结构设计

2

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

1.2.2交互逻辑设计

当客户有购买家纺的想法，却没有明确的选择，那么当他打开茧缘家纺，

他可以根据自己的需求和喜好在产品页面中选择他喜欢的家纺，这样他选择了

喜欢的家纺之后可以点击购买。同时，在他由于网页的设计的独特，在闲逛网

页的时候，他看到了茧缘家纺的产品推荐页面，发现其中推荐的家纺四件套他

很喜欢，于是，点击进入详情页，了解到材质，面料，具体的细节工艺，发现

是自己的心仪所选，于是选择购买。

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

茧缘网页网站整体版面设计的时候运用了AdobePhotoshopCC2019来制

作网页的美化，同时运用了AdobeIllustratorCS6来制作网页首页的logo以及

细节化图标，网站首页的功能主要是让用户在最短的时间内了解网站的基本功

能并且通过简约的设计对于品牌有一个简单的认识，所以在网站首页时，将网

站首页的内容有繁化简，将导航栏、收藏、底部设计简约容易了解，并且在品

牌logo上进行设计，将品牌理念能够在logo上呈现出来。

图2网站首页线框图

3

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

2.1.2走进茧缘页版式

走进茧缘页是作为茧缘家纺的一个品牌页，向客户展示的是拥有优秀企业

文化，浓厚品牌理念的综合页面，主要是向用户介绍产品的由来和品牌的历史

与荣誉，从这个方面切入可以让用户了解到我们的品牌文化和品牌价值，从而

能够给用户营造我们品牌的独特化，让用户对我们的品牌和产品信赖与放心。

茧缘家纺基于完整的网站建设，通过品牌的产品和网店相互搭配，利用客户对

产品的亲近感和依赖感，使得客户更加了解产品的内容，从而使客户更加了解

我们的家纺产品内容，让大家更容易接受这些，从而突出我们网站的个性化特

点，输出品牌的优秀文化和理念，从而吸引顾客，达到引流的目的，提高用户

的体验质量。

图3走进茧缘线框图

2.1.3产品中心页版式

4

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

产品中心页是作为茧缘家纺的一个产品页，向客户展示的是各系列类型的

产品的综合页面，向用户介绍产品的材质工艺，让顾客可以快捷的找到自己需

求的产品，如果用户对于我们的系列产品感兴趣，那么他可以点击感兴趣的系

列查看。茧缘家纺基于完整的网站建设，通过品牌的产品之间的相互搭配，利

用客户对产品的亲近感和依赖感，从而把用户转换成顾客，通过网站个性化的

推荐，产品优势，吸引顾客，引导客户购买。

图4产品中心线框图

5

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

2.1.4新闻中心版式

新闻中心主要是茧缘家纺的产品进行更新迭代，取得了技术上的突破，获

得了产品上的荣誉，品牌过往的大事件在新闻中心这个专门的板块进行广而告

之，目的是加强用户对于产品的信赖，相信产品的品质，对于品牌的信任加深，

从而达到用户对于产品购买的这一目的，完成转化率。对于此页面设计，使用

了图文结合的模式，能够让用户一眼就获取到重要信息，从而了解品牌，加深

对品牌的印象，其次在配色上采用了网站主要配色，在此上添加花纹叠加，简

约而不简单。

图5新闻中心线框图

6

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

2.1.5联系我们版式

联系我们这一块分为两个小模块，联系我们和加入我们。其中联系我们主

要是给线下经销商的一个页面，主要是吸引线下家纺店引进品牌，达到加盟的

一个目地。加入我们这一块，主要是是为了吸引人才，一个品牌的进步与发展，

是离不开人才的,所以主要目的是吸引人才引进人才。

图6联系我们线框图

2.2页面视觉元素设计

2.2.1网站配色设计

关于茧缘家纺网站色彩设计与搭配主要是从网页主色系里面选择，主要是

从品牌理念中提取，以及对于家纺行业这一块，根据它的性质特点，然后进行

一定的定位，之后来进行的色彩搭配，家纺的特性以及公司的调性都包含在色

彩里面，选择了合适的配色。提高网页设计感。

图7网站配色设计

7

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

在组色选择时，选择了透明度不同饱和度不同绿色作为主色系，其中占比

从40%-60%不等。标准色中参照了运用于网页的标志标题主菜单和主色块，另

外主要搭配的形状有长方形圆形等对称类元素，其中占比5%左右，网页的色彩

搭配a主要运用了几个原则以及颜色的特点主要运用绿色，绿色，是极具自然

特征的颜色，同时，绿色是高频率颜色，人们会在高频率颜色的环境下产生平

静的感觉，这也符合产品的特性，同时绿色在设计中是一种平衡协调效果，深

浅不一的绿可以给空间营造不同的感觉。在一定程度上可以让用户感受到舒适，

达到品牌目的，其次，选择了透明度饱和度不同的绿色，虽然是同一色系，但

可以带来不一样的视觉体验，不会产生是视觉疲劳的同时，赏心悦目感到绿色

带来的舒适，同时白色，蓝色点缀搭配给人不期而遇春天的感觉，柔和的白色

与活泼的黄色给绿色带来生机如同春雨中的薄荷，感叹颜色带给我们的震撼与

魅力。

2.2.2网站LOGO设计

在网站设计中，Logo作为公司或者网站的标识起着非常重要的作用。一个

制作精美Logo不仅可以很好的树立公司形象，还可以传达丰富的产品信息。

网站Logo设计是网站特色和理念的集中表现，它用于传递网站的定位和经营

理念，同时也便人用户识别公司。一个网站的首页美观与否往往是初访者决定

是否进行深入浏览的标准，而Logo作为首先映入访问者眼帘的具体形象，其

重要性不言而喻。一般的网站logo有图案或者文字组合而成，茧缘家纺对于l

ogo设计侧重强调的是表达出茧缘家纺的内涵所在设计理念所在，所以主旨是

把家纺的柔和和舒适表达出来，所以选择了圆润的线条的来进行logo的设计。

同时为清楚的表达出我们的主体，所以我们将茧缘两个个字进行了设计，运用

幼圆字体，加以线条，字形的变化，加上家纺产业柔和舒适的产品特点，融合

而成的茧缘家纺logo。

8

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

茧缘家纺logo中内容包括了优美的字形，流畅的线条，还有产品的特点，

简洁大方，美观自然，浑然一体，迎合了网页主体。同时，考虑到家纺行业产

品特点的柔和舒适感，所以我们将字体进行了短暂的变形，使其更加自然和谐，

融为一体，同时，将颜色定义成网站主色调的绿色，相得益彰。茧缘家纺logo，

它符合了国际标准，同时包括了精美，独特与一体，与网站的整体风格相融合，

又能突出茧缘家纺网页的类型内容以及风格，完美地表达了出家纺家纺的主体

思想。

图8网站logo原型

2.2.3首页原型

9

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

茧缘家纺的首个页面选用了绿色和白色的搭配，让用户初浏览能够感觉到

页面带来的舒适感，产生好感，其次其中参杂了小元素和链接块。在模块的处

理上将中国风的元素融入到细节，将网页的细节化处理做到了细微。从细节中

体现出品牌理念，让用户感受到如沐春风般的温暖。在背景图片选取时，特意

选用了与书籍文艺类有关的图片，衬托出整个网店优雅清淡高雅的氛围，给人

一种儒雅的气质感觉。

图9首页原型

10

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

2.2.4走进茧缘页原型

在走进茧缘网页界面，主要是展示品牌理念，品牌主张，品牌思想。主要

分为三个部分，公司简介，企业文化，品牌故事，公司简介主要是对应于公司

的概括介绍，通过简短的介绍，让用户更直观的了解品牌，展示公司风采。企

业文化页输出企业特有的文化形象，从而树立企业的社会形象。品牌故事，输

出品牌精神，使得用户被这种精神感染，在用户心中留下印象，形成品牌口碑，

进而激发用户的潜在购买欲望。

图10走进茧缘页原型

11

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

2.2.5产品中心页

产品展示页面从网页高保真图片来看，页面设计十分简单简洁，由简单的

图文，链接以及图案组成。其中模块之间简洁分明，一目了然，对于图片的排

列与文字的组合，进行看一些巧思，看上去精致舒适，其中的线条组合与色块

的不同排列，让用户产生视觉美感，从而进行下一步点击查看，，以达到点击

购买的效果。

图11产品介绍页原型

12

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

2.2.6新闻中心页原型

新闻中心页面的设计采用了图文结合的方式，方便用户浏览，能够快速的

获取信息，标题醒目，能够达到很好的点击效果。整体设计是网站整体风格的

延续，对于新闻模块之间，进行了不同的组合排列，添加了配图，能够能加醒

目的突出特点，吸引用户的视线，从而更好的进行宣传与推广。

图12新闻中心页原型

13

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

2.2.7联系我们原型

联系我们页面的设计简洁明了，能够让用户在快速浏览中找寻需要的信息，

以达到联系的目的，点明此页面的主题，开门见山，目的明确，方便用户浏览，

引导用户行为，并且设置了一个地图模块，写明了地址，能够让用户的操作更

加简洁化，浏览时间减少，更好的获取信息。

图13新闻中心页原型

2.3网页动态特效设计

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

14

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

动态特效1：网页banner自动轮播（箭头可切换页面）

图14banner轮播特效效果

02动态特效2：网页点击特效（鼠标移动上去即可出现效果）

图15导航点击效果

02动态特效3：网站收藏效果（鼠标点击即可出现效果）

图16收藏点击效果

15

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

3设计总结

关于茧缘家纺网页的设计，整整耗时两个月的时间，中途进行了多次的修

改，非常感谢老师的辅导和指导帮助，在制作过程中为我解答疑惑。在