后台网站的分析

                                              后台网站的分析
                                  （作者：欧日鑫   撰写时间：2019年5月17日）

首先我先介绍一下我的后台网站是那种类型的，我的后台网站是购物中心后台的一个统计，是来帮助大家可以数据的一个后台网站，下面我就用蚂蚁设计里面的内容来分析一下我的后台网站里面有什么错误的地方或者是正确的地方，下面我先说一下蚂蚁设计适配里面跟我的后台有什么关系，在设计过程中，设计师还需要建立适配的概念，根据具体情况判断是否需要进行适配，以及哪些区块需要考虑动态布局。据统计，使用中台系统的用户主流分辨率主要为1920、1440和1366，个别系统还存在1280的显示设备。

Ant Design
两种为典型的适配方案：

《左右布局的适配方案》常被用于左右布局的设计方案，常见的做法是将左边的导航栏固定，对右边的工作区进行动态缩放，这里说到了每个后台网站的一个距离大小，首先我的就是这样来适配的是正确的方法，我给大家看一下图片。

《上下布局的适配方案》常被用于上下布局的设计方案中，做法是对两边留白区域进行最小值的定义，当留白区域到达限定之后再对中间的主内容区域进行动态缩放，这里说到了左右两边的空白处不要留的太多了，这个做的不是网站所以空白处不需要留那么多后台只需要有两边留稍微一点空白处就行我的是正确方法，我给大家看一下我的后台图片旁边的黑色是用来突出一下两边的空白处的不用在意。

这里提及的只是非常简单的两种适配的思路，实际设计中一套完美的适配方案需要设计师具备前端视角、平面构图视角以及交互视角。这里说到了我们的后台网站的两边空白处不要留太多了，还要两边的距离也不要太大这就是适配的一个后台网站效果。下面说一下关于栅格的内容跟我的后台网站有什么内容，Ant Design采用24栅格体系。以上下布局的结构为例，对内容区域进行24栅格的划分设置，如下图所示。我们为页面中栅格的Gutter设定了定值，即浏览器在一定范围夸大缩小，栅格的宽度会随之夸大或缩小，但Gutter的宽度固定很好不变。这里说到我的后台网站里面的内容距离不要太大了都是用着24栅格的距离内容就行了，下面给大家看一下图片里面解释了意思，我的内容栅格距离也是不大也不小的刚刚好适应这个后台网站的距离。

对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地钟视野的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。这里说到了我的后台网站栅格的距离不要大多偏差的距离要不然最终还原不了，所以要注意细节问题。下面给大家对比一下我的网站的常用模度，蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，蚂蚁设计提出了UI不要太模糊概念。在大量的实际中，我们提取了一组可以用于UI布局空间决策的数组，他们都保持了8倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。这里说到了我们后台网站的每一个的距离概率的大小我以图片的方式放在下方给大家看。