Cluse手表网站Web端网页设计

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

目录

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

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

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

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

1.1.3竞品分析...............................................................................................2

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

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

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

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

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

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

2.1.2女士手表页版式...................................................................................6

2.1.3男士手表页版式...................................................................................7

2.1.4首饰配饰页版式...................................................................................8

2.1.5礼盒装页版式.......................................................................................9

2.1.6关于我们页版式.................................................................................10

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

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

2.2.2网站LOGO设计...................................................................................12

2.2.3网站图标设计.....................................................................................13

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

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

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

3.1.2女士手表页原型.................................................................................15

3.1.3男士手表页原型.................................................................................16

3.1.4首饰配饰页原型.................................................................................17

I

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

3.1.5礼盒装页原型.....................................................................................18

3.1.6关于我们页原型.................................................................................19

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

4设计总结..................................................................................................................21

参考资料.........................................................................................................................23

II

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

Cluse手表网站Web端网页设计

1网站设计需求分析

1.1网站建设背景

1.1.1用户需求分析

在5G时代飞速发展之下，人们对网购有了更进一步的选择，不再满足于国

内品牌，想要购买国外小众品牌。但是一些海淘网站很容易买到假货，越来越

多的用户想要通过品牌海外直邮的方式购买到自己想要的商品。

Cluse手表网站的建设背景是在B2C、B2B经济发展迅速，以及互联网经济

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

联网经济更为发达。2020年，中国智能手表行业因疫情影响抑制了部分需求，

但自2020年下半年至2021年年初，智能手表销售规模有进一步增长趋势。从

细分来看，成人智能手表占比超60%，是主要的应用市场。。为了解决腕表行业

发展代表性的痛点问题，未来应积极的利用互联网思维和大数据技术对消费者

的需求进行分析，形成行业精准的需求定位和供应定位。

Cluse网站的建设是为了提醒消费者官方销售渠道有哪些，并告诉消费者一

些容易混淆的侵权网站，防止消费者上当受骗。帮助了有购买需求的顾客可以

更加方便的选择商品，发布在网站上的信息可以制作得较为详细，包括产品的

各种性能参数，使用说明等；利用图文声像并茂的网页形象宣传产品，以利于

品牌更科学地进行市场开拓。

1.1.2网站功能设计

cluse手表网站实现的主要功能包括，首页、女士手表、男士手表、首饰配

饰、礼盒装以及关于我们六个模块，其中“首页”的功能主要是让用户在最短

的时间内了解网站的基本功能，其中包括了书店logo展示、新品上新展示、经

典系列展示、首饰配饰展示、ins同款展示、宣传banner的展示以及底部的企

业信息。“cluse手表网站首页”主要展示了店家通过认真筛选以及专门有海

报宣传的商品，极具cluse特色的商品信息，将网站的最有特色的模块展示出

来。然后“男士手表”页面主要展示了阿拉维斯风格、唯古鲁风格、三眼倒计

时风格、拉特拉戈风格等四种手表品类，丰富了男性顾客的审美，为男性顾客

提供了更多选择。“女士手表”页面主要展示了波西米亚风格、费罗塞风格、谜

1

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

语特风格、拉特拉戈风格等四种手表品类，可供女性顾客任意挑选自己满意的

商品。“首饰配饰”页面主要展示了手镯、项链和耳环三个页面，可供顾客在购

买手表后选择一些可搭配的饰品一同购买。“礼盒装”页面主要展示了女士礼

盒装和男士礼盒装两个页面，可供顾客在有送礼需求时可以进行购买。“关于我

们”页面主要展示了cluse手表设计理念，创造由来，以及一些简单的介绍，

同时，新闻中心页面也包括在其中。

1.1.3竞品分析

将cluse手表网站与市面上其他手表网站相对比，例如：DW和天梭。Cluse

手表的优势在于：1.分类更加清晰，每个模块都有自己的分工，便于消费者能

更快的找到自己想要购买的产品。2.页面简洁且不简单，给人舒适清新的感觉

不易产生审美疲劳。3.有礼盒装这一类目页，增加了消费者购买选择，捆绑销

售可达到利益最大化。与其相比不足之处：1.没有其丰富的UI交互效果，不能

进行很好的视觉体验。2.产品种类较少，页面不够丰富。3.细节之处没有做到

位。总结：要不断优化页面，减少低级错误的发生，避免出现不必要的失误，

丰富页面增加页面内容。

2

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

1.2网站结构设计

1.2.1网页层次设计

图1网站结构设计

1.2.2交互逻辑设计

在互联网的推动下，很多顾客想要进入官网想要购买cluse手表，当他进

入官网时便会被首页吸引住，新颖时尚的网站页面会让顾客产生购买欲，详细

且全面的手表种类和信息会让顾客对cluse品牌的好感度直线上升，提高了购

物体验感。同时，在他由于网页的设计的独特，在闲逛网页是，他看到了首饰

配饰时，发现其中一些首饰配饰与他所购买的手表搭配起来很合适他很喜欢，

于是，再次点击，选择购买，促进第二波消费。每一个商品展示图将鼠标移入

后都会有该款手表戴在手上的效果图，这种新奇的体验增强了消费者的品牌的

3

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

好感度且大大促进了消费者的购买欲。

4

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

2网站视觉设计

2.1页面版式设计

2.1.1网站首页版式

5

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

图2首页线框图

cluse手表网页首页设计的时候运用了最新版的AdobePhotoshopCC2018

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

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

本功能，所以在网站首页时，将网站每个区块进行划分，各自有不同的内容，

更好的帮助客户在浏览网站时能更快的找到自己需要的产品，大大提高了用户

体验感。但在logo的设计上，又运用了笔画替代法将品牌名称与logo相融合，

更好的体现了手表网站的特点，看上去更加有新意且极具品牌特色。

2.1.2女士手表页版式

图3女士手表页线框图

对于女士手表页面的布局与设计，首先有相对应女士手表的banner，明确

该页面的主题，营造出女性手表的优雅知性的氛围感。其次运用动态面板将手

表风格分为四个模块，分别是波西米亚风格、费罗塞风格、米月特风格、拉特

拉戈风格。每个模块内放置相对应的商品，其好处是为了方便顾客在想要购买

某一商品时可以更快的找到并可以与其他商品相比对，从而进行更好的消费。

底部放置联系方式标注好制作。大多数用户在浏览网站时不太喜欢复杂的网站，

因为这类网站浏览起来很麻烦，有时需要点击多次才能看到某个内容。像一个

干净整洁的扁平化设计，它可以吸引更多的用户浏览。

6

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

2.1.3男士手表页版式

图4男士手表页线框图

对于男士手表页面的布局与设计，首先有相对应男士手表的banner，明确

该页面的主题，营造出男士手表的高级奢华的氛围感。其次运用动态面板将手

表风格分为四个模块，分别是了阿拉维斯风格、唯古鲁风格、三眼倒计时风格、

拉特拉戈风格。Cluse手表基于完整的网站建设，通过cluse的产品和网店相互

搭配，利用客户对产品的亲近感和依赖感，使得客户更加了解产品的内容，从

而使客户更加了解我们的手表种类与品牌理念，提高大众接受度，从而突出我

们网站的个性化特点，吸引顾客，达到引流的目的，提高客户的体验质量。拥

有一个主题与统一的风格。网站虽然有许多网页，但作为一个整体来讲，它必

须有一个主题和统一的风格。所有的内容都要围绕这个主题展开，不切合主题

的内容不应出现的网站上。网站内所有网页要有统一的风格，主页是网站的首

页，主页的风格往往就决定了整个网站的风格。

7

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

2.1.4首饰配饰页版式

图5首饰配饰页线框图

关于cluse手表网站首饰配饰页面的设计理念，打破了传统手表网站“只

卖手表”这一概念，将首饰配饰放置在该网站中是为了让顾客在挑选时会将商

品作为附属品一起购买，将手表与首饰配饰捆绑在一起进行销售，不仅可以增

加销售量更是达到了品牌扩张的效果。与女士手表页面和男士手表页面一样在

侧边设置导航栏，方便顾客选择一种品类，能够更快捷的找到想要购买的商品。

特别是手表与手镯一起带更是当下的流行趋势，好看的手表配上好看的配饰是

女性无法拒绝的搭配，在增加了作品趣味性的同时，也增强了佩戴者的体验感。

Banner的设置也是为了增加层次感，加深网站主题和提高网站整体美观。

8

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

2.1.5礼盒装页版式

图6礼盒装页线框图

关于cluse手表网站礼盒装页面的设计理念，打破了传统手表网站“只卖

手表”这一概念，将首饰配饰放置在该网站中是为了让顾客在挑选时会将商品

作为附属品一起购买，将手表与首饰配饰捆绑在一起进行销售，不仅可以增加

销售量更是达到了品牌扩张的效果。是将女士手表页面、男士手表页面与首饰

配饰页面的一次结合方式，给一些想要购买cluse品牌手表送礼的消费者带去

了便利性，很好的解决了送礼困扰。

9

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

2.1.6关于我们页版式

图7关于我们页线框图

关于cluse手表网站关于我们页面的设计理念，向购买cluse手表的顾客

说明我们的品牌理念，帮助顾客对品牌文化有更深的了解。将品牌发展历程是

为了让消费者看到cluse品牌一路的成长对品牌产生信赖，使其可以放心购买

10

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

cluse的产品。新闻中心也放置在该页面，可以让消费者在浏览时可以及时关注

cluse手表品牌的企业动向，对品牌印象更深。

2.2页面视觉元素设计

2.2.1网站配色设计

关于cluse手表网站的整体色彩，选用金属黄作为主色，更加符合品牌低

调奢华的调性，使整个网站看上去更舒适和谐,选择了合适的配色。提高网页设

计感,从而进行一个引流的作用。

图8网站配色设计

网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好

的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问

者浮躁不安。标准色中参照了运用于网页的标志标题主菜单和主色块，另外主

要搭配的形状有矩形等对称类元素，其中占比5%左右，但是通常情况下一个网

页作品只有一个主色调是不够的，所以在确定完主色调之后还需要搭配与主色

相对抗或抗衡的对抗色。针对于这个网页就是这里的金属黄色，金属色泽有别

于其他的颜色，打破了传统色彩的界限，变幻不定的奢华光泽，独特的面料材

质，都赋予了时装新的生命力。更加符合手表网站的调性，使网站主题更加明

确。金属黄色是一种高级的色彩，所以我们以金属黄作为主色，这样让色彩感

更丰富，一定程度上吸引了用户的购买兴趣，同时我们掺杂了淡灰色为辅助色，

这种颜色朴实且内向，跟我们网站手表相符合，正依据的是cluse手表品牌的

11

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

低调奢华的内涵，这些有张力的色彩提供了一个更深远广阔平静的空间，衬托

出友善谦虚的色彩跳跃感，淡化之后的灰色给人一种静谧的色彩，几种颜色的

适量搭配使得。白色作为背景色使整个网站看上去简单舒适，不易造成审美疲

劳。使得构成图形更加明显，中间的扩张感和收缩感综合，让人感觉到了一种

时尚高级又不失内涵的感觉。

2.2.2网站LOGO设计

图9品牌logo设计

LOGO设计一定要简洁却不简单，现在信息爆炸，简洁的LOGO才能有明确的

记忆点，让消费者加深印象，LOGO在市场竞争中有很大的作用，一个好的标志

就像是一个品牌的招牌，不但在市场上具有的商业价值，还可以通过标志来吸

引消费者。一件有商标的产品和一件没有商标的产品，消费者会更愿意购买有

商标的，如今是一个品牌的时代，消费者就认这个。网站Logo设计是网站特色

和内涵的集中表现，它用于传递网站的定位和经营理念，同时也便人用户识别

公司。一个网站的首页美观与否往往是初访者决定是否进行深入浏览的标准，

而Logo作为首先映入访问者眼帘的具体形象，其重要性不言而喻。一般的网站

logo有图案或者文字组合而成，cluse手表对于logo设计侧重强调的是表达出

手表网站的内涵，使消费者印象加深，简洁却不简单同时为清楚的表达出我们

的主体，所以我们将cluse四个字母中的“C”进行了设计，运用笔画替代法将

字母“C”变形成一个表盘，在表盘内放置一个勾，明确了品牌主题同时又不失

趣味性，钩是用红色的代表购买cluse手表是正确的是令人满意的，考虑到手

表本身的特质是低调奢华的便在下方加入了中文品牌名使其更加自然和谐，融

为一体，同时，将颜色定义层最简单的基本色色调黑色。Cluse手表网站的

logo，具有个性鲜明、视觉冲击力，便于识别、记忆，有引导、促进消费，产

生美好联想的作用，利于在众多的商品中脱颖而出。

12

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

2.2.3网站图标设计

图10网站图标设计

Cluse手表网站一共只做了两个图标。网站前端设计图标设计是UI设计中

非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用

户情绪和设计感的通道就是页面中的各种图形与图标。对于UI设计而言，图标

可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。

在不少UI界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的

视觉体验和产品调性。第一个图标主要用于每个品目下方，用于承接文字修饰

页面的效果，设计成手表状符合网站主题，作为一个亮点让整个页面看上去有

细节，紧扣主题。第二个用于每个页面的侧边导航栏，当点击时会出现变化效

果，使网站交互效果看上去新颖且具有指明性。用六边形也是因为模拟手表边

框使其网站主题鲜明。

13

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

2.3网页高保真原型设计

2.3.1网站首页原型

图11网站首页原型

14

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

Cluse手表网站这一张高保真网站首页图片的设计理念主要包括了以下三

个方面。首先是模块多、分类清晰，方便顾客找到自己想要的商品。其次是每

个页面均可以点击看详细页面，大大提升了便利性。最后就是每个模块的设置

均有存在的意义，例如“ins同款”本身就是利用互联网效应带来流量变现，专

为它设立一个模块可以起到引流的作用。

2.3.2女士手表页原型

图12女士手表页原型

Cluse手表网站第二个女士手表页面是以粉色调为主，其中参杂了小图标和

链接块。将网页的细节化处理做到了细微。图中粉色与金属色的搭配即引起人

们的注意，也提升了网页的整体形象气质以及规格。在其他小细节的选择中也

采用了小图标点缀，将粉色浪漫和金属色高级的感觉融为一体，更加突出了女

士手表的高贵精致。

15

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

2.3.3男士手表页原型

图13男士手表页原型

在男士手表网页界面，主打了一张简约且不失风度的banner。这张海报通

过简单的产品与线条文字的搭配，将网页的内容从侧面衬托出来，同时通过网

页banner的宣传，更加强调了男士手表的设计品味与定位。

16

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

2.3.4首饰配饰页

图14首饰配饰页原型

首饰配饰页面从网页高保真图片来看，页面设计十分清新自然，与女士手

表页面和男士手表页面一致。但是其中的线条与形状的搭配色彩的碰撞又突出

了首饰配饰的不同感觉。看上去更加精致，从而使消费者产生购买欲。

17

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

2.3.5礼盒装页原型

图15礼盒装页原型

礼盒装页面，清新淡雅的设计风格，将手表高贵典雅的气质展现的淋漓尽

致，便于那些想要购买cluse品牌手表送人的消费者找到合适的礼物，适合的

价格精致用心的礼物是他们的第一选择！

18

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

2.3.6关于我们原型

图16关于我们页原型

时效性更好，及时了解官网信息了解品牌文化与创作理念，给消费者在选

择购买商品时打了一剂强心针更加有保障，提升了品牌信誉与形象。

19

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

2.4网页动态特效设计

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

动态特效1：网页banner自动轮播

图17banner轮播特效效果

动态特效2：图标变化特效（点击网页小图标是图标发生变化）

图18网页特效效果（未选中时）网页特效效果（选中时）

20

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

3设计总结

毕业设计是我们作为学生在学习阶段的最后一个环节，是对所学基础知识

和专业知识的一种综合应用，是种综合的再学习、再提高的过程，这过程对学

生的学习能力和独立思考及工作能力也是一个培养，同时毕业设计也是一个重

要的环节，是我们步入社会参与实际工作的一次极好的演示，也是对我们自学

能力和解决问题能力的一次考验，是学校生活与社会生活间的过渡。3月初，

当一切准备工作就绪，我开始着手毕业设计初稿的写作。在写作过程中遇到就

及时和指导老师联系沟通，请教老师，并和同学互相交流。在指导老师的帮助

下，困难一个个解决掉。经过大约两个多月的时间，终于完成了毕业设计的初

稿。此时我整个人都很累，但同时看着电脑荧屏上的毕业设计初稿，我的心里

是甜的，我觉得这一切都很值。因为这次毕业设计的制作过程是我的次再学习、

再提高的过程，同时也是对我大学三年所学知识的检验。4月20日我按时提交

了毕业设计的初稿，请指导老师