自然派品牌網(wǎng)店視覺方案設(shè)計

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

目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1首頁視覺設(shè)計與制作................................................................................10

3.1.1設(shè)計思路.............................................................................................10

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

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

3.2.1設(shè)計思路.............................................................................................14

3.2.2設(shè)計效果.............................................................................................14

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

3.3.1產(chǎn)品名稱設(shè)計思路.............................................................................15

3.3.2產(chǎn)品名稱設(shè)計效果.............................................................................15

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

3.4.1設(shè)計思路.............................................................................................17

3.4.2設(shè)計效果.............................................................................................18

I

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

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

3.5.1設(shè)計思路.............................................................................................18

3.5.2設(shè)計效果.............................................................................................19

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

3.6.1設(shè)計思路.............................................................................................19

3.6.2設(shè)計效果.............................................................................................20

3.7個人中心視覺設(shè)計與制作........................................................................20

3.7.1設(shè)計思路.............................................................................................20

3.7.2設(shè)計效果.............................................................................................21

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

參考資料............................................................24

II

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

自然派品牌網(wǎng)店視覺方案設(shè)計

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

1.1項目背景

由于互聯(lián)網(wǎng)近幾年的飛速發(fā)展，網(wǎng)絡(luò)購物已經(jīng)成為市場的重要組成部分，

在給人們的生活帶來便利的同時，同時也有許多麻煩而應(yīng)運而生。在平時網(wǎng)購

的時候網(wǎng)店多，種類雜亂繁多。這時建立獨立的品牌形象網(wǎng)店，保持良好的形

象，就能夠在眾多網(wǎng)店中脫穎而出。比如說現(xiàn)在的三只松鼠以可愛的動物形象

給用戶刻上了良好的印象，短短幾年就迅速成為零食巨頭。還有良品鋪子、百

草味等品牌。

我所選的自然派品牌成立于1969年，歷史悠久，現(xiàn)擁國內(nèi)1萬多名員

工，并以“健康、專業(yè)、休閑”的經(jīng)營理念飛速成長。

1.2項目需求分析

關(guān)于自然派品牌，它們1969年成立于香港，是集貿(mào)易、生產(chǎn)、分銷、零售

一體化集團公司，是國內(nèi)休閑食品領(lǐng)導(dǎo)者之一。自然派成立至今，已擁有54年

的悠久歷史，現(xiàn)擁有國內(nèi)職工近1萬多人，流動資金超過10億元。2005年11

月，深圳市自然派商貿(mào)發(fā)展有限公司正式成立，公司秉承：“健康、專業(yè)、休

閑”的經(jīng)營理念快速發(fā)展、服務(wù)客戶。展望未來，自然派充滿信心，將秉承“合

作雙贏”的企業(yè)理念，通過持續(xù)的優(yōu)化與發(fā)展，致力于成為改善大眾生活的卓

越零售企業(yè)！隨著電商行業(yè)的興起，自然派品牌在網(wǎng)店中，也慢慢的在發(fā)展起

來，2014年10月23日在自然派官方網(wǎng)站上發(fā)布了天貓旗艦店、天貓專營店、

淘寶集市店、京東旗艦店、工商融已購、蘇寧易購店、深商天下店等知名電商

平臺的店鋪。雖然進入電商行業(yè)時間悠久，但沒有很多知名度很大的原因就是

自然派品牌的網(wǎng)店視覺效果不夠顯眼，此次項目給自然派品牌網(wǎng)店制作一系列

電商網(wǎng)店所需的效果圖，讓其顯得更加美觀，增加顧客對品牌的認(rèn)識度。

1.3色彩設(shè)計

色彩是一個頁面很重要的東西，它在人們精神文化中扮演著和非常重要的

角色。如果人類沒有了色彩，那將會是一件很恐怖的事。而相對于頁面的色

1

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

彩，也是同樣的道理，它可以給用戶帶來視覺沖擊，讓用戶產(chǎn)生不同的心里感

覺，從而購買的欲望。通過合理的色彩搭配，可以讓作品得到更好的宣傳，讓

用戶看著就心情舒適。

設(shè)計方案以藍色和淺黃色為主，這些顏色結(jié)合就是深綠色，給人一種舒適

感，但它又有獨特個性。旁邊的山和仙鶴更是點睛之筆，給深綠色增添了一抹

亮麗的色彩，也讓人感到云霄中的一股仙氣。

C：80M：40Y：58K：1

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

1.4字體規(guī)范

字體規(guī)范的重要性有很多，字體能夠傳遞信息，在品牌視覺設(shè)計的過程中

字體設(shè)計也尤為重要，字體的形式特征，沖擊用戶的眼球，讓用戶欣賞，激發(fā)

購買欲。選擇什么字體也是其中很細(xì)節(jié)的一部分，所以我精心挑選的以下字體

來設(shè)計我的效果圖。（如圖2所示）

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

2

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

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

2.1首頁

頂部有導(dǎo)航店招，店招下面放了三張banner，并且設(shè)置了輪播效果展示，

這是最顯眼的部位，也能夠讓用戶最清楚的看到產(chǎn)品，了解品牌。中間部分是

產(chǎn)品展示，購買產(chǎn)品，可以讓用戶看到自然派品牌的特色產(chǎn)品，也是做的熱賣

產(chǎn)品，激發(fā)用戶的購買欲望，增加銷量。在下方一點有我們品牌故事，讓用戶

看完產(chǎn)品后了解我們自然派品牌的文化，給用戶心里打造深刻的品牌印象。最

后底部展示有聯(lián)系我們、會員中心、個性化零食等?？梢宰屜肼?lián)系我們實地考

察的用戶容易的找到我們，也可以讓用戶很容易的注冊會員。（如圖3所示）

圖3首頁原型圖

3

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

2.2搜索結(jié)果頁

頂部有導(dǎo)航店招，店招下方布置了一個搜索框，用戶可以點擊搜索想要的

產(chǎn)品，可以更快的找的想要購買的產(chǎn)品。在分類那一行點擊想要購買的哪一類

產(chǎn)品，就會直接跳轉(zhuǎn)到那一類產(chǎn)品的頁面，讓用戶更加快捷，更加方便的找到

想要的產(chǎn)品。中間部位就是一部分的產(chǎn)品展示和掌柜推薦的產(chǎn)品，讓用戶可以

直接看到產(chǎn)品，吸引用戶眼球，從而產(chǎn)生消費。尾部設(shè)置的是自然派品牌的位

置、電話等品牌信息。（如圖4所示）

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

4

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

2.3商品詳情頁

頂部有導(dǎo)航店招，店招下方放置一個產(chǎn)品展示，可以選擇口味，選擇所購

買的數(shù)量，直接購買或者加入到購物車保存。中間部位就是展示詳情頁面，讓

用戶了解產(chǎn)品，怎么制作出來的，原產(chǎn)地在哪等信息，也讓用戶更加相信我們

品牌的產(chǎn)品讓其更放心。詳情旁邊還設(shè)置了一個評價功能，讓用戶看到其他用

戶評價的好評，從第三方角度訴說增加用戶信任度，激發(fā)用戶的購買欲望。尾

部設(shè)置的是自然派品牌的位置、電話等品牌信息。（如圖5所示）

圖5商品詳情頁原型圖

5

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

2.4登錄注冊頁

頂部有店招導(dǎo)航，用一張茶杯圖片作為裝飾；用戶登錄賬號密碼可以輸

入，記住密碼也可以勾選。還可以更多方式登錄。整體看起來清晰簡潔。登

錄，注冊模塊可以保證用戶的隱私、個人信息不被泄露。用戶也可以在此注冊

賬號，方便以后的登錄。登錄頁面流暢、用戶體驗好，可以增加用戶粘性，也

可以利用這個增加回頭客的數(shù)量。尾部設(shè)置的是自然派品牌的位置、電話等品

牌信息點擊相應(yīng)的文字也會跳轉(zhuǎn)到相應(yīng)的位置。（如圖6所示）

圖6登錄注冊頁原型圖

6

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

2.5購物車

頂部用店招導(dǎo)航，購物車是讓用戶可以在網(wǎng)店上購買功能，就像超市里面

的購物推車一樣，把商品放進購物車，期間也可以增加商品或者刪除商品的一

個功能，購物車是網(wǎng)上購買東西的一個快捷工具。中間部位可以查詢到添加到

購物車的商品。尾部設(shè)置的是自然派品牌的位置、電話等品牌信息點擊相應(yīng)的

文字也會跳轉(zhuǎn)到相應(yīng)的位置。（如圖7所示）

圖7購物車原型圖

2.6訂單結(jié)算頁

頂部是導(dǎo)航店招，店招下方可以選擇地址；然后就是商品訂單信息，在下

面就是可以選擇是否開具發(fā)票，選擇運送方式，給賣家留言，結(jié)算等信息，給

賣家留言設(shè)置了一個留言框，輸入留言信息就可以收到。訂單結(jié)算頁是一個讓

用戶結(jié)算，下單的頁面，相當(dāng)于一個收銀員的功能。所以訂單結(jié)算頁是作為網(wǎng)

7

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

店來說必不可少的一個頁面。尾部設(shè)置的是自然派品牌的位置、電話等品牌信

息點擊相應(yīng)的文字也會跳轉(zhuǎn)到相應(yīng)的位置。（如圖8所示）

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

2.7個人中心

最上方是導(dǎo)航店招，店招下面防止的是自己的個人信息，在下方是自己的

會員積分和相應(yīng)的特權(quán)?？梢宰層脩粽媲懈惺艿阶詴T可以領(lǐng)取優(yōu)惠。尾部

8

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

設(shè)置的是自然派品牌的位置、電話等品牌信息點擊相應(yīng)的文字也會跳轉(zhuǎn)到相應(yīng)

的位置。個人中心能夠增加用戶的粘性，也能讓用戶看到自己的個人信息。優(yōu)

惠卷、優(yōu)惠活動都會提前通知。讓用戶能夠真切地感受到優(yōu)惠力度。這樣更容

易讓用戶增加消費。（如圖9所示）

圖9個人中心原型圖

9

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

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

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

3.1.1設(shè)計思路

背景用淺綠色轉(zhuǎn)變?yōu)闇\黃色的漸變，山峰重巒疊嶂、仙鶴直沖云霄讓人感

到一種身處仙境的舒適感。對年貨盛典進行了描邊使其更加明顯，增加美感；

還使用了漸變，讓顏色由深變淺，突出層次感。促銷文字用圓環(huán)圍著，圓環(huán)采

用兩個橢圓疊在一起讓其有一個描邊的效果，上面那一層的橢圓還用了漸變使

其更加美觀。最下面把零食放在桌子上，這樣更加顯眼，增加食欲。（如圖10

所示）

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

背景底層用一個紅色三角形以相同角度進行旋轉(zhuǎn)一圈放在黃色背景上就可

以得到紅黃交替的畫面了?！氨畲黉N”文字旁邊的扇形邊框是用正圓和三角

形制作而成，使用“多邊套索工具”選擇出扇形區(qū)域，在進行反選，然后刪除

掉就可以得到扇形圖形?！案叩鞍棕i肉脯”旁邊的框用正圓、橢圓、矩形剪切

出來。豬肉脯圖片切在一個圓里，且給它增亮，調(diào)色使其更加美觀。整體看起

來簡約、舒適，也突出了爆款產(chǎn)品，讓人更加有購買力。爆款促銷作為產(chǎn)品的

一個重要營銷模式，增加消費群體，這個爆款banner也顯得尤其重要，一張好

的爆款促銷banner可以讓產(chǎn)品直接爆單，吸引消費者，產(chǎn)生銷量。Banner中的

文字排版最為重要，讓用戶第一眼就看到賣點是什么，賣的產(chǎn)品是什么。五折

的折扣也讓用戶眼前一亮，感覺很優(yōu)惠，激發(fā)消費欲。（如圖11所示）

10

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

圖11品牌爆品促銷banner

首頁有導(dǎo)航欄、店招、banner、優(yōu)惠劵、產(chǎn)品展示、品牌故事六大部分組

成；整體顏色為深綠色，顯得高端，兩側(cè)有山、有仙鶴、有云霧作為裝飾。首

頁是作為品牌視覺設(shè)計很重要的一個效果圖，是讓用戶第一眼就看到的圖片，

所以整體視覺給它設(shè)計的很仔細(xì)。（如圖12所示）

3.1.2設(shè)計效果

(此處直接展示首頁效果圖片)

11

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

12

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

圖12首頁效果圖

13

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

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

3.2.1設(shè)計思路

用多邊形框突出里面的文字，呈現(xiàn)淺黃色，里面用淺色的山作為裝飾。多

邊形框邊緣用了投影和調(diào)色，四角用扇形等距離切了一下讓其更加美觀

產(chǎn)品展示用的是俯視角度長方體，長方體上方用了橙色和淺黃色的漸變，

前面邊緣用橙色線條包裝，而價格用深綠色和白色的漸變橫條顯示在上面，

“搶”字特意用紅色圓圈圍住讓人有點擊的欲望。（如圖13所示）（如圖13所

示）

3.2.2設(shè)計效果

(此處直接展示搜索結(jié)果頁效果圖片)

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

14

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

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

3.3.1產(chǎn)品名稱設(shè)計思路

商品詳情頁是整個店鋪成交的關(guān)鍵頁面。所以在分析自然派品牌過程中，

我根據(jù)產(chǎn)品種類和特性，選了鱈魚片產(chǎn)品進行詳情頁設(shè)計。產(chǎn)品詳情頁設(shè)計我

共分了六個部分，店招導(dǎo)航、產(chǎn)品主圖及產(chǎn)品原料信息、中間產(chǎn)品詳情內(nèi)容。

這里背景色選擇深藍色，深藍色寓意神秘、純凈。深藍色是一種健康的顏色，

也是能夠刺激消費者食欲的顏色。整體結(jié)構(gòu)設(shè)計都是比較統(tǒng)一，除產(chǎn)品主圖和

購買信息與中間產(chǎn)品詳情內(nèi)容設(shè)計不同。鱈魚片的原料來源于海里，所以用深

藍色作為主要的背景顏色突出在海里的氛圍；首先是介紹產(chǎn)品的配料，制作過

程都剪切到一個圓里使其更加美觀，中間部分介紹鱈魚的生長環(huán)境、真材實

料，讓人感覺更加健康。最后用橙色作為背景色更加顯眼呈現(xiàn)出實物。（如圖

14所示）

3.3.2產(chǎn)品名稱設(shè)計效果

15

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

16

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

圖14產(chǎn)品名稱詳情頁效果圖

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

3.4.1設(shè)計思路

頂部套用店招導(dǎo)航，中間部分用白色背景作為登陸頁面，還用了一杯茶、

樹葉、水果進行裝飾，這樣讓人感到舒適、簡潔明了。（如圖15所示）

17

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

3.4.2設(shè)計效果

(此處直接展示登錄注冊頁效果圖片)

圖15登錄注冊頁效果圖

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

3.5.1設(shè)計思路

頂部店招導(dǎo)航，中間用圓角矩形框裝飾。產(chǎn)品購物車?yán)镉腥龢硬煌纳唐?/p>

展示，最左邊給用戶看到圖片，圖片旁邊用文字介紹商品，有價格、數(shù)量、刪

除和收藏商品。最下面是結(jié)算總金額?？梢宰層脩粲泻芎玫捏w驗感。（如圖16

18

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

所示）

3.5.2設(shè)計效果

(此處直接展示購物車效果圖片)

圖16購物車效果圖

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

3.6.1設(shè)計思路

頂部用店招導(dǎo)航，接下來就是展示收貨地址，可以選擇默認(rèn)收貨地址，用

矩形圍著地址。然后還可以增加收貨人信息。下面就是展示需要購買商品，可

以給買家留言，然后就是確認(rèn)支付。（如圖17所示）

19

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

3.6.2設(shè)計效果

(此處直接展示訂單結(jié)算頁效果圖片)

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

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

3.7.1設(shè)計思路

頂端有導(dǎo)航店招，然后就是個人信息展示，下面一點就是會員中心，可以

看到自己會員的積分和可領(lǐng)取的會員權(quán)益。頁面簡潔明了，可以讓用戶了解到

自己的信息和特權(quán)，給他們一個優(yōu)惠，讓其增加購買。（如圖18所示）

20

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

3.7.2設(shè)計效果

(此處直接展示個人中心效果圖片)

圖18個人中心效果圖

21

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

4總結(jié)

此次對于自然派品牌網(wǎng)店的設(shè)計方案，我已全部完成。我所選的畢業(yè)設(shè)計

題目是“自然派品牌網(wǎng)店視覺方案設(shè)計”，之所以選這個題目，是因為在大學(xué)

三年里對設(shè)計這一方面非常感興趣，也希望自己以后在設(shè)計這一方面工作。

在本次設(shè)計“自然派品牌網(wǎng)店視覺方案”的過程中，讓我又復(fù)習(xí)了許多沒學(xué)

會的專業(yè)知識。設(shè)計初期，我復(fù)習(xí)了AxureRP8、AdobePhotoshopCC等軟件

的使用。查找了關(guān)于原型圖如何制作、海報制作的資料；還與同學(xué)相互學(xué)習(xí)，

在指導(dǎo)老師開會課上，規(guī)劃如何做好畢業(yè)設(shè)計；設(shè)計中期，在網(wǎng)上找了許多圖

片素材來制作banner、詳情頁、首頁等，還在自然派品牌官網(wǎng)上查閱了大量該

品牌文化，并且進行了深入了解，在零售業(yè)務(wù)中，自然派充滿信心，對未來抱

有很大希望，將秉承“合作雙贏”的企業(yè)理念，通過持續(xù)的優(yōu)化與發(fā)展，致力于

成為改善大眾生活的卓越零售企業(yè)！隨著電商行業(yè)的興起，自然派品牌在網(wǎng)店

中，也慢慢的在發(fā)展起來。在設(shè)計末期，也是最難的一步，就是實際操作做出

作品。首先制作的是banner效果圖，一開始毫無頭緒，然后我參考了“三只松

鼠”，“良