Stack自动布局:Sketch中的Flexbox

Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

– Stacks能产生一致性。

– 一致性使设计清晰。

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


Skacks会彻底改变你对Sketch布局方式的理解。

Stack自动布局:Sketch中的Flexbox

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

Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。

我们相信,推动设计生态前进的关键在于,创造出强大的设计概念。

Flexbox已经彻底改变了局面,它出现已有好几年了。但要使用它,你得在浏览器中使用CSS来设计,因此对于多数设计师可望不可及。

Stack是另一种形式的Flexbox,它更直观,但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。

Stack是什么?

Stack是一种特殊的组,定义了其内部图层的布局方式。

Stack自动布局:Sketch中的Flexbox

Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。

Stack自动布局:Sketch中的Flexbox

要使图层变为Stack模式,在Auto-Layout面板中点击Stack按钮。

小提示:
Stacks能产生一致性
一致性使设计清晰
Stacks能使设计清晰

一个Stack组有3个属性:

方向:定义其内部图层按照水平还是垂直方式排列。

Stack自动布局:Sketch中的Flexbox

方向对齐:包括顶对齐、中央对齐、底对齐、伸展。

Stack自动布局:Sketch中的Flexbox

对齐间距:定义其中每个元素的间距。

Stack自动布局:Sketch中的Flexbox

Stack可以嵌套使用!

Stack自动布局:Sketch中的Flexbox

来解这道题!

90%的设计师第一次都会理解错!

下图由多少个Stack组构成:

Stack自动布局:Sketch中的Flexbox

正确答案是:3。

Stack自动布局:Sketch中的Flexbox

Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。

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

Stack的实用诀窍

Stack很适合用于定义同级图层间的排列规则。

在Stack组里增加或删除元素,会重新排列其中图层。

Stack自动布局:Sketch中的Flexbox

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

Stack自动布局:Sketch中的Flexbox

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

Stack自动布局:Sketch中的Flexbox

使用Stack实现Flex网格

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

他写了一篇详细解释,并且附带一段10分钟的视频。我们强烈建议阅读和观看这组教程(点击观看)。让人脑洞大开。【译者注:需科学上网】

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

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

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

原文作者:Anima App

原文地址

#专栏作家#

可乐橙,微信公众号:可乐橙(colachangreen)。人人都是产品经理专栏作家,UI/UX设计师,关注互联网,关注科技。现居杭州,与小伙伴们正在创业途中。或许不是一名优秀的设计师,至少是个快乐的设计师。

本文翻译发布于人人都是产品经理,未经许可,不得转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23882/

(0)
CatherineCatherine
上一篇 2017-05-06 22:05
下一篇 2017-05-06 23:47

相关推荐

  • ​50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载

    50多个网页界面的设计素材下载,提供sketch格式的源文件ui设计素材下载素材下载方法:长按识别二维码,用微信扫描或者长按识别二维码即可加入。并不是只是下载这个素材。超过200G精品素材全部任意下。素材不断更新,添加。。。有任何问题,请联系微信uisheji----------------------------------------欢迎订阅,查看更多精品UI设计素材下载,请关注公众号mobileui

    2018-04-08
  • 实时信息交互技术

    源标题:微信也爱用的实时交互 作者:stella 公号:SS工作室 实时技术把刚刚发生的信息传递给用户,于是有了whatsapp,有了米聊,火了微信。但是它是如何提高产品的用户体验,并满足用户期待的呢? 几年前,像低延…

    2016-06-01
  • 浅谈图型菜单与文字菜单

    写这篇文章最初的想法是来自我看过的一篇关于汉字与英文阅读习惯差异的文章,可惜现在想起来的时候已经找不到那篇文章了(有知道的人请务必私信我)。

    2017-06-03
  • 分享:神级广告,100人同时交换名片~

    100人如何同时交换名片?

    IxD案例 2016-06-16
  • 产品需求沟通出问题怎么办?

    产品制作的流程中,发现需求并定义需求是首要环节,假如产品需求沟通出现问题了怎么办?你需要解决三个问题,避免含糊性,定义需求和功能,明确功能和属性。  一:如何避免含混性出现 含混性,指的是不清晰的程度。…

    2014-11-14
  • 大型的视觉设计系统都是怎么设计出来的?

    并不是Facebook的每一个产品都能在独特性和统一性之间保持平衡,但是这个视觉设计系统确实让Facebook 向前越近了一大步。

    2017-04-27
  • 交互模型的构建方法

    交互建模用来对应用当中的交互模式进行定义,它同时还诠释了这些交互模式是以怎样的方式被整合成为具有高度一致性的、容易被用户理解的交互模型的。我们曾经在第二章里对iOS交互环境的概念模型和空间模型进行了解析…

    2014-12-01
  • 重塑车载用户体验:仪表盘的重设计(一)

    这次带来的是Adhithya的一系列的关于思考车内人机交互的文章。这是一个系列哈,今天带来第一篇关于仪表盘的重构。

    2017-05-13
  • 从用户体验角度说说VR版综艺节目

    转载自913VR作者:赵丹上回我写了一些对于体育赛事VR直播的观点,今天我想说说VR版的综艺节目。最近我比较关注的两档综艺节目是《中国新歌声》和《盖世英雄》,一方面是因为我一直是《中国好声音》的拥趸,另一方面我很喜欢“潮”的东西,所以电音概念的《盖世英雄》自然很吸引我。值得注意的是,这两档节目的VR版都是由微鲸VR独家进行录制的,依托CMC丰富的娱乐资源,微鲸VR对于国内众多娱乐IP进行了VR版本的制作,今天我就主要结合这两档节目来说说...

    2018-04-07
  • 成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01