白沙溪品牌網(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ì)方案............................................................................2

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

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

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

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

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

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ì)效果.............................................................................................14

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

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

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

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

參考資料............................................................23

II

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

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

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

1.1項(xiàng)目背景

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)上購(gòu)物已經(jīng)成為我們?nèi)粘Ｉ钪幸环N新的購(gòu)物模式。

在日常生活中，消費(fèi)者越來(lái)越接受網(wǎng)購(gòu)作為一種購(gòu)物方式，網(wǎng)購(gòu)市場(chǎng)不斷發(fā)展，

購(gòu)物網(wǎng)站也在增加，競(jìng)爭(zhēng)也越來(lái)越激烈，在網(wǎng)上開(kāi)店的商家數(shù)量也在增加。如

何將你的網(wǎng)店從攤位的狀態(tài)升級(jí)為精品店的高端店態(tài)，必須提升店鋪的形象，

只有讓店鋪的形象深入人心，顧客在購(gòu)物時(shí)就會(huì)被吸引，產(chǎn)生購(gòu)買(mǎi)欲望，從而

實(shí)現(xiàn)更大的銷量。因此，網(wǎng)店的視覺(jué)設(shè)計(jì)作為提升網(wǎng)店形象的重要組成部分變

得越來(lái)越重要。

白沙溪品牌作為一個(gè)傳承數(shù)十年的老品牌擁有自己的官網(wǎng)，官網(wǎng)功能齊全，

可以給消費(fèi)者提供很好的品牌介紹服務(wù)，同樣也擁有自己獨(dú)立的天貓京東旗艦

店。

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

我選擇白沙溪作為網(wǎng)店視覺(jué)方案設(shè)計(jì)品牌，白沙溪茶廠創(chuàng)立于1939年，至

今有83年歷史，并且白沙溪黑茶進(jìn)入了“2010年上海世博會(huì)”聯(lián)合國(guó)館，被譽(yù)

為“一個(gè)地球、一個(gè)聯(lián)合國(guó)、一杯中國(guó)茶”，還創(chuàng)立了湖南黑茶的國(guó)家標(biāo)準(zhǔn)。在

網(wǎng)店視覺(jué)設(shè)計(jì)上，我將品牌背景與企業(yè)文化相結(jié)合，讓消費(fèi)者感受到白沙溪品

牌產(chǎn)品服務(wù)的高質(zhì)量。在排版方面，我使用簡(jiǎn)單而大氣的布局，在顏色上，我

選擇了低調(diào)復(fù)古的白灰色搭配咖啡色，可以更好地提升品牌形象。經(jīng)過(guò)這些年

的醫(yī)學(xué)專家實(shí)驗(yàn)，發(fā)現(xiàn)黑茶有很好的脫脂、降三高、促進(jìn)消化的功能，所以我

在網(wǎng)店廣告的設(shè)計(jì)中結(jié)合這些功能，更好地穩(wěn)定消費(fèi)群體，也收獲更多的潛在

客戶，提高品牌知名度。

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

通過(guò)對(duì)白沙溪品牌和產(chǎn)品定位的分析，最終選擇了白灰色為主色調(diào)，白灰

色代表沉穩(wěn)、優(yōu)雅、謙遜，能更好地推廣品牌理念;同時(shí)，使用咖啡色作為輔助

色可以與主色調(diào)形成對(duì)比，“一暗一亮”給人強(qiáng)烈的視覺(jué)沖擊感，可以吸引消

1

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

費(fèi)者的注意力，更好地記住店鋪。（如圖1所示）

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

1.4字體規(guī)范

在字體上我選擇了adobe黑體std和黑體，這兩種字體都筆畫(huà)粗壯帶有纖

細(xì)筆觸，給人一種嚴(yán)肅的感覺(jué)可以讓消費(fèi)者更加直觀的了解店鋪信息和產(chǎn)品信

息。（如圖2所示）

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

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

2.1首頁(yè)

我的首頁(yè)版面分為：店招、導(dǎo)航欄、二級(jí)導(dǎo)航、banner、店長(zhǎng)推薦、熱銷

爆款、品牌故事、底部導(dǎo)航八個(gè)區(qū)塊。整個(gè)版面簡(jiǎn)潔明了、功能齊全。

店招中白沙溪的logo有1939的標(biāo)志，標(biāo)志著其創(chuàng)建時(shí)間更體現(xiàn)出其品牌

悠久的歷史。其次廣告語(yǔ)“黑茶之源，遍留九州”不但表達(dá)了對(duì)品牌的自信也

是白沙溪傳承古典的決心。右邊是購(gòu)物車、個(gè)人中心圖標(biāo)和搜索欄可以讓消費(fèi)

者更快的買(mǎi)到自己心儀的產(chǎn)品。

接下來(lái)是店長(zhǎng)推薦板塊，我采用的是左右交叉布局，使整體布局不至于太

死板。然后就是熱銷爆款板塊，我把四款爆款產(chǎn)品放一塊形成視覺(jué)沖擊，吸引

消費(fèi)者眼球，更能刺激消費(fèi)者的購(gòu)買(mǎi)欲望。接著是品牌故事板塊，可以使消費(fèi)

者更了解品牌的由來(lái)和初心，更能說(shuō)服消費(fèi)者購(gòu)買(mǎi)。最下面的底部導(dǎo)航我還設(shè)

置了一個(gè)可以讓消費(fèi)者快速返回頂部的按鈕，底部導(dǎo)航欄可以方便消費(fèi)者遇到

2

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

購(gòu)物困難時(shí)進(jìn)行咨詢（如圖3所示）

圖3首頁(yè)原型圖

3

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

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

我的搜索結(jié)果頁(yè)分為：店招、導(dǎo)航欄、搜索區(qū)域、搜索結(jié)果區(qū)域、底部導(dǎo)

航五個(gè)區(qū)塊，搜索區(qū)域的關(guān)鍵詞可以讓消費(fèi)者更快的購(gòu)買(mǎi)自己需要的“寶貝”

節(jié)約購(gòu)物時(shí)間，提高消費(fèi)者購(gòu)物體驗(yàn)。（如圖4所示）

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

4

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

2.3商品詳情頁(yè)

我的商品詳情頁(yè)分為：店招、導(dǎo)航欄、產(chǎn)品介紹區(qū)域、產(chǎn)品信息、產(chǎn)品賣(mài)

點(diǎn)、產(chǎn)品特點(diǎn)、底部導(dǎo)航七個(gè)區(qū)塊。詳情頁(yè)的作用是可以讓客戶更好的了解產(chǎn)

品的特點(diǎn)，更好的展示產(chǎn)品的價(jià)值促進(jìn)客戶下單，也可以通過(guò)產(chǎn)品參數(shù)了解看

是否適合自己（如圖5所示）

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

5

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

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

為了更加方便消費(fèi)者操作我把登錄和注冊(cè)放在一個(gè)頁(yè)面，這樣就不用跳轉(zhuǎn)

其他頁(yè)面操作減少視覺(jué)疲勞，同時(shí)我也加入了一個(gè)廣告，可以使整個(gè)頁(yè)面沒(méi)有

那么枯燥無(wú)味更有色彩，還可以強(qiáng)調(diào)品牌形象以及推銷產(chǎn)品。（如圖6所示）

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

2.5購(gòu)物車

購(gòu)物車原型圖分為：店招，導(dǎo)航欄，購(gòu)物車，猜你喜歡，底部導(dǎo)航五個(gè)區(qū)

塊。同時(shí)我還在購(gòu)物車導(dǎo)航制作了全選、商品圖片、規(guī)格、單價(jià)、數(shù)量、總價(jià)、

操作的標(biāo)志，這樣客戶可以通過(guò)勾選來(lái)選擇購(gòu)買(mǎi)心儀的產(chǎn)品，同時(shí)也可以增減

6

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

購(gòu)買(mǎi)產(chǎn)品數(shù)量，如果不想要了也可以選擇移除購(gòu)物車。在購(gòu)物車的下方我還設(shè)

置了猜你喜歡，可以推銷熱銷產(chǎn)品，同時(shí)促進(jìn)客戶二次購(gòu)買(mǎi)，整體頁(yè)面布局清

晰整潔（如圖7所示）

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

7

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

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

通過(guò)了購(gòu)物車結(jié)算我們就進(jìn)入了訂單頁(yè)，訂單頁(yè)包括店招、導(dǎo)航欄、收貨

地址、商品信息、底部導(dǎo)航五個(gè)區(qū)塊。我把運(yùn)行費(fèi)、運(yùn)輸方式、優(yōu)惠、發(fā)票放

在一塊可以讓消費(fèi)者一目了然更快的確認(rèn)商品信息，從而快速支付購(gòu)買(mǎi)。（如圖

8所示）

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

8

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

2.7個(gè)人中心

個(gè)人中心原型圖分為：店招、導(dǎo)航欄、用戶信息、會(huì)員等級(jí)、積分兌換、

底部導(dǎo)航六個(gè)區(qū)塊。整體布局我是從上往下的先是用戶資料，然后點(diǎn)擊會(huì)員中

心就顯示會(huì)員等級(jí)、積分兌換。整個(gè)界面條理清晰版面整潔，可以讓客戶快速

了解會(huì)員權(quán)益。（如圖9所示）

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

9

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

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

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

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

首頁(yè)作為整個(gè)網(wǎng)店的門(mén)面，其作用是為了讓消費(fèi)者留下來(lái)了解產(chǎn)品，同時(shí)

他也體現(xiàn)品牌的形象和品牌的理念。我將首頁(yè)的布局分為：店招、導(dǎo)航欄、banner、

店長(zhǎng)推薦、熱銷爆款、品牌故事、底部導(dǎo)航。整體布局簡(jiǎn)約大氣。整體顏色我

選擇灰白色和咖啡色為主，給人一種清新淡雅的感覺(jué)，同時(shí)也有一種歲月積累

的成熟，讓人看一眼就不能忘記，在一些特別需要注意的地方我采用了醒目的

紅色字體。

店招就是網(wǎng)店的招牌，一個(gè)好的店招決定了消費(fèi)者的第一印象。在店招的

左側(cè)我放置了白沙溪logo的標(biāo)志，讓消費(fèi)者了解我們的網(wǎng)店的標(biāo)志和名字；還

有一個(gè)關(guān)注的按鈕挨著，這樣可以讓對(duì)店鋪感興趣的消費(fèi)者第一時(shí)間關(guān)注防止

下次找不到店鋪，同時(shí)也可以后期推送營(yíng)銷活動(dòng)。在logo的旁邊放置了品牌的

廣告：黑茶之源，遍留九州；彰顯出品牌強(qiáng)大的自信，以及品牌的偉大目標(biāo)，

也標(biāo)志著品牌傳承古法制茶的決心。接著是個(gè)人中心和購(gòu)物車的圖標(biāo)，可以方

便消費(fèi)者快速查看購(gòu)物清單和進(jìn)入個(gè)人中心。最后是搜索框，消費(fèi)者可以根據(jù)

自己的喜好快速搜索自己想要的產(chǎn)品。消費(fèi)者想要更多了解品牌僅僅靠店招是

不夠的，此時(shí)導(dǎo)航欄的作用就出來(lái)了，我把導(dǎo)航欄分為首頁(yè)、所有茶葉、陳年

茶葉、湘尖、千兩花卷、VIP會(huì)員福利、品牌故事、登錄/注冊(cè)；消費(fèi)者想要了

解什么就可以直接點(diǎn)擊跳轉(zhuǎn)到相對(duì)應(yīng)的頁(yè)面。

接下來(lái)是輪播banner，第一張是品牌節(jié)日活動(dòng)banner，我選擇的節(jié)日是端

午節(jié)，因?yàn)楹诓璧牟烧獣r(shí)間在六月左右也恰巧是端午節(jié)，這樣就可以以黑茶上

新來(lái)做活動(dòng)。為了更好地宣傳品牌的名氣，營(yíng)造節(jié)日氣氛，我在白沙溪端午節(jié)

海報(bào)用綠色的粽葉、粽子、小船來(lái)裝飾設(shè)計(jì)，主題文字我也用綠色來(lái)呼應(yīng)節(jié)日。

整體布局為：文案在左邊，產(chǎn)品在右邊，主題文字清晰，優(yōu)惠信息也用其他顏

色框起來(lái)，突出活動(dòng)主題。（如圖10所示）

10

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

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

第二張爆品促銷banner，在爆品促銷banner中的產(chǎn)品一般都是銷量最高的

最具有代表性的，我選擇的這款黑磚茶始于品牌建立時(shí)間1939年的經(jīng)典配方與

古法非遺茶技，同時(shí)自身銷量也是靠前的。這張爆品促銷banner以白灰色為背

景給人一種超凡脫俗，仙氣飄飄的感覺(jué)。我添加了若隱若現(xiàn)的山巒、祥云和樹(shù)

木裝飾，也突出了品牌深厚的歷史底蘊(yùn)。在排版上，我用左右排版，在文案上，

我強(qiáng)調(diào)老樹(shù)黑茶，古老的制作方法也是為了契合主題。折扣力度是爆款產(chǎn)品促

銷橫幅的重點(diǎn)，我以紅色為基底，用白色字體強(qiáng)調(diào)折扣力度，吸引消費(fèi)者的眼

球。

（如圖11所示）

圖11品牌爆品促銷banner

Banner完成之后就是產(chǎn)品的展示，產(chǎn)品展示分為店長(zhǎng)推薦、熱銷爆款，店

長(zhǎng)推薦設(shè)計(jì)中我選的兩款產(chǎn)品排版為上下排版分別是左圖右文、左文右圖，形

成交叉分布使得整體布局與眾不同而不失規(guī)矩，使得消費(fèi)者產(chǎn)生濃厚的繼續(xù)看

下去的興趣。熱銷爆款我選了店鋪銷量最好的四款產(chǎn)品四宮格緊湊分布與店長(zhǎng)

推薦交叉寬松分布形成一種反差感使得整體布局差異化不單調(diào)，更好區(qū)別于其

他店鋪，給消費(fèi)者一種煥然一新的感覺(jué)讓消費(fèi)者更加記憶猶新。

11

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

產(chǎn)品展示完成之后就是品牌故事介紹，我選擇了咖啡色為底色，這樣可以

和背景色形成對(duì)比給人一種強(qiáng)烈的視覺(jué)沖擊，可以讓消費(fèi)者更好的了解白沙溪

的品牌故事和發(fā)展理念。

底部導(dǎo)航包括品牌logo、茶葉種類、和一個(gè)返回頂部的按鍵、購(gòu)物售后服

務(wù)、購(gòu)物咨詢服務(wù)。消費(fèi)者想要了解直接點(diǎn)擊就可以進(jìn)入相應(yīng)的界面。整個(gè)首

頁(yè)設(shè)計(jì)布局簡(jiǎn)約，讓人一目了然。（如圖12所示）

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

12

湖南商務(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ì)了店招、導(dǎo)航欄、搜索欄、搜索導(dǎo)航、搜索結(jié)果、

底部導(dǎo)航六個(gè)區(qū)塊。搜索框設(shè)計(jì)在界面的左上方，搜索框里會(huì)出現(xiàn)本店鋪的爆

款，然后顧客點(diǎn)擊搜索，直接更快的了解本店鋪的特色產(chǎn)品。搜索導(dǎo)航設(shè)計(jì)在

搜索框的下面，讓消費(fèi)者更快的了解店鋪的經(jīng)營(yíng)內(nèi)容，更快的找到自己需要的

產(chǎn)品。搜索結(jié)果設(shè)計(jì)在界面居中的位置在搜索框和搜索導(dǎo)航的正下方，使顧客

搜索出來(lái)的產(chǎn)品在醒目的位置，供消費(fèi)者方便了解。（如圖13所示）

13

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

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

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

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

3.3.1天茯茶設(shè)計(jì)思路

我選擇天茯茶做詳情頁(yè)的展示產(chǎn)品。詳情頁(yè)我分成：購(gòu)買(mǎi)區(qū)、產(chǎn)品參數(shù)、

產(chǎn)品主圖、產(chǎn)品信息、制茶工藝、產(chǎn)品展示。在購(gòu)買(mǎi)區(qū)我用白色作為底色，和

背景色形成色差，這樣可以更好的區(qū)別其他區(qū)域，排版更讓消費(fèi)者舒適。然后

就是產(chǎn)品的詳細(xì)生產(chǎn)數(shù)據(jù)：生產(chǎn)日期、保質(zhì)期、產(chǎn)地、凈含量等。產(chǎn)品主圖我

用紅色作為底色與背景色形成對(duì)比，天茯茶產(chǎn)品在圖片正中位置，右上角用白

色字體寫(xiě)出了茯磚茶研發(fā)的時(shí)間，同時(shí)也有其他兩款茶的研發(fā)時(shí)間并用線按時(shí)

間連接。接著是制茶工藝的展示、湯色的展示，最后是產(chǎn)品實(shí)物細(xì)節(jié)的展示。

14

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

（如圖14所示）

3.3.2天茯茶設(shè)計(jì)效果

15

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

圖14天茯茶詳情頁(yè)效果圖

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

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

登錄注冊(cè)頁(yè)我把登錄和注冊(cè)用線從中間隔開(kāi)放在同一個(gè)頁(yè)面，這樣消費(fèi)者

就可以在同一頁(yè)面登錄或者注冊(cè)更加便捷。背景還是白灰色我還加入了一些若

隱若現(xiàn)的山使得整個(gè)頁(yè)面不那么單調(diào)。同時(shí)我還在上面插入了一條廣告，廣告

中：始于1939、非遺茶技等文案宣傳了白沙溪茶的悠久歷史和古典傳承，在加

16

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

入一些山、梅花、綠葉等點(diǎn)綴使整體畫(huà)面更加富有美感。人人都喜歡美的東西，

愛(ài)美之心人皆有之，這樣就可以激發(fā)消費(fèi)者的強(qiáng)烈的購(gòu)買(mǎi)欲望。（如圖15所示）

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

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

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

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

在購(gòu)物車設(shè)計(jì)上我采用簡(jiǎn)潔明了的方法，給消費(fèi)者最直觀的視覺(jué)感受，這

樣可以讓消費(fèi)者覺(jué)得沒(méi)那么多套路，讓消費(fèi)者下單的時(shí)候沒(méi)那么多心理顧慮。

購(gòu)物車內(nèi)容包括商品、規(guī)格、單價(jià)、數(shù)量、總價(jià)、操作。在合計(jì)和店鋪活動(dòng)的

17

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

字體上我采用紅色這樣可以讓消費(fèi)者清楚的看到優(yōu)惠之后的金額，感受到店鋪

優(yōu)惠活動(dòng)的力度大。購(gòu)物車下面是猜你喜歡設(shè)計(jì)，可以讓消費(fèi)者在猶豫是否購(gòu)

買(mǎi)購(gòu)物車商品時(shí)有更多的選擇。（如圖16所示）

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

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

18

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

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

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

在訂單結(jié)算頁(yè)上我選擇和購(gòu)物車設(shè)計(jì)一樣采用簡(jiǎn)潔明了的方法，給消費(fèi)者

最直觀的視覺(jué)感受。先是選擇收貨地址，然后確認(rèn)商品信息，最后提交訂單。

在確認(rèn)商品信息中用細(xì)線隔開(kāi)，在視覺(jué)上更有層次感，同時(shí)有勾選的標(biāo)記來(lái)提

醒消費(fèi)者選擇的選項(xiàng)，避免誤買(mǎi)。最后優(yōu)惠和總計(jì)用紅色字體提醒消費(fèi)者是否

確認(rèn)購(gòu)買(mǎi)，是否誤買(mǎi)。（如圖17所示）

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

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

19

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

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

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

個(gè)人中心頁(yè)設(shè)計(jì)包括：用戶信息資料、個(gè)人中心導(dǎo)航欄、會(huì)員等級(jí)、積分

兌換、積分獲取。在店招導(dǎo)航欄下面的用戶信息中消費(fèi)者可以點(diǎn)擊編輯信息更

換自己的昵稱和頭像，還可以看到自己積分?jǐn)?shù)據(jù)。在會(huì)員等級(jí)、積分兌換、積

分獲取內(nèi)容中都標(biāo)志了相應(yīng)的規(guī)則，可以讓消費(fèi)者體驗(yàn)到會(huì)員帶來(lái)的福利，從

而可以讓消費(fèi)