億滋品牌網(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é)果頁..................................................................................................4

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

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

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

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

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ì)與制作....................................................................12

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

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

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

參考資料............................................................19

II

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

億滋品牌網(wǎng)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

隨著時(shí)代的發(fā)展與進(jìn)步，許多新興行業(yè)崛起且發(fā)展迅速，電商行業(yè)就是其

中之一，隨著電商的迅速發(fā)展，行業(yè)內(nèi)的競爭也十分激烈，一些品牌或者電商

企業(yè)為了吸引消費(fèi)者和展現(xiàn)自己的品牌實(shí)力，對自己的網(wǎng)店或者品牌進(jìn)行視覺

設(shè)計(jì)與美化，以博消費(fèi)者眼球進(jìn)而促進(jìn)消費(fèi)者購買商品；并且視覺設(shè)計(jì)已經(jīng)大

規(guī)模應(yīng)用。例如，圣羅蘭、橘朵、匯源等等知名品牌都擁有自己的獨(dú)立網(wǎng)店，

建立了自己的獨(dú)立的品牌形象。而億滋是國外知名品牌，在國內(nèi)知名度不高，

但是它的商品卻家喻戶曉，導(dǎo)致這種現(xiàn)象的原因是只擁有國外官網(wǎng)，且官網(wǎng)無

購買功能；迫切需要建立自己的品牌形象網(wǎng)店，樹立自己的特有的品牌形象，

進(jìn)而促進(jìn)購買力與品牌知名度。

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

從品牌方向進(jìn)行分析，品牌需要一個(gè)有活力，并且視覺效果良好的設(shè)計(jì)去

滿足消費(fèi)者的視覺感官體驗(yàn)從而展現(xiàn)該品牌商品的企業(yè)文化與品牌形象；進(jìn)一

步吸引消費(fèi)者，促進(jìn)購買量，增加品牌知名度。

從消費(fèi)者方面來看，所選品牌是以零食主的品牌，所以主要受眾兒童以及

青少年、年輕人為主要消費(fèi)力，暖色調(diào)可以使人心情愉悅，在瀏覽的的過程中

更加舒適，所以我選擇整個(gè)視覺設(shè)計(jì)方案以暖色調(diào)明黃色為主色調(diào)。

從產(chǎn)品整體進(jìn)行分析，其品牌主打以零食為主的食品，為了使消費(fèi)者瀏覽

更舒適，更加消費(fèi)者的瀏覽體驗(yàn)度，其主體色調(diào)應(yīng)以暖色調(diào)為主，使該品牌商

品整體看起來更加有食欲，從而促進(jìn)購買。

該品牌是國外品牌，品牌在國內(nèi)不知名但是其商品很受歡迎，銷售量常年

居高不下，其品牌只有國外官網(wǎng)，不利于國內(nèi)消費(fèi)者瀏覽，并且官網(wǎng)無商品購

買力。隨著人們?nèi)找嬖鲩L的物質(zhì)文化需求，現(xiàn)今電商行業(yè)發(fā)展迅速，紛紛建立

自己的富有特色的網(wǎng)店，從而通過品牌網(wǎng)店展現(xiàn)自己的企業(yè)內(nèi)涵與企業(yè)文化，

并且引導(dǎo)消費(fèi)者進(jìn)行消費(fèi)。因此，該品牌需要建立擁有自己品牌特色的網(wǎng)店，

充分展現(xiàn)自己獨(dú)特的企業(yè)文化，該網(wǎng)店整體色調(diào)以暖色調(diào)黃色為主，促進(jìn)消費(fèi)

1

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

者更好的進(jìn)行商品瀏覽，并且使商品顯得更加有食欲，進(jìn)而促進(jìn)消費(fèi)量的增加。

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

色彩的美并不限于色彩搭配色的多樣，同樣可以做到簡潔的美。選定一種

基礎(chǔ)色，可以很輕松創(chuàng)建和諧的氛圍。我以暖色調(diào)黃色為主色調(diào)，其他淡色調(diào)

為輔助。黃色溫暖與希望，并且黃色可以使消費(fèi)者更有食欲，引導(dǎo)消費(fèi)者進(jìn)行

購買，進(jìn)而增加商品的銷售量。（如圖1所示）

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

1.4字體規(guī)范

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

2

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

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

2.1首頁

首頁主要有以下幾個(gè)部分：

店招（輪播圖/banner）：展示自己的店鋪形象，讓用戶一進(jìn)來就就看到最

大的優(yōu)惠，引導(dǎo)用戶深度訪問，從而進(jìn)行消費(fèi)。

產(chǎn)品分類導(dǎo)航：標(biāo)注類別，讓首頁頁面更整潔清晰，方便用戶快速找到需

要的產(chǎn)品。

商品搜索：將其放在店招的位置，方便用戶搜索關(guān)鍵詞

熱銷爆款：進(jìn)行一些應(yīng)急的爆款、主推商品，打造品牌調(diào)性產(chǎn)品，提升品

牌口碑和復(fù)購率。

精選單品展示：將熱銷商品或者新品進(jìn)行展示，可以讓用戶快速找到所需

商品，促成購買交易；并且可以對新產(chǎn)品進(jìn)行宣傳推廣。

品牌故事：介紹品牌的創(chuàng)立，發(fā)展與創(chuàng)新，使消費(fèi)者進(jìn)一步了解品牌的發(fā)

展歷程。（如圖3所示）

3

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

圖3首頁原型圖

2.2搜索結(jié)果頁

首先我將該品牌所有種類商品進(jìn)行不同的分類。

大類分別：大致將品牌不同種類商品進(jìn)行劃分，使消費(fèi)者可以更加準(zhǔn)確的

進(jìn)行瀏覽與購買。

發(fā)貨省份：發(fā)貨省份一目了然，可以解決消費(fèi)者一些不必要的小麻煩。

糕點(diǎn)種類與商品口味：消費(fèi)者百口百味，按照消費(fèi)者口味將商品進(jìn)行分類，

使商品口味一目了然，側(cè)面暗示消費(fèi)者進(jìn)行購買。

并且在搜索結(jié)果頁放上商品相關(guān)推薦鏈接，吸引消費(fèi)者的注意并且進(jìn)行購

4

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

買。（如圖4所示）

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

2.3商品詳情頁

對商品的詳細(xì)介紹，商品圖片與商品信息吻合，介紹商品屬性以及價(jià)格、

購買等，左側(cè)小部分將所有商品進(jìn)行種類劃分，并且可以進(jìn)行商品收藏等，右

側(cè)進(jìn)行商品詳情展示與顧客評價(jià)反饋，商品詳情右側(cè)進(jìn)行熱銷產(chǎn)品推薦，此舉

吸引消費(fèi)者并促進(jìn)商品購買，增加銷售量；并且整個(gè)版式比較簡單明了，有利

于消費(fèi)者進(jìn)行瀏覽。（如圖5所示）

5

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

圖5商品詳情頁原型圖

2.4登錄注冊頁

登錄注冊頁采用左右版格式排列，左邊使用該品牌產(chǎn)品精選圖片修飾整個(gè)

登錄注冊頁，使登錄注冊頁看起來不會(huì)生硬、呆板，并且增加品牌辨識(shí)度；右

邊做注冊登錄頁面，使整個(gè)登錄注冊頁看起來更加整齊、清晰，一目了然，有

助于引導(dǎo)消費(fèi)者進(jìn)行注冊登錄。（如圖6所示）

6

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

圖6登錄注冊頁原型圖

2.5購物車

整個(gè)購物車頁面應(yīng)當(dāng)簡潔明了，將其分為上下兩板塊，商品、名稱、單價(jià)、

數(shù)量等作為購物車頁面，排列整齊，清晰明了，一目了然；下面板塊作為加上

商品鏈接，消費(fèi)者可以進(jìn)行點(diǎn)擊與商品頁面瀏覽，能夠暗示顧客進(jìn)行消費(fèi)。（如

圖7所示）

圖7購物車原型圖

7

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

2.6訂單結(jié)算頁

結(jié)算頁主要有收貨人信息、商品清單、支付方式三個(gè)部分，收貨人信息主

要是顧客地址的記錄并且可以對其修改，商品清單將顧客加購并且有購買意圖

的商品，將其進(jìn)行有序排列；支付方式可以按顧客意愿進(jìn)行選擇，支付方式更

加多樣化。（如圖8所示）

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

2.7個(gè)人中心

個(gè)人中心左側(cè)區(qū)域進(jìn)行個(gè)人中心的功能羅列，可以使消費(fèi)者可以更加清晰

的進(jìn)行瀏覽，左側(cè)為會(huì)員名片展示消費(fèi)者信息，其次是會(huì)員權(quán)益，將會(huì)員權(quán)益

進(jìn)行整齊羅列，可以側(cè)面滿足消費(fèi)者的需求，最后鏈接熱銷商品，增加曝光度

并且側(cè)面暗示消費(fè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ì)思路

品牌首頁整體采用比較溫暖又食欲的黃色暖色調(diào)，并且以其他淡色調(diào)輔助，

從側(cè)面烘托商品，使商品看起來更加可口有食欲。店招搭配品牌LOGO與品牌口

號使消費(fèi)者了解品牌文化與形象，并且在右側(cè)添加搜索欄目方便消費(fèi)者進(jìn)行店

內(nèi)商品搜索，在店招下方設(shè)計(jì)商品目錄，將商品按目錄進(jìn)行劃分方便消費(fèi)者瀏

覽，增加消費(fèi)者的瀏覽體驗(yàn)度，并且目錄使用黑體，黑體比較整齊、清晰，更

加端莊大氣。其次是兩張banner海報(bào)，該品牌商品清一色為食品，因此我選定

元宵節(jié)為品牌節(jié)日banner主題；品牌節(jié)日我選用黃色與黃色相結(jié)合使其更有節(jié)

日的氛圍，顏色選用與該商品十分搭配，整體看起來更加和諧，并在海報(bào)中加

入一些顆粒效果使其看起來更加真實(shí)，在進(jìn)行商品的擺放與海報(bào)的裝飾，使整

體海報(bào)更加和諧、不會(huì)顯得單調(diào)。品牌爆款banner則選用橙黃色為主色調(diào)，藍(lán)

9

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

色及其他色調(diào)輔助；考慮到消費(fèi)者多為兒童以及青少年、青年，banner標(biāo)題使

用比較俏皮的圈欣意冠黑體，用ps畫出圓形并且進(jìn)行字體裝飾使字體更加活潑、

靈動(dòng)，在使用長方形進(jìn)行適當(dāng)?shù)淖儞Q來修飾海報(bào)，使海報(bào)整體內(nèi)容比較豐富，

符合banner主題。

往下有熱銷爆款、精選單品、當(dāng)季新品和品牌故事四個(gè)板塊，標(biāo)題都使用

張海山銳線簡體，柵格化后進(jìn)行切割用斜線與英語含義單詞進(jìn)行修飾，使用圖

片對每個(gè)版塊的標(biāo)題進(jìn)行修飾，使標(biāo)題整體更加特別有新意。并且每個(gè)板塊的

商品欄都使用四角圓潤的圖形進(jìn)行修飾使商品板塊不會(huì)顯得凌厲，也是更好的

突顯商品。首頁最后則是該品牌的普及鏈接與所有權(quán)說明，將其進(jìn)行整體排列，

促使整個(gè)頁面更加簡潔明了。（如圖10、11所示）

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

圖11品牌爆品促銷banner

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é)果頁整體設(shè)計(jì)較為簡潔，設(shè)置商品搜索框使以便消費(fèi)者可以更加清

晰的進(jìn)行瀏覽與商品搜索，并且品牌發(fā)貨地、種類進(jìn)行分類劃分，使整個(gè)頁面

更有層次感，不會(huì)顯得不和諧。下部分進(jìn)行品牌商品宣傳，將商品進(jìn)行整齊排

列，增加商品曝光度，并且促進(jìn)購買。（如圖13所示）

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

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

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

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

據(jù)該產(chǎn)品種類和特性，進(jìn)行品牌產(chǎn)品詳情頁視覺設(shè)計(jì)。產(chǎn)品詳情頁設(shè)計(jì)分了六

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

右側(cè)熱銷產(chǎn)品推薦。這里背景色選擇黃色，黃色代表著陽光與生機(jī)勃勃。黃色

是一種溫暖、且有溫度的顏色，能夠刺激消費(fèi)者的食欲，增加購買率。整體結(jié)

12

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

構(gòu)設(shè)計(jì)都是比較統(tǒng)一，除產(chǎn)品主圖和購買信息與中間產(chǎn)品詳情內(nèi)容設(shè)計(jì)不同。

以下是介紹這三種產(chǎn)品詳情內(nèi)容的設(shè)計(jì)思路。

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

頁面整體分為店招導(dǎo)航、產(chǎn)品主圖及購買信息、左側(cè)導(dǎo)航欄、中間產(chǎn)品詳

情內(nèi)容、右側(cè)熱銷產(chǎn)品推薦六個(gè)部分，該品牌產(chǎn)品為食品，因此整體色調(diào)選用

黃色，黃色是溫暖、陽光的顏色，可以增加消費(fèi)者的食欲，促使消費(fèi)者進(jìn)行購

買力。頁面導(dǎo)航欄使用黑體，簡潔明了，更具可觀性。左側(cè)導(dǎo)航欄使用比較俏

皮的圈欣意冠黑體，進(jìn)行整齊排列，并且可以進(jìn)行產(chǎn)品收藏，使產(chǎn)品購買更加

便捷。最右側(cè)熱銷產(chǎn)品推薦，進(jìn)行商品宣傳以便增加瀏覽量促進(jìn)商品購買。產(chǎn)

品信息內(nèi)容方面分為產(chǎn)品信息、產(chǎn)品細(xì)節(jié)、購買須知三個(gè)方面進(jìn)行闡述。產(chǎn)品

信息板塊進(jìn)行商品簡介，產(chǎn)品細(xì)節(jié)方面進(jìn)行產(chǎn)品圖片展示，購買須知注明食品

購買需注意的地方。（如圖14所示）

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

13

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

圖14億滋詳情頁效果圖

14

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

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

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

頁面整體使用黃色為主色調(diào)。頁面背景使用田字格進(jìn)行修飾，使頁面整體

不會(huì)顯得單調(diào)；頁面主體分為左右品牌主圖和登錄注冊板塊，且登錄注冊板塊

排列整齊，清晰明了，使頁面整體具有可觀性。（如圖15所示）

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

圖15登錄注冊頁效果圖

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

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

該頁面整體采用較為簡潔的頁面布局，設(shè)置全選、商品、商品名稱、單價(jià)、

數(shù)量、小計(jì)、操作等板塊，并將頁面內(nèi)容排列整齊，使頁面整體整齊統(tǒng)一，個(gè)

人一種舒適的觀感。并在下方設(shè)置按鈕板塊，可以選中商品、刪除所選商品、

清空購物車或者直接進(jìn)行結(jié)算，目的在于購買更加快速便捷，有利于促進(jìn)消費(fèi)

者進(jìn)行消費(fèi)購買。在購物車頁面主要功能后段設(shè)置“猜你喜歡”板塊，并且添

加商品鏈接，可以一鍵進(jìn)行購買，不僅可以增加商品瀏覽度，也可以增加產(chǎn)品

熱度與購買量。（如圖16所示）

15

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

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

圖16購物車效果圖

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

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

頁面主要分為我的購物車、訂單確認(rèn)、付款詳情、交易是否成功四個(gè)部分，

在訂單確認(rèn)添加收貨人信息，如，收貨人姓名、地址、電話號碼等，并且可以

進(jìn)行修改也可以添加多個(gè)收貨人信息，使其更加靈活便捷。設(shè)置商品清單板塊，

注明商品名稱、商品初始單價(jià)、商品數(shù)量、折扣價(jià)格等等，消費(fèi)者可以更加清

晰的進(jìn)行商品瀏覽與商品購買。購買商品也可以選擇支付寶、微信、信用卡等

多種不同的付款方式，并且注明總計(jì)價(jià)格、運(yùn)費(fèi)與應(yīng)付價(jià)格，使頁面更加簡單

明了，一目了然。（如圖17所示）

16

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

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

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

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

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

該頁面分為左側(cè)導(dǎo)航欄，品牌會(huì)員卡、會(huì)員權(quán)益