莫小仙品牌網(wǎng)店視覺方案設(shè)計

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

目錄

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

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

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

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

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

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

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

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

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

2.4登錄注冊頁..................................................................................................8

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

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

2.7個人中心....................................................................................................10

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

3.1首頁視覺設(shè)計與制作................................................................................12

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

3.1.2設(shè)計效果.............................................................................................14

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

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

3.2.2設(shè)計效果.............................................................................................16

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

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

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

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

3.4.1設(shè)計思路.............................................................................................20

3.4.2設(shè)計效果.............................................................................................20

I

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

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

3.5.1設(shè)計思路.............................................................................................20

3.5.2設(shè)計效果.............................................................................................21

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

3.6.1設(shè)計思路.............................................................................................21

3.6.2設(shè)計效果.............................................................................................22

3.7個人中心視覺設(shè)計與制作........................................................................22

3.7.1設(shè)計思路.............................................................................................22

3.7.2設(shè)計效果.............................................................................................23

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

參考資料............................................................25

II

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

莫小仙品牌網(wǎng)店視覺方案設(shè)計

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

1.1項目背景

經(jīng)歷了特殊時期的洗牌，在新一代年輕消費(fèi)者品質(zhì)化、健康化消費(fèi)需求下，

以自熱火鍋、速食粉面為主的新銳食品品類快速崛起，在傳統(tǒng)方便面、掛面等

基礎(chǔ)上實現(xiàn)“品類升級”，成為食品飲料行業(yè)中一股不可忽視的“潮流”。「

莫小仙」便是這股“潮流”中的頭部玩家之一，自品牌成立以來，「莫小仙」

已連續(xù)四年保持盈利，累計銷量60000000+盒，成為電商速食類產(chǎn)品前“3”的

自熱食品頭部品牌。

在自熱火鍋這個大單品的助推下，國內(nèi)自熱食品迎來了前所未有的高光時

刻，新銳與老品牌企業(yè)紛紛入局搶占消費(fèi)者心智。在這個高手林立、逐漸白熱

化的賽道上，作為成立不到5年的新銳速食品牌，「莫小仙」怎么才能占據(jù)一

席之地呢？所以我們需要對我們的網(wǎng)店頁面重新設(shè)計，讓客戶更加有新鮮感與

如同感。

1.2項目需求分析

2016年，自熱火鍋剛剛進(jìn)入消費(fèi)者的視野，在一眾自熱火鍋的新玩家中，

市場的主力仍以傳統(tǒng)線下火鍋品牌為主，如海底撈、德莊等，產(chǎn)品件單價集在

20元-45元之間?！改∠伞箲{借敏銳的市場感知，選擇20元內(nèi)這個競爭較小

的客單市場進(jìn)入賽道，反向以低價作為需求點(diǎn)，通過從已有品牌心智的品類中

搶占空白的價格段，挖掘出品牌增長的機(jī)遇。

在用自熱火鍋打開市場，初步建立品牌和渠道優(yōu)勢后，「莫小仙」選擇圍

繞有品類無品牌的食品市場，如酸辣粉、重慶小面這些存在大量搜索流量，對

沒有品牌心智的產(chǎn)品主攻產(chǎn)品開發(fā)，相繼推出自熱米飯、速食粉絲、速食面條

等新產(chǎn)品系列，逐漸擴(kuò)大自熱食品市場，近日，「莫小仙」再獲億元B輪融資，

進(jìn)一步在供應(yīng)鏈升級和品牌打造等領(lǐng)域獲得支持。

消費(fèi)者調(diào)研，大多數(shù)比較社恐、或者比較宅家的、想去吃火鍋又怕尷尬的。

莫小仙可以完美的解決這些問題，不用擔(dān)心這些煩惱了，莫小仙自熱鍋滿足所

以社恐人的選擇。宅家也能吃到火鍋。只做高品質(zhì)，好味道。

1

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

莫小仙品牌2017年創(chuàng)立，2019年開始進(jìn)入線下市場，在那之前他們的主業(yè)

績，主要來自線上的電商，但是電商的流量成本、投放費(fèi)用非常高，相比之下，

反而是線下的效率更高。

至于怎么持續(xù)打造爆品，莫小仙主要聚焦方便速食這一領(lǐng)域，先把自熱火

鍋打造成第一，再把自熱米飯打造成第一，未來還要把重慶小面這些打造成第

一，通過多個細(xì)分領(lǐng)域的第一來把“莫小仙品牌撐起來，只有打造足夠豐富的

產(chǎn)品類型才能撐起企業(yè)運(yùn)行和隊伍建設(shè)。通過視覺設(shè)計提升我們的賣點(diǎn)與爆款。

1.3色彩設(shè)計

采用了黃色與橙紅色為主色調(diào)，“黃色”代表光明、溫暖與希望是一種驕

傲的顏色。體現(xiàn)莫小仙品牌的獨(dú)特性?！俺燃t色”是歡快活潑的顏色，彰顯火

鍋的熱辣，打開客戶的味蕾。因為我們的產(chǎn)品是食品類，所以選擇飽和度比較

高的顏色。暖色調(diào)的搭配給頁面的設(shè)計增加食欲，也豐富了頁面。

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

1.4字體規(guī)范

宋體是最平淡、最永恒的字體，它的字體大小筆畫粗細(xì)不同，給人一種

客觀、大氣的美感。微軟雅黑就是比較厚重、搶眼的特點(diǎn)。華文楷體有著濃濃

的書卷味道，筆畫流暢、轉(zhuǎn)折平實又溫和，有著現(xiàn)代的簡潔感。采用不同的字

體凸顯莫小仙不同的美感。

2

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

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

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

2.1首頁

首先首頁選取的顏色都是色彩飽和度比較高的，更加可以增加食物的誘惑

力，還可以提升客戶的購買率，讓顧客看到的第一眼就有一種眼前一亮的感覺。

幾種顏色不同的搭配讓圖片有食物的生命力，但是我們整體的色調(diào)都是比較和

諧統(tǒng)一的，使我們的頁面簡介明了。海報的設(shè)計也是首頁的重點(diǎn)，它代表了客

戶的第一印象，抓住客戶眼球，誘導(dǎo)顧客需求，提升客戶下單量。品牌故事簡

述莫小仙的發(fā)展歷程，讓客戶更加了解品牌，提升品牌影響力。后面我們分別

設(shè)置了新品專區(qū)與優(yōu)惠專區(qū)，把莫小仙品牌價格親民體現(xiàn)出來。不同的產(chǎn)品圖

片也凸顯莫小仙產(chǎn)品的多樣性，以便顧客選擇。

3

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

4

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

圖3首頁原型圖

2.2搜索結(jié)果頁

首先我們采用了珊瑚色和黃色作為主色，白色和粉色是輔助色。在導(dǎo)航頁

面我們添加了鎮(zhèn)店爆款、優(yōu)惠專區(qū)、新品推薦、囤貨套餐、價格區(qū)間為主要的

5

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

模塊，來滿足顧客不同的需求。添加熱銷產(chǎn)品，提升客流量。

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

2.3商品詳情頁

詳情頁面是對莫小仙產(chǎn)品的優(yōu)勢，特點(diǎn)詳細(xì)的解釋和補(bǔ)充說明。色彩的排

版也是有顏色的深淺來突出產(chǎn)品的賣點(diǎn)。給顧客一目了然的感覺。主要還是介

紹我們產(chǎn)品的熱點(diǎn)與優(yōu)勢。引導(dǎo)消費(fèi)者快速下單的功能，提升轉(zhuǎn)化率，避免消

費(fèi)者反復(fù)比較導(dǎo)致選擇困難。增加消費(fèi)者對產(chǎn)品的信任感，提升下單信心。

6

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

圖5商品詳情頁原型圖

7

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

2.4登錄注冊頁

作用是將訪客轉(zhuǎn)化為產(chǎn)品用戶，有助于獲得客戶愛好和消費(fèi)習(xí)慣。在背景

這方面添加了網(wǎng)紅食物臭豆腐，大大的提升我們產(chǎn)品的多樣性。凸顯LOGO。

（如圖6所示）

圖6登錄注冊頁原型圖

2.5購物車

作用推進(jìn)轉(zhuǎn)化交易的入口，客戶將想購買的商品加入購物車，在下單時進(jìn)

行付款購買。并且還可以記錄產(chǎn)品的下單狀態(tài)，提醒用戶下單。采取左圖右文

的排版，下面還添加了推薦商品。

8

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

圖7購物車原型圖

2.6訂單結(jié)算頁

客戶在這個頁面可以查看所有的訂單狀況，還可以對自己的訂單進(jìn)行交易

詳情查看和訂單管理，能夠操作確認(rèn)收貨、退款維權(quán)。讓客戶買的安心，吃的

放心。

9

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

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

2.7個人中心

頁面主要由頭像、用戶信息和商品內(nèi)容模塊組成。通常會設(shè)置會員卡的方

式，目的是為了體現(xiàn)當(dāng)前頁面的信息都與本人有關(guān)，頭像采用了圓形，這樣看

起來更加協(xié)調(diào)又俏皮，同時也顯得畫面豐富。

10

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

圖9個人中心原型圖

11

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

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

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

3.1.1設(shè)計思路

首頁我們從店招、導(dǎo)航欄、海報、品牌介紹、新品專區(qū)、特價專區(qū)、頁尾

等展開設(shè)計。店招主要展示了多功能信息板塊：店鋪名稱、logo、收藏、聯(lián)系

我們、搜索、購物車、登錄注冊等。再到我們banner設(shè)計。

節(jié)日海報主要采用的是左文右圖的構(gòu)架，大膽的配色，突出產(chǎn)品圖片。難

點(diǎn)：將文字作為產(chǎn)品背景，擺放構(gòu)圖與文字大小都是一大一小的擺放方式。左

文也是不同的文本框，讓我們的海邊看起來有空間感的設(shè)計。文字設(shè)置了主標(biāo)

題與副標(biāo)題。再就是我們活動優(yōu)惠力度的宣傳，“滿300減50”的字體設(shè)計。

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

爆款海報設(shè)計顏色使用了對比色，藍(lán)色象征了年輕化，紅色是火焰的顏色，

象征熱情，采用這兩種顏色使畫面更有感染力，引人注目，寓意著爆款熱賣的

氛圍。打造爆款產(chǎn)品，提升產(chǎn)品口碑、復(fù)購率。產(chǎn)品采用了粉、面的商品做為

主圖，打造我們粉、面的爆款商品。提升品牌產(chǎn)品的多樣性。文字也運(yùn)用了不

同的字體，有比較頓感一點(diǎn)的字體，增加莫小仙品牌的童趣性，給顧客更有親

和力。

12

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

圖11品牌爆品促銷banner

再到我們的品牌介紹，以莫小仙的產(chǎn)品作為背景圖。從畫面色彩構(gòu)成上看，

整個畫面的色調(diào)偏亮，以暖黃色為主，給人營造熱情的感覺。再到我們的新品

專區(qū)與優(yōu)惠專區(qū)，體現(xiàn)我們品牌價格的優(yōu)勢。再到不同的分類，方便顧客選擇。

尾部我們的采用白色的字體，讓我們的文字更加的清晰。頁面的配色也是比較

統(tǒng)一的，使畫面簡潔明了。

13

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

3.1.2設(shè)計效果

14

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

圖12首頁效果圖

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

3.2.1設(shè)計思路

首先是介紹產(chǎn)品分類，再到產(chǎn)品推薦，整體的構(gòu)圖是上文下圖的感覺。主

色為白色，文字采取橙色，突出重點(diǎn)。產(chǎn)品圖的挑選也是不同類型的產(chǎn)品，更

加的吸引游客的食欲。包括我們內(nèi)容采集整理、圖片的選取、整體的排版設(shè)計、

15

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

背景及頁面的色調(diào)都是精心搭配處理的。

3.2.2設(shè)計效果

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

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

商品詳情頁是整個店鋪成交的關(guān)鍵頁面。所以在分析莫小仙的過程中，產(chǎn)

品詳情頁設(shè)計我共分了六個部分，店招導(dǎo)航、產(chǎn)品主圖及購買信息、左側(cè)導(dǎo)航

欄、中間產(chǎn)品詳情內(nèi)容、右側(cè)店家推薦。背景色選擇橙色，橙色代表著陽光與

生機(jī)勃勃。是一種有溫度的顏色，也是能夠刺激消費(fèi)者食欲的顏色。整體結(jié)構(gòu)

設(shè)計都是比較統(tǒng)一，除產(chǎn)品主圖和購買信息與中間產(chǎn)品詳情內(nèi)容設(shè)計不同。以

下是介紹莫小仙產(chǎn)品詳情內(nèi)容的設(shè)計思路。

3.3.1詳情頁面設(shè)計思路

介紹我們產(chǎn)品的詳情商品。導(dǎo)航欄介紹了商品的分類，按照產(chǎn)品特點(diǎn)來分

類，將頁面簡單明了，幫助顧客快速的找到他們需要的產(chǎn)品。商品的詳情介紹，

16

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

應(yīng)用了不同顏色的背景，讓畫面更有活力。售后服務(wù)保證顧客的商品保障。風(fēng)

格屬于小清新。內(nèi)容中添加了新鮮食材，體現(xiàn)我們品牌的質(zhì)量保證與安全。產(chǎn)

品信息我們主要對產(chǎn)品的生產(chǎn)日期、配料、場地與儲存方式進(jìn)行報告。再介紹

了使用方式，解決顧客使用煩惱，提升產(chǎn)品的品牌忠誠度。注意事項中我們添

加了簡易的卡通圖片，保證小朋友與老人的安全隱患。

3.3.2詳情頁面設(shè)計效果

17

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

18

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

圖14詳情頁效果圖

19

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

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

3.4.1設(shè)計思路

主要采用了圖片背景，有用戶名、密碼、驗證碼、第三方登入。采用了熱

點(diǎn)產(chǎn)品，提升產(chǎn)品的興趣性，圖片的倒影增加圖片的層次感，優(yōu)點(diǎn)降低顧客焦

慮，提升體驗。

3.4.2設(shè)計效果

圖15登錄注冊頁效果圖

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

3.5.1設(shè)計思路

采用了黃色為主色、輔助色為白色、點(diǎn)睛色運(yùn)用了橙、黃、紫、綠。不同

的顏色搭配使畫面更加完美、豐富。飽和度高的顏色用到了下單鍵和購物車，

強(qiáng)調(diào)重點(diǎn)，同時凸顯獨(dú)特畫面。再就是我們的產(chǎn)品推薦，不同的產(chǎn)品推薦也是

一種引流的方式，吸引客戶注意力。

20

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

3.5.2設(shè)計效果

圖16購物車效果圖

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

3.6.1設(shè)計思路

主題將文字與圖片相結(jié)合，配色簡單，以白色作為背景，主調(diào)為橙色，應(yīng)

用在文字，將內(nèi)容體現(xiàn)的淋漓盡致。圍繞“文字”為主題，將“字”與“視覺效果”相

結(jié)合，簡約大方的設(shè)計風(fēng)格為主，并且將文與色彩相融合，在總體的布局滿足

對其他設(shè)計的需求。內(nèi)容設(shè)計了收款人信息、支付方式與配送方式為客戶提升

體驗。

21

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

3.6.2設(shè)計效果

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

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

3.7.1設(shè)計思路

頁面主要展示用戶的個人信息，采用了圓形圖像作為頭像，讓視覺上更加

聚焦，提升美感。左右排版，展示了分類信息，讓顧客一目了然。應(yīng)用了“橙

色”為主色調(diào)，充滿了創(chuàng)意和熱情。左邊設(shè)置了導(dǎo)航欄，對個人中心內(nèi)容分類。

會員權(quán)益設(shè)置了不同的圖標(biāo)，方便客戶快速識別。再添加了新品推薦，推出我

們的爆款商品。

22