新增:智慧動畫 — 為您的原型注入活力。深入瞭解

略過導覽

智慧佈局

最後更新日期:2023 年 11 月 6 日
閱讀時間:6 分鐘

智慧佈局是一個工具,可在您編輯、調整大小和移除佈局中的元素時,自動保持間距和填白。使用智慧佈局,您無需在每次進行更改時手動調整整個佈局。智慧佈局會處理一切,節省您的時間和精力。

Joseph Todaro 示範了智慧佈局如何大幅加快您的設計工作流程

為何使用智慧佈局?

當您將智慧佈局應用於您的設計時,它們會自動適應您所做的更改,同時忠於您應用於佈局的規則。智慧佈局可以大幅加快您的設計工作流程,尤其是在您使用具有水平或垂直佈局的常見 UI 元素(例如按鈕、選單或輸入欄位)時。

您可以在設計工作流程一開始就應用智慧佈局,也可以在之後調整更成熟的佈局時應用。

如何應用智慧佈局屬性

智慧佈局適用於群組、畫板和符號。您可以透過「檢查器」、使用鍵盤快捷鍵或使用選單列來應用和編輯智慧佈局屬性

透過「檢查器」

選取您要應用智慧佈局的群組或畫板,然後前往「檢查器」中的「**佈局**」面板,您會在其中找到不同的智慧佈局屬性。應用智慧佈局的元素會在圖層列表中顯示一個新的紫色圖示,指示其佈局方向。同樣地,具有智慧佈局的群組會顯示一個灰色圖示。

An image showing Smart Layout direction icons in the Layer List

圖層列表中的智慧排版方向圖示

透過快捷鍵

選取您要套用智慧排版的元素,然後按下 L,接著按下 HV 來設定您的排版方向。按下 L 可移除智慧排版,或按下任何其他按鍵即可取消操作。

如果您在包含至少一個圖層的多選項目上套用智慧排版快捷鍵,它們將會自動分組。

透過選單列

選取您要套用智慧排版的元素,然後前往「選單」>「圖層」,並選取排版屬性 — 或選取「選擇智慧排版」,然後按下快捷鍵(這些快捷鍵將會顯示在螢幕底部)。

暫停智慧排版

有時您可能想要在不讓智慧排版影響其排版的情況下處理元素,例如在縮短圖像的同時將文字保持在相同位置。在這種情況下,您可以輕鬆地按下 L 來暫停智慧排版。當您清除選取範圍時,智慧排版將會自動恢復。

智慧排版設定

智慧排版會垂直或水平調整您的排版大小,並且也會遵循您選擇的方向

垂直智慧排版將會從以下方向調整內容大小

  • 上到下 垂直上到下對齊 (智慧排版)
  • 下到上 垂直下到上對齊 (智慧排版)
  • 中間 垂直中間對齊 (智慧排版)

水平智慧排版將會從以下方向調整內容大小

  • 左到右 水平左到右 (智慧排版)
  • 右到左 水平右到左 (智慧排版)
  • 置中 水平置中對齊 (智慧排版)

根據您選擇水平或垂直排版,屬性列將會顯示不同的選項。

結合不同的排版方向

您可以將智慧排版套用水平和垂直排版。要執行此操作,請選取您要用不同方向調整大小的圖層,並將它們分組。現在,您可以在「檢查器」的「排版」面板下,將一組獨立的智慧排版屬性套用至該群組。

此卡片符號具有垂直排版,並從上到下調整大小。但底部的兩個按鈕也已分組,具有水平排版,並從右到左調整大小。

智慧排版的適用範圍

智慧排版適用於

群組和畫板:使用「檢查器」、快捷鍵或選單列來套用智慧排版。

您可以將智慧排版套用至群組和畫板,讓您在調整大小或移動元素時,更容易保持間距和填補一致。

當您執行以下操作時,智慧排版將會觸發群組:

  • 調整群組中圖層的大小、刪除、剪下 X、縮放或貼上 V 圖層。
  • 透過將文件中的圖層或符號拖曳到套用智慧排版的群組上方來新增圖層或符號。按住 即可忽略套用智慧排版的群組。
  • 複製 D 圖層(如果該圖層是等距群組的一部分,則相同的間距也會套用至新的副本)
  • 使用已啟用智慧佈局的父群組中的智慧分佈控點,調整巢狀群組(等距)圖層之間的間距
  • 編輯群組中任何文字圖層的內容或字體屬性
  • 交換群組內的符號,或調整其大小以適合

符號:當您建立新的符號時,您可以透過「建立符號」工作表立即套用智慧佈局。如果您從已使用智慧佈局的群組或畫板建立新的符號,它將遵循相同的佈局方向。

要將智慧佈局套用至現有的符號,請透過選擇該符號的任何實例並按下 來前往其來源 — 然後您可以在檢查器中的「佈局」面板中套用智慧佈局屬性。

具有智慧佈局屬性的基本按鈕符號,當按鈕標籤文字變更時,會從中間水平調整大小

將調整大小限制與智慧佈局搭配使用

您也可以將調整大小限制套用至使用智慧佈局的選取範圍。這讓您可以額外控制選取範圍的行為方式,例如確保它永遠不會放大或縮小。

請記住,當您將智慧佈局套用至文字圖層時,它們的對齊方式應該是自動高度 自動高度(適用於垂直佈局)或自動寬度 自動(寬度)(適用於水平佈局)。

如果您刪除群組或畫板中的圖層,或者如果您隱藏符號中的巢狀符號,智慧佈局將會調整您的佈局。

智慧分佈和智慧佈局

除了調整元素大小之外,觸發智慧佈局的另一種方法是使用智慧分佈調整它們之間的間距。等距圖層需要包含在它們自己的群組中,巢狀在智慧佈局群組內。

符號中的智慧佈局

智慧佈局可以大幅加快您的設計工作流程,因為它有助於讓您的符號更具重複使用性,同時保持其外觀一致。

如何在建立符號工作表中設定智慧佈局屬性

當您為符號選擇智慧佈局屬性時,您會在檢查器中的「佈局」面板下方看到最小高度(適用於垂直佈局)或最小寬度(適用於水平佈局)的欄位。將尺寸新增至這些欄位將會阻止您的符號縮小到最小尺寸以下,無論其覆寫內容為何。如果您將這些欄位留空,您的符號將會縮小到任何尺寸以適合其內容。

此按鈕的簡短標籤及其智慧佈局設定表示它調整大小後太小 — 但透過設定最小寬度為 100,它會保持合理的尺寸

如果您分離具有智慧佈局的符號,Sketch 將會將這些相同的屬性套用至產生的群組。

請記住,如果您變更符號來源的現有智慧佈局屬性,則該符號的實例可能會看起來不正確。在大多數情況下,使用檢查器中「覆寫」面板中的「調整實例大小以適合內容」 縮小實例 按鈕將會修復此問題(或前往「圖層」>「符號」>「調整實例大小以適合內容」)。

在檢查器中使用「調整實例大小以適合內容」按鈕調整符號實例的範例