Ant Design的布局

Ant Design的布局
我们来讲一下Ant Design布局

空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI界面的布局空间要基于『动态、体系化』的角度出发展开，我们受到建筑界大师柯布西耶的模度思想的启发，基于『秩序之美』的原则，探索UI设计中的动态空间秩序。
在中后台视觉体系中定义布局系统，建议从5个方面出发：
1.统一的画板尺寸
2.适配方案
3.网络单位
4.栅格
5.常用模度
统一画板
为了尽可能的减少沟通与理解的成本，有必要在组织内部统一设计版块的尺寸，蚂蚁中台设计团队统一的画板尺寸为1440

适配
在设计过程中，设计师还需要建立适配的概念，根据具体情况来判断系统是否需要进行适配，以及那些区块需要考虑动态布局，据统计，使用中台系统的用户的主流分辨率主要为1920、1440、和1366，个别系统还存在1280显示系统
Ant Design两种较为典型的适配方案：

一、左右布局的适配方案
常被用于左右布局的设计方案中，常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。

二、上下布局的适配方案
常被用于上下布局的设计方案中，做法是对两边流白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。

一般我做的布局都是非常简单的，也没有想太多的方案，就比如说我们做的后台网站的，必须要统一的画板，如果不要的话感觉看着别扭，布局是使用的左右布局，适配的话是使用的左右布局的适配方案，这也是一种非常简单的适配思路，常用的模度具备上方所述内容的动态的韵律感其实布局对于设计师来说只是一个思路上的一个方案而已，不一样的网页有不一样的布局风格，有的比较严谨有的比较松弛，布局方式不一样里面排版的内容也不一样、风格也不一样，每一个网页都要有流程图，

如上方所示，这张后台网站使用的是统一的画板，也考虑了适配，还有哪些区域需要动态布局等等一系列。适配使用的是一种左右适配的方案。