Stack自動布局:Sketch中的Flexbox
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不是一名優秀的設計師,至少是個快樂的設計師。
本文翻譯發布于人人都是產品經理,未經許可,不得轉載。
大家好,我是一名設計師。
打攪一下,推薦一款我們下班時間做的SKETCH 換膚及主題管理軟件
目前支持(3+1)套主題選擇,一鍵切換;多種圖標庫、讓你sketch與眾不同;個性圖層選擇、圖層嵌套縮進展現、自定義畫布明暗度等……
功能免費,下載地址:
百度網盤:https://pan.baidu.com/s/1-nK4MgOzkZBiCPH8-tb5Zg
騰訊微云:https://share.weiyun.com/5eMyI1T
人工索?。?83227998@qq.com
請各位設計大牛、各位同學支持一下~
謝謝~~
stacks,不是skacks,第一行就拼寫錯了吧