禧瑪諾品牌網(wǎng)店視覺方案設(shè)計(jì)

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

目錄

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

1.1項(xiàng)目背景..........................................................................................................1

1.2項(xiàng)目需求分析..................................................................................................1

1.3色彩設(shè)計(jì)..........................................................................................................1

1.4字體規(guī)范..........................................................................................................2

2網(wǎng)店頁面原型圖分析與設(shè)計(jì)方案............................................................................3

2.1首頁..................................................................................................................3

2.2搜索結(jié)果頁......................................................................................................4

2.3商品詳情頁......................................................................................................4

2.4登錄注冊頁......................................................................................................6

2.5購物車..............................................................................................................6

2.6訂單結(jié)算頁......................................................................................................7

2.7個(gè)人中心..........................................................................................................8

3網(wǎng)店頁面視覺效果設(shè)計(jì)與制作................................................................................9

3.1首頁視覺設(shè)計(jì)與制作......................................................................................9

3.1.1設(shè)計(jì)思路...............................................................................................9

3.1.2設(shè)計(jì)效果.............................................................................................11

3.2搜索結(jié)果頁視覺設(shè)計(jì)與制作........................................................................12

3.2.1設(shè)計(jì)思路.............................................................................................12

3.2.2設(shè)計(jì)效果.............................................................................................12

3.3產(chǎn)品詳情頁視覺設(shè)計(jì)與制作........................................................................13

3.3.1STELLASW設(shè)計(jì)思路..........................................................................13

3.3.2STELLASW設(shè)計(jì)效果..........................................................................14

3.4登錄注冊頁視覺設(shè)計(jì)與制作........................................................................16

3.4.1設(shè)計(jì)思路.............................................................................................16

3.4.2設(shè)計(jì)效果.............................................................................................16

3.5購物車視覺設(shè)計(jì)與制作................................................................................17

3.5.1設(shè)計(jì)思路.............................................................................................17

3.5.2設(shè)計(jì)效果.............................................................................................17

3.6訂單結(jié)算頁視覺設(shè)計(jì)與制作........................................................................18

3.6.1設(shè)計(jì)思路.............................................................................................18

I

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

3.6.2設(shè)計(jì)效果.............................................................................................18

3.7個(gè)人中心視覺設(shè)計(jì)與制作............................................................................19

3.7.1設(shè)計(jì)思路.............................................................................................19

3.7.2設(shè)計(jì)效果.............................................................................................19

4總結(jié)..........................................................................................................................20

參考資料.........................................................................................................................21

II

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

禧瑪諾品牌網(wǎng)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

伴隨電子商務(wù)進(jìn)入迅猛發(fā)展的階段，各方面的競爭都愈發(fā)激烈，產(chǎn)品品類

越來越豐富，消費(fèi)者的選擇空間越來越大。品牌的實(shí)力開始體現(xiàn)在更多的方

面，比如擁有一個(gè)設(shè)計(jì)精美符合品牌氣質(zhì)的品牌的獨(dú)立網(wǎng)店。像完美日記、華

碩、華為等國際品牌都有自己的獨(dú)立網(wǎng)店。

禧瑪諾作為國際一線的漁具品牌，創(chuàng)始于1921年，子公司遍布全球17個(gè)

國家，已在漁具領(lǐng)域深耕100多年。

然而其品牌在中國國內(nèi)的官方網(wǎng)站卻顯得十分落后簡陋，并且還沒有獨(dú)立

的購買功能。

1.2項(xiàng)目需求分析

禧瑪諾品牌沒有官方旗艦店也沒有獨(dú)立購買功能的官方網(wǎng)站，禧瑪諾品牌

在國際漁具品牌中也是屬于一線的水平，之前介于中國國內(nèi)的收入水平和垂釣

運(yùn)動(dòng)的愛好者數(shù)量不多，一直沒有在中國建立官方旗艦店和有獨(dú)立購買功能的

官網(wǎng)。但是隨著國內(nèi)收入提高和垂釣運(yùn)動(dòng)的興起和普及，中國的漁具市場也空

前繁盛，作為具有國際一線水平的漁具品牌，卻沒有官方網(wǎng)店，所以此時(shí)建立

一個(gè)官方網(wǎng)店顯得尤為重要。

結(jié)合禧瑪諾品牌的高端漁具的品牌定位，和具有科技感和工業(yè)美感的產(chǎn)品

風(fēng)格，瞄準(zhǔn)高消費(fèi)垂釣愛好者的銷售目標(biāo)，又參考了競爭對手（達(dá)億瓦、阿

布、領(lǐng)峰）的設(shè)計(jì)風(fēng)格。分析出禧瑪諾品牌需要是一個(gè)具有獨(dú)立購買功能的官

方網(wǎng)站網(wǎng)店，這是其他競爭對手不具備的。在視覺表達(dá)方面禧瑪諾品牌需要一

個(gè)時(shí)尚美觀具有科技感和高級感的設(shè)計(jì)風(fēng)格，讓禧瑪諾品牌和產(chǎn)品更加具有吸

引力。屆時(shí)這個(gè)具有獨(dú)立購買功能的官方網(wǎng)站勢必可以大幅提升在中國這個(gè)龐

大市場的銷售量和市場占有率，進(jìn)一步提升禧瑪諾品牌的知名度和影響力。

1.3色彩設(shè)計(jì)

主體色彩使用品牌logo中的白色和藍(lán)色，還有可以凸顯品牌科技感的黑

1

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

色。其中白色和藍(lán)色分別代表浪花和大海藍(lán)天，應(yīng)和

ClosertoNature,ClosertoPeople.的品牌理念。

圖1標(biāo)準(zhǔn)色

1.4字體規(guī)范

楷體、仿宋、黑體、微軟黑體。如圖2所示）

圖2標(biāo)準(zhǔn)字體

2

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

2網(wǎng)店頁面原型圖分析與設(shè)計(jì)方案

2.1首頁

首頁頁面有從上到下分別是店招導(dǎo)航、banner、輪播推銷窗口、熱銷推

薦、擬餌推薦、魚線推薦六個(gè)部分。

其中輪播推銷窗口用輪播的方式展現(xiàn)推銷商品的主圖信息和價(jià)格，還設(shè)

計(jì)了立即搶購和收藏的按鍵，更好的向用戶展現(xiàn)產(chǎn)品信息。

接下來熱銷推薦、擬餌推薦、魚線推薦，其中熱銷推薦將熱門商品以醒目

的排版可以更好的引導(dǎo)用戶購買。擬餌、魚線作為垂釣中的消耗品，需求量很

大將它們的推薦放置在首頁可以有效提高購買率。（如圖3所示）

圖3首頁原型圖

3

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

2.2搜索結(jié)果頁

搜索結(jié)果頁面包含店招導(dǎo)航關(guān)鍵詞搜索、索引搜索、搜索結(jié)果四個(gè)部分。

索引搜索可以根據(jù)用戶所需完美的將用戶所需品類的商品呈現(xiàn)給用戶。搜索結(jié)

果模塊，除了將商品主圖、商品名稱商品價(jià)格展現(xiàn)出來，還將立即購買和加入

購物車的選項(xiàng)按鍵放置在下方，更加方便用戶進(jìn)行選購。（如圖4所示）

圖4搜索結(jié)果頁原型圖

2.3商品詳情頁

商品詳情頁包含店招導(dǎo)航、產(chǎn)品主圖及購買信息、右側(cè)客服中右側(cè)商品分

類導(dǎo)航、中間產(chǎn)品詳情內(nèi)容六個(gè)部分。產(chǎn)品主圖及購買信息模塊將商品主圖、

名稱、價(jià)格、配送等購買信息，再配合規(guī)格、數(shù)量和下方加入購物車、立即購

買按鍵方便用戶購買。右側(cè)客服中心模塊方便了快速聯(lián)系客服及時(shí)了解產(chǎn)品具

4

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

體信息。右側(cè)商品分類搜索模塊可以讓用戶快速的進(jìn)入所有商品頁面或者特定

類別商品分類搜索頁面，挑選用戶心儀的商品。（如圖5所示）

圖5商品詳情頁原型圖

5

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

2.4登錄注冊頁

登錄注冊頁包含店招導(dǎo)航、登錄、注冊三個(gè)部分。登錄界面除了傳統(tǒng)的賬

號密碼輸入框下方還貼心的添加了忘記密碼鏈接，可以方便用戶在忘記賬號或

密碼時(shí)快速找回。還有第三方登錄選項(xiàng)可以使用手機(jī)QQ、微信、支付寶完成

掃碼登錄。

注冊界面包括自定義用戶名、密碼、確認(rèn)密碼、手機(jī)號碼、手機(jī)驗(yàn)

證碼輸入框，最下方勾選《禧瑪諾服務(wù)條款》。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車頁包含店招導(dǎo)航、選購商品信息、猜你喜歡三個(gè)部分。購物車商品

模塊除包含產(chǎn)品基本信息，還包含自由選擇選購數(shù)量，收藏商品，移除商品的

選項(xiàng)。小計(jì)模塊可以清晰的羅列選購商品的總價(jià)和店鋪活動(dòng)滿減的優(yōu)惠。猜你

喜歡模塊通過后臺(tái)算法推薦用戶可能喜歡有興趣的商品，用戶還可以通過自己

點(diǎn)擊左右按鈕，刷新尋找自己喜歡感興趣的商品進(jìn)行了解和購買購買。（如圖

7所示）

6

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

圖7購物車原型圖

2.6訂單結(jié)算頁

訂單結(jié)算頁包含店招導(dǎo)航、收貨人信息、支付方式、所購商品四個(gè)部分。

其中收貨人信息模塊簡單醒目的將用戶的收貨人信息羅列出來，降低用戶選錯(cuò)

地址的幾率，提升用戶體驗(yàn)。（如圖8所示）

7

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

圖8訂單結(jié)算頁原型圖

2.7個(gè)人中心

個(gè)人中心頁包含店招導(dǎo)航、個(gè)人中心導(dǎo)航、賬戶信息、錢包、會(huì)員卡、熱

銷推薦六個(gè)模塊。

其中熱銷推薦模塊通過后臺(tái)算法顯示用戶可能喜歡的熱銷商品，吸引用戶

進(jìn)行購買，提升用戶購買欲望。（如圖9所示）

8

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

圖9個(gè)人中心原型圖

3網(wǎng)店頁面視覺效果設(shè)計(jì)與制作

3.1首頁視覺設(shè)計(jì)與制作

3.1.1設(shè)計(jì)思路

作為用戶進(jìn)入店鋪?zhàn)钕扔橙胙酆煹腷anner，其中活動(dòng)banner我以黑色和藏

藍(lán)色構(gòu)建尖銳具有科技感的圖片背景輪廓，再用深藍(lán)色的幾何圖形點(diǎn)綴其中營

造視覺美感的背景，搭配兩個(gè)不同顏色搭疊的五邊形標(biāo)記視覺重點(diǎn)。然后在圖

案上用醒目的文字標(biāo)注活動(dòng)信息。達(dá)到讓用戶第一眼就感受到企業(yè)魅力，抓住

用戶的心，留住用戶，吸引用戶了解活動(dòng)的目的。（如圖10所示）

9

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

圖10品牌節(jié)日活動(dòng)banner

其中產(chǎn)品banner我選擇22年新款TWINPOWERXD泛用紡車輪作為

banner主題產(chǎn)品，整體背景使用純黑背景，運(yùn)用通道摳圖將產(chǎn)品完美摳出，然

后對產(chǎn)品主圖進(jìn)行一個(gè)高斯模糊加低不透明度處理營造出高級的科技感。然后

在右側(cè)標(biāo)出信息和價(jià)格，下方立即購買按鍵點(diǎn)綴與店招和品牌logo撞色的橙色

邊框增加視覺吸引力讓整體更加美觀。（如圖11所示）

圖11品牌爆品促銷banner

首頁是整個(gè)店鋪用戶最先看到的頁面。所以在了解和發(fā)掘禧瑪諾品牌過程

中，根據(jù)品牌特性對首頁進(jìn)行了設(shè)計(jì)，首頁設(shè)計(jì)我共分了六個(gè)部分，店招導(dǎo)

航、banner、輪播推銷窗口、熱銷推薦、擬餌推薦、魚線推薦。背景選擇純白

與灰色，襯托出產(chǎn)品的高級、簡約的氣質(zhì)。

熱銷推薦、擬餌推薦、魚線推薦用灰色白色背景點(diǎn)綴藍(lán)色外發(fā)光按鍵，營

造出明快舒適的購物氛圍，提升用戶購物體驗(yàn)和選購欲望。（如圖12所示）

10

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

3.1.2設(shè)計(jì)效果

圖12首頁效果圖

11

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

3.2搜索結(jié)果頁視覺設(shè)計(jì)與制作

3.2.1設(shè)計(jì)思路

搜索結(jié)果頁是店鋪中用戶選購商品的重要頁面。所以在了解和發(fā)掘禧瑪諾

品牌過程中，根據(jù)品牌特性對搜索結(jié)果頁進(jìn)行了設(shè)計(jì)，搜索結(jié)果頁設(shè)計(jì)我共分

了四個(gè)部分，店招導(dǎo)航、關(guān)鍵詞搜索、分類索引、搜索結(jié)果。背景選擇純白，

點(diǎn)綴鮮艷明亮的按鍵襯托出簡約時(shí)尚的氣息。搜索結(jié)果醒目的紅色標(biāo)注價(jià)格，

加大的立即購買加入購物車按鍵吸引用戶進(jìn)行選購。（如圖13所示）

3.2.2設(shè)計(jì)效果

圖13搜索結(jié)果頁效果圖

12

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

3.3產(chǎn)品詳情頁視覺設(shè)計(jì)與制作

商品詳情頁是整個(gè)店鋪成交的關(guān)鍵頁面。所以在了解和發(fā)掘禧瑪諾品牌過

程中，根據(jù)品牌特性對產(chǎn)品詳情頁進(jìn)行了設(shè)計(jì)，產(chǎn)品詳情頁設(shè)計(jì)我共分了六個(gè)

部分，店招導(dǎo)航、產(chǎn)品主圖及購買信息、右側(cè)客服中右側(cè)商品分類導(dǎo)航、中間

產(chǎn)品詳情內(nèi)容。背景選擇純白與詳情內(nèi)容主調(diào)的黑色相襯，襯托出產(chǎn)品的科技

感、高級感和精致氣息，也能增加用戶購買欲望。整體設(shè)計(jì)語言統(tǒng)一，以下介

紹產(chǎn)品詳情內(nèi)容的設(shè)計(jì)思路。

3.3.1STELLASW設(shè)計(jì)思路

詳情頁從上到下，首先是產(chǎn)品主圖及購買信息將商品主圖、名稱、價(jià)格、

配送等購買信息，再配合規(guī)格、數(shù)量和下方藍(lán)底白字的加入購物車、立即購買

按鍵醒目美觀又符合整體配色，還方便了用戶進(jìn)行購買。右側(cè)客服中心醒目的

按鍵方便了用戶快速聯(lián)系客服及時(shí)了解產(chǎn)品具體信息，讓用戶更好的了解和購

買商品。商品分類可以讓用戶快速的進(jìn)入所有商品頁面或者特定類別商品分類

搜索頁面，用戶挑選和購買心儀的商品。

中間產(chǎn)品詳情內(nèi)容最上方用細(xì)長優(yōu)美的的藝術(shù)字寫出產(chǎn)品名稱，下方整體

使用黑色背景配合ps銳化的精美產(chǎn)品圖片，襯托產(chǎn)品的科技感和工業(yè)美感。

（如圖14所示）

13

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

3.3.2STELLASW設(shè)計(jì)效果

14

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

圖14STELLASW詳情頁效果圖

15

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

3.4登錄注冊頁視覺設(shè)計(jì)與制作

3.4.1設(shè)計(jì)思路

登錄注冊頁是整個(gè)店鋪展現(xiàn)產(chǎn)品理念的。所以在了解和發(fā)掘禧瑪諾品牌過

程中，根據(jù)品牌理念對登錄注冊頁進(jìn)行了設(shè)計(jì)，產(chǎn)品詳情頁設(shè)計(jì)我共分了三個(gè)

部分，店招導(dǎo)航、登錄、注冊。背景選擇貼近自然的溪流俯視圖加上白色的品

牌標(biāo)語，表達(dá)出品牌親近自然的品牌理念。精美的背景也能更加用戶。

登陸界面注冊界面，整體用一個(gè)地不透明度矩形框出，登錄界面除了傳統(tǒng)

的賬號密碼輸入框下方還貼心的添加了忘記密碼鏈接，可以方便用戶在忘記賬

號或密碼時(shí)快速找回。還有第三方登錄選項(xiàng)可以使用手機(jī)QQ、微信、支付寶

完成掃碼登錄。

注冊界面包括自定義用戶名、密碼、確認(rèn)密碼、手機(jī)號碼、手機(jī)驗(yàn)

證碼輸入框，最下方勾選《禧瑪諾服務(wù)條款》。整體設(shè)計(jì)語言統(tǒng)一。（如圖15

所示）

3.4.2設(shè)計(jì)效果

圖15登錄注冊頁效果圖

16

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

3.5購物車視覺設(shè)計(jì)與制作

3.5.1設(shè)計(jì)思路

購物車頁是店鋪成交的關(guān)鍵頁面。所以在了解和發(fā)掘禧瑪諾品牌過程中，

根據(jù)品牌特性對購物車頁進(jìn)行了設(shè)計(jì)，購物車頁設(shè)計(jì)我共分了三個(gè)部分，店招

導(dǎo)航、選購商品信息、猜你喜歡。背景選擇純白點(diǎn)綴藍(lán)色按鍵符合主題顏色，

使頁面簡潔大方。猜你喜歡模塊通過后臺(tái)算法推薦用戶可能喜歡有興趣的商

品，用戶還可以通過自己點(diǎn)擊左右按鈕，刷新尋找自己喜歡感興趣的商品進(jìn)行

了解和購買。（如圖16所示）

3.5.2設(shè)計(jì)效果

圖16購物車效果圖

17

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

3.6訂單結(jié)算頁視覺設(shè)計(jì)與制作

3.6.1設(shè)計(jì)思路

訂單結(jié)算頁是店鋪成交的重要頁面。所以在了解和發(fā)掘禧瑪諾品牌過程

中，根據(jù)品牌特性對訂單結(jié)算頁進(jìn)行了設(shè)計(jì)，訂單結(jié)算頁設(shè)計(jì)我共分了四個(gè)部

分，店招導(dǎo)航、收貨人信息、支付方式、所購商品。背景選擇純白點(diǎn)綴藍(lán)色、

綠色按鍵符合主題顏色，使頁面簡潔大方。（如圖17所示）

3.6.2設(shè)計(jì)效果

圖17訂單結(jié)算頁效果圖

18

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

3.7個(gè)人中心視覺設(shè)計(jì)與制作

3.7.1設(shè)計(jì)思路

個(gè)人中心頁是店鋪中用戶完成購買重要頁面。所以在了解和發(fā)掘禧瑪諾品

牌過程中，根據(jù)品牌特性對個(gè)人中心進(jìn)行了設(shè)計(jì)，個(gè)人中心頁設(shè)計(jì)我共分了六

個(gè)部分，店招導(dǎo)航、左側(cè)個(gè)人中心導(dǎo)航、賬戶信息、錢包、會(huì)員卡、熱銷推

薦。背景選擇純白，點(diǎn)綴鮮艷明亮的按鍵襯托出簡約時(shí)尚的氣息。賬戶信息、

錢包可以讓用戶快速了解用戶基礎(chǔ)信息。

會(huì)員卡欄可以向用戶展示加入會(huì)員提升會(huì)員等級后的優(yōu)惠特權(quán)增加用戶購

買欲望。熱銷推薦模塊通過后臺(tái)算法顯示用戶可能喜歡的熱銷商品，吸引用戶

進(jìn)行購買，提升用戶購買欲望。（如圖18所示）

3.7.2設(shè)計(jì)效果

圖18個(gè)人中心效果圖

4總結(jié)

畢業(yè)設(shè)計(jì)是一個(gè)總結(jié)我們對專業(yè)知識(shí)綜合運(yùn)用的過程，也是一個(gè)學(xué)習(xí)提高