陌北默

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组的图标是一种特殊的蓝色,上面还有图标来表示方向。

  1. 最里层横向排列的红色线框Stack组,其中有2个元素:星星和评论数。
  2. 中间层纵向排列的蓝色线框Stack组,其中有4个元素:应用名称、作者、分类、红色Stack组。
  3. 最外层横向排列的绿色线框Stack组,其中有2个元素:应用图标和蓝色Stack组。

Stack的实用诀窍:

  • Stack很适合用于定义同级图层间的排列规则。
  • 在Stack组里增加或删除元素,会重新排列其中图层。

  • 文字图层的伸展会移动相邻图层。

  • 拖拽可以轻松地重新排列子图层。

使用Stack实现Flex网格

Alan Roy,我们产品内测小组的一位多产的成员,用Stack创造出了Flex网格系统。

他写了一篇详细解释,并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程。让人脑洞大开?!疽胝咦ⅲ盒杩蒲贤?/span>

http://www.ccopus.com/watch?time_continue=2&v=g–AD_Yp5lk

使用AutoLayout和嵌套组,在Sketch中实现响应式Flex网格

改善设计体系,便于缩放和统一。

我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

自动布局插件下载:http://www.ccopus.com/Auto-Layout/

指南与文档:http://www.ccopus.com/docs/v1/guide/12-stacks-flexbox.html


原文地址:medium

译文地址:可乐橙

作者:Anima App

译者:可乐橙

 

转载请注明:学UI网—UI设计师学习教程平台 » Stack自动布局:Sketch中的Flexbox

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
不会C4D与手绘的设计师还有出路吗?不会C4D与手绘的设计师还有出路吗?
Sketch47 新技能:支持设计师之间同步Symbol组件啦Sketch47 新技能:支持设计师之间同步Symbol组件啦
版画语言在广告设计中的运用版画语言在广告设计中的运用
Sketch Libraries功能图文详解Sketch Libraries功能图文详解
浅谈影响用户的行为浅谈影响用户的行为
界面设计 ≠ 屏幕设计界面设计 ≠ 屏幕设计
优秀设计师:设计中的故事思维优秀设计师:设计中的故事思维
大合集!最新版iPhone X 展示模板样机下载!大合集!最新版iPhone X 展示模板样机下载!
最新版IOS 11设计规范,官方源文件下载!最新版IOS 11设计规范,官方源文件下载!
高达1440M!5套高质量UI KIT下载!高达1440M!5套高质量UI KIT下载!
?