后台首页设计分析

                                            作者：张丽君     时间：5月9号-5月18号    班级：18级实验班

这几天我们正在做一个后台网站，我们在做这个后台网站时，先是参考了一下别人做的后台网站，看看别人是怎么做的，排版怎么排的，字体用多大，颜色不能用太艳丽的颜色，看上去很耀眼，下面就来讲述一下我做的一个后台网站。

上面这张图我采用的颜色是蓝色，内容的小标题栏字体用的是12号字体，左边的边框栏字体用的是16号字体，采用的字体是微软雅黑， 排版的问题在于没有居中，边框上面的ICON是一个莲花的样子，这样看上去好看一些，我在做这个首页的时候，在想，假如我是这个用户的一个样子去做的，把自己想象成用户，来设计一个首页，这些都是设计会想到的，点击个人中心会跳转到首页中，首页里面都是用户的订单、收入、消费、客服情况等。

今日订单是当天订购的一些东西，下单时间，等一些信息。消费统计是这个月消费了多少钱，由于上面的字体太小，跟下面的统计图有点不搭，旁边的边框缺少一些ICON显得有点空白所以我对它们都进行一定的更改，如图：

这是我更改过的首页，我们可以用这两张图片来进行分析。

1、板块之间的对比

板块之间的距离一定要居中，两边的空白不能留太多，这样看上去太空了，板块之间的大小要一致，或者看上去不好看，如图对比：

 

板块与板块之间的距离和大小对比，可以明显的看到这两张图片的大小与排版问题，这是运用了Ant Design里面的对比。

2、颜色的搭配

首先我们要知道颜色与颜色之间的差别，不同的颜色搭配有不同的运用方式，假如一个设计师在设计一款产品的时候颜色的搭配不好，用户不会采用这款产品，这款产品的颜色，我做的是一个冷色系的后台网站，大部分都是蓝色、白色，我觉得这样的颜色搭配会好看一些，字体颜色运用的是黑色。

字体之间的距离，对于一个设计师来说字体的大小不可以超过30，但是字体的摆放一定要整齐，我们可以看到字体的大小差别不是很大，一个是16号字体一个是12号字体，我们可以看到这两张图片字体的区别，如图1所示左边的蓝色提示框里面的字体，下面的字体是黑色，随后在看看图2里面的蓝色提示框里的字体是白色，下面的字体采用的也是黑色，图2中我添加了一些ICON，这样看上去不会太空，颜色用的是黑色和白色，如图所示：

                      

3、消费统计

消费是用户这个月花出去了多少钱，每次用户花出去的钱我们都会做一个统计，4月份花出去了多少，5月份花出去了多少，收入了多少，我们都会做一个记录。

如果用户想查看自己的消费与收入情况，可以点击个人中心，会出现一个首页，那里面都是用户的一些信息，与消费情况。

4、今日订单

今日订单是指自己所购买的商品，到达时间，姓名，地址，联系电话等一些重要信息与评价，如果想要查看更多自己购买过的商品，点击右边的查看更多方可查看。如图：