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