Cluse手表網(wǎng)站W(wǎng)eb端網(wǎng)頁(yè)設(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競(jìng)品分析...............................................................................................2

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

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

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

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

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

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

2.1.2女士手表頁(yè)版式...................................................................................6

2.1.3男士手表頁(yè)版式...................................................................................7

2.1.4首飾配飾頁(yè)版式...................................................................................8

2.1.5禮盒裝頁(yè)版式.......................................................................................9

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

2.2頁(yè)面視覺元素設(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)頁(yè)高保真原型設(shè)計(jì)................................................................................14

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

3.1.2女士手表頁(yè)原型.................................................................................15

3.1.3男士手表頁(yè)原型.................................................................................16

3.1.4首飾配飾頁(yè)原型.................................................................................17

I

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

3.1.5禮盒裝頁(yè)原型.....................................................................................18

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

3.2網(wǎng)頁(yè)動(dò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)頁(yè)設(shè)計(jì)

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

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

1.1.1用戶需求分析

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

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

多的用戶想要通過(guò)品牌海外直郵的方式購(gòu)買到自己想要的商品。

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í)代的到來(lái)會(huì)提供大量的網(wǎng)絡(luò)用戶，從而使得互

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

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

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

發(fā)展代表性的痛點(diǎn)問(wèn)題，未來(lái)應(yīng)積極的利用互聯(lián)網(wǎng)思維和大數(shù)據(jù)技術(shù)對(duì)消費(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)受騙。幫助了有購(gòu)買需求的顧客可以

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

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

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

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

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

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

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

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

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

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

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

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

提供了更多選擇?！芭渴直怼表?yè)面主要展示了波西米亞風(fēng)格、費(fèi)羅塞風(fēng)格、謎

1

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

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

商品。“首飾配飾”頁(yè)面主要展示了手鐲、項(xiàng)鏈和耳環(huán)三個(gè)頁(yè)面，可供顧客在購(gòu)

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

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

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

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

1.1.3競(jìng)品分析

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

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

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

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

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

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

位。總結(jié)：要不斷優(yōu)化頁(yè)面，減少低級(jí)錯(cuò)誤的發(fā)生，避免出現(xiàn)不必要的失誤，

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

2

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

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

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

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

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

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

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

且全面的手表種類和信息會(huì)讓顧客對(duì)cluse品牌的好感度直線上升，提高了購(gòu)

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

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

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

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

3

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

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

4

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

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

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

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

5

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

圖2首頁(yè)線框圖

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

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

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

本功能，所以在網(wǎng)站首頁(yè)時(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女士手表頁(yè)版式

圖3女士手表頁(yè)線框圖

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

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

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

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

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

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

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

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

6

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

2.1.3男士手表頁(yè)版式

圖4男士手表頁(yè)線框圖

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

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

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

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

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

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

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

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

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

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

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

7

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

2.1.4首飾配飾頁(yè)版式

圖5首飾配飾頁(yè)線框圖

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

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

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

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

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

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

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

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

8

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

2.1.5禮盒裝頁(yè)版式

圖6禮盒裝頁(yè)線框圖

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

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

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

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

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

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

9

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

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

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

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

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

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

10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

更豐富，一定程度上吸引了用戶的購(gòu)買興趣，同時(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)站看上去簡(jiǎn)單舒適，不易造成審美疲

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

logo，具有個(gè)性鮮明、視覺沖擊力，便于識(shí)別、記憶，有引導(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ì)感的通道就是頁(yè)面中的各種圖形與圖標(biāo)。對(duì)于UI設(shè)計(jì)而言，圖標(biāo)

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

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

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

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

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

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

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

13

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

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

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

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

14

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

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

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

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

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

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

2.3.2女士手表頁(yè)原型

圖12女士手表頁(yè)原型

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

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

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

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

士手表的高貴精致。

15

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

2.3.3男士手表頁(yè)原型

圖13男士手表頁(yè)原型

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

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

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

16

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

2.3.4首飾配飾頁(yè)

圖14首飾配飾頁(yè)原型

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

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

了首飾配飾的不同感覺。看上去更加精致，從而使消費(fèi)者產(chǎn)生購(gòu)買欲。

17

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

2.3.5禮盒裝頁(yè)原型

圖15禮盒裝頁(yè)原型

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

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

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

18

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

2.3.6關(guān)于我們?cè)?/p>

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

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

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

19

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

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

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

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

圖17banner輪播特效效果

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

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

20

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

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

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

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

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

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

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

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

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

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

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

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

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

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