后台数据统计二级页面设计详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39828828/article/details/90311207

本文详细介绍了后台二级页面的制作过程，重点是数据统计模块的设计，包括排版、功能栏、图标、查询框、统计图表等元素的创建与交互设计，旨在提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者：李哲定时间：2019年5月18日
在这里插入图片描述
首先我们把这个二级页面的排版做出来，这个排版我是经过了很多的思考才决定用这个排版的，因为一个网页，不管是什么网页，一个排版就决定了成果的一大部分，可以说一个网页可不可以做好就很大取决与排版。
在这里插入图片描述
我把我这个标志性的logo给这个左边这里放了上去，然后把我的网站的名字打上去，打上去之后，我就开始做下面的功能栏，功能分别就是平台首页以及交易管理，数据统计，用户管理，财务结算，还有系统管理，我这个二级页面说的是数据统计，所以我在数据统计这里做了一个交互设计，这个交互设计就是把他的底色的颜色调整了一下。
在这里插入图片描述
左边的功能栏我已经做好了，现在我来做右边的这个icon和这个查询的框。我把这四个icon做出来之后，我就开始做这个查询了，我先在前面做了一个今日报表：，然后在后面做了一个矩形，把矩形的填充色取消掉，取消掉之后再把他的描边弄成灰色，再在最后面做一个矩形，把他的填充色做成蓝色，色彩如上，然后把接下来的也这样做出来。下面我们做后面的内容页。
在这里插入图片描述
现在我可是做这个大型的icon了，这个icon做的时间就比较久了，做了这六个icon之后我在旁边把这个icon所代表的东西给打了上去，打上去之后这个六个icon这里就做好了，然后我们现在开始做右边的这个快速查看的，这个快速查看的功能就是把自己经常用的功能放在这里，然后在这里直接点击就好了，我这里的功能是销售明细，进货明细，商品管理，客户管理，还有供应商管理这几个，然后在这个打出来之后，我就把商品管理做了一个交互设计，就是在字体的颜色上面有改变。
在这里插入图片描述
最后一步，我开始做这个统计图了，我先把今日报表做出来的，我把这个圆的统计图做出来之后，我就把这里面的内容打上来，这个今日报表这里就完成了，然后就开始做统计图，这个统计图统计的是最近七天的销售量和利润，还有销售单数，这里就要用到钢笔工具了，我用钢笔工具把图做出来之后，我就把这个统计图的内容做出来，做好之后这个图也就做好了。