三個魔法匠品牌網(wǎng)店視覺方案設計

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

目錄

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2.1設計思路..............................................13

3.2.2設計效果..............................................13

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

3.3.1產(chǎn)品名稱設計思路......................................14

3.3.2產(chǎn)品名稱設計效果......................................14

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

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

3.4.2設計效果..............................................19

I

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

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

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

3.5.2設計效果..............................................20

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

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

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

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

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

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

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

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

II

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

三個魔發(fā)匠品牌網(wǎng)店視覺方案設計

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

1.1項目背景

隨著電商行業(yè)的高速發(fā)展，洗護類產(chǎn)品的競爭越來越激烈，像清揚、潘婷、

飄柔這些品牌都建立了自己的獨立網(wǎng)店，因此通過線上網(wǎng)店獲得了更多的市場

份額。為了增強自己的產(chǎn)品競爭力，讓更多的人認識三個魔發(fā)匠這個品牌，并

了解三個魔發(fā)匠的產(chǎn)品，在保障有良好的清潔效果的同時，還擁有高效、安全、

環(huán)保的特點。三個魔發(fā)匠需要建立能夠自由購買旗下產(chǎn)品的三個魔發(fā)匠獨立品

牌網(wǎng)店，進行品牌、產(chǎn)品的推廣，爭取獲取更多的市場份額。

1.2項目需求分析

現(xiàn)在洗護用品市場的競爭，非常激烈，產(chǎn)品種類越來越豐富，消費者對于

要購買的產(chǎn)品的要求也會越來越高。在此同時三個魔發(fā)匠是更加高端的產(chǎn)品品

牌，三個魔發(fā)匠現(xiàn)有的品牌網(wǎng)店，已經(jīng)不符合當下的審美潮流，整體視覺呈現(xiàn)

排版雜亂，色彩灰暗，不能吸引關(guān)注并展現(xiàn)品牌特點，而且內(nèi)容也比較少，不

能讓消費者產(chǎn)生購買欲望，而競爭對手都越來越重視品牌網(wǎng)店的視覺設計與規(guī)

劃，品牌網(wǎng)店設計各具特色?；谀壳暗氖袌龈偁幁h(huán)境，需要對現(xiàn)有網(wǎng)店進行

重新設計改造，解決版面規(guī)劃混亂，色彩暗淡的問題，提高網(wǎng)店的展現(xiàn)量。首

先需要展現(xiàn)企業(yè)內(nèi)涵和企業(yè)理念，三個魔發(fā)匠一直致力于為消費者提供高質(zhì)量、

環(huán)保、安全的洗護用品，也一直秉承著做最好的護膚品牌的理念。根據(jù)這一理

念，整體色彩設計采用代表環(huán)保的綠色為主要的色調(diào)，更能體現(xiàn)產(chǎn)品特點和企

業(yè)理念。同時，還要用美觀的排版布局，奪人眼球的色彩以及互動設計來更好

的吸引消費者。注重設計呈現(xiàn)上凸顯產(chǎn)品的細節(jié)信息以及原材料使用，總體就

能展現(xiàn)出非常良好的視覺效果，目的就是為了能夠更好的體現(xiàn)產(chǎn)品，來提高銷

量。

1.3色彩設計

一個良好的色彩設計是必須要巧妙地體現(xiàn)企業(yè)內(nèi)涵和產(chǎn)品特點的，三個魔

發(fā)匠一直將“高效、安全、環(huán)保”作為賣點，想要和這三種特點進行結(jié)合，綠

1

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

色就是最貼切的顏色。因為綠色代表著自然和環(huán)境，所以我們的產(chǎn)品也就呈現(xiàn)

出天然、有機的形象，因此可以讓消費者更加青睞和信任這個品牌，同時綠色

也代表著健康，可以增強消費者對產(chǎn)品的好感度。綠色的設計在展現(xiàn)了品牌特

點的同時也進一步提高了品牌形象的美譽程度，這樣的設計對于消費者來說也

就更加具有吸引力。（如圖1所示）

圖1標準色

1.4字體規(guī)范

規(guī)范、美觀的文字是關(guān)系到品牌運營的好壞，一定程度上也決定著消費者

對品牌的印象，所以規(guī)范用字十分重要。我選擇的字體是黑體，主要是為了突

出洗護類用品的嚴謹性，沒有那么多花里胡哨。營造出整潔、嚴謹?shù)钠放骗h(huán)境。

讓消費者更加了解到我們的安全、環(huán)保特性。（如圖2所示）

圖2準標字體

2

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

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

2.1首頁

首頁設計，首先頂部設計了店招與導航，這么設計可以讓消費者第一時間

了解到我們是什么品牌，并且也能快速地使用首頁上的功能按鈕；隨后是一張

banner圖，banner圖的主要作，展現(xiàn)精美的產(chǎn)品的同時也能給首頁頁面增加很

多美感；中部的產(chǎn)品分類可以讓已經(jīng)產(chǎn)生興趣的消費者了解到我們產(chǎn)品的多樣

性，滿足消費者不同方面的需求；隨后還有產(chǎn)品展示模塊，在這里我挑選了賣

的最好的爆品來進行展示，可以說是該品牌的招牌產(chǎn)品，一下就能抓住消費者

的眼球，吸引消費者購買；更下面的模塊是新品上市模塊，這么做也可以展示

品牌的新品，也讓消費者了解到產(chǎn)品最近在往哪個好的方向改變與發(fā)展；隨后

是爆品推薦，看到這里的消費者一般都對品牌產(chǎn)生了比較大的興趣，此時放出

爆品推薦，可以說是打動消費者的最后一步，一般都會吸引到下單，提示銷量；

底部則是我們的品牌故事與售后服務，以及幫助中心，有需要的消費者也可以

進行了解，可以讓消費者對我們的品牌產(chǎn)生更好的粘合感與信任感。（如圖3

所示）

3

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

圖3首頁原型圖

4

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

2.2搜索結(jié)果頁

我設計的搜索框，是比較顯眼容易找到的，因為把他放在了頁面的頂部，

而且在搜索框內(nèi)放入了透明色的提示語句，可以引導用戶輸入他自己的搜索信

息，同時也做到了自動補全和模糊查詢等百度搜索上有的功能，向大品牌學習，

不會出錯，能夠提高搜索的效率，使顧客越來越喜歡用這個搜索模塊。

同時也把搜索框的設計和其他模塊運用到了色彩的反差以突出搜索框模塊，

可以使得用戶第一時間能注意到搜索框模塊，讓搜索的過程變得直觀、高效、

簡單，與此同時也保證了頁面的操作性和美觀程度，讓用戶能夠輕松愉悅地瀏

覽和購買產(chǎn)品。

搜索完成之后的結(jié)果也相對來說簡潔明了，做到了每一件商品，都有圖片、

名稱、價格的基本信息，讓消費者可以直觀地了解商品的情況，增加購買欲望，

也幫助用戶更好的選擇商品。（如圖4所示）

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

2.3商品詳情頁

我的詳情頁制作，首先將最受歡迎的爆品直觀了當?shù)爻尸F(xiàn)在消費者眼前，

一瞬間就抓住了消費者的眼球，黃色的產(chǎn)品和綠色的背景形成了巧妙的融合，

5

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

使得產(chǎn)品看起來更加具備品牌理念和品牌優(yōu)勢，同時也展示了產(chǎn)品的基本特點

和基本信息，然后則著重的制作了，消費者購買產(chǎn)品的痛點，結(jié)合產(chǎn)品的賣點。

一下就能激發(fā)潛在消費者人群和普通消費者的購買欲望；下面則花了好幾個頁

面來講述該產(chǎn)品特點的細節(jié)方面，該產(chǎn)品是因為哪些方面做得好，有什么地方

有別的產(chǎn)品沒有的配方，講述這樣做有什么好處，有什么益處，使得以及產(chǎn)生

購買欲望的顧客，更加堅定了購買的欲望，往往看到這里的時候就會直接下單；

然后介紹了產(chǎn)品的價格，以及售后保障和品質(zhì)保證，能夠讓下單后的消費者更

加放心，沒下單的顧客也能更加相信我們的產(chǎn)品，提高銷售轉(zhuǎn)化率。（如圖5

所示）

圖5商品詳情頁原型圖

6

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

2.4登錄注冊頁

我的登錄注冊頁制作，，左側(cè)放上爆品以吸引眼球，同時將登錄框放在爆

品的右方，使得排列布局美觀自然，也讓用戶能夠輕松找到，清晰明了的輸入

框和按鈕也讓界面整潔美觀，消費者操作更加舒適。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

我的購物車設計，上面可以清晰的顯示所有已選商品的名稱、價格、數(shù)量、

小計等信息，還可以提供刪除、修改數(shù)量、全選等操作。在底部還可以清晰地

看到選擇了幾樣產(chǎn)品，總價格多少，還可以顯示優(yōu)惠后的價格，與優(yōu)惠前的價

格有了對比，可以更加激起消費者的購買欲望，底部的最右側(cè)還設置有結(jié)算按

鈕，讓用戶更方便找到，更易于點擊。（如圖7所示）

7

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

圖7購物車原型圖

2.6訂單結(jié)算頁

我設計的訂單結(jié)算頁面，清晰地展現(xiàn)了包括商品名稱，價格，小計，數(shù)量

等信息，同時也有收貨地址，配送方式，配送時間，售后服務等重要信息的顯

示。支付方式可以選擇在線支付和貨到付款的方式，在線支付又包括了如支付

寶，微信，銀聯(lián)等等，可以讓消費者選擇更加方便和更加適合自己的支付方式。

讓整個結(jié)算頁面更加的方便快捷一目了然，讓消費者也更方便使用。（如圖8

所示）

8

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

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

2.7個人中心

因為個人中心是與用戶直接進行賬戶管理和訂單查詢的重要頁面，所以我

設計的個人頁面要包括用戶的基本信息管理功能。其中就包括了訂單中心，訂

單中心能夠提供訂單查詢，能夠讓用戶能夠方便地查看歷史訂單、訂單狀態(tài)，

物流信息等等相關(guān)信息；還設置有我的錢包模塊，這個模塊能夠讓用戶方便地

查看領(lǐng)取以及使用自己的優(yōu)惠券、紅包以及禮品卡，這樣的設計可以加強注冊

用戶的粘合度，提升用戶的體驗。還有我的活動與客戶服務模塊，進行了全部

放在左側(cè)的設計，這樣的設計可以讓用戶一目了然我們的頁面具備什么樣的功

能，能夠讓用戶停留時間更長，花更多的時間來了解我們的產(chǎn)品以及活動。（如

圖9所示）

9

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

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

品牌節(jié)日banner首先在產(chǎn)品背景上，采用了白色的底色為主，加上一點陰

影和陽光的點綴，使得看起來不那么單調(diào)，顯得充滿活力。并且我們的創(chuàng)意設

計添加了幾片樹葉和向日葵，突出了綠色健康，與大自然融為一體的設計理念，

也與品牌的特點是相符合的。文字采用了易讀的字體設計，顏色多為綠色，少

為白色，綠色和白色相輔相成，在插圖和產(chǎn)品身上，運用ps進行了加高光的設

計，使得整張作品看起來光鮮亮麗，活力滿滿，同時也契合安全環(huán)保自然的產(chǎn)

品特點，更加符合主題。（如圖10所示）

10

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

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

爆品banner的設計，創(chuàng)意了類似于紅毯的場景，設計了燈光點綴，有一種

高端上檔次的感覺，運用紅色為主色調(diào)，把活動和產(chǎn)品的火爆特點結(jié)合起來，

給消費者強烈的視覺沖擊，排版方面也將文字放大，并且放在偏中心的位置，

突出活動的性質(zhì)，讓消費者一眼就能看到優(yōu)惠券，以及優(yōu)惠力度，吸引消費者

下單，提升轉(zhuǎn)化率。（如圖11所示）

圖11品牌爆品促銷banner

11

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

3.1.2設計效果

圖12首頁效果圖

12

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

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

3.2.1設計思路

搜索結(jié)果頁采用了白色背景的長方形圖框，文字也用了方正的黑色字體，

圖框的邊緣一致為黑色，同時做到了自動補全和模糊查詢等功能。這樣設計的

好處就是，不花哨，更易于操作和瀏覽，用戶在進行搜索的時候是不喜歡過于

花哨的搜索結(jié)果頁面的，要方便查看方便使用。（如圖13所示）

3.2.2設計效果

圖13效果圖

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

商品詳情頁是整個店鋪成交的關(guān)鍵頁面。所以在分析三個魔發(fā)匠品牌過程

中，我根據(jù)一種最能展現(xiàn)產(chǎn)品特性的產(chǎn)品進行詳情頁設計。產(chǎn)品詳情頁我分為

了7個部分，店招導航，產(chǎn)品主圖及購買信息，產(chǎn)品詳情內(nèi)容，產(chǎn)品價格，售

13

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

后保障以及品質(zhì)保障。這里背景選擇綠色，綠色是一種代表著自然和環(huán)保的顏

色，也是讓消費者能夠了解到產(chǎn)品健康的顏色。整體結(jié)構(gòu)設計都是比較統(tǒng)一，

除了產(chǎn)品主圖和購買信息與產(chǎn)品詳情內(nèi)容設計不同。以下是介紹這個產(chǎn)品詳情

內(nèi)容的設計思路。

3.3.1老姜育發(fā)大黃瓶設計思路

詳情頁的設計，首先將將最受歡迎的爆品直觀了當?shù)爻尸F(xiàn)在消費者眼前，

一瞬間就抓住了消費者的眼球，黃色的產(chǎn)品和綠色的背景形成了巧妙的融合，

使得產(chǎn)品看起來更加具備品牌理念和品牌優(yōu)勢，同時也展示了產(chǎn)品的基本特點

和基本信息，然后則著重的制作了，消費者購買產(chǎn)品的痛點，結(jié)合產(chǎn)品的賣點。

一下就能激發(fā)潛在消費者人群和普通消費者的購買欲望；下面則花了好幾個頁

面來講述該產(chǎn)品特點的細節(jié)方面，該產(chǎn)品是因為哪些方面做得好，有什么地方

有別的產(chǎn)品沒有的配方，講述這樣做有什么好處，有什么益處，使得以及產(chǎn)生

購買欲望的顧客，更加堅定了購買的欲望，往往看到這里的時候就會直接下單；

然后介紹了產(chǎn)品的價格，以及售后保障和品質(zhì)保證，能夠讓下單后的消費者更

加放心，沒下單的顧客也能更加相信我們的產(chǎn)品，提高銷售轉(zhuǎn)化率。（如圖14

所示）

3.3.2老姜育發(fā)大黃瓶詳情頁設計效果

14

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

15

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

16

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

17

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

圖14老姜育發(fā)大黃瓶詳情頁效果圖

18

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

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

3.4.1設計思路

上方采用了綠色為主色調(diào)的設計，凸顯了產(chǎn)品特點，中間放上了白色為主

的背景，插上花朵樹葉的圖畫，同時嵌上爆品和登錄注冊頁，使得整體觀感非

常美觀，非常吸引消費者的眼球，排列布局也簡潔明了，不同場景下都能呈現(xiàn)

出良好的視覺效果。這樣的設計可以提升用戶的粘合度，提升用戶的使用體驗。

（如圖15所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

頂部采用了綠色的顏色設計，綠色代表了自然和環(huán)保，與品牌產(chǎn)品的特性

相符合，中間部分則采用了黃色背景為主色調(diào)，白色為副色調(diào)，代表了購物車

19

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

中的商品被選中之后，由白色變?yōu)榱它S色，這樣做可以提升消費者的互動感，

是一個良好的界面要具備的互動特點，下方部分則是一欄結(jié)算頁面，一般信息

用黑字表示，重要信息用紅字表示，同時結(jié)算按鈕用紅色圖標鑲嵌上白色文字，

是最重要的信息。這樣設計的好處，能夠一環(huán)扣一環(huán)，吸引消費者一步步下單，

提升轉(zhuǎn)化率。（如圖16所示）

3.5.2設計效果

圖16購物車效果圖

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

3.6.1設計思路

頂部導航采用了綠色的顏色設計，突出了品牌主題，中間部分采用白色背

景，黑色字體，流程圖的設計，采用了顏色深度的一步步遞增，代表所在的過

20

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

程，下面的結(jié)算頁面，用藍色代表互動，已經(jīng)被選中了，這樣設計，可以讓整

個界面看起來簡潔明了，重要信息一覽無余，因此可以提升用戶的使用體驗。

（如圖17所示）

3.6.2設計效果

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

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

3.7.1設計思路

上方的導航使用了綠色為主色調(diào)，突出品牌產(chǎn)品主打的特點。左側(cè)的欄目

把大部分的功能聚集在一起，用戶需要的功能這里都有，采用白底黑字的設計，

中間放了一個大logo來增加美感，右邊的模塊用白底黑字的設計，偶爾加上圖

21

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

片，這樣設計的好處，可以讓整個頁面看起來簡潔明了，提升用戶的使用體驗。

（如圖18所示）

3.7.2設計效果

圖18