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

我們在 2023 年 11 月發布了智慧型佈局的主要升級，在本系列文章中，我們將帶您一窺其幕後製作過程。在第一篇文章中，團隊說明了背景，並解釋了我們是如何規劃工作的。在本文中，他們將說明如何修復問題並提高智慧型佈局的可靠性和可預測性。

當我們規劃將智慧型佈局從符號中解放出來，並使其在任何地方都可使用時，我們知道必須讓它變得更…嗯，更智慧。

長久以來，我們一直從客戶那裡聽到——也親身體驗到——對使用智慧型佈局的符號進行更改可能會導致某些東西在不應該移動的時候移動，或者反之亦然。更糟糕的是，它發生的情況可能不一致。

如果我們試圖先讓智慧型佈局在任何地方都可用，然後再解決這些問題，我們只會擴大這些問題可能發生的範圍，並將其暴露給更多人。這也會讓它們在日後更難修復。

由於有更多設計和人員受到影響（以及我們所做的任何進一步更改），若創造更大的問題表面積，將會讓期待智慧型佈局改進的客戶感到沮喪和失望。即使這意味著要將這些改進延遲一點時間，我們也無法接受。

找出問題

但這些問題究竟是什麼？我們有多少個不同的問題？它們是什麼時候發生的？是什麼原因造成的？我們能否找出所有問題背後的共同根本原因？這需要一些偵探工作。

我們開始收集我們累積的許多問題，並逐一仔細研究。在每個案例中，我們查看了客戶的範例文件，並將其分解成最基本的要素，找出導致意外問題的因素和步驟。

我們以一個較大的團隊開始這項工作；團隊成員包括來自我們支援團隊的同事、我們的共同執行長（智慧型佈局的原始主要開發人員）以及專案團隊中的每個人。這有助於我們在產品開發的每個環節中建立共同的語言和理解。然後我們以一個較小的團隊繼續進行，處理了 50 多個問題，並根據嚴重性和問題區域進行整理。

經過長時間的徹底調查，我們找到了一些需要關注的問題領域。

1. 不同方向規則不一致。 正如我們在第一篇文章中提到的，智慧排版會檢視圖層沿排版方向的重疊方式。如此一來，從左到右排版的設計應該與其鏡像的從右到左排版設計運作方式完全相同。然而，情況並非總是如此，這使得該功能的可靠性降低。
2. 沿同一軸線的巢狀排版。 設計師可以將智慧排版容器巢狀置於彼此之中，而智慧排版允許我們自由地放置圖層。這會導致多個智慧排版容器並排出現，但在同一排版軸線上方向不同的情況。在這些情況下，我們並未始終尊重這些不同的方向。
3. 移除圖層時清理空間。 從排版中移除圖層會帶來額外的挑戰。我們不僅必須考慮圖層*本身*佔用的空間，還必須考慮圖層*周圍*的空間，否則設計會留下過多的空間，看起來會很奇怪。雖然確實發生了這種情況，但它與預期並不完全相符。

除了這些關鍵領域之外，我們還有一些零散的個別問題，其中一些我們認為重要到足以單獨修復。

建立安全網

智慧排版已經存在三年多了，在無數的文件和大型團隊使用的素材庫中佔有一席之地。這一點，加上其自由排列的特性，意味著我們不能隨意更改——即使這些更改是為了更好。造成大規模意外副作用的風險實在太高。

為了確保我們向前邁進兩步而不後退，我們撰寫了許多效能更高且更容易除錯的單元測試。這保證我們不會無意中取消任何現有的正確預期。有了這些措施，當我們實施使智慧排版更一致、更可預測且更容易理解的變更時，我們可以保持一切與設計師的設定相容。

當我們修復每個個別問題時，我們不僅將原始案例本身輸入到測試套件中，還輸入了不同排版方向的變體，以及相關且略有不同的排版。在專案結束時，我們最終為智慧排版添加了 400 多個單元測試。

深入細節

有了測試套件作為我們變更的安全網，我們開始逐一解決我們的關鍵問題領域。我們從不同方向的一致行為和不同方向的巢狀排版問題開始著手。這些問題是相輔相成的，這意味著我們可以稍後再處理空間清理——一個更為孤立的問題。

問題領域 1：建立排版一致性，不論方向為何

智慧排版的邏輯並非分別處理左/右或上/下，而是處理圖層在任何給定排版方向上的前後位置。換句話說，您預期從左到右的排版與其鏡像的從右到左排版運作方式相同。

在從左到右的排版中，與正在變更的圖層左邊緣（前緣）重疊的圖層將保持原樣。如果它與正在變更的圖層右邊緣（後緣）重疊，智慧排版會調整其大小。您預期從右到左的排版會相反，但事實並非如此。在從右到左的排版中，我們總是根據某物是在左邊/右邊來應用規則，而完全忽略了排版方向是相反的。

這是我們必須權衡在現有文件中破壞排版與引入更一致且可預測行為的領域之一。我們選擇了後者。現在，我們始終會調整與後緣重疊的圖層大小，並始終根據排版方向移動後緣之後的圖層。

問題區域 2：改進沿佈局軸重疊的圖層佈局

我們關注的第二個領域是沿相同佈局方向有多個圖層重疊的佈局。以前使用智慧佈局時，無法在另一個水平佈局內設置水平居中或從右至左的佈局。這是許多客戶遇到的限制，阻礙了智慧佈局的各種可能性——我們知道我們想要修復它。

看看下面的例子，了解我們的意思。在此範例中，我們有一個具有整體水平居中佈局的欄位表格。在右欄中，我們有一個具有從左至右佈局的儲存格。這可以正常運作。在中間欄中，我們有一個儲存格，其中包含從右至左的數字佈局，而在右欄中，則有一個儲存格，其中包含評級的居中佈局。

要使此範例正常運作，我們必須改進智慧佈局的邏輯，以計算和調整這些嵌套佈局中各個圖層的位置，不僅要使這樣的嵌套佈局成為可能，還要確保所有內容最終都位於您期望的位置。

問題區域 3a：消除隱藏圖層之間的空間

我們要解決的下一個問題區域是，當您隱藏佈局中嵌套的符號實例時會發生什麼——具體來說，是如何在執行此操作時消除圖層之間的空間。在我們之前的實作中，當您隱藏圖層時，我們會使用該圖層沿佈局方向之後的空間來計算其他圖層的位置和尺寸變化。這導致了兩個問題

1. 當您隱藏沿佈局軸的最後一個圖層時，沿佈局方向在其後沒有空間可用。如果符號內的圖層與符號邊界之間有間距，當您隱藏符號尾端的圖層時，我們會清除其後的任何空間，但這通常是您想要保留的間距。
2. 隱藏堆疊式佈局中的第一個和最後一個圖層的行為不同，因此更改佈局方向會導致不同的行為。這不是我們想要的。

在堆疊式佈局中，每個圖層之間都有間距，一種解決方案可能是移除您要移除的圖層之前的空間。但是，當您移除兩個或更多圖層時，這種方法就會出現問題。在這種情況下，您需要移除兩個圖層之前的空間，以保持間距一致。這種行為對於使用者來說不容易預測，尤其是在考慮到不同的佈局方向時。

相反，我們嘗試移除尺寸最小的空間。結果證明，這不僅實作起來非常簡單，而且還有一個非常有趣的副作用，那就是保留了剩餘圖層的相對距離！此外，這也保留了格式塔鄰近性原則。

下面的例子展示了這一點。這裡我們有一個帶有三組項目的工具列。每組之間有一個大空間，組內項目之間有較小的空間。在我們之前的迭代中，我們移除的空間可能在項目之間或項目外部（取決於您隱藏的項目），這會以不可預測的方式改變工具列的外觀。

現在，透過移除最小的相鄰空間，隱藏工具列群組中的一個項目仍然可以保持群組的完整性，移除群組中的所有項目仍然可以保持相鄰群組的分隔。更好的是，無論佈局方向如何，這種方法都有可預測的行為！

問題區域 3b：在隱藏圖層時保留空間

我們對新的空間清理方法感到滿意，但我們也聽到了一些客戶的意見，他們的佈局依賴於移除特定空間，而我們新的設定並不總是移除他們想要的空間。處理這個要求對 Smart Layout 的核心原則提出了一個挑戰。

正如我們在第一篇文章中所述，Smart Layout 的一個核心原則是盡量減少設置，而是從設計師設置佈局的方式推斷意圖。當需要額外的控制時，我們更喜歡人們已經知道的選項，例如**釘選到邊緣**和**固定尺寸**約束。這些選項已經可以應用於群組內的任何圖層，但在 Smart Layout 的情況下也可以使用。

我們知道解決保留特定空間問題的方法是找到某種方式來選擇隱藏圖層是否保留其空間。我們尋找了一個好的啟發式方法來決定何時保留隱藏圖層的空間，以及設計師可以用於設置的現有選項，但沒有什麼對我們有效。最終，我們決定添加一個新的顯式 Smart Layout 選項 - 一個標記為“隱藏時保留空間”的複選框 - 可用於 Symbol 實例內的 Symbols。

雖然我們相信擁有強大的原則來驅動我們的產品設計理念，但在這種理念開始帶來限制時，採取非教條主義的方法並保持靈活性也很重要。

發布我們的改進

雖然我們改進和擴展的測試套件讓我們相信我們沒有在任何方面倒退，但我們希望確保我們的改進符合設計師的期望 - 從我們自己的設計團隊開始。

我們將每個領域的工作放在我們夜間 Sketch 版本中相應的功能標記後面，我們的設計師在日常工作中使用這些版本。通過這種方式，我們可以公開我們的更改並評估其影響。當問題發生時，我們可以切換功能標記來輕鬆找到罪魁禍首區域 - 並在我們修復它時為我們的設計師提供一個逃生艙口。

即使所有這些安全網都已到位，Smart Layout 處理任何排列的能力意味著我們不可能考慮到客戶可能遇到的各種情況。我們知道我們希望盡可能多的人使用此更新，但就像我們在內部所做的那樣，我們希望為遇到問題的任何人提供一個逃生艙口。

我們最初的想法是僅在Beta 版本中發布這些更新，但我們的 Beta 版本需要努力選擇加入。相反，我們在 Mac 應用程式的v95中添加了一個新的實驗性功能設置面板。這使得設計師可以試用正在開發的功能，通過社區論壇分享他們的反饋，並在需要時將其關閉。我們在**更好的 Smart Layout 可靠性**功能選項下發布了我們的工作，並且知道它可以隨時輕鬆關閉，因此默認情況下啟用它以獲得最大程度的曝光。

最後，對此更新的負面反饋很少，只有極少數的回歸，這正是我們所希望的。現在，隨著 Smart Layout 的基礎更加穩固，我們終於可以繼續進行這個項目的最後也是最令人期待的階段：將 Smart Layout 從 Symbols 中移除，並將其帶到群組和畫板 - 但這將在我們的下一篇文章中介紹。

要隨時了解系列最新資訊，請密切關注部落格或在X或Mastodon上關注我們以獲取更新。