莫小仙品牌网店视觉方案设计

湖南商务职业技术学院毕业设计

目录

1网店视觉设计需求分析............................................................................................1

1.1项目背景......................................................................................................1

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

1.3色彩设计......................................................................................................2

1.4字体规范...................................................2

2网店页面原型图分析与设计方案............................................................................3

2.1首页..............................................................................................................3

2.2搜索结果页..................................................................................................5

2.3商品详情页..................................................................................................6

2.4登录注册页..................................................................................................8

2.5购物车..........................................................................................................8

2.6订单结算页..................................................................................................9

2.7个人中心....................................................................................................10

3网店页面视觉效果设计与制作..............................................................................12

3.1首页视觉设计与制作................................................................................12

3.1.1设计思路.............................................................................................12

3.1.2设计效果.............................................................................................14

3.2搜索结果页视觉设计与制作....................................................................15

3.2.1设计思路.............................................................................................15

3.2.2设计效果.............................................................................................16

3.3产品详情页视觉设计与制作....................................................................16

3.3.1产品名称设计思路.............................................................................16

3.3.2产品名称设计效果.............................................................................17

3.4登录注册页视觉设计与制作....................................................................20

3.4.1设计思路.............................................................................................20

3.4.2设计效果.............................................................................................20

I

湖南商务职业技术学院毕业设计

3.5购物车视觉设计与制作............................................................................20

3.5.1设计思路.............................................................................................20

3.5.2设计效果.............................................................................................21

3.6订单结算页视觉设计与制作....................................................................21

3.6.1设计思路.............................................................................................21

3.6.2设计效果.............................................................................................22

3.7个人中心视觉设计与制作........................................................................22

3.7.1设计思路.............................................................................................22

3.7.2设计效果.............................................................................................23

4总结..........................................................................................................................24

参考资料............................................................25

II

湖南商务职业技术学院毕业设计

莫小仙品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

经历了特殊时期的洗牌，在新一代年轻消费者品质化、健康化消费需求下，

以自热火锅、速食粉面为主的新锐食品品类快速崛起，在传统方便面、挂面等

基础上实现“品类升级”，成为食品饮料行业中一股不可忽视的“潮流”。「

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

已连续四年保持盈利，累计销量60000000+盒，成为电商速食类产品前“3”的

自热食品头部品牌。

在自热火锅这个大单品的助推下，国内自热食品迎来了前所未有的高光时

刻，新锐与老品牌企业纷纷入局抢占消费者心智。在这个高手林立、逐渐白热

化的赛道上，作为成立不到5年的新锐速食品牌，「莫小仙」怎么才能占据一

席之地呢？所以我们需要对我们的网店页面重新设计，让客户更加有新鲜感与

如同感。

1.2项目需求分析

2016年，自热火锅刚刚进入消费者的视野，在一众自热火锅的新玩家中，

市场的主力仍以传统线下火锅品牌为主，如海底捞、德庄等，产品件单价集在

20元-45元之间。「莫小仙」凭借敏锐的市场感知，选择20元内这个竞争较小

的客单市场进入赛道，反向以低价作为需求点，通过从已有品牌心智的品类中

抢占空白的价格段，挖掘出品牌增长的机遇。

在用自热火锅打开市场，初步建立品牌和渠道优势后，「莫小仙」选择围

绕有品类无品牌的食品市场，如酸辣粉、重庆小面这些存在大量搜索流量，对

没有品牌心智的产品主攻产品开发，相继推出自热米饭、速食粉丝、速食面条

等新产品系列，逐渐扩大自热食品市场，近日，「莫小仙」再获亿元B轮融资，

进一步在供应链升级和品牌打造等领域获得支持。

消费者调研，大多数比较社恐、或者比较宅家的、想去吃火锅又怕尴尬的。

莫小仙可以完美的解决这些问题，不用担心这些烦恼了，莫小仙自热锅满足所

以社恐人的选择。宅家也能吃到火锅。只做高品质，好味道。

1

湖南商务职业技术学院毕业设计

莫小仙品牌2017年创立，2019年开始进入线下市场，在那之前他们的主业

绩，主要来自线上的电商，但是电商的流量成本、投放费用非常高，相比之下，

反而是线下的效率更高。

至于怎么持续打造爆品，莫小仙主要聚焦方便速食这一领域，先把自热火

锅打造成第一，再把自热米饭打造成第一，未来还要把重庆小面这些打造成第

一，通过多个细分领域的第一来把“莫小仙品牌撑起来，只有打造足够丰富的

产品类型才能撑起企业运行和队伍建设。通过视觉设计提升我们的卖点与爆款。

1.3色彩设计

采用了黄色与橙红色为主色调，“黄色”代表光明、温暖与希望是一种骄

傲的颜色。体现莫小仙品牌的独特性。“橙红色”是欢快活泼的颜色，彰显火

锅的热辣，打开客户的味蕾。因为我们的产品是食品类，所以选择饱和度比较

高的颜色。暖色调的搭配给页面的设计增加食欲，也丰富了页面。

图1标准色

1.4字体规范

宋体是最平淡、最永恒的字体，它的字体大小笔画粗细不同，给人一种

客观、大气的美感。微软雅黑就是比较厚重、抢眼的特点。华文楷体有着浓浓

的书卷味道，笔画流畅、转折平实又温和，有着现代的简洁感。采用不同的字

体凸显莫小仙不同的美感。

2

湖南商务职业技术学院毕业设计

图2标准字体

2网店页面原型图分析与设计方案

2.1首页

首先首页选取的颜色都是色彩饱和度比较高的，更加可以增加食物的诱惑

力，还可以提升客户的购买率，让顾客看到的第一眼就有一种眼前一亮的感觉。

几种颜色不同的搭配让图片有食物的生命力，但是我们整体的色调都是比较和

谐统一的，使我们的页面简介明了。海报的设计也是首页的重点，它代表了客

户的第一印象，抓住客户眼球，诱导顾客需求，提升客户下单量。品牌故事简

述莫小仙的发展历程，让客户更加了解品牌，提升品牌影响力。后面我们分别

设置了新品专区与优惠专区，把莫小仙品牌价格亲民体现出来。不同的产品图

片也凸显莫小仙产品的多样性，以便顾客选择。

3

湖南商务职业技术学院毕业设计

4

湖南商务职业技术学院毕业设计

图3首页原型图

2.2搜索结果页

首先我们采用了珊瑚色和黄色作为主色，白色和粉色是辅助色。在导航页

面我们添加了镇店爆款、优惠专区、新品推荐、囤货套餐、价格区间为主要的

5

湖南商务职业技术学院毕业设计

模块，来满足顾客不同的需求。添加热销产品，提升客流量。

图4搜索结果页原型图

2.3商品详情页

详情页面是对莫小仙产品的优势，特点详细的解释和补充说明。色彩的排

版也是有颜色的深浅来突出产品的卖点。给顾客一目了然的感觉。主要还是介

绍我们产品的热点与优势。引导消费者快速下单的功能，提升转化率，避免消

费者反复比较导致选择困难。增加消费者对产品的信任感，提升下单信心。

6

湖南商务职业技术学院毕业设计

图5商品详情页原型图

7

湖南商务职业技术学院毕业设计

2.4登录注册页

作用是将访客转化为产品用户，有助于获得客户爱好和消费习惯。在背景

这方面添加了网红食物臭豆腐，大大的提升我们产品的多样性。凸显LOGO。

（如图6所示）

图6登录注册页原型图

2.5购物车

作用推进转化交易的入口，客户将想购买的商品加入购物车，在下单时进

行付款购买。并且还可以记录产品的下单状态，提醒用户下单。采取左图右文

的排版，下面还添加了推荐商品。

8

湖南商务职业技术学院毕业设计

图7购物车原型图

2.6订单结算页

客户在这个页面可以查看所有的订单状况，还可以对自己的订单进行交易

详情查看和订单管理，能够操作确认收货、退款维权。让客户买的安心，吃的

放心。

9

湖南商务职业技术学院毕业设计

图8订单结算页原型图

2.7个人中心

页面主要由头像、用户信息和商品内容模块组成。通常会设置会员卡的方

式，目的是为了体现当前页面的信息都与本人有关，头像采用了圆形，这样看

起来更加协调又俏皮，同时也显得画面丰富。

10

湖南商务职业技术学院毕业设计

图9个人中心原型图

11

湖南商务职业技术学院毕业设计

3网店页面视觉效果设计与制作

3.1首页视觉设计与制作

3.1.1设计思路

首页我们从店招、导航栏、海报、品牌介绍、新品专区、特价专区、页尾

等展开设计。店招主要展示了多功能信息板块：店铺名称、logo、收藏、联系

我们、搜索、购物车、登录注册等。再到我们banner设计。

节日海报主要采用的是左文右图的构架，大胆的配色，突出产品图片。难

点：将文字作为产品背景，摆放构图与文字大小都是一大一小的摆放方式。左

文也是不同的文本框，让我们的海边看起来有空间感的设计。文字设置了主标

题与副标题。再就是我们活动优惠力度的宣传，“满300减50”的字体设计。

图10品牌节日活动banner

爆款海报设计颜色使用了对比色，蓝色象征了年轻化，红色是火焰的颜色，

象征热情，采用这两种颜色使画面更有感染力，引人注目，寓意着爆款热卖的

氛围。打造爆款产品，提升产品口碑、复购率。产品采用了粉、面的商品做为

主图，打造我们粉、面的爆款商品。提升品牌产品的多样性。文字也运用了不

同的字体，有比较顿感一点的字体，增加莫小仙品牌的童趣性，给顾客更有亲

和力。

12

湖南商务职业技术学院毕业设计

图11品牌爆品促销banner

再到我们的品牌介绍，以莫小仙的产品作为背景图。从画面色彩构成上看，

整个画面的色调偏亮，以暖黄色为主，给人营造热情的感觉。再到我们的新品

专区与优惠专区，体现我们品牌价格的优势。再到不同的分类，方便顾客选择。

尾部我们的采用白色的字体，让我们的文字更加的清晰。页面的配色也是比较

统一的，使画面简洁明了。

13

湖南商务职业技术学院毕业设计

3.1.2设计效果

14

湖南商务职业技术学院毕业设计

图12首页效果图

3.2搜索结果页视觉设计与制作

3.2.1设计思路

首先是介绍产品分类，再到产品推荐，整体的构图是上文下图的感觉。主

色为白色，文字采取橙色，突出重点。产品图的挑选也是不同类型的产品，更

加的吸引游客的食欲。包括我们内容采集整理、图片的选取、整体的排版设计、

15

湖南商务职业技术学院毕业设计

背景及页面的色调都是精心搭配处理的。

3.2.2设计效果

图13搜索结果页效果图

3.3产品详情页视觉设计与制作

商品详情页是整个店铺成交的关键页面。所以在分析莫小仙的过程中，产

品详情页设计我共分了六个部分，店招导航、产品主图及购买信息、左侧导航

栏、中间产品详情内容、右侧店家推荐。背景色选择橙色，橙色代表着阳光与

生机勃勃。是一种有温度的颜色，也是能够刺激消费者食欲的颜色。整体结构

设计都是比较统一，除产品主图和购买信息与中间产品详情内容设计不同。以

下是介绍莫小仙产品详情内容的设计思路。

3.3.1详情页面设计思路

介绍我们产品的详情商品。导航栏介绍了商品的分类，按照产品特点来分

类，将页面简单明了，帮助顾客快速的找到他们需要的产品。商品的详情介绍，

16

湖南商务职业技术学院毕业设计

应用了不同颜色的背景，让画面更有活力。售后服务保证顾客的商品保障。风

格属于小清新。内容中添加了新鲜食材，体现我们品牌的质量保证与安全。产

品信息我们主要对产品的生产日期、配料、场地与储存方式进行报告。再介绍

了使用方式，解决顾客使用烦恼，提升产品的品牌忠诚度。注意事项中我们添

加了简易的卡通图片，保证小朋友与老人的安全隐患。

3.3.2详情页面设计效果

17

湖南商务职业技术学院毕业设计

18

湖南商务职业技术学院毕业设计

图14详情页效果图

19

湖南商务职业技术学院毕业设计

3.4登录注册页视觉设计与制作

3.4.1设计思路

主要采用了图片背景，有用户名、密码、验证码、第三方登入。采用了热

点产品，提升产品的兴趣性，图片的倒影增加图片的层次感，优点降低顾客焦

虑，提升体验。

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

采用了黄色为主色、辅助色为白色、点睛色运用了橙、黄、紫、绿。不同

的颜色搭配使画面更加完美、丰富。饱和度高的颜色用到了下单键和购物车，

强调重点，同时凸显独特画面。再就是我们的产品推荐，不同的产品推荐也是

一种引流的方式，吸引客户注意力。

20

湖南商务职业技术学院毕业设计

3.5.2设计效果

图16购物车效果图

3.6订单结算页视觉设计与制作

3.6.1设计思路

主题将文字与图片相结合，配色简单，以白色作为背景，主调为橙色，应

用在文字，将内容体现的淋漓尽致。围绕“文字”为主题，将“字”与“视觉效果”相

结合，简约大方的设计风格为主，并且将文与色彩相融合，在总体的布局满足

对其他设计的需求。内容设计了收款人信息、支付方式与配送方式为客户提升

体验。

21

湖南商务职业技术学院毕业设计

3.6.2设计效果

图17订单结算页效果图

3.7个人中心视觉设计与制作

3.7.1设计思路

页面主要展示用户的个人信息，采用了圆形图像作为头像，让视觉上更加

聚焦，提升美感。左右排版，展示了分类信息，让顾客一目了然。应用了“橙

色”为主色调，充满了创意和热情。左边设置了导航栏，对个人中心内容分类。

会员权益设置了不同的图标，方便客户快速识别。再添加了新品推荐，推出我

们的爆款商品。

22