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

相关推荐

  • Web注册设计:参考下这5种类型的网站设计

    提到登录注册,大家想必不会陌生,要使用某个网站提供的全部服务,我们就需要进行账号登录操作;而要获取账号,就要进行注册网站用户了。

    2017-05-29
  • 移动交互设计欣赏(GIF)

    今天为大家上一组动态的移动交互设计,好好欣赏哦!   更多讨论内容请关注:学堂群:156360020 | 微信号:Aioued | 新浪微博:艾欧交互学堂

    2014-11-20
  • 如何设计聊天机器人的用户界面

    未来,聊天机器人将会进行语音整合。“ 预期设计是算法驱动的,以用户为中心的设计规范,我们已经看到产品和服务成功利用机器学习来推断用户的偏好。”
    “在预期设计的下一阶段,产品和服务将旨在预测每一个需要和需求。清早,当你准备上班,通过声音激活的个人助理将评估你的通勤时间,提醒你地铁即将晚点后,确认道路交通状况良好,然后帮你呼叫Uber,顺利让你在晨会前赶到办公室, 这些操作都是自动的,无需咨询,而且这些操作都是没有问题的。当你到达办公室时,您的咖啡机已经定位好你的位置,你一走进来,你的咖啡已经准备好了。”“为什么我得到这个?这与我有什么关系?”“聊天机器人曾给我推荐了一个很好的度假去处,但这次的推荐非常糟糕。”“为什么聊天机器人为我推荐孕妇装?我没有怀孕!这很让人尴尬!”

    2017-04-29
  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • 苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 「Sketch」在Sketch中创建设计系统 | 第一章

    原文作者:Marc Andrew原文来自:Medium阅读全文大概需要10分钟相信大家都做过自己的设计规范,无论在个人项目还是团队项目中,设计规范的重要性不言自明,但很多人(不仅是初级UI设计师,也包括很多工作多年的UI设计师们)都有很多困惑,比如,做好的设计规范如何维护?设计规范到底能给项目带来哪些更具体的帮助?在很多人看来似乎设计规范成为了一个“无用的”标配,很多设计规范慢慢被封尘在项目文档中的某个角落里,从此不见天日。实际上我们整...

    2018-04-19
  • 在网页设计中运用柔和色调

    小编推荐:看一些让人舒服的设计的时候 总是会发现,人家的用色大部分都很柔和,一些温暖人心的设计总是有一些共同特点,网页设计中也有一些使用柔和色调的方式~

    2015-01-08
  • 在无线产品中,一些普适的交互设计原则及实践(上)

    本文作者将逐条列出其总结的无线产品设计领域应当遵循的的一些基本原则,并在每条原则下辅以实例说明以便理解。

    2017-05-04
  • 前景理论与损失厌恶:用户如何做决定?【UXRen译#180】

    作者:AURORA HARLEY   |  翻译:小包,校审:Ariel   概要:当在好几个选项中进行选择的时候,人们会避免损失和选择确定的收益。这是因为损失的痛苦感要超过同等收益带来的满足感。因此UX设计应该要构建决策信息框…

    交互专题 2017-10-20
  • 【干货·基础】字体单位 pt如何换算成 px?或者px如何换算成pt?

    px:相对长度单位。像素(Pixel)。 pt:绝对长度单位。点(Point)。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5…

    交互设计WiKi 2015-09-09