八王寺品牌網(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ì)......................................................................................................2

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

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

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

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

2.3商品詳情頁..................................................................................................7

2.4登錄注冊(cè)頁..................................................................................................8

2.5購(gòu)物車..........................................................................................................9

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

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

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

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

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

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

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

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

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

3.3商品詳情頁視覺設(shè)計(jì)與制作....................................................................17

3.3.1商品名稱設(shè)計(jì)思路.............................................................................17

3.3.2商品名稱設(shè)計(jì)效果.............................................................................17

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

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

I

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

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

3.5購(gòu)物車視覺設(shè)計(jì)與制作............................................................................21

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

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

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

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

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

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

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

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

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

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

II

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

八王寺品牌網(wǎng)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

隨著網(wǎng)絡(luò)技術(shù)的進(jìn)步，電子商務(wù)行業(yè)也得到了快速的發(fā)展，越來越多的人

看到了電子商務(wù)市場(chǎng)的發(fā)展?jié)摿Γe極加入到電子商務(wù)競(jìng)爭(zhēng)的熱潮當(dāng)中。電商

企業(yè)的數(shù)量也越來越多，隨之而來的便是電商競(jìng)爭(zhēng)日趨激烈。新穎且合適的網(wǎng)

店設(shè)計(jì)可以吸引到更多的人。例如三只松鼠，在設(shè)計(jì)畫面上比較復(fù)雜。因?yàn)槭?/p>

眾群體是年輕人，且購(gòu)買零食的女性占比更多，所以在網(wǎng)店裝修上選擇年輕活

潑又有點(diǎn)可愛的風(fēng)格。百草味則與三只松鼠不一樣，畫面簡(jiǎn)潔。從設(shè)計(jì)上來看

采用了簡(jiǎn)約清新的風(fēng)格，主色調(diào)為綠色，頁面布局簡(jiǎn)潔明了，給人一種很干凈

的感覺，但設(shè)計(jì)簡(jiǎn)潔的同時(shí)也不會(huì)顯得單調(diào)。

八王寺汽水是一家具有近百年歷史、東北三省家喻戶曉的民族飲料品牌企

業(yè)，是我國(guó)現(xiàn)存為數(shù)不多的由民族資本集資創(chuàng)辦的民族飲料企業(yè)，也是我國(guó)近

百年飲料工業(yè)的活化石。但是八王寺汽水線上品牌網(wǎng)店的購(gòu)買功能并不突出。

因此選用八王寺作為項(xiàng)目設(shè)計(jì)。

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

八王寺汽水作為百年老品牌，網(wǎng)店設(shè)計(jì)并沒有偏向購(gòu)買的設(shè)計(jì)方向，并且

在商品設(shè)計(jì)方面簡(jiǎn)單潦草，很大程度上降低了顧客的購(gòu)買欲望。并且隨著時(shí)代

的發(fā)展，網(wǎng)店設(shè)計(jì)也需要與時(shí)俱進(jìn)，經(jīng)過與其他網(wǎng)店的對(duì)比，八王寺汽水的網(wǎng)

店并沒有像其他網(wǎng)店那樣與時(shí)更新。八王寺汽水本身的百年品牌擁有很大的優(yōu)

勢(shì)，知名度并不低，因此為了擴(kuò)大優(yōu)勢(shì)，需要將品牌歷史體現(xiàn)出來。

雖然八王寺汽水是百年老品牌，但愛喝汽水的人多半都是年輕人，因此在

設(shè)計(jì)風(fēng)格上應(yīng)該偏向年輕化，不能因?yàn)槠放茪v史悠久而不考慮到消費(fèi)者的年齡

階段。明白正確的消費(fèi)者年齡段，做出相對(duì)應(yīng)的網(wǎng)店風(fēng)格才可以更好的提高消

費(fèi)者進(jìn)店概率和消費(fèi)的概率。

八王寺汽水主要賣的是水果飲料、汽水，因此為了更好地體現(xiàn)商品，提高

商品銷量，在商品的設(shè)計(jì)上需要添加水果、氣泡之類的元素襯托商品。同時(shí)，

對(duì)于冷飲，夏天的銷量會(huì)比冬天的銷量更好，夏天銷量也占據(jù)主要部分，且冷

1

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

飲主要功能便是解渴好喝，因此在商品設(shè)計(jì)方面需要給人一種夏天冷飲可以使

人們清涼舒暢的感覺。

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

在色彩設(shè)計(jì)上，采用橘色調(diào)為主色，綠色為輔助色。橘色也可以看成陽光

的顏色，更有夏天烈日的感覺，讓人更想購(gòu)買飲料汽水，選擇綠色搭配是為了

避免整體色彩太過熱烈，深綠色也有盛夏綠葉的感覺，同時(shí)綠色也意味著有青

春活力，綠色代表的健康也與水果飲料也比較相配。（如圖1所示）

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

1.4字體規(guī)范

不同字體會(huì)給人帶來不同的閱讀體驗(yàn)，等線和宋體適用于小型文字和正文

等，比如表述公司信息、標(biāo)注。合理的字體設(shè)計(jì)可以幫助突出圖文設(shè)計(jì)中重要

的內(nèi)容，便于顧客更好地識(shí)別關(guān)鍵信息。黑體適合用于商品展示處的名稱，字

體醒目較粗，能讓顧客一目了然。宋體用在海報(bào)上可以修飾海報(bào)，使海報(bào)更具

有設(shè)計(jì)美感。（如圖2所示）

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

2

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

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

2.1首頁

首頁分主要為店招、banner、優(yōu)惠券、海報(bào)、新品展示、公司介紹、底部

七個(gè)模塊組成。

店招簡(jiǎn)潔明了，能夠初步體現(xiàn)出店鋪的名稱和企業(yè)主營(yíng)方向，用于客戶識(shí)

別。

Banner所在的位置是最顯眼的，因此banner需要比店招做的更好看，吸引

眼球，讓人有能夠繼續(xù)往下瀏覽的想法。整體采用左圖右文的形式，同時(shí)Banner

所展示的商品銷量會(huì)提高，所以展示的應(yīng)該是店鋪比較火爆且好看的商品。

優(yōu)惠券欄目放在banner下方是利用了顧客的貪利心理，增加顧客的消費(fèi)欲

望，留下消費(fèi)者。

好看海報(bào)能讓顧客更加賞心悅目，美也會(huì)增加顧客的消費(fèi)欲望，同時(shí)也作

為優(yōu)惠券和新品展示的過渡。

新品展示既可以吸引新顧客也可以吸引老顧客。

公司介紹可以讓顧客更加了解公司，八王寺作為百年老品牌，在公司歷史

上也占有較大優(yōu)勢(shì)。作為百年老品牌更容易取得顧客信任。

底部使頁面更加完整，有頭有尾，增加權(quán)威性，同時(shí)可以使顧客一眼看清

網(wǎng)店包含的所有信息。（如圖3所示）

3

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

4

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

圖3首頁原型圖

5

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

2.2搜索結(jié)果頁

搜索結(jié)果頁可以分為搜索、搜索結(jié)果、商品延伸三個(gè)模塊。主要功能是讓

顧客尋找到滿意的商品，增加顧客購(gòu)買欲。

在搜索模塊上，首先考慮到可能會(huì)有新顧客或者選擇困難的人，額外添加

了一個(gè)熱搜部分，可以為顧客提供參考。其次將商品歸類，使有目標(biāo)的顧客能

夠快速找到自己想要尋找、購(gòu)買的商品。

商品延伸即展示除了客戶搜索之外的其他商品，根據(jù)銷量以及不同顧客的

愛好展示不同類的商品，增加顧客消費(fèi)的可能性。（如圖4所示）

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

6

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

2.3商品詳情頁

商品詳情頁使顧客會(huì)仔細(xì)瀏覽的頁面，主要包括商品大致信息展示模塊，

商品詳細(xì)展示模塊、商品延伸模塊。

商品大致信息展示可以讓顧客快速了解商品相關(guān)信息，判斷自己是否需要

此類產(chǎn)品。

商品詳細(xì)展示模塊是整個(gè)頁面最關(guān)鍵最主要的一部分，能夠讓顧客更加詳

細(xì)的了解商品。因此需要詳細(xì)介紹商品，將商品各個(gè)優(yōu)點(diǎn)展示出來，從而使顧

客放心購(gòu)買。

商品延伸模塊使頁面看上去更加豐富，同時(shí)增加商品展現(xiàn)率。（如圖5所

示）

圖5商品詳情頁原型圖

7

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

2.4登錄注冊(cè)頁

登錄注冊(cè)頁較為簡(jiǎn)單，只有登錄注冊(cè)的功能。右邊是登錄和注冊(cè)的功能。

鑒于該頁面顧客不會(huì)停留太久，設(shè)計(jì)過多也無濟(jì)于事。但過于簡(jiǎn)潔會(huì)讓人第一

印象較差從而影響后續(xù)瀏覽的心境，因此需要在左側(cè)適當(dāng)增加一些圖片作為頁

面整體裝飾。（如圖6所示）

圖6登錄注冊(cè)頁原型圖

8

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

2.5購(gòu)物車

購(gòu)物車由購(gòu)物車和商品延伸兩個(gè)模塊組成。

購(gòu)物車作為主要的功能，是便于顧客清楚直觀的了解到自己想購(gòu)買的商品

有那些，以便買單。

商品延伸在這里有兩個(gè)功能，一是增加顧客消費(fèi)的可能性。二是當(dāng)顧客的

購(gòu)物車為空時(shí)，商品延伸能夠一定程度上提高頁面的美觀性。（如圖7所示）

圖7購(gòu)物車原型圖

9

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

2.6訂單結(jié)算頁

訂單結(jié)算頁主要用于顧客查看確認(rèn)訂單信息，包含收獲人信息確認(rèn)、商品

信息確認(rèn)、選擇支付方式以及提交訂單。（如圖8所示）

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

10

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

2.7個(gè)人中心

個(gè)人中心主要包含個(gè)人資料，地址，訂單，收藏，會(huì)員權(quán)益，消息中心，

卡券卡包。

設(shè)計(jì)時(shí)采用的會(huì)員權(quán)益作為展示模塊。會(huì)員權(quán)益包含會(huì)員等級(jí)展示、積分

展示、VIP卡、專屬客服以及會(huì)員的各項(xiàng)權(quán)益。

會(huì)員等級(jí)越高，會(huì)員權(quán)益也就越多，等級(jí)展示可以讓顧客更清楚的知道自

己的等級(jí)以及距離下一等級(jí)還差多少，同時(shí)高等級(jí)也可以滿足顧客的虛榮心理。

積分可以用于兌換商品、卡券等物品，購(gòu)買的商品越多、等級(jí)越高，積分

也就越多，可以刺激顧客購(gòu)買更多商品。

VIP卡和專屬客服可以使顧客的虛榮心得到滿足。

會(huì)員權(quán)益展示可以讓顧客更加直觀的看見自己的權(quán)益有那些，比如優(yōu)惠券、

邀請(qǐng)返利、升級(jí)禮包以及生日禮包。（如圖9所示）

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

11

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

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

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

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

首頁分主要為店招、banner、優(yōu)惠券、海報(bào)、新品展示、公司介紹、底部

七個(gè)模塊組成。

店招采用橘色，讓人眼前一亮。除了基本的公司logo、標(biāo)題、公司電話，

還包含了搜索欄，個(gè)人中心圖標(biāo)、手機(jī)圖標(biāo)、購(gòu)物車圖標(biāo)，用于顧客快速找到

自己想要的東西。同時(shí)為了不使店招的兩旁太空曠，需要適當(dāng)添加一些合適的

圖片豐富畫面。

Banner是首頁頁面中最為重要的部分，整體采用左圖右文的形式，左邊的

圖片選擇的是山楂郡，顏色偏紅橘，因此選擇了比紅橘淺一點(diǎn)的粉色作為背景，

在突出商品的同時(shí)也不失協(xié)調(diào)，背景上添加加圓形條形以及圓點(diǎn)稍加裝飾。右

邊的文字描述商品，用于顧客迅速辨認(rèn)。

優(yōu)惠券欄目主要為綠色，優(yōu)惠券采用深綠色為背景，在下方增加一些水果

豐富畫面。同時(shí)在banner和優(yōu)惠券之間添加了向下流動(dòng)的液體作為背景之一，

使兩個(gè)頁面之間的轉(zhuǎn)換更流暢。

添加海報(bào)為了讓整個(gè)畫面更加好看，同時(shí)很好地將優(yōu)惠券和新品展示隔開。

新品展示背景采用橘色并增加水果裝飾，對(duì)于產(chǎn)品部分的背景則采用綠色，

擺放的兩個(gè)商品分別采用左文右圖以及左圖右文交替錯(cuò)開，使畫面更加有層次

感。

公司介紹需要突出公司介紹的部分，所以需要將背景弱化，同時(shí)公司介紹

部分也要有圖有文，使公司信息更有說服力，讓人更容易產(chǎn)生信賴感。

底部和店招一樣采用橘色，頭尾呼應(yīng)，使頁面完整。

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

Banner采用左圖右文，選取春節(jié)節(jié)日，整體畫面采用紅色修飾，為了突出

商品，背景采用淡黃的顏色。商品選用一款火爆的商品更能使烘托節(jié)日。背景

兩邊拜訪燈籠也更有春節(jié)的氛圍感。右邊的字體也應(yīng)該包含節(jié)日主題“恭賀新

春”，將立即購(gòu)買以及活動(dòng)優(yōu)惠設(shè)置成紅色，突出其重要性。（如圖10所示）

12

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

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

品牌爆品促銷banner

Banner采用右圖左文，選則夏季爆款產(chǎn)品，畫面背景采用冰塊和水的藍(lán)色，

突出夏天配上冷飲清爽舒暢的感覺。為了更好的突出商品，商品選用橘色與背

景色形成反差。左邊的文字采用橘色和紅色，一部分對(duì)應(yīng)產(chǎn)品顏色，一部分作

為文案重點(diǎn)。（如圖11所示）

圖11品牌爆品促銷banner

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

13

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

14

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

圖12首頁效果圖

15

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

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

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

搜索結(jié)果頁需要側(cè)重搜索結(jié)果，因此背景不需要太多元素，且需要弱化。

對(duì)于熱搜部分采用比較鮮明的紅色，能夠讓人一目了然。對(duì)于商品的背景以及

購(gòu)買按鈕分別采用淺綠色和深綠色，與店招和底部形成對(duì)比，使商品更加突出。

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

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

16

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

3.3商品詳情頁視覺設(shè)計(jì)與制作

商品詳情頁是整個(gè)店鋪成交的關(guān)鍵頁面。商品詳情頁設(shè)計(jì)一共分為了六個(gè)

部分，店招導(dǎo)航、商品主圖、購(gòu)買信息、左側(cè)導(dǎo)航欄、中間商品詳情內(nèi)容、右

側(cè)熱銷商品推薦。這里背景色選擇肉色，能夠更好地和中間商品詳情內(nèi)容融合。

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

購(gòu)買信息處除了基本信息外還添加了分享功能，可以讓顧客轉(zhuǎn)發(fā)出去，從

而提高商品瀏覽量、商品購(gòu)買量。右側(cè)熱銷商品推薦可以使畫面更加豐富飽滿，

同時(shí)提高商品展現(xiàn)率。左側(cè)導(dǎo)航欄可以讓顧客直觀了解到有哪些商品。中間的

商品詳情內(nèi)容需要格外注重，要展現(xiàn)商品的優(yōu)點(diǎn)，說服顧客購(gòu)買。因此商品的

信息必不可少，同時(shí)在設(shè)計(jì)時(shí)也特意強(qiáng)調(diào)了八王寺汽水是百年老品牌，是值得

信賴的品牌。對(duì)于商品的優(yōu)點(diǎn)，可以展示汽水氣泡十足，添加冰鎮(zhèn)口感更佳的

小提示。

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

17

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

18

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

圖14商品名稱詳情頁效果圖

19

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

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

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

登錄注冊(cè)頁側(cè)重登錄注冊(cè)功能，因此背景不需要太多元素。

登錄注冊(cè)頁作為單純的登錄功能頁面設(shè)計(jì)理應(yīng)較為簡(jiǎn)單，但過于簡(jiǎn)潔會(huì)讓

人第一印象較差從而影響后續(xù)瀏覽的心境，因此需要適當(dāng)增加一些圖片裝飾。

左邊圖片選擇的是飲料，符合八王寺汽水的商品，同時(shí)綠色的圖片也給人一種

清新舒適的感覺。右邊則是用于用戶登錄注冊(cè)，特別添加第三方登錄用于顧客

快捷登錄。

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

圖15登錄注冊(cè)頁效果圖

20

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

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

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

購(gòu)物車由購(gòu)物車商品和商品延伸兩個(gè)模塊組成。購(gòu)物車側(cè)重購(gòu)物車的內(nèi)容，

因此背景不需要太多元素。

購(gòu)物車商品包含商品大致信息、商品單價(jià)、商品數(shù)量、收藏以及移除。購(gòu)

物車商品從上至下依次排列，在最左端有可以勾選的地方方便顧客選擇商品，

以及在結(jié)算一欄設(shè)置全選方便顧客選擇所有購(gòu)物車的商品。右側(cè)有收藏快捷鍵

和移除快捷鍵。購(gòu)物車商品上下兩端采用淺橘色，與店招和底部相稱，中間采

用白色簡(jiǎn)潔大方。

商品延伸能夠一定程度上提高頁面的美觀性，且采用綠色，與購(gòu)物車不同

顏色，能夠更好的區(qū)分開。

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

圖16購(gòu)物車效果圖

21

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

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

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

訂單結(jié)算頁側(cè)重訂單信息確認(rèn)，因此背景不需要太多元素。信息確認(rèn)需要

簡(jiǎn)單明了，所以模塊背景也是采用白色，沒有過多的修飾。

修改地址采用白色字體橘色按鈕，較為醒目。價(jià)格和提交訂單按鈕較為重

要，所以采用鮮明的紅色，紅色也有表明很重要的意思。其他字體則選擇黑色，

白底黑字讓人一目了然。

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

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

22

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

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

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

個(gè)人中心主要包含個(gè)人資料，地址，訂單，收藏，會(huì)員權(quán)益，消息中心，

卡券卡包。設(shè)計(jì)時(shí)采用的會(huì)員權(quán)益作為展示模塊。模塊背景也是簡(jiǎn)單的白色，

等級(jí)經(jīng)驗(yàn)條、積分、會(huì)員權(quán)益、個(gè)人資料等重要的地方采用綠色，與其他地方

形成對(duì)比，讓人一目了然。VIP