功能背後：我們如何讓智慧型佈局超越符號 (第一部分)

我們剛剛發佈了智慧型佈局的主要更新，使其遠遠超越了符號的根基。此最新更新建立在較早的更新之上，該更新使智慧型佈局更加可靠和可預測，同時也增強了智慧型分佈功能。

這項工作耗時良久，在這個由三部分組成的系列文章中，專案團隊將深入探討這些更新，從他們面臨的挑戰到引領我們走到今天的努力。

我們在 2019 年底 將智慧型佈局引入 Sketch，以符號和庫為基礎，旨在使符號更具彈性。

有了智慧型佈局，您就可以告別手動調整符號大小以適應其覆寫，或在同一個設計中構建多個符號只是為了適應相同組件的不同大小。現在，Sketch 可以處理所有這些。

只需為您的符號來源設置佈局屬性，每當您在其一個實例中編輯覆寫時，它就會自動調整大小。更好的是，智慧型佈局會在符號向您設置的方向增長時，保持符號中圖層之間的填補和間距。

前提很簡單，但目標卻雄心勃勃。推出後不久，我們看到許多客戶採用智慧型佈局，並使其成為他們工作的基本組成部分。隨著時間的推移，我們在將注意力集中在其他迫切需要的功能的同時，設法發佈了一些改進。

最近，我們決定回到智慧型佈局，並向前邁出一大步。我們知道這並非易事（事實也並非如此！），但這很重要且必要。

為了理解我們遇到的困難，我們必須退一步，了解基礎知識。畢竟，什麼是智慧型佈局？它實際上是如何運作的？讓我們來分解一下。

智慧型佈局是什麼——以及不是什麼

讓我們先了解一下智慧型佈局的實際意義。它基於三個關鍵原則

1. 最小化設置。它只要求設計師做一件事：這個設計是如何佈局的？有兩種方向可供選擇——水平或垂直——每種方向都有三個定位點可供選擇——分別是左/中/右或上/中/下。這些選擇設定了佈局的軸和方向屬性。
2. **自由排列。** 設計師不再受限於特定版面類型。圖層可以按照設計師想要的任何方式放置和間隔：堆疊、並排、完全或部分重疊，或者同時混合使用這些方式，圖層之間可以設定任何間距。
3. **單一系統。** 它同時處理受控版面系統的兩個關鍵任務。首先，圖層必須適應*包含*在其中的圖層：例如按鈕，其最簡單的形式是由矩形環繞的文字圖層。其次，圖層必須適應*相鄰*的圖層：以垂直排列的兩個文字區塊為例，當上面的區塊增大時，下面的區塊必須向下移動。

為了更好地理解這一點，將智慧型版面與嚴格基於堆疊的版面系統進行比較可能有所幫助。在這些系統中，圖層通常必須排列成單列或單欄（通常間距嚴格相等，沒有例外），並且必須由其他系統輔助圖層的包含，因為重疊是不可能的（具有明確內邊距的可樣式化容器）。

我們設計智慧型版面的目的是為了適應基於堆疊的版面，但不受其限制。

智慧型版面的實際運作方式

與任何其他受控系統一樣，智慧型版面的工作是通過操作其他圖層來響應對指定圖層的更改，同時尊重使用者先前的選擇和意圖。

為此，智慧型版面會考慮三個輸入：

1. **設計師選擇的版面。** 它的軸和方向是什麼？
2. **所做的更改。** 圖層是放大、縮小還是消失了？
3. **設計的目前狀態。** 哪些其他圖層位於更改區域內或與其相鄰，以及它們與已更改圖層的空間關係如何？

雖然前兩個輸入非常簡單，但後者可能極其複雜。

智慧型版面的自由排列和低顯式設定特性使其獨樹一幟，但也使其開發面臨獨特的挑戰。我們必須評估已更改圖層與其直接上下文中的其他圖層之間的空間關係，才能從設計師的設計中推斷出其隱含的意圖。（冷知識：推斷式版面 (Inferred Layout) 是智慧型版面的原始開發名稱）。

在進行此評估時，我們必須考慮：

• 沿著版面軸，每個未更改的圖層與已更改圖層之間存在六種可能的空間關係：它可能位於其前緣之前、與其前緣重疊、環繞它、被它環繞、與其後緣重疊或位於其後緣之後。
• 沿著版面軸，應用於每個未更改圖層的三個調整大小限制（固定大小、固定前緣和固定後緣）的七種可能組合。

對於已更改圖層的階層級別中的每個未更改圖層，這些組合共同代表了給定圖層更改的 42 種可能組合。此外，智慧型版面以遞迴方式工作——巢狀圖層的更改會導致階層結構向上更改，因為群組會適應其內容的大小。

雖然此評估可能相當複雜，但在任何情況下，任何更改都只會對未更改的圖層產生三種結果之一：移動它、放大或縮小它，或者不執行任何操作。

此外，如果所做的更改是圖層消失，我們還需要考慮如何處理與該圖層相鄰的空間。我們將在下一篇文章中更詳細地討論這個問題。

最後，我們必須考慮沿著佈局*軸*的*方向*。智慧型佈局實際上與方向無關，對於水平佈局總是從左到右運作，對於垂直佈局總是從上到下運作。如果使用了任一軸的另外兩個方向之一，它只需透過將套用智慧型佈局的每個元素偏移總變更量的一半或全部來補償即可。然而，對於沿著佈局軸重疊的圖層以及某些佈局方向的變更，我們也會仔細調整個別圖層的位置。

我們在智慧型佈局方面遇到的挑戰

在我們尋求改進智慧型佈局的過程中，我們面臨了三個主要挑戰。

1. 智慧型佈局的結果可能出乎意料且不一致。簡單的情況下沒問題，但它能夠處理任何圖層排列意味著有無數種可能的場景，因此它可能無法推斷出最預期的結果的機率更高。最終，它未能達到我們的標準，它需要變得更智慧、更可靠。
2. 符號以外的群組無法使用智慧型佈局。這是迄今為止我們收到最多請求的功能之一，它導致人們僅僅為了利用智慧型佈局而建立符號，而這本身就需要權衡取捨。
3. 堆疊佈局系統的普及造成了預期落差。考慮到這些系統的普及程度，人們自然會期望一個稱為「智慧型佈局」的關鍵受管佈局功能會是我們對堆疊佈局系統的實作。即使它不是，當它在堆疊排列中使用時，我們也需要更好地適應這種期望。

除此之外，我們還有一些加劇的因素。

• 智慧型佈局能夠處理任何圖層排列也意味著更改其邏輯可能會有風險，因為當單獨查看任何特定場景時，很難完全有把握地預測變更的全部後果。
• 由於它在幾年前推出並已普及，智慧型佈局在文件中無處不在，尤其是在發佈到工作區中許多文件，有時甚至在工作區之外的程式庫中。如此龐大的使用基礎意味著我們所做的任何回歸性變更都可能產生廣泛的影響，並對許多人造成高度干擾。

這是一個艱鉅的挑戰，因此是時候組建團隊並制定計劃了。

未來的道路

雖然智慧型佈局表面上看起來很簡單，但我們現在已經看到幕後存在相當大的複雜性。考慮到這一點，我們知道在整個過程中需要一個一致的團隊，他們都能夠熟悉並精通該系統。我們組建了兩個全職工程師，再加上一個品管、一個專案經理和一個設計師，在他們正在進行的其他專案之餘支援這個專案。

我們的最終目標是將智慧型佈局帶到群組，並特別考慮它在基於堆疊的佈局中的使用，但我們無法一蹴而就。我們制定了一個計劃，讓我們可以逐步實現該目標，同時在此過程中帶來一些必要的增強功能。

• 首先，我們會讓智慧型佈局更可靠，但仍然僅限於符號。在我們改進其核心邏輯之前，將智慧型佈局帶到群組是完全不可接受的。我們知道這樣做只會在更多場景中暴露其缺陷，這理所當然地會讓使用者感到沮喪。此外，更廣泛的安裝基礎只會讓我們在未來更難改進它。
• 同時，我們也會改進我們的堆疊功能。這些功能——整理和智慧分佈——已經存在了一段時間，我們知道一旦智慧型佈局應用於群組，它們將發揮作用，因為它們自然有助於製作和操作均勻間隔的堆疊。
• 接下來，我們將智慧型佈局應用到群組。這本身就是一項巨大的工程，因為群組不像符號有諸多限制，設計師可以自由調整群組內任何圖層的大小或刪除它們，或者插入新的圖層。

我們的工作已經安排好了，我們知道這將是一段漫長的旅程，但卻是至關重要的。

在本系列的下一篇文章中，我們將描述我們如何讓智慧型佈局更加可靠，而在第三篇文章中，我們將透過探討最終如何將其應用到群組來結束這段旅程。

想持續關注本系列文章，請密切關注我們的部落格，或是在 X 或 Mastodon 上追蹤我們以獲取最新消息。