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

目錄

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

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

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

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

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

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

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

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

2.3商品詳情頁..................................................................................................6

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

2.5購物車..........................................................................................................8

2.6訂單結算頁..................................................................................................9

2.7個人中心....................................................................................................10

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

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

3.1.1設計思路.............................................................................................11

3.1.2設計效果.............................................................................................12

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

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

3.2.2設計效果.............................................................................................14

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

3.3.1產品名稱設計思路.............................................................................15

3.3.2產品名稱設計效果.............................................................................16

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

3.4.1設計思路.............................................................................................18

3.4.2設計效果.............................................................................................18

I

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

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

3.5.1設計思路.............................................................................................19

3.5.2設計效果.............................................................................................19

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

3.6.1設計思路.............................................................................................20

3.6.2設計效果.............................................................................................21

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

3.7.1設計思路.............................................................................................21

3.7.2設計效果.............................................................................................22

4總結..........................................................................................................................22

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

II

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

天喔品牌網店視覺方案設計

1網店視覺設計需求分析

1.1項目背景

目前，隨著互聯網的快速發展，網絡購物已經變成了日常生活的一種新型

購物模式，受電商行業快速發展的影響，網店競爭愈演愈烈。許多網店建立了

屬于自己的網店，例如：三只松鼠，良品鋪子等都有屬于自己的網店，這對于

品牌形象的推廣和產品的宣傳有極大的幫助。同時經濟不斷發展，人們的生活

水平不斷提高，但隨之而來的是快節奏的生活方式和工作上的巨大壓力，所以

上海天喔食品有限公司推出了“天喔主E，零食新主張”的口號，希望人們在巨

大的壓力下，通過天喔找到屬于自己的主張。

天喔集團，即天喔食品（集團）有限公司，是以天喔休閑食品等品牌為龍

頭，集生產、代理、銷售和物流服務為一體具有代表性的快速消費品專業營銷

公司。集團成立于1999年，旗下品牌包括：天喔，很牛，Q豬，i鴨，谷和，

君再來，早早麥，川湘，鹽津鋪子等等。

1.2項目需求分析

天喔食品有限公司為了順應時代發展同時緩解競爭壓力，結合公司理念，

希望對網店進行重新設計，所以天喔需要一個令人耳目一新的網店設計，以此

來吸引消費者前來購買。新設計不僅要展現產品綠色綠色自然，還要展現產品

特色。隨著時代發展經濟提高，消費者要求的也提高許多，對于零食有了更高

的要求，為了適應消費者要求天喔將天喔柚子茶改良，重新推出，天喔蜂蜜柚

子茶使用綠色自然的材料打造清爽的飲料，契合了消費者要求，此時我們需要

對網店進行優化。對于產品而言更好的設計可以讓原本被忽視的產品展現到消

費面前。

綜上所述，天喔網店需要重新進行網店視覺設計以此來提高品牌影響力、

吸引消費者以及產品推廣度。

1.3色彩設計

網店的主體色使用淡綠色作為主體色，綠色的代表意義為清新、自然、環

1

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

保，綠色還有無公害，健康的意思，與本網店的產品相契合。天喔是零食品牌，

其品牌中的飲料：蜂蜜柚子茶是本品牌的主打產品，以清新的口味，健康的品

質深受消費者喜愛。希望消費在看網店產品時可以與產品一起體驗自然與健康。

輔助色是與主體相呼應的兩種飽和度高綠色，與主題色相配合，完善了網

店的配色。（如圖1所示）

圖1標準色

1.4字體規范

網店采用了方正蘭亭黑體、微軟雅黑、方正粗黑宋簡體、方正舒體，在字

體上經行設計，使網店畫面簡潔協調，體現網店風格。（如圖2所示）

圖2標準字體

2

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

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

2.1首頁

首頁由店招、banner區、產品區以及頁尾四個部分組成。導航欄設有首頁、

所有產品、暢銷爆款、精品禮盒、聯系我們、關于我們、個人中心詞條，可以

幫助消費者快速的了解網店產品，也可以快速找到消費者需要的產品。Banner

區，作為網站廣告區會對產品進行引流，以及投放廣告。可以是消費者進網店

就可以看到熱銷產品或當時網店正在進行的活動。產品區，細分為三個小部分。

首先是優惠卷，設置了不同優惠，設置搶購按鈕，激發消費者的興趣，使消費

者留在網店內。對優惠卷進行設計，使優惠卷變得更吸引消費者。其次是熱賣

爆品、零食星球和零的分類，幫助了消費者更好的尋找產品，介紹了產品、產

品的價格和產品的活動。最后是關于公司的介紹羅列了公司的成立、公司的理

念以及公司旗下的產品。頁尾，有客服關懷、關于我們、我的賬戶和關注我們，

消費者可以通過頁尾找到客服，進行咨詢或者售后。（如圖3所示）

3

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

4

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

圖3首頁原型圖

2.2搜索結果頁

搜索結果頁由搜索欄、篩選欄、以及搜索結果組成。搜索欄方便消費者查

找產品，篩選欄方便消費者尋找產品樣式及包裝種類，這種方式可以使消費者

快速找到自己想要或適合的產品，對產品進行購買或加入購物車等行為。搜索

結果區由六個瓷片區組成，在瓷片區內具有圖片、價格、正在進行活動的優惠

以及購物車標志，可以將產品快速加入購物車。（如圖4所示）

5

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

圖4搜索結果頁原型圖

2.3商品詳情頁

產品詳情頁由四個成分組成，產品的詳細信息區域、左邊功能導航欄、右

邊產品推薦欄以及產品自定義區域。產品詳細信息區域會顯示產品圖、產品詳

細信息、購買數量以及購買的價格。左邊導航欄里有可以交互的詞條，想消費

者推薦新品以及爆品等，可以增加消費者的體驗感。猜你喜歡具有三個瓷片區，

是利用消費者瀏覽過的產品、收藏過的產品以及購買過的產品進行推薦，可以

增加消費者下單的可能性。在產品的自定區會填上與產品相關的補充部分。詳

情頁是消費者與意向購買產生的頁面，所以詳情頁的打造極為重要，是網店方

案設計的重中之重。（如圖5所示）

6

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

圖5商品詳情頁原型圖

2.4登錄注冊頁

登錄注冊頁由一張背景以及登錄/注冊以及第三方登錄組成。登錄/注冊除

用戶名密碼外，還在登錄鍵左下方添加了忘記密碼選項，防止消費者忘記密碼

而失去賬號。第三方登錄有微信、QQ、微博登錄，方便消費者登錄網店，也方

7

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

便關聯賬號，可以為網店及其產品進行宣傳。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車由我的購物車、以及商品店鋪組成。我的購物車采用列表式方法，

上方橫排有商品信息、單價、數量、價格以及操作，下方有已選商品件數、合

計，可以幫助消費者直觀的看到購買產品信息，防止消費者結算錯誤，對于產

品，可以進行全部結算以及單個結算，具有一定的互動性。店鋪推薦由4個瓷

片區組成，具有產品圖片、產品名稱、產品價格，推薦產品由新品為主，方便

消費者一起結算或加入購物車。（如圖7所示）

8

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

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁具有收貨地址、支付方式、購買商品三個板塊。收貨地址有四

個可選地址，第一位是默認地址，但在購買時也可以點擊其他地址進行購買。

選擇支付方式具有三種在線支付、朋友代付、貨到付款。購買商品是最后結算

前的信息確認，可以幫助消費者確認自己所購買的產品，防止購買出錯。（如

圖8所示）

9

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

圖8訂單結算頁原型圖

2.7個人中心

個人中心有會員卡、側邊導航、會員可享和會員推薦。會員卡上具有賬號、

電話、地址、訂單、收藏、積分和余額，是消費者的賬號信息，消費者購買的

產品會在訂單里顯示此頁面顯示數量，點擊可跳轉頁面，收藏與訂單相似，在

網店內購買產品可獲得積分，積分在個人中心顯示，積分可在網店商城兌換優

惠卷以及產品，網店可充值，在個人中心顯示剩余余額。側邊具有詞條，點擊

可跳轉頁面。會員可享有六個瓷片區除簽到以及做任務是固定外其他四個瓷片

區可以根據當期活動進行更改。會員推薦可向消費者推薦產品。（如圖9所示）

10

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

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

本圖為品牌節日活動banner。整張圖采用了粉色與白色，凸顯了情人節的

浪漫氛圍，圖片左圖右文，使圖片一目了然。圖中對文字進行了一些改變，例

如：將“love”中的“o”變為一個愛心形狀的桃子，不僅與節日相呼應，也與

產品相呼應。在放置產品區域添加了桃子作為點綴，添加了圖片的趣味性。（如

圖10所示）

圖10品牌節日活動banner

本圖為品牌爆品banner。本圖使用了包裝對比色作為背景，同時背景也可

以理解為蜂蜜正在與柚子進行攪拌，突出了產品。同時對字體進行了設計將茶

葉元素融入到茶字中，使人聯想到健康，這正契合了本產品的內涵。（如圖11

所示）

11

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

圖11品牌爆品促銷banner

首頁整體采用綠色背景，加入白色與黃色進行對比,突出了網店清新，自然

的風格。Banner與優惠卷的黃色banner相呼應，白色的瓷片區有許多不同樣式，

不會給消費者帶來重復的感受。產品區域主要以白色為主，突出橙色的購買鍵，

突出了價格及活動，使消費者對價格及活動一目了然。對于大瓷片區主要是禮

盒等大件產品，小瓷片推薦單個產品。同時首頁設立產品分類區域，點擊可跳

轉頁面。最后設立品牌介紹，使消費者了解品牌文化。（如圖12所示）

3.1.2設計效果

12

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

13

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

圖12首頁效果圖

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

3.2.1設計思路

根據產品信息，將產品分類，方便消費者查找。在店招下方設立搜索框，

方便查找，在搜索框下方設立分類框，使消費者可以確定想要的食品的種類、

包裝方式以及價格，消費者可以自主選擇需要的產品及其包裝方式、食品種類，

也可調節，想要的價格區間，更方便消費者找到自己滿意的產品。下面分為六

個瓷片區，有產品圖片、產品介紹以及產品價格，有購物車樣式圖標，方便消

費者加入購物車。（如圖13所示）

3.2.2設計效果

14

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

圖13搜索結果頁效果圖

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

商品詳情頁是整個店鋪成交的關鍵頁面，詳情頁是消費者在成交前對于判

定需不需要產品的最后階段。此次詳情頁我選擇了天喔的主打產品：天喔蜂蜜

柚子茶。對于詳情頁背景我選擇與包裝盒相近的淡綠色，希望能帶給消費者清

新自然的感覺。我把詳情頁分為了六個部分：店招、產品區域、左側導航欄、

右側產品推薦、產品詳情、頁尾。除店招和頁尾相同外其他皆各有特點，接下

來我會詳細介紹。

3.3.1蜂蜜柚子茶詳情頁設計思路

產品區域有產品圖片、產品價格、產品信息、購買、加入購物車。左側導

航欄有詞條。右側產品推薦推薦網店的三種產品，下面是一個按鈕，可以跳轉

到其他頁面。產品詳情是詳情頁的重點。產品詳情有七個部分，產品主圖、產

品配料、產品優點、產品的營養價值、產品適用場景、產品信息以及產品售后。

15

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

產品詳情詳細的給消費者介紹了產品優點。主圖顯示了天喔蜂蜜柚子茶的標語

及產品樣式，產品配料下采用了蒙版的方式使圖片有了立體感，同時文字也詳

細介紹了配料，產品優點對背景進行設計使產品看起來清爽健康，產品的營養

價值介紹了蜂蜜柚子茶里富含的營養。（如圖14所示）

3.3.2蜂蜜柚子茶詳情頁設計效果

16

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

17

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

圖14蜂蜜柚子茶詳情頁效果圖

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

3.4.1設計思路

登錄注冊頁采用綠色的背景，與圖中的產品相呼應，背景采用放射樣式圖

片，突出了產品本身。登錄注冊使用了一張產品banner作為背景，產品放在頁

面左邊，右邊為登錄頁面，登錄頁面具有用戶名、登錄密碼他、登錄鍵等基礎

登錄設置，方便消費者登錄本網店。同時我們也設置第三方登錄，更方便消費

者登錄，也可以關聯其他賬號。（如圖15所示）

3.4.2設計效果

18

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

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車頁面設計的背景我主要以綠色為主，白色為輔助色，呼應了店招和

頁尾的色調，使得整個界面整潔協調。上面部分設置了購物車各個方面的操作

功能，方便消費者對購物車中的產品數量、規格等進行操作，同時我還設計了

與其他界面互動鏈接的操作，如消費者可以從購物車界面，收藏商品轉到收藏

界面，不僅優化了消費者的購物體驗還增加了界面的互動效果。購物車的下面

部分還設計了店鋪推薦，展示了店鋪的爆款產品，增加店鋪的銷售額。（如圖16

所示）

3.5.2設計效果

19

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

圖16購物車效果圖

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

3.6.1設計思路

訂單結算頁面設計我采用了列表式的方法，使界面簡潔明了。訂單頁面從

上到下分別是地址、支付方式和結算。在地址中可顯示四個地址，其中第一位

為默認地址，同時也可選其他地址進行結算。支付方式有在線支付、朋友代付、

貨到付款，這種方式提高了與消費者的互動性，同時也可為消費者提供不同的

消費方式。結算可以幫助消費者最后確認需要購買的產品、數量、價格以及取

得的優惠，點擊提交訂單完成此次購買，完成交易。下面有店鋪推薦，可以增

加產品銷量。（如圖17所示）

20

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

3.6.2設計效果

圖17訂單結算頁效果圖

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

3.7.1設計思路

個人中心頁面背景主要以綠色為主，白色為輔，使畫面整潔。個人中

心分為四個部分：側邊導航欄、會員卡片、會員可享、會員推薦。側邊導

21

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

航欄里有關于會員的詞條，點擊可跳轉頁面，增加了頁面的互動性。會員

卡片上有消費者的編號、電話、地址，除此之外消費者可以在看到在本網

店消費的訂單、收藏的產品、產品積分、余額以及自己設置的昵稱。會員

可享除任務和簽到外可以隨著網店