功能背後：我們如何將智慧型佈局拓展至符號之外 (第三部分)

我們在 2023 年 11 月發布了智慧型佈局的主要升級，在本系列文章中，我們將深入探討幕後製作過程。在第一篇文章中，團隊闡述了這項工作的背景。在第二篇文章中，他們描述了修復問題並提高可靠性和可預測性的過程。在最後一部分中，他們將解釋如何賦予智慧型佈局新的生命，使其超越符號的限制。

在使智慧型佈局更加可靠之後，我們準備朝著最終目標邁進：將其從符號中解放出來，並應用於群組和畫板。

這並不像看起來那麼簡單：我們不能簡單地像在符號內部一樣，一鍵切換就讓所有關於智慧型佈局的功能在符號外部也能運作。這是因為群組和畫板的兩個特性使它們與符號截然不同：

1. 它們不對人們可以在其中編輯的內容施加任何限制。
2. 它們缺少符號來源提供的永久參考點。

這些方面構成了我們在這個專案中將面臨的大多數挑戰的基礎。

除此之外，我們知道我們還必須考慮智慧型分佈，並對整個智慧型佈局進行一些急需的品質提升更新。但讓我們先更詳細地探討這兩個具有挑戰性的特性。

讓我們先來探討這些領域各自帶來的挑戰。

探討挑戰

挑戰 1：符號外的創作自由

對於符號中的智慧型佈局，設計師只有兩個主要操作會導致佈局發生變化：

• 間接調整圖層大小（由於文字覆寫或交換巢狀符號）
• 隱藏和取消隱藏巢狀符號

由於在符號外部進行編輯沒有這些限制，我們必須考慮所有可能導致佈局重排的圖層變更方式，這些方式可以歸納為三個熟悉的領域

1. 調整圖層大小 — 可以直接透過調整圖層或其祖先群組的大小來調整，也可以間接透過變更個別文字或線條大小屬性等方式來調整。
2. 新增圖層 — 透過插入全新圖層、使用 ⌘D 或 ⌥-拖曳複製現有圖層，或從剪貼簿貼上複製或剪下的圖層。
3. 刪除圖層 — 透過一般的刪除或剪下方法。

挑戰 2：在沒有來源的情況下保持一致性

我們的基本目標之一是讓智慧佈局的整體體驗保持一致且可預測，無論您是在符號、群組還是畫板內使用它。

特別是，當我們將一個基本的智慧佈局原則應用於群組時，它仍然應該有效：只有大小的變化會影響佈局，位置的變化則不會。

但是還有一個額外的困難：與符號中的智慧佈局相比，群組中沒有「來源」，沒有原始狀態可以查看或測量。一旦有人對群組的子圖層進行了更改，原始狀態就會消失。不像符號來源那樣有原始副本。

這種困難是一些行為上細微差異的主要原因。因此，像隱藏子圖層這樣的操作不會影響佈局，因為缺少用於恢復相鄰子圖層佈局的資訊（一旦透過隱藏刪除了相鄰空間中最小的空間並且佈局發生了變化，就沒有辦法找回該資訊）。

為了記錄行為並確保未來的變更不會破壞它，我們大多數現有的單元測試都獲得了與群組相關的對應測試，因此與智慧佈局相關的單元測試總數幾乎翻了一倍。

回應動作

在確定了挑戰之後，我們開始著手解決設計師可能對圖層進行的三個方面的更改：調整大小、刪除和插入。讓我們詳細看看這些。

調整圖層大小時會發生什麼？

符號中的智慧佈局只有一個觸發條件：更改覆寫會導致圖層的大小發生變化（在這個情況下，我們先不考慮透過覆寫來隱藏和取消隱藏巢狀符號）。

但是，對於群組中的智慧佈局，觸發條件更多

• 您可以直接調整圖層大小，方法是拖曳畫布、在檢查器中設定特定值，或拖曳大小檢查器中的 *W* 或 *H* 符號
• 您可以間接調整圖層大小（例如，透過變更文字內容或文字屬性，包括透過檢查器進行變更）
• 您可以調整符號實例的大小以使其適合
• 您可以將符號實例替換為另一個實例。

因此，在進行任何變更之前，我們需要在更多地方建立快照。智慧佈局已經適用於符號內的群組，因此對於檢查器，我們「只需要」為常規群組顯示與智慧佈局相同的控制項。

透過拖曳畫布或檢查器控制項來調整大小帶來了額外的挑戰：我們需要決定何時在變更之前建立快照。我們有兩個選擇：在拖曳開始之前建立單個快照（並將所有變更視為相對於該快照），*或者*將每個拖曳步驟視為單個變更。

後一種選擇的主要問題是，未變更圖層與沿佈局軸變更的圖層之間的空間關係可能會發生變化，從而在拖曳時導致行為發生變化。先前不受變更圖層影響的圖層也可能會突然調整大小 — 這太難以預測了，因此我們放棄了它。

以下動畫顯示了兩種方法之間的差異

刪除圖層時會發生什麼事？

刪除具有智慧型版面的群組子圖層，與隱藏巢狀符號執行個體非常類似。因此我們採用相同的行為模式，包括移除最小的相鄰間距。

任何重疊（確切地說是：在版面方向上重疊尾端）且未變更的同層級圖層，其寬度會縮減已刪除圖層的寬度。如果未變更的圖層與兩個邊緣重疊，這種做法會比較理想，但如果重疊圖層沿著版面軸線較小，則可能會使版面混亂。

在開發過程中，我們發現看似無害的刪除動作，可能會導致版面混亂的風險，因此我們新增了一個選項來暫停智慧型版面。如此一來，設計人員就可以選擇在不影響版面的情況下刪除圖層，然後再繼續使用智慧型版面（稍後會詳細說明）。雖然這個方法解決了問題，但我們希望讓功能更智慧，而不是完全依賴暫停功能來解決問題。

最後，我們決定只在已刪除圖層完全沿著版面軸線環繞未變更的圖層時，才讓已刪除圖層影響這些圖層。部分重疊的圖層則不會受到影響。在以下範例中，刪除灰色背景圖層並不會將部分重疊的圖層縮減為零，這些圖層現在不會受到影響。

插入圖層時會發生什麼事？

將新的子圖層插入具有智慧型版面的群組，與取消隱藏巢狀符號執行個體類似，但有一個主要差異：我們沒有任何關於新圖層確切位置，以及其新的同層級圖層需要移動多遠才能容納它的資訊。

與隱藏巢狀符號執行個體不同，刪除操作一定會導致我們遺失資訊（例如剛移除的較小間距有多大？）而作為對應操作的插入操作，則無法從目前的版面配置衍生出該資訊。只有一個方法可以解決這個問題：設計人員需要決定新的同層級圖層的放置位置和方式。

我們提供了三個可能的插入位置：兩個圖層之間、接觸上一個圖層或接觸下一個圖層（沿著版面方向）。接觸位置只會插入圖層，而不會新增任何額外空間，而中間位置則會新增一些空間，因此在插入圖層後，圖層的左右兩側（或上下兩側）將會環繞著與其放置時相同的空間。無論在哪種情況下，您都可以輕鬆地視需要自由重新定位該圖層。

除了從群組外部放入新的圖層之外，您也可以透過複製或複製並貼上群組中現有的子圖層來插入圖層。

完善體驗

當我們開始在內部版本中讓群組和畫板中的功能運作時，我們很快地意識到我們希望透過三種主要方式來完善智慧型版面的體驗

• 設定 — 讓您輕鬆啟用、停用和設定方向，而不會中斷工作流程。
• 暫停 — 讓您在群組或畫板中進行變更時，可以暫時停止版面重新排列。
• 堆疊 — 包含針對堆疊式版面（等距圖層的列或欄）的特殊調整，即使智慧型版面並不僅限於這些版面。

讓我們更詳細地探討每個項目。

加快設定速度

設定具有智慧型版面的群組有三個步驟

1. 選取一些圖層
2. 將這些圖層分組
3. 為群組選取水平或垂直版面，然後（選擇性）變更其方向。

原本這些步驟各自獨立，感覺像是額外的負擔，打斷了設計流程。我們希望將它們整合為一個更流暢的動作，並避免使用者在此過程中需要切換到檢查器。

我們從解決第三個步驟開始，自然而然地想到了鍵盤快捷鍵。但是，六個選項（2 個軸 × 3 個方向）加上停用佈局的選項，讓標準的鍵盤快捷鍵難以應付。

我們搜尋了其他具有類似選項且擁有快捷鍵的操作，發現對齊是一個很好的例子。對於對齊，我們使用 ⌃⌘ 加上 ↑ ↓ ← → H 或 V。我們很喜歡使用這些按鍵的自然感受，但希望避免使用者必須記住一些沒有明顯助記符的修飾鍵組合來作為快捷鍵的「基礎」。

因此，我們決定在 Sketch 中首次使用我們稱為「兩階段」快捷鍵的方式。

• 首先，按下並放開 ⌘L（L 代表 Layout，佈局）
• 接著，按下 ↑ ↓ ← → H 或 V 來設定佈局方向。
  • 或者再次按下 L 來停用佈局（因為你的手指已經在那裡了）。

我們發現這個方法非常容易上手：你只需要記住 ⌘L（很容易），剩下的就像對齊一樣。此外，儘管是兩階段快捷鍵，但感覺就像一個單一動作，涵蓋了啟用佈局、更改軸/方向或完全停用佈局。

最後，解決第二個步驟：群組圖層。這就簡單多了：如果你的選取範圍中包含未群組的圖層，當你按下 ⌘L 時，我們會自動將這些圖層群組，方便你操作。

總之，我們認為我們成功地將這三個不同的步驟壓縮成一個易於記憶且快速使用的動作：選取圖層，按下 ⌘L，選擇方向，然後繼續。

允許暫停

自動化佈局系統既是祝福也是詛咒。一方面，它們在自動化方面非常有用，可以讓佈局保持你想要的樣子。另一方面，這種自動化有時會在你不需要的時候介入，並無意中造成骨牌效應。

智慧型佈局尤其如此，因為它會對任何層級的變更做出反應，並且它能適應任何佈局安排，這也鼓勵設計師打破均勻結構的佈局。

在我們的內部版本中，我們的設計師很快就發現自己偶爾會想要這樣做，卻發現系統一直跟著他們，使得難以跳脫。我們嘗試讓停用智慧型佈局變得更容易，但感覺不太對，因為設計師通常希望在完成特殊變更後系統能重新啟動。

因此，我們建立了一種*暫停*智慧型佈局的方法：按下 ⌥⌘L，它就會停止適應你所做的任何變更。你可以再次按下它來恢復，但一旦你清除選取範圍，它就會自動恢復。為了讓你確切知道智慧型佈局何時暫停，畫布底部會顯示一個提示訊息，你也可以關閉它來恢復佈局。

使用智慧型分佈

正如我們在第一篇文章中提到的，儘管智慧型佈局的關鍵原則之一是支援任何佈局安排，但堆疊排列（圖層在單列或單欄中平均分佈）仍然非常受歡迎——因此，我們希望更好地支援它們。

長久以來，我們一直有智慧分佈功能，旨在讓堆疊佈局更容易使用。它可以幫助設計師調整均勻分佈的選取範圍或圖層群組中所有圖層之間的間距，並且還可以輕鬆地對這些圖層進行重新排序。此外，我們的整理功能只需點擊一下即可建立均勻的堆疊排列，並且可以選擇輕鬆地更改間距。

即使我們什麼都不做，如果一個具有智慧佈局的群組，其圖層佈局為均勻的堆疊，那麼我們的智慧分佈功能也將可用。我們也知道使用者不一定能夠區分這兩個功能，他們也不應該這樣做——這一切應該都能正常運作。因此，我們希望改進這兩個功能在自然發生的情況下如何協同運作。

首先，我們讓佈局堆疊變得更容易。以前，如果想使用特定的水平或垂直間距值來均勻地分佈圖層，則必須先按一下「整理」，然後再調整該值。我們現在讓您可以直接輸入一個值，從而省去了額外點擊的麻煩。

其次，我們讓重新排列堆疊和調整其間距變得更容易。以前，只有在選取群組本身時，才會在畫布上看到均勻分佈群組的智慧分佈控點。我們知道，這與智慧佈局一起使用時會很煩人，因為您需要在堆疊中選取一個圖層來調整其大小（並讓佈局適應），然後調整其間距和/或在堆疊中重新排列它。現在，當您選取均勻分佈群組*中*的圖層時，畫布上的智慧分佈控點也會出現，以及「檢查器」中的水平和垂直間距值。

最後，我們確保智慧佈局會保持整理後的狀態。智慧佈局在將圖層新增到堆疊中時，無論是複製還是從外部拖入，都會考慮到堆疊的間距。此外，調整堆疊的間距會導致佈局進行適應。

發佈更新

與我們在努力提高智慧佈局可靠性時採用的發佈策略非常相似，我們盡快以實驗性功能的形式分組發佈了智慧佈局。即使它還不完美，但它也讓設計師有機會在我們繼續構建公開版本時使用它並提供寶貴的反饋。

正如我們在之前的文章中提到的那樣，我們要再次感謝社群論壇中那些在智慧佈局作為實驗性功能提供的期間與我們分享他們經驗的出色人士。這些反饋幫助我們塑造了最終版本，並在我們做出決策時提供了寶貴的直覺判斷。

總而言之，在我們發佈實驗性功能幾個月後，我們就發佈了群組智慧佈局的最終版本。在那段時間裡，我們處理了反饋，修復了錯誤，並對其進行了一些非常重要的優化。希望這三篇部落格文章能讓您清楚地了解為什麼我們要花時間把事情做好。此外，我們希望您在實踐中享受它！