益益品牌網(wǎng)店視覺方案設(shè)計(jì)

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

目錄

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

1.1項(xiàng)目背景......................................................................................................1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

參考資料............................................................24

II

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

益益品牌網(wǎng)店視覺方案設(shè)計(jì)

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

1.1項(xiàng)目背景

在近幾年，計(jì)算機(jī)的全面普及，電商也隨著快速的發(fā)展，越來越多的品牌

擁有線下店鋪，為了打造品牌知名度和普遍性，都相繼建立了獨(dú)立的線上運(yùn)營

的網(wǎng)店，來提升自己的競(jìng)爭優(yōu)勢(shì)。如惠氏、飛鶴、伊利等，利用自身的品牌知

名度的優(yōu)勢(shì)，建立線上運(yùn)營網(wǎng)店增加了其銷售成交數(shù)量，同時(shí)還通過淘寶、天

貓、京東等來銷售產(chǎn)品，擴(kuò)大了自身的品牌優(yōu)勢(shì)。

益益品牌知名度并不是很高，但在營銷管理方面，已經(jīng)鍛煉出一支綜合素

質(zhì)較高的營銷隊(duì)伍，形成了以安徽市場(chǎng)為主，周邊市場(chǎng)為輔的有重點(diǎn)、多層次、

全方位的銷售體系。為消費(fèi)者提供更優(yōu)質(zhì)、更全面的服務(wù)的能力迅速提高。在

品牌建設(shè)方面，堅(jiān)持“品質(zhì)益益，品味生活”這一品牌主張，堅(jiān)持不懈地提升

品牌知名度和美譽(yù)度，堅(jiān)持品質(zhì)領(lǐng)先的理念，打造區(qū)域性強(qiáng)勢(shì)品牌，建立了自

身獨(dú)立品牌網(wǎng)店，但是只能依靠天貓、拼多多、小紅書等渠道來進(jìn)行銷售，企

業(yè)獨(dú)立網(wǎng)店并沒有直接購買。

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

隨著電商的快速發(fā)展，各個(gè)行業(yè)的不斷競(jìng)爭，人們的生活水平和審美要求

也有一定的提高，益益相對(duì)于惠氏、伊利、飛鶴等來說，并沒有其品牌的知名

度，其網(wǎng)店也沒有其顯著的優(yōu)勢(shì)。相比之下，消費(fèi)者更多的會(huì)選擇他們。所以

益益品牌的網(wǎng)店需要進(jìn)一步的設(shè)計(jì)，整合益益品牌及市場(chǎng)資源。通過資源整合，

明確品牌定位，建立視覺形象，再通過產(chǎn)品、通路的創(chuàng)新和市場(chǎng)推廣的動(dòng)作，

使其形象生動(dòng)化、活起來，從而提升品牌價(jià)值，增強(qiáng)益益品牌競(jìng)爭力，拉動(dòng)產(chǎn)

品銷售。

奶粉的購買人群，女性居多，且年齡在青年和中年，設(shè)計(jì)風(fēng)格要偏向可愛，

但不能幼稚;現(xiàn)在生活水平和審美能力的提升，更好的貼切產(chǎn)品，能增加購買欲

望。把整個(gè)網(wǎng)店設(shè)計(jì)的顏色以藍(lán)色為主，給消費(fèi)者看到的第一眼就可以感受到

產(chǎn)品的干凈，天然，除了帶給消費(fèi)者生理上的滿足外，更多的是情感上的認(rèn)同，

是品質(zhì)、活力的象征?？梢晕M(fèi)者，引起消費(fèi)者的好感。頁面中增加一些

1

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

可愛的元素，就可以讓消費(fèi)者聯(lián)想到自己給購買的對(duì)象，增加一些快捷按鈕，

來方便其購買，提升消費(fèi)者的好感度，適當(dāng)?shù)拇黉N活動(dòng)，來進(jìn)一步的提升消費(fèi)

者的購買欲望。

建立一個(gè)體現(xiàn)品牌文化的網(wǎng)店，能給品牌帶來優(yōu)勢(shì)和核心競(jìng)爭力，給消費(fèi)

者提供品牌信息，產(chǎn)品信息，品質(zhì)保障，讓其放心購買，增加品牌的知名度，

可識(shí)別度，可信賴度，通過網(wǎng)店吸引更多的消費(fèi)者，進(jìn)行購買，從而傳播產(chǎn)品

達(dá)到擴(kuò)大品牌知名度的效果，更有效的提升產(chǎn)品的競(jìng)爭優(yōu)勢(shì)。

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

網(wǎng)店的主顏色選擇明亮的藍(lán)色，可以使網(wǎng)店干凈而簡潔，給人莊重、充實(shí)

的印象。高彩色的藍(lán)色作為輔助色會(huì)營造出一種整潔輕快的感覺。選擇紅色作

為點(diǎn)綴色，紅色是強(qiáng)有力、喜慶的色彩，具有刺激效果，容易使人產(chǎn)生沖動(dòng)，

是一種雄壯的精神體現(xiàn)，給人熱情、有活力的感覺。大多數(shù)情況下紅色都用于

突出顏色，因?yàn)轷r明的紅色極容易吸引人們的目光。用明亮的藍(lán)色作為主要的

顏色來襯托整個(gè)網(wǎng)店，用高彩色的藍(lán)色輔助來進(jìn)行對(duì)比，在利用點(diǎn)綴色突出網(wǎng)

店中重要的部分，讓人第一眼就能看到，起到刺激和提醒的作用。（如圖1所示）

R:194G:238B:250

C:28M:0Y:5K:0

R:106G:233B:255

C:53M:0Y:7K:0

R:250G:42B:30

C:0M:92Y:87K:0

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

1.4字體規(guī)范

網(wǎng)店字體設(shè)計(jì)，同一版塊中的信息如果不采用統(tǒng)一的字體，就會(huì)顯得雜亂

無章，會(huì)影響頁面的整體美觀，會(huì)給人一種不正規(guī)的感覺。所以在網(wǎng)店的設(shè)計(jì)

中微軟雅黑使用的非常頻繁，在網(wǎng)店中作為主要的部分，它無論是放大還是縮

小，形體都非常的規(guī)整舒服。用其他的字體作對(duì)比襯托的作用，用黑體作為標(biāo)

題，有著時(shí)尚、厚重、搶眼、強(qiáng)調(diào)的效果。用華文新魏來突出不一樣的地方，

來吸引購買者的注意力，給網(wǎng)店起到促銷的作用。用幼圓來表達(dá)這部分內(nèi)容與

網(wǎng)店其他內(nèi)容不一樣，來引起購買者的訪問興趣。（如圖2所示）

2

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

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

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

2.1首頁

首頁設(shè)置了廣告位用來給消費(fèi)者打開的第一眼就能看到，給其留下深刻印

象，設(shè)置優(yōu)惠券來進(jìn)一步引起消費(fèi)者的購買欲望，將熱銷產(chǎn)品，主要產(chǎn)品放置

在首頁，讓消費(fèi)者能夠知道哪些，首先考慮哪些產(chǎn)品，給消費(fèi)者留下潛在意識(shí)，

設(shè)置品牌文化的目的是讓消費(fèi)者了解該產(chǎn)品的品牌，突出公司優(yōu)勢(shì)，服務(wù)內(nèi)容

和技術(shù)能力，一方面可以吸引客戶的關(guān)注，讓消費(fèi)者進(jìn)一步了解產(chǎn)品的品牌，

讓其放心購買，另一方面可以增加品牌的知名度，從另一個(gè)角度來宣傳品牌。

其中設(shè)計(jì)了導(dǎo)航和鏈接及一些快捷按鈕，方便用戶訪問，從而增加了用戶的良

好體驗(yàn)感。首頁主要是采用T字型版式設(shè)計(jì)，目的是將主要的內(nèi)容放在最前面

來展示，加深消費(fèi)者的印象，企業(yè)想要發(fā)布給用戶的信息，大都能被用戶以最

大可能性獲取，而且很方便，其次是頁面結(jié)構(gòu)清晰，主次分明、易于使用，也

防止消費(fèi)者錯(cuò)過重要的東西就放棄購買欲望。熱銷爆款設(shè)置的左右對(duì)稱，是為

了讓用戶逗留下來，錯(cuò)開對(duì)稱的精心設(shè)計(jì)會(huì)使得用戶潛意識(shí)的關(guān)注。（如圖3所

示）

3

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

圖3首頁原型圖

4

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

2.2搜索結(jié)果頁

該頁面展示了很多產(chǎn)品，主要的目的就是為了方便用戶找到自己想要的產(chǎn)

品，更好的滿足消費(fèi)者對(duì)產(chǎn)品的購買要求。在店招設(shè)置了主搜索框，方便用戶

搜索其他產(chǎn)品，在產(chǎn)品內(nèi)設(shè)有次搜索框和商品屬性篩選區(qū)，為了方便用戶搜索

產(chǎn)品，從而選擇自己想要的產(chǎn)品特性，設(shè)有搜索結(jié)果區(qū)，很好的將用戶想要的

產(chǎn)品展示給用戶，方便用戶選擇。其中設(shè)置了熱門搜索的關(guān)鍵詞，來提醒用戶

熱銷產(chǎn)品是哪些，也可以增加其購買欲望。篩選區(qū)有產(chǎn)品分類、包裝種類、適

用對(duì)象、選擇省份來告訴用戶，產(chǎn)品的基本信息，和產(chǎn)品的熱銷地區(qū)在哪，提

升用戶的信任感。其中設(shè)置了鏈接和快捷按鈕來方便用戶瀏覽，深度訪問，也

以防用戶訪問太深而不知道自己現(xiàn)在所在位置。搜索結(jié)果區(qū)就是將選擇的關(guān)鍵

詞的匹配程度來展示，把最符合關(guān)鍵詞搜索、篩選的結(jié)果和熱銷產(chǎn)品放在最前

面，然后依次將其他產(chǎn)品展示，越往后就是與搜索越不相關(guān)的產(chǎn)品。搜索結(jié)果

區(qū)的產(chǎn)品可以點(diǎn)擊進(jìn)入其產(chǎn)品的詳情頁，可以訪問產(chǎn)品詳情頁來了解產(chǎn)品之后

直接購買。（如圖4所示）

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

5

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

2.3商品詳情頁

詳情頁是為了給用戶一個(gè)深度了解產(chǎn)品的地方，詳情頁直接決定著產(chǎn)品成

交的情況，詳情頁不能太簡單也不能太復(fù)雜，所以把詳情頁設(shè)置了主圖的主要

目的是讓用戶知道是哪個(gè)產(chǎn)品；設(shè)置了其他基本的信息來給用戶進(jìn)行購買選擇；

右邊推薦熱銷產(chǎn)品可以讓用戶在不經(jīng)意之間就看到產(chǎn)品，引發(fā)其購買欲望；左

邊的小小分類目錄是為了讓用戶知道現(xiàn)在是哪個(gè)目錄里面，這個(gè)產(chǎn)品屬于什么

目錄；右邊大的區(qū)域有詳情和評(píng)論兩個(gè)模塊，方便用戶根據(jù)自己想要了解的內(nèi)

容進(jìn)行選擇。詳情里面設(shè)置了焦點(diǎn)圖來展示產(chǎn)品的個(gè)性化特點(diǎn)；設(shè)置了使用人

群，告訴用戶產(chǎn)生適合誰來使用；產(chǎn)品擁有的主要重要成分，為了讓用戶知道

產(chǎn)品是用來干嘛的；產(chǎn)品的使用時(shí)間，為了方便用戶知道，在什么時(shí)間段使用

該產(chǎn)品是最佳時(shí)機(jī)；產(chǎn)品的參數(shù)及成分方便用戶進(jìn)一步了解產(chǎn)品，從而增加用

戶的信任度；使用方法，增加用戶的知識(shí)面，以防用戶不了解產(chǎn)品的使用；用

購買需要知道的內(nèi)容來進(jìn)行結(jié)尾，進(jìn)一步增加用戶對(duì)產(chǎn)品之外的了解，給用戶

放心購買提供了一個(gè)保障，讓用戶安心，產(chǎn)生購買的欲望。（如圖5所示）

圖5商品詳情頁原型圖

6

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

2.4登錄注冊(cè)頁

登錄頁面是電商環(huán)節(jié)中不可割舍的一部分，設(shè)計(jì)其頁面要越簡單越好，要

以用戶體驗(yàn)為先，讓用戶在使用的時(shí)候盡可能的減少思考時(shí)間，用戶不喜歡思

考和尋找，他們希望自己需要的內(nèi)容都清晰的攤在眼前，甚至眼前只有自己需

要的內(nèi)容，所以，設(shè)計(jì)中就需要簡潔突出，大膽留白。登錄頁面前面設(shè)置了標(biāo)

題來告訴用戶現(xiàn)在所在頁面是干什么的；左邊設(shè)置了一個(gè)圖片，目的就是加深

用戶的印象，展示品牌；右邊設(shè)置了兩個(gè)主要區(qū)塊，一個(gè)是賬號(hào)登錄，另一個(gè)

是注冊(cè)賬號(hào)，將兩個(gè)重要的內(nèi)容設(shè)置為區(qū)塊方便用戶第一眼就能看到，然后根

據(jù)區(qū)塊進(jìn)行選擇，賬號(hào)登錄可以使用自己設(shè)置的賬號(hào)，也可以選擇手機(jī)號(hào)碼，

然后輸入登錄密碼和驗(yàn)證碼，假如忘記了密碼還可以利用手機(jī)號(hào)碼來進(jìn)行找回，

若不想用手機(jī)號(hào)或者是賬號(hào)登錄可以直接選擇其他登錄方式也就是第三方登錄

方式，里面有QQ、微信、支付寶等來給用戶進(jìn)行選擇。登錄按鈕就可以完成登

錄。如果沒有賬號(hào)，那就需要先進(jìn)行注冊(cè)然后才能登錄，其他登錄方式就省略

了注冊(cè)這個(gè)麻煩的環(huán)節(jié)。使用情景類這一設(shè)置都可以讓用戶切身體驗(yàn)，簡潔的

設(shè)計(jì)可以讓用戶心情舒暢并且快速找到自己需要的內(nèi)容。（如圖6所示）

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

7

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

2.5購物車

購物車是平臺(tái)用于促進(jìn)用戶購買的一個(gè)功能模塊，它相當(dāng)于收藏夾，用戶

選擇先把心儀的商品添加購物車，比較鑒別之后再?zèng)Q定購買，將購物車中設(shè)置

交易的導(dǎo)航條方便告訴用戶交易結(jié)束需要幾步，設(shè)置展示購物車全部產(chǎn)品來方

便用戶查看自己所需要購買的商品，設(shè)置了商品名稱、單價(jià)、購買數(shù)量、總價(jià)、

還有刪除和收藏，來介紹購買產(chǎn)品的基本信息和購買數(shù)量，購買數(shù)量可以增加

和減少，但是1是最低，200是最高，減到1就不能在進(jìn)行減少了，加到200就

沒在進(jìn)行相加了；選中策略有三種，全選、不全選、勾選，設(shè)置這三種方便用

戶自行選擇，方便快捷；設(shè)置了批量刪除和批量收藏，就減去了需要一個(gè)一個(gè)

刪除和收藏的麻煩；設(shè)置了告訴用戶選了幾件商品，總共多少錢來告訴消費(fèi)者；

設(shè)置了結(jié)算按鈕，方便用戶直接點(diǎn)擊去結(jié)算。底下設(shè)置了三個(gè)小小的區(qū)塊分別

為猜你喜歡、掌柜推薦、最近瀏覽，猜你喜歡是系統(tǒng)根據(jù)用戶經(jīng)常搜索的商品

進(jìn)行推送；掌柜推薦基本上就是品牌的熱銷產(chǎn)品或者是品牌的鎮(zhèn)店之寶；最近

瀏覽就是給用戶提供一個(gè)方便找到之前看到的產(chǎn)品地方，為了以防看到心儀的

產(chǎn)品忘記收藏而找不到的問題。在這幾個(gè)區(qū)塊展示里面有一個(gè)小的下一頁按鈕，

來表示產(chǎn)品不止這幾個(gè)，后面還有更多。（如圖7所示）

圖7購物車原型圖

8

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

2.6訂單結(jié)算頁

設(shè)置支付導(dǎo)航條到訂單信息，來和前一個(gè)頁面保持一致，告訴用戶，到了

支付的第二步。訂單結(jié)算信息，里面的產(chǎn)品都是代表已經(jīng)選擇好了的，所以是

全選，可以進(jìn)行取消任意產(chǎn)品，但不能一次性全部取消，只能一個(gè)一個(gè)取消。

對(duì)于每一個(gè)用戶來講，都需要填寫自己的收貨地址，以便于送達(dá)。由于用戶可

能需要把把訂單送到多個(gè)地址，所以在結(jié)算頁需要提供用戶地址選擇功能；為

了方便用戶下次直接支付不需要選擇，就設(shè)置了默認(rèn)地址，也可以更改默認(rèn)地

址；如果用戶現(xiàn)在的地址不方便使用，需要更換，所以相應(yīng)的還得提供收貨地

址的新增和修改功能；送貨清單是按照網(wǎng)店設(shè)置維度分組展示的，除了貨品信

息還展示了一些商家信息；支付方式一般都是兩種以上，網(wǎng)店設(shè)置了三種普遍

常用的支付方式；選擇發(fā)票，也是很重要的信息，可以選擇電子發(fā)票，也可以

選擇紙質(zhì)發(fā)票；設(shè)置選購多少商品方便用戶進(jìn)一步確認(rèn)商品數(shù)量，總計(jì)多少是

為了告訴用戶商品價(jià)格；優(yōu)惠信息展示出來，告知用戶買了哪些東西，享受了

哪些優(yōu)惠；設(shè)置經(jīng)過優(yōu)惠之后，還需要支付的價(jià)格；設(shè)置配送地址，給用戶再

一次確認(rèn)送貨地址，以防用戶忘記更改；設(shè)置支付按鈕方便用戶直接進(jìn)行支付。

以用戶為中心設(shè)置給用戶良好的體驗(yàn)感。（如圖8所示）

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

9

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

2.7個(gè)人中心

會(huì)員中心的目的就是把握客戶需求，首先要設(shè)置會(huì)員等級(jí)情況，根據(jù)不同

的會(huì)員等級(jí)選擇不同的營銷方式，深刻分析理解自身品牌所面向的細(xì)分會(huì)員的

特點(diǎn)，集中資源，努力去滿足用戶的個(gè)性需求，形成自己的特色，并不斷取得

更大的競(jìng)爭優(yōu)勢(shì)。會(huì)員作為一個(gè)身份可以有效的增加用戶的忠誠度和復(fù)購率。

設(shè)置會(huì)員的基本信息是為了讓用戶知道自己的基本情況，會(huì)員帶給自己的好處

有什么，會(huì)員身份等級(jí)機(jī)制利用了用戶的攀比、自我實(shí)現(xiàn)等心理，進(jìn)一步增加

用戶與產(chǎn)品之間的粘性。會(huì)員身份等級(jí)設(shè)置了4個(gè)，其中梯度理論上呈遞增趨

勢(shì)。將低等級(jí)到高等級(jí)這種“越來越高端”的氛圍烘托出來。讓用戶有想成為

的欲望；設(shè)置會(huì)員卡片，可以吸引用戶，產(chǎn)生進(jìn)一步升級(jí)的想法；會(huì)員權(quán)益是

決定用戶是否購買會(huì)員的重要因素；就是為了讓用戶知道，什么等級(jí)的會(huì)員將

享受什么樣的待遇，來引起用戶的購買心理，有些權(quán)益相當(dāng)實(shí)在，如會(huì)員折扣、

專屬紅包等，而有些權(quán)益的誘惑力相對(duì)較弱，不同的權(quán)益強(qiáng)度決定了不同的視

覺呈現(xiàn)方式；會(huì)員積分的目的是讓用戶完成任務(wù)來換取積分，從而以另一個(gè)方

式幫網(wǎng)店進(jìn)行推廣宣傳。（如圖9所示）

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

10

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

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

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

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

首頁上面的店招是不可缺少的，在里面介紹品牌，還設(shè)置了手機(jī)端瀏覽、

購物車、個(gè)人中心這些快捷按鈕，來方便用戶看到訪問，搜索框的目的是給那

些目標(biāo)明確的用戶，可以直接搜索得到想要的結(jié)果，增加其方便性。設(shè)置其導(dǎo)

航條就是為了讓用戶直接點(diǎn)擊進(jìn)入到自己想要的地方，增加了用戶的體驗(yàn)感。

首頁最中心版塊設(shè)計(jì)了banner，其主要的目的是讓用戶第一眼看到就被吸引，

可以讓用戶進(jìn)一步了解，banner設(shè)置了兩張，一張是品牌節(jié)日活動(dòng)banner，另

一張是品牌爆品促銷。品牌節(jié)日活動(dòng)banner，設(shè)置的顏色以粉色系為主，給人

一種可愛的氛圍，產(chǎn)品在托盤上展示可以給人知道重點(diǎn)在哪，后面設(shè)計(jì)了圓形

的剪切蒙版，來告訴用戶，牛奶的濃郁；因?yàn)楣?jié)日是兒童節(jié)，所以頁面主要以

兒童氣息為主來，增加一些兒童元素；采用氣球來烘托節(jié)日的氣氛，讓節(jié)日的

氛圍更加濃厚；設(shè)置其中的折扣，引起用戶的購買欲望，設(shè)計(jì)時(shí)間的目的就是

給用戶一種急迫感，刺激用戶的購買行為。（如圖10所示）

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

這張爆款banner采用的是左右結(jié)構(gòu)排版，根據(jù)用戶的習(xí)慣，將文字放在左

邊，給用戶第一眼就看到產(chǎn)品銷售信息；設(shè)置主要給人一種產(chǎn)品是純天然，干

凈，沒有任何添加劑的感覺，讓人產(chǎn)生購買欲望，營造了一種輕松舒適的氛圍，

讓人久看也不會(huì)視覺疲勞，在眾多色彩中，突然有不一樣的色調(diào)會(huì)吸引用戶的

注意力，引起用戶的仔細(xì)觀看的興趣；設(shè)置奶牛的元素，為了和牛奶相呼應(yīng)，

利用天空和草地來進(jìn)一步凸顯產(chǎn)品的自然；設(shè)計(jì)牛奶的背景，來表示牛奶的濃

郁，香醇，來刺激用戶的味蕾，加深用戶的潛在意識(shí)；設(shè)置活動(dòng)折扣來促銷這

11

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

個(gè)產(chǎn)品，從而吸引用戶注意；設(shè)置時(shí)間來勾起用戶的欲望，再寫一個(gè)廣告語來

加深用戶對(duì)產(chǎn)品的購買行為。（如圖11所示）

圖11品牌爆品促銷banner

首頁整體采用藍(lán)色系，為了給用戶一種安心購買的心理暗示，讓人看上去

很舒服，首頁是網(wǎng)店極其重要的一部分，所以用明亮的藍(lán)色就可以吸引用戶的

眼球；設(shè)置了優(yōu)惠券，讓用戶心理留下印象，吸引用戶購買欲望。設(shè)置了熱銷

爆款、鎮(zhèn)店之寶、品牌文化三個(gè)版塊；熱銷爆款里面設(shè)了兩個(gè)版塊，用來進(jìn)行

對(duì)比對(duì)稱，這種形式來凸顯這個(gè)區(qū)域的不一樣，使用不一樣的字體的來進(jìn)一步

突出顯示，設(shè)置立即搶購按鈕來方便用戶直接進(jìn)行購買。鎮(zhèn)店之寶里面用來展

示產(chǎn)品，用獨(dú)特可愛的框來框住產(chǎn)品，既不顯得產(chǎn)品單調(diào)，也不會(huì)顯得版塊很

空，里面設(shè)有購物車，給用戶暫時(shí)存放產(chǎn)品的位置，讓用戶有糾結(jié)的時(shí)間，然

后還可以找到產(chǎn)品。品牌文化，設(shè)計(jì)的目的是為了讓用戶了解企業(yè)，把文字用

可愛的還在框來框住，可以給用戶一種，專做產(chǎn)品，保障品質(zhì)，孩子可以放心

使用的感覺，可以讓用戶放心進(jìn)行購買。底下設(shè)計(jì)四個(gè)快捷按鈕，目的就是告

訴用戶產(chǎn)品的保障、銷售范圍、商標(biāo)、包郵的范圍，增加用戶的購買欲望。（如

圖12所示）

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

12

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

圖12首頁效果圖

13

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

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

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

搜索頁面的主要作用是給用戶找到產(chǎn)品的地方，設(shè)計(jì)要從用戶體驗(yàn)感出發(fā)，

要簡單方便快捷，一個(gè)優(yōu)秀的搜索功能可以幫助用戶快速的找到他們想要的內(nèi)

容。所以設(shè)計(jì)了搜索框，篩選框來方便用戶查找，搜索框中設(shè)有詞條，它的主

要目的就是提醒用戶這里可以輸入產(chǎn)品信息，也在告訴用戶用什么方式進(jìn)行搜

索；設(shè)計(jì)交互的話，建議不要點(diǎn)擊搜索按鈕后，不要清除搜索框中的查詢內(nèi)容，

用黑體來設(shè)計(jì)篩選，用來給人方便查看，搜索的結(jié)果是提供精確的和相關(guān)的結(jié)

果，根據(jù)搜索的關(guān)鍵詞，將最符合的結(jié)果放在最前面，然后根據(jù)關(guān)鍵詞的匹配

強(qiáng)弱進(jìn)行排列，越往后的產(chǎn)品與關(guān)鍵詞越不相關(guān)。篩選中的按鈕可以多選用白

色的框框出來的目的是讓用戶更舒服的找到產(chǎn)品的重要信息，用紅色來設(shè)置價(jià)

格，讓用戶心里有數(shù)。用戶點(diǎn)擊可進(jìn)行詳細(xì)了解產(chǎn)品信息，知道產(chǎn)品的主要功

能和使用方法，主要是給詳情頁提供進(jìn)入渠道。給產(chǎn)品增加了一個(gè)投影，目的

是為了讓產(chǎn)品在里面看著更加立體真實(shí)一點(diǎn)，達(dá)到展示產(chǎn)品的效果。（如圖13

所示）

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

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

14

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

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

商品詳情頁是影響商品交易的重要部分，他能促進(jìn)產(chǎn)品的成交，所以在分

析益益產(chǎn)品過程中，根據(jù)產(chǎn)品的種類和特點(diǎn)，選擇了最具有代表性的產(chǎn)品進(jìn)行

詳情頁的設(shè)計(jì)，將產(chǎn)品的優(yōu)勢(shì)和個(gè)性化特點(diǎn)展示出來。產(chǎn)品詳情頁分為店招、

產(chǎn)品主圖和購買信息、左側(cè)導(dǎo)航條、中間為產(chǎn)品詳細(xì)內(nèi)容、右側(cè)為推薦的產(chǎn)品。

背景采用淡藍(lán)色的背景，藍(lán)色會(huì)給人一種舒服安心的感覺，讓人會(huì)放心購買，

從而刺激消費(fèi)者的購買欲望。采用整體的結(jié)構(gòu)設(shè)計(jì)，除了主圖和購買信息的設(shè)

計(jì)與中間的產(chǎn)品詳情頁內(nèi)容設(shè)計(jì)有點(diǎn)不同，其他設(shè)計(jì)給人一種整體感。以下就

是介紹詳情頁的設(shè)計(jì)思路。

3.3.1安徽益益學(xué)生營養(yǎng)奶粉設(shè)計(jì)思路

設(shè)計(jì)頁面店招的目的為了時(shí)時(shí)刻刻告訴用戶產(chǎn)品的品牌信息，上面的搜索

框方便用戶隨時(shí)進(jìn)行搜索產(chǎn)品。導(dǎo)航條是方便用戶隨時(shí)點(diǎn)擊去想去的任何地方，

產(chǎn)品主圖的目的是讓用戶看清產(chǎn)品，購買信息是方便用戶了解購買產(chǎn)品的重要

信息。設(shè)計(jì)左邊的導(dǎo)航條是為了讓客戶清楚的知道該產(chǎn)品歸屬的種類，還方便

用戶隨時(shí)選擇自己想要的類目，中間產(chǎn)品信息設(shè)計(jì)了詳情和評(píng)論，主要目的是

方便用戶觀看了解自己想要的信息，詳情的內(nèi)容有焦點(diǎn)圖，它的主要設(shè)計(jì)是展

示產(chǎn)品將產(chǎn)品最重要的信息展示給用戶，讓用戶第一眼就能看到，里面設(shè)計(jì)了

產(chǎn)品的使用人群，給用戶產(chǎn)生購買想法；設(shè)置產(chǎn)品的主要成分，讓用戶是為了

讓用戶知道產(chǎn)品的作用，從而放心購買，背景圖設(shè)置了一張牛奶，來充分提醒

牛奶的醇厚；設(shè)計(jì)產(chǎn)品的使用時(shí)間，來告訴用戶什么時(shí)間段使用產(chǎn)品是最佳的，

最有效果的；設(shè)計(jì)產(chǎn)品參數(shù)的主要目的是介紹產(chǎn)品包含的所有成分，讓用戶觀

看成分自己了解產(chǎn)品，從而放心購買產(chǎn)品；設(shè)計(jì)使用方法分主要目的是告訴第

一次購買產(chǎn)品的用戶如何使用產(chǎn)品，給用戶增加最佳使用方式；最后設(shè)計(jì)了購

買須知來告訴用戶，產(chǎn)品的物流有哪些，產(chǎn)品什么時(shí)間發(fā)貨、退貨要做些什么，

發(fā)票的有關(guān)信息，來給用戶來提供保障；在右側(cè)設(shè)計(jì)了一塊用來放推薦好物，

為了讓用戶在不經(jīng)意之間看到這些產(chǎn)品，從來產(chǎn)生購買欲望，增加產(chǎn)品的銷售。

（如圖14所示）

3.3.2安徽益益學(xué)生營養(yǎng)奶粉設(shè)計(jì)效果

15

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

圖14安徽益益學(xué)生營養(yǎng)奶粉詳情頁效果圖

16

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

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

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

采用一張大的背景圖，用PS降低透明度，給用戶一種朦朧的感覺，然后里

面的背景圖也會(huì)給用戶一種心理暗示來告訴用戶，產(chǎn)品的產(chǎn)地是純天然的，奶

牛吃的草也是純天然的，給用戶一種安全干凈設(shè)置兩個(gè)框框的，一個(gè)明一暗，

主要是為了讓暗來襯托明，讓用戶的注意力，直接集中在明的框框；再利用產(chǎn)

品圖，和產(chǎn)品生產(chǎn)背景圖來讓用戶進(jìn)一步放心，中間放一個(gè)黑體字體的標(biāo)題來

提醒用戶這個(gè)頁面是用來做什么操作的；設(shè)置了兩個(gè)區(qū)塊分別為，賬號(hào)登錄和

注冊(cè)賬號(hào)，賬號(hào)登錄的主要目的是給老用戶準(zhǔn)備的，其中設(shè)置了賬號(hào)/手機(jī)號(hào)登

錄，然后，設(shè)置密碼和驗(yàn)證碼，給用戶提供安全保障，設(shè)置了忘記密碼的主要

用處是為了以防用戶忘記密碼，可以直接找回，為了方便用戶，設(shè)置了其他登

錄方式，也就是第三方登錄，里面有QQ登錄，微信登錄，支付寶登錄等等；登

錄按鈕方便用戶輸入基本信息后，直接進(jìn)行登錄；注冊(cè)賬號(hào)的重要目的是給第

一次登錄的人，一個(gè)新的賬號(hào)，方便其下次直接登錄，而不需要重新注冊(cè)新的

賬號(hào)，也相當(dāng)于記憶存儲(chǔ)。這樣設(shè)計(jì)的目的可以讓兩個(gè)非常重要的功能被用戶

一眼就能看到，它能減少了用戶花時(shí)間去找要做的操作，方便了用戶，給用戶

提供了一個(gè)好的體驗(yàn)感。（如圖15所示）

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

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

17

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

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

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

購物車主要起到了批量結(jié)算、商品對(duì)比以及收藏的作用，作為引導(dǎo)用戶購

買商品付款的最后一步，他也是相當(dāng)重要的，整個(gè)頁面采用淡藍(lán)色作為背景圖，

來使網(wǎng)站整體一致，其中用色彩鮮艷的藍(lán)色來將重要的部分標(biāo)示出來，做標(biāo)題

剛好和產(chǎn)品內(nèi)容形成對(duì)比；頁面中的產(chǎn)品標(biāo)題都是采用黑體來醒目用戶，設(shè)計(jì)

前面的按鈕是用來給用戶進(jìn)行選擇或者是不選擇的，設(shè)計(jì)了產(chǎn)品的縮略圖，目

的是為了防止用戶在看了眾多產(chǎn)品后，忘記了購物車內(nèi)產(chǎn)品的樣子；商品屬性

的設(shè)計(jì)是為了讓用戶有良好的體驗(yàn)感，讓用戶知道這個(gè)產(chǎn)品是什么；設(shè)計(jì)商品

單價(jià)讓用戶知道這個(gè)產(chǎn)品一開始的價(jià)格，其目的是給用戶進(jìn)行價(jià)格對(duì)比；設(shè)計(jì)

商品的數(shù)量，其中商品數(shù)量會(huì)影響商品的總計(jì)的價(jià)格，商品數(shù)量允許修改，在

頁面上提供了清晰的圖標(biāo)，用來增加商品（+）和減少商品（-）；設(shè)計(jì)操作的目

的是方便用戶進(jìn)行刪除和收藏，設(shè)計(jì)全選就是讓用戶一次性選擇產(chǎn)品進(jìn)行購買，

批量刪除和批量收藏都是一次性進(jìn)行的操作，減少用戶要進(jìn)行的繁瑣步驟，總

結(jié)多少產(chǎn)品給用戶心里有點(diǎn)數(shù)，用紅色的字來醒目用戶，用紅色設(shè)計(jì)重要的按

鈕，讓用戶知道這個(gè)按鈕的作用以及這個(gè)按鈕的位置，結(jié)尾設(shè)計(jì)三個(gè)模塊，根

據(jù)用戶喜歡推薦，產(chǎn)生購買結(jié)果，掌柜推薦就相當(dāng)于熱銷產(chǎn)品引起用戶興趣，

最近瀏覽設(shè)計(jì)是方便用戶找到忘記收藏喜歡的產(chǎn)品，在下面產(chǎn)品排列里面設(shè)計(jì)

了，一個(gè)小的，灰色的下一頁按鈕，主要的目的是告訴用戶，產(chǎn)品展示還有，

方便用戶進(jìn)行選擇。（如圖16所示）

18

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

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

圖16購物車效果圖

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

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

設(shè)計(jì)導(dǎo)航條到訂單信息和網(wǎng)頁顏色為淡藍(lán)色其中色彩鮮艷的藍(lán)色做標(biāo)示來

體現(xiàn)網(wǎng)站的整體性，里面的標(biāo)題字體都是使用logo的顏色和黑體設(shè)計(jì)的，設(shè)計(jì)

了地址模塊，里面字體采用黑體，用圓角矩形框起來，用明暗和顏色不一樣來

突出選中的地址區(qū)塊，里面設(shè)計(jì)了默認(rèn)地址和設(shè)為默認(rèn)地址，不是默認(rèn)地址的

內(nèi)容選中會(huì)出現(xiàn)設(shè)為默認(rèn)地址，其中內(nèi)容的標(biāo)題都是用圖標(biāo)來提醒用戶，添加

新的收貨地址圖標(biāo)，都是根據(jù)用戶習(xí)慣而進(jìn)行設(shè)計(jì)的，設(shè)計(jì)添加新地址是方便

用戶要使用從來沒用過的地址，設(shè)置修改和刪除是為了方便用戶要在原基礎(chǔ)上

更改信息和不想使用這個(gè)地址或者這個(gè)地址沒有任何作用要進(jìn)行刪除，商品清

19

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

單里面主要是用來展示給用戶，選擇了什么產(chǎn)品進(jìn)行購買支付，在該部分內(nèi)容

只可以進(jìn)行取消選擇產(chǎn)品，不能增加新的產(chǎn)品和購買產(chǎn)品的數(shù)量，展示產(chǎn)品的

縮略圖、單價(jià)、數(shù)量和總計(jì)的目的是為了讓用戶進(jìn)一步確認(rèn)購買信息；支付方

式是給用戶進(jìn)行支付平臺(tái)選擇，給用戶提供方便也就增加了用戶對(duì)網(wǎng)站的好感

度；發(fā)票選擇是給用戶一個(gè)更想要的方式，設(shè)計(jì)已選擇的商品、總計(jì)、使用優(yōu)

惠價(jià)、應(yīng)付金額和地址是為了讓用戶看清楚是否符合自己選擇的內(nèi)容，是否使

用了優(yōu)惠券，或者是地址有沒有選擇正確等；用紅色按鈕白色字體來突出顯示

這個(gè)區(qū)域，讓用戶一眼就能找到在哪里進(jìn)行支付結(jié)算，整個(gè)頁面提供了用戶的

方便性和增加了用戶的體驗(yàn)感。（如圖17所示）

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

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

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

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

個(gè)人中心首先展示的是用戶的個(gè)人信息，采用一個(gè)可愛背景來引起用戶好

20

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

感，里面擁有用戶的名字、購買次數(shù)、會(huì)員等級(jí)、會(huì)員積分等，用一個(gè)進(jìn)度條

來表示用戶離下一個(gè)等級(jí)還差多少，給用戶一種快要達(dá)成目的的成就感，大模

塊標(biāo)題采用黑體來重點(diǎn)標(biāo)示，還有英文會(huì)使整個(gè)頁面更加協(xié)調(diào)，增加更多的適

用人群；會(huì)員成長體系這個(gè)模塊有兩個(gè)小塊，第一個(gè)模塊用來展示成為各個(gè)會(huì)

員的步驟有什么，滿足什么要求就可以達(dá)到那個(gè)會(huì)員要求，第二個(gè)小塊是給用

戶一個(gè)滿足感，不同的會(huì)員擁有的卡片是不一樣的，設(shè)置等級(jí)越高，卡片就越

高級(jí)；設(shè)計(jì)會(huì)員權(quán)益的主要作用是告訴用戶，成為會(huì)員將會(huì)得到什么樣的優(yōu)惠，

會(huì)得到什么樣的好處，