米旗品牌網(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ì)......................................................................................................2

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

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

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

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

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

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

2.5購(gòu)物車(chē)..........................................................................................................8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

參考資料............................................................26

II

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

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

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

1.1項(xiàng)目背景

隨著電商行業(yè)的快速發(fā)展與進(jìn)行，網(wǎng)購(gòu)逐漸成了人們?cè)谌粘Ｉ钪斜夭豢?/p>

少的一件事，網(wǎng)購(gòu)的人群一直是呈增長(zhǎng)的趨勢(shì)發(fā)展，購(gòu)物的人群越多，人們對(duì)

網(wǎng)購(gòu)的體驗(yàn)要求也就越高，而且現(xiàn)在有更多的消費(fèi)者都在尋求個(gè)性化的購(gòu)物體

驗(yàn)。所以米旗品牌想要建立屬于自己的獨(dú)立網(wǎng)店，這也是為了不錯(cuò)過(guò)一大批在

淘寶、天貓、京東上的客戶。而且烘焙品牌競(jìng)爭(zhēng)也比較激烈，隨著好利來(lái)品牌

的火爆，越來(lái)越多的烘焙品牌在除了研發(fā)自己的新產(chǎn)品以外，它們都建立了屬

于自己的獨(dú)立品牌網(wǎng)店，而且這些品牌都取得了一些較好的成績(jī)。而我們米旗

嚴(yán)格按照體系要求，從上游供應(yīng)商到生產(chǎn)、儲(chǔ)存至銷(xiāo)售服務(wù)進(jìn)行細(xì)致、周密品

質(zhì)管理，確保了產(chǎn)品的安全、安心、優(yōu)質(zhì)。而且該品牌十分重視產(chǎn)品品質(zhì)，其

產(chǎn)品口感細(xì)膩，新鮮美味，十分受顧客喜愛(ài)。被譽(yù)為“中國(guó)烘焙食品的領(lǐng)頭

羊”。但是米旗只有京東與天貓的網(wǎng)店，并沒(méi)有屬于自己的獨(dú)立網(wǎng)店，所以為

了自己品牌未來(lái)能夠更好的發(fā)展下去，現(xiàn)在需要建立一個(gè)獨(dú)立的品牌形象網(wǎng)店。

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

現(xiàn)目前越來(lái)越多的消費(fèi)者都追求個(gè)性化的品牌網(wǎng)店，而米旗還沒(méi)有屬于自

己的獨(dú)立網(wǎng)店，所以為了提高銷(xiāo)量，增加消費(fèi)者對(duì)該品牌的了解，需要建立一

個(gè)獨(dú)立且具有個(gè)性的品牌網(wǎng)店。米旗是以烘焙類(lèi)為主的品牌，而且烘焙食品在

我國(guó)食品工業(yè)中具有主要的地位，其產(chǎn)品消費(fèi)市場(chǎng)較大。烘焙食品作為居民日

常生活中的重要一部分，已經(jīng)成為部分消費(fèi)者的主要食物之一。所以可以設(shè)計(jì)

一個(gè)屬于自己是獨(dú)立網(wǎng)店，網(wǎng)店風(fēng)格根據(jù)消費(fèi)者所喜愛(ài)的進(jìn)行設(shè)計(jì)，并且做出

一些精美的網(wǎng)站設(shè)計(jì)，使用正確的顏色組合，需要突出品牌的產(chǎn)品與服務(wù)，從

而更好的去展現(xiàn)這個(gè)品牌。隨著中國(guó)經(jīng)濟(jì)的增長(zhǎng)，居民生活水平的提高，消費(fèi)

者從“吃好、吃飽”的心態(tài)轉(zhuǎn)變成了“吃的安全、吃的健康”。所以可以從安

全、健康、綠色這些方面的原材料進(jìn)行宣傳，讓更多的消費(fèi)者知道我們的品牌，

并且可以根據(jù)消費(fèi)者的喜愛(ài)來(lái)進(jìn)行設(shè)計(jì)產(chǎn)品的樣式，從而吸引消費(fèi)者進(jìn)行購(gòu)買(mǎi)。

米旗需要對(duì)自己以及競(jìng)爭(zhēng)對(duì)手的產(chǎn)品都要有清晰的認(rèn)知與了解，要為自己的產(chǎn)

1

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

品迭代提供決策依據(jù)。還需要縮短產(chǎn)品的設(shè)計(jì)周期，以便能夠更好的體現(xiàn)，提

高產(chǎn)品的銷(xiāo)量。對(duì)于競(jìng)爭(zhēng)對(duì)手來(lái)說(shuō)，可以對(duì)競(jìng)爭(zhēng)對(duì)手進(jìn)行分析，學(xué)習(xí)他們做的

好的地方，改掉做的不好的地方，從而使自己進(jìn)步。企業(yè)希望這個(gè)網(wǎng)店的視覺(jué)

設(shè)計(jì)可以給品牌帶來(lái)更多的新客戶，以及讓更多的顧客知道并了解米旗這個(gè)品

牌，為品牌網(wǎng)店提高銷(xiāo)量。

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

色彩設(shè)計(jì)上我以相近色進(jìn)行搭配在一起，主要都是以黃色橙色為主，主色

占60%、輔助色占30%、點(diǎn)綴色占10%，第一眼就吸引了顧客興趣，給顧客帶來(lái)

舒適的感覺(jué)。

主色：主色在網(wǎng)店首頁(yè)中占據(jù)較多的部分，總共了60%，我選擇了黃色作為

主色，在視覺(jué)上黃色給消費(fèi)者的感覺(jué)就非常的有食欲，給網(wǎng)站的排版也帶來(lái)非

常大方的感覺(jué)，米旗主打的產(chǎn)品是蛋糕，所以黃色也可以給消費(fèi)者溫馨的感覺(jué)。

輔助色：輔助色在網(wǎng)站中占了30%，我選用了橙色，橙色與黃色整體搭配非

常協(xié)調(diào)好看，橙色也給人帶來(lái)活力健康熱情有朝氣的感覺(jué)，這種感覺(jué)給人帶來(lái)

眼前一新，網(wǎng)站看起來(lái)也不會(huì)單調(diào)，豐富了網(wǎng)站的內(nèi)容，充滿生命力。

點(diǎn)綴色：點(diǎn)綴色在網(wǎng)站中只占10%，非常少，所以我用紅色和米白色作為網(wǎng)

站的點(diǎn)綴色。因?yàn)樗念伾珜?duì)比較強(qiáng)烈，視覺(jué)效果會(huì)比較好。紅色給人也會(huì)帶

來(lái)非常明艷的感覺(jué)，而白色就給本來(lái)色彩濃烈的顏色加入了一種緩和的顏色，

讓人視覺(jué)上更加大方、舒適。網(wǎng)店本身是以橙黃這種鮮明的顏色為主，選用點(diǎn)

綴的這兩種顏色與橙色、黃色色差較大，所以對(duì)比起來(lái)就非常強(qiáng)烈。（如圖1

所示）

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

2

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

1.4字體規(guī)范

字體上我使用微軟雅黑與黑體為主，華文細(xì)黑為輔，這幾種字體是具有可

讀性與視覺(jué)審美的文字，在具備強(qiáng)烈的視覺(jué)美感的同時(shí)還能夠給顧客帶來(lái)內(nèi)心

的震撼。且主要使用這兩種字體是為了讓顧客看起來(lái)更加清晰舒服，所使用的

的字體里面沒(méi)有那種讓眼睛看上去比較疲憊的花哨的字體。主要以清楚舒適為

主，美觀為輔。且整體的設(shè)計(jì)風(fēng)格較為統(tǒng)一，加強(qiáng)了品牌店鋪的整體性與統(tǒng)一

感，給顧客產(chǎn)生良好的視覺(jué)吸引力。具體字體可看下圖。（如圖2所示）

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

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

2.1首頁(yè)

首頁(yè)的最上面就是店招部分，中間用了品牌標(biāo)語(yǔ)，使顧客一眼就能注意到

店鋪的宗旨。右邊有登錄注冊(cè)的地方，讓顧客有在店鋪使用權(quán)益的權(quán)利，使用

的是居中對(duì)齊的板式進(jìn)行設(shè)計(jì)。第二部分就是Banner，給品牌做推廣，為一些

節(jié)日做慶祝，為一些產(chǎn)品做宣傳。Banner看一下進(jìn)行輪播的效果，一張一張讓

顧客更加仔細(xì)的了解到該品牌的一些特點(diǎn)。第三部分就是介紹米旗這個(gè)品牌，

品牌介紹在店鋪里面還是比較重要的，雖然介紹的區(qū)域不大，但是我設(shè)計(jì)了了

解更多的鏈接，點(diǎn)進(jìn)去里面會(huì)有更加詳細(xì)的介紹，這一部分我也是進(jìn)行了對(duì)齊

3

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

的板式，因?yàn)槲艺J(rèn)為對(duì)齊可以給顧客帶來(lái)比較方便且舒適的視覺(jué)效果。第四部

分就是產(chǎn)品上新，為店鋪精心挑選了一些非常美觀的新品產(chǎn)品圖，并且還將上

新時(shí)間也標(biāo)注在上面，讓顧客吃得安心吃得放心。第五部分就是熱銷(xiāo)產(chǎn)品，這

一部分有可以直接點(diǎn)擊就能立即購(gòu)買(mǎi)的功能，如果不想購(gòu)買(mǎi)還需要考慮的也幫

忙設(shè)計(jì)的購(gòu)物車(chē)的鏈接，給顧客考慮。在下一個(gè)部分就是返回頂部。最后一個(gè)

部分有我們店鋪的二維碼，關(guān)注此品牌店鋪，還設(shè)有品牌的具體位置等信息。

讓顧客清楚的知道品牌的一些信息。（如圖3所示）

4

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

圖3首頁(yè)原型圖

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

搜索結(jié)果頁(yè)的第一個(gè)功能模塊就是搜索框模塊，顧客可以在這里搜索到本

店鋪的所有產(chǎn)品，顏色也是用的比較夸張的黃色，我認(rèn)為黃色可以給人帶來(lái)溫

暖的感覺(jué)。接下來(lái)就是產(chǎn)品的分類(lèi)，按照類(lèi)型、口味和價(jià)格對(duì)產(chǎn)品進(jìn)行的仔細(xì)

點(diǎn)分類(lèi)，為顧客在購(gòu)買(mǎi)的時(shí)候更加方便就能搜索查詢到自己想要的商品。在視

覺(jué)方面也給顧客帶來(lái)了便利。不用一個(gè)一個(gè)去找，而是直接篩選到自己想要購(gòu)

買(mǎi)的商品。再下面就是產(chǎn)品圖，每個(gè)產(chǎn)品圖的下面都標(biāo)有產(chǎn)品名稱、價(jià)格和立

即購(gòu)買(mǎi)的按鈕，顧客進(jìn)行篩選后看到了自己想購(gòu)買(mǎi)的商品就可以直接點(diǎn)擊立即

購(gòu)買(mǎi)的按鈕，系統(tǒng)就給它進(jìn)行下一步指示。最后一個(gè)部分有我們店鋪的二維碼，

關(guān)注此品牌店鋪，還設(shè)有品牌的具體位置等信息。讓顧客清楚的知道品牌的一

些信息，還可以關(guān)注我們除了官方旗艦店以外的賬號(hào)，對(duì)我們品牌的信息更加

了解。搜索結(jié)果頁(yè)我設(shè)計(jì)的板式是滿版型，上面一部分以配置文字為主，下半

部分主要配置圖片。給顧客大方、舒適的感覺(jué)。（如圖4所示）

5

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

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

2.3商品詳情頁(yè)

搜索結(jié)果頁(yè)的第一個(gè)功能模塊就是產(chǎn)品信息的介紹，此模塊可以了解商品

的信息、控制加購(gòu)商品的數(shù)量、將商品加入購(gòu)物車(chē)或者直接購(gòu)買(mǎi)商品。這個(gè)模

塊的右邊還有一個(gè)熱銷(xiāo)產(chǎn)品的小模塊，讓顧客知道我們的品牌賣(mài)的最好的幾個(gè)

產(chǎn)品，給產(chǎn)品做推廣最后將產(chǎn)品賣(mài)出提高產(chǎn)品銷(xiāo)量。接下來(lái)的一個(gè)功能模塊就

是所以產(chǎn)品的分類(lèi)，在這里可以看到所以產(chǎn)品的類(lèi)型以及客戶可以聯(lián)系客服咨

詢所不清楚不了解的問(wèn)題，這里都能幫客戶解決。用戶點(diǎn)擊收藏圖標(biāo)后可以在

店鋪有新活動(dòng)的時(shí)候第一時(shí)間通知客戶，以提高品牌的購(gòu)買(mǎi)率。接下來(lái)的一個(gè)

功能模塊就是商品的詳情介紹，有產(chǎn)品信息、精選材料、為何選擇我們、美味

的背后和購(gòu)買(mǎi)須知。這個(gè)模塊是吸引顧客購(gòu)買(mǎi)的第一步。產(chǎn)品詳情頁(yè)可以吸引

買(mǎi)家深入了解產(chǎn)品，或者引導(dǎo)買(mǎi)家瀏覽店鋪中的其他商品，已達(dá)到進(jìn)店流量的

利用做大化。（如圖5所示）

6

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

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

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

登錄注冊(cè)頁(yè)的最主要的功能模塊就只有一個(gè)，因?yàn)榈卿涀?cè)的主要目的是

為了讓顧客有在我們品牌更好的體驗(yàn)感，使用次模塊的一個(gè)最主要的功能就是

顧客的登陸和注冊(cè)的功能，用戶進(jìn)入APP的時(shí)候并不會(huì)提示登錄或是注冊(cè)，只

有當(dāng)用戶使用到某些功能時(shí)才會(huì)提示登錄或注冊(cè)，當(dāng)然用戶也可以選擇在這里

7

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

進(jìn)行登錄或注冊(cè)。給客戶帶來(lái)更好的網(wǎng)站體驗(yàn)，在不記得密碼的情況下有個(gè)忘

記密碼的圖標(biāo)，點(diǎn)擊進(jìn)去可以讓顧客進(jìn)行驗(yàn)證從而找回密碼。這個(gè)頁(yè)面我采用

的是中心型板式，這個(gè)板式容易使顧客產(chǎn)生視覺(jué)焦點(diǎn)，使其更加突出。（如圖6

所示）

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

2.5購(gòu)物車(chē)

購(gòu)物車(chē)頁(yè)的第一個(gè)功能模塊就是在購(gòu)物車(chē)這里能看到客戶瀏覽時(shí)喜歡的已

經(jīng)加購(gòu)的商品，還可以將商品進(jìn)行收藏或者是移除購(gòu)物車(chē)，客戶可以勾選想要

購(gòu)買(mǎi)的商品點(diǎn)擊去結(jié)算按鈕就能跳轉(zhuǎn)到下一個(gè)部分。還有一個(gè)功能模塊就是下

一部分的熱銷(xiāo)產(chǎn)品模塊，在這里顧客可以看到本品牌店鋪的熱銷(xiāo)產(chǎn)品，更加了

解店鋪的熱度商品是什么，從而吸引顧客點(diǎn)擊產(chǎn)品進(jìn)去查看并進(jìn)行購(gòu)買(mǎi)，并且

產(chǎn)品圖下面設(shè)計(jì)了加入購(gòu)物車(chē)按鈕，這個(gè)能更方便的增加客戶購(gòu)買(mǎi)欲望，激發(fā)

客戶的銷(xiāo)售欲望。此頁(yè)面采取了水平結(jié)構(gòu)布局的板式，加強(qiáng)了網(wǎng)頁(yè)的整體性，

使網(wǎng)頁(yè)的視覺(jué)效果達(dá)到吸引顧客的作用。（如圖7所示）

8

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

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

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

購(gòu)物車(chē)頁(yè)的第一個(gè)功能模塊就是查看收貨人的信息，顧客可以非常方便的

選擇和修改自己的收貨信息，還能增加收貨人的信息。第二個(gè)功能模塊就是選

擇支付方式，有三種支付方式任顧客選擇。下一個(gè)功能模塊就是配送服務(wù)與備

注，顧客需要選擇那種就進(jìn)行選擇就可以，如果還有什么其他要求也可以在備

注那一欄進(jìn)行備注，對(duì)消費(fèi)者來(lái)說(shuō)非常的方便。再下一個(gè)功能模塊就是商品清

單，顧客可以在這里清楚的看到自己購(gòu)買(mǎi)了哪些商品，查看到商品信息和數(shù)量，

以及店鋪優(yōu)惠，需不需要開(kāi)發(fā)票都可以再這里進(jìn)行查詢與實(shí)行。最后一個(gè)功能

模塊就是進(jìn)行支付或者返回到購(gòu)物車(chē)頁(yè)面，可以看到商品的總額，最后確定后

進(jìn)行支付，隨后就形成訂單，購(gòu)買(mǎi)完成。給顧客帶來(lái)了非常方便的購(gòu)買(mǎi)流程，

清楚的知道顧客選購(gòu)了一些什么產(chǎn)品以及產(chǎn)品的詳細(xì)信息。這個(gè)頁(yè)面我采取了

中軸型的版式設(shè)計(jì)，這樣的設(shè)計(jì)可以給顧客帶來(lái)強(qiáng)烈的動(dòng)感，提高顧客的購(gòu)買(mǎi)

欲望。（如圖8所示）

9

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

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

2.7個(gè)人中心

個(gè)人中心頁(yè)的第一個(gè)功能模塊就是顧客的主要信息、會(huì)員權(quán)益和會(huì)員等級(jí)，

店鋪采取了會(huì)員制，采用會(huì)員制是公司為了正真去讓顧客忠誠(chéng)于品牌，做到品

質(zhì)卓越價(jià)格合理，從而去吸引顧客留住顧客，第二個(gè)功能模塊是在該店鋪有哪

些權(quán)益。再下一個(gè)功能模塊是積分模塊，積分可以去兌換一些產(chǎn)品或者無(wú)門(mén)檻

券，從而引導(dǎo)顧客進(jìn)行小消費(fèi)。最后一個(gè)功能模塊是會(huì)員等級(jí)，告訴顧客在店

鋪消費(fèi)多少?gòu)亩湍苓_(dá)到這個(gè)等級(jí)，等級(jí)越高權(quán)益越多越劃算，而且能夠更好

的加強(qiáng)注冊(cè)顧客的粘著度。此頁(yè)面才用了骨骼型的版式設(shè)計(jì)，規(guī)范以及理性的

分割方法，給顧客帶來(lái)嚴(yán)謹(jǐn)且和諧的美感，提升了顧客的體驗(yàn)感。（如圖9所

示）

10

湖南商務(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é)日活動(dòng)類(lèi)的Banner我做的主題節(jié)日是中秋節(jié)，在店鋪的產(chǎn)品中

也有與中秋節(jié)相對(duì)應(yīng)的產(chǎn)品就是月報(bào)，這張海報(bào)主要是做的月餅主題的海報(bào)，

創(chuàng)意方面主要是將月餅放在騰云的前面，有一種仙仙的感覺(jué)，讓月餅看上去更

加吸引顧客，從而點(diǎn)擊進(jìn)去查看，增加月餅的銷(xiāo)量。文字的設(shè)計(jì)我是在中秋兩

個(gè)字上進(jìn)行了著重的設(shè)計(jì)，讓這兩個(gè)字的字形發(fā)生了變化，是字體看上去更加

美觀，加深顧客對(duì)中秋的印象。接下來(lái)的文字主要就是說(shuō)本店鋪對(duì)于中秋節(jié)的

一個(gè)優(yōu)惠折扣，說(shuō)明了米旗品牌的折扣非常大，加大顧客對(duì)月餅進(jìn)行購(gòu)買(mǎi)的欲

望。色彩的設(shè)計(jì)主要是使用了黃色系，背景使用了非常平面的純色，看上去非

常清新干凈，使人眼前一亮，字體和圖形的顏色都是以黃色為主，與背景進(jìn)行

11

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

了襯托，剛好月餅也是黃色系的，襯托起來(lái)讓顧客看著更加有食欲，月餅盒子

的顏色是藍(lán)色，藍(lán)色和黃色的對(duì)應(yīng)也是讓顧客看起來(lái)非常舒適的，顏色搭配上

給顧客的感覺(jué)是非常溫暖。圖形的設(shè)計(jì)主要采用了祥云、月亮和燈籠，祥云和

月亮讓顧客看著就非常有過(guò)節(jié)的氛圍，再加上燈籠就更有充滿喜慶的感覺(jué)了。

從而吸引顧客點(diǎn)擊banner查看詳情，增加顧客的消費(fèi)欲望。（如圖10所示）

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

這張品牌爆品促銷(xiāo)類(lèi)的Banner的主題是宣傳品牌的這款爆品從而吸引用

戶點(diǎn)擊，因?yàn)槭谴┎逶陧?yè)面中的廣告，所以非常的重要。海報(bào)內(nèi)我將產(chǎn)品信息

直接的傳達(dá)給顧客，吸引顧客關(guān)注然后被點(diǎn)擊。我設(shè)計(jì)的這張是一張靜態(tài)海報(bào)。

文字的設(shè)計(jì)主要是為了宣傳這款奶油蛋糕，所以將蛋糕名稱放在中心位置且字

體大小在文字中也是最大的，突出這種張海報(bào)的重點(diǎn)，字體設(shè)計(jì)上給蛋糕名稱

設(shè)計(jì)成比較可愛(ài)圓滑的形狀與產(chǎn)品相呼應(yīng)。接下來(lái)就是顧客會(huì)看到這款蛋糕的

優(yōu)惠折扣和產(chǎn)品特點(diǎn)細(xì)節(jié)相關(guān)的文字，通過(guò)文字的粗細(xì)大小進(jìn)行對(duì)比，讓顧客

對(duì)這張海報(bào)更加感興趣。在的色彩設(shè)計(jì)上主要采用了黃色系作為主色調(diào)，黃色

看起來(lái)就讓人很有食欲，也給人看起來(lái)就比較溫暖的感覺(jué)，讓banner看起來(lái)也

比較的活潑。折扣使用了紅色最為底色，讓顧客一眼就能看到，更加吸引用戶

進(jìn)行點(diǎn)擊查看。圖形的設(shè)計(jì)主要是使用鋼筆將圖形畫(huà)成奶油從上面留下來(lái)的感

覺(jué)，海報(bào)的中間我使用一條線將文字與產(chǎn)品相隔開(kāi)，有明顯的分區(qū)，沒(méi)有雜亂

無(wú)章的感覺(jué)，我將產(chǎn)品的圖片進(jìn)行了色彩的調(diào)整，使產(chǎn)品與背景更加協(xié)調(diào)。排

版上使用了基礎(chǔ)的左文右圖的設(shè)計(jì)，這樣非常方便顧客視線的快速移動(dòng)，一眼

就能看到重要的信息。（如圖11所示）

12

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

圖11品牌爆品促銷(xiāo)banner

由于是要做一個(gè)烘焙類(lèi)的品牌網(wǎng)店，而且一個(gè)整潔統(tǒng)一的風(fēng)格和色彩就能

給顧客一種整體性和舒適感，就想到喜歡購(gòu)買(mǎi)烘焙類(lèi)產(chǎn)品的大多都是女孩且熱

愛(ài)生活，所以想到首頁(yè)的色彩方面采用單純簡(jiǎn)單濃烈的色系“黃色系”，以米

白色、紅色和橙色作為點(diǎn)綴，給人以活潑的感覺(jué)。首頁(yè)的第一個(gè)部分就是店招

的設(shè)計(jì)，店招我主要使用黃色系作為背景，背景上還放了一個(gè)小蛋糕作為點(diǎn)綴，

給店招添加了一絲可愛(ài)的氛圍，然后將品牌LOGO放在了左上方，中間放著品牌

的廣告語(yǔ)，右上方擺放著登陸、注冊(cè)、收藏、個(gè)人中心和購(gòu)物車(chē)這些功能在它

們的下面擺放的就是導(dǎo)航條，我將首頁(yè)的字體進(jìn)行了標(biāo)紅與加粗，上放的廣告

語(yǔ)選擇的顏色沒(méi)有用那些花里胡哨的顏色，使用了簡(jiǎn)約的黑色，底色采用了與

他對(duì)比強(qiáng)烈的黃色，更加的突出了廣告語(yǔ)，顧客看店招最先看到的也一定就是

品牌的廣告語(yǔ)。第二個(gè)部分就是Banner，banner的設(shè)計(jì)如上所說(shuō)，制作banner

的作用就是使網(wǎng)店的內(nèi)容更加活潑有生機(jī)，并且吸引消費(fèi)者前來(lái)點(diǎn)擊查看，增

加消費(fèi)者的購(gòu)買(mǎi)欲望。第三個(gè)部分是關(guān)于米旗，我先對(duì)標(biāo)題進(jìn)行了設(shè)計(jì)，將文

字放在了裝飾的上方，讓裝飾圖形承載著主標(biāo)題，且包圍著副標(biāo)題，裝飾圖形

是使用PS里的鋼筆工具，用路徑查找器進(jìn)行分割減去等功能，然后再將線條進(jìn)

行擺放，將裝飾圖形完成。標(biāo)題的顏色是采用了點(diǎn)綴的紅色，因?yàn)榧t色非常容

易吸引消費(fèi)者的注意，使網(wǎng)站看上去多了一份熱情。接下來(lái)就是關(guān)于米旗的具

體內(nèi)容，排版采用的是左圖右文的設(shè)計(jì)，這種排版可以提高消費(fèi)者的閱讀流暢

性，還可以使用圖片的內(nèi)容引發(fā)消費(fèi)者的興趣，作為營(yíng)銷(xiāo)手段提高店鋪的轉(zhuǎn)化

率。文字的設(shè)計(jì)方面將米旗這個(gè)品牌的文字介紹放在了圖片的右側(cè)，旁邊還設(shè)

計(jì)了一個(gè)了解更多的按鈕，就是可以使用戶可以更加了解我們自己的品牌，里

面對(duì)于米旗品牌還有更加具體的介紹。第四個(gè)部分就是新品上市，對(duì)于標(biāo)題來(lái)

說(shuō)同上，排版呢就與上面大不相同啦，新品上市里面的內(nèi)容主要是產(chǎn)品，所以

這里需要提高消費(fèi)者的消費(fèi)欲望，這里使用產(chǎn)品圖片與文字相結(jié)合，吸引顧客

的興趣，從而提高消費(fèi)者的購(gòu)買(mǎi)欲望。第五個(gè)部分就是熱銷(xiāo)產(chǎn)品，顏色的設(shè)計(jì)

我使用了與背景有對(duì)比的同色系橙色，讓顧客看起來(lái)感到非常溫暖，這個(gè)模塊

13

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

在產(chǎn)品的選擇方面也是非常重要的，快速的給買(mǎi)家呈現(xiàn)一些有吸引力的產(chǎn)品，

也許能激發(fā)買(mǎi)家的咨詢欲望。最后一個(gè)部分是尾部，我設(shè)計(jì)了一個(gè)返回頂部的

按鈕，是用一個(gè)面包承載著文字，看上去非常的可愛(ài)，吸引顧客。接下來(lái)就是

最下面的內(nèi)容，有我們店鋪的LOGO、聯(lián)系方式、具體地址和其他軟件上的公眾

號(hào)等等，這些都是給顧客一個(gè)保證，并且可以增加店鋪的購(gòu)買(mǎi)率。（如圖12所

示）

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

14

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

圖12首頁(yè)效果圖

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

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

搜索結(jié)果頁(yè)設(shè)計(jì)的第一個(gè)部分就是搜索框，我在搜索欄上有意的設(shè)置展示

了有用的說(shuō)明或例子。例如，搜索生日蛋糕時(shí)可能需要查詢商品的關(guān)鍵詞和標(biāo)

題，可以通過(guò)提示有效的防止有問(wèn)題的搜索。接下來(lái)就是所有的分類(lèi)，可以將

店鋪的產(chǎn)品進(jìn)行篩選，選取到客戶想要查詢的產(chǎn)品，這個(gè)的設(shè)計(jì)我是采用了與

表格有所相似的形態(tài)承載著這些文字，讓顧客看起來(lái)更加簡(jiǎn)單明了方便。色彩

的設(shè)計(jì)上我使用淡黃色作為背景，字體采用與背景色相差較大的黑色進(jìn)行設(shè)計(jì)。

最后就是搜索結(jié)果商品的展示，首先一眼就可以看到的是商品主圖，接下來(lái)是

商品的標(biāo)題，商品價(jià)格和立即購(gòu)買(mǎi)按鈕的色彩設(shè)計(jì)采用了紅色，因?yàn)檫@能更加

的吸引顧客的眼球，從而提升顧客的消費(fèi)欲望。（如圖13所示）

15

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

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

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

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

產(chǎn)品詳情頁(yè)是品牌店鋪內(nèi)使產(chǎn)品成交的關(guān)鍵頁(yè)面，在這里展現(xiàn)了商品的價(jià)

值，促進(jìn)買(mǎi)家的下單轉(zhuǎn)化。所以在分析米旗這個(gè)品牌的過(guò)程中，我根據(jù)商品的

種類(lèi)、特征和口味，選擇了一款最適合大眾喜愛(ài)的產(chǎn)品進(jìn)行了詳情頁(yè)的設(shè)計(jì)。

產(chǎn)品詳情頁(yè)設(shè)計(jì)我共分六個(gè)部分，店招導(dǎo)航、產(chǎn)品主圖及購(gòu)買(mǎi)信息、左側(cè)導(dǎo)航

欄、中間產(chǎn)品詳情內(nèi)容、右側(cè)熱銷(xiāo)產(chǎn)品推薦。這個(gè)頁(yè)面內(nèi)我的背景顏色采用了

淡黃色，淡黃色代表了溫暖和生機(jī)勃勃，而且這個(gè)顏色可以刺激顧客的食欲。

整體結(jié)構(gòu)的設(shè)計(jì)相對(duì)來(lái)說(shuō)都是比較統(tǒng)一的，除了產(chǎn)品主圖購(gòu)買(mǎi)信息、左側(cè)導(dǎo)航

欄和右側(cè)熱銷(xiāo)產(chǎn)品推薦與中間的產(chǎn)品詳情內(nèi)容的設(shè)計(jì)不同。以下是介紹這各產(chǎn)

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

3.3.1提拉米蘇盒子蛋糕設(shè)計(jì)思路

提拉米蘇盒子蛋糕的產(chǎn)品詳情內(nèi)容的設(shè)計(jì)分為六個(gè)部分，第一個(gè)部分是產(chǎn)

品焦點(diǎn)圖的設(shè)計(jì)。焦點(diǎn)圖的背景使用的是蛋糕的細(xì)節(jié)圖，可以讓顧客更加了解

16

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

這款產(chǎn)品，清晰的認(rèn)識(shí)到產(chǎn)品的好處與細(xì)節(jié)處，這樣更能吸引消費(fèi)者的眼球。

色調(diào)采用的是產(chǎn)品本身的色系，同時(shí)使用輔助色來(lái)調(diào)節(jié)整個(gè)畫(huà)面。而且要保證

使用的色彩能夠與寶貝的特點(diǎn)相符合，我使用米白色作為字體的顏色，與背景

顏色形成較大的色差，讓顧客一眼就能注意到產(chǎn)品的主題與名稱。焦點(diǎn)圖我采

用了留白的藝術(shù)表現(xiàn)手法，將蛋糕擠占了畫(huà)面的一大部分，另一部分做留白處

理，將上面部分只寫(xiě)上寥寥幾個(gè)字和一句話時(shí)，放置蛋糕處便是焦點(diǎn)區(qū)，它能

把買(mǎi)家的視覺(jué)集中到這一處顯眼的地方?？梢栽谒囆g(shù)創(chuàng)作中使全部作品畫(huà)面、

章法更加調(diào)和精彩，給人留下想象的空間。第二部分是產(chǎn)品信息模塊，這一模

塊的設(shè)計(jì)首先是標(biāo)題的設(shè)計(jì)，沒(méi)有設(shè)計(jì)那種花里胡哨的感覺(jué)，以整潔簡(jiǎn)單為主

題，是顧客看著的視覺(jué)效果非常舒適。主標(biāo)題下面寫(xiě)了小標(biāo)題，詮釋這部分的

特點(diǎn)，內(nèi)容部分就是這款產(chǎn)品的具體信息。色彩的設(shè)計(jì)是使用與蛋糕相同色系

的咖色作為字體的底色，與產(chǎn)品相呼應(yīng)，圖形的設(shè)計(jì)我將產(chǎn)品置入在一個(gè)圓形

的里面，這樣放置在圖形內(nèi)有一種良好舒適的感覺(jué)。第三個(gè)部分是精選材料模

塊，這一部分的設(shè)計(jì)非常的簡(jiǎn)潔明了，連接了上個(gè)部分的背景，明顯的突出了

產(chǎn)品的優(yōu)勢(shì)，選擇了較好的原材料。這不僅可以激發(fā)顧客的購(gòu)買(mǎi)興趣，加深產(chǎn)

品記憶，還能夠促成顧客下單，提高商品的訂單轉(zhuǎn)化。第四部分是選擇我們的

原因，這一部分是非常重要的，在文案的設(shè)計(jì)上，精心的選擇了最吸引顧客的

文字，重點(diǎn)突出這款產(chǎn)品的鮮、香和味，且這款產(chǎn)品老少皆宜，保質(zhì)期長(zhǎng)，味

道鮮美。我將重點(diǎn)文字下面進(jìn)行了重點(diǎn)標(biāo)記的設(shè)計(jì)，吸引顧客的注意。圖形方

面我將圖形進(jìn)行了鏤空以及陰影的設(shè)計(jì)，讓圖片看起來(lái)更加有特色，不那么單

調(diào)，從而吸引顧客，讓顧客更清晰地了解這個(gè)產(chǎn)品。第五部分是美味的背后，

這個(gè)部分主要所講的是米旗品牌的榮譽(yù)與品質(zhì)，讓顧客更加相信與了解我們的

品牌與產(chǎn)品從而樹(shù)立信念感，激發(fā)顧客的消費(fèi)欲望。最后一個(gè)部分是買(mǎi)家須知，

這一部分我們給消費(fèi)者帶來(lái)的是品質(zhì)的保證與產(chǎn)品儲(chǔ)存的注意點(diǎn)，避免出現(xiàn)一

些不必要的售后問(wèn)題。而且這樣的設(shè)計(jì)可以宣傳品牌的企業(yè)文化，完成從流量

到有效流量的一個(gè)轉(zhuǎn)化?。ㄈ鐖D14所示）

17

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

3.3.2提拉米蘇盒子蛋糕設(shè)計(jì)效果

18

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

19

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

圖14提拉米蘇盒子蛋糕詳情頁(yè)效果圖

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

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

品牌登錄注冊(cè)頁(yè)面的設(shè)計(jì)是比較簡(jiǎn)潔明了的，最主要的功能是使顧客達(dá)到

進(jìn)入該品牌店鋪的目的，從而促進(jìn)店鋪的購(gòu)買(mǎi)率。首先我使用淡黃色作為主背

景，再使用橙黃色進(jìn)行背景的第二次疊加，最后使用白色作為字體的背景，讓

頁(yè)面看起來(lái)更加有層次感，這個(gè)頁(yè)面的創(chuàng)意設(shè)計(jì)我想的是中間一個(gè)面包房，面

包房的上下都有幾只手在給它材料，從而現(xiàn)象成制作的過(guò)程。文字的部分我是

放置在右半部分，主要是以登陸為主，注冊(cè)為輔，首先需要屬于用戶名以及密

20

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

碼驗(yàn)證碼進(jìn)行登陸，顧客也可以選擇記住密碼，萬(wàn)一忘記密碼也可以點(diǎn)擊忘記

密碼按鈕，進(jìn)行驗(yàn)證，如果是新用戶，可以點(diǎn)擊下方的藍(lán)色字體鏈接，進(jìn)行立

即注冊(cè)。這個(gè)頁(yè)面可以提高顧客的粘性，增加用戶對(duì)品牌店鋪的了解，而激發(fā)

顧客對(duì)產(chǎn)品的消費(fèi)欲望。（如圖15所示）

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

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

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

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

購(gòu)物車(chē)頁(yè)面的設(shè)計(jì)首先第一部分是內(nèi)容的最上面那部分，左半部分使用了

LOGO和購(gòu)物車(chē)標(biāo)題，右半部分是購(gòu)買(mǎi)商品所需要經(jīng)過(guò)的流程，正在經(jīng)歷的購(gòu)買(mǎi)

流程就會(huì)標(biāo)紅，給顧客提示，讓顧客清楚的知道自己所在的步驟。接下來(lái)就能

看到顧客所選擇加入到購(gòu)物車(chē)的商品以及產(chǎn)品相關(guān)的信息，這一部分也是最重

要的部分，色彩上面我選擇了與背景顏色相差較大的黑色作為字體的顏色，將

重要的按鈕以及商品價(jià)格都標(biāo)為顯眼的紅色。接下來(lái)顧客可以根據(jù)自己最后確

認(rèn)想要購(gòu)買(mǎi)的產(chǎn)品進(jìn)行勾選，進(jìn)行結(jié)算。最下面的一個(gè)部分是熱銷(xiāo)產(chǎn)品，將店

鋪內(nèi)銷(xiāo)量較高的產(chǎn)品圖片擺放在我的商品的下面，讓消費(fèi)者在準(zhǔn)備結(jié)算的時(shí)候

看到這個(gè)部分的產(chǎn)品。設(shè)計(jì)這個(gè)部分放在購(gòu)物車(chē)的尾部是為了吸引顧客的注意

力，從而激發(fā)顧客的消費(fèi)欲望，增加店鋪的銷(xiāo)量。（如圖16所示）

21

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

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

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

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

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

訂單結(jié)算頁(yè)的設(shè)計(jì)首先是色彩的設(shè)計(jì)，顏色上我還是使用了與其他頁(yè)面相

呼應(yīng)的黃色系作為主色調(diào)，給人一種溫暖有食欲的感覺(jué)，讓顧客看著也有一種

十分溫馨的氛圍。接下來(lái)就是文字與圖形的擺放，最上方的部分與購(gòu)物車(chē)頁(yè)面

的擺放是相同的，訂單頁(yè)面的上一部分就是購(gòu)物車(chē)頁(yè)面，所以進(jìn)行了相呼應(yīng)，

接下來(lái)的一部分就是收貨人信息，在這里顧客可以選擇需要寄到哪里去或者寄

給誰(shuí)，如果發(fā)現(xiàn)信息錯(cuò)誤也可以點(diǎn)擊編輯信息按鈕進(jìn)行更改，選擇哪個(gè)人的信

息就直接點(diǎn)擊哪個(gè)選框就行，還能新增收貨人的信息，支付方式也有多種任顧

客進(jìn)行選擇，看哪個(gè)更方便就可以點(diǎn)擊那種支付方式。配送服務(wù)也是同上，如

果顧客還有其他的要求也可以在訂單備注的文本框里進(jìn)行信息的備注。下一個(gè)

模塊是商品清單模塊，這一模塊是顧客在購(gòu)物車(chē)模塊時(shí)選擇的商品就能在這里

顯示出來(lái)，而且在這里顧客還有一次選擇的機(jī)會(huì)，如果發(fā)現(xiàn)有突然不想要的也

可以將框框中的勾取消掉，從而放棄購(gòu)買(mǎi)這款產(chǎn)品。下面還會(huì)給顧客顯示有哪

22

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

些店鋪的優(yōu)惠，如果顧客需要開(kāi)電子發(fā)票也可以進(jìn)行勾選，接下來(lái)就是確定產(chǎn)

品的價(jià)格以及收貨人信息，確認(rèn)好之后就可以點(diǎn)擊確認(rèn)支付按鈕，支付金額隨

后完成訂單。這樣的設(shè)計(jì)可以更好的給顧客帶來(lái)方便。（如圖17所示）

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

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

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

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

個(gè)人中心頁(yè)面的設(shè)計(jì)在最上方的位置，顧客可以點(diǎn)擊首頁(yè)的文字鏈接跳轉(zhuǎn)

到首頁(yè)，接下來(lái)就是可以看到顧客的一些基本信息，頭像、用戶名、電話等等，

這些信息也可以點(diǎn)擊進(jìn)行修改，個(gè)人信息的下方有一個(gè)會(huì)員機(jī)制，可以看到現(xiàn)

在是會(huì)員幾級(jí)，這個(gè)模塊的右側(cè)是會(huì)員可以專(zhuān)享的一些特權(quán)。這個(gè)模塊的背景

顏色我使用了橙黃色，且還在背景里置入了一個(gè)可愛(ài)的VIP圖