湖南商務職業技術學院畢業設計

目錄

1網店視覺設計需求分析............................................................................................1

1.1項目背景..........................................................................................................1

1.2項目需求分析..................................................................................................1

1.3色彩設計..........................................................................................................1

1.4字體規范..........................................................................................................2

2網店頁面原型圖分析與設計方案............................................................................3

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

2.2搜索結果頁......................................................................................................4

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

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

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

2.6訂單結算頁......................................................................................................7

2.7個人中心..........................................................................................................8

3網店頁面視覺效果設計與制作................................................................................9

3.1首頁視覺設計與制作......................................................................................9

3.1.1設計思路...............................................................................................9

3.1.2設計效果.............................................................................................11

3.2搜索結果頁視覺設計與制作........................................................................12

3.2.1設計思路.............................................................................................12

3.2.2設計效果.............................................................................................12

3.3產品詳情頁視覺設計與制作........................................................................13

3.3.1STELLASW設計思路..........................................................................13

3.3.2STELLASW設計效果..........................................................................14

3.4登錄注冊頁視覺設計與制作........................................................................16

3.4.1設計思路.............................................................................................16

3.4.2設計效果.............................................................................................16

3.5購物車視覺設計與制作................................................................................17

3.5.1設計思路.............................................................................................17

3.5.2設計效果.............................................................................................17

3.6訂單結算頁視覺設計與制作........................................................................18

3.6.1設計思路.............................................................................................18

I

湖南商務職業技術學院畢業設計

3.6.2設計效果.............................................................................................18

3.7個人中心視覺設計與制作............................................................................19

3.7.1設計思路.............................................................................................19

3.7.2設計效果.............................................................................................19

4總結..........................................................................................................................20

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

II

湖南商務職業技術學院畢業設計

禧瑪諾品牌網店視覺方案設計

1網店視覺設計需求分析

1.1項目背景

伴隨電子商務進入迅猛發展的階段，各方面的競爭都愈發激烈，產品品類

越來越豐富，消費者的選擇空間越來越大。品牌的實力開始體現在更多的方

面，比如擁有一個設計精美符合品牌氣質的品牌的獨立網店。像完美日記、華

碩、華為等國際品牌都有自己的獨立網店。

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

國家，已在漁具領域深耕100多年。

然而其品牌在中國國內的官方網站卻顯得十分落后簡陋，并且還沒有獨立

的購買功能。

1.2項目需求分析

禧瑪諾品牌沒有官方旗艦店也沒有獨立購買功能的官方網站，禧瑪諾品牌

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

運動的愛好者數量不多，一直沒有在中國建立官方旗艦店和有獨立購買功能的

官網。但是隨著國內收入提高和垂釣運動的興起和普及，中國的漁具市場也空

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

一個官方網店顯得尤為重要。

結合禧瑪諾品牌的高端漁具的品牌定位，和具有科技感和工業美感的產品

風格，瞄準高消費垂釣愛好者的銷售目標，又參考了競爭對手（達億瓦、阿

布、領峰）的設計風格。分析出禧瑪諾品牌需要是一個具有獨立購買功能的官

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

個時尚美觀具有科技感和高級感的設計風格，讓禧瑪諾品牌和產品更加具有吸

引力。屆時這個具有獨立購買功能的官方網站勢必可以大幅提升在中國這個龐

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

1.3色彩設計

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

1

湖南商務職業技術學院畢業設計

色。其中白色和藍色分別代表浪花和大海藍天，應和

ClosertoNature,ClosertoPeople.的品牌理念。

圖1標準色

1.4字體規范

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

圖2標準字體

2

湖南商務職業技術學院畢業設計

2網店頁面原型圖分析與設計方案

2.1首頁

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

薦、擬餌推薦、魚線推薦六個部分。

其中輪播推銷窗口用輪播的方式展現推銷商品的主圖信息和價格，還設

計了立即搶購和收藏的按鍵，更好的向用戶展現產品信息。

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

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

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

圖3首頁原型圖

3

湖南商務職業技術學院畢業設計

2.2搜索結果頁

搜索結果頁面包含店招導航關鍵詞搜索、索引搜索、搜索結果四個部分。

索引搜索可以根據用戶所需完美的將用戶所需品類的商品呈現給用戶。搜索結

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

購物車的選項按鍵放置在下方，更加方便用戶進行選購。（如圖4所示）

圖4搜索結果頁原型圖

2.3商品詳情頁

商品詳情頁包含店招導航、產品主圖及購買信息、右側客服中右側商品分

類導航、中間產品詳情內容六個部分。產品主圖及購買信息模塊將商品主圖、

名稱、價格、配送等購買信息，再配合規格、數量和下方加入購物車、立即購

買按鍵方便用戶購買。右側客服中心模塊方便了快速聯系客服及時了解產品具

4

湖南商務職業技術學院畢業設計

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

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

圖5商品詳情頁原型圖

5

湖南商務職業技術學院畢業設計

2.4登錄注冊頁

登錄注冊頁包含店招導航、登錄、注冊三個部分。登錄界面除了傳統的賬

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

密碼時快速找回。還有第三方登錄選項可以使用手機QQ、微信、支付寶完成

掃碼登錄。

注冊界面包括自定義用戶名、密碼、確認密碼、手機號碼、手機驗

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

圖6登錄注冊頁原型圖

2.5購物車

購物車頁包含店招導航、選購商品信息、猜你喜歡三個部分。購物車商品

模塊除包含產品基本信息，還包含自由選擇選購數量，收藏商品，移除商品的

選項。小計模塊可以清晰的羅列選購商品的總價和店鋪活動滿減的優惠。猜你

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

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

7所示）

6

湖南商務職業技術學院畢業設計

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁包含店招導航、收貨人信息、支付方式、所購商品四個部分。

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

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

7

湖南商務職業技術學院畢業設計

圖8訂單結算頁原型圖

2.7個人中心

個人中心頁包含店招導航、個人中心導航、賬戶信息、錢包、會員卡、熱

銷推薦六個模塊。

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

進行購買，提升用戶購買欲望。（如圖9所示）

8

湖南商務職業技術學院畢業設計

圖9個人中心原型圖

3網店頁面視覺效果設計與制作

3.1首頁視覺設計與制作

3.1.1設計思路

作為用戶進入店鋪最先映入眼簾的banner，其中活動banner我以黑色和藏

藍色構建尖銳具有科技感的圖片背景輪廓，再用深藍色的幾何圖形點綴其中營

造視覺美感的背景，搭配兩個不同顏色搭疊的五邊形標記視覺重點。然后在圖

案上用醒目的文字標注活動信息。達到讓用戶第一眼就感受到企業魅力，抓住

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

9

湖南商務職業技術學院畢業設計

圖10品牌節日活動banner

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

banner主題產品，整體背景使用純黑背景，運用通道摳圖將產品完美摳出，然

后對產品主圖進行一個高斯模糊加低不透明度處理營造出高級的科技感。然后

在右側標出信息和價格，下方立即購買按鍵點綴與店招和品牌logo撞色的橙色

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

圖11品牌爆品促銷banner

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

中，根據品牌特性對首頁進行了設計，首頁設計我共分了六個部分，店招導

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

與灰色，襯托出產品的高級、簡約的氣質。

熱銷推薦、擬餌推薦、魚線推薦用灰色白色背景點綴藍色外發光按鍵，營

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

10

湖南商務職業技術學院畢業設計

3.1.2設計效果

圖12首頁效果圖

11

湖南商務職業技術學院畢業設計

3.2搜索結果頁視覺設計與制作

3.2.1設計思路

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

品牌過程中，根據品牌特性對搜索結果頁進行了設計，搜索結果頁設計我共分

了四個部分，店招導航、關鍵詞搜索、分類索引、搜索結果。背景選擇純白，

點綴鮮艷明亮的按鍵襯托出簡約時尚的氣息。搜索結果醒目的紅色標注價格，

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

3.2.2設計效果

圖13搜索結果頁效果圖

12

湖南商務職業技術學院畢業設計

3.3產品詳情頁視覺設計與制作

商品詳情頁是整個店鋪成交的關鍵頁面。所以在了解和發掘禧瑪諾品牌過

程中，根據品牌特性對產品詳情頁進行了設計，產品詳情頁設計我共分了六個

部分，店招導航、產品主圖及購買信息、右側客服中右側商品分類導航、中間

產品詳情內容。背景選擇純白與詳情內容主調的黑色相襯，襯托出產品的科技

感、高級感和精致氣息，也能增加用戶購買欲望。整體設計語言統一，以下介

紹產品詳情內容的設計思路。

3.3.1STELLASW設計思路

詳情頁從上到下，首先是產品主圖及購買信息將商品主圖、名稱、價格、

配送等購買信息，再配合規格、數量和下方藍底白字的加入購物車、立即購買

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

按鍵方便了用戶快速聯系客服及時了解產品具體信息，讓用戶更好的了解和購

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

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

中間產品詳情內容最上方用細長優美的的藝術字寫出產品名稱，下方整體

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

（如圖14所示）

13

湖南商務職業技術學院畢業設計

3.3.2STELLASW設計效果

14

湖南商務職業技術學院畢業設計

圖14STELLASW詳情頁效果圖

15

湖南商務職業技術學院畢業設計

3.4登錄注冊頁視覺設計與制作

3.4.1設計思路

登錄注冊頁是整個店鋪展現產品理念的。所以在了解和發掘禧瑪諾品牌過

程中，根據品牌理念對登錄注冊頁進行了設計，產品詳情頁設計我共分了三個

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

牌標語，表達出品牌親近自然的品牌理念。精美的背景也能更加用戶。

登陸界面注冊界面，整體用一個地不透明度矩形框出，登錄界面除了傳統

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

號或密碼時快速找回。還有第三方登錄選項可以使用手機QQ、微信、支付寶

完成掃碼登錄。

注冊界面包括自定義用戶名、密碼、確認密碼、手機號碼、手機驗

證碼輸入框，最下方勾選《禧瑪諾服務條款》。整體設計語言統一。（如圖15

所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

16

湖南商務職業技術學院畢業設計

3.5購物車視覺設計與制作

3.5.1設計思路

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

根據品牌特性對購物車頁進行了設計，購物車頁設計我共分了三個部分，店招

導航、選購商品信息、猜你喜歡。背景選擇純白點綴藍色按鍵符合主題顏色，

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

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

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

3.5.2設計效果

圖16購物車效果圖

17

湖南商務職業技術學院畢業設計

3.6訂單結算頁視覺設計與制作

3.6.1設計思路

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

中，根據品牌特性對訂單結算頁進行了設計，訂單結算頁設計我共分了四個部

分，店招導航、收貨人信息、支付方式、所購商品。背景選擇純白點綴藍色、

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

3.6.2設計效果

圖17訂單結算頁效果圖

18

湖南商務職業技術學院畢業設計

3.7個人中心視覺設計與制作

3.7.1設計思路

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

牌過程中，根據品牌特性對個人中心進行了設計，個人中心頁設計我共分了六

個部分，店招導航、左側個人中心導航、賬戶信息、錢包、會員卡、熱銷推

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

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

會員卡欄可以向用戶展示加入會員提升會員等級后的優惠特權增加用戶購

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

進行購買，提升用戶購買欲望。（如圖18所示）

3.7.2設計效果

圖18個人中心效果圖

4總結

畢業設計是一個總結我們對專業知識綜合運用的過程，也是一個學習提高