花花牛品牌網(wǎng)店視覺方案設計

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

目錄

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

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

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

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

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

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

2.1首頁..............................................................................................................4

2.2搜索結果頁..................................................................................................6

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

2.4登錄注冊頁..................................................................................................9

2.5購物車........................................................................................................10

2.6訂單結算頁................................................................................................11

2.7個人中心....................................................................................................12

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

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

3.1.1設計思路.............................................................................................14

3.1.2設計效果.............................................................................................16

3.2搜索結果頁視覺設計與制作....................................................................17

3.2.1設計思路.............................................................................................17

3.2.2設計效果.............................................................................................18

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

3.3.1產(chǎn)品名稱設計思路.............................................................................19

3.3.2產(chǎn)品名稱設計效果.............................................................................19

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

3.4.1設計思路.............................................................................................22

3.4.2設計效果.............................................................................................22

I

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

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

3.5.1設計思路.............................................................................................22

3.5.2設計效果.............................................................................................23

3.6訂單結算頁視覺設計與制作....................................................................23

3.6.1設計思路.............................................................................................23

3.6.2設計效果.............................................................................................24

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

3.7.1設計思路.............................................................................................25

3.7.2設計效果.............................................................................................25

4總結..........................................................................................................................27

參考資料............................................................28

II

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

花花牛品牌網(wǎng)店視覺方案設計

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

1.1項目背景

近年來，隨著電子商務的發(fā)展，網(wǎng)購已成為人們購物的主要方式之一，同

時網(wǎng)絡購物也為企業(yè)帶來了巨大的網(wǎng)絡商機。因此，越來越多的企業(yè)選擇在網(wǎng)

絡上開設自己的網(wǎng)店。在這個競爭激烈的市場上，一個好的網(wǎng)店視覺設計能夠

很好地吸引顧客，提高銷售額，提升品牌形象。因此，對于開設網(wǎng)店的企業(yè)來

說，進行網(wǎng)店視覺設計是非常必要的，畢竟消費者購物時只能通過網(wǎng)上的文字

和圖片等信息來了解店鋪和產(chǎn)品。視覺設計不僅包括網(wǎng)站整體的色彩搭配、排

版、圖片處理等方面，還需要考慮到用戶體驗、頁面風格等細節(jié)方面的設計。

一個好的網(wǎng)店視覺設計能夠為企業(yè)提升品牌形象，拓展市場份額，增強競爭力。

在龐大的市場競爭激烈下，眾多品牌和企業(yè)選擇成立自己的獨立網(wǎng)店。例

如：蒙牛在天貓、京東等電商平臺有售。同時，蒙牛也擁有自己的獨立官方網(wǎng)

店“蒙牛乳選網(wǎng)上商城”，作為企業(yè)線上直營渠道；還有光明，光明是中國奶制

品行業(yè)領先企業(yè)，其官方網(wǎng)店在天貓、京東等電商平臺均有售。此外，光明乳

業(yè)旗下的“光明匯”官方網(wǎng)店也是企業(yè)線上直營渠道之一。建立獨立的網(wǎng)店不

僅能更好地為消費者提供全系列產(chǎn)品線上訂購，而且能夠提供更多的精細化服

務，例如特價促銷、積分兌換等。同時品牌本身自己也能從中獲取更多的客戶

數(shù)據(jù)，實現(xiàn)更加全面化、定向化、標準化的營銷活動，從而使自己的品牌形象

更加突出。

河南花花牛品牌成立于1997年，主營業(yè)務為鮮奶、乳飲酸乳蛋白等產(chǎn)品的

生產(chǎn)和銷售、經(jīng)過多年的發(fā)展，已成為河南省乃至全國乳制品行業(yè)的知名品牌。

同時品牌在其官方網(wǎng)站“花花牛官網(wǎng)”上提供了公司概況、產(chǎn)品介紹、新聞動

態(tài)、加盟指南等信息，并且在天貓、京東、拼多多扥電商平臺擁有自己的官方

旗艦店，除了可以購買鮮奶、酸奶、乳飲料等產(chǎn)品，消費者還可以參與各種促

銷活動和領取優(yōu)惠劵等?？傊幽匣ɑㄅＦ放茡碛休^強的實力和影響力，其

獨立的品牌網(wǎng)店也提供方便快捷的購買服務，讓消費者可以更加方便地購買到

自己需要的花花牛牛奶產(chǎn)品。

1

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

1.2項目需求分析

隨著當今時代互聯(lián)網(wǎng)的快速發(fā)展和消費者逐漸形成頻繁在線上購物的習慣，

各個品牌都在努力積極創(chuàng)建自己的電商平臺，以努力滿足消費者在線上購物各

方面的需求。河南花花牛企業(yè)作為一個知名的乳制品品牌，也更加需要對其網(wǎng)

店頁面進行重新設計，以適應現(xiàn)階段的市場和消費者的需求，提高品牌的知名

度和競爭力。首先，作為一個知名品牌，河南花花牛企業(yè)需要對其獨立網(wǎng)頁重

新設計的原因：隨著時代的快速發(fā)展以及消費者需求的變化，消費者在選擇乳

制品品牌的時候不只僅僅關注品牌的知名度和口感，有時候加強品牌的傳播和

渠道也是一種很好的營銷方法。乳制品行業(yè)競爭愈發(fā)激烈，各個品牌在追求擴

大市場份額和提高品牌聲譽的同時，也在不斷地提高品牌自身實力。

在重新設計網(wǎng)店頁面的時候，河南花花牛品牌可以從以下幾個方面進行調(diào)

整創(chuàng)新：花花牛經(jīng)過多年的發(fā)展有著悠久的歷史和深厚的文化底蘊，“新鮮在你

身邊”是花花牛品牌傳播給消費者最真誠的服務承諾。作為中原地區(qū)排名前列

的乳制品企業(yè)——花花牛緊抓奶業(yè)市場發(fā)展趨勢，堅守“新鮮”道路，用實際

行動引領牛奶消費的“新鮮”理念，打開了中原地區(qū)低溫乳制品和巴氏鮮奶市

場并實現(xiàn)了高速增長?；ɑㄅ１种冀K堅持“為消費者提供100%安全的優(yōu)質(zhì)

乳制品”“質(zhì)量就是生命”的質(zhì)量管理理念?；ɑㄅ２粩啻蛟炜蒲衅脚_，健全企

業(yè)內(nèi)部創(chuàng)新管理體系，激發(fā)企業(yè)創(chuàng)新內(nèi)生動力。因此在重新設計頁面時應該體

現(xiàn)品牌的內(nèi)涵和文化特點，增強品牌的價值和形象；花花牛企業(yè)產(chǎn)品涵蓋巴氏

殺菌乳、發(fā)酵乳、滅菌乳、調(diào)制乳、乳飲料、乳粉、奶酪、汽水、冰淇淋等系

列120余個品種，深受廣大消費者喜愛。所以應該對每個系列進行明確的定位

以及差異化的推廣；在重新設計設計頁面時，要注重提高消費者的使用體驗，

以及提供便利的搜索和購買功能，不斷完善在線咨詢和售后服務等方面。

通過重新設計網(wǎng)店頁面，可以使品牌提高知名度和影響力，加強品牌的價

值和形象；增強在各大電商平臺的營銷能力，提升企業(yè)盈利能力擴大企業(yè)市場

份額；提供更滿意的購物購物體驗，增強消費者對品牌的忠誠度和滿意度?？?/p>

之，重新設計網(wǎng)店頁面是河南花花牛奶品牌發(fā)展的必然趨勢，也是針對市場和

顧客需求的一種回應。通過設計提供更優(yōu)質(zhì)的用戶體驗，提高品牌知名度和影

響力，還可以增強與其他競爭對手之間的差異性，提高品牌的競爭力。

1.3色彩設計

在色彩方面選擇了藍色和白色為主調(diào)的色彩搭配更相得益彰。藍色是一種

2

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

穩(wěn)重、高貴、清新的色彩，經(jīng)常與白色一起使用，白色則給人一種清爽、潔凈、

純真的感覺。兩種顏色配合使用能夠讓頁面顯得舒適、優(yōu)雅，同時也更突顯產(chǎn)

品的高品質(zhì)和品牌內(nèi)涵。且藍色和白色的色彩設計也符合對品牌定位：河南花

花牛品牌是以高端、潔凈、安全、純正的鮮奶品質(zhì)為標志的，而藍色和白色的

色彩組合可以很好地體現(xiàn)這些品牌形象的特點，傳遞出品牌的價值和品質(zhì)感。

藍色和白色的色彩搭配設計能夠增加消費者的體驗感：購物體驗對于消費者至

關重要，因此色彩設計方面也應注重消費者的視覺感覺體驗。藍色和白色搭配

的網(wǎng)店頁面可以讓消費者在購買產(chǎn)品的過程中感受到品質(zhì)、潔凈、純凈等多方

面的優(yōu)勢，提升購物體驗。

總之，藍色和白色的這種色彩組合可以更好地體現(xiàn)出品牌的高品質(zhì)、高端、

純凈的形象特點，同時也能夠增加消費者的購物體驗，達到優(yōu)化品牌形象、提

升品牌價值的目的。

色彩具體規(guī)格：（如圖1所示）

圖1標準色

3

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

1.4字體規(guī)范

字體規(guī)范選擇采用四種標準字體分別應用于各效果頁面圖有：黑體，優(yōu)設

字由棒棒體，點字淺夏體和微軟雅黑（如圖2所示）

圖2標準字體

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

2.1首頁

將首頁區(qū)域共分為了五個模塊，依次為：新品上市、熱賣推薦、更多產(chǎn)品、

關于我們、加入我們。

在新品上市模塊中采用了直排式的排列方式和左圖右文字搭配的排版方式

內(nèi)容整體性強,聚焦度高，可以對產(chǎn)品的價格，規(guī)格和進行詳細介紹，產(chǎn)品清晰

可觀；在熱賣推薦模塊中采用了兩行兩列的排列方式和上圖下文的版式對產(chǎn)品

進行詳細展示店鋪銷售量較高的產(chǎn)品，并設置了“立即購買”按鈕可以刺激顧

客進行下單消費；在更多產(chǎn)品模塊中采用橫排式的排列方式，并將產(chǎn)品進行分

類，使消費者體驗感強，方便快捷找到需要購買所系列的產(chǎn)品。同時設置滑動

4

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

按鈕可查看更多產(chǎn)品；在關于我們模塊中采用左圖右文的版式對品牌歷史，價

5

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

值觀念進行大概的介紹，且設置了“更多”按鈕可進行詳細查看；在加入我們

6

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

模塊中為感興趣的用戶介紹了加盟的流程和加盟條件及優(yōu)勢等并在底部設置了

“返回頂部”按鈕，方便用戶可以一鍵快速回到頂部，簡單直接。（如圖3所示）

7

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

圖3首頁原型圖

8

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

2.2搜索結果頁

搜索結果頁分為了兩個模塊：一個是對產(chǎn)品進行分類篩選的模塊，在此模

塊中用戶可以直接搜索需要的產(chǎn)品，也可以對產(chǎn)品的要求進行篩選，按產(chǎn)品的

銷量、口味、價格等進行選擇。第二個模塊是對按要求篩選出的產(chǎn)品進行展示

和介紹。同時也設置了“立即購買”按鈕，在消費者看到需要的產(chǎn)品的同時可

刺激消費者下單，提高成交率，為顧客提高方便快捷的購買功能。（如圖4所示）

圖4搜索結果頁原型圖

2.3商品詳情頁

商品詳情頁是提高轉化率的入口，它能激發(fā)顧客的消費欲望，樹立信任感，

打消顧客的消費疑慮，促使顧客下單，同時可以傳達企業(yè)品牌信息，完成從流

量到有效流量再到忠實流量的一個轉化。

9

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

將商品詳情頁分為了商品模塊、左側導航欄模塊、圖文詳情和右側推薦模

塊。在商品模塊中采用左圖右文的排版方式，內(nèi)容包含商品屬性如商品圖、購

買說明規(guī)格選擇、價格優(yōu)惠等。以及設置了收藏、加入購物車和立即購買按鈕

提高消費者的購物體驗感，布局合理。在導航欄模塊中采用直排式的排列方式

對商品進行了分類，可以更好的人消費者選擇需要的產(chǎn)品種類。圖文詳情模塊

在此模塊中可對產(chǎn)品進行詳細介紹。在推薦模塊中采用了上圖下文的排版方式

以及可供方便加入購物車按鈕和查看“更多”熱銷產(chǎn)品的設置。可以推薦用戶

相關同類產(chǎn)品或者與此頁產(chǎn)品相搭配的其他產(chǎn)品，給用戶提供更多選擇機會（如

圖5所示）

圖5商品詳情頁原型圖

10

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

2.4登錄注冊頁

登錄注冊頁是電商平臺的重要入口之一。登錄注冊頁包含了注冊功能模塊、

登錄功能模塊、找回密碼功能模塊、第三方登錄模塊。

在注冊功能模塊可以允許用戶在平臺上創(chuàng)建一個新的賬戶。注冊頁需要收

集用戶的姓名、電話號碼、電子郵箱地址等信息，并設置一個安全的密碼來保

護用戶的賬戶安全。登錄功能模塊允許用戶使用注冊時的信息來登錄賬戶。找

回密碼功能模塊：用戶可能會忘記自己的密碼，因此應該提供找回密碼的功能，

讓他們能夠方便的重新設置密碼第三方登錄功能：平臺可以提供第三方登錄功

能（例如微信、微博、QQ等）來讓用戶更方便地登錄賬戶，并加強賬戶的安全

性。

將注冊/登錄/找回密碼/第三方登錄功能分別排列成不同的區(qū)塊，以便于用

戶快速找到需要的功能。采用不同字號文字：使用不同字號的文字標題和路徑，

使用戶更容易理解自己正在哪個頁面，以及需要進行什么操作。采用這種版式

的優(yōu)點簡單明了，易于使用，并且美觀大方。用戶也可以快速找到所需要的功

能，從而也能提高用戶的滿意度和購物體驗。（如圖6所示）

圖6登錄注冊頁原型圖

11

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

2.5購物車

購物車是電商平臺的重要組成部分之一，它允許用戶向購物車中添加多個

商品，并在最終確認購買時一次性結算。購物車頁面分為了購物車功能模塊和

店內(nèi)推薦功能模塊。

購物車功能模塊中包含了商品列表：顯示用戶已經(jīng)添加到購物車中的所有

商品信息，包括名稱、價格、數(shù)量、小計等信息；商品數(shù)量修改：消費者可以

在購物車頁中修改商品數(shù)量，以便更準確地控制購買數(shù)量；商品刪除：消費者

刪除購物車中不需要的商品，以便更好地控制購買流程；優(yōu)惠券/折扣碼：購物

車頁面應該允許消費者選擇優(yōu)惠券，以獲得更多的折扣或優(yōu)惠；結算功能：結

算功能允許消費者完成整個購買流程，并支付已選的商品。商品列表展示：購

物車頁面上展示用戶已經(jīng)添加到購物車中的商品列表，顯示名稱、價格、數(shù)量、

小計等信息。同時，在底部清晰地說明總計、折扣等信息，能讓用戶一目了然。

引導用戶付款：在購物車頁面上設置了結算按鈕引導用戶完成整個購買流程。

店內(nèi)推薦模塊中采用的橫排展示產(chǎn)品的版式，可以為用戶推薦相似的產(chǎn)品，

給消費者提供了更多的選擇。

12

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

采用以上設計構思的版式的優(yōu)點是簡潔明了、易于使用，并且強調(diào)了購物

車中的商品信息，讓用戶清晰了解購物車中的商品和價格信息，為用戶提供更

好的購物體驗。（如圖7所示）

圖7購物車原型圖

2.6訂單結算頁

訂單結算頁是電商平臺的最后一個頁面，在該頁面用戶可以確認自己的訂

單信息，并完成支付。將訂單結算頁分為了確定收貨地址功能模塊和確認訂單

信息模塊。在確定收貨地址模塊中消費者可以選擇需要的配送的收貨地址，修

改收貨地址或刪除/增加收貨地址等功能。在確認訂單信息模塊中，展示所有的

13

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

訂單信息，包括商品名稱、價格、數(shù)量、配送地址、小計等依次排列。消費者

如有額外要求也可向店鋪留言。此外也設置必不可少的“提交訂單”按鈕對用

戶進行支付流程的提示和引導，以便用戶更好地完成整個支付流程。（如圖8所

示）

圖8訂單結算頁原型圖

2.7個人中心

個人中心是電商平臺的重要組成部分之一，它允許用戶查看和管理他們的

個人信息、瀏覽訂單、查看賬戶積分、修改密碼等。個人中心頁分為了四個模

塊：個人信息模塊、會員成長經(jīng)歷模塊、會員福利模塊、會員推薦模塊。

在個人信息模塊中用戶可以清晰地了解如何修改和管理自己的個人信息和

14

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

更方便快捷地讓用戶查看和管理自己的訂單信息。

在會員成長經(jīng)歷模塊中采用橫排的線條向消費者展示會員成長方式，消費

者可以清晰地知道會員成長規(guī)則還可以查詢會員成長等級。

在會員福利模塊采用了兩排三列的排版方式向顧客展示加入會員可獲取的

福利，這樣的設計有助于提高用戶的使用體驗和粘著度，從而提升用戶的忠誠

度和購買意愿。

在會員推薦模塊中向會員用戶推薦產(chǎn)品，設置立即購買按鈕可引導顧客消

費，提高消費者購物體驗度。（如圖9所示）

圖9個人中心原型圖

15

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

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

3.1首頁視覺設計與制作

3.1.1設計思路

在電商頁面設計中，Banner作為最顯眼的展示內(nèi)容之一，需要吸引用戶的

注意力，讓用戶產(chǎn)生瀏覽和購買的興趣。

在這個Banner設計中，采用了與牛奶相關的主打元素，通過這些元素有效

地突出了花花牛奶的新鮮，特點以彰顯品牌的特色。營造出牛奶健康的品牌形

象。使用“鮮奶大放送！!乳此優(yōu)惠?。　薄盎ɑㄅＶ苣陸c”等語句來突出節(jié)日

活動賣點。色彩使用粉紅色和白色等色調(diào)，以營造新鮮、自然的感覺。圖形采

用線條，禮炮等元素來營造節(jié)日特惠的氛圍，畫面設計自然且活潑。（如圖10

所示）

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

在這個Banner中強調(diào)了花花牛奶的優(yōu)質(zhì)品質(zhì)，采用了牛奶等元素，以及牛

奶流動的樣式，以彰顯產(chǎn)品的質(zhì)量和鮮美。畫面設計采用了動態(tài)效果，讓用戶

目光始終留在宣傳牛奶上。文字使用“新鮮生活點滴營養(yǎng)”、“每一口都在見證

有機牛奶的新鮮”等語句來強調(diào)產(chǎn)品的優(yōu)質(zhì)特點?！叭珗?折”突出活動主題。

在色彩上使用藍色和白色等清新、自然、安心的色調(diào)，以凸顯花花牛奶的品質(zhì)

和健康理念。圖形上選用了牛奶流動元素，集中突出了花花牛奶的品質(zhì)和健康

特色。（如圖11所示）

16

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

圖11品牌爆品促銷banner

首頁背景采用藍色作為底色，藍色非常純凈,通常讓人聯(lián)想到海洋、天空給

人一種沉穩(wěn)、晴朗的感覺，畫面采用白云和奶牛等自然元素突出花花牛奶的品

質(zhì)。新品上市模塊中，用白色形狀和虛線搭載產(chǎn)品，加上草地等元素使其簡單、

安靜。熱賣推薦模塊中采用奶牛，草地等顏色點綴產(chǎn)品。更多產(chǎn)品模塊中使用

鋼筆工具描繪出的牛奶元素形狀為承載體符合花花牛產(chǎn)品特點，彰顯產(chǎn)品特色。

在關于我們和加入我們模塊中使用鋼筆工具為所展示內(nèi)容創(chuàng)建打底形狀使得文

字與圖形間更有層次感。返回底部按鈕采用奶瓶形狀作為設計元素符合品牌特

點。標題設計突出品牌形象，鮮明易識：引導用戶快速了解品牌特點、產(chǎn)品特

征和賣點等。所有的布局設計都明了：用戶可以輕松找到需要的內(nèi)容。符合企

業(yè)文化和品牌形象：采用清新、顯眼和簡單隆重元素，符合花花牛奶品牌宣傳

理念，強調(diào)產(chǎn)品的健康和品質(zhì)的特點（如圖12所示）

17

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

3.1.2設計效果

18

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

圖12首頁效果圖

3.2搜索結果頁視覺設計與制作

3.2.1設計思路

在搜索結果頁的設計中，在搜索結果頁中，使用品牌主色調(diào)，并和搜索結

果相結合。使用橢圓工具繪制搜索框和搜索標志，繪制藍色矩形作為篩選項的

底色包括：分類排序、價格等。篩選內(nèi)容使用白色打底與篩選項區(qū)別開來，最

外圍繪制淺藍色矩形使得畫面更具有層次感。

19

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

搜索結果包含產(chǎn)品圖片、名稱、價格信息等元素。被選擇的產(chǎn)品顯示為白

色矩形為底的加入購物車和紅色矩形為底色的立即購買按鈕。產(chǎn)品圖片放置直

觀美觀。這樣設計的頁面使用戶快速找到所需信息，提高用戶體驗。加深用戶

對產(chǎn)品的了解和理解，增加銷售機會。通過設計來傳達品牌形象，增強品牌認

同感。（如圖13所示）

3.2.2設計效果

圖13搜索結果頁效果圖

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

商品詳情頁是整個店鋪成交的關鍵頁面。所以在分析花花牛品牌過程中，

我共分了六個部分，店招導航、產(chǎn)品主圖及購買信息、左側導航欄、中間產(chǎn)品

詳情內(nèi)容、右側熱銷產(chǎn)品推薦。這里背景色選擇淡藍色和明亮的白色讓人聯(lián)想

到藍天和一縷白云，是經(jīng)典搭配，永恒而優(yōu)雅。淡藍色給人以明快、安全、靜

謐的感覺。整體結構設計都是比較統(tǒng)一，除產(chǎn)品主圖和購買信息與中間產(chǎn)品詳

20

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

情內(nèi)容設計不同。以下是介紹這三種產(chǎn)品詳情內(nèi)容的設計思路。

3.3.1產(chǎn)品名稱設計思路

產(chǎn)品詳情頁模塊分為上部商品模塊左側導航欄模塊、圖文詳情和右側推薦

模塊。在商品模塊中采用左圖右文的排版方式，消費者可對產(chǎn)品進行口味數(shù)量

的選擇，并繪制圓角矩形按鈕可引導消費者加入購物車或立即購買。在左側導

航欄模塊中使用白藍色邊框為底色。對商品進行分類，可供消費者選擇。圖文

詳情模塊產(chǎn)品主圖采用藍色為底色，使用動態(tài)的牛奶效果突出了花花牛奶的品

質(zhì)和健康特色。摳圓型牛奶的形狀作為花花牛牛奶特色賣點吸引消費者眼球，

再添加“清甜奶香口感絲滑”“品質(zhì)好奶放心喝”強調(diào)產(chǎn)品的特色。賣點圖使用

剪貼蒙版和矩形結合對圖像進行色彩處理。對比圖采用明亮的黃色作為底色使

用漸變的金黃色矩形突出本產(chǎn)品相比與其他同類產(chǎn)品的優(yōu)勢所在，繪制金黃色

箭頭營造氛圍。產(chǎn)品屬性圖使用白藍色漸變打底，底部采用動態(tài)的牛奶元素彰

顯產(chǎn)品的品質(zhì)，營造出牛奶健康的品牌形象。場景圖采用，明亮的淡黃色為底

色，采用高斯模糊給幾片飄落的樹葉，給人營造一種輕松休閑的感受。場景圖

裁剪為圓角矩形為其添加陰影使得更有層次感。溫馨提示圖展示物流內(nèi)容，以

及產(chǎn)品退換貨要求等。主要是讓客戶提前了解到購物時候可能產(chǎn)生的問題以及

解決方法，避免因為物流慢產(chǎn)生大量差評。

這樣的產(chǎn)品詳情頁設計有以下優(yōu)點：視覺效果強。通過頁面的設計和圖片

的處理，展示商品的優(yōu)勢和特色，吸引用戶的注意力。操作便捷。通過頁面的

設計，使用戶能夠方便快捷地選擇商品和了解商品信息，以提高交互體驗度。

（如圖14所示）

3.3.2產(chǎn)品名稱設計效果

21

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

22

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

圖14產(chǎn)品名稱詳情頁效果圖

23

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

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

3.4.1設計思路

產(chǎn)品模塊繪制云朵形狀為底襯托店鋪主營產(chǎn)品，吸引消費者的眼球，簡單

直接。右邊用戶登錄模塊采用用戶頭像、輸入框、按鈕簡單易懂、直觀美觀的

圖形和元素，并繪制矩形框將各區(qū)域區(qū)分開來用戶可輸入用戶名和密碼、驗證

碼進行登錄。下方三個圓型按鈕為第三方登錄賬號，為消費者提供多種選擇。

入口清晰。在登錄注冊頁中，用戶可以更加方便快速的完成操作，界面簡介明

了。通過頁面中文字提示、配色和設計，使用戶快速了解如何進行注冊或登錄

操作。提高品牌曝光度。通過界面的設計，增加了品牌曝光度，為品牌進行宣

傳。（如圖15所示）

3.4.2設計效果

圖15登錄注冊頁效果圖

3.5購物車視覺設計與制作

3.5.1設計思路

購物車分為上下兩個模塊。上面購物車模塊繪制白色半透明圓角矩形與背

景區(qū)別開更具層次感。在商品列表中，使用左圖右文的搭配來概述產(chǎn)品信息，

簡單易懂。色彩上使用藍色等活力鮮明的色調(diào)，增強購物車頁面的視覺效果，

24

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

以符合品牌形象和特點。產(chǎn)品圖片的選擇突出產(chǎn)品特點和品質(zhì)，同時增加美觀

程度，吸引用戶的注意力。在設計中繪制簡單易懂、直觀美觀的圖形和元素，

如結算、價格、數(shù)量、全選等按鈕，以使用戶完成操作更加快捷可靠。在購物

車中，用戶可以方便地查看和管理購物信息，并隨時進行添加、修改、刪除等

操作。信息清晰。通過界面的設計，用戶可以快速清晰地了解購物信息，如價

格、數(shù)量、優(yōu)惠券、地址等。提升品牌形象。通過設計來傳達品牌形象，增強

品牌的認知度和信任度。（如圖16所示）

3.5.2設計效果

圖16購物車效果圖

3.6訂單結算頁視覺設計與制作

3.6.1設計思路

訂單結算頁分為確定收貨地址模塊與確認訂單模塊，收貨地址模塊采用淺

25

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

白色為底色與背景色區(qū)別開，繪制圓角矩形承載用戶的收貨地址和信息，具備

可修改增加刪除等功能。確認訂單信息模塊也同樣采用淺白色的正方形框為底

色采用左圖右文的排版使用簡潔明了的文字向消費者展示所購買的商品信息，

價格明細。繪制紅色矩形為提交訂單按鈕，以使用戶完成操作更加方便快捷。

這樣的訂單結算頁設計有以下優(yōu)點：信息全面。在訂單結算頁中，用戶可以清

晰地了解商品詳情、價格明細、配送信息等，以便用戶更好的完成下單和交易。

操作便捷。通過頁面設計，用戶可以方便快捷地修改和確認訂單信息，并完成

相應的操作。提升品牌形象。通過設計來傳達品牌形象，增強品牌的認知度和

信任度。（如圖17所示）

3.6.2設計效果

圖17訂單結算頁效果圖

26

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

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

3.7.1設計思路

個人中心模塊繪制淡紫色長矩形作為左側導航欄的底色，導航欄可查看我

的訂單、我的會