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