[国外设计第164期]
Skacks会彻底改变你对Sketch布局方式的理解。
就像 、iOS中的 和Android中的 —— Stack 的自动布局可以再次改变整个局面。
Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。
我们相信,推动设计生态前进的关键在于,创造出强大的设计概念。
Flexbox已经彻底改变了局面,它出现已有好几年了。但要使用它,你得在浏览器中使用CSS来设计,因此对于多数设计师可望不可及。
Stack是另一种形式的Flexbox,它更直观,但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。
Stack是一种特殊的 ,定义了其内部 的布局方式。
Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。
要使图层变为Stack模式,在Auto-Layout面板中点击Stack按钮。
小提示:
- Stacks 能产生 一致性 。
- 一致性 使设计 清晰 。
- Stacks 能使设计 清晰 。一个Stack组有3个属性:
:定义其内部图层按照 还是 方式排列。
:包括顶对齐、中央对齐、底对齐、伸展。
:定义其中每个元素的间距。
Stack可以嵌套使用!
90%的设计师第一次都会理解错!
下图由多少个 构成:
正确答案是:3。
Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。
在Stack组里增加或删除元素,会重新排列其中图层。
文字图层的伸展会移动相邻图层。
拖拽可以轻松地重新排列子图层。
,我们产品内测小组的一位多产的成员,用Stack创造出了 系统。
他写了一篇详细解释,并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程。让人脑洞大开。【译者注:需科学上网】
改善设计体系,便于缩放和统一。
我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师 不依赖 团队的其他部分,比如开发人员的优先关注点就与设计团队不同。
自动布局插件下载:
指南与文档:
作者信息:
Empowering designers to own their design.来源: http://www.tuicool.com/articles/jYF7FbV