對(duì)于 UI 設(shè)計(jì)師而言，日常工作 20% 的時(shí)間用來(lái)設(shè)計(jì)內(nèi)容，剩下的 80% 大多都是做一些重復(fù)性的工作，比如說(shuō)文案調(diào)整會(huì)導(dǎo)致板塊的尺寸發(fā)生變化，或頁(yè)面中的元素需要調(diào)整大小，影響到其他元素的位置，這些都需要設(shè)計(jì)師逐一手動(dòng)調(diào)整。但是如果掌握了 MasterGo 的“自動(dòng)布局”的話，將會(huì)節(jié)省大量重復(fù)的工作時(shí)間。今天小編就先帶大家了解一下 MasterGo “自動(dòng)布局”功能。
首先，我們要知道什么是自動(dòng)布局。簡(jiǎn)單來(lái)說(shuō)，就是彈性布局在設(shè)計(jì)上的可視化應(yīng)用，讓元素變得可以自適應(yīng)。它的好處就是，如果修改子級(jí)內(nèi)容的話，父級(jí)也可以按照我們的設(shè)置來(lái)自動(dòng)適應(yīng)變化；相反，更改父級(jí)內(nèi)容，內(nèi)部子級(jí)的排版也會(huì)根據(jù)自動(dòng)布局的設(shè)置進(jìn)行調(diào)整，大大減少了后續(xù)修改頁(yè)面所需要的時(shí)間。
現(xiàn)在就在 MasterGo 中帶大家了解一下“自動(dòng)布局”。首先需要?jiǎng)?chuàng)建幾個(gè)元素，選中它們，可以直接點(diǎn)擊右側(cè)的“自動(dòng)布局”，當(dāng)然，使用快捷鍵“Shift+A”也可以快速創(chuàng)建自動(dòng)布局。如果想解除自動(dòng)布局，同樣點(diǎn)擊右側(cè)的“-”就可以解除自動(dòng)布局，其實(shí)通過(guò)左側(cè)圖層關(guān)系不難看出，自動(dòng)布局理論上是將選中控件創(chuàng)建特殊容器，所以通過(guò)“Command+Shift+G”也可以解除自動(dòng)布局。
創(chuàng)建自動(dòng)布局以后，帶大家認(rèn)識(shí)“自動(dòng)布局”的功能面板：
在“自動(dòng)布局”的功能面板中，可以看到兩個(gè)切換圖標(biāo)，它的功能是更改自動(dòng)布局的排列方向，通過(guò)圖標(biāo)也可以快速理解“橫向布局”與“縱向布局”的區(qū)別，并且修改完成之后，左側(cè)圖層中的圖標(biāo)也會(huì)相應(yīng)發(fā)生變化，非常直觀。
旁邊還有一個(gè)功能是“調(diào)整元素子級(jí)的間距”，如果自動(dòng)布局的容器中有多個(gè)子級(jí)時(shí)，可以通過(guò)調(diào)整這里的數(shù)值來(lái)修改間距，就算后期加入其他元素，也會(huì)按照設(shè)置好的間距進(jìn)行排列。這里需要注意，一層自動(dòng)布局只能設(shè)置一種間距，如果想要不同間距，需要?jiǎng)?chuàng)建多層嵌套。
同時(shí)，MasterGo 還提供了“分布式間距”，當(dāng)選擇幾個(gè)元素，開(kāi)啟“分布式間距”后，修改容器的大小，元素會(huì)在容器內(nèi)平均分布，自動(dòng)計(jì)算間距，一般在我們控制等距元素的響應(yīng)時(shí)會(huì)用到這個(gè)功能，比如說(shuō)我們常見(jiàn)的底部 Tab 欄。
接下來(lái)我們介紹兩個(gè)調(diào)整內(nèi)部間距的功能，簡(jiǎn)單來(lái)說(shuō)就是調(diào)整子級(jí)到父級(jí)的間距。需要注意的是，無(wú)論子級(jí)有多少個(gè)，都被視為一個(gè)整體，這里更改的是子級(jí)整體與父級(jí)容器的間距，可以修改它上下間距與左右間距兩種數(shù)值，在同一個(gè)輸入框內(nèi)，兩個(gè)數(shù)值可以通過(guò)逗號(hào)隔開(kāi)。當(dāng)你想設(shè)置頂部間距為 16，底部間距為 24 ，只需要在上下間距輸入框內(nèi)輸入“16，24”即可完成上下邊距的對(duì)應(yīng)設(shè)置。
MasterGo 除了“上下”、“左右”這兩個(gè)快捷邊距調(diào)整外，還提供了“展開(kāi)邊距”功能，該功能可以更加直觀地調(diào)整上、下、左、右對(duì)應(yīng)邊距，用來(lái)適應(yīng)更多場(chǎng)景與需求。
接著我們來(lái)看“自動(dòng)布局設(shè)置”功能，這里包含了兩個(gè)內(nèi)容，分別是“自動(dòng)布局描邊設(shè)置”與“自動(dòng)布局堆疊設(shè)置”。當(dāng)你給自己元素添加一個(gè)描邊，設(shè)置中選擇“不包含”，描邊無(wú)論粗細(xì)是多少，都不被包含在自動(dòng)布局的設(shè)置內(nèi)，選擇“包含”描邊的粗細(xì)將影響自動(dòng)布局的數(shù)值調(diào)整，當(dāng)然我們也可以通過(guò)“預(yù)覽”窗口更加直觀地看到對(duì)應(yīng)效果。
堆疊設(shè)置也非常好理解，以我們常用的用戶頭像為例，我們調(diào)整間距為負(fù)值，將會(huì)產(chǎn)生堆疊效果，這里的設(shè)置可以修改堆疊方式為“正向堆疊”與“反向堆疊”兩種。
最后介紹的模塊是“分布方式”，MasterGo 為我們提供了 9 種不同的分布方式，通過(guò)點(diǎn)擊縮略圖中的分布方式，子級(jí)元素也會(huì)固定在容器的某一位置，當(dāng)將子級(jí)固定在右上角，無(wú)論怎么拉伸容器，子級(jí)的位置都不會(huì)發(fā)生改變。
以上就是關(guān)于 MasterGo “自動(dòng)布局”的介紹了，希望能幫助到大家。未來(lái)，MasterGo 團(tuán)隊(duì)還會(huì)持續(xù)優(yōu)化產(chǎn)品功能，滿足不同用戶的使用需求，讓設(shè)計(jì)師擁有更流暢、優(yōu)質(zhì)的設(shè)計(jì)體驗(yàn)。
