湖南商務(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ì)...........................................................................................................2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3.1商品詳情頁(yè)設(shè)計(jì)思路.........................................................................17

3.3.2商品詳情頁(yè)設(shè)計(jì)效果.........................................................................17

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

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

II

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

蜂花品牌網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

1.1項(xiàng)目背景

隨著網(wǎng)絡(luò)技術(shù)、電商和社會(huì)經(jīng)濟(jì)的發(fā)展，電子商務(wù)購(gòu)物方式逐漸被傳播到

千家萬(wàn)戶，人們對(duì)電子商務(wù)購(gòu)物的需求也越來(lái)越大。正因?yàn)檫@種生活方式，使

得越來(lái)越多人選擇在電子平臺(tái)購(gòu)物。因此電子商務(wù)購(gòu)物平臺(tái)也需要一個(gè)美觀的

設(shè)計(jì)，這樣才能更加吸引到消費(fèi)者，從而增加消費(fèi)者對(duì)該品牌產(chǎn)品的購(gòu)買欲望，

并且也能夠很大地提升品牌的知名度，更加促進(jìn)我們網(wǎng)店的經(jīng)營(yíng)。

網(wǎng)店的視覺(jué)設(shè)計(jì)十分重要。向大家熟知的“三只松鼠”、“拉芳家化”、

“蒙?！钡鹊冗@些品牌都有自己的獨(dú)立網(wǎng)店，消費(fèi)者都可以通過(guò)他們的獨(dú)立形

象網(wǎng)店了解品牌產(chǎn)品、品牌歷史等信息，更加方便消費(fèi)者購(gòu)買、查詢。

洗發(fā)水是生活用品中一大品類，是人們生活中不可或缺的一類。洗發(fā)水市

場(chǎng)眾多不同的品牌競(jìng)爭(zhēng)激烈，其中蜂花品牌是大家公認(rèn)的老牌國(guó)貨，因其實(shí)在

的價(jià)格、不錯(cuò)的功效而得到青睞，蜂花多年來(lái)穩(wěn)固地占有三分之一的全國(guó)市場(chǎng)，

蜂花始終堅(jiān)持面向大眾消費(fèi)群體。蜂花品牌的官網(wǎng)是一個(gè)有購(gòu)買能力的獨(dú)立網(wǎng)

店。

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

一個(gè)項(xiàng)目的確立是建立在各種各樣的需求上面的。蜂花官網(wǎng)是已經(jīng)擁有自

己的品牌網(wǎng)店的，但實(shí)際上官網(wǎng)網(wǎng)店的訪問(wèn)數(shù)，瀏覽量其實(shí)并不大。蜂花品牌

官網(wǎng)有許多地方便利性沒(méi)有很好的體現(xiàn)出來(lái)，還有頁(yè)面的一些排版布局不是很

合理，消費(fèi)者會(huì)有不好的瀏覽體驗(yàn)。

根據(jù)一些調(diào)查數(shù)據(jù)和生活中看到的現(xiàn)象，會(huì)發(fā)現(xiàn)大多數(shù)人對(duì)蜂花的評(píng)價(jià)大

都是“好用”、“便宜”。針對(duì)這一現(xiàn)象，我覺(jué)得應(yīng)該把蜂花品牌官網(wǎng)設(shè)計(jì)得

簡(jiǎn)約高級(jí)，要調(diào)整網(wǎng)店的風(fēng)格，要充分體現(xiàn)出蜂花產(chǎn)品的高性價(jià)比。蜂花這一

老國(guó)貨品牌始終堅(jiān)持面向大眾消費(fèi)群體，主要生產(chǎn)中低端產(chǎn)品，所以網(wǎng)站的設(shè)

計(jì)無(wú)論從色彩搭配、排版布局還是圖片文字的設(shè)計(jì)都需要滿足大眾的審美，要

緊跟互聯(lián)網(wǎng)的發(fā)展。

我想把網(wǎng)店頁(yè)面的主色定位綠色，每個(gè)頁(yè)面又要有特色能夠吸引消費(fèi)者。

1

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

在商品詳情頁(yè)中一定要多設(shè)計(jì)商品的詳細(xì)信息；因?yàn)榉浠ㄆ放浦凶钍軞g迎的產(chǎn)

品是一款經(jīng)典的黃色瓶裝的護(hù)發(fā)素，所以想在商品詳情頁(yè)中增加一些與這個(gè)經(jīng)

典產(chǎn)品有關(guān)的設(shè)計(jì)，有黃色加入可能會(huì)顯得頁(yè)面不那么單調(diào)。個(gè)人中心頁(yè)面也

要有特點(diǎn)，要有一些與蜂花品牌、logo相呼應(yīng)的設(shè)計(jì)。

完成蜂花品牌的網(wǎng)店設(shè)計(jì)是為了提高品牌的知名度、識(shí)別度，給消費(fèi)者提

供品牌信息、品質(zhì)保障；吸引更多消費(fèi)者來(lái)瀏覽網(wǎng)店；產(chǎn)品的圖片、名稱、排

版設(shè)計(jì)是為了更加有效地傳達(dá)企業(yè)的產(chǎn)品優(yōu)勢(shì)，進(jìn)而提高網(wǎng)店的營(yíng)銷，讓更多

消費(fèi)者在網(wǎng)店中購(gòu)買到自己心儀的商品。

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

設(shè)計(jì)以綠色為主，蜂花產(chǎn)商品都是用原生態(tài)的材料做成的，用綠色體現(xiàn)以

人為本設(shè)計(jì)原則以及生態(tài)美學(xué)原則。并且綠色是最容易被看見(jiàn)的顏色，它既不

是冷色，也不是暖色，是一種居于兩者之間的顏色。代表著清新、平靜、舒適

的感覺(jué)。把綠色作為網(wǎng)站設(shè)計(jì)的主要顏色，可以給消費(fèi)者帶來(lái)很好的視覺(jué)效果

和瀏覽體驗(yàn)。

為了使頁(yè)面的色彩看起來(lái)不單調(diào)更有設(shè)計(jì)感，我用了幾種不同的綠色作為

輔助色，深淺各異的綠色組合,清新自然和諧,仿佛置身在春天的大自然里，正

好與網(wǎng)站設(shè)計(jì)的主題相符。但我也根據(jù)每個(gè)頁(yè)面的不同的設(shè)計(jì)做了紅色的為點(diǎn)

綴色，紅色主要運(yùn)用在商品的價(jià)格、“立即購(gòu)買”等一些需要消費(fèi)者注意得地

方，醒目突出;黃色主要是在商品詳情頁(yè)中作為輔助色使用，黃色更加貼合商品

的本身的顏色設(shè)計(jì)。棕色使在詳情頁(yè)中主要字體的顏色設(shè)計(jì)，是與黃色做一個(gè)

結(jié)合。（如圖1所示）

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

2

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

1.4字體規(guī)范

選用黑體字體和等線字體因?yàn)樗淖煮w簡(jiǎn)潔，都有幾乎相等的線條但非常

地突出，所以在頁(yè)面設(shè)計(jì)過(guò)程中多次使用了黑體和等線字體，這類型的字體可

以基本滿足排版設(shè)計(jì)的需要。

選用方正綜藝簡(jiǎn)體是因?yàn)檫@種字體字形結(jié)構(gòu)簡(jiǎn)單而且整體姿態(tài)是大氣的，

多用在了首頁(yè)的產(chǎn)品名稱上。（該字體僅做畢業(yè)設(shè)計(jì)使用，不用做商用）

RobotoCondensed是一款個(gè)性獨(dú)特的英文字體,簡(jiǎn)潔、秀麗大方、優(yōu)美流暢

適用于一些設(shè)計(jì)類的運(yùn)用。（如圖2所示）

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

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

2.1首頁(yè)

首頁(yè)主要由店招、導(dǎo)航欄、banner、明星產(chǎn)品、新品推薦、關(guān)于我們和頁(yè)

尾這六個(gè)模塊組成。店招中通過(guò)店鋪的店鋪名、店鋪logo、廣告語(yǔ)和宣傳標(biāo)語(yǔ)

等突出我們店鋪的實(shí)力，手機(jī)端、客服、購(gòu)物車的圖標(biāo)和搜索框是為了給訪問(wèn)

者提供更加方便的瀏覽模式。導(dǎo)航欄中選取“蜂花首頁(yè)”、“關(guān)于蜂花”、“產(chǎn)

品展示”、“新品推薦”、“蜂花小課堂”、“聯(lián)系我們”、“個(gè)人中心”、

“加入蜂花”這幾個(gè)作為導(dǎo)航內(nèi)容，為訪問(wèn)者提供網(wǎng)站內(nèi)重要頁(yè)面的快速導(dǎo)航，

3

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

可以方便更加高效地瀏覽蜂花品牌官網(wǎng)。

banner就是放了一張產(chǎn)品banner圖，向訪問(wèn)者展示品牌的優(yōu)秀產(chǎn)品。

“明星單品”和“新品推薦”都是展示了三款產(chǎn)品，但兩個(gè)部分的排版方

式不一樣，這樣可以適當(dāng)?shù)販p少訪問(wèn)者的視覺(jué)疲勞?！懊餍菃纹贰笔欠謾谑脚?/p>

版布局，三個(gè)產(chǎn)品一上一下的錯(cuò)落排版；“新品推薦”是以列排版的布局，三

個(gè)產(chǎn)品一列，產(chǎn)品圖片和產(chǎn)品名稱信息的等一左一右的排版，這樣既能很好的

展現(xiàn)出產(chǎn)品圖片，又能更多的展示出產(chǎn)品的功能。

“關(guān)于我們”這一部分采用左圖右文的排版布局，左邊一張公司圖片，下

方放了四張公司的榮譽(yù)證書(shū)，右邊文字就是公司的名稱和簡(jiǎn)單的介紹，還有“了

解更多”的功能按鈕，公司簡(jiǎn)介的文字下方加上了公司的四個(gè)特點(diǎn)，以文字和

圖標(biāo)的形式展現(xiàn)。

頁(yè)尾最左邊是品牌的LOGO，在右邊將一些導(dǎo)航按鈕、“掃一掃”的二維碼、

電話、地址等分三列排版，這樣清晰明了。（如圖3所示）

4

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

圖3首頁(yè)原型圖

5

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

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

搜索結(jié)果頁(yè)的店招、導(dǎo)航欄、和頁(yè)尾部分都是與首頁(yè)一樣的，統(tǒng)一的。在

導(dǎo)航欄的下方有一個(gè)搜索框，主要是為了方便訪問(wèn)時(shí)的查找。在搜索框的后面

有“共搜索到幾條結(jié)果”，把結(jié)果顯示出來(lái)可以清楚地知道有多少符合消費(fèi)者

要搜索的產(chǎn)品。在搜索框的下方，也為消費(fèi)者提供了一些人氣搜索關(guān)鍵詞，把

這個(gè)關(guān)鍵詞放這里，可以帶動(dòng)一些產(chǎn)品的銷售。接著就是一個(gè)表格，包括“所

有分類”、“規(guī)格類型”、“功效分類”、“顏色分類”為消費(fèi)者提供了品牌

產(chǎn)品的一些特點(diǎn)和規(guī)格、功能，還有一個(gè)綜合、銷量、新品、價(jià)格的排序，消

費(fèi)者可以根據(jù)自己想的選擇自己更喜歡的產(chǎn)品。最重要的部分就是產(chǎn)品的展示

部分，在這里我做了兩行三列，每一頁(yè)主要展示六個(gè)產(chǎn)品，當(dāng)消費(fèi)者把鼠標(biāo)移

到產(chǎn)品上時(shí)，會(huì)出現(xiàn)立即購(gòu)買和加入購(gòu)物車的兩個(gè)按鈕，這樣可以方便消費(fèi)者

下單。（如圖4所示）

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

2.3商品詳情頁(yè)

商品詳情頁(yè)的店招導(dǎo)航欄和頁(yè)尾部分都是首頁(yè)一樣，統(tǒng)一的。在導(dǎo)航欄下

面設(shè)置了一個(gè)面包屑導(dǎo)航，可以讓消費(fèi)者了解目前所處的位置以及知道如何返

6

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

回。在面包屑導(dǎo)航的下面的左邊放了產(chǎn)品的主圖，中間就是產(chǎn)品的名稱和銷量、

價(jià)格、所屬分類、購(gòu)買的數(shù)量，商品規(guī)格，“加入購(gòu)物車”和“立即購(gòu)買”和

“收藏”的按按鈕，右側(cè)是根據(jù)這一產(chǎn)品的特別推薦。再下面就是產(chǎn)品的詳情

圖，產(chǎn)品詳情圖的左邊放了一個(gè)產(chǎn)品分類的側(cè)導(dǎo)航，有該品牌的全部的產(chǎn)品系

列，方便消費(fèi)者的了解和其他選擇。產(chǎn)品詳情圖的上方還有四個(gè)功能按鈕，除

了“產(chǎn)品詳情”之外，還有“買家評(píng)價(jià)”、“問(wèn)大家”和“發(fā)現(xiàn)”。（如圖5

所示）

7

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

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

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

登錄注冊(cè)頁(yè)的店招、導(dǎo)航欄和頁(yè)尾部分都是和首頁(yè)一樣，統(tǒng)一的。在這一

頁(yè)面主要就是方便用戶的賬號(hào)登錄和賬號(hào)注冊(cè)，頁(yè)面主要是左右兩欄的排版布

局。在布局范圍的左上角放了一個(gè)產(chǎn)品的logo，然后左邊就是帶有品牌名字的

產(chǎn)品圖，右邊就是登錄的信息填寫(xiě)框，我把登錄設(shè)為短信驗(yàn)證登錄和會(huì)員賬號(hào)

8

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

登錄，若沒(méi)有賬號(hào)，可以在登錄按鈕下方點(diǎn)擊注冊(cè)。兩種登錄方式給消費(fèi)者帶

來(lái)了更方便的體驗(yàn)。（如圖6所示）

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

2.5購(gòu)物車

購(gòu)物車頁(yè)面的店招導(dǎo)航欄和頁(yè)尾部分都是和首頁(yè)一樣，統(tǒng)一的。在頁(yè)面的

導(dǎo)航欄下面，設(shè)置了一個(gè)顯示消費(fèi)者個(gè)人購(gòu)物車中商品數(shù)量的區(qū)域，接下來(lái)有

一個(gè)降價(jià)和加購(gòu)的按鈕，這樣可以讓消費(fèi)者更加清晰的了解到這些價(jià)格的變動(dòng)

和自己多次購(gòu)買的商品。在這兩個(gè)按鈕的下面就是購(gòu)物車中商品圖片，商品名

稱、價(jià)格、數(shù)量、總計(jì)、“刪除”和“加入收藏夾”的操作按鈕，以類似表格

的形式排列使頁(yè)面展現(xiàn)出來(lái)的效果更加清晰。在這些產(chǎn)品的最后下面，會(huì)有一

個(gè)“全選”的按鈕，另外會(huì)顯示已選擇的商品數(shù)量和總計(jì)，一個(gè)“去結(jié)算”的

按鈕，方便消費(fèi)去者支付。然后在下面會(huì)為消費(fèi)者提供一些產(chǎn)品，“猜你喜

歡”、“我的關(guān)注”和“最近瀏覽”，也是為了促進(jìn)消費(fèi)者的購(gòu)買，為消費(fèi)者

挑選出其他商品。（如圖7所示）

9

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

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

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

訂單結(jié)算頁(yè)的店招、導(dǎo)航欄和頁(yè)尾都部分都一樣，統(tǒng)一的。同樣在導(dǎo)航欄

的下方設(shè)置了訂單結(jié)算頁(yè)的圖標(biāo)和“訂單結(jié)算頁(yè)”字樣，下面就是消費(fèi)者的收

貨地址，并且還有“添加收貨地址”和“支付后邀請(qǐng)好友填寫(xiě)地址”兩個(gè)按鈕

可供消費(fèi)者選擇。接下來(lái)就有商品清單的列表，會(huì)展示商品圖片、商品名稱、

單價(jià)數(shù)量和總計(jì)，可以方便消費(fèi)者清楚的知道自己的要購(gòu)買的商品是哪些。還

有訂單備注、支付方式的選擇和號(hào)碼保護(hù)，還會(huì)有顯示“已選擇幾件商品”、

總計(jì)和送貨的地址和收件人信息。最后還會(huì)有“返回購(gòu)物車”和“提交訂單”

兩個(gè)按鈕。（如圖8所示）

10

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

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

2.7個(gè)人中心

個(gè)人中心頁(yè)的店招、導(dǎo)航欄和頁(yè)尾部分都一樣，統(tǒng)一的。在導(dǎo)航欄下方設(shè)

置了面包屑導(dǎo)航，也是為了方便消費(fèi)者知道自己所處的位置以及如何返回。在

頁(yè)面的左邊設(shè)置了側(cè)導(dǎo)航，可以方便消費(fèi)者在個(gè)人中心尋找一些有關(guān)的信息，

如賬戶信息、收藏、訂單、瀏覽歷史、卡包、售后服務(wù)、設(shè)置，可以在自己的

個(gè)人中心進(jìn)行設(shè)置的。個(gè)人中心頁(yè)面主要是展示“會(huì)員中心”部分，右邊設(shè)置

了一個(gè)電子會(huì)員卡，上面有用戶姓名、會(huì)員等級(jí)、會(huì)員碼、積分、零錢、訂閱

和有效期。下面一欄是會(huì)員特權(quán)，分七塊向會(huì)員用戶展示會(huì)員的專項(xiàng)特權(quán)；接

下來(lái)是一個(gè)小的Banner廣告，向用戶推薦可專享會(huì)員折扣的商品；下面是會(huì)員

商城，展示了六個(gè)會(huì)員用戶專有的商場(chǎng)特權(quán)，這樣可以吸引消費(fèi)者家人品牌會(huì)

員。最后顯示了一句口號(hào)“您的滿意是我們不變的追求”和“更多會(huì)員權(quán)益敬

請(qǐng)期待”這樣的設(shè)計(jì)雖然是簡(jiǎn)單的文字，但我覺(jué)得這樣子展示在頁(yè)面上會(huì)給消

費(fèi)者帶來(lái)一個(gè)好的的感受和體驗(yàn)。（如圖9所示）

11

湖南商務(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ì)思路

網(wǎng)店首頁(yè)是店鋪的招牌和形象，這個(gè)頁(yè)面地設(shè)計(jì)代表著整個(gè)店鋪的風(fēng)格和

定位，頁(yè)面整體的風(fēng)格就是簡(jiǎn)單高級(jí)、綠色原生態(tài)。以綠色為主，在背景的處

理上加上了一些葉子的暗紋，這樣不會(huì)破壞頁(yè)面整體的效果，也不會(huì)顯得頁(yè)面

過(guò)于單調(diào)。暗紋的處理是用PS軟件，先找到一個(gè)線條清晰葉子的素材，在ps

中打開(kāi)，運(yùn)用顏色選取工具，選出葉子，再按“ctrl+J”復(fù)制一層出來(lái)，對(duì)復(fù)

制出來(lái)的圖層進(jìn)行調(diào)整透明度、顏色等，達(dá)到最終效果。在首頁(yè)中我設(shè)計(jì)了店

招、導(dǎo)航欄、banner、兩個(gè)產(chǎn)品展示的區(qū)、公司介紹區(qū)。其中店招中設(shè)計(jì)了收

藏店鋪按鈕、可使用手機(jī)端查看官網(wǎng)的功能、客服、購(gòu)物車和登錄注冊(cè)的按鈕，

這樣可以給消費(fèi)者快速地提高這些基本服務(wù)。還有一個(gè)搜索框，可以方便有目

標(biāo)的消費(fèi)者快速在官網(wǎng)中找到自己想要查詢或者購(gòu)買的商品。導(dǎo)航欄處特意為

品牌設(shè)計(jì)了“關(guān)于蜂花”、“蜂花小課堂”和“加入蜂花”，是為了讓消費(fèi)者

12

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

更加深入的了解蜂花這個(gè)品牌，在導(dǎo)航欄處是引導(dǎo)消費(fèi)者去點(diǎn)擊。導(dǎo)航欄的下

方就是banner展示區(qū)，我設(shè)計(jì)了兩張banner，一張是產(chǎn)品banner一張是節(jié)日

活動(dòng)banner。在“明星單品”的產(chǎn)品展示部分產(chǎn)品都是用了統(tǒng)一的背景顏色，

在產(chǎn)品的圖片上還加上了產(chǎn)品所用的原材料的圖片，這樣能讓消費(fèi)者更加直觀

的感受到產(chǎn)品的所用原料，讓消費(fèi)者放心。在“新品推薦”中，用了相對(duì)于較

大的區(qū)域來(lái)展示每一個(gè)商品，每個(gè)商品的名稱都是采用方正綜藝簡(jiǎn)體，這樣能

在頁(yè)面中更加凸顯出來(lái)，還在每個(gè)產(chǎn)品的區(qū)域上寫(xiě)出了產(chǎn)品的原料、作用還有

功效。因?yàn)槭切缕?，所以?biāo)注的信息和資料比較的全面，可以更好的使消費(fèi)者

了解這一款新的產(chǎn)品。商品的價(jià)格都是紅色的文字，使之凸顯。在“關(guān)于我們”

這一板塊，我想的是要更好地宣傳這個(gè)品牌和公司，所以在這一塊放置了很多

公司的榮譽(yù)和公司的一些企業(yè)文化，這樣可以將公司的優(yōu)點(diǎn)都向消費(fèi)者展示出

來(lái)。最后還設(shè)置了一個(gè)返回頂部的按鈕，并對(duì)這個(gè)鈕進(jìn)行了裝飾。因?yàn)槭醉?yè)的

頁(yè)面較長(zhǎng)，設(shè)置一個(gè)返回頂部的按鈕，可以幫助消費(fèi)者較快到達(dá)頁(yè)面的頂部，

方便又快捷。

節(jié)日banner，我是以年貨節(jié)為主題制作的。以紅色為主體現(xiàn)出喜慶的氛圍，

排版采用左文右圖的方式，是產(chǎn)品和文字更加清晰的展現(xiàn)出來(lái)。Banana中的文

字部分有產(chǎn)品的宣傳文案、活動(dòng)的時(shí)間和活動(dòng)的內(nèi)容和立即搶購(gòu)的按鈕。宣傳

文案設(shè)計(jì)的是粗體淺色字體，這樣可以很好的與背景圖片區(qū)別開(kāi)來(lái)。在右邊的

產(chǎn)品圖部分選取了三款不同的品牌產(chǎn)品，在圖片處理方面，我給每一個(gè)產(chǎn)品的

圖片都做了倒影的效果，使整個(gè)banner看起來(lái)都有一個(gè)光影的效果。倒影效果

首先是復(fù)制一下產(chǎn)品的涂層，然后按住ctrl+t進(jìn)行自由變換，右擊選擇斜切，

拉到一個(gè)適合的影子樣式，在選擇圖層填充顏色，再對(duì)顏色進(jìn)行模糊、調(diào)整透

明度，最后達(dá)到一個(gè)合適的影子效果。（如圖10所示）

圖10節(jié)日banner

13

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

產(chǎn)品banner我是以蜂花的無(wú)硅油洗發(fā)水作為主要產(chǎn)品。Banana以淺綠色為

主，排版布局是左文右圖的方式，文字包含產(chǎn)品的功能、名稱、作用和點(diǎn)擊購(gòu)

買的按鈕。主要文字是產(chǎn)品的名稱，顏色是深綠色并且采用了白色的描邊，更

加突出文字。在文字設(shè)置方面，我采用了巧妙的筆畫(huà)替換方法，將無(wú)硅油中“油”

三點(diǎn)水旁的第三點(diǎn)用一滴油來(lái)替代，用象征圖形替換，一下就提升了較強(qiáng)的視

覺(jué)焦點(diǎn)。我先將文字柵格化，然后用橡皮擦工具把需要替換的筆畫(huà)擦去，再摳

出需要的素材，然后擺放在相應(yīng)的位置。右邊放置了一個(gè)展示臺(tái)，將三個(gè)無(wú)硅

油系列產(chǎn)洗發(fā)水產(chǎn)品擋在展示臺(tái)上，并將三個(gè)產(chǎn)品和原材料都擺放在了產(chǎn)品的

下面，還在上方設(shè)計(jì)了一只蝴蝶，這樣的設(shè)計(jì)突出產(chǎn)品的優(yōu)勢(shì)。（如圖11所示）

圖11產(chǎn)品banner

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

14

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

圖12首頁(yè)效果圖

15

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

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

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

搜索結(jié)果頁(yè)中，我設(shè)置了搜索框、關(guān)鍵詞、排名等。設(shè)置搜索框是為了方

便消費(fèi)者查找自己想要的商品，關(guān)鍵詞是為了給不知道買什么的消費(fèi)者提供一

個(gè)購(gòu)買的方向，排名是根據(jù)我自己和身邊朋友平常買東西的習(xí)慣，會(huì)想要先看

哪些商品銷量高的，或者是綜合排名高，根據(jù)排名來(lái)購(gòu)買。最重要的是在頁(yè)面

中的分類部分，這里有詳細(xì)的品牌商品的一些系列、規(guī)格、功效和顏色，消費(fèi)

者都可以根據(jù)自己想要的進(jìn)行篩選，最后會(huì)展示符合消費(fèi)者需求的商品。在產(chǎn)

品圖的部分設(shè)置了一個(gè)鼠標(biāo)未到達(dá)和鼠標(biāo)到達(dá)時(shí)的兩種不同的效果。產(chǎn)品圖片

背景都是淺綠色，外框選用顏色深一點(diǎn)的綠色，既與頁(yè)面的整體色調(diào)一致，也

能與產(chǎn)品部分區(qū)別開(kāi)來(lái)。當(dāng)鼠標(biāo)到達(dá)一個(gè)商品的板塊時(shí)，板塊由原來(lái)的綠色變

為紅色邊框，商品的名稱隱藏變成價(jià)格、“立即購(gòu)買”和“加入購(gòu)物車”兩個(gè)

圓角矩形按鈕，“立即購(gòu)買”的按鈕是紅底白字，“加入購(gòu)物車”是綠底紅字，

這樣是為了消費(fèi)者更好的區(qū)分。一個(gè)頁(yè)面展示六個(gè)產(chǎn)品，這樣的排版不會(huì)顯得

很擁擠，也不會(huì)顯得很稀疏，會(huì)給消費(fèi)者帶來(lái)很好的視覺(jué)、瀏覽體驗(yàn)。（如圖13

所示）

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

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

16

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

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

3.3.1商品詳情頁(yè)設(shè)計(jì)思路

商品詳情頁(yè)中是整個(gè)官網(wǎng)中較重要的頁(yè)面，也是內(nèi)容較豐富的頁(yè)面。所以

這個(gè)頁(yè)面我主要設(shè)置了五個(gè)部分，面包屑導(dǎo)航，產(chǎn)品圖片和信息、還在頁(yè)面右

側(cè)設(shè)置了商品的“特別推薦”，在商品詳情和左邊設(shè)置了側(cè)導(dǎo)航。在產(chǎn)品信息

中有“加入購(gòu)物車”、“立即購(gòu)買”、“收藏商品”的按鈕，先讓消費(fèi)者看到

商品的主圖和商品的名稱、價(jià)格等基本信息，再考慮是加入購(gòu)物車還是立即購(gòu)

買或者收藏該商品，同時(shí)可以使消費(fèi)者在瀏覽該商品時(shí)還可以看到與此商品類

似的該品牌其他商品，在消費(fèi)者瀏覽商品的詳情信息時(shí)，還可以選擇查看蜂花

品牌其他系列的商品。產(chǎn)品的詳細(xì)信息我設(shè)置了焦點(diǎn)圖、產(chǎn)品信息、有關(guān)的發(fā)

絲的問(wèn)題和該產(chǎn)品的功效，產(chǎn)品細(xì)節(jié)的展示和購(gòu)買須知。在設(shè)計(jì)方面，我把側(cè)

導(dǎo)航的標(biāo)題做了一個(gè)特別的設(shè)計(jì)，用品牌logo中的圖形做了一個(gè)背景在上面增

加了一個(gè)透明度較低的六邊形，六邊形就類似于蜂巢的形狀，使有關(guān)蜂花品牌

的元素?！吧唐吩斍椤敝饕伾堑S色，淡黃色是一種溫暖的顏色，選擇淡

黃色也是為了呼應(yīng)“蜂花”這一品牌。整體結(jié)構(gòu)設(shè)計(jì)都是比較統(tǒng)一，但其中每

個(gè)不同的部分我用不同的顏色將不同的信息分隔開(kāi)來(lái)，并用了陰影的樣式將每

個(gè)部分之間有一個(gè)立體的分隔開(kāi)的感覺(jué)，可以帶來(lái)更好地視覺(jué)體驗(yàn)。（如圖14

所示）

3.3.2商品詳情頁(yè)設(shè)計(jì)效果

17

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

18

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

圖14商品詳情頁(yè)詳情頁(yè)效果圖

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

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

登錄注冊(cè)頁(yè)中，背景用了深淺不同的綠色、形狀不規(guī)則的色塊做拼接，還

加上了與首頁(yè)一樣的葉子暗紋圖形。整體的布局是左圖右文的排版方式，左邊

的圖片主要有品牌的logo和商品的卡通圖形做成。在這里商品的圖片并不是品

牌的真實(shí)的商品圖片，根據(jù)商品的真實(shí)圖片，在素材庫(kù)里面尋找出一些與商品

類似形狀的素材，讓他們進(jìn)行排列組合和顏色的修改，再加上品牌名稱“蜂

19

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

花”，將左邊的圖片區(qū)域完成。因?yàn)槲矣X(jué)得原本的商品圖片擺在一起，會(huì)使整

個(gè)頁(yè)面變得眼花繚亂，所以我選擇了顏色較單一且形狀類似的素材作為代替。

我做了兩種登錄方式，一個(gè)是短信驗(yàn)證碼登錄，另一個(gè)是會(huì)員賬號(hào)登錄。當(dāng)消

費(fèi)者選擇不同登錄方式時(shí)，每一種登錄方式的文字都會(huì)改變顏色，選中的會(huì)變

成綠色，未選中的字體仍是黑色。這樣也是為了提示消費(fèi)者是正在使用的是哪

種登錄方式。在短信驗(yàn)證登錄中會(huì)有手機(jī)號(hào)輸入框和發(fā)送按鈕，有圖片驗(yàn)證碼

的輸入框，還有輸入短信驗(yàn)證碼的輸入法，雙重的驗(yàn)證碼輸入是為了給消費(fèi)者

提供更加可靠安全保障。在登錄按鈕的下方用淺灰色的字體加下劃線的形式設(shè)

計(jì)了“沒(méi)有找到賬號(hào)？點(diǎn)擊輸入”的文字，是方便，沒(méi)有賬號(hào)的用戶可以注冊(cè)

新的賬戶。（如圖15所示）

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

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

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

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

購(gòu)物車頁(yè)面中，設(shè)置了“降價(jià)”和“常購(gòu)”兩個(gè)按鈕，在購(gòu)物車?yán)锏纳唐?/p>

以列表的形式呈現(xiàn)，把商品圖片、商品名稱、單價(jià)數(shù)量、總計(jì)和“刪除”等一

些基本操作按次排列起來(lái)時(shí)，使之更加清晰明了?！叭ソY(jié)算”的按鈕使用了紅

底白字，特別標(biāo)志出來(lái)，有突出的效果。下面的“猜你喜歡”用了一行四列的

排列方式，將背景色設(shè)置為與頁(yè)面背景色一致的淺綠色，再用深綠色做邊框?qū)?/p>

四個(gè)產(chǎn)品展現(xiàn)出來(lái)，看起來(lái)干凈整潔。（如圖16所示）

20

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

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

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

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

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

訂單結(jié)算頁(yè)中，我設(shè)計(jì)了可選擇和添加收貨地址、設(shè)置默認(rèn)地址、商品清

單、提交訂單以及返回購(gòu)物車。先選擇收貨地址，再確認(rèn)商品清單信息，接著

再選擇支付方式，最后提交訂單完成支付。先讓消費(fèi)者選擇收貨地址，是為確

保消費(fèi)者在支付訂單后發(fā)現(xiàn)自己的收貨地址填寫(xiě)錯(cuò)誤而進(jìn)行更復(fù)雜的操作用；

打紅色小勾的形式進(jìn)行已選商品的標(biāo)記，已選商品數(shù)量和總計(jì)的價(jià)格用紅字標(biāo)

記，使得頁(yè)面中較重要的信息凸顯出來(lái)，讓消費(fèi)者可以謹(jǐn)慎購(gòu)，以免錯(cuò)買商品。

（如圖17所示）

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

21

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

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

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

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

個(gè)人中心頁(yè)面中主要分為左右兩部分，左邊設(shè)置了側(cè)導(dǎo)航，右面是以會(huì)員

中心為主要內(nèi)容做的會(huì)員卡、會(huì)員特權(quán)、和小的banner和會(huì)員商城四個(gè)板塊的

設(shè)置。側(cè)導(dǎo)航設(shè)置“我的賬戶”、“我的收藏”、“我的訂單”、“瀏覽歷

史”、“會(huì)員中心”、“我的卡包”、“我的消息”、“售后服務(wù)”設(shè)置，這

都是個(gè)人中心的基本設(shè)置。在右邊會(huì)員卡的部分，將會(huì)員的基本信息都顯示在

這個(gè)部分，讓會(huì)員能夠清楚看。“會(huì)員特權(quán)”部分用七個(gè)六邊形圍在一起展示

會(huì)員的特權(quán)，以文字形式寫(xiě)在六邊形的中間。這樣設(shè)計(jì)的目的是與品牌“蜂花”

相呼應(yīng)，用兩種不同的綠色做六邊形的