Skacks會徹底改變你對Sketch布局方式的理解。

就像CSS中的Flex Box、iOS中的UIStackView和Android中的FlexboxLayout——Stack的自動布局可以再次改變整個局面。

Sketch用戶終于可以在不用CSS的情況下，直接使用Flexbox的排版技術。

我們相信，推動設計生態前進的關鍵在于，創造出強大的設計概念。

Flexbox已經徹底改變了局面，它出現已有好幾年了。但要使用它，你得在瀏覽器中使用CSS來設計，因此對于多數設計師可望不可及。

Stack是另一種形式的Flexbox，它更直觀，但能力絲毫不減。它能使設計師以列、行、網格的思維來思考設計——使設計更加一致。

Stack是什么？

Stack是一種特殊的組，定義了其內部圖層的布局方式。

Stack組的圖標是一種特殊的藍色，上面還有圖標來表示方向。

要使圖層變為Stack模式，在Auto-Layout面板中點擊Stack按鈕。

小提示：
– Stacks能產生一致性。
– 一致性使設計清晰。
– Stacks能使設計清晰。

一個Stack組有3個屬性：

方向：定義其內部圖層按照水平還是垂直方式排列。

方向對齊：包括頂對齊、中央對齊、底對齊、伸展。

對齊間距：定義其中每個元素的間距。

Stack可以嵌套使用！

來解這道題！

90%的設計師第一次都會理解錯！

下圖由多少個Stack組構成：

正確答案是：3。

Stack組的圖標是一種特殊的藍色，上面還有圖標來表示方向。

• 最里層橫向排列的紅色線框Stack組，其中有2個元素：星星和評論數。
• 中間層縱向排列的藍色線框Stack組，其中有4個元素：應用名稱、作者、分類、紅色Stack組。
• 最外層橫向排列的綠色線框Stack組，其中有2個元素：應用圖標和藍色Stack組。

Stack的實用訣竅

Stack很適合用于定義同級圖層間的排列規則。

在Stack組里增加或刪除元素，會重新排列其中圖層。

文字圖層的伸展會移動相鄰圖層。

拖拽可以輕松地重新排列子圖層。

使用Stack實現Flex網格

Alan Roy，我們產品內測小組的一位多產的成員，用Stack創造出了Flex網格系統。

他寫了一篇詳細解釋，并且附帶一段10分鐘的視頻。我們強烈建議閱讀和觀看這組教程（點擊觀看）。讓人腦洞大開?！咀g者注：需科學上網】

使用AutoLayout和嵌套組，在Sketch中實現響應式Flex網格

改善設計體系，便于縮放和統一。

我們Anima的使命是讓設計師能掌控自己的設計。我們正在打造一款設計工具，讓設計師定義和構建UI與UX設計中所有零零碎碎的元素，并且最終能自動生成本地代碼，1:1還原設計。這就使設計師不依賴團隊的其他部分，比如開發人員的優先關注點就與設計團隊不同。

• 自動布局插件下載：https://animaapp.github.io/Auto-Layout/
• 指南與文檔：https://animaapp.github.io/docs/v1/guide/12-stacks-flexbox.html

原文作者：Anima App

原文地址

#專欄作家#

可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產品經理專欄作家，UI/UX設計師，關注互聯網，關注科技?，F居杭州，與小伙伴們正在創業途中?；蛟S不是一名優秀的設計師，至少是個快樂的設計師。

本文翻譯發布于人人都是產品經理，未經許可，不得轉載。