Stack自動布局:Sketch中的Flexbox

2 評論 13336 瀏覽 53 收藏 6 分鐘

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還原設計。這就使設計師不依賴團隊的其他部分,比如開發人員的優先關注點就與設計團隊不同。

原文作者:Anima App

原文地址

#專欄作家#

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

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大家好,我是一名設計師。
    打攪一下,推薦一款我們下班時間做的SKETCH 換膚及主題管理軟件

    目前支持(3+1)套主題選擇,一鍵切換;多種圖標庫、讓你sketch與眾不同;個性圖層選擇、圖層嵌套縮進展現、自定義畫布明暗度等……
    功能免費,下載地址:
    百度網盤:https://pan.baidu.com/s/1-nK4MgOzkZBiCPH8-tb5Zg
    騰訊微云:https://share.weiyun.com/5eMyI1T
    人工索?。?83227998@qq.com

    請各位設計大牛、各位同學支持一下~

    謝謝~~

    來自北京 回復
  2. stacks,不是skacks,第一行就拼寫錯了吧

    回復