蜂花品牌網(wǎng)店視覺方案設計

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

目錄

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

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

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

1.3色彩設計...........................................................................................................2

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

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

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

2.2搜索結果頁.......................................................................................................6

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

2.4登錄注冊頁.......................................................................................................8

2.5購物車...............................................................................................................9

2.6訂單結算頁.....................................................................................................10

2.7個人中心.........................................................................................................11

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

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

3.1.1設計思路.............................................................................................12

3.1.2設計效果.............................................................................................14

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

3.2.1設計思路.............................................................................................16

3.2.2設計效果.............................................................................................16

3.3商品詳情頁視覺設計與制作.........................................................................17

3.3.1商品詳情頁設計思路.........................................................................17

3.3.2商品詳情頁設計效果.........................................................................17

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

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

3.4.2設計效果.............................................................................................20

I

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

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

3.5.1設計思路.............................................................................................20

3.5.2設計效果.............................................................................................21

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

3.6.1設計思路.............................................................................................21

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

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

3.7.1設計思路.............................................................................................22

3.7.2設計效果.............................................................................................23

4總結.............................................................................................................................23

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

II

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

蜂花品牌網(wǎng)店視覺方案設計

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

1.1項目背景

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

千家萬戶，人們對電子商務購物的需求也越來越大。正因為這種生活方式，使

得越來越多人選擇在電子平臺購物。因此電子商務購物平臺也需要一個美觀的

設計，這樣才能更加吸引到消費者，從而增加消費者對該品牌產(chǎn)品的購買欲望，

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

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

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

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

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

場眾多不同的品牌競爭激烈，其中蜂花品牌是大家公認的老牌國貨，因其實在

的價格、不錯的功效而得到青睞，蜂花多年來穩(wěn)固地占有三分之一的全國市場，

蜂花始終堅持面向大眾消費群體。蜂花品牌的官網(wǎng)是一個有購買能力的獨立網(wǎng)

店。

1.2項目需求分析

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

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

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

合理，消費者會有不好的瀏覽體驗。

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

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

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

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

計無論從色彩搭配、排版布局還是圖片文字的設計都需要滿足大眾的審美，要

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

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

1

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

在商品詳情頁中一定要多設計商品的詳細信息；因為蜂花品牌中最受歡迎的產(chǎn)

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

典產(chǎn)品有關的設計，有黃色加入可能會顯得頁面不那么單調。個人中心頁面也

要有特點，要有一些與蜂花品牌、logo相呼應的設計。

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

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

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

消費者在網(wǎng)店中購買到自己心儀的商品。

1.3色彩設計

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

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

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

的感覺。把綠色作為網(wǎng)站設計的主要顏色，可以給消費者帶來很好的視覺效果

和瀏覽體驗。

為了使頁面的色彩看起來不單調更有設計感，我用了幾種不同的綠色作為

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

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

綴色，紅色主要運用在商品的價格、“立即購買”等一些需要消費者注意得地

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

的本身的顏色設計。棕色使在詳情頁中主要字體的顏色設計，是與黃色做一個

結合。（如圖1所示）

圖1標準色

2

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

1.4字體規(guī)范

選用黑體字體和等線字體因為它的字體簡潔，都有幾乎相等的線條但非常

地突出，所以在頁面設計過程中多次使用了黑體和等線字體，這類型的字體可

以基本滿足排版設計的需要。

選用方正綜藝簡體是因為這種字體字形結構簡單而且整體姿態(tài)是大氣的，

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

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

適用于一些設計類的運用。（如圖2所示）

圖2標準字體

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

2.1首頁

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

尾這六個模塊組成。店招中通過店鋪的店鋪名、店鋪logo、廣告語和宣傳標語

等突出我們店鋪的實力，手機端、客服、購物車的圖標和搜索框是為了給訪問

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

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

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

3

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

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

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

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

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

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

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

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

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

方放了四張公司的榮譽證書，右邊文字就是公司的名稱和簡單的介紹，還有“了

解更多”的功能按鈕，公司簡介的文字下方加上了公司的四個特點，以文字和

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

頁尾最左邊是品牌的LOGO，在右邊將一些導航按鈕、“掃一掃”的二維碼、

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

4

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

圖3首頁原型圖

5

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

2.2搜索結果頁

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

導航欄的下方有一個搜索框，主要是為了方便訪問時的查找。在搜索框的后面

有“共搜索到幾條結果”，把結果顯示出來可以清楚地知道有多少符合消費者

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

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

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

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

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

部分，在這里我做了兩行三列，每一頁主要展示六個產(chǎn)品，當消費者把鼠標移

到產(chǎn)品上時，會出現(xiàn)立即購買和加入購物車的兩個按鈕，這樣可以方便消費者

下單。（如圖4所示）

圖4搜索結果頁原型圖

2.3商品詳情頁

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

面設置了一個面包屑導航，可以讓消費者了解目前所處的位置以及知道如何返

6

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

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

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

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

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

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

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

所示）

7

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

圖5商品詳情頁原型圖

2.4登錄注冊頁

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

頁面主要就是方便用戶的賬號登錄和賬號注冊，頁面主要是左右兩欄的排版布

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

產(chǎn)品圖，右邊就是登錄的信息填寫框，我把登錄設為短信驗證登錄和會員賬號

8

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

登錄，若沒有賬號，可以在登錄按鈕下方點擊注冊。兩種登錄方式給消費者帶

來了更方便的體驗。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車頁面的店招導航欄和頁尾部分都是和首頁一樣，統(tǒng)一的。在頁面的

導航欄下面，設置了一個顯示消費者個人購物車中商品數(shù)量的區(qū)域，接下來有

一個降價和加購的按鈕，這樣可以讓消費者更加清晰的了解到這些價格的變動

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

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

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

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

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

歡”、“我的關注”和“最近瀏覽”，也是為了促進消費者的購買，為消費者

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

9

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

圖7購物車原型圖

2.6訂單結算頁

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

的下方設置了訂單結算頁的圖標和“訂單結算頁”字樣，下面就是消費者的收

貨地址，并且還有“添加收貨地址”和“支付后邀請好友填寫地址”兩個按鈕

可供消費者選擇。接下來就有商品清單的列表，會展示商品圖片、商品名稱、

單價數(shù)量和總計，可以方便消費者清楚的知道自己的要購買的商品是哪些。還

有訂單備注、支付方式的選擇和號碼保護，還會有顯示“已選擇幾件商品”、

總計和送貨的地址和收件人信息。最后還會有“返回購物車”和“提交訂單”

兩個按鈕。（如圖8所示）

10

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

圖8訂單結算頁原型圖

2.7個人中心

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

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

頁面的左邊設置了側導航，可以方便消費者在個人中心尋找一些有關的信息，

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

個人中心進行設置的。個人中心頁面主要是展示“會員中心”部分，右邊設置

了一個電子會員卡，上面有用戶姓名、會員等級、會員碼、積分、零錢、訂閱

和有效期。下面一欄是會員特權，分七塊向會員用戶展示會員的專項特權；接

下來是一個小的Banner廣告，向用戶推薦可專享會員折扣的商品；下面是會員

商城，展示了六個會員用戶專有的商場特權，這樣可以吸引消費者家人品牌會

員。最后顯示了一句口號“您的滿意是我們不變的追求”和“更多會員權益敬

請期待”這樣的設計雖然是簡單的文字，但我覺得這樣子展示在頁面上會給消

費者帶來一個好的的感受和體驗。（如圖9所示）

11

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

圖9個人中心原型圖

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

3.1首頁視覺設計與制作

3.1.1設計思路

網(wǎng)店首頁是店鋪的招牌和形象，這個頁面地設計代表著整個店鋪的風格和

定位，頁面整體的風格就是簡單高級、綠色原生態(tài)。以綠色為主，在背景的處

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

過于單調。暗紋的處理是用PS軟件，先找到一個線條清晰葉子的素材，在ps

中打開，運用顏色選取工具，選出葉子，再按“ctrl+J”復制一層出來，對復

制出來的圖層進行調整透明度、顏色等，達到最終效果。在首頁中我設計了店

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

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

這樣可以給消費者快速地提高這些基本服務。還有一個搜索框，可以方便有目

標的消費者快速在官網(wǎng)中找到自己想要查詢或者購買的商品。導航欄處特意為

品牌設計了“關于蜂花”、“蜂花小課堂”和“加入蜂花”，是為了讓消費者

12

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

更加深入的了解蜂花這個品牌，在導航欄處是引導消費者去點擊。導航欄的下

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

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

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

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

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

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

功效。因為是新品，所以標注的信息和資料比較的全面，可以更好的使消費者

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

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

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

來。最后還設置了一個返回頂部的按鈕，并對這個鈕進行了裝飾。因為首頁的

頁面較長，設置一個返回頂部的按鈕，可以幫助消費者較快到達頁面的頂部，

方便又快捷。

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

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

字部分有產(chǎn)品的宣傳文案、活動的時間和活動的內容和立即搶購的按鈕。宣傳

文案設計的是粗體淺色字體，這樣可以很好的與背景圖片區(qū)別開來。在右邊的

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

圖片都做了倒影的效果，使整個banner看起來都有一個光影的效果。倒影效果

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

拉到一個適合的影子樣式，在選擇圖層填充顏色，再對顏色進行模糊、調整透

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

圖10節(jié)日banner

13

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

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

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

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

加突出文字。在文字設置方面，我采用了巧妙的筆畫替換方法，將無硅油中“油”

三點水旁的第三點用一滴油來替代，用象征圖形替換，一下就提升了較強的視

覺焦點。我先將文字柵格化，然后用橡皮擦工具把需要替換的筆畫擦去，再摳

出需要的素材，然后擺放在相應的位置。右邊放置了一個展示臺，將三個無硅

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

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

圖11產(chǎn)品banner

3.1.2設計效果

14

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

圖12首頁效果圖

15

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

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

3.2.1設計思路

搜索結果頁中，我設置了搜索框、關鍵詞、排名等。設置搜索框是為了方

便消費者查找自己想要的商品，關鍵詞是為了給不知道買什么的消費者提供一

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

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

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

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

品圖的部分設置了一個鼠標未到達和鼠標到達時的兩種不同的效果。產(chǎn)品圖片

背景都是淺綠色，外框選用顏色深一點的綠色，既與頁面的整體色調一致，也

能與產(chǎn)品部分區(qū)別開來。當鼠標到達一個商品的板塊時，板塊由原來的綠色變

為紅色邊框，商品的名稱隱藏變成價格、“立即購買”和“加入購物車”兩個

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

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

很擁擠，也不會顯得很稀疏，會給消費者帶來很好的視覺、瀏覽體驗。（如圖13

所示）

3.2.2設計效果

圖13搜索結果頁效果圖

16

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

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

3.3.1商品詳情頁設計思路

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

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

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

中有“加入購物車”、“立即購買”、“收藏商品”的按鈕，先讓消費者看到

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

買或者收藏該商品，同時可以使消費者在瀏覽該商品時還可以看到與此商品類

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

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

絲的問題和該產(chǎn)品的功效，產(chǎn)品細節(jié)的展示和購買須知。在設計方面，我把側

導航的標題做了一個特別的設計，用品牌logo中的圖形做了一個背景在上面增

加了一個透明度較低的六邊形，六邊形就類似于蜂巢的形狀，使有關蜂花品牌

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

黃色也是為了呼應“蜂花”這一品牌。整體結構設計都是比較統(tǒng)一，但其中每

個不同的部分我用不同的顏色將不同的信息分隔開來，并用了陰影的樣式將每

個部分之間有一個立體的分隔開的感覺，可以帶來更好地視覺體驗。（如圖14

所示）

3.3.2商品詳情頁設計效果

17

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

18

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

圖14商品詳情頁詳情頁效果圖

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

3.4.1設計思路

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

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

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

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

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

19

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

花”，將左邊的圖片區(qū)域完成。因為我覺得原本的商品圖片擺在一起，會使整

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

我做了兩種登錄方式，一個是短信驗證碼登錄，另一個是會員賬號登錄。當消

費者選擇不同登錄方式時，每一種登錄方式的文字都會改變顏色，選中的會變

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

種登錄方式。在短信驗證登錄中會有手機號輸入框和發(fā)送按鈕，有圖片驗證碼

的輸入框，還有輸入短信驗證碼的輸入法，雙重的驗證碼輸入是為了給消費者

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

計了“沒有找到賬號？點擊輸入”的文字，是方便，沒有賬號的用戶可以注冊

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

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車頁面中，設置了“降價”和“常購”兩個按鈕，在購物車里的商品

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

些基本操作按次排列起來時，使之更加清晰明了。“去結算”的按鈕使用了紅

底白字，特別標志出來，有突出的效果。下面的“猜你喜歡”用了一行四列的

排列方式，將背景色設置為與頁面背景色一致的淺綠色，再用深綠色做邊框將

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

20

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

3.5.2設計效果

圖16購物車效果圖

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

3.6.1設計思路

訂單結算頁中，我設計了可選擇和添加收貨地址、設置默認地址、商品清

單、提交訂單以及返回購物車。先選擇收貨地址，再確認商品清單信息，接著

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

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

打紅色小勾的形式進行已選商品的標記，已選商品數(shù)量和總計的價格用紅字標

記，使得頁面中較重要的信息凸顯出來，讓消費者可以謹慎購，以免錯買商品。

（如圖17所示）

3.6.2設計效果

21

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

圖17訂單結算頁效果圖

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

3.7.1設計思路

個人中心頁面中主要分為左右兩部分，左邊設置了側導航，右面是以會員

中心為主要內容做的會員卡、會員特權、和小的banner和會員商城四個板塊的

設置。側導航設置“我的賬戶”、“我的收藏”、“我的訂單”、“瀏覽歷

史”、“會員中心”、“我的卡包”、“我的消息”、“售后服務”設置，這

都是個人中心的基本設置。在右邊會員卡的部分，將會員的基本信息都顯示在

這個部分，讓會員能夠清楚看?！皶T特權”部分用七個六邊形圍在一起展示

會員的特權，以文字形式寫在六邊形的中間。這樣設計的目的是與品牌“蜂花”

相呼應，用兩種不同的綠色做六邊形的