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

目錄

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

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

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

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

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

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

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

2.2搜索結果頁..................................................................................................5

2.3商品詳情頁..................................................................................................5

2.4登錄注冊頁..................................................................................................7

2.5購物車..........................................................................................................7

2.6訂單結算頁..................................................................................................8

2.7個人中心......................................................................................................9

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

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

3.1.1設計思路.............................................................................................10

3.1.2設計效果.............................................................................................13

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

3.2.1設計思路.............................................................................................14

3.2.2設計效果.............................................................................................15

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

3.3.1詳情頁所做產品設計思路.................................................................16

3.3.2詳情頁所做產品設計效果.................................................................17

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

3.4.1設計思路.............................................................................................19

3.4.2設計效果.............................................................................................20

I

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

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

3.5.1設計思路.............................................................................................20

3.5.2設計效果.............................................................................................21

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

3.6.1設計思路.............................................................................................21

3.6.2設計效果.............................................................................................22

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

3.7.1設計思路.............................................................................................22

3.7.2設計效果.............................................................................................23

4總結..........................................................................................................................24

參考資料............................................................25

II

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

味多美品牌網店視覺方案設計

1網店視覺設計需求分析

1.1項目背景

隨著社會經濟的迅猛發展，人們的生活質量也在不斷提高，人們的消費習

慣也有了很大的改變，越來越多的人們都接受并且適應網絡購物。隨著電商的

發展，網上的各品牌之間的競爭也愈發激烈。近些年，許多知名企業也相繼創

立屬于自己獨立品牌形象的網店，例如：創立于2012年，主打做堅果和休閑零

食的三只松鼠電商品牌、創立于1999年，綜合型家紡類多喜愛企業等等，創立

自己品牌獨立運營的形象店，打造精美、獨特的網店視覺設計，通過網絡挖掘

市場。

北京味多美食品有限公司成立于1996年，是國內著名的蛋糕烘焙連鎖食品

企業。從成立至今，在國內已經創辦了300多家直營連鎖門店，以豐富、高品

質的產品，平民化的價格，親切友善的服務贏得眾多消費者的青睞。為了更好

地樹立品牌獨有的形象，需要打造品牌獨立運營的網店，以更好的詮釋品牌理

念和品牌形象。

1.2項目需求分析

“味多美”蛋糕網店通過互聯網平臺為消費者送達高品質、優惠的服務,隨

著電商行業的發展，品牌網店形象與同類蛋糕網店的競爭對比下，顯得有些落

后，所以對品牌網店形象進行重新視覺設計。

品牌企業內涵以豐富、高品質的產品，平民化的價格，親切友善的服務贏

得眾多消費者的青睞，品牌企業主打蛋糕烘焙類食品，讓消費者不再只是為了

填飽肚子，還可以為消費者帶來美好、浪漫、愉快的享受，更能夠讓消費者找

到一種歸屬感和溫馨感以及對美味的感動。

1.2.1色彩設計

主體色：網店主體色彩采用粉色，粉色是浪漫美好的象征色，同時也代表

溫柔、甜美、夢幻、輕松和安撫。味多美是蛋糕烘焙類品牌，蛋糕可以給人一

種甜蜜美好、輕松愉快的幸福感，與粉色代表寓意相符合，讓消費者在進入網

1

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

店挑選產品時，都帶著這份美好的心情挑選產品。也可以治愈那些生活中遇到

不開心的事情時，想給自己買一個甜品，進入網店逛逛時，看見這份美好的顏

色，安撫消費者的心靈，暫時忘記那些不開心的事情，給消費者帶來重新點燃

美好生活的希望。

輔助色：輔助色采用跟主體色相呼應的淡粉色，配合著主體的深粉色，使

網店風格更加和諧、精致，更好地呈現出網店整體風格想表達出的設計效果。

（如圖1所示）

圖1標準色

1.3字體規范

店鋪字體采用了四種標準中文字體，使店鋪網頁整體完整和諧。（如圖2

所示）

2

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

圖2標準字體

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

2.1首頁

首頁由四個模塊組成。第一部分店招的設計，設有店鋪標識、收藏按鈕、

廣告語、搜索欄、定位、購物車、手機逛、導航條，同時導航條設置了首頁、

所有產品、人氣爆品、同城配送、關于我們、聯系我們、會員中心、登錄/注冊

超鏈接，方便消費者在逛網店時，通過這些超鏈接和按鈕可以迅速了解到店鋪

信息和自己所需要的產品，也可以在不知道買什么產品時根據人氣爆品等店鋪

推薦購買到自己所需要的產品。設置收藏店鋪按鈕，方便消費者在回購產品時

找不到店鋪，可以通過收藏按鈕再次找到店鋪購買產品。定位功能方便店鋪獲

取客戶地理位置，將客戶定制的蛋糕安全準時的配送到消費者手中，也方便消

費者知道最近店鋪的位置，預留好蛋糕制作和配送的時間。

第二部分banner區，在此模塊，放至五幅滾動的banner，店鋪可在此區域

放置熱銷產品和店鋪活動海報，讓客戶在進入店鋪后第一時間就知道這些信息。

第三部分展示區，最上面設有四個精美的優惠券，留住消費者，激發客戶

的購買欲，同時還特別設置了一個25元的新會員入會專享優惠券，留住一波忠

3

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

實客戶。設置“TOP爆款”板塊，在此板塊放置三款店鋪熱銷產品，打造店鋪經

典款。設有“零食場景優選”板塊，此板塊設置了一個瓷片區，設置五塊瓷片，

通過瓷片錯落的凌亂的設計感，展示店鋪除開蛋糕外的其他烘焙類產品。設置

“品牌介紹”板塊，通過八個長方形，圖片和文字上下交錯展示出味多美食品

有些公司的發展歷程和所取得的重要成就，讓客戶更加親耐和信任味多美。在

最后設置三個味多美品牌的專業品質按鈕，客戶通過這三個按鈕，可以了解味

多美這些專業品質，放心的都買味多美的產品。最底部設有返回按鈕，方便用

戶返回到前面的板塊。

第四部分頁尾區，設置關于、條塊、幫助、聯系、關注四組超鏈接，用戶

可通過下面的子鏈接找到自己需要的服務和想要了解得店鋪信息，同時關注設

有官方微博二維碼，用戶可通過掃描下方二維碼關注店鋪動態會員活動等等（如

圖3所示）

圖3首頁原型圖

4

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

2.2搜索結果頁

搜索結果頁設置了三種客戶搜索產品時會常用的幾種分類：“系列”、“口

味”、“價格”，客戶也可以根據自己習慣的搜索方式搜索到自己需要的產品。

搜索出的結果會按六種結果進行排序，默認排序方式為“綜合排序”，客戶也

可以選擇其他排序方式對搜索出來的產品進行排序。每個搜索結果都會由產品

圖、產品名稱、價格和總銷量組成。每頁展示六個產品信息。（如圖4所示）

圖4搜索結果頁原型圖

2.3商品詳情頁

商品詳情圖展示商品的詳細信息。商品詳情圖展示了商品的精美圖片，從

商品的原材料到商品的口味再到商品的服務都有很詳細的展示。客戶可以從上

往下盡情的瀏覽商品詳細信息，讓客戶買的放心，吃的放心。客戶滿意可在此

5

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

頁面選擇自己適合或喜歡的口味、尺寸和數量進行下單購買，也可加入購物車。

商品詳情圖還設置了寶貝排行榜，展示了店鋪賣的最好的十款商品，讓客戶在

瀏覽商品詳情的同時，對展示的感興趣的商品也點擊進去購買。（如圖5所示）

圖5商品詳情頁原型圖

6

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

2.4登錄注冊頁

登錄頁面設計了兩種登錄方式，分別是密碼登錄和短信登錄，客戶可以選

擇其中一種更方便自己登錄的方式登錄，或當客戶忘記登錄密碼時也可以選擇

短信登錄的方式登錄，更用戶提供便利的登錄方式。在登錄頁左側設置了一個

展示區，可以放置店鋪插畫或者放置店鋪活動圖，讓客戶在登錄或注冊時也可

以瀏覽到店鋪的一些活動和商品信息。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車頁面列出客戶加入購物車的商品，包括客戶選擇該商品的口味、規

格、數量、價格等等，還設置了收藏和刪除按鈕，客戶對喜歡的商品可以收藏，

方便客戶下次購買時找不到商品。當客戶選擇所購買商品后，點擊下邊或者上

邊的結算按鈕進行結算。在此頁面還設計了三個可以滾動的模塊，分別是“猜

你喜歡”、“隨手購”、“我的關注”，讓客戶在看購物車頁面時，順便看到

下面的板塊，看到感興趣的加入購物車購買，或者看看“我的關注”模塊，對

關注的商品想再次購買。（如圖7所示）

7

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

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁面是最后客戶下單商品的結算頁面。在此頁面，客戶選擇收貨

地址后，在確認訂單信息模塊中，列出客戶所選商品的詳細信息、商品的運送

方式、是否贈送運費險、客戶享有何種優惠活動，客戶也可以選擇是否開具發

票，還可以在給賣家留言框中輸入一些注意事項，好為客戶提供特殊的服務。

最后客戶確認完這些信息，點擊最后的提交訂單即可下單商品。（如圖8所示）

8

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

圖8訂單結算頁原型圖

2.7個人中心

個人中心頁面由三個模塊組成。第一個模塊為會員卡，卡片上有客戶的頭

像、卡號、等級信息，還有會員積分、會員權益、購物金，這三項是客戶成為

會員后才能享用的，可以兌換商品或者享有一些會員的特殊權益，也能留住更

多客戶。第二個模塊為本月會員權益，在此模塊會顯示會員上月、本月、下月

所享有的會員權益，每月都會發放一張會員專享優惠券。第三個模塊為熱銷推

薦，設置四個展示區，展示熱銷的四種商品，促使客戶可對感興趣的商品進行

瀏覽和購買。（如圖9所示）

9

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

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

品牌節日活動banner我選擇的是38女神節為主題制作的節日活動banner。

10

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

整體采用淡粉色來映襯女神節的節日氛圍，放一些絲帶、花瓣、花朵更凸顯使

主題更加靈動、浪漫的氛圍。文字和商品采用左右的擺放方式，使得banner整

體協調完整。“38女神節”采用描邊、外發光和投影的效果，突出主體字，最

下邊用一個漸變的橢圓框柱本次活動所享的優惠，使得不失去美觀的同時，客

戶也能看見本次優惠活動的力度，促使顧客點擊活動按鈕進去購買商品。（如

圖10所示）

圖10品牌節日活動banner

品牌爆品促銷banner我選用本品牌買的最火爆的草莓蛋糕作為品牌爆品

促銷banner的主圖。同樣文字和商品采用左右的擺放方式，使得banner整體

協調完整。草帽蛋糕和下邊的三顆草莓都添加了陰影的效果，使草莓蛋糕和所

用的原材料草莓更加新鮮立體。文字部分，用紅色凸顯主題，配合著黑色描述

草莓蛋糕的品質和同城當日送達的優勢，讓客戶看見就想立馬下單，所以最后

設置了一個“立即購買”的按鈕，方便客戶下單或者進店逛逛其他商品。背景

采用深粉色和草莓的部分剪影，使得banner整體更加協調美觀。（如圖11所

示）

圖11品牌爆品促銷banner

11

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

首頁整體采用甜蜜浪漫粉色和線條拼條組成，既呼應蛋糕可以給人一種甜

蜜美好、輕松愉快的幸福感，也能更好將“TOP爆款”、“零食場景優選”、

“品牌介紹”三個模塊區分開來。在“TOP爆款”上端設置了四個優惠券的擺放，

用小蛋糕進行點綴，吸引客戶注意力，留住客戶，激發客戶的購買欲，同時還

特別設置了一個25元的新會員入會專享優惠券，留住一波忠實客戶并成為會員。

“TOP爆款”設置三個展示展示區，可用來展示店鋪最火爆或想推銷的三種商品。

“零食場景優選”模塊，此模塊設置了一個瓷片區，由五塊瓷片區組成，通過

瓷片錯落的凌亂的設計感，展示店鋪除開蛋糕外的其他烘焙類商品。“品牌介

紹”模塊，通過八個長方形，圖片和文字上下交錯展示出味多美食品有些公司

的發展歷程和所取得的重要成就，讓客戶更加親耐和信任味多美。在最后設置

三個味多美品牌的專業品質按鈕，客戶通過這三個按鈕，可以了解味多美這些

專業品質，放心的都買味多美的產品。最底部設有返回按鈕，方便用戶返回到

前面的板塊。（如圖12所示）

12

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

3.1.2設計效果

13

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

圖12首頁效果圖

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

3.2.1設計思路

搜索結果頁面根據商品的特點做了幾種分類方式方便客戶搜索到所需的商

品。在最頂部設計了搜索框，客戶可在搜索框中輸入關鍵詞進行搜索商品，也

可按下邊的分類方式進行搜索商品。同時還設置了幾種排序方式，客戶也可對

搜索結果進行排序。每頁展示僅展示六個搜索商品結果，不造成客戶的眼睛疲

14

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

勞，而且展示商品的圖片、名稱、價格、銷量等信息，方便客戶快速選擇到所

需商品進行購買。（如圖13所示）

3.2.2設計效果

圖13搜索結果頁效果圖

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

商品詳情頁是客戶對商品詳情進行瀏覽，是決定店鋪商品成交數量的關鍵

頁面。所以根據商品的種類和特點，選擇其中一款產品進行商品詳情頁的設計。

商品詳情頁由商品主圖、商品購買信息、左側寶貝排行榜、中間商品詳情內容

組成。背景色選擇淡粉色，粉色是浪漫美好的象征色，營造了一種甜蜜愉快的

氛圍，同時也是一種溫暖的顏色，可以刺激顧客的味覺的顏色。整體的設計完

15

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

整和諧。以下是介紹這款商品詳情內容的設計思路和設計的內容。

3.3.1詳情頁所做產品設計思路

商品詳情頁分成上下二個部分。上邊我設置了商品主圖和商品購買信息，

下邊設置了寶貝排行榜、寶貝詳情、寶貝評價三個頁面。首先上邊部分：左側

擺放的是商品主圖，客戶可直觀看見商品樣式；右側有商品名稱、月銷數量、

價格基本信息，還有蛋糕尺寸、蛋糕口味、數量的選擇，客戶可選擇需要的參

數后點擊馬上搶按鈕進行購買，也可先加入購物車，最后逛完全部商品后付款

購買。下邊部分：左側擺放寶貝排行榜，按照銷售量和收藏數進行排列，展示

八種靠前的商品。客戶有時就會有種從眾的心理，在自己沒有明確購買想法的

時候，會根據大眾的推薦和購買量進行購買，此時寶貝排行榜展示出的商品，

客戶就會點擊進去瀏覽詳情進行購買。右側為寶貝詳情和寶貝評價，寶貝評價

是展示購買商品后，客戶對商品的反饋，店鋪可根據客戶的反饋進行改良和保

持，也可以作為其他客戶下單時看見反饋不錯而下單購買商品；寶貝詳情首先

展示草莓蛋糕的三個優點“精選食材”、“手工烘焙”、“天然奶油”作為草

莓蛋糕最主要的三大賣點，讓客戶看見這三個賣點就對草莓蛋糕產生強烈的好

感和購買欲，然后從草莓蛋糕的顏值高，展示草莓蛋糕的細節圖，看出草莓蛋

糕的內部和用料，到草莓蛋糕的制作食材，讓客戶吃的放心，再到草莓蛋糕的

多種口味，客戶可根據自己的喜好，選擇自己喜歡的口味，最后是配送服務和

注意事項，客戶可根據自己的需求定制蛋糕，使客戶享用到味道絕美的草莓蛋

糕。（如圖14所示）

16

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

3.3.2詳情頁所做產品設計效果

17

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

18

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

圖14詳情頁所做產品效果圖

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

3.4.1設計思路

登錄注冊頁面選擇深粉色作為背景，是整體完整協調，呼應店鋪主圖。在

19

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

左側設置了一個展示區，我選擇了一個蛋糕的插畫擺放在這，凸顯店鋪主體，

給登錄頁面增添幾分精致和美好。設置了密碼和短信二種登錄方式，客戶可選

擇一款自己適合的登錄方式，方便客戶登錄。（如圖15所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車頁面采用一個圓角矩形區分，里面列出客戶所加入購物車所選商品

的詳情信息，包括商品的圖片、名稱、價格、數量等參數，方便選擇和確認商

品參數后點擊結算按鈕即可下單購買商品。下邊的“猜你喜歡”、“隨手購”、

“我的關注”可根據的在店鋪所購買的產品和搜索詞，推薦客戶感興趣的商品，

讓客戶在看見感興趣的商品點進去瀏覽和加購，促進店鋪商品的銷量。（如圖16

所示）

20

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

3.5.2設計效果

圖16購物車效果圖

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

3.6.1設計思路

訂單結算頁是客戶最后對所想購買的商品進行下單結算的頁面。由二個部

分組成，分別是“選擇收貨的地址”和“確認訂單信息”。客戶可在“選擇收

貨的地址”中選擇商品商品的收貨地，這里用粉色矩形框和灰色矩形框區分選

中和為現中的狀態。“確認訂單信息”中詳細列出客戶所想下單的商品的參數、

21

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

享用的服務和優惠活動、預計送達的時間，最后點擊“提交訂單”按鈕完成下

單。（如圖17所示）

3.6.2設計效果

圖17訂單結算頁效果圖

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