米旗品牌网店视觉方案设计

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

目录

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

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

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

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

1.4字体规范...................................................3

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

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

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

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

2.4登录注册页..................................................................................................7

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

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

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

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

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

3.1.1设计思路.............................................................................................11

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产品名称设计效果.............................................................................18

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

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

3.4.2设计效果.............................................................................................21

I

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

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

3.5.1设计思路.............................................................................................21

3.5.2设计效果.............................................................................................22

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

3.6.1设计思路.............................................................................................22

3.6.2设计效果.............................................................................................23

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

3.7.1设计思路.............................................................................................23

3.7.2设计效果.............................................................................................24

4总结..........................................................................................................................25

参考资料............................................................26

II

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

米旗品牌网店视觉方案设计

1网店视觉设计需求分析

1.1项目背景

随着电商行业的快速发展与进行，网购逐渐成了人们在日常生活中必不可

少的一件事，网购的人群一直是呈增长的趋势发展，购物的人群越多，人们对

网购的体验要求也就越高，而且现在有更多的消费者都在寻求个性化的购物体

验。所以米旗品牌想要建立属于自己的独立网店，这也是为了不错过一大批在

淘宝、天猫、京东上的客户。而且烘焙品牌竞争也比较激烈，随着好利来品牌

的火爆，越来越多的烘焙品牌在除了研发自己的新产品以外，它们都建立了属

于自己的独立品牌网店，而且这些品牌都取得了一些较好的成绩。而我们米旗

严格按照体系要求，从上游供应商到生产、储存至销售服务进行细致、周密品

质管理，确保了产品的安全、安心、优质。而且该品牌十分重视产品品质，其

产品口感细腻，新鲜美味，十分受顾客喜爱。被誉为“中国烘焙食品的领头

羊”。但是米旗只有京东与天猫的网店，并没有属于自己的独立网店，所以为

了自己品牌未来能够更好的发展下去，现在需要建立一个独立的品牌形象网店。

1.2项目需求分析

现目前越来越多的消费者都追求个性化的品牌网店，而米旗还没有属于自

己的独立网店，所以为了提高销量，增加消费者对该品牌的了解，需要建立一

个独立且具有个性的品牌网店。米旗是以烘焙类为主的品牌，而且烘焙食品在

我国食品工业中具有主要的地位，其产品消费市场较大。烘焙食品作为居民日

常生活中的重要一部分，已经成为部分消费者的主要食物之一。所以可以设计

一个属于自己是独立网店，网店风格根据消费者所喜爱的进行设计，并且做出

一些精美的网站设计，使用正确的颜色组合，需要突出品牌的产品与服务，从

而更好的去展现这个品牌。随着中国经济的增长，居民生活水平的提高，消费

者从“吃好、吃饱”的心态转变成了“吃的安全、吃的健康”。所以可以从安

全、健康、绿色这些方面的原材料进行宣传，让更多的消费者知道我们的品牌，

并且可以根据消费者的喜爱来进行设计产品的样式，从而吸引消费者进行购买。

米旗需要对自己以及竞争对手的产品都要有清晰的认知与了解，要为自己的产

1

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

品迭代提供决策依据。还需要缩短产品的设计周期，以便能够更好的体现，提

高产品的销量。对于竞争对手来说，可以对竞争对手进行分析，学习他们做的

好的地方，改掉做的不好的地方，从而使自己进步。企业希望这个网店的视觉

设计可以给品牌带来更多的新客户，以及让更多的顾客知道并了解米旗这个品

牌，为品牌网店提高销量。

1.3色彩设计

色彩设计上我以相近色进行搭配在一起，主要都是以黄色橙色为主，主色

占60%、辅助色占30%、点缀色占10%，第一眼就吸引了顾客兴趣，给顾客带来

舒适的感觉。

主色：主色在网店首页中占据较多的部分，总共了60%，我选择了黄色作为

主色，在视觉上黄色给消费者的感觉就非常的有食欲，给网站的排版也带来非

常大方的感觉，米旗主打的产品是蛋糕，所以黄色也可以给消费者温馨的感觉。

辅助色：辅助色在网站中占了30%，我选用了橙色，橙色与黄色整体搭配非

常协调好看，橙色也给人带来活力健康热情有朝气的感觉，这种感觉给人带来

眼前一新，网站看起来也不会单调，丰富了网站的内容，充满生命力。

点缀色：点缀色在网站中只占10%，非常少，所以我用红色和米白色作为网

站的点缀色。因为它的颜色对比较强烈，视觉效果会比较好。红色给人也会带

来非常明艳的感觉，而白色就给本来色彩浓烈的颜色加入了一种缓和的颜色，

让人视觉上更加大方、舒适。网店本身是以橙黄这种鲜明的颜色为主，选用点

缀的这两种颜色与橙色、黄色色差较大，所以对比起来就非常强烈。（如图1

所示）

图1标准色

2

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

1.4字体规范

字体上我使用微软雅黑与黑体为主，华文细黑为辅，这几种字体是具有可

读性与视觉审美的文字，在具备强烈的视觉美感的同时还能够给顾客带来内心

的震撼。且主要使用这两种字体是为了让顾客看起来更加清晰舒服，所使用的

的字体里面没有那种让眼睛看上去比较疲惫的花哨的字体。主要以清楚舒适为

主，美观为辅。且整体的设计风格较为统一，加强了品牌店铺的整体性与统一

感，给顾客产生良好的视觉吸引力。具体字体可看下图。（如图2所示）

图2标准字体

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

2.1首页

首页的最上面就是店招部分，中间用了品牌标语，使顾客一眼就能注意到

店铺的宗旨。右边有登录注册的地方，让顾客有在店铺使用权益的权利，使用

的是居中对齐的板式进行设计。第二部分就是Banner，给品牌做推广，为一些

节日做庆祝，为一些产品做宣传。Banner看一下进行轮播的效果，一张一张让

顾客更加仔细的了解到该品牌的一些特点。第三部分就是介绍米旗这个品牌，

品牌介绍在店铺里面还是比较重要的，虽然介绍的区域不大，但是我设计了了

解更多的链接，点进去里面会有更加详细的介绍，这一部分我也是进行了对齐

3

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

的板式，因为我认为对齐可以给顾客带来比较方便且舒适的视觉效果。第四部

分就是产品上新，为店铺精心挑选了一些非常美观的新品产品图，并且还将上

新时间也标注在上面，让顾客吃得安心吃得放心。第五部分就是热销产品，这

一部分有可以直接点击就能立即购买的功能，如果不想购买还需要考虑的也帮

忙设计的购物车的链接，给顾客考虑。在下一个部分就是返回顶部。最后一个

部分有我们店铺的二维码，关注此品牌店铺，还设有品牌的具体位置等信息。

让顾客清楚的知道品牌的一些信息。（如图3所示）

4

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

图3首页原型图

2.2搜索结果页

搜索结果页的第一个功能模块就是搜索框模块，顾客可以在这里搜索到本

店铺的所有产品，颜色也是用的比较夸张的黄色，我认为黄色可以给人带来温

暖的感觉。接下来就是产品的分类，按照类型、口味和价格对产品进行的仔细

点分类，为顾客在购买的时候更加方便就能搜索查询到自己想要的商品。在视

觉方面也给顾客带来了便利。不用一个一个去找，而是直接筛选到自己想要购

买的商品。再下面就是产品图，每个产品图的下面都标有产品名称、价格和立

即购买的按钮，顾客进行筛选后看到了自己想购买的商品就可以直接点击立即

购买的按钮，系统就给它进行下一步指示。最后一个部分有我们店铺的二维码，

关注此品牌店铺，还设有品牌的具体位置等信息。让顾客清楚的知道品牌的一

些信息，还可以关注我们除了官方旗舰店以外的账号，对我们品牌的信息更加

了解。搜索结果页我设计的板式是满版型，上面一部分以配置文字为主，下半

部分主要配置图片。给顾客大方、舒适的感觉。（如图4所示）

5

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

图4搜索结果页原型图

2.3商品详情页

搜索结果页的第一个功能模块就是产品信息的介绍，此模块可以了解商品

的信息、控制加购商品的数量、将商品加入购物车或者直接购买商品。这个模

块的右边还有一个热销产品的小模块，让顾客知道我们的品牌卖的最好的几个

产品，给产品做推广最后将产品卖出提高产品销量。接下来的一个功能模块就

是所以产品的分类，在这里可以看到所以产品的类型以及客户可以联系客服咨

询所不清楚不了解的问题，这里都能帮客户解决。用户点击收藏图标后可以在

店铺有新活动的时候第一时间通知客户，以提高品牌的购买率。接下来的一个

功能模块就是商品的详情介绍，有产品信息、精选材料、为何选择我们、美味

的背后和购买须知。这个模块是吸引顾客购买的第一步。产品详情页可以吸引

买家深入了解产品，或者引导买家浏览店铺中的其他商品，已达到进店流量的

利用做大化。（如图5所示）

6

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

图5商品详情页原型图

2.4登录注册页

登录注册页的最主要的功能模块就只有一个，因为登录注册的主要目的是

为了让顾客有在我们品牌更好的体验感，使用次模块的一个最主要的功能就是

顾客的登陆和注册的功能，用户进入APP的时候并不会提示登录或是注册，只

有当用户使用到某些功能时才会提示登录或注册，当然用户也可以选择在这里

7

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

进行登录或注册。给客户带来更好的网站体验，在不记得密码的情况下有个忘

记密码的图标，点击进去可以让顾客进行验证从而找回密码。这个页面我采用

的是中心型板式，这个板式容易使顾客产生视觉焦点，使其更加突出。（如图6

所示）

图6登录注册页原型图

2.5购物车

购物车页的第一个功能模块就是在购物车这里能看到客户浏览时喜欢的已

经加购的商品，还可以将商品进行收藏或者是移除购物车，客户可以勾选想要

购买的商品点击去结算按钮就能跳转到下一个部分。还有一个功能模块就是下

一部分的热销产品模块，在这里顾客可以看到本品牌店铺的热销产品，更加了

解店铺的热度商品是什么，从而吸引顾客点击产品进去查看并进行购买，并且

产品图下面设计了加入购物车按钮，这个能更方便的增加客户购买欲望，激发

客户的销售欲望。此页面采取了水平结构布局的板式，加强了网页的整体性，

使网页的视觉效果达到吸引顾客的作用。（如图7所示）

8

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

图7购物车原型图

2.6订单结算页

购物车页的第一个功能模块就是查看收货人的信息，顾客可以非常方便的

选择和修改自己的收货信息，还能增加收货人的信息。第二个功能模块就是选

择支付方式，有三种支付方式任顾客选择。下一个功能模块就是配送服务与备

注，顾客需要选择那种就进行选择就可以，如果还有什么其他要求也可以在备

注那一栏进行备注，对消费者来说非常的方便。再下一个功能模块就是商品清

单，顾客可以在这里清楚的看到自己购买了哪些商品，查看到商品信息和数量，

以及店铺优惠，需不需要开发票都可以再这里进行查询与实行。最后一个功能

模块就是进行支付或者返回到购物车页面，可以看到商品的总额，最后确定后

进行支付，随后就形成订单，购买完成。给顾客带来了非常方便的购买流程，

清楚的知道顾客选购了一些什么产品以及产品的详细信息。这个页面我采取了

中轴型的版式设计，这样的设计可以给顾客带来强烈的动感，提高顾客的购买

欲望。（如图8所示）

9

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

图8订单结算页原型图

2.7个人中心

个人中心页的第一个功能模块就是顾客的主要信息、会员权益和会员等级，

店铺采取了会员制，采用会员制是公司为了正真去让顾客忠诚于品牌，做到品

质卓越价格合理，从而去吸引顾客留住顾客，第二个功能模块是在该店铺有哪

些权益。再下一个功能模块是积分模块，积分可以去兑换一些产品或者无门槛

券，从而引导顾客进行小消费。最后一个功能模块是会员等级，告诉顾客在店

铺消费多少从而就能达到这个等级，等级越高权益越多越划算，而且能够更好

的加强注册顾客的粘着度。此页面才用了骨骼型的版式设计，规范以及理性的

分割方法，给顾客带来严谨且和谐的美感，提升了顾客的体验感。（如图9所

示）

10

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

图9个人中心原型图

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

3.1首页视觉设计与制作

3.1.1设计思路

这张品牌节日活动类的Banner我做的主题节日是中秋节，在店铺的产品中

也有与中秋节相对应的产品就是月报，这张海报主要是做的月饼主题的海报，

创意方面主要是将月饼放在腾云的前面，有一种仙仙的感觉，让月饼看上去更

加吸引顾客，从而点击进去查看，增加月饼的销量。文字的设计我是在中秋两

个字上进行了着重的设计，让这两个字的字形发生了变化，是字体看上去更加

美观，加深顾客对中秋的印象。接下来的文字主要就是说本店铺对于中秋节的

一个优惠折扣，说明了米旗品牌的折扣非常大，加大顾客对月饼进行购买的欲

望。色彩的设计主要是使用了黄色系，背景使用了非常平面的纯色，看上去非

常清新干净，使人眼前一亮，字体和图形的颜色都是以黄色为主，与背景进行

11

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

了衬托，刚好月饼也是黄色系的，衬托起来让顾客看着更加有食欲，月饼盒子

的颜色是蓝色，蓝色和黄色的对应也是让顾客看起来非常舒适的，颜色搭配上

给顾客的感觉是非常温暖。图形的设计主要采用了祥云、月亮和灯笼，祥云和

月亮让顾客看着就非常有过节的氛围，再加上灯笼就更有充满喜庆的感觉了。

从而吸引顾客点击banner查看详情，增加顾客的消费欲望。（如图10所示）

图10品牌节日活动banner

这张品牌爆品促销类的Banner的主题是宣传品牌的这款爆品从而吸引用

户点击，因为是穿插在页面中的广告，所以非常的重要。海报内我将产品信息

直接的传达给顾客，吸引顾客关注然后被点击。我设计的这张是一张静态海报。

文字的设计主要是为了宣传这款奶油蛋糕，所以将蛋糕名称放在中心位置且字

体大小在文字中也是最大的，突出这种张海报的重点，字体设计上给蛋糕名称

设计成比较可爱圆滑的形状与产品相呼应。接下来就是顾客会看到这款蛋糕的

优惠折扣和产品特点细节相关的文字，通过文字的粗细大小进行对比，让顾客

对这张海报更加感兴趣。在的色彩设计上主要采用了黄色系作为主色调，黄色

看起来就让人很有食欲，也给人看起来就比较温暖的感觉，让banner看起来也

比较的活泼。折扣使用了红色最为底色，让顾客一眼就能看到，更加吸引用户

进行点击查看。图形的设计主要是使用钢笔将图形画成奶油从上面留下来的感

觉，海报的中间我使用一条线将文字与产品相隔开，有明显的分区，没有杂乱

无章的感觉，我将产品的图片进行了色彩的调整，使产品与背景更加协调。排

版上使用了基础的左文右图的设计，这样非常方便顾客视线的快速移动，一眼

就能看到重要的信息。（如图11所示）

12

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

图11品牌爆品促销banner

由于是要做一个烘焙类的品牌网店，而且一个整洁统一的风格和色彩就能

给顾客一种整体性和舒适感，就想到喜欢购买烘焙类产品的大多都是女孩且热

爱生活，所以想到首页的色彩方面采用单纯简单浓烈的色系“黄色系”，以米

白色、红色和橙色作为点缀，给人以活泼的感觉。首页的第一个部分就是店招

的设计，店招我主要使用黄色系作为背景，背景上还放了一个小蛋糕作为点缀，

给店招添加了一丝可爱的氛围，然后将品牌LOGO放在了左上方，中间放着品牌

的广告语，右上方摆放着登陆、注册、收藏、个人中心和购物车这些功能在它

们的下面摆放的就是导航条，我将首页的字体进行了标红与加粗，上放的广告

语选择的颜色没有用那些花里胡哨的颜色，使用了简约的黑色，底色采用了与

他对比强烈的黄色，更加的突出了广告语，顾客看店招最先看到的也一定就是

品牌的广告语。第二个部分就是Banner，banner的设计如上所说，制作banner

的作用就是使网店的内容更加活泼有生机，并且吸引消费者前来点击查看，增

加消费者的购买欲望。第三个部分是关于米旗，我先对标题进行了设计，将文

字放在了装饰的上方，让装饰图形承载着主标题，且包围着副标题，装饰图形

是使用PS里的钢笔工具，用路径查找器进行分割减去等功能，然后再将线条进

行摆放，将装饰图形完成。标题的颜色是采用了点缀的红色，因为红色非常容

易吸引消费者的注意，使网站看上去多了一份热情。接下来就是关于米旗的具

体内容，排版采用的是左图右文的设计，这种排版可以提高消费者的阅读流畅

性，还可以使用图片的内容引发消费者的兴趣，作为营销手段提高店铺的转化

率。文字的设计方面将米旗这个品牌的文字介绍放在了图片的右侧，旁边还设

计了一个了解更多的按钮，就是可以使用户可以更加了解我们自己的品牌，里

面对于米旗品牌还有更加具体的介绍。第四个部分就是新品上市，对于标题来

说同上，排版呢就与上面大不相同啦，新品上市里面的内容主要是产品，所以

这里需要提高消费者的消费欲望，这里使用产品图片与文字相结合，吸引顾客

的兴趣，从而提高消费者的购买欲望。第五个部分就是热销产品，颜色的设计

我使用了与背景有对比的同色系橙色，让顾客看起来感到非常温暖，这个模块

13

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

在产品的选择方面也是非常重要的，快速的给买家呈现一些有吸引力的产品，

也许能激发买家的咨询欲望。最后一个部分是尾部，我设计了一个返回顶部的

按钮，是用一个面包承载着文字，看上去非常的可爱，吸引顾客。接下来就是

最下面的内容，有我们店铺的LOGO、联系方式、具体地址和其他软件上的公众

号等等，这些都是给顾客一个保证，并且可以增加店铺的购买率。（如图12所

示）

3.1.2设计效果

14

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

图12首页效果图

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

3.2.1设计思路

搜索结果页设计的第一个部分就是搜索框，我在搜索栏上有意的设置展示

了有用的说明或例子。例如，搜索生日蛋糕时可能需要查询商品的关键词和标

题，可以通过提示有效的防止有问题的搜索。接下来就是所有的分类，可以将

店铺的产品进行筛选，选取到客户想要查询的产品，这个的设计我是采用了与

表格有所相似的形态承载着这些文字，让顾客看起来更加简单明了方便。色彩

的设计上我使用淡黄色作为背景，字体采用与背景色相差较大的黑色进行设计。

最后就是搜索结果商品的展示，首先一眼就可以看到的是商品主图，接下来是

商品的标题，商品价格和立即购买按钮的色彩设计采用了红色，因为这能更加

的吸引顾客的眼球，从而提升顾客的消费欲望。（如图13所示）

15

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

3.2.2设计效果

图13搜索结果页效果图

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

产品详情页是品牌店铺内使产品成交的关键页面，在这里展现了商品的价

值，促进买家的下单转化。所以在分析米旗这个品牌的过程中，我根据商品的

种类、特征和口味，选择了一款最适合大众喜爱的产品进行了详情页的设计。

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

栏、中间产品详情内容、右侧热销产品推荐。这个页面内我的背景颜色采用了

淡黄色，淡黄色代表了温暖和生机勃勃，而且这个颜色可以刺激顾客的食欲。

整体结构的设计相对来说都是比较统一的，除了产品主图购买信息、左侧导航

栏和右侧热销产品推荐与中间的产品详情内容的设计不同。以下是介绍这各产

品的详情内容的设计思路。

3.3.1提拉米苏盒子蛋糕设计思路

提拉米苏盒子蛋糕的产品详情内容的设计分为六个部分，第一个部分是产

品焦点图的设计。焦点图的背景使用的是蛋糕的细节图，可以让顾客更加了解

16

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

这款产品，清晰的认识到产品的好处与细节处，这样更能吸引消费者的眼球。

色调采用的是产品本身的色系，同时使用辅助色来调节整个画面。而且要保证

使用的色彩能够与宝贝的特点相符合，我使用米白色作为字体的颜色，与背景

颜色形成较大的色差，让顾客一眼就能注意到产品的主题与名称。焦点图我采

用了留白的艺术表现手法，将蛋糕挤占了画面的一大部分，另一部分做留白处

理，将上面部分只写上寥寥几个字和一句话时，放置蛋糕处便是焦点区，它能

把买家的视觉集中到这一处显眼的地方。可以在艺术创作中使全部作品画面、

章法更加调和精彩，给人留下想象的空间。第二部分是产品信息模块，这一模

块的设计首先是标题的设计，没有设计那种花里胡哨的感觉，以整洁简单为主

题，是顾客看着的视觉效果非常舒适。主标题下面写了小标题，诠释这部分的

特点，内容部分就是这款产品的具体信息。色彩的设计是使用与蛋糕相同色系

的咖色作为字体的底色，与产品相呼应，图形的设计我将产品置入在一个圆形

的里面，这样放置在图形内有一种良好舒适的感觉。第三个部分是精选材料模

块，这一部分的设计非常的简洁明了，连接了上个部分的背景，明显的突出了

产品的优势，选择了较好的原材料。这不仅可以激发顾客的购买兴趣，加深产

品记忆，还能够促成顾客下单，提高商品的订单转化。第四部分是选择我们的

原因，这一部分是非常重要的，在文案的设计上，精心的选择了最吸引顾客的

文字，重点突出这款产品的鲜、香和味，且这款产品老少皆宜，保质期长，味

道鲜美。我将重点文字下面进行了重点标记的设计，吸引顾客的注意。图形方

面我将图形进行了镂空以及阴影的设计，让图片看起来更加有特色，不那么单

调，从而吸引顾客，让顾客更清晰地了解这个产品。第五部分是美味的背后，

这个部分主要所讲的是米旗品牌的荣誉与品质，让顾客更加相信与了解我们的

品牌与产品从而树立信念感，激发顾客的消费欲望。最后一个部分是买家须知，

这一部分我们给消费者带来的是品质的保证与产品储存的注意点，避免出现一

些不必要的售后问题。而且这样的设计可以宣传品牌的企业文化，完成从流量

到有效流量的一个转化！（如图14所示）

17

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

3.3.2提拉米苏盒子蛋糕设计效果

18

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

19

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

图14提拉米苏盒子蛋糕详情页效果图

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

3.4.1设计思路

品牌登录注册页面的设计是比较简洁明了的，最主要的功能是使顾客达到

进入该品牌店铺的目的，从而促进店铺的购买率。首先我使用淡黄色作为主背

景，再使用橙黄色进行背景的第二次叠加，最后使用白色作为字体的背景，让

页面看起来更加有层次感，这个页面的创意设计我想的是中间一个面包房，面

包房的上下都有几只手在给它材料，从而现象成制作的过程。文字的部分我是

放置在右半部分，主要是以登陆为主，注册为辅，首先需要属于用户名以及密

20

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

码验证码进行登陆，顾客也可以选择记住密码，万一忘记密码也可以点击忘记

密码按钮，进行验证，如果是新用户，可以点击下方的蓝色字体链接，进行立

即注册。这个页面可以提高顾客的粘性，增加用户对品牌店铺的了解，而激发

顾客对产品的消费欲望。（如图15所示）

3.4.2设计效果

图15登录注册页效果图

3.5购物车视觉设计与制作

3.5.1设计思路

购物车页面的设计首先第一部分是内容的最上面那部分，左半部分使用了

LOGO和购物车标题，右半部分是购买商品所需要经过的流程，正在经历的购买

流程就会标红，给顾客提示，让顾客清楚的知道自己所在的步骤。接下来就能

看到顾客所选择加入到购物车的商品以及产品相关的信息，这一部分也是最重

要的部分，色彩上面我选择了与背景颜色相差较大的黑色作为字体的颜色，将

重要的按钮以及商品价格都标为显眼的红色。接下来顾客可以根据自己最后确

认想要购买的产品进行勾选，进行结算。最下面的一个部分是热销产品，将店

铺内销量较高的产品图片摆放在我的商品的下面，让消费者在准备结算的时候

看到这个部分的产品。设计这个部分放在购物车的尾部是为了吸引顾客的注意

力，从而激发顾客的消费欲望，增加店铺的销量。（如图16所示）

21

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

3.5.2设计效果

图16购物车效果图

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

3.6.1设计思路

订单结算页的设计首先是色彩的设计，颜色上我还是使用了与其他页面相

呼应的黄色系作为主色调，给人一种温暖有食欲的感觉，让顾客看着也有一种

十分温馨的氛围。接下来就是文字与图形的摆放，最上方的部分与购物车页面

的摆放是相同的，订单页面的上一部分就是购物车页面，所以进行了相呼应，

接下来的一部分就是收货人信息，在这里顾客可以选择需要寄到哪里去或者寄

给谁，如果发现信息错误也可以点击编辑信息按钮进行更改，选择哪个人的信

息就直接点击哪个选框就行，还能新增收货人的信息，支付方式也有多种任顾

客进行选择，看哪个更方便就可以点击那种支付方式。配送服务也是同上，如

果顾客还有其他的要求也可以在订单备注的文本框里进行信息的备注。下一个

模块是商品清单模块，这一模块是顾客在购物车模块时选择的商品就能在这里

显示出来，而且在这里顾客还有一次选择的机会，如果发现有突然不想要的也

可以将框框中的勾取消掉，从而放弃购买这款产品。下面还会给顾客显示有哪

22

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

些店铺的优惠，如果顾客需要开电子发票也可以进行勾选，接下来就是确定产

品的价格以及收货人信息，确认好之后就可以点击确认支付按钮，支付金额随

后完成订单。这样的设计可以更好的给顾客带来方便。（如图17所示）

3.6.2设计效果

图17订单结算页效果图

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

3.7.1设计思路

个人中心页面的设计在最上方的位置，顾客可以点击首页的文字链接跳转

到首页，接下来就是可以看到顾客的一些基本信息，头像、用户名、电话等等，

这些信息也可以点击进行修改，个人信息的下方有一个会员机制，可以看到现

在是会员几级，这个模块的右侧是会员可以专享的一些特权。这个模块的背景

颜色我使用了橙黄色，且还在背景里置入了一个可爱的VIP图