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

相关推荐

  • 从2种形式和4种附加价值,来浅谈APP启动页

    当应用程序被用户打开时,在程序启动过程中被用户所看到的过渡页面(或动画)都被我们统称为启动页。为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。
    ——摘自苹果官方对于iOS启动页的设计说明

    2017-05-05
  • 相当便利的UI交互演示工具

    做为一个移动端的互联网产品设计师,天天心心念的就是如何做出一款款能让用户爱不释手的应用,想来轻松,做起来点点滴滴都是功能、美观和用户体验的契合难题,在一个个经典创意最终拍板前,产品原型及其演示体验,…

    UI设计 2016-06-08
  • 柴静是个好的产品经理

    这几天,柴静刷屏,有捧有踩。但是从创业者的角度,谨以此文向由文艺青年找准路线之后成功转型的优秀代表柴静,她不仅是一位优秀的新闻工作者,还是一位极好的产品经理。 她做了一个很好的示范,互联网的时代如何打…

    2015-03-05
  • 国内11个HTML5平台的星级评测

    本文以HTML5工具专业性为主要指标,不以名气论高低,内容多以企业网站介绍为依据,辅以使用体验。四个指标,功能是H5工具使用的基础,模板属于工具适用性的象征,定制服务能体现平台的生态性,易用度则是用户友好范畴。

    2017-05-30
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 交互新人,请不要再犯这几个错误了!

    不知不觉,我已经正式在交互设计的路上越走越远,了解得越多,就觉得交互设计需要学习和掌握的知识越多;同时犯的错也会越多。然而犯错并不是一件坏事,怕的是犯过的错误不能够被积极地思考,我们不能及时把错误化作成长。根据目前我的一些浅薄经验,总结出了交互新人往往容易犯的一些错误,以及关于错误的一些思考。

    2017-05-22
  • 如何正确提示用户进行评价应用

    设计文章 / 交互设计 | 2014-10-15 | 来源:woshipm | 发布者: GUImobile 在App里提示用户“给应用打分”的做法已经相当普遍。但正因为它太普遍了,用户一直被各种评价请求骚扰。我并不认为用户会介意给他们喜欢,并且…

    2014-10-15
  • 用户行为的“及时”理论 【UXRen译#184】

    作者:Jeff Atwood   |  翻译:露露,校审:Chen Jing   我一直认为软件设计对用户在使用该软件时的行为有着深远的影响。 从两方面来讲: 有意地让“正确”的操作容易操作。 有意地让 “错误”的操作不容易操作。 无论…

    交互专题 2017-11-01
  • Axure RP 8.0安装教程

    Axure RP 8.0Win版/64位下载地址:https://pan.baidu.com/s/13eqSe3IeqvnyqjBYxIEqZA密码:2gkwAxure RP简介:Axure RP是一个专业的快速原型设计工具。使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。适用系统:win7,win8,win10安装有问题或需要远程安装请联系:...

    2018-04-30
  • 一篇文章读懂用户体验(上)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。

    2017-06-01