慢时光手工皮具网站Web端网页设计

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

目录

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

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

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

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

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

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

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

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

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

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

2.1.2所有宝贝页版式...................................................................................4

2.1.3新品页版式...........................................................................................4

2.1.4特价清仓页版式...................................................................................5

2.1.5关于我们和联系我们页版式...............................................................5

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

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

2.2.2网站LOGO设计.....................................................................................7

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

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

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

3.1.2所有宝贝页原型...................................................................................9

3.1.3新品页原型...........................................................................................9

3.1.4特价清仓页原型.................................................................................10

3.1.5慢时光手工皮具详情页原型.............................................................11

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

4设计总结..................................................................................................................13

I

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

参考资料.........................................................................................................................15

II

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

慢时光手工皮具网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

1.1.1用户需求分析

几年前很少有人关注包包，但在如今的，包包已经成为人们，不可或缺的

物品，其中，尤其对于女性来说。包包不但实用性很强，而且装饰性很强，各

式各样，种类繁多的包包，现如今已经成为时尚人士不可或缺的物品，作为重

要的时尚因素，包包市场隐藏着巨大的商机。

如今是互联网的时代，网络发展迅速，不再局限于线下销售，为我们提供

了大量的线上客户。而我们就是要抓住这些客户。把这些客户留下来。让他们

对我们忠心。而怎么样？才能让客户忠心呢，首先，我们要需要了解包包行业

的发展趋势：一、消费者个性化需求明显增多了:包包的使用场景主要经常使用

的是日常包包、旅行包包等等。而在我们的传统观念中日常包包的时尚需求更

强，但是随着消费者的年轻化，对包包产品的时尚要求也明显增多。而且在追

求“美”的同时，消费者同样要求包包产品的功能属性能够满足日常的需求，

包括材料的耐磨、光滑的材质、包包的弹性等。总的来说，消费者追求品质、

实用性与个性化兼具都需要具有的产品。二、高性价比的产品逐步进入了大众

市场。海外大牌进入中国市场也比较早，且占据了中高端包包品牌的市场，对

于国内的品牌而言，走性价比高的路线推出爆品成为一条可行的路径：当前消

费市场相对割裂，三四线消费者仍处于消费升级的过程中，而一二线消费者消

费观念逐渐趋于理性，主要关注的是性价比高的产品及个性化产品。

所以慢时光手工皮具网站我们需要做到以下内容：

1.网站的简洁：这样才能让顾客更好的关注我们产品、一目了然。也能让

客户感到舒服，网站不要太过的繁琐是必要的。

2.产品质量：产品质量才是核心。这样才能吸引到更多的顾客。

3.提供优质的服务：让顾客放心选择。

1.1.2网站功能设计

慢时光手工皮具的网站实现的主要功能包括，首页、所有宝贝、新品、特

价清仓、联系我们以及关于我们六个模块。其中“首页”的功能主要是让用户

1

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

在最短的时间内了解网站的产品，其中包括了慢时光的logo展示、导航栏的展

示、热门商品的展示、产品的细节展示、商品详情的展示、慢时光的宣传banner

的展示以及底部的网站创建信息展示。“所有宝贝”展示包括了慢时光的logo

展示、导航栏的展示、商品详情的展示、商品的分类展示、底部的网站创建信

息展示。“新品”主要展示了店家新设计出来的产品，是引领经常来慢时光购买

的客户更好的知道的慢时光新品的方向。“特价清仓”页面主要展示了店家打特

价的产品，让客户更好的知道哪些是优惠产品。然后“联系我们”主要展示了

店家的联系方式和地址，最后“关于我们”页面主要展示了慢时光的logo、公

司的起源和我们提供的服务。

1.2网站结构设计

1.2.1网页层次设计

图1网站层次设计

1.2.2交互逻辑设计

当客户有购买包包的欲望，却没有想要够买的产品时，客户进入慢时光手

工皮具时，他可以根据所有宝贝页面选择他想购买的那个种类的包包，这样他

在看到想要的包包时，就可以去观看宝贝的详情页然后心动了可以前往购买。

同时，在顾客在网站闲逛和观察网站的同时，可以发现，有特价，就可以点击

2

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

特价清仓页面看看有没有需要的包包然后前往购买，同时老客户可以根据新品

页面查看店铺的新品，知道有哪些新出来的产品，然后有喜欢的可以查看详情

页后前往购买。

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

慢时光手工皮具网页首页设计的时候运用了AxureRP来制作网页的排版、

运用了AdobePhotoshopCC2018来制作banner与图片的美化，同时运用了A

dobeIllustrator2020来制作网页首页的logo，而网站首页的功能主要是让用户

在最短的时间内了解网站的产品，所以在设计的网站首页时候，将网站首页的

内容设计的很是简洁，将导航栏和底部的设计都简化到极致，而网站的logo设

计则运用的慢时光（ManTime）拼音加单词的效果，完美的体现出了这就是慢

时光的网站，让人一目了然。

图2慢时光网站首页线框图

3

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

2.1.2所有宝贝页版式

图3慢时光所有宝贝页线框图

对于所有宝贝页，是根据包包的品种来进行分类，然后以梯形的形式设计

的。可以更好的帮助客户快速的浏览到想要的包包并了解包包的详细信息，这

样的方式大大节约了消费者的时间，同时也提升消费者对店铺的好感，让消费

者形成依赖，这样才能形成忠诚，并且要保证包包的质量，这样才能让消费者

想再次在网上购买包包时第一时间联想到我们店铺。所以作为新潮流的包包网

站通过这样的简单设计才能最好的保证效率。

2.1.3新品页版式

图4慢时光新品页线框图

4

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

慢时光的新品页主要是作为店铺新设计的产品的展示处，向客户展示了店

铺的新产品，主要面对的是老客户，可以让老客户们更方便的知道我们新出的

产品，也可以让新客户了解我们的新品。可以通过点击销量查看最多/少下单的

产品。也可以查看我们价格最高/低的产品。

2.1.4特价清仓页版式

慢时光的特价清仓页主要是作为店铺打特价的产品的展示处，让客户在浏

览的过程中快速的知道哪些产品打特价，从而吸引客户来浏览，客户也可以通

过“”来找到心怡的价格的产品。并达到一个引流的效果，从而客

户对网站的体验度。

图5特价清仓页线框图

2.1.5关于我们和联系我们页版式

慢时光手工皮具的关于我们和联系我们页主要是介绍了公司的基本状况、我们所提供

的服务等等，以及公司的地址和联系方式。这样如果有客户有合作的想法或者对我们有什

么建议都可以通过联系我们页找到我们的联系方式来联系我们。从而可以找到一些固定的

合作伙伴。

5

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

图6关于我们页线框图

图7联系我们页线框图

2.2页面视觉元素设计

2.2.1网站配色设计

主色选择：

辅色选择：

图8网站配色设计

关于慢时光手工皮具网站色彩的设计与搭配主要是从网页主色系里面选择，

主要从logo里面提取颜色，以及对于网站的包包整体来搭配。

6

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

在配色的选择时，我们选择了橙色作为网站的主色，网页的色彩搭配主要是

运用了以下几个原则以及几种颜色的特点，主要是运用了橙色，橙色，让人感

到干净、温暖，但却有着很强烈的刺激性，所以我们降低了橙色的饱和度，变

成淡橙色，让网站不要感到视觉疲劳，同时又能吸引人的注意力。我们以白色

为底黑色、灰色和各种浅橙色点缀，这样让网站更高端，变得很干净，让客户

一目了然的就能知道要知道的内容。一定程度上吸引了客户的浏览兴趣，从而

留住客户。

2.2.2网站LOGO设计

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

个制作精美Logo不但可以很好的体现公司的良好形象，还可以传达出公司的产

品信息。网站的Logo设计是网站特点和内在的集中表现，它是用于传达网站的

定位和经营理念，同时也便于用户辨别公司。一个网站的首页体面与否往往是

初访者决定是否要进行深入浏览的标准，而Logo作为首先出现在访问者眼前的

具体形象，其中的重要性不言而喻。网站的logo是由图案或者文字组合而成的，

慢时光手工皮具对于logo的设计侧重强调的是表达出来的内涵所在，设计理念

所在，所以我们用拼音加英文（ManTime）在上原创设计在下的方式来进行logo

的设计。并更清楚的表达出了我们的网站的主体，所以我们将ManTime进行了

设计，运用了王汉宗印篆体繁字体和宋体加粗，又与斑点结合而成，形成“时

光留给我的色彩”的感觉，融合而成的慢时光logo。慢时光logo中内容包括上

面的拼音加英文字母的结合，和加上底下的文字组成的logo，简洁大方，美观

自然，浑然一体，迎合了网页主体。同时，为了整体美观，所以我们将文字居

中并在两边加上“---”，使其更加自然协调，融为一体。同时，将颜色定义为

暗橙色色调。慢时光手工皮具的logo，它符合了最基本的标准，同时包括了精

致、独特与一体，与网站的整体风格相融合，又能表达出慢时光网站的内容以

及风格，完美的体现出了慢时光手工皮具网站的主体思想。

7

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

图9网站LOGO设计

3网站前端设计

3.1网页高保真原型设计

3.1.1网站首页原型

慢时光手工皮具的这个首页高保真原型的设计主要的设计理念包括了以下

几个方面：第一，让客户一眼就了解到有什么业务板块；第二，从banner中体

现出了我们最新的活动，和我们的品质；第三，让客户知道哪些产品比较热门；

第四，展示我们店铺的包包，让客户清楚的知道搭配效果，包包的细节。而从

首页客户就能看出我们店铺的风格，一目了然，简洁干净，突出重点。

8

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

图10网站首页原型

3.1.2所有宝贝页原型

图11所有宝贝页原型

慢时光手工皮具的第二个页面也和第一个页面“首页”一样干净简洁，但

内容绝对不少。其中，在左边采用了梯级形式的设计方式，让客户清楚的知道

包包的品种，从而便于选择；左边则是产品。这样的方式大大的节约了消费者

的时间。让消费者感到舒心，从而产生好感，在下次想在网上购买包包的时候

第一时间联想到我们店铺。

3.1.3新品页原型

慢时光手工皮具的新品页面，主打的是一个简约，就是直接把产品展示出

来，然后客户可以按照自己的心意选择销量或者价格排序，选择之后就可以去

查看它的详情了解更多包包的内容，就可以直接购买了。

9

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

图12新品页原型

3.1.4特价清仓页原型

图13特价清仓页原型

慢时光手工皮具的特价清仓从图片上看起来也是非常的简洁，只有产品的

图片和产品的名字特价价格及原价。并且也可以按照心意选择自己可以接受的

价格，让它升序或者降序选择。

10

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

3.1.5慢时光手工皮具详情页原型

图14包包详情页原型

最后的包包详情页，从整个页面上看来整洁，突出了店铺产品的特点，也

讲述了我们的服务。并且采用了左滚动的效果，看起来就没有那么突出，展示

了我们产品的特点，也附带了产品的全方面效果图。可以让客户马上就理解到

了慢时光手工皮具包包的优点，从而留住顾客。获得更好的宣传。

3.2网页动态特效设计

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

11

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

动态特效1：网页banner自动轮播、手动切换与鼠标移入事件和鼠标的移

出事件

图15banner轮播特效效果

动态特效2：网页的左滚动（右边不滚动）

12

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

图16网页动态特效效果

4设计总结

制作漫时光手工皮具网站的页面，我前前后后来来回回的改了几个月，是

一边打工一边完成的。中间有停过一段时间，其实做的过程中一开始的时候自

己就很迷茫，感觉自己无从下手，但万事总有开头难，开了头倒还好，不过发

现自己还是有很多小细节都不清楚，但是我们总要学会自主学习，所以我都是

先自己研究一下，然后不会了，再去和指导老师讨论讨论，通过讨论得出结果，

这样才能使我加深印象。不过也是多亏了有指导老师的帮助我才能够按时完成。

在制作网站的过程中，深刻的体会到了自己一个人制作一个网站的难处。

这是唯一一次自己单独完成的网站，之前都是以小组为单位的。虽然说做

完这次的网站后就说明我们已经要毕业了，但是回头想想，这次是自己唯一一

次独自完成的网站，并且通过这次的设计，认识了自己的不足，查漏补缺，这

使我的设计能力也提升了很多。

而要怎么样做好一个优秀的网站呢？首先需要的是自己构思好，知道自己

想要的是什么样的网站。当初我在构思的时候想到了许多的品牌，各种各样的

行业，但是在最后的想了很久还是选择了包包的这个行业，因为我觉得是包包

日常生活中的常用品，基本现在的人手上都有一个以及上的包包，肯定有很多

很多的素材，应该也比较简单做。但是开始了我才知