青食品牌網(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ī)范......................................................................................................2

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

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

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

2.3Banner頁(yè).........................................................................................................5

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

2.5登錄注冊(cè)頁(yè)..................................................................................................9

2.6購(gòu)物車..........................................................................................................9

2.7訂單結(jié)算頁(yè)................................................................................................10

2.8個(gè)人中心....................................................................................................11

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

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

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

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

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

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

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

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

3.3.1麥片巧克力產(chǎn)品設(shè)計(jì)思路.................................................................16

3.3.2麥片巧克力產(chǎn)品設(shè)計(jì)效果.................................................................16

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

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

II

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

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

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

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

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

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

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

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

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

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

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

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

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

III

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

青食網(wǎng)店視覺(jué)方案設(shè)計(jì)

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

1.1項(xiàng)目背景

我國(guó)目前經(jīng)濟(jì)體系中，電商已經(jīng)成為不可分割的一環(huán)。而從當(dāng)下電商品類

的發(fā)展來(lái)看，只要是跟產(chǎn)品銷售相關(guān)的類目產(chǎn)品，其經(jīng)營(yíng)者基本上都會(huì)通過(guò)電

商進(jìn)行相應(yīng)的輔助銷售。也就是說(shuō)隨著電商的發(fā)展，電商吸納了傳統(tǒng)行業(yè)，而

傳統(tǒng)行業(yè)的進(jìn)入又再一次壯大了電商的發(fā)展，循環(huán)往復(fù)之下電商目前已經(jīng)成為

我國(guó)經(jīng)濟(jì)體系中的重要一環(huán)，電商經(jīng)營(yíng)也已經(jīng)成為傳統(tǒng)行業(yè)的基本經(jīng)營(yíng)體系之

一。所以就實(shí)體產(chǎn)業(yè)而言，在當(dāng)下經(jīng)濟(jì)環(huán)境中，知名品牌基本上都會(huì)架設(shè)自己

的獨(dú)立網(wǎng)店，從而為品牌的發(fā)展“保駕護(hù)航”。

青食是青島食品股份有限公司的品牌。青島食品股份有限公司創(chuàng)建于1950

年，主要生產(chǎn)餅干面食品、花生制品、紅小豆制品、巧克力糖果、調(diào)配米粉、

休閑食品、奶粉等七大類100多個(gè)花色品種，“青食”產(chǎn)品暢銷全國(guó)，遠(yuǎn)銷海

外，在國(guó)內(nèi)外市場(chǎng)具有較高的知名度和美譽(yù)度?！扒嗍场迸柒}奶餅干、花生醬、

紅豆餡、高梁飴等產(chǎn)品多次榮獲國(guó)家銀質(zhì)獎(jiǎng)、全國(guó)優(yōu)秀兒童食品獎(jiǎng)、輕工業(yè)優(yōu)

質(zhì)產(chǎn)品等榮譽(yù)稱號(hào)。近年來(lái)，“青食”牌鈣奶餅干被評(píng)為山東名牌產(chǎn)品，“青

食”牌紅豆餡、花生醬被評(píng)為青島名牌產(chǎn)品，“青食”商標(biāo)被認(rèn)定為省著名商

標(biāo)，“青食”牌產(chǎn)品被授予國(guó)家質(zhì)量達(dá)標(biāo)信譽(yù)品牌。不過(guò)目前對(duì)于青食品牌而

言，其公司的電商經(jīng)營(yíng)思路還是靠傳統(tǒng)電商平臺(tái)，比如借助京東平臺(tái)進(jìn)行產(chǎn)品

的線上銷售，就目前市場(chǎng)銷售情況而言，青食公司急需一個(gè)具有購(gòu)買功能的獨(dú)

立品牌網(wǎng)店。

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

青食品牌產(chǎn)品主要以餅干制品為主，屬于食品品類中的休閑零食一類。其

對(duì)應(yīng)的目標(biāo)消費(fèi)者主要以兒童和老年人群體為主，首先這部分消費(fèi)群體在消費(fèi)

能力上有所困難，對(duì)于復(fù)雜的網(wǎng)頁(yè)設(shè)計(jì)也往往容易找不到視覺(jué)重點(diǎn)，并且對(duì)于

產(chǎn)品的營(yíng)養(yǎng)質(zhì)量有較高要求。以其為目標(biāo)受眾，進(jìn)行網(wǎng)站設(shè)計(jì)，必須直觀的展

現(xiàn)出產(chǎn)品營(yíng)養(yǎng)豐富，價(jià)格低廉的特點(diǎn)，以產(chǎn)品特質(zhì)來(lái)感染消費(fèi)者。

就目前青食品牌而言，最能夠與消費(fèi)者引起共鳴的就是產(chǎn)品本身的美食屬

1

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

性。單純就零食產(chǎn)品而言，餅干類產(chǎn)品具有非常高的能量補(bǔ)充價(jià)值，并且本身

青食品牌的產(chǎn)品包裝精美，便于攜帶。而餅干類產(chǎn)品本身制作工藝并不復(fù)雜，

成本較低。對(duì)于沒(méi)有消費(fèi)能力的兒童以及消費(fèi)能力較弱的老年群體而言，產(chǎn)品

價(jià)格在很大程度上決定了最終的購(gòu)買力度。所以在網(wǎng)站設(shè)計(jì)的過(guò)程中除了針對(duì)

性的產(chǎn)品描述以外，還要凸顯出產(chǎn)品的促銷力度，以及相應(yīng)的銷售方案，從而

提高產(chǎn)品的性價(jià)比。

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

青食品牌本身以餅干類產(chǎn)品為主，并且熱門產(chǎn)品的紅黃色搭配的外包裝經(jīng)

過(guò)長(zhǎng)期銷售，已深入人心，所以網(wǎng)站的標(biāo)準(zhǔn)顏色應(yīng)該以產(chǎn)品包裝色彩相關(guān)聯(lián)。

所以網(wǎng)站整個(gè)底色應(yīng)該以亮黃色為主，其中點(diǎn)綴紅色的元素。而為了突出產(chǎn)品

的層次感，在底色選擇上，應(yīng)使用深淺橙黃色進(jìn)行不同區(qū)域的區(qū)分。（如圖1

所示）

圖1標(biāo)準(zhǔn)色（深橙、過(guò)渡橙、淺橙）

1.4字體規(guī)范

字體使用方面，本身產(chǎn)品屬于日常休閑零食，因此采用字形相對(duì)圓潤(rùn)的字

體進(jìn)行網(wǎng)站設(shè)計(jì)，可以給消費(fèi)者一種能量充足的心理暗示。所以整個(gè)網(wǎng)站的字

體規(guī)范以微軟雅黑和華光準(zhǔn)圓兩種字體為主。（如圖2所示）

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

2

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

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

2.1首頁(yè)

首頁(yè)方面整體布局分為七個(gè)版塊，其中店招部分就產(chǎn)品logo、廣告語(yǔ)進(jìn)行

介紹，并加入相應(yīng)的優(yōu)惠券領(lǐng)取等功能。第二個(gè)版塊是對(duì)網(wǎng)站區(qū)域進(jìn)行分類，

設(shè)置導(dǎo)航條。之后是Banner圖區(qū)域，通過(guò)第一屏大篇幅的內(nèi)容向消費(fèi)者展現(xiàn)網(wǎng)

站產(chǎn)品。之后是品牌介紹、產(chǎn)品分類推薦等板塊，最后是頁(yè)尾部分，對(duì)青食品

牌對(duì)于購(gòu)物指南、會(huì)員專區(qū)以及企業(yè)新聞資訊等進(jìn)行鏈接管理。（如圖3所示）

3

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

圖3首頁(yè)原型圖

4

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

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

搜索頁(yè)是整個(gè)網(wǎng)站的搜索功能呈現(xiàn)，具體搜索功能所呈現(xiàn)出來(lái)的是針對(duì)產(chǎn)

品的搜索結(jié)果。在搜索頁(yè)方面，除了店招、導(dǎo)航條以及頁(yè)尾固定區(qū)域之外，整

個(gè)版式以搜索結(jié)果和推薦產(chǎn)品為主。（如圖4所示）

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

2.3Banner頁(yè)

Banner是網(wǎng)頁(yè)導(dǎo)航圖片，通常都體現(xiàn)了網(wǎng)站的中心主旨，因此需要格外精

心設(shè)計(jì)，對(duì)于此部分，給出兩種設(shè)計(jì)方案，都是以產(chǎn)品圖與對(duì)應(yīng)文案為主要設(shè)

計(jì)內(nèi)容。兩種方案的區(qū)別在于整體布局上的不同，一種布局以突出產(chǎn)品圖片為

主，對(duì)應(yīng)文案為輔；另一種布局則拋棄了重點(diǎn)的概念，以舒適的視覺(jué)效果為主。

（如圖5、圖6所示）

5

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

圖5Banner1原型圖

圖6Banner2原型圖

2.4商品詳情頁(yè)

商品詳情頁(yè)主要功能與京東平臺(tái)的寶貝詳情頁(yè)相類似。其中，除了logo、

廣告語(yǔ)之外，針對(duì)產(chǎn)品主要信息展示方面，仍舊有左主圖，右信息的形式進(jìn)行

展示。其中主圖以正方形圖片進(jìn)行展示，右面是產(chǎn)品名稱、配料以及規(guī)格相應(yīng)

信息。與京東詳情頁(yè)不同的是，作為網(wǎng)店的產(chǎn)品詳情頁(yè)，其在詳情介紹方面，

更加細(xì)致突出產(chǎn)品特質(zhì)與產(chǎn)品的樣式，可以方便消費(fèi)者快速選擇心儀產(chǎn)品。（如

圖7所示）

6

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

7

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

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

8

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

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

登錄注冊(cè)頁(yè)面將直接決定商鋪會(huì)員數(shù)量的多少，也是網(wǎng)站的主要會(huì)員功能

的提現(xiàn)，頁(yè)面主要以登錄功能和注冊(cè)功能的入口為主。除了店招、導(dǎo)航條以及

頁(yè)尾固定區(qū)域之外，在頁(yè)面的正中央是網(wǎng)站的登錄方式選擇。（如圖8所示）

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

2.6購(gòu)物車

購(gòu)物車是網(wǎng)站購(gòu)買功能的主要體現(xiàn)，也是商城類功能的重點(diǎn)，消費(fèi)者可以

通過(guò)選擇產(chǎn)品加購(gòu)物車的形式，集中訂單一起支付，一次性完成產(chǎn)品采購(gòu)。頁(yè)

面展示方面，除了店招、導(dǎo)航條以及頁(yè)尾固定區(qū)域之外，購(gòu)物車頁(yè)面主要是對(duì)

消費(fèi)者選中產(chǎn)品進(jìn)行整理和展示。之后，在全部商品上方，設(shè)置相應(yīng)的隔日送

達(dá)、增值發(fā)票以及個(gè)性服務(wù)等，作為營(yíng)銷布局方式之一。（如圖9所示）

9

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

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

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

訂單結(jié)算頁(yè)面作為網(wǎng)站支付功能中最重要的一環(huán)，其頁(yè)面主要功能是核對(duì)

訂單的信息，包括地址信息、支付方式以及產(chǎn)品購(gòu)買信息三個(gè)內(nèi)容。在頁(yè)面的

布局上需要依據(jù)銷售人群特點(diǎn)進(jìn)行設(shè)計(jì)。除了店招、導(dǎo)航條以及頁(yè)尾固定區(qū)域

之外，在訂單支付功能中，加入了計(jì)算器，能夠直接計(jì)算產(chǎn)品的最終支付價(jià)格，

并直觀看到優(yōu)惠之前的價(jià)格，感受到商鋪的活動(dòng)力度。（如圖10所示）

10

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

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

2.8個(gè)人中心

個(gè)人中心是整個(gè)網(wǎng)站的基礎(chǔ)架構(gòu)，直接鏈接到會(huì)員數(shù)據(jù)庫(kù)。所以個(gè)人中心

是會(huì)員在網(wǎng)站上的信息板塊呈現(xiàn)，除了店招、導(dǎo)航條以及頁(yè)尾固定區(qū)域之外，

在主要區(qū)域展示會(huì)員賬戶信息、曾經(jīng)在網(wǎng)站產(chǎn)生的訂單，以及相應(yīng)的會(huì)員等級(jí)

制度。（如圖11所示）

11

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

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

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

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

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

在對(duì)青食網(wǎng)站進(jìn)行首頁(yè)制作時(shí)，首先應(yīng)該對(duì)網(wǎng)站首頁(yè)的Banner區(qū)域進(jìn)行規(guī)

劃，Banner區(qū)域作為消費(fèi)者登錄商鋪后看到的第一個(gè)頁(yè)面，會(huì)直接影響消費(fèi)者

對(duì)于商鋪的印象。根據(jù)青食網(wǎng)站的特點(diǎn)，設(shè)計(jì)針對(duì)熱銷單品以及零食打包促銷

活動(dòng)兩種Banner圖廣告。針對(duì)Banner圖的制作，主要通過(guò)PS技術(shù)，使用圖層

疊加、陰影、內(nèi)外發(fā)光等技術(shù)，進(jìn)行效果渲染。

第一張Banner圖主要是對(duì)于熱銷單品的推薦，以當(dāng)下青食品牌中的針對(duì)年

輕人生產(chǎn)的休閑食品作為主要產(chǎn)品進(jìn)行設(shè)計(jì)。Banner圖設(shè)計(jì)創(chuàng)意來(lái)自飲品的流

動(dòng)性以及不同薯片產(chǎn)品的碰撞感。Banner圖的設(shè)計(jì)主體以玫粉色流動(dòng)液體作為

背底，以不同類別產(chǎn)品的拼盤效果為主，直觀顯示熱門產(chǎn)品的樣式，并針對(duì)消

費(fèi)者進(jìn)行活動(dòng)提示“一件紅薯，送一斤小圓薯”，從而提高消費(fèi)者在后續(xù)購(gòu)買

過(guò)程中對(duì)熱銷單品的關(guān)注。（如圖12所示）

第二張Banner以促銷活動(dòng)為主，根據(jù)干果、餅干等休閑類食品比較適合進(jìn)

12

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

行大批量囤貨的特點(diǎn)，設(shè)計(jì)“零食大聚惠”主題海報(bào)，將日常銷售數(shù)量較多的

產(chǎn)品以產(chǎn)品堆放效果放置于頁(yè)面右側(cè)偏中心位置，左側(cè)則顯示活動(dòng)主題以及活

動(dòng)日期，背底顏色選擇不同程度深淺的黃色作為底色，突出頁(yè)面設(shè)計(jì)的層次感，

以英文單詞“chowhound”進(jìn)行點(diǎn)綴，形成最終頁(yè)面效果。（如圖13所示）

在完成Banner設(shè)計(jì)之后，網(wǎng)站首頁(yè)根據(jù)相應(yīng)的版式布局進(jìn)行填充，其中品

牌介紹、產(chǎn)品活動(dòng)以及產(chǎn)品分類根據(jù)內(nèi)容不同進(jìn)行不同布局。背底以白色為主，

增加不同系列相關(guān)圖片，如食品保健區(qū)域添加運(yùn)動(dòng)人員的圖片加深此區(qū)域的運(yùn)

動(dòng)保健特性，以主題顏色反差產(chǎn)品各版塊的內(nèi)容詳情，字體選用加粗的字體進(jìn)

行突出展示，標(biāo)題選擇與板塊色彩相同的顏色進(jìn)行呼應(yīng)。（如圖14所示）

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

圖12品牌形象banner1

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

13

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

圖14首頁(yè)效果圖

14

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

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

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

作為產(chǎn)品銷售至關(guān)重要的一步，搜索結(jié)果頁(yè)設(shè)計(jì)的好壞在一定程度上決定

了產(chǎn)品的銷售量。青食食品銷售的休閑類產(chǎn)品本身具備休息放松的意味存在，

因?yàn)橹饕?gòu)買對(duì)象為孩子的家長(zhǎng)以及老人，對(duì)于這兩類群體而言，家長(zhǎng)日常工

作時(shí)間較為緊張，老人對(duì)于復(fù)雜的頁(yè)面難以應(yīng)付，所以在產(chǎn)品搜索頁(yè)結(jié)果顯示

中，產(chǎn)品的分類以及搜索框需要盡量簡(jiǎn)潔明了，直接呼應(yīng)產(chǎn)品特點(diǎn)。而產(chǎn)品展

示方面，主要以搜索結(jié)果的主圖為主，搭配商鋪的熱門產(chǎn)品以及搜索產(chǎn)品的相

關(guān)系列產(chǎn)品，盡可能給消費(fèi)者呈現(xiàn)多樣化的搜索結(jié)果。（如圖15所示）

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

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

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

產(chǎn)品詳情頁(yè)是整個(gè)店鋪成交的關(guān)鍵頁(yè)面。所以在呈現(xiàn)的過(guò)程中選取了青食

15

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

品牌銷售情況最優(yōu)的麥片巧克力進(jìn)行詳情頁(yè)設(shè)計(jì)。

3.3.1麥片巧克力產(chǎn)品設(shè)計(jì)思路

麥片巧克力作為青食食品的熱門產(chǎn)品，其頁(yè)面設(shè)計(jì)需要展現(xiàn)青食食品對(duì)于

產(chǎn)品的用心以及產(chǎn)品在原料選擇、營(yíng)養(yǎng)價(jià)值、口感品味等方面的優(yōu)勢(shì)。對(duì)麥片

巧克力產(chǎn)品進(jìn)行詳情頁(yè)設(shè)計(jì)，首先對(duì)產(chǎn)品優(yōu)質(zhì)配料選擇上進(jìn)行展示，產(chǎn)品的無(wú)

添加原材料各自產(chǎn)地，選用的小麥、白砂糖以及乳粉，這些原料優(yōu)勢(shì)都需直觀

的進(jìn)行展示。其次在針對(duì)產(chǎn)品特點(diǎn)描述的內(nèi)容上，首先以產(chǎn)品詳情主圖進(jìn)行設(shè)

計(jì)，就產(chǎn)品的可每日食用、制作工藝、營(yíng)養(yǎng)價(jià)值以及對(duì)應(yīng)產(chǎn)品的口感，進(jìn)行相

應(yīng)展現(xiàn)，然后文案搭配“陪伴生活每一天”、“產(chǎn)品實(shí)拍，真實(shí)呈現(xiàn)”、“香

脆醇香，過(guò)口難忘”等特點(diǎn)進(jìn)行突顯。在口感展現(xiàn)的頁(yè)面上還可進(jìn)行不同形狀

的產(chǎn)品特點(diǎn)描述。產(chǎn)品詳情頁(yè)設(shè)計(jì)主體搭配整體奶白色的色調(diào)，通過(guò)實(shí)物場(chǎng)景

實(shí)拍，展現(xiàn)產(chǎn)品的特點(diǎn)。（如圖16所示）

3.3.2麥片巧克力產(chǎn)品設(shè)計(jì)效果

16

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

17

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

圖16麥片巧克力產(chǎn)品詳情頁(yè)效果圖

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

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

登錄頁(yè)面是網(wǎng)站會(huì)員功能的入口，這一界面的設(shè)計(jì)將會(huì)直接影響到網(wǎng)站會(huì)

員注冊(cè)量。登錄注冊(cè)頁(yè)面主要以相應(yīng)登錄和注冊(cè)不同功能入口為主，因?yàn)楫a(chǎn)品

受眾人群為老年人以及工作較為繁忙的上班族，所以在頁(yè)面設(shè)計(jì)時(shí)要關(guān)注到人

群特點(diǎn)，設(shè)計(jì)盡量簡(jiǎn)單扼要，可方便消費(fèi)者直截了當(dāng)?shù)膶ふ业降卿浗缑?。這種

18

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

簡(jiǎn)單明快的頁(yè)面設(shè)計(jì)會(huì)與目前網(wǎng)絡(luò)上的繁瑣復(fù)雜的頁(yè)面區(qū)分開，更加直觀的傳

遞出企業(yè)簡(jiǎn)單直接，用心做產(chǎn)品的思想理念。（如圖17所示）

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

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

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

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

購(gòu)物車是網(wǎng)站銷售功能的第一個(gè)環(huán)節(jié)，消費(fèi)者在沒(méi)有直接下單的情況下，

可以通過(guò)購(gòu)物車功能直接查看所需產(chǎn)品的總價(jià)格，也就是說(shuō)，購(gòu)物車頁(yè)面需要

對(duì)整個(gè)訂單進(jìn)行核對(duì)，并且對(duì)產(chǎn)品價(jià)格進(jìn)行計(jì)算，呈現(xiàn)出整個(gè)訂單的情況，包

括數(shù)量、細(xì)節(jié)以及價(jià)格等元素。（如圖18所示）

19

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

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

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

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

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

作為產(chǎn)品網(wǎng)上銷售的最后一步，訂單結(jié)算頁(yè)面承擔(dān)著消費(fèi)信息收貨地址確

認(rèn)等重要目的。而且也是購(gòu)物車頁(yè)面的后續(xù)支付流程，所以主要功能有兩個(gè)，

一個(gè)是核對(duì)消費(fèi)者的訂單明細(xì)以及付款渠道，另外一個(gè)是針對(duì)消費(fèi)者的訂單地

址進(jìn)行核對(duì)，以免發(fā)生訂單地址錯(cuò)誤，導(dǎo)致后續(xù)服務(wù)出現(xiàn)問(wèn)題的情況。在整體

界面設(shè)計(jì)方面，還是以簡(jiǎn)潔明快的風(fēng)格為主，背景顏色選用白色，不做其他元

素添加，只針對(duì)產(chǎn)品內(nèi)容服務(wù)信息方面進(jìn)行微調(diào)，顯示產(chǎn)品收貨地址、價(jià)格優(yōu)

惠數(shù)量以及付款方式等，主體沿用產(chǎn)品購(gòu)物車的設(shè)計(jì)感覺(jué)，以免讓消費(fèi)者產(chǎn)生

撕裂感。（如圖19所示）

20

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

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

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

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

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

個(gè)人中心是消費(fèi)者針對(duì)網(wǎng)站會(huì)員