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

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

目錄

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

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

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

1.3色彩設(shè)計......................................................................................................2

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

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

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

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

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

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

2.5購物車..........................................................................................................8

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

2.7個人中心....................................................................................................10

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

3.1首頁視覺設(shè)計與制作................................................................................11

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

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

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

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

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

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

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

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

3.4登錄注冊頁視覺設(shè)計與制作....................................................................20

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

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

I

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

3.5購物車視覺設(shè)計與制作............................................................................21

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

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

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

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

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

3.7個人中心視覺設(shè)計與制作........................................................................23

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

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

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

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

II

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

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

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

1.1項目背景

隨著電商行業(yè)的快速發(fā)展與進行，網(wǎng)購逐漸成了人們在日常生活中必不可

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

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

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

淘寶、天貓、京東上的客戶。而且烘焙品牌競爭也比較激烈，隨著好利來品牌

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

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

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

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

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

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

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

1.2項目需求分析

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

己的獨立網(wǎng)店，所以為了提高銷量，增加消費者對該品牌的了解，需要建立一

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

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

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

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

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

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

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

全、健康、綠色這些方面的原材料進行宣傳，讓更多的消費者知道我們的品牌，

并且可以根據(jù)消費者的喜愛來進行設(shè)計產(chǎn)品的樣式，從而吸引消費者進行購買。

米旗需要對自己以及競爭對手的產(chǎn)品都要有清晰的認知與了解，要為自己的產(chǎn)

1

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

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

高產(chǎn)品的銷量。對于競爭對手來說，可以對競爭對手進行分析，學(xué)習(xí)他們做的

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

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

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

1.3色彩設(shè)計

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

占60%、輔助色占30%、點綴色占10%，第一眼就吸引了顧客興趣，給顧客帶來

舒適的感覺。

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

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

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

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

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

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

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

站的點綴色。因為它的顏色對比較強烈，視覺效果會比較好。紅色給人也會帶

來非常明艷的感覺，而白色就給本來色彩濃烈的顏色加入了一種緩和的顏色，

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

綴的這兩種顏色與橙色、黃色色差較大，所以對比起來就非常強烈。（如圖1

所示）

圖1標準色

2

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

1.4字體規(guī)范

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

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

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

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

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

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

圖2標準字體

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

2.1首頁

首頁的最上面就是店招部分，中間用了品牌標語，使顧客一眼就能注意到

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

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

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

顧客更加仔細的了解到該品牌的一些特點。第三部分就是介紹米旗這個品牌，

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

解更多的鏈接，點進去里面會有更加詳細的介紹，這一部分我也是進行了對齊

3

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

的板式，因為我認為對齊可以給顧客帶來比較方便且舒適的視覺效果。第四部

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

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

一部分有可以直接點擊就能立即購買的功能，如果不想購買還需要考慮的也幫

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

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

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

4

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

圖3首頁原型圖

2.2搜索結(jié)果頁

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

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

暖的感覺。接下來就是產(chǎn)品的分類，按照類型、口味和價格對產(chǎn)品進行的仔細

點分類，為顧客在購買的時候更加方便就能搜索查詢到自己想要的商品。在視

覺方面也給顧客帶來了便利。不用一個一個去找，而是直接篩選到自己想要購

買的商品。再下面就是產(chǎn)品圖，每個產(chǎn)品圖的下面都標有產(chǎn)品名稱、價格和立

即購買的按鈕，顧客進行篩選后看到了自己想購買的商品就可以直接點擊立即

購買的按鈕，系統(tǒng)就給它進行下一步指示。最后一個部分有我們店鋪的二維碼，

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

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

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

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

5

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

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

2.3商品詳情頁

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

的信息、控制加購商品的數(shù)量、將商品加入購物車或者直接購買商品。這個模

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

產(chǎn)品，給產(chǎn)品做推廣最后將產(chǎn)品賣出提高產(chǎn)品銷量。接下來的一個功能模塊就

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

詢所不清楚不了解的問題，這里都能幫客戶解決。用戶點擊收藏圖標后可以在

店鋪有新活動的時候第一時間通知客戶，以提高品牌的購買率。接下來的一個

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

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

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

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

6

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

圖5商品詳情頁原型圖

2.4登錄注冊頁

登錄注冊頁的最主要的功能模塊就只有一個，因為登錄注冊的主要目的是

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

顧客的登陸和注冊的功能，用戶進入APP的時候并不會提示登錄或是注冊，只

有當用戶使用到某些功能時才會提示登錄或注冊，當然用戶也可以選擇在這里

7

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

進行登錄或注冊。給客戶帶來更好的網(wǎng)站體驗，在不記得密碼的情況下有個忘

記密碼的圖標，點擊進去可以讓顧客進行驗證從而找回密碼。這個頁面我采用

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

所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車頁的第一個功能模塊就是在購物車這里能看到客戶瀏覽時喜歡的已

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

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

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

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

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

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

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

8

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

圖7購物車原型圖

2.6訂單結(jié)算頁

購物車頁的第一個功能模塊就是查看收貨人的信息，顧客可以非常方便的

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

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

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

注那一欄進行備注，對消費者來說非常的方便。再下一個功能模塊就是商品清

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

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

模塊就是進行支付或者返回到購物車頁面，可以看到商品的總額，最后確定后

進行支付，隨后就形成訂單，購買完成。給顧客帶來了非常方便的購買流程，

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

中軸型的版式設(shè)計，這樣的設(shè)計可以給顧客帶來強烈的動感，提高顧客的購買

欲望。（如圖8所示）

9

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

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

2.7個人中心

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

店鋪采取了會員制，采用會員制是公司為了正真去讓顧客忠誠于品牌，做到品

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

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

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

鋪消費多少從而就能達到這個等級，等級越高權(quán)益越多越劃算，而且能夠更好

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

分割方法，給顧客帶來嚴謹且和諧的美感，提升了顧客的體驗感。（如圖9所

示）

10

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

圖9個人中心原型圖

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

3.1首頁視覺設(shè)計與制作

3.1.1設(shè)計思路

這張品牌節(jié)日活動類的Banner我做的主題節(jié)日是中秋節(jié)，在店鋪的產(chǎn)品中

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

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

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

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

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

一個優(yōu)惠折扣，說明了米旗品牌的折扣非常大，加大顧客對月餅進行購買的欲

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

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

11

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

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

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

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

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

從而吸引顧客點擊banner查看詳情，增加顧客的消費欲望。（如圖10所示）

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

這張品牌爆品促銷類的Banner的主題是宣傳品牌的這款爆品從而吸引用

戶點擊，因為是穿插在頁面中的廣告，所以非常的重要。海報內(nèi)我將產(chǎn)品信息

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

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

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

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

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

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

看起來就讓人很有食欲，也給人看起來就比較溫暖的感覺，讓banner看起來也

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

進行點擊查看。圖形的設(shè)計主要是使用鋼筆將圖形畫成奶油從上面留下來的感

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

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

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

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

12

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

圖11品牌爆品促銷banner

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

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

愛生活，所以想到首頁的色彩方面采用單純簡單濃烈的色系“黃色系”，以米

白色、紅色和橙色作為點綴，給人以活潑的感覺。首頁的第一個部分就是店招

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

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

的廣告語，右上方擺放著登陸、注冊、收藏、個人中心和購物車這些功能在它

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

語選擇的顏色沒有用那些花里胡哨的顏色，使用了簡約的黑色，底色采用了與

他對比強烈的黃色，更加的突出了廣告語，顧客看店招最先看到的也一定就是

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

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

加消費者的購買欲望。第三個部分是關(guān)于米旗，我先對標題進行了設(shè)計，將文

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

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

行擺放，將裝飾圖形完成。標題的顏色是采用了點綴的紅色，因為紅色非常容

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

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

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

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

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

面對于米旗品牌還有更加具體的介紹。第四個部分就是新品上市，對于標題來

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

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

的興趣，從而提高消費者的購買欲望。第五個部分就是熱銷產(chǎn)品，顏色的設(shè)計

我使用了與背景有對比的同色系橙色，讓顧客看起來感到非常溫暖，這個模塊

13

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

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

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

按鈕，是用一個面包承載著文字，看上去非常的可愛，吸引顧客。接下來就是

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

號等等，這些都是給顧客一個保證，并且可以增加店鋪的購買率。（如圖12所

示）

3.1.2設(shè)計效果

14

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

圖12首頁效果圖

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

3.2.1設(shè)計思路

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

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

題，可以通過提示有效的防止有問題的搜索。接下來就是所有的分類，可以將

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

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

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

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

商品的標題，商品價格和立即購買按鈕的色彩設(shè)計采用了紅色，因為這能更加

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

15

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

3.2.2設(shè)計效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16

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

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

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

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

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

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

理，將上面部分只寫上寥寥幾個字和一句話時，放置蛋糕處便是焦點區(qū)，它能

把買家的視覺集中到這一處顯眼的地方。可以在藝術(shù)創(chuàng)作中使全部作品畫面、

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

塊的設(shè)計首先是標題的設(shè)計，沒有設(shè)計那種花里胡哨的感覺，以整潔簡單為主

題，是顧客看著的視覺效果非常舒適。主標題下面寫了小標題，詮釋這部分的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17

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

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

18

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

19

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

圖14提拉米蘇盒子蛋糕詳情頁效果圖

3.4登錄注冊頁視覺設(shè)計與制作

3.4.1設(shè)計思路

品牌登錄注冊頁面的設(shè)計是比較簡潔明了的，最主要的功能是使顧客達到

進入該品牌店鋪的目的，從而促進店鋪的購買率。首先我使用淡黃色作為主背

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

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

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

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

20

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

碼驗證碼進行登陸，顧客也可以選擇記住密碼，萬一忘記密碼也可以點擊忘記

密碼按鈕，進行驗證，如果是新用戶，可以點擊下方的藍色字體鏈接，進行立

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

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

3.4.2設(shè)計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設(shè)計與制作

3.5.1設(shè)計思路

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

LOGO和購物車標題，右半部分是購買商品所需要經(jīng)過的流程，正在經(jīng)歷的購買

流程就會標紅，給顧客提示，讓顧客清楚的知道自己所在的步驟。接下來就能

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

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

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

認想要購買的產(chǎn)品進行勾選，進行結(jié)算。最下面的一個部分是熱銷產(chǎn)品，將店

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

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

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

21

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

3.5.2設(shè)計效果

圖16購物車效果圖

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

3.6.1設(shè)計思路

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

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

十分溫馨的氛圍。接下來就是文字與圖形的擺放，最上方的部分與購物車頁面

的擺放是相同的，訂單頁面的上一部分就是購物車頁面，所以進行了相呼應(yīng)，

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

給誰，如果發(fā)現(xiàn)信息錯誤也可以點擊編輯信息按鈕進行更改，選擇哪個人的信

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

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

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

模塊是商品清單模塊，這一模塊是顧客在購物車模塊時選擇的商品就能在這里

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

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

22

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

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

品的價格以及收貨人信息，確認好之后就可以點擊確認支付按鈕，支付金額隨

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

3.6.2設(shè)計效果

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

3.7個人中心視覺設(shè)計與制作

3.7.1設(shè)計思路

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

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

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

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

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