MasterGo 中的「容器」與「組」都可以用來裝載其他元素，它們有什么區別呢，我們該何時使用「容器」或者「組」來進行設計呢？接下來，小編就給大家介紹一下「容器」和「組」各自的特點和使用差異，幫助大家在設計工作中能更合理地運用它們。
首先，我們來看看什么是「容器」？MasterGo 中的「容器」與畫板相似，可以承載多類子元素。并且在設計過程中，你不僅可以像繪制普通矩形那樣，自定義容器尺寸和圓角、填充、描邊、效果等樣式。還可以為「容器」添加約束、布局網格、自動布局、原型動效等操作。同時，MasterGo 還借鑒了開發中的 div 概念，支持容器間相互嵌套。
那么什么是「組」呢？與其他設計工具中的用法類似，MasterGo 中的「組」允許你將多個元素組合在一起作為一個圖層。「組」的邊界由其子元素決定，因此，調整子元素邊界大小或移動子元素時，「組」的邊界大小會自動跟隨調整。
簡單來說，「容器」像一間辦公室，有固定大小，有墻，是一個實體，可以為自己添加填充、描邊、大小等屬性；「組」更像一個團隊，實際占用空間大小由其成員決定。接下來，我們具體來看看兩者之間的區別。
一、「容器」與「組」的能力對比
（1）邊界大小變化方式不同
「容器」的邊界大小獨立于子元素。而「組」的邊界大小與其子元素相關。因此，應用于以下具體場景中，他們的表現也不相同。
比如說，改變子級元素，調整「容器」的子級元素尺寸，不會影響容器的尺寸變化。而調整「組」的子級元素尺寸，會改變組的邊界大小。
或者是，改變「容器」/「組」的尺寸，調整「容器」尺寸時，受容器默認約束效果影響，子元素會跟隨變化，動態響應，但也可以通過 cmd 鍵忽略約束效果；而調整「組」的尺寸時，非等比例縮放情況下組內的元素會失真變形；
（2）超出邊界部分的剪切方式不同
界面設計中，我們經常需要制作一些超出頁面邊界的設計效果，如輪播卡片等，讓用戶感知到延續性。
對于「容器」來說，當其子元素超出容器邊界時，使用自帶的超出剪裁功能即可快速實現裁切效果。
而對于「組」來說，想要實現超出組邊界被裁剪視覺效果，需要手動調整矩形的尺寸，或者剪切文字，操作相對復雜得多。
（3）圖層屬性設置不同
「容器」能夠像普通矩形那樣，自由定義尺寸和樣式。樣式包括圓角、填充、描邊、效果等等。而「組」既無法定義尺寸、又不能添加樣式，當需要給組添加樣式時，只能添加到組內的子元素，表現和多選相同。
（4）創建和刪除操作不同
首先是創建/刪除「容器」的方式。設計師在工具欄中選擇容器工具或使用快捷鍵 F/A，可以直接在右側屬性面板選擇需要的容器尺寸，也可以在畫布中點擊或拖拽來創建一個容器。
選中容器后，使用刪除鍵可以刪除容器。注意，刪除容器會將容器內的所有圖層都刪除。如果不想刪除容器內的圖層，可以在右鍵菜單中選擇「取消編組」來取消容器，也可以使用快捷鍵 Shift + Command + G 來取消編組。
其次是創建/刪除「組」的方式，設計師可以在選擇對象后按下 ? + G（Mac）或 Ctrl + G（Win）來快速編組。并且在任何時候你都可以通過按 ? + Shift + G（Mac）或 Ctrl + Shift G（Win）來取消編組。
二、「容器」與「組」的應用場景
了解「容器」與「組」的基本用法與區別后，對于“何時使用「容器」？何時使用「組」？”，回答便清晰多了。
當你希望出現以下情況時，我們建議你使用「容器」來承載子元素進行創作。比如，改變子元素大小，不會改變容器的邊界大小；調整容器邊界大小時，可設置子元素的自動調整行為（自適應約束）；子元素被容器邊界大小剪切，或者位于容器的邊界大小之外；原型中具有嵌套滾動的行為（例如：水平輪播或者可以隨意移動的地圖）；在該元素中使用布局網格時等。
而當你希望出現以下情況時，我們建議使用「組」來承載子元素進行創作。比如，將多個元素組合到一起，但不影響他們的可編輯性；將多個元素組合在一起，以便在縮放時保持跟隨縮放（例如：由多個形狀組成的logo或符號）；在操作組的邊界大小時可以使子元素自動適應等等。
總而言之，在使用 MasterGo 時，用「組」畫一些結構邏輯不是那么強的東西（比如插畫）時會比較方便。而在其他情況下皆可用容器，因為「容器」可以為設計帶來更多可能性。
三、「容器」的最佳實踐
（1）使用「容器」實現模塊化設計
「容器」借鑒于開發實現中的 div，不僅可以精簡圖層數量，還引進了把開發實現中的模塊化思想 。當開發拿到一個設計稿時，腦海中會立刻浮現這個頁面是由哪些模塊構成，而最終代碼也是由一個個 div 模塊嵌套而成。
比如，整個頁面大致可以分為 Header、Content 和 Footer 三個模塊，每個模塊又可以分為更小的模塊，比如 Header 又可以分為 StatusBar （狀態欄）和 PageHeader （頁面頂欄）等，如此一來，整個代碼結構清晰分明，維護方便。
設計同理。開始設計前，應該先在腦海中構思這個頁面由哪些模塊組成。我們可以借助容器的多層嵌套特性，來拆分頁面中的模塊，保持圖層結構清晰。
如下圖，通過多級容器嵌套讓圖層的結構與視覺上的模塊基本保持一致（組件和自動布局元素也是容器，只不過是特殊的容器）。這樣做不僅可以讓我們的設計稿更容易維護，也會潛移默化地影響我們的設計思路，讓我們在思考設計時更加有條理有邏輯。
（2）使用「容器」實現響應式設計
響應式布局在實際業務需求中十分普遍，在 MasterGo 中我們可以通過將「容器」與布局網格、約束結合來實現響應式設計。
當容器與布局網格結合時，在 MasterGo 中可以通過給容器定義網格布局、柵格布局來輔助界面設計，它的作用更像是參考線，方便設計師排版布局。
當容器與約束結合時，「約束」就是定義子元素與父容器間的大小/位置關系，當調整容器的大小時，其內部元素的大小和位置會跟隨我們所設置的約束來響應。
在屏幕尺寸差異不大時，只需要完成一個尺寸設計，這就實現了一稿多配，節省大量時間。比如下圖中，我們給這個時間文本設置的是水平方向上居左，垂直方向上居中，所以在我們拖拽外部容器的時候，它會一直保持在左邊，同樣地右邊的網絡電池圖標一直保持在右邊。
另外，如果你想要在「容器」上做出更加復雜的布局規則，我們十分建議將「響應式約束」和「布局網格」結合使用。
（3）容器與組件化設計
組件是一種特殊的容器，如果你把一個組轉為組件，它會自動變為一個容器。這時，你不能把它變回組，除非把組件解除。
（4）容器與原型動效結合
MasterGo 中的容器與 HTML 中的容器有異曲同工之處。在 HTML 中，容器可以設置內部滾動，而我們同樣可以為「容器」設置內部滾動。比如下圖中的推薦模塊，設置容器水平方向溢出滾動行為后，原型演示模式下就可以實現容器內的子元素按水平方向滾動的效果了。
為容器設置了溢出滾動行為后，若某些元素需要固定在容器的特定位置，比如 App 的底欄，我們可以勾選該元素的「演示滾動時位置固定」，這樣在原型演示模式下，滾動內容時它的位置不會跟隨變動。
（5）容器與蒙版的使用
蒙版或者遮罩，是設計軟件中很常見的一種功能，一般用來將圖形裁切為某種形狀。MasterGo 同樣提供蒙版功能，但是如果設計師只需要如下圖中簡單的邊界裁切，小編不建議通過蒙版進行裁切，因為蒙版圖層結構復雜，會讓你的設計結構變得不清晰。推薦使用容器的「超出剪裁」功能來實現圖形的裁切，操作簡單便捷，圖層結構也更清晰。
以上就是「容器」和「組」的區別介紹和實踐操作指南，希望可以幫到大家。作為協同時代的產品設計工具，MasterGo 團隊始終將用戶體驗和技術性能的提升作為未來最為關注和持續投入的地方，不斷更新優化，以便用戶在使用過程中能獲得更優質的體驗。
