我们很高兴地宣布，「自动布局」现已在 MasterGo 中启用！
按钮可以通过调整文本内容来控制整个按钮的大小。
列表可以通过添删内容、调整内容顺序来重新排列布局。
元素可以通过复杂的调整设置来响应布局容器。
对我们来说，构建「自动布局」是一个有趣的过程。除了在产品设计和技术开发的思考外，也有用户对功能的想象，当然最重要的就是把思考和想象转变成功能，能够带给用户更高的设计效率和体验。经过多次设计迭代后，它才以正确的形态与你见面。
设计与开发的融合
MasterGo 是一款设计工具，设计师可以利用路径、图层、编组在画布中自由设计。可是自由设计会给我们带来很多重复性的工作。
一个表面上看来简单的例子，当我们更改按钮文字内容的时候，同时也需要调整背景图层的大小。
有一种与自由设计相反的状况，程序员可以使用他们的生产力工具( 例如 HTML/CSS、SwiftUI )，可以利用 UI 结构和规则来构建 UI 对象，使得按钮复制、修改变得更轻而易举。可是这样的生产力工具反而不能更好的自由设计。
有什么样的设计工具能够将设计和开发融合呢？当然有，很早以前就有一款网页设计工具 Dreamweaver，它就是把设计与开发融合到了一块。
只可惜的是它摒弃掉一部分自由设计的乐趣，增加了设计师无法理解的结构逻辑，使得设计师和程序员用起来都非常尴尬。
当然，使用「自动布局」功能也需要学习一些简单的前端代码布局方式。经过我们体验不同设计工具和尝试了许多不同的方法之后，我们找到了把两者相结合的方式，可以将前端中的 CSS 盒模型 (Box Model)、弹性布局 (Flexbox Layout)、网格布局 (Grid Layout) 与设计结合。
最终我们将 CSS 盒模型 (Box Model) 和 弹性布局 (Flexbox Layout) 的概念直接添加到 MasterGo 中。弹性布局，可以简便、完整、响应式地实现各种页面布局。
弹性布局的基本概念是容器存在两根轴，水平的主轴和垂直的交叉轴，而每根轴都有起始线和终止线，同时容器和容器项目有着一种相互影响的复杂机制。
方案设计
基本设置
我们希望把主轴方向、两轴对齐方式尽可能的融合到设计方案当中。
主轴方向（水平或垂直），主轴/交叉轴除了基本对齐方式（左/右/顶/底等对齐）外，还增加了复杂对齐方式：Space between、Space around、Space evenly。
这个方案在使用过程中发现了一些问题：
首先，主轴和交叉轴的概念对于设计师来说理解起来比较困难。
其次，复杂对齐方式无法通过简单几个字解释清楚，同时用户对复杂对齐方式会混淆，记不住对应的都是什么效果。
单行/列模式下，交叉轴间距和交叉轴复杂对齐方式并没有实质性的设计场景。
根据上述问题进行逐一调整：
主轴或交叉轴概念换成了水平排列和垂直排列，理解起来非常简单：以列排序还是以行排序。
主轴对齐方式进行优化和调整，保留比较有特点的复杂对齐方式，减少使用上出现混淆的情况。
移除交叉轴间距与其复杂对齐方式，设计场景不太多，设置了也没有实质的意义。
图形化对齐方式操作，减少文字的表述，图标或许更直观。
方案 A 和 方案 B 的区别在于主要排列方向的复杂对齐方式不同，方案 A 保留了两种复杂对齐方式，而方案 B 只保留了一种，同时方案 B 变成了按钮开关。
方案 A 保留了 Space between 和 Space evenly 的复杂对齐方式，我认为 Space evenly 使用设计场景非常多，例如主页的金刚位的布局/手机桌面。后来发现 Space between 配合边距就能达到这样的效果，反而太多复杂对齐没太大必要。
但是问题来了，方案 B 开启 Space between 开关时，水平布局是不可用的，而对齐方式的操作会在用户切换布局方式（水平或垂直）时会产生使用上的疑惑。
最后我们针对对齐方式交互方式进行了调整，采用对齐面板 + 对齐菜单的形式。这样可以减少用户在切换布局方式时产生疑惑，当我们开启分布式排列（Space between）时，对齐方式交互上会有较小的变化。
例如，水平布局开启分布式排列时，对齐面板将会改变，同时水平对齐方式变为自动且不可操作。
调整设置
调整设置，自动布局最强大的功能之一是它能够控制自动布局容器本身及其内部图层的尺寸，而两者相互有着非常强的依赖关系。
以「自动布局容器」为例。当它是水平布局，同时父级也是「自动布局容器」。那么它的调整设置就拥有三个选项：
适应内容：将「自动布局容器」设置为「适应内容」，在遵循边距及间距规则的情况下，容器将保持尽可能小的尺寸包围其所有子图层。
固定内容：当「自动布局容器」设置为「固定宽度或高度」时，容器尺寸的值将保持不变，同时子图层排列布局方式不被影响。
充满容器：「自动布局容器」中设置为「充满容器」时，将拉伸到其父容器的宽度或高度。
我们设计调整设置方案时，同样采用了面板 + 菜单的形式（即调整面板 + 调整菜单），设计师通过点击面板或者点击菜单就可以切换宽度/高度的调整设置，每个选项会对应不同的展示效果，并配合动画效果，来帮助用户理解调整设置的作用。
「自动布局」是如何工作的
将「自动布局」添加到容器时，内部的图层彼此相邻（水平或垂直）排列。然后，容器的大小由容器中各个图层的总大小决定。自动布局容器可以具有边距，填充，描边和角半径，因此你可以创建按钮而无需添加其他图层。
自动布局按钮在编辑文本时，容器会自动调整大小。而且，如果你将一些按钮排列在一起，它们都会按照你的期望移动。
除了按钮之外，在使用重复的 UI 元素（如列表和菜单）创建设计时，「自动布局」非常有用。现在只需简单的拖放即可完成操作，而不是无数次单击以将图层移到正确的位置。
嵌套自动布局容器
通过嵌套自动布局容器，可以将这些单独的自动布局图层组合为完整的界面，其方式与 div 标签可以嵌套在 HTML 中的方式几乎相同。就像在生产环境中一样，你可以轻松地编辑内容并将内容移入或移出自动布局容器。
希望借助「自动布局」，我们可以在 MasterGo 中运用代码结构来设计界面，现在就可体验。
未来规划
对我们来说，这只是一个开始，我们会继续探索研究更强大的布局方式和更高效简洁的交互，用最简单的方式让设计师驾驭那些强大的功能，下次见！
