Cluse手表網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

目錄

1網(wǎng)站設(shè)計(jì)需求分析....................................................................................................1

1.1網(wǎng)站建設(shè)背景..............................................................................................1

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

1.1.2網(wǎng)站功能設(shè)計(jì).......................................................................................1

1.1.3競品分析...............................................................................................2

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)..................................................................................................3

1.2.1網(wǎng)頁層次設(shè)計(jì).......................................................................................3

1.2.2交互邏輯設(shè)計(jì).......................................................................................4

2網(wǎng)站視覺設(shè)計(jì)............................................................................................................5

2.1頁面版式設(shè)計(jì)..............................................................................................5

2.1.1網(wǎng)站首頁版式.......................................................................................5

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

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

2.1.4首飾配飾頁版式...................................................................................8

2.1.5禮盒裝頁版式.......................................................................................9

2.1.6關(guān)于我們頁版式.................................................................................10

2.2頁面視覺元素設(shè)計(jì)....................................................................................11

2.2.1網(wǎng)站配色設(shè)計(jì).....................................................................................11

2.2.2網(wǎng)站LOGO設(shè)計(jì)...................................................................................12

2.2.3網(wǎng)站圖標(biāo)設(shè)計(jì).....................................................................................13

3網(wǎng)站前端設(shè)計(jì)..........................................................................................................14

3.1網(wǎng)頁高保真原型設(shè)計(jì)................................................................................14

3.1.1網(wǎng)站首頁原型.....................................................................................14

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

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

3.1.4首飾配飾頁原型.................................................................................17

I

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3.1.5禮盒裝頁原型.....................................................................................18

3.1.6關(guān)于我們頁原型.................................................................................19

3.2網(wǎng)頁動態(tài)特效設(shè)計(jì)....................................................................................20

4設(shè)計(jì)總結(jié)..................................................................................................................21

參考資料.........................................................................................................................23

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

Cluse手表網(wǎng)站W(wǎng)eb端網(wǎng)頁設(shè)計(jì)

1網(wǎng)站設(shè)計(jì)需求分析

1.1網(wǎng)站建設(shè)背景

1.1.1用戶需求分析

在5G時(shí)代飛速發(fā)展之下，人們對網(wǎng)購有了更進(jìn)一步的選擇，不再滿足于國

內(nèi)品牌，想要購買國外小眾品牌。但是一些海淘網(wǎng)站很容易買到假貨，越來越

多的用戶想要通過品牌海外直郵的方式購買到自己想要的商品。

Cluse手表網(wǎng)站的建設(shè)背景是在B2C、B2B經(jīng)濟(jì)發(fā)展迅速，以及互聯(lián)網(wǎng)經(jīng)濟(jì)

普及的現(xiàn)在。網(wǎng)絡(luò)發(fā)展迅速,5G時(shí)代的到來會提供大量的網(wǎng)絡(luò)用戶，從而使得互

聯(lián)網(wǎng)經(jīng)濟(jì)更為發(fā)達(dá)。2020年，中國智能手表行業(yè)因疫情影響抑制了部分需求，

但自2020年下半年至2021年年初，智能手表銷售規(guī)模有進(jìn)一步增長趨勢。從

細(xì)分來看，成人智能手表占比超60%，是主要的應(yīng)用市場。。為了解決腕表行業(yè)

發(fā)展代表性的痛點(diǎn)問題，未來應(yīng)積極的利用互聯(lián)網(wǎng)思維和大數(shù)據(jù)技術(shù)對消費(fèi)者

的需求進(jìn)行分析，形成行業(yè)精準(zhǔn)的需求定位和供應(yīng)定位。

Cluse網(wǎng)站的建設(shè)是為了提醒消費(fèi)者官方銷售渠道有哪些，并告訴消費(fèi)者一

些容易混淆的侵權(quán)網(wǎng)站，防止消費(fèi)者上當(dāng)受騙。幫助了有購買需求的顧客可以

更加方便的選擇商品，發(fā)布在網(wǎng)站上的信息可以制作得較為詳細(xì)，包括產(chǎn)品的

各種性能參數(shù)，使用說明等；利用圖文聲像并茂的網(wǎng)頁形象宣傳產(chǎn)品，以利于

品牌更科學(xué)地進(jìn)行市場開拓。

1.1.2網(wǎng)站功能設(shè)計(jì)

cluse手表網(wǎng)站實(shí)現(xiàn)的主要功能包括，首頁、女士手表、男士手表、首飾配

飾、禮盒裝以及關(guān)于我們六個(gè)模塊，其中“首頁”的功能主要是讓用戶在最短

的時(shí)間內(nèi)了解網(wǎng)站的基本功能，其中包括了書店logo展示、新品上新展示、經(jīng)

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

業(yè)信息?！癱luse手表網(wǎng)站首頁”主要展示了店家通過認(rèn)真篩選以及專門有海

報(bào)宣傳的商品，極具cluse特色的商品信息，將網(wǎng)站的最有特色的模塊展示出

來。然后“男士手表”頁面主要展示了阿拉維斯風(fēng)格、唯古魯風(fēng)格、三眼倒計(jì)

時(shí)風(fēng)格、拉特拉戈風(fēng)格等四種手表品類，豐富了男性顧客的審美，為男性顧客

提供了更多選擇?！芭渴直怼表撁嬷饕故玖瞬ㄎ髅讈嗭L(fēng)格、費(fèi)羅塞風(fēng)格、謎

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

語特風(fēng)格、拉特拉戈風(fēng)格等四種手表品類，可供女性顧客任意挑選自己滿意的

商品?！笆罪椗滹棥表撁嬷饕故玖耸骤C、項(xiàng)鏈和耳環(huán)三個(gè)頁面，可供顧客在購

買手表后選擇一些可搭配的飾品一同購買?！岸Y盒裝”頁面主要展示了女士禮

盒裝和男士禮盒裝兩個(gè)頁面，可供顧客在有送禮需求時(shí)可以進(jìn)行購買?！瓣P(guān)于我

們”頁面主要展示了cluse手表設(shè)計(jì)理念，創(chuàng)造由來，以及一些簡單的介紹，

同時(shí)，新聞中心頁面也包括在其中。

1.1.3競品分析

將cluse手表網(wǎng)站與市面上其他手表網(wǎng)站相對比，例如：DW和天梭。Cluse

手表的優(yōu)勢在于：1.分類更加清晰，每個(gè)模塊都有自己的分工，便于消費(fèi)者能

更快的找到自己想要購買的產(chǎn)品。2.頁面簡潔且不簡單，給人舒適清新的感覺

不易產(chǎn)生審美疲勞。3.有禮盒裝這一類目頁，增加了消費(fèi)者購買選擇，捆綁銷

售可達(dá)到利益最大化。與其相比不足之處：1.沒有其豐富的UI交互效果，不能

進(jìn)行很好的視覺體驗(yàn)。2.產(chǎn)品種類較少，頁面不夠豐富。3.細(xì)節(jié)之處沒有做到

位?？偨Y(jié)：要不斷優(yōu)化頁面，減少低級錯誤的發(fā)生，避免出現(xiàn)不必要的失誤，

豐富頁面增加頁面內(nèi)容。

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

1.2網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

1.2.1網(wǎng)頁層次設(shè)計(jì)

圖1網(wǎng)站結(jié)構(gòu)設(shè)計(jì)

1.2.2交互邏輯設(shè)計(jì)

在互聯(lián)網(wǎng)的推動下，很多顧客想要進(jìn)入官網(wǎng)想要購買cluse手表，當(dāng)他進(jìn)

入官網(wǎng)時(shí)便會被首頁吸引住，新穎時(shí)尚的網(wǎng)站頁面會讓顧客產(chǎn)生購買欲，詳細(xì)

且全面的手表種類和信息會讓顧客對cluse品牌的好感度直線上升，提高了購

物體驗(yàn)感。同時(shí)，在他由于網(wǎng)頁的設(shè)計(jì)的獨(dú)特，在閑逛網(wǎng)頁是，他看到了首飾

配飾時(shí)，發(fā)現(xiàn)其中一些首飾配飾與他所購買的手表搭配起來很合適他很喜歡，

于是，再次點(diǎn)擊，選擇購買，促進(jìn)第二波消費(fèi)。每一個(gè)商品展示圖將鼠標(biāo)移入

后都會有該款手表戴在手上的效果圖，這種新奇的體驗(yàn)增強(qiáng)了消費(fèi)者的品牌的

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

好感度且大大促進(jìn)了消費(fèi)者的購買欲。

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2網(wǎng)站視覺設(shè)計(jì)

2.1頁面版式設(shè)計(jì)

2.1.1網(wǎng)站首頁版式

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

圖2首頁線框圖

cluse手表網(wǎng)頁首頁設(shè)計(jì)的時(shí)候運(yùn)用了最新版的AdobePhotoshopCC2018

來制作網(wǎng)頁的美化，同時(shí)運(yùn)用了AdobeIllustratorCS6來制作網(wǎng)頁首頁的logo

以及細(xì)節(jié)化圖標(biāo)，網(wǎng)站首頁的功能主要是讓用戶在最短的時(shí)間內(nèi)了解網(wǎng)站的基

本功能，所以在網(wǎng)站首頁時(shí)，將網(wǎng)站每個(gè)區(qū)塊進(jìn)行劃分，各自有不同的內(nèi)容，

更好的幫助客戶在瀏覽網(wǎng)站時(shí)能更快的找到自己需要的產(chǎn)品，大大提高了用戶

體驗(yàn)感。但在logo的設(shè)計(jì)上，又運(yùn)用了筆畫替代法將品牌名稱與logo相融合，

更好的體現(xiàn)了手表網(wǎng)站的特點(diǎn)，看上去更加有新意且極具品牌特色。

2.1.2女士手表頁版式

圖3女士手表頁線框圖

對于女士手表頁面的布局與設(shè)計(jì)，首先有相對應(yīng)女士手表的banner，明確

該頁面的主題，營造出女性手表的優(yōu)雅知性的氛圍感。其次運(yùn)用動態(tài)面板將手

表風(fēng)格分為四個(gè)模塊，分別是波西米亞風(fēng)格、費(fèi)羅塞風(fēng)格、米月特風(fēng)格、拉特

拉戈風(fēng)格。每個(gè)模塊內(nèi)放置相對應(yīng)的商品，其好處是為了方便顧客在想要購買

某一商品時(shí)可以更快的找到并可以與其他商品相比對，從而進(jìn)行更好的消費(fèi)。

底部放置聯(lián)系方式標(biāo)注好制作。大多數(shù)用戶在瀏覽網(wǎng)站時(shí)不太喜歡復(fù)雜的網(wǎng)站，

因?yàn)檫@類網(wǎng)站瀏覽起來很麻煩，有時(shí)需要點(diǎn)擊多次才能看到某個(gè)內(nèi)容。像一個(gè)

干凈整潔的扁平化設(shè)計(jì)，它可以吸引更多的用戶瀏覽。

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.3男士手表頁版式

圖4男士手表頁線框圖

對于男士手表頁面的布局與設(shè)計(jì)，首先有相對應(yīng)男士手表的banner，明確

該頁面的主題，營造出男士手表的高級奢華的氛圍感。其次運(yùn)用動態(tài)面板將手

表風(fēng)格分為四個(gè)模塊，分別是了阿拉維斯風(fēng)格、唯古魯風(fēng)格、三眼倒計(jì)時(shí)風(fēng)格、

拉特拉戈風(fēng)格。Cluse手表基于完整的網(wǎng)站建設(shè)，通過cluse的產(chǎn)品和網(wǎng)店相互

搭配，利用客戶對產(chǎn)品的親近感和依賴感，使得客戶更加了解產(chǎn)品的內(nèi)容，從

而使客戶更加了解我們的手表種類與品牌理念，提高大眾接受度，從而突出我

們網(wǎng)站的個(gè)性化特點(diǎn)，吸引顧客，達(dá)到引流的目的，提高客戶的體驗(yàn)質(zhì)量。擁

有一個(gè)主題與統(tǒng)一的風(fēng)格。網(wǎng)站雖然有許多網(wǎng)頁，但作為一個(gè)整體來講，它必

須有一個(gè)主題和統(tǒng)一的風(fēng)格。所有的內(nèi)容都要圍繞這個(gè)主題展開，不切合主題

的內(nèi)容不應(yīng)出現(xiàn)的網(wǎng)站上。網(wǎng)站內(nèi)所有網(wǎng)頁要有統(tǒng)一的風(fēng)格，主頁是網(wǎng)站的首

頁，主頁的風(fēng)格往往就決定了整個(gè)網(wǎng)站的風(fēng)格。

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.4首飾配飾頁版式

圖5首飾配飾頁線框圖

關(guān)于cluse手表網(wǎng)站首飾配飾頁面的設(shè)計(jì)理念，打破了傳統(tǒng)手表網(wǎng)站“只

賣手表”這一概念，將首飾配飾放置在該網(wǎng)站中是為了讓顧客在挑選時(shí)會將商

品作為附屬品一起購買，將手表與首飾配飾捆綁在一起進(jìn)行銷售，不僅可以增

加銷售量更是達(dá)到了品牌擴(kuò)張的效果。與女士手表頁面和男士手表頁面一樣在

側(cè)邊設(shè)置導(dǎo)航欄，方便顧客選擇一種品類，能夠更快捷的找到想要購買的商品。

特別是手表與手鐲一起帶更是當(dāng)下的流行趨勢，好看的手表配上好看的配飾是

女性無法拒絕的搭配，在增加了作品趣味性的同時(shí)，也增強(qiáng)了佩戴者的體驗(yàn)感。

Banner的設(shè)置也是為了增加層次感，加深網(wǎng)站主題和提高網(wǎng)站整體美觀。

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.5禮盒裝頁版式

圖6禮盒裝頁線框圖

關(guān)于cluse手表網(wǎng)站禮盒裝頁面的設(shè)計(jì)理念，打破了傳統(tǒng)手表網(wǎng)站“只賣

手表”這一概念，將首飾配飾放置在該網(wǎng)站中是為了讓顧客在挑選時(shí)會將商品

作為附屬品一起購買，將手表與首飾配飾捆綁在一起進(jìn)行銷售，不僅可以增加

銷售量更是達(dá)到了品牌擴(kuò)張的效果。是將女士手表頁面、男士手表頁面與首飾

配飾頁面的一次結(jié)合方式，給一些想要購買cluse品牌手表送禮的消費(fèi)者帶去

了便利性，很好的解決了送禮困擾。

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.1.6關(guān)于我們頁版式

圖7關(guān)于我們頁線框圖

關(guān)于cluse手表網(wǎng)站關(guān)于我們頁面的設(shè)計(jì)理念，向購買cluse手表的顧客

說明我們的品牌理念，幫助顧客對品牌文化有更深的了解。將品牌發(fā)展歷程是

為了讓消費(fèi)者看到cluse品牌一路的成長對品牌產(chǎn)生信賴，使其可以放心購買

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

cluse的產(chǎn)品。新聞中心也放置在該頁面，可以讓消費(fèi)者在瀏覽時(shí)可以及時(shí)關(guān)注

cluse手表品牌的企業(yè)動向，對品牌印象更深。

2.2頁面視覺元素設(shè)計(jì)

2.2.1網(wǎng)站配色設(shè)計(jì)

關(guān)于cluse手表網(wǎng)站的整體色彩，選用金屬黃作為主色，更加符合品牌低

調(diào)奢華的調(diào)性，使整個(gè)網(wǎng)站看上去更舒適和諧,選擇了合適的配色。提高網(wǎng)頁設(shè)

計(jì)感,從而進(jìn)行一個(gè)引流的作用。

圖8網(wǎng)站配色設(shè)計(jì)

網(wǎng)頁配色很重要，網(wǎng)頁顏色搭配的是否合理會直接影響到訪問者的情緒。好

的色彩搭配會給訪問者帶來很強(qiáng)的視覺沖擊力，不恰當(dāng)?shù)纳蚀钆鋭t會讓訪問

者浮躁不安。標(biāo)準(zhǔn)色中參照了運(yùn)用于網(wǎng)頁的標(biāo)志標(biāo)題主菜單和主色塊，另外主

要搭配的形狀有矩形等對稱類元素，其中占比5%左右，但是通常情況下一個(gè)網(wǎng)

頁作品只有一個(gè)主色調(diào)是不夠的，所以在確定完主色調(diào)之后還需要搭配與主色

相對抗或抗衡的對抗色。針對于這個(gè)網(wǎng)頁就是這里的金屬黃色，金屬色澤有別

于其他的顏色，打破了傳統(tǒng)色彩的界限，變幻不定的奢華光澤，獨(dú)特的面料材

質(zhì)，都賦予了時(shí)裝新的生命力。更加符合手表網(wǎng)站的調(diào)性，使網(wǎng)站主題更加明

確。金屬黃色是一種高級的色彩，所以我們以金屬黃作為主色，這樣讓色彩感

更豐富，一定程度上吸引了用戶的購買興趣，同時(shí)我們摻雜了淡灰色為輔助色，

這種顏色樸實(shí)且內(nèi)向，跟我們網(wǎng)站手表相符合，正依據(jù)的是cluse手表品牌的

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

低調(diào)奢華的內(nèi)涵，這些有張力的色彩提供了一個(gè)更深遠(yuǎn)廣闊平靜的空間，襯托

出友善謙虛的色彩跳躍感，淡化之后的灰色給人一種靜謐的色彩，幾種顏色的

適量搭配使得。白色作為背景色使整個(gè)網(wǎng)站看上去簡單舒適，不易造成審美疲

勞。使得構(gòu)成圖形更加明顯，中間的擴(kuò)張感和收縮感綜合，讓人感覺到了一種

時(shí)尚高級又不失內(nèi)涵的感覺。

2.2.2網(wǎng)站LOGO設(shè)計(jì)

圖9品牌logo設(shè)計(jì)

LOGO設(shè)計(jì)一定要簡潔卻不簡單，現(xiàn)在信息爆炸，簡潔的LOGO才能有明確的

記憶點(diǎn)，讓消費(fèi)者加深印象，LOGO在市場競爭中有很大的作用，一個(gè)好的標(biāo)志

就像是一個(gè)品牌的招牌，不但在市場上具有的商業(yè)價(jià)值，還可以通過標(biāo)志來吸

引消費(fèi)者。一件有商標(biāo)的產(chǎn)品和一件沒有商標(biāo)的產(chǎn)品，消費(fèi)者會更愿意購買有

商標(biāo)的，如今是一個(gè)品牌的時(shí)代，消費(fèi)者就認(rèn)這個(gè)。網(wǎng)站Logo設(shè)計(jì)是網(wǎng)站特色

和內(nèi)涵的集中表現(xiàn)，它用于傳遞網(wǎng)站的定位和經(jīng)營理念，同時(shí)也便人用戶識別

公司。一個(gè)網(wǎng)站的首頁美觀與否往往是初訪者決定是否進(jìn)行深入瀏覽的標(biāo)準(zhǔn)，

而Logo作為首先映入訪問者眼簾的具體形象，其重要性不言而喻。一般的網(wǎng)站

logo有圖案或者文字組合而成，cluse手表對于logo設(shè)計(jì)側(cè)重強(qiáng)調(diào)的是表達(dá)出

手表網(wǎng)站的內(nèi)涵，使消費(fèi)者印象加深，簡潔卻不簡單同時(shí)為清楚的表達(dá)出我們

的主體，所以我們將cluse四個(gè)字母中的“C”進(jìn)行了設(shè)計(jì)，運(yùn)用筆畫替代法將

字母“C”變形成一個(gè)表盤，在表盤內(nèi)放置一個(gè)勾，明確了品牌主題同時(shí)又不失

趣味性，鉤是用紅色的代表購買cluse手表是正確的是令人滿意的，考慮到手

表本身的特質(zhì)是低調(diào)奢華的便在下方加入了中文品牌名使其更加自然和諧，融

為一體，同時(shí)，將顏色定義層最簡單的基本色色調(diào)黑色。Cluse手表網(wǎng)站的

logo，具有個(gè)性鮮明、視覺沖擊力，便于識別、記憶，有引導(dǎo)、促進(jìn)消費(fèi)，產(chǎn)

生美好聯(lián)想的作用，利于在眾多的商品中脫穎而出。

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.2.3網(wǎng)站圖標(biāo)設(shè)計(jì)

圖10網(wǎng)站圖標(biāo)設(shè)計(jì)

Cluse手表網(wǎng)站一共只做了兩個(gè)圖標(biāo)。網(wǎng)站前端設(shè)計(jì)圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中

非常重要的環(huán)節(jié)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代能夠傳遞給用

戶情緒和設(shè)計(jì)感的通道就是頁面中的各種圖形與圖標(biāo)。對于UI設(shè)計(jì)而言，圖標(biāo)

可以說是整個(gè)產(chǎn)品的點(diǎn)睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。

在不少UI界面中，圖標(biāo)幾乎是這個(gè)頁面的核心支撐體，它直接影響著產(chǎn)品的

視覺體驗(yàn)和產(chǎn)品調(diào)性。第一個(gè)圖標(biāo)主要用于每個(gè)品目下方，用于承接文字修飾

頁面的效果，設(shè)計(jì)成手表狀符合網(wǎng)站主題，作為一個(gè)亮點(diǎn)讓整個(gè)頁面看上去有

細(xì)節(jié)，緊扣主題。第二個(gè)用于每個(gè)頁面的側(cè)邊導(dǎo)航欄，當(dāng)點(diǎn)擊時(shí)會出現(xiàn)變化效

果，使網(wǎng)站交互效果看上去新穎且具有指明性。用六邊形也是因?yàn)槟M手表邊

框使其網(wǎng)站主題鮮明。

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3網(wǎng)頁高保真原型設(shè)計(jì)

2.3.1網(wǎng)站首頁原型

圖11網(wǎng)站首頁原型

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

Cluse手表網(wǎng)站這一張高保真網(wǎng)站首頁圖片的設(shè)計(jì)理念主要包括了以下三

個(gè)方面。首先是模塊多、分類清晰，方便顧客找到自己想要的商品。其次是每

個(gè)頁面均可以點(diǎn)擊看詳細(xì)頁面，大大提升了便利性。最后就是每個(gè)模塊的設(shè)置

均有存在的意義，例如“ins同款”本身就是利用互聯(lián)網(wǎng)效應(yīng)帶來流量變現(xiàn)，專

為它設(shè)立一個(gè)模塊可以起到引流的作用。

2.3.2女士手表頁原型

圖12女士手表頁原型

Cluse手表網(wǎng)站第二個(gè)女士手表頁面是以粉色調(diào)為主，其中參雜了小圖標(biāo)和

鏈接塊。將網(wǎng)頁的細(xì)節(jié)化處理做到了細(xì)微。圖中粉色與金屬色的搭配即引起人

們的注意，也提升了網(wǎng)頁的整體形象氣質(zhì)以及規(guī)格。在其他小細(xì)節(jié)的選擇中也

采用了小圖標(biāo)點(diǎn)綴，將粉色浪漫和金屬色高級的感覺融為一體，更加突出了女

士手表的高貴精致。

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.3男士手表頁原型

圖13男士手表頁原型

在男士手表網(wǎng)頁界面，主打了一張簡約且不失風(fēng)度的banner。這張海報(bào)通

過簡單的產(chǎn)品與線條文字的搭配，將網(wǎng)頁的內(nèi)容從側(cè)面襯托出來，同時(shí)通過網(wǎng)

頁banner的宣傳，更加強(qiáng)調(diào)了男士手表的設(shè)計(jì)品味與定位。

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.4首飾配飾頁

圖14首飾配飾頁原型

首飾配飾頁面從網(wǎng)頁高保真圖片來看，頁面設(shè)計(jì)十分清新自然，與女士手

表頁面和男士手表頁面一致。但是其中的線條與形狀的搭配色彩的碰撞又突出

了首飾配飾的不同感覺?？瓷先ジ泳?，從而使消費(fèi)者產(chǎn)生購買欲。

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.5禮盒裝頁原型

圖15禮盒裝頁原型

禮盒裝頁面，清新淡雅的設(shè)計(jì)風(fēng)格，將手表高貴典雅的氣質(zhì)展現(xiàn)的淋漓盡

致，便于那些想要購買cluse品牌手表送人的消費(fèi)者找到合適的禮物，適合的

價(jià)格精致用心的禮物是他們的第一選擇！

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.3.6關(guān)于我們原型

圖16關(guān)于我們頁原型

時(shí)效性更好，及時(shí)了解官網(wǎng)信息了解品牌文化與創(chuàng)作理念，給消費(fèi)者在選

擇購買商品時(shí)打了一劑強(qiáng)心針更加有保障，提升了品牌信譽(yù)與形象。

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

2.4網(wǎng)頁動態(tài)特效設(shè)計(jì)

網(wǎng)頁動態(tài)特效使用JavaScript實(shí)現(xiàn)。

動態(tài)特效1：網(wǎng)頁banner自動輪播

圖17banner輪播特效效果

動態(tài)特效2：圖標(biāo)變化特效（點(diǎn)擊網(wǎng)頁小圖標(biāo)是圖標(biāo)發(fā)生變化）

圖18網(wǎng)頁特效效果（未選中時(shí)）網(wǎng)頁特效效果（選中時(shí)）

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計(jì)

3設(shè)計(jì)總結(jié)

畢業(yè)設(shè)計(jì)是我們作為學(xué)生在學(xué)習(xí)階段的最后一個(gè)環(huán)節(jié)，是對所學(xué)基礎(chǔ)知識

和專業(yè)知識的一種綜合應(yīng)用，是種綜合的再學(xué)習(xí)、再提高的過程，這過程對學(xué)

生的學(xué)習(xí)能力和獨(dú)立思考及工作能力也是一個(gè)培養(yǎng)，同時(shí)畢業(yè)設(shè)計(jì)也是一個(gè)重

要的環(huán)節(jié)，是我們步入社會參與實(shí)際工作的一次極好的演示，也是對我們自學(xué)

能力和解決問題能力的一次考驗(yàn)，是學(xué)校生活與社會生活間的過渡。3月初，

當(dāng)一切準(zhǔn)備工作就緒，我開始著手畢業(yè)設(shè)計(jì)初稿的寫作。在寫作過程中遇到就

及時(shí)和指導(dǎo)老師聯(lián)系溝通，請教老師，并和同學(xué)互相交流。在指導(dǎo)老師的幫助

下，困難一個(gè)個(gè)解決掉。經(jīng)過大約兩個(gè)多月的時(shí)間，終于完成了畢業(yè)設(shè)計(jì)的初

稿。此時(shí)我整個(gè)人都很累，但同時(shí)看著電腦熒屏上的畢業(yè)設(shè)計(jì)初稿，我的心里

是甜的，我覺得這一切都很值。因?yàn)檫@次畢業(yè)設(shè)計(jì)的制作過程是我的次再學(xué)習(xí)、

再提高的過程，同時(shí)也是對我大學(xué)三年所學(xué)知識的檢驗(yàn)。4月20日我按時(shí)提交

了畢業(yè)設(shè)計(jì)的初稿，請指導(dǎo)老師