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

湖南商務職業(yè)技術學院畢業(yè)設計

目錄

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

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

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

1.3色彩設計......................................................................................................2

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

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

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

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

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

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

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

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

2.7個人中心....................................................................................................15

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

3.1首頁視覺設計與制作................................................................................17

3.1.1設計思路.............................................................................................17

3.1.2設計效果.............................................................................................20

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

3.2.1設計思路.............................................................................................21

3.2.2設計效果.............................................................................................22

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

3.3.1自信寶寶潤膚乳設計思路.................................................................23

3.3.2自信寶寶潤膚乳設計效果.................................................................25

3.4登錄注冊頁視覺設計與制作....................................................................29

3.4.1設計思路.............................................................................................29

3.4.2設計效果.............................................................................................29

I

湖南商務職業(yè)技術學院畢業(yè)設計

3.5購物車視覺設計與制作............................................................................30

3.5.1設計思路.............................................................................................30

3.5.2設計效果.............................................................................................32

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

3.6.1設計思路.............................................................................................32

3.6.2設計效果.............................................................................................34

3.7個人中心視覺設計與制作........................................................................34

3.7.1設計思路.............................................................................................34

3.7.2設計效果.............................................................................................36

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

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

II

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

1.1項目背景

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

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

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

起消費者關注。

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

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

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

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

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

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

向消費者傳達啟初的品牌理念。同時在產(chǎn)品這一方面，應該把握品牌產(chǎn)品的重

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

1.2項目需求分析

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

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

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

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

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

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

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

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

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

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

利用圖片海報地形式去抓住消費者地眼球。

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

1

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

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

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

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

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

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

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

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

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

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

1.3色彩設計

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

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

男寶與女寶的護膚系列，于是我用藍色代表男寶，粉色代表女寶。使標準色與

品牌產(chǎn)品相呼應。我在設計時便使用藍色為主色，粉色為輔助色。其中藍色代

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

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

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

心去塑造品牌形象，增強品牌核心競爭力。藍色同時在一定程度上有活潑開朗

之意，嬰幼兒的生命都是可期的且是不斷生長的，用藍色象征著寶寶的頑強生

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

稚氣與乖巧。其散發(fā)出的孩童的幼稚正與啟初品牌符合，因為啟初產(chǎn)品針對的

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

上抓住消費者的購買欲望。藍色與粉色的交替使用增強設計頁面的跳躍性與靈

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

圖1所示）

2

湖南商務職業(yè)技術學院畢業(yè)設計

圖1標準色

1.4字體規(guī)范

設計采用了以下四種主要字體：微軟雅黑、Adobe黑體Std、華文細黑、等

線（如圖2所示）

圖2標準字體

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

2.1首頁

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

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

品、爆品、低價品，先利用新品的新穎性吸引消費者的興趣，再用熱銷的爆品

3

湖南商務職業(yè)技術學院畢業(yè)設計

進一步提升氣氛，最后利用低價折扣的字眼刺激消費者下單。末尾的關于啟初

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

費者心中樹立良好形象。

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

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

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

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

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

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

了然。

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

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

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

我設置了“更多寶貝”按鈕，消費者想要了解更多詳細信息可以點此了解。

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

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

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

4

湖南商務職業(yè)技術學院畢業(yè)設計

圖3首頁原型圖

5

湖南商務職業(yè)技術學院畢業(yè)設計

2.2搜索結(jié)果頁

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

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

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

搜索處直接橫排設置了搜索框、收藏圖標、購物車圖標。搜索框部分支持

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

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

寶貝。方便消費者對寶貝進行整理。

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

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

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

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

同時避免消費者的盲目選擇，引起不好的購物體驗感。

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

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

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

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

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

6

湖南商務職業(yè)技術學院畢業(yè)設計

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

2.3商品詳情頁

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

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

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

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

強化消費者購物體驗。

商品信息概括預覽模塊，設置了商品主圖展示，同時標注產(chǎn)品名稱、價格、

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

障、參數(shù)做成一欄，便于消費者點擊詳細查看，獲取信息。

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

7

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

營四部分，可以快速定位到商品詳情的這四大標題位置，促進商品詳情信息的

快速傳遞，增強體驗感。

新品上市快速導航通道我設置了三個區(qū)域，以豎式進行排列，商品以輪播

的方式進行展示。同時有“點擊更多”查看更多商品，給與消費者更多的選擇。

8

湖南商務職業(yè)技術學院畢業(yè)設計

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

9

湖南商務職業(yè)技術學院畢業(yè)設計

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

10

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

11

湖南商務職業(yè)技術學院畢業(yè)設計

12

湖南商務職業(yè)技術學院畢業(yè)設計

圖5商品詳情頁原型圖

13

湖南商務職業(yè)技術學院畢業(yè)設計

2.4登錄注冊頁

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

報，以圖片的形式增強設計頁面的生動感，不僅僅局限于登錄注冊功能，同時

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

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

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

圖6登錄注冊頁原型圖

2.5購物車

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

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

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

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

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

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

14

湖南商務職業(yè)技術學院畢業(yè)設計

率。（如圖7所示）

圖7購物車原型圖

2.6訂單結(jié)算頁

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

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

加地址的圖標，方便用戶對收貨信息進行設置，讓商家按用戶確認的地址配送

商品，保證消費者及時收到產(chǎn)品。

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

15

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

價格，有提交訂單按鈕可點擊進一步完成訂單。（如圖8所示）

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

2.7個人中心

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

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

導航為個人信息展示，包含查看頭像、昵稱、賬號、我的資料、我的訂單、我

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

齊全，從多個方面關注啟初會員，增強品牌信賴。

16

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

源。生日狂歡禮注重用戶的生日，驚喜禮包與雙倍積分僅限用戶生日當天領取，

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

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

圖9個人中心原型圖

17

湖南商務職業(yè)技術學院畢業(yè)設計

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

3.1首頁視覺設計與制作

3.1.1設計思路

首頁頁面背景為藍綠色背景的填充，輔以粉色花瓣及樹枝點綴，樹枝我用

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

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

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

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

Banner區(qū)域為兩張宣傳海報，分別為品牌節(jié)日活動banner、品牌爆品促銷

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

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

海報主題為宣傳啟初十周年慶典活動。采用左文本右圖的形式。背景為藍

色背景墻及灰白色的裝飾臺，增強立體感。用綠色棕櫚葉在左上角及右下角進

行裝飾。右上角設置了濾鏡中的鏡頭光暈效果，增加海報光澤。

海報主標題為“啟初十周年慶典”，對字體大小及效果進行了設計，為強調(diào)

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

目的紅色，吸引消費者眼球?！皢⒊酢迸c“慶典”二字字號相對較小，并用黃色

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

作為輔助圖形，呼應慶典活動?！凹儍?、天然、有機之初能量”放置在主副標題

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

象，宣傳品牌。英文“NATURE”起點綴作用。主副標題與品牌口號在排版上靠

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

打底，刺激消費者眼球，吸引下單。

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

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

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

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

海報生動感。（如圖10所示）

18

湖南商務職業(yè)技術學院畢業(yè)設計

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

②品牌爆品促銷banner:

海報背景顏色為藍色，采用左圖右文本的形式。在左上角有啟初品牌logo，

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

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

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

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

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

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

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

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

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

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

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

限量贈送、買一送一信息。買一送一處設計了一個綠色漸變圓形打底，并標注

了產(chǎn)品價格。激勵消費者下單。（如圖11所示）

圖11品牌爆品促銷banner

在新品特惠、熱銷推薦、折扣專區(qū)、關于啟初四個標題處都進行了統(tǒng)一設

19

湖南商務職業(yè)技術學院畢業(yè)設計

計，白色圓形與藍色直線組合以對稱的形式分布在標題左右兩邊，并用一個英

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

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

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

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

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

更有光澤。

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

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

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

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

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

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

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

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

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

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

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

描邊的Giving單詞，再次與G形黃色圖標呼應，保證一致性。下方有更多寶貝

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

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

文化進行左右的簡單排版，品牌文化下方還有點此更多的藍色圓角矩形按鈕，

方便消費者對啟初文化作更進一步的了解。（如圖12所示）

20

湖南商務職業(yè)技術學院畢業(yè)設計

3.1.2設計效果

圖12首頁效果圖

21

湖南商務職業(yè)技術學院畢業(yè)設計

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

3.2.1設計思路

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

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

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

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

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

索框旁處為取消。與其并齊顯示的還有藍色的收藏于購物車圖標。二者下方為

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

熱詞區(qū)域。

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

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

熱銷、價格區(qū)域為白色矩形打底，并在每一排的熱詞下方添加了虛線或直線進

行裝飾。

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

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

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

22

湖南商務職業(yè)技術學院畢業(yè)設計

3.2.2設計效果

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

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

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

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

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

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

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

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

頁面背景為藍綠色背景的填充，輔以粉色花瓣及樹枝點綴，樹枝我用的是

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

23

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

3.3.1自信寶寶潤膚乳設計思路

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

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

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

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

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

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

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

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

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

用白色直線進行間隔。按鈕旁邊有紅色的購物車圖標設計，用戶可以點擊查看

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

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

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

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

分類標題處設計了圓形與直線組合而成的圖形進行裝飾，分別對稱放在標題左

右。分類詞目下方有點擊收藏的圖標設計。為紅色填充圓形及白色愛心。詳情

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

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

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

標題文本為紅色，吸引消費者的注意，在瀏覽詳情頁的時候關注到此部分，起

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

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

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

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

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

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

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

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

24

湖南商務職業(yè)技術學院畢業(yè)設計

立體感。其主標題為植物天然“保護衣”，下方的副標題“48h呵護每一個自信

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

標設計，分別為溫和弱酸、有機認證、10大無添加。從三個方面又進一步概述

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

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

格、成分、服務等方面一一展開描述。四個部分的標題我統(tǒng)一進行了設計，我

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

角粉色描邊矩形。

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

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

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

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

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

其次是[嗅覺紐扣]，這里用翻開的書本作輔助圖形，為藍色、白色、粉色設計

感護精華名詞進行了詳細解釋，最后|而成的書籍。對Livings微萃技術及BSE?

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

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

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

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

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

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

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

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

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

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

修護力。三個文本下方有粉色的圓角矩形當作進度條，同時又有象征著向上的

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

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

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

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

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

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

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

25

湖南商務職業(yè)技術學院畢業(yè)設計

解，增加趣味性?？ㄆ瑸榘咨珗A角矩形打底，內(nèi)側(cè)添加粉色虛線描邊狀的圓角

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

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

個熱點問題并作出解答，每個問題都是白色矩形為底圖，并設計了Q與A字母

裝飾矩形。

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

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

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

3.3.2自信寶寶潤膚乳設計效果

26

湖南商務職業(yè)技術學院畢業(yè)設計

27

湖南商務職業(yè)技術學院畢業(yè)設計

28

湖南商務職業(yè)技術學院畢業(yè)設計

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

29

湖南商務職業(yè)技術學院畢業(yè)設計

3.4登錄注冊頁視覺設計與制作

3.4.1設計思路

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

排版的方式進行設計。頁面背景為灰藍色的漸變，添加城堡元素，動漫風格的

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

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

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

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

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

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

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

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

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

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

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

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

密碼時可以點擊進項相應操作。最后有登錄的藍色圓角矩形按鈕。（如圖15所

示）

3.4.2設計效果

30

湖南商務職業(yè)技術學院畢業(yè)設計

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

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

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

以獲得顧客的信任。

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

個人中心頁面，建立快速入口。逛一逛區(qū)域為“逛”的小圖標及圓角矩形合成

的設計，點擊可以看看別人買了啥。

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

且篩選旁有篩選的圖標，明確篩選功能。

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

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

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

31

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

處都是圓角矩形的按鈕設計。

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

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

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

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

（如圖16所示）

32

湖南商務職業(yè)技術學院畢業(yè)設計

3.5.2設計效果

圖16購物車效果圖

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

3.6.1設計思路

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

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

以獲得顧客的信任。

33

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

細長矩形，同樣有投影效果。底圖上方的文本旁有藍色的位置圖標，暗示收貨

地址信息。最右下角有默認地址及添加地址的藍色圓角矩形按鈕設計，添加投

影效果。

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

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

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

為藍色矩形，白色對號的設計。提交訂單處為藍色圓角矩形按鈕。（如圖17所

示）

34

湖南商務職業(yè)技術學院畢業(yè)設計

3.6.2設計效果

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

3.7個人中心視覺設計與制作

3.7.1設計思路

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

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

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

個人中心的流量是僅次于首頁的，我從這一點抓住個人中心的重點，主要設計

思路如下：

35

湖南商務職業(yè)技術學院畢業(yè)設計

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

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

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

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

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

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

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

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

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

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

設計，為藍綠漸變的大括號形狀。

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

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

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

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

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

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

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

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

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