排版是設計師重要的工作內容之一,比如說,修改按鈕文字要排版、調整順序要排版、適配多種屏幕要排版,設計師們不是在排版就是在排版的路上。但設計師不應該花太多的時間在排版上,想讓排版這件事變得更輕松,一定要試試 MasterGo 自動布局功能。
舉個例子,以往設計師在設計一個按鈕時,當文字長度發生變化,需要手動重新調整按鈕的寬高尺寸。而通過 MasterGo 添加自動布局后,修改按鈕內的文字時,按鈕會自動跟隨文字長短變化寬高。

或者說,B 端設計師會經常遇到表格設計需求,做好表格后,有時會需要增加或者刪除某一行,或者調整某一行的順序,以往只能手動挪動多行來變更層級順序,增刪之后還需要重新調整表格高度。通過 MasterGo 添加自動布局后,增加、刪除某行時,表格會自動調整尺寸。想要改變表格中某行的順序,只需按方向鍵上、下移動某行就搞定了。

以及,卡片作為設計中經常會遇到的組件,通常情況下,卡片內容需要隨著卡片寬度的變化調整,這樣才能更好地適配跨設備的不同屏幕。通過 MasterGo 添加自動布局后,不需要為不同屏幕尺寸設計不同的卡片樣式,拉伸容器就能讓它跟隨你的心意變化。

自動布局雖然看起來很復雜,但如果明白了其中原理,用起來會非常簡單高效。接下來小編就通過 4 個操作步驟,帶領大家一起體驗自動魔法的奧秘。
首先,在 MasterGo 設計模式下,選擇一個容器或者多個圖層后,設計師們有三種方式可以創建自動布局容器:點擊右側屬性面板中自動布局的“ + ”,右鍵菜單列表中選擇“添加自動布局”,或者使用快捷鍵Shift + A。

其次,設計師們可以在畫布中或者自動布局面板中調整自動布局內圖層間的距離(自動布局容器內,圖層與圖層之間的距離稱為間距,圖層與容器邊框之間的距離稱為邊距)。
如果想要在右側面板處修改間距或邊距,設計師可以在右側欄自動布局面板中手動修改或直接按住間距圖標左右拖動調整【間距】【上下邊距】【左右邊距】的數值,讓容器內所有小框按照你希望的間距排列。點擊【展開】圖標還可以逐一調整容器與內部元素的上、下、左、右邊距,滿足不同調整需求。

如果想在畫布上修改間距或邊距,設計師可以先選中一個自動布局,然后在畫布中能夠很直觀地看到間距和邊距的調節手柄,拖動手柄就可以快速調節間距和邊距了。當然,也可以像在右側屬性面板上的操作一樣,點擊手柄即可輸入數值來精確控制自動布局內圖層之間的距離。值得注意的是,當間距為負數時,此時圖層之間會形成堆疊效果。

當然,MasterGo 自動布局還提供了多種對齊的方式。設計師選中自動布局容器時,在對齊面板中選擇對齊方式,自動布局內的所有子圖層會按照所選方式進行對齊。
最后,建議設計師們熟記一些MasterGo 的快捷鍵,比如「增加」可以通過快捷鍵 Command + D 來復制子圖層,「刪除」通過 Delete 鍵來刪除一個子圖層,「調整順序」通過方向鍵來快速調整圖層的順序。
以上就是 MasterGo 自動布局的一些基礎操作,可以滿足設計師們一些簡單的響應式效果。但是,想要實現更復雜的整體界面自動響應的效果,還需要進一步掌握調整大小的組合技,嵌套容器大法等技巧,實現更高階的自動魔法,設計師們可以通過 MasterGo 多嘗試、多體驗、多創造!






