探索MasterGo中的「容器」与「组」：设计布局的秘密武器

今天，我们将聚焦于MasterGo中两个至关重要的概念——「容器」与「组」，它们在设计世界中扮演着独特而重要的角色。

「容器」：前端代码的div标签化身

「容器」在MasterGo中相当于前端开发中的div元素，它是一个灵活多变的框架，能够嵌套其他设计元素，层层嵌套，构建出复杂的布局结构。其核心功能在于构建动态响应式的布局，使得设计在不同设备上呈现出一致且优化的用户体验。

「组」：元素的机械组合

「组」功能则类似于所有设计软件的通用特性，它允许用户将多个图层打包在一起，形成一个整体。这种打包编组的方式主要应用于元素的机械堆砌，使设计者能够轻松管理并组织设计元素，但功能相对单一。

「容器」的多面优势

相较于「组」，「容器」提供了更为丰富的功能。除了基本的打包编组外，「容器」还具备「画板作用」，如同Sketch中的画板功能，能收纳设计中的所有元素。它还能执行「编组作用」，与「组」类似，但更进一步，支持嵌套结构，从而建立有序的父子级关系。此外，「容器」还允许直接裁剪元素，无需手动制作蒙版，大大节省了设计时间。更重要的是，「容器」能自由定义尺寸和样式，包括圆角、填充、描边及特效等，赋予设计更多可能性。

实战案例：布局网格与约束功能

• 结合布局网格：在设计网页时，选择容器，利用布局网格功能创建网格系统，设置属性，添加容器作为卡片，设置约束，让卡片在不同设备上保持动态响应。
• 结合约束功能：通过约束功能，将子元素绑定至容器边缘，实现元素间的稳定布局，无论页面宽度如何调整，元素始终保持预期位置。

避免蒙版，使用容器快速裁剪

MasterGo提供蒙版功能，但在实际操作中，建议避免使用蒙版进行裁剪，因为过程繁琐且可能导致设计结构混乱。相反，使用容器进行裁剪更为高效便捷。

组件：特殊的「容器」

组件在MasterGo中是一种特殊的容器，一旦将设计对象转化为组件，即自动获得容器的所有功能，包括但不限于「画板」、「编组」、「裁剪」等。

「容器」使用技巧大揭秘

• 避免子元素跟随变动：在调整容器尺寸时，按住Cmd键可防止子元素跟随变动。
• 自动吸附与空格键：容器内元素会因吸附属性自动进入，按下空格键可取消吸附。
• 穿透与层级选择：拥有编辑权限时，按Cmd键穿透选中子级元素；无权限时，默认穿透，使用Cmd键忽略穿透效果。通过Enter键同时选中下一层所有子级元素，或使用Shift+Enter选中上一层的父级元素。

结语

「容器」与「组」在MasterGo中各具特色，掌握它们的使用技巧，将极大提升设计效率与质量。希望本文能为您的设计之旅提供宝贵的指引。