啟初品牌網(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ī)范......................................................................................................3

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

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

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

2.3商品詳情頁..................................................................................................7

2.4登錄注冊頁................................................................................................13

2.5購物車........................................................................................................13

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

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

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

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

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

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

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

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

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

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

3.3.1自信寶寶潤膚乳設(shè)計(jì)思路.................................................................23

3.3.2自信寶寶潤膚乳設(shè)計(jì)效果.................................................................25

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

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

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

I

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

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

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

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

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

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

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

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

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

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

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

參考資料.........................................................................................................................38

II

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

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

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

1.1項(xiàng)目背景

隨著電商行業(yè)的不斷壯大，網(wǎng)絡(luò)把人與人之間的距離拉得越來越近。多數(shù)

品牌逐漸將自己的眼光放眼線上各大購物平臺，建立自己的獨(dú)立品牌形象網(wǎng)店，

用電商視覺去傳播品牌影響力，樹立品牌形象。通過極具吸引力的視覺效果引

起消費(fèi)者關(guān)注。

啟初網(wǎng)店與上海家化同屬一個(gè)網(wǎng)店，并沒有分離出來。

其網(wǎng)店設(shè)計(jì)較為簡單，在整個(gè)頁面的欄目中，只有Banner、品牌介紹、品

牌資訊、產(chǎn)品簡介、宣傳視頻。并沒有涉及很多的詳細(xì)信息，且無導(dǎo)航欄用以

幫助用戶找尋相關(guān)信息。但是啟初品牌的理念是值得認(rèn)同的，它始終堅(jiān)持探索

天然植物成分和護(hù)膚科技的創(chuàng)新融合，為消費(fèi)者提供更專業(yè)、安全、細(xì)致的母

嬰護(hù)理解決方案。所以在其品牌網(wǎng)店設(shè)計(jì)方面也應(yīng)大力宣傳，塑造企業(yè)文化，

向消費(fèi)者傳達(dá)啟初的品牌理念。同時(shí)在產(chǎn)品這一方面，應(yīng)該把握品牌產(chǎn)品的重

要性，詳細(xì)介紹產(chǎn)品，增加購買功能。

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

①品牌研究調(diào)研

啟初品牌產(chǎn)品很核心地利用品牌理念去塑造自身，其推出的產(chǎn)品都是針對

寶寶們的肌膚問題設(shè)計(jì)產(chǎn)品方案。特別是有推出針對女寶與男寶系列的產(chǎn)品。

抓住了消費(fèi)者的痛點(diǎn)，這是用產(chǎn)品自身優(yōu)勢去吸引消費(fèi)者。在今年的618大促

活動中，據(jù)統(tǒng)計(jì)，寶寶護(hù)膚類目的銷量在嬰童用品中排到了第四位。其中，與

啟初品牌相似的品牌，貝親、艾惟諾、紅色小象等都在這次活動中很好地宣傳

了自己。面對各大競爭者，啟初的品牌優(yōu)勢需要逐步提升。

在網(wǎng)店視覺形象這一塊，啟初企業(yè)文化的提及一定程度上讓消費(fèi)者對啟初

有了一定了解。但其品牌資訊與宣傳視頻兩個(gè)模塊的設(shè)置占據(jù)首頁太多空間，

且位置布局不合理。同時(shí)Banner設(shè)計(jì)太單一，并不是輪播的形式，不能很好地

利用圖片海報(bào)地形式去抓住消費(fèi)者地眼球。

②消費(fèi)者研究調(diào)研

1

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

寶寶護(hù)膚類產(chǎn)品所針對的消費(fèi)者并不是直接的，而是間接的。雖然產(chǎn)品針

對的使用者是寶寶，但是面向的購買者是25～30歲左右的女性，大多為寶寶母

親，啟初產(chǎn)品也有母嬰類但較少，大多都是針對寶寶的產(chǎn)品。所以在這方面，

網(wǎng)店形象方面，沒有注意到寶寶可愛、天真的特征。在視覺設(shè)計(jì)上沒有向用戶

傳達(dá)這種美感，其品牌形象網(wǎng)店基本沒有關(guān)與寶寶特征的元素設(shè)計(jì)，與用戶之

間的距離會加大，影響網(wǎng)店商品的轉(zhuǎn)化率。

③產(chǎn)品研究調(diào)研

啟初品牌網(wǎng)產(chǎn)品為植物之初、牛奶谷胚、水活育潤、新生特安等系列，其

下是洗發(fā)水、防曬乳、沐浴露、潤膚乳、驅(qū)蚊花露水、面霜等多種產(chǎn)品的集合。

在其網(wǎng)店中，對產(chǎn)品的宣傳微乎其微，僅僅只有對系列產(chǎn)品的文案介紹且無購

買渠道。并沒有單獨(dú)介紹某一產(chǎn)品的模塊。沒有意識到產(chǎn)品宣傳的重要性。這

讓消費(fèi)者了解不到品牌產(chǎn)品的詳細(xì)信息，商品的轉(zhuǎn)化率也就較低。

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

色彩設(shè)計(jì)靈感來源于啟初品牌產(chǎn)品自身。啟初涉及的多是嬰幼兒個(gè)人護(hù)理

產(chǎn)品。產(chǎn)品包裝設(shè)計(jì)上大多都是以藍(lán)色為主調(diào)。并且啟初的產(chǎn)品中特別設(shè)計(jì)了

男寶與女寶的護(hù)膚系列，于是我用藍(lán)色代表男寶，粉色代表女寶。使標(biāo)準(zhǔn)色與

品牌產(chǎn)品相呼應(yīng)。我在設(shè)計(jì)時(shí)便使用藍(lán)色為主色，粉色為輔助色。其中藍(lán)色代

表了嬰幼兒的天真與純真，干凈純潔的藍(lán)色寓示著啟初品牌的初心真誠，啟初

始終堅(jiān)持探索天然植物成分和護(hù)膚科技的創(chuàng)新融合，為消費(fèi)者提供更專業(yè)、安

全、細(xì)致的母嬰護(hù)理解決方案；且始終秉持著一顆取自然之初，育生命之初的

心去塑造品牌形象，增強(qiáng)品牌核心競爭力。藍(lán)色同時(shí)在一定程度上有活潑開朗

之意，嬰幼兒的生命都是可期的且是不斷生長的，用藍(lán)色象征著寶寶的頑強(qiáng)生

命力與啟初品牌的核心力量。粉色又是一種稚嫩、溫柔的顏色，代表著女寶的

稚氣與乖巧。其散發(fā)出的孩童的幼稚正與啟初品牌符合，因?yàn)閱⒊醍a(chǎn)品針對的

用戶多是嬰幼兒，無論是產(chǎn)品包裝還是產(chǎn)品宣傳上都帶有可愛的意味，從視覺

上抓住消費(fèi)者的購買欲望。藍(lán)色與粉色的交替使用增強(qiáng)設(shè)計(jì)頁面的跳躍性與靈

活性。同時(shí)我也采用了藍(lán)色與粉色的相近色，保證顏色的采用不是單調(diào)的。（如

圖1所示）

2

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

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

1.4字體規(guī)范

設(shè)計(jì)采用了以下四種主要字體：微軟雅黑、Adobe黑體Std、華文細(xì)黑、等

線（如圖2所示）

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

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

2.1首頁

首頁頁面我設(shè)計(jì)了新品特惠、熱銷推薦、折扣專區(qū)、關(guān)于啟初四大版塊。

四個(gè)版塊循序漸進(jìn)，主要是產(chǎn)品的推廣宣傳與品牌文化的傳遞。我逐步設(shè)置新

品、爆品、低價(jià)品，先利用新品的新穎性吸引消費(fèi)者的興趣，再用熱銷的爆品

3

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

進(jìn)一步提升氣氛，最后利用低價(jià)折扣的字眼刺激消費(fèi)者下單。末尾的關(guān)于啟初

版塊主要是緩和消費(fèi)者的情緒，直接以圖文的形式傳遞啟初的品牌文化，在消

費(fèi)者心中樹立良好形象。

在新品特惠版塊，對三種新品進(jìn)行了橫向的展示，但并不是直接平鋪擺放，

而是錯(cuò)落擺放，中間的產(chǎn)品相較位置較低，顯得畫面不會過于單調(diào)。三種新品

都是以矩形的形式對產(chǎn)品及產(chǎn)品名稱、價(jià)格進(jìn)行展示。

在熱銷推薦版塊，采用文本與圖片穿插的方式使畫面富靈活性，減少單調(diào)

感。熱銷推薦的產(chǎn)品多是系列產(chǎn)品的展示。左文本右圖片及左圖片右文本的排

版。文本方面將產(chǎn)品名稱、價(jià)格及購買信息清晰直觀表現(xiàn)出來，讓消費(fèi)者一目

了然。

在折扣專區(qū)，僅僅是單獨(dú)放置了產(chǎn)品的圖片，采用純圖片的左右排版方式。

并未像之前兩個(gè)版塊設(shè)置產(chǎn)品名稱、價(jià)格等信息，主要是緩減消費(fèi)者的視覺疲

勞。并且折扣產(chǎn)品都是價(jià)格較低的產(chǎn)品，在圖片展示上面吸引消費(fèi)者就已足夠。

我設(shè)置了“更多寶貝”按鈕，消費(fèi)者想要了解更多詳細(xì)信息可以點(diǎn)此了解。

在以上三個(gè)版塊中，產(chǎn)品放置數(shù)量是“3、2、2”，并沒有過多擺放產(chǎn)品，

讓消費(fèi)者產(chǎn)生厭煩心理。適當(dāng)?shù)奈谋九c圖片的組合可進(jìn)一步拉進(jìn)與消費(fèi)者的距

離，讓消費(fèi)者更加清晰了解啟初品牌的產(chǎn)品。（如圖3所示）

4

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

圖3首頁原型圖

5

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

2.2搜索結(jié)果頁

搜索結(jié)果頁主要分成三部分，搜索、搜索熱詞、搜索產(chǎn)品展示。采用中間

對齊模式的頁面布局，每個(gè)模塊均水平對齊排列，從視覺上給人一種整齊有序

的感覺，無繁雜冗亂之感。

搜索處直接橫排設(shè)置了搜索框、收藏圖標(biāo)、購物車圖標(biāo)。搜索框部分支持

文本與圖片搜索，方便消費(fèi)者在海量的產(chǎn)品中找尋自己心儀的那款產(chǎn)品。同時(shí)

右邊的收藏圖標(biāo)可查看已收藏的商品，購物車圖標(biāo)可以直接查看自己的購物車

寶貝。方便消費(fèi)者對寶貝進(jìn)行整理。

搜索熱詞部分采用列表式的排版方式，產(chǎn)品導(dǎo)航結(jié)構(gòu)簡單清晰、易于理解、

冷靜高效，幫助消費(fèi)者快速定位到對應(yīng)內(nèi)容，減少查找時(shí)間。類目根據(jù)寶寶洗

護(hù)、驅(qū)蚊防曬、日常護(hù)理、產(chǎn)品系列進(jìn)行分類，并可通過綜合、最新、熱銷、

價(jià)格進(jìn)行進(jìn)一步地篩選，方便消費(fèi)者根據(jù)自己的想法搜尋產(chǎn)品，提高查找效率，

同時(shí)避免消費(fèi)者的盲目選擇，引起不好的購物體驗(yàn)感。

產(chǎn)品展示部分采用上圖下文與列表式結(jié)合的方式，用兩行三列對部分產(chǎn)品

名稱、價(jià)格進(jìn)行介紹。這里我沒有擺放過多產(chǎn)品，以防引起消費(fèi)者的厭倦。6個(gè)

產(chǎn)品的展示可以幫助消費(fèi)者將搜索結(jié)果與預(yù)期結(jié)果進(jìn)行有效對比，找到期望產(chǎn)

品，提高搜索正確率。在每個(gè)產(chǎn)品大圖展示上我又設(shè)置了收藏按鈕，方便消費(fèi)

者將感興趣的商品移入收藏，同時(shí)又不占據(jù)購物車空間。（如圖4所示）

6

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

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

2.3商品詳情頁

商品詳情頁主要包含商品信息概括預(yù)覽、側(cè)導(dǎo)航欄、新品上市快速通道、

及商品詳情展示四大模塊。詳細(xì)介紹產(chǎn)品信息，使消費(fèi)者對產(chǎn)品有更深刻的了

解，獲得信任。增加消費(fèi)者的停留時(shí)間產(chǎn)生購買欲望，同時(shí)利用新品上市快速

通道達(dá)到關(guān)聯(lián)營銷的效果，引導(dǎo)消費(fèi)者對其店鋪中其它商品產(chǎn)生興趣，進(jìn)一步

強(qiáng)化消費(fèi)者購物體驗(yàn)。

商品信息概括預(yù)覽模塊，設(shè)置了商品主圖展示，同時(shí)標(biāo)注產(chǎn)品名稱、價(jià)格、

月銷、加購數(shù)量信息，設(shè)置加入購物車、立即購買按鈕。我將優(yōu)惠、活動、保

障、參數(shù)做成一欄，便于消費(fèi)者點(diǎn)擊詳細(xì)查看，獲取信息。

側(cè)導(dǎo)航欄分別為所有商品分類及商品詳情欄目導(dǎo)航。所有商品分類為清涼

7

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

純露、面霜、潤膚乳、防曬霜、驅(qū)蚊液、洗發(fā)沐浴泡泡6大類，方便消費(fèi)者查

看想要的商品，并在分類下方設(shè)置了收藏按鈕，便于將商品移入收藏。商品詳

情欄目導(dǎo)航包含自信啟蒙世界、自信源頭活水、自信貼心守護(hù)、萌寶成長大本

營四部分，可以快速定位到商品詳情的這四大標(biāo)題位置，促進(jìn)商品詳情信息的

快速傳遞，增強(qiáng)體驗(yàn)感。

新品上市快速導(dǎo)航通道我設(shè)置了三個(gè)區(qū)域，以豎式進(jìn)行排列，商品以輪播

的方式進(jìn)行展示。同時(shí)有“點(diǎn)擊更多”查看更多商品，給與消費(fèi)者更多的選擇。

8

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

商品詳情展示包含焦點(diǎn)圖、展示產(chǎn)品部分細(xì)節(jié)圖（展示消費(fèi)者熱切關(guān)注的

9

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

地方，獲得間接信任）、場景圖、產(chǎn)品相關(guān)問題解答、物流及商品服務(wù)信息。圖

10

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

文結(jié)合的方式從視覺上給予消費(fèi)者美學(xué)的感受，以一種輕松愉快的方式與消費(fèi)

者交流產(chǎn)品的相關(guān)信息，易于接受與理解。（如圖5所示）

11

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

12

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

圖5商品詳情頁原型圖

13

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

2.4登錄注冊頁

登錄注冊頁采用左右結(jié)構(gòu)布局，簡單直觀清晰。左邊為小型的產(chǎn)品宣傳海

報(bào)，以圖片的形式增強(qiáng)設(shè)計(jì)頁面的生動感，不僅僅局限于登錄注冊功能，同時(shí)

利用有限區(qū)域?qū)⒊醍a(chǎn)品進(jìn)行宣傳，引起用戶的注意，樹立品牌形象。右邊為

登錄注冊版塊，將登錄注冊合為一體，包含輸入賬號與密碼信息、忘記密碼等

操作，便于用戶精準(zhǔn)進(jìn)行登錄或是注冊，節(jié)省登錄注冊時(shí)間。（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

購物車包含我的個(gè)人中心、逛一逛、全部、降價(jià)、篩選、產(chǎn)品、猜你喜歡7

個(gè)模塊。其中我的個(gè)人中心、全部、降價(jià)、篩選為純文本的顯示，逛一逛為小

圖標(biāo)，點(diǎn)擊可以看看別人買了啥，達(dá)到互動的效果，類似于朋友圈的狀態(tài)，增

加樂趣。購物車內(nèi)的產(chǎn)品包含產(chǎn)品圖、名稱、價(jià)格、加購數(shù)量、刪除、移入收

藏等信息。消費(fèi)者可以將產(chǎn)品從購物車刪除也可以移入收藏，方便產(chǎn)品的整理。

在猜你喜歡處為產(chǎn)品的輪播展示。為用戶推薦更多相關(guān)產(chǎn)品，提升商品的轉(zhuǎn)化

14

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

率。（如圖7所示）

圖7購物車原型圖

2.6訂單結(jié)算頁

訂單結(jié)算頁包含回到上一頁、收貨信息管理、我的寶貝三個(gè)版塊。收獲信

息管理處為收貨人、電話、配送地址的信息展示，同時(shí)設(shè)有設(shè)為默認(rèn)地址與添

加地址的圖標(biāo)，方便用戶對收貨信息進(jìn)行設(shè)置，讓商家按用戶確認(rèn)的地址配送

商品，保證消費(fèi)者及時(shí)收到產(chǎn)品。

我的寶貝處包含產(chǎn)品的單價(jià)、數(shù)量、小計(jì)及名稱展示，為橫向排版。其下

15

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

方還有運(yùn)費(fèi)險(xiǎn)服務(wù)及開具發(fā)票勾選，顧客可以根據(jù)自己的需求選擇，提供顧客

必要的購物保障，建立顧客信任感。訂單頁勾選所需下單的寶貝后會自動計(jì)算

價(jià)格，有提交訂單按鈕可點(diǎn)擊進(jìn)一步完成訂單。（如圖8所示）

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

2.7個(gè)人中心

個(gè)人中心頁面包含左側(cè)導(dǎo)航、新人見面禮、啟初成長記、生日狂歡禮、積

分兌你想5個(gè)模塊。采用垂直對齊的布局，給予視覺上的經(jīng)典、莊重感。左側(cè)

導(dǎo)航為個(gè)人信息展示，包含查看頭像、昵稱、賬號、我的資料、我的訂單、我

的會員、我的積分、我的卡包、我的收藏、我的售后的功能，使個(gè)人中心功能

齊全，從多個(gè)方面關(guān)注啟初會員，增強(qiáng)品牌信賴。

16

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

新人見面禮部分為小型的宣傳海報(bào)，展示啟初的部分產(chǎn)品。啟初成長記部

分為3個(gè)等級的會員卡片展示，從低到高為啟小小、啟星星、啟霸霸，并介紹

達(dá)到各個(gè)等級的任務(wù)，以養(yǎng)成的形式激勵(lì)用戶不斷提升會員等級，穩(wěn)定店鋪客

源。生日狂歡禮注重用戶的生日，驚喜禮包與雙倍積分僅限用戶生日當(dāng)天領(lǐng)取，

積累用戶好感。積分兌你想部分為產(chǎn)品的輪播展示，為用戶推薦其他產(chǎn)品，吸

引用戶興趣，刺激消費(fèi)欲望。（如圖9所示）

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

17

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

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

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

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

首頁頁面背景為藍(lán)綠色背景的填充，輔以粉色花瓣及樹枝點(diǎn)綴，樹枝我用

的是帶有果實(shí)的，累累果實(shí)表明啟初品牌的收獲是豐盈的，不僅是在產(chǎn)品銷售

方面還是品牌宣傳方面都將是向著好的方向發(fā)展的；并在右上方添加了窗戶似

的投影。表明啟初品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心是未摻任

何雜質(zhì)的，以獲得顧客的信任。

Banner區(qū)域?yàn)閮蓮埿麄骱?bào)，分別為品牌節(jié)日活動banner、品牌爆品促銷

banner。其兩張banner的效果闡述如下：

①品牌節(jié)日活動banner：

海報(bào)主題為宣傳啟初十周年慶典活動。采用左文本右圖的形式。背景為藍(lán)

色背景墻及灰白色的裝飾臺，增強(qiáng)立體感。用綠色棕櫚葉在左上角及右下角進(jìn)

行裝飾。右上角設(shè)置了濾鏡中的鏡頭光暈效果，增加海報(bào)光澤。

海報(bào)主標(biāo)題為“啟初十周年慶典”，對字體大小及效果進(jìn)行了設(shè)計(jì)，為強(qiáng)調(diào)

“十周年”，其字體字號設(shè)置相對較大，“周年”二字添加了光澤的效果并為醒

目的紅色，吸引消費(fèi)者眼球。“啟初”與“慶典”二字字號相對較小，并用黃色

圓形打底及小型煙花點(diǎn)綴，減少單調(diào)。副標(biāo)題為“全場五折起”，用藍(lán)色的禮帶

作為輔助圖形，呼應(yīng)慶典活動?！凹儍?、天然、有機(jī)之初能量”放置在主副標(biāo)題

中間，為品牌口號，樹立品牌形象，以口號的形式間接在消費(fèi)者心目中留下印

象，宣傳品牌。英文“NATURE”起點(diǎn)綴作用。主副標(biāo)題與品牌口號在排版上靠

攏，以藍(lán)色的矩形框予以裝飾。副文“立即購買”在其下方，用紅色圓角矩形

打底，刺激消費(fèi)者眼球，吸引下單。

產(chǎn)品圖簡單增加了倒影的效果，擴(kuò)展視覺空間感，使產(chǎn)品更為立體，而且

更能體現(xiàn)右上角鏡頭光暈的作用，使產(chǎn)品更加有質(zhì)感。產(chǎn)品圖左下方我添加了

黃色圓形圖標(biāo)，有內(nèi)發(fā)光、外發(fā)光、光澤三種效果。文本為“10th”，代表十周

年。圖標(biāo)與文本整體又添加了投影的效果。讓圖標(biāo)帶有熠熠生輝的感覺，增加

海報(bào)生動感。（如圖10所示）

18

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

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

②品牌爆品促銷banner:

海報(bào)背景顏色為藍(lán)色，采用左圖右文本的形式。在左上角有啟初品牌logo，

海報(bào)整體有稻穗、綠葉、花朵的裝飾。其中稻穗表示產(chǎn)品洗發(fā)沐浴泡泡的原料

谷胚。左邊的產(chǎn)品圖我錯(cuò)落放置了兩個(gè)一樣的產(chǎn)品，并在產(chǎn)品圖后用綠葉、及

清澈的水波紋營造場景，產(chǎn)品功能集洗發(fā)、沐浴為一體，水波正是孩童進(jìn)行洗

澡沐浴時(shí)的一類要素，且水波的清澈與透亮表明產(chǎn)品的天然與潔凈。產(chǎn)品上方

添加了白色的弧形，增加動態(tài)的搖晃感。產(chǎn)品與文本中間有輔助圖形——泡泡，

表示產(chǎn)品是洗浴產(chǎn)品。

右邊文本部分，主標(biāo)題為“洗發(fā)沐浴泡泡”，副標(biāo)題為“干凈補(bǔ)水保濕，肌

膚水潤彈亮”講述了產(chǎn)品的功能，文字外圍有藍(lán)色圓角矩形裝飾，圓角矩形上

方有微笑的表情，傳達(dá)出孩童在使用該產(chǎn)品時(shí)的輕松愉悅心情，間接塑造產(chǎn)品

的口碑。輕柔/潔凈/易沖洗又進(jìn)一步概述了產(chǎn)品功能。品牌口號為“啟初，替

你呵護(hù)每一位寶寶”，表述啟初品牌的為消費(fèi)者服務(wù)的衷心。副文部分包含新品

限量贈送、買一送一信息。買一送一處設(shè)計(jì)了一個(gè)綠色漸變圓形打底，并標(biāo)注

了產(chǎn)品價(jià)格。激勵(lì)消費(fèi)者下單。（如圖11所示）

圖11品牌爆品促銷banner

在新品特惠、熱銷推薦、折扣專區(qū)、關(guān)于啟初四個(gè)標(biāo)題處都進(jìn)行了統(tǒng)一設(shè)

19

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

計(jì)，白色圓形與藍(lán)色直線組合以對稱的形式分布在標(biāo)題左右兩邊，并用一個(gè)英

文單詞概括標(biāo)題的主要內(nèi)容，分別為New、Hot、Low、Brand。

新品特惠區(qū)域，以相框的形式對三種產(chǎn)品進(jìn)行了展示，利用藍(lán)色矩形，并

在產(chǎn)品后方添加了淡藍(lán)色及白色的發(fā)光背景，對產(chǎn)品進(jìn)行了倒影效果的制作，

增加立體感，根據(jù)產(chǎn)品的特性，添加了與產(chǎn)品相關(guān)的植物予以裝飾?？勺屜M(fèi)

者對產(chǎn)品有一定初步了解。整體進(jìn)行了外發(fā)光效果的制作，讓產(chǎn)品展示看起來

更有光澤。

熱銷推薦區(qū)域，也是用相框的形式展示了感官啟蒙系列及植物之初系列的

產(chǎn)品。文本處統(tǒng)一將產(chǎn)品名稱以黃色矩形打底并添加了相關(guān)英文的解釋。下方

為產(chǎn)品的相關(guān)介紹，以白色圓角矩形打底。價(jià)格表示處特意將先前價(jià)格與現(xiàn)在

價(jià)格進(jìn)行了字號上的對比，突出產(chǎn)品價(jià)格的優(yōu)惠。購買按鈕為紅色圓角矩形，

為BUY>。產(chǎn)品圖的外框與新品特惠處一樣，但產(chǎn)品背景底色為白色，并且沒有

對產(chǎn)品進(jìn)行效果處理。

折扣專區(qū)區(qū)域，對牛奶谷胚寶寶潤膚露及驅(qū)蚊花露水兩款產(chǎn)品進(jìn)行展示，

背景為藍(lán)色描邊白色填充的不規(guī)則圓角矩形，第一款產(chǎn)品增加了牛奶的裝飾，

與產(chǎn)品名稱中的“牛奶”二字相呼應(yīng)，第二款產(chǎn)品增加了水波的裝飾，表示產(chǎn)

品的清涼特性。兩款產(chǎn)品中間有G形黃色圖標(biāo)，靈感來源于啟初logo中的

Giving單詞。產(chǎn)品右邊以直排文本展示了更多折扣，等你來搶及藍(lán)色填充白色

描邊的Giving單詞，再次與G形黃色圖標(biāo)呼應(yīng)，保證一致性。下方有更多寶貝

的藍(lán)色圓角矩形按鈕，可以方便消費(fèi)者查看更多產(chǎn)品，增加購物選擇。

關(guān)于啟初區(qū)域，設(shè)置了一個(gè)長方的白色透明矩形，將啟初榮譽(yù)證書及品牌

文化進(jìn)行左右的簡單排版，品牌文化下方還有點(diǎn)此更多的藍(lán)色圓角矩形按鈕，

方便消費(fèi)者對啟初文化作更進(jìn)一步的了解。（如圖12所示）

20

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

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

圖12首頁效果圖

21

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

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

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

搜索結(jié)果頁頁面背景為藍(lán)綠色背景的填充，輔以樹枝點(diǎn)綴。在右上方添加

了窗戶似的投影。表明啟初品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心

是未摻任何雜質(zhì)的，以獲得顧客的信任。

搜索框處為兩個(gè)不規(guī)則的圓角矩形合并而成。搜索二字處的顏色較深，搜

索內(nèi)容處較淡，形成對比。在搜索框內(nèi)還有照相機(jī)的圖標(biāo)，支持拍照搜索。搜

索框旁處為取消。與其并齊顯示的還有藍(lán)色的收藏于購物車圖標(biāo)。二者下方為

灰色的直線與矩形合并而成的過渡圖形。起一定的過渡作用，承接下方的搜索

熱詞區(qū)域。

搜索熱詞區(qū)域，在所有分類一欄，所有分類標(biāo)題文字為較深的藍(lán)色矩形打

底，下方的熱詞為淺藍(lán)色打底，并在下方添加了陰影。在右邊的綜合、最新、

熱銷、價(jià)格區(qū)域?yàn)榘咨匦未虻?，并在每一排的熱詞下方添加了虛線或直線進(jìn)

行裝飾。

搜索產(chǎn)品展示區(qū)域，所有產(chǎn)品都是統(tǒng)一的設(shè)計(jì)，以藍(lán)色描邊的圓角矩形進(jìn)

行打底，填充部分為各產(chǎn)品的場景圖，每個(gè)產(chǎn)品右上角都有白色填充紅色描邊

的愛心按鈕，可以進(jìn)行收藏。（如圖13所示）

22

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

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

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

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

產(chǎn)品詳情頁是促進(jìn)消費(fèi)者下單，提升商品轉(zhuǎn)化率的重要頁面。在分析介紹

啟初品牌過程中，根據(jù)品牌產(chǎn)品的種類、特性、效用及產(chǎn)品反響我特別挑選出

了“自信寶寶潤膚乳”這款產(chǎn)品進(jìn)行詳情頁設(shè)計(jì)。啟初的六大產(chǎn)品系列中，感

官啟蒙系列在消費(fèi)者群體的口碑都是蠻不錯(cuò)的，自信寶寶潤膚乳便是其中的一

款女寶產(chǎn)品。詳情頁我共設(shè)計(jì)了商品信息概括預(yù)覽、側(cè)導(dǎo)航欄、新品上市快速

通道、及商品詳情展示四大模塊。

頁面背景為藍(lán)綠色背景的填充，輔以粉色花瓣及樹枝點(diǎn)綴，樹枝我用的是

帶有果實(shí)的，累累果實(shí)表明啟初品牌的收獲是豐盈的，不僅是在產(chǎn)品銷售方面

23

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

還是品牌宣傳方面都將是向著好的方向發(fā)展的；并在右上方添加了窗戶似的投

影。表明啟初品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心是未摻任何雜

質(zhì)的，以獲得顧客的信任。以下是我設(shè)計(jì)的自信寶寶潤膚乳詳情頁的設(shè)計(jì)思路。

3.3.1自信寶寶潤膚乳設(shè)計(jì)思路

因?yàn)楫a(chǎn)品是針對女寶使用的，所以主色調(diào)我利用了粉色。表現(xiàn)女寶的稚嫩

溫柔、可愛、甜美的形象。

商品信息概括預(yù)覽區(qū)域，商品主圖我設(shè)計(jì)粉色描邊粉白漸變填充的圓角矩

形打底。旁邊的產(chǎn)品名稱直接為簡單文本展示，下方的優(yōu)惠、活動、保障、參

數(shù)為灰色描邊的圓角矩形裝飾，四個(gè)要素中間添加了灰色直線作為間隔，界明

區(qū)域。價(jià)格我設(shè)置了先前價(jià)格及現(xiàn)在價(jià)格，在字號大小上進(jìn)行了區(qū)分，表明現(xiàn)

在價(jià)格為顯眼的紅色，在消費(fèi)者心中留下印象。產(chǎn)品加購數(shù)量處，我設(shè)計(jì)了粉

色描邊的不規(guī)則形狀，并設(shè)計(jì)了表明加減數(shù)量的粉色箭頭。右邊為加入購物車

和立即購買的按鈕，按鈕設(shè)計(jì)為白色描邊及粉色填充的圓角矩形，兩文本中間

用白色直線進(jìn)行間隔。按鈕旁邊有紅色的購物車圖標(biāo)設(shè)計(jì)，用戶可以點(diǎn)擊查看

自己購物車的寶貝并管理購物車寶貝，形成一個(gè)快速通道。

側(cè)導(dǎo)航欄區(qū)域，左側(cè)包含兩個(gè)導(dǎo)航欄，所有產(chǎn)品導(dǎo)航處，所有產(chǎn)品為大標(biāo)

題，用粉色描邊的八邊形進(jìn)行打底，其中填充圖片為一株花束，無特殊含義，

僅起點(diǎn)綴作用。下方的所有分類為長方的灰色描邊粉色填充的圓角矩形。所有

分類標(biāo)題處設(shè)計(jì)了圓形與直線組合而成的圖形進(jìn)行裝飾，分別對稱放在標(biāo)題左

右。分類詞目下方有點(diǎn)擊收藏的圖標(biāo)設(shè)計(jì)。為紅色填充圓形及白色愛心。詳情

頁導(dǎo)航部分，也是長方的灰色描邊粉色填充的圓角矩形作為底圖，四大欄目的

左邊有黑色直線及圓形裝飾，圓形數(shù)量及位置對應(yīng)四大欄目。

新品上市快速通道區(qū)域，新品上市標(biāo)題為粉色填充灰色描邊的矩形打底，

標(biāo)題文本為紅色，吸引消費(fèi)者的注意，在瀏覽詳情頁的時(shí)候關(guān)注到此部分，起

到關(guān)聯(lián)營銷的效果。這里有三種產(chǎn)品展示，產(chǎn)品都是單獨(dú)放置在白色填充灰色

描邊的矩形背景圖上，矩形低端上方設(shè)計(jì)了粉色透明的小矩形塊用來放置產(chǎn)品

名稱。三種產(chǎn)品圖下方有三個(gè)白色圓形表輪播效果，且有紅色文本“點(diǎn)擊更

多》”，為那些想要挑選更多商品的消費(fèi)者提供便利。

商品詳情展示區(qū)域，最上方有粉色矩形條承載詳情與評價(jià)二詞。下方是關(guān)

于自信寶寶潤膚乳的詳細(xì)圖文介紹。焦點(diǎn)圖模塊背景顏色為深淺粉色的部分填

充，左下方放置了荷葉進(jìn)行點(diǎn)綴，無特殊意義，增添畫面元素。我將產(chǎn)品放置

圖片中間核心區(qū)域，并設(shè)計(jì)粉色的立方體，使產(chǎn)品倒影顯現(xiàn)在立方體上，增強(qiáng)

24

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

立體感。其主標(biāo)題為植物天然“保護(hù)衣”，下方的副標(biāo)題“48h呵護(hù)每一個(gè)自信

寶寶”，側(cè)面反映產(chǎn)品的長效保濕功能及產(chǎn)品系列。右側(cè)為三個(gè)暗粉色的圓形圖

標(biāo)設(shè)計(jì)，分別為溫和弱酸、有機(jī)認(rèn)證、10大無添加。從三個(gè)方面又進(jìn)一步概述

了產(chǎn)品的特性。先在消費(fèi)者心目中初步建立產(chǎn)品認(rèn)識。

接下來我便從四個(gè)部分對該產(chǎn)品進(jìn)行詳細(xì)講解，包含產(chǎn)品功能、特性、規(guī)

格、成分、服務(wù)等方面一一展開描述。四個(gè)部分的標(biāo)題我統(tǒng)一進(jìn)行了設(shè)計(jì)，我

用三個(gè)元素對標(biāo)題進(jìn)行裝飾，分別為粉色花邊形狀、單瓣粉色花瓣及不規(guī)則圓

角粉色描邊矩形。

自信啟蒙世界區(qū)域，先以3大感覺器官，扣好第一?？圩娱_頭。文本以粉

色圓角矩形作載體。我特別對數(shù)字“3”進(jìn)行了斜面浮雕及描邊的效果設(shè)計(jì)，強(qiáng)

調(diào)三大感覺器官。首先是[視覺紐扣]，有呆萌、wink、專注、思考四大精靈，

每一個(gè)都是用圓形進(jìn)行圖片的剪切設(shè)計(jì)與藍(lán)色描邊圓角矩形結(jié)合，四大精靈右

上方設(shè)有粉色的箭頭及轉(zhuǎn)一轉(zhuǎn)的文本，提醒消費(fèi)者該產(chǎn)品的小設(shè)計(jì)如何使用。

其次是[嗅覺紐扣]，這里用翻開的書本作輔助圖形，為藍(lán)色、白色、粉色設(shè)計(jì)

感護(hù)精華名詞進(jìn)行了詳細(xì)解釋，最后|而成的書籍。對Livings微萃技術(shù)及BSE?

是[觸覺紐扣]，這里僅一筆帶過了柔珠泡沫+無淚配方，并放置了產(chǎn)品的小型圖。

自信源頭活水區(qū)域，分別從三個(gè)小方面對產(chǎn)品進(jìn)行了講解，三部分的標(biāo)題

為數(shù)字加文本，并用灰色直線進(jìn)行了簡單的裝飾。第一部分為天然有機(jī)，溫和

不添加。以圖標(biāo)及文字的形式講述了產(chǎn)品的部分無添加成分。先以較大的分割

的數(shù)字零表示4000+風(fēng)險(xiǎn)成分無添加，在其旁邊放置了布偶小熊的圖形，小熊是

小孩喜歡玩弄的，玩具元素的添加又在表現(xiàn)產(chǎn)品針對的消費(fèi)群是小孩。其下方

列舉了五大未添加的成分，并結(jié)合產(chǎn)品圖片以兩個(gè)白色箭頭指向，暗示產(chǎn)品敏

感肌膚也使用，消除消費(fèi)者顧慮。第二部分為舒敏養(yǎng)護(hù)，直入肌膚深處。這部

分以細(xì)節(jié)圖為主，將產(chǎn)品的質(zhì)地放大，以粉色的五邊蛛網(wǎng)形狀為載體分別散發(fā)

出產(chǎn)品的五個(gè)特性，潤膚乳放其中央。下方又延伸出三力。保濕力、滋潤力、

修護(hù)力。三個(gè)文本下方有粉色的圓角矩形當(dāng)作進(jìn)度條，同時(shí)又有象征著向上的

箭頭，表示“up”。第三部分為天然親膚，近距離接觸寶寶。背景為白色圓角矩

形，用透明綠葉點(diǎn)綴。以“S”形對產(chǎn)品的相關(guān)成分進(jìn)行了介紹。通過左圖右文

本、右圖左文本穿插展示。圖片都以圓形進(jìn)行了統(tǒng)一剪切，外圍以灰色描邊圓

形裝飾，并添加了投影的效果。每個(gè)部分過渡的區(qū)域有圓弧狀的虛線進(jìn)行引導(dǎo)。

自信貼心守護(hù)區(qū)域，利用產(chǎn)品裸圖進(jìn)行細(xì)節(jié)上的說明，以藍(lán)色圓形及直線

的形式分別指出產(chǎn)品設(shè)計(jì)上的三大優(yōu)良特性。每個(gè)特性的文本都有粉色虛線描

邊狀的圓角矩形作為外框。接下來是產(chǎn)品信息的介紹，以ID卡片的形式進(jìn)行講

25

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

解，增加趣味性。卡片為白色圓角矩形打底，內(nèi)側(cè)添加粉色虛線描邊狀的圓角

矩形，并在正上方設(shè)有小女孩頭像，表示產(chǎn)品時(shí)針對女寶的。產(chǎn)品系列、產(chǎn)品

規(guī)格等文本都是用粉色圓角矩形進(jìn)行打底。接著穿插問答式的文本，設(shè)置了三

個(gè)熱點(diǎn)問題并作出解答，每個(gè)問題都是白色矩形為底圖，并設(shè)計(jì)了Q與A字母

裝飾矩形。

萌寶成長大本營區(qū)域，以循序漸進(jìn)的方式依次將與萌寶成長有關(guān)的產(chǎn)品進(jìn)

行羅列，每款產(chǎn)品下方都有點(diǎn)擊查看按鈕，按鈕為粉色圓角矩形狀。最后區(qū)域

為關(guān)于配送及物流方面的服務(wù)，以純文本的形式展示。（如圖14所示）

3.3.2自信寶寶潤膚乳設(shè)計(jì)效果

26

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

27

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

28

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

圖14自信寶寶潤膚乳詳情頁效果圖

29

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

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

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

登錄注冊頁面考慮到登錄注冊的便利性與簡約性。我在設(shè)計(jì)上以左右對稱

排版的方式進(jìn)行設(shè)計(jì)。頁面背景為灰藍(lán)色的漸變，添加城堡元素，動漫風(fēng)格的

城堡圖表現(xiàn)出孩子的天真與簡單的樂趣。

頁面左邊以產(chǎn)品圖及一些兒童玩具組合營造寶寶成長樂園，背景為透明的

田字格，一方面為“寶寶成長樂園”的載體，規(guī)范文本，一方面又表示小孩成

長過程中須經(jīng)歷受教育的階段，其中田字格便是其在成長過程中會接觸到的。

玩具也是益智類型的玩具，與寶寶成長相聯(lián)系。而啟初產(chǎn)品正是傳達(dá)出寶寶健

康成長與其密不可分，啟初呵護(hù)每一位寶寶的成長，為每一位寶寶打造獨(dú)特的

成長樂園，傳遞核心品牌理念。

右邊為登錄注冊區(qū)域，所設(shè)計(jì)的圖形皆是圓角矩形。這里為淡藍(lán)色的圓角

矩形，下方重疊有白色圓角矩形稍加裝飾。登錄與注冊標(biāo)題在字號上進(jìn)行了區(qū)

分，登錄字號稍大，且其下方有圓角的直線裝飾。輸入賬號及密碼信息處為豎

列的兩個(gè)藍(lán)色圓角矩形，圓角矩形內(nèi)左側(cè)有賬號及密碼的圖標(biāo)，密碼輸入框右

側(cè)還有顯示隱藏功能的眼睛圖標(biāo)。右下方有純文本忘記密碼，在用戶忘記自己

密碼時(shí)可以點(diǎn)擊進(jìn)項(xiàng)相應(yīng)操作。最后有登錄的藍(lán)色圓角矩形按鈕。（如圖15所

示）

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

30

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

圖15登錄注冊頁效果圖

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

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

購物車頁面背景為藍(lán)綠色背景的填充，在右上方添加了窗戶似的投影。表

明啟初品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心是未摻任何雜質(zhì)的，

以獲得顧客的信任。

我的個(gè)人中心區(qū)域，有藍(lán)色向右的箭頭予以點(diǎn)綴，用戶可點(diǎn)擊快速跳轉(zhuǎn)到

個(gè)人中心頁面，建立快速入口。逛一逛區(qū)域?yàn)椤肮洹钡男D標(biāo)及圓角矩形合成

的設(shè)計(jì)，點(diǎn)擊可以看看別人買了啥。

全部、降價(jià)、篩選文本水平展示，文本旁的數(shù)字根據(jù)購物車內(nèi)的寶貝而定，

且篩選旁有篩選的圖標(biāo)，明確篩選功能。

產(chǎn)品區(qū)域，每款產(chǎn)品都使用了統(tǒng)一設(shè)計(jì)，右橫向的灰色描邊白色填充的圓

角矩形作為底圖。左側(cè)有勾選圖標(biāo)，由圓形與對號組合而成。右側(cè)的產(chǎn)品為藍(lán)

色圓角矩形打底再添加單一的產(chǎn)品裸圖。加購數(shù)量處使用了灰色描邊圓角矩形

31

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

及直線合成的不規(guī)則圖形，方便加減寶貝數(shù)量。最右側(cè)有刪除與移入收藏的小

按鈕，為藍(lán)色矩形。結(jié)算處為白色矩形設(shè)置了投影的效果。優(yōu)惠明細(xì)與去結(jié)算

處都是圓角矩形的按鈕設(shè)計(jì)。

猜你喜歡區(qū)域，猜你喜歡標(biāo)題處文本下方底圖為白色圓角矩形，標(biāo)題兩側(cè)

有藍(lán)色圓形及直線進(jìn)行裝飾。下方產(chǎn)品展示為5款產(chǎn)品的輪播展示，輪播按鈕

為白色圓角矩形及向左向右的箭頭。產(chǎn)品為藍(lán)色描邊白色填充的底圖，產(chǎn)品圖

片為場景圖放置其上方。并在中間位置添加了藍(lán)色透明矩形用以標(biāo)注產(chǎn)品名稱。

（如圖16所示）

32

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

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

圖16購物車效果圖

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

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

訂單結(jié)算頁頁面背景為藍(lán)綠色背景的填充，在右上方添加了窗戶似的投影。

表明啟初品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心是未摻任何雜質(zhì)的，

以獲得顧客的信任。

33

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

回到上一頁區(qū)域與購物車頁面的回到我的個(gè)人中心設(shè)計(jì)一致，具有同步性。

收貨信息管理區(qū)域，由白色矩形打底，添加投影效果，矩形上方有藍(lán)色的

細(xì)長矩形，同樣有投影效果。底圖上方的文本旁有藍(lán)色的位置圖標(biāo)，暗示收貨

地址信息。最右下角有默認(rèn)地址及添加地址的藍(lán)色圓角矩形按鈕設(shè)計(jì)，添加投

影效果。

我的寶貝區(qū)域，標(biāo)題設(shè)計(jì)與回到上一頁一樣。寶貝展示與訂單計(jì)算頁類似，

除勾選圖標(biāo)及產(chǎn)品圖、產(chǎn)品名稱一樣，不同之處在于添加了單價(jià)、數(shù)量、小計(jì)

元素，為純文本顯示。所有寶貝左下方有運(yùn)費(fèi)險(xiǎn)服務(wù)及開具發(fā)票的勾選按鈕，

為藍(lán)色矩形，白色對號的設(shè)計(jì)。提交訂單處為藍(lán)色圓角矩形按鈕。（如圖17所

示）

34

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

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

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

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

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

個(gè)人中心頁面是個(gè)人信息和功能的集合入口，只有用戶自己能看到。所以

需要賦予用戶極大的主動權(quán)，意識到品牌為自己的服務(wù)是獨(dú)特的，從心理上抓

住用戶的品牌傾向思維。我設(shè)計(jì)的個(gè)人中心主要由個(gè)人信息區(qū)和功能模塊組成，

個(gè)人中心的流量是僅次于首頁的，我從這一點(diǎn)抓住個(gè)人中心的重點(diǎn)，主要設(shè)計(jì)

思路如下：

35

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

頁面背景為藍(lán)綠色背景的填充，在右上方添加了窗戶似的投影。表明啟初

品牌如窗戶玻璃一樣明凈透亮，寓意著啟初的初心是未摻任何雜質(zhì)的，以獲得

顧客的信任。在頁面下方添加了兩個(gè)兒童玩具圖形，增添頁面的趣味性。

左側(cè)導(dǎo)航區(qū)域，用戶首先最能關(guān)注到此塊區(qū)域，它包含了個(gè)人信息的展示。

底圖為粉色矩形，并利用剪切蒙版依據(jù)矩形的輪廓添加了山脈的簡筆圖形。山

峰眾多意味著個(gè)人中心為用戶提供的功能也很多，從不同角度出發(fā)考慮用戶需

求。頭像處為圓形輪廓，頭像右下角添加了用戶的等級形象，幫助用戶了解自

己的會員等級并積極向更高的等級發(fā)展，培養(yǎng)用戶。我的會員處有明顯的顯示，

便于用戶意識到自己所處頁面，顯示條為添加了投影效果的白色矩形。

新人見面禮、啟初成長記、生日狂歡禮、積分兌你想標(biāo)題處都作了統(tǒng)一的

設(shè)計(jì)，為藍(lán)綠漸變的大括號形狀。

新人見面禮區(qū)域，為小型的banner展示，底圖為帶有褶皺的灰白頁，用葉

子進(jìn)行點(diǎn)綴，產(chǎn)品圖放置在右邊。

啟初成長記區(qū)域，設(shè)計(jì)了三種會員卡片，卡片都采用了對稱漸變的填充，

且卡片后有綠葉裝飾，三個(gè)會員形象都是根據(jù)品牌名稱中的“啟”來進(jìn)行相應(yīng)

的命名。會員形象都是帶卡通性質(zhì)的，符合啟初品牌針對消費(fèi)者的萌趣特征。

卡片統(tǒng)一放置在白色的圓角矩形上。

生日狂歡禮區(qū)域，包含驚喜禮包與雙倍積分的卡片設(shè)計(jì)，卡片為統(tǒng)一的藍(lán)

色圓角矩形狀，驚喜禮包為黑色描邊的禮盒圖形，其上方有白色對話框狀承載

“快來拆盲盒吧”文本，右側(cè)有啟初小程序虛擬二維碼設(shè)