三個(gè)魔法匠品牌網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

目錄

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

1.1項(xiàng)目背景...................................................1

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

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

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

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

2.1首頁(yè).......................................................3

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

2.3商品詳情頁(yè).................................................5

2.4登錄注冊(cè)頁(yè).................................................7

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

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

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

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

3.1首頁(yè)視覺(jué)設(shè)計(jì)與制作........................................10

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

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

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

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

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

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

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

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

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

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

II

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

三個(gè)魔發(fā)匠品牌網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

1.1項(xiàng)目背景

隨著電商行業(yè)的高速發(fā)展，洗護(hù)類產(chǎn)品的競(jìng)爭(zhēng)越來(lái)越激烈，像清揚(yáng)、潘婷、

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

份額。為了增強(qiáng)自己的產(chǎn)品競(jìng)爭(zhēng)力，讓更多的人認(rèn)識(shí)三個(gè)魔發(fā)匠這個(gè)品牌，并

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

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

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

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

現(xiàn)在洗護(hù)用品市場(chǎng)的競(jìng)爭(zhēng)，非常激烈，產(chǎn)品種類越來(lái)越豐富，消費(fèi)者對(duì)于

要購(gòu)買的產(chǎn)品的要求也會(huì)越來(lái)越高。在此同時(shí)三個(gè)魔發(fā)匠是更加高端的產(chǎn)品品

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

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

能讓消費(fèi)者產(chǎn)生購(gòu)買欲望，而競(jìng)爭(zhēng)對(duì)手都越來(lái)越重視品牌網(wǎng)店的視覺(jué)設(shè)計(jì)與規(guī)

劃，品牌網(wǎng)店設(shè)計(jì)各具特色。基于目前的市場(chǎng)競(jìng)爭(zhēng)環(huán)境，需要對(duì)現(xiàn)有網(wǎng)店進(jìn)行

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

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

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

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

業(yè)理念。同時(shí)，還要用美觀的排版布局，奪人眼球的色彩以及互動(dòng)設(shè)計(jì)來(lái)更好

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

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

量。

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

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

發(fā)匠一直將“高效、安全、環(huán)?！弊鳛橘u點(diǎn)，想要和這三種特點(diǎn)進(jìn)行結(jié)合，綠

1

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

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

出天然、有機(jī)的形象，因此可以讓消費(fèi)者更加青睞和信任這個(gè)品牌，同時(shí)綠色

也代表著健康，可以增強(qiáng)消費(fèi)者對(duì)產(chǎn)品的好感度。綠色的設(shè)計(jì)在展現(xiàn)了品牌特

點(diǎn)的同時(shí)也進(jìn)一步提高了品牌形象的美譽(yù)程度，這樣的設(shè)計(jì)對(duì)于消費(fèi)者來(lái)說(shuō)也

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

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

1.4字體規(guī)范

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

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

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

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

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

2

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

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

2.1首頁(yè)

首頁(yè)設(shè)計(jì)，首先頂部設(shè)計(jì)了店招與導(dǎo)航，這么設(shè)計(jì)可以讓消費(fèi)者第一時(shí)間

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

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

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

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

的最好的爆品來(lái)進(jìn)行展示，可以說(shuō)是該品牌的招牌產(chǎn)品，一下就能抓住消費(fèi)者

的眼球，吸引消費(fèi)者購(gòu)買；更下面的模塊是新品上市模塊，這么做也可以展示

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

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

爆品推薦，可以說(shuō)是打動(dòng)消費(fèi)者的最后一步，一般都會(huì)吸引到下單，提示銷量；

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

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

所示）

3

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

圖3首頁(yè)原型圖

4

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

2.2搜索結(jié)果頁(yè)

我設(shè)計(jì)的搜索框，是比較顯眼容易找到的，因?yàn)榘阉旁诹隧?yè)面的頂部，

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

息，同時(shí)也做到了自動(dòng)補(bǔ)全和模糊查詢等百度搜索上有的功能，向大品牌學(xué)習(xí)，

不會(huì)出錯(cuò)，能夠提高搜索的效率，使顧客越來(lái)越喜歡用這個(gè)搜索模塊。

同時(shí)也把搜索框的設(shè)計(jì)和其他模塊運(yùn)用到了色彩的反差以突出搜索框模塊，

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

簡(jiǎn)單，與此同時(shí)也保證了頁(yè)面的操作性和美觀程度，讓用戶能夠輕松愉悅地瀏

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

搜索完成之后的結(jié)果也相對(duì)來(lái)說(shuō)簡(jiǎn)潔明了，做到了每一件商品，都有圖片、

名稱、價(jià)格的基本信息，讓消費(fèi)者可以直觀地了解商品的情況，增加購(gòu)買欲望，

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

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

2.3商品詳情頁(yè)

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

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

5

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

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

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

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

面來(lái)講述該產(chǎn)品特點(diǎn)的細(xì)節(jié)方面，該產(chǎn)品是因?yàn)槟男┓矫孀龅煤?，有什么地?/p>

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

購(gòu)買欲望的顧客，更加堅(jiān)定了購(gòu)買的欲望，往往看到這里的時(shí)候就會(huì)直接下單；

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

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

所示）

圖5商品詳情頁(yè)原型圖

6

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

2.4登錄注冊(cè)頁(yè)

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

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

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

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

2.5購(gòu)物車

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

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

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

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

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

7

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

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

2.6訂單結(jié)算頁(yè)

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

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

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

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

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

所示）

8

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

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

2.7個(gè)人中心

因?yàn)閭€(gè)人中心是與用戶直接進(jìn)行賬戶管理和訂單查詢的重要頁(yè)面，所以我

設(shè)計(jì)的個(gè)人頁(yè)面要包括用戶的基本信息管理功能。其中就包括了訂單中心，訂

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

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

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

用戶的粘合度，提升用戶的體驗(yàn)。還有我的活動(dòng)與客戶服務(wù)模塊，進(jìn)行了全部

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

能，能夠讓用戶停留時(shí)間更長(zhǎng)，花更多的時(shí)間來(lái)了解我們的產(chǎn)品以及活動(dòng)。（如

圖9所示）

9

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

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

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

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

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

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

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

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

也與品牌的特點(diǎn)是相符合的。文字采用了易讀的字體設(shè)計(jì)，顏色多為綠色，少

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

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

品特點(diǎn)，更加符合主題。（如圖10所示）

10

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

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

爆品banner的設(shè)計(jì)，創(chuàng)意了類似于紅毯的場(chǎng)景，設(shè)計(jì)了燈光點(diǎn)綴，有一種

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

給消費(fèi)者強(qiáng)烈的視覺(jué)沖擊，排版方面也將文字放大，并且放在偏中心的位置，

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

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

圖11品牌爆品促銷banner

11

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

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

圖12首頁(yè)效果圖

12

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

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

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

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

圖框的邊緣一致為黑色，同時(shí)做到了自動(dòng)補(bǔ)全和模糊查詢等功能。這樣設(shè)計(jì)的

好處就是，不花哨，更易于操作和瀏覽，用戶在進(jìn)行搜索的時(shí)候是不喜歡過(guò)于

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

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

圖13效果圖

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

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

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

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

13

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

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

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

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

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

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

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

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

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

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

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

面來(lái)講述該產(chǎn)品特點(diǎn)的細(xì)節(jié)方面，該產(chǎn)品是因?yàn)槟男┓矫孀龅煤茫惺裁吹胤?/p>

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

購(gòu)買欲望的顧客，更加堅(jiān)定了購(gòu)買的欲望，往往看到這里的時(shí)候就會(huì)直接下單；

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

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

所示）

3.3.2老姜育發(fā)大黃瓶詳情頁(yè)設(shè)計(jì)效果

14

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

15

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

16

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

17

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

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

18

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

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

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

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

的背景，插上花朵樹(shù)葉的圖畫(huà)，同時(shí)嵌上爆品和登錄注冊(cè)頁(yè)，使得整體觀感非

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

出良好的視覺(jué)效果。這樣的設(shè)計(jì)可以提升用戶的粘合度，提升用戶的使用體驗(yàn)。

（如圖15所示）

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

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

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

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

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

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

19

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

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

是一個(gè)良好的界面要具備的互動(dòng)特點(diǎn)，下方部分則是一欄結(jié)算頁(yè)面，一般信息

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

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

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

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

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

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

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

頂部導(dǎo)航采用了綠色的顏色設(shè)計(jì)，突出了品牌主題，中間部分采用白色背

景，黑色字體，流程圖的設(shè)計(jì)，采用了顏色深度的一步步遞增，代表所在的過(guò)

20

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

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

個(gè)界面看起來(lái)簡(jiǎn)潔明了，重要信息一覽無(wú)余，因此可以提升用戶的使用體驗(yàn)。

（如圖17所示）

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

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

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

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

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

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

中間放了一個(gè)大logo來(lái)增加美感，右邊的模塊用白底黑字的設(shè)計(jì)，偶爾加上圖

21

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

片，這樣設(shè)計(jì)的好處，可以讓整個(gè)頁(yè)面看起來(lái)簡(jiǎn)潔明了，提升用戶的使用體驗(yàn)。

（如圖18所示）

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

圖18