使用 Sketch 搭建动态布局

使用 Sketch 搭建动态布局

如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很难完成了。

在过去的几次重布局项目当中,当我需要快速迭代时(例如重新设计Facebook“关于”页面时),我跳过使用Sketch进行布局,直接使用html/css。虽然你可以这么做,但频繁的在代码和浏览器之间切换,类似这样的事情,会限制了你的速度。

有一天,当我发现我正在设计表格布局,记不清楚实第多少次调整每一个表格元素对齐方式时,我开始憧憬有没有什么我能够让Sketch的WYSIWYG(所见即所得)和html、css相结合。

远在天边近在眼前。Facebook React Native项目有个非常漂亮的CSS布局库,它基本上是使用javascript来实现的CSS FlexBox布局。于是我花了几个晚上做了一个sketch插件的概念版:

一个名为 @stylesheet 的图层,以及插件的快捷键

这样就能够将原先比较麻烦的处理,例如设置内边距,变得很快速了。接下来,我要解决文本框的问题。文本框的问题就不是很好解决了,我的方法也不是很高效,不过插件运行起来倒算是马马虎虎,自适应大小、固定大小、多种行高、文本大小都实现了。

手动的重新布局,设置大小都变得很繁琐

这几个例子都很基础,而现实中的布局是非常复杂的。下面我们来试一下把表格布局混合一些图片、名称、二级文本以及一些附件。

这样的工作流能够使我们快速迭代,如果你要调整一些局部的尺寸、内边距等等,这个工具都能自动为你完成。

如果使用了Symbols,那么还能体验到其他的一些优势:

你可以在图层面板中调整顺序来控制列表中的元素顺序

调增多种屏幕大小的尺寸变得更加容易

不同于Symbols,你可以删掉一些元素,布局会自己调整。

布局并没有局限在视觉上,一些组可以共享布局,并且还可以看起来都有所区别

更进一步 — 原型

Symbols有一个优势,他能可视化的改变事物,而不是一遍遍的修改文本。最重要的是,维护不断增长的样式表将会成为一个痛点。

一种比较自然的办法来解决这个问题的话,我的方案是在Sketch中将样式表可视化。于是乎,我是用了一些平常做标注的方法 — 使用矩形、线段来表示内边距、外边距、宽度、大小尺寸等等。
使用 Sketch 搭建动态布局
如果我要制作上一个例子的标注,可能就会是这个样子。

制作成原型只需要简单的命名图层,增加一些很难视觉上表达的样式(这些图层可以随后隐藏起来,以免分散注意力)。
使用 Sketch 搭建动态布局
我添加了一个 @size 属性应用到宽度和高度

现在我们使用之前制作的表格来演示一下。在你所看到的现象背后,是原型的属性被翻译成单独的样式,并附加到样式表中。

视频
你可以注意到样式图层没有重新对齐。这是个半成品插件,我还在思考用户是否希望这些元素跟随其父元素

嗯,效果还不错。现在我们可以可视化的修改表格布局了,不用在设计视图和文本视图之间来回切换了。现在这个样式表只是用来渲染这个组,如果需要的话,我们也可以把它变成原型。通常情况下,我都会留着他,因为它作为原型是在太小了。下面这个例子完全使用原型进行构建。
使用 Sketch 搭建动态布局
在前面的元素原型之上,我们有一个表原型,他有着内边距和宽度,以及一个Section header原型,这个原型的下边距和其他的原型都不一样。

这么做并不是为了替换掉Symbols的使用,而是使用动态布局引擎来做个补充,这样能使得许多繁琐的任务变得更加容易。Symbols本身是很好的,甚至可以为原型作补充,你可以在symbol当中创建一个@padding图层,然后在原型之间共享它。

接下来需要做的

这个插件正在制作当中,现在进度很慢,而且还有很多的bug。尽管如此,我还是希望大家能试用一下,给我一些反馈,如果能变得更好用,或者贡献你们的力量,让它尽快能够发布。

它已经为我节省了很多的工作时间,我也希望它能帮助到更多的人。如果你想尝试一下,请到Github repo当中下载。

这是我在Facebook工作时的副业。如果你是一名设计师,同时你也喜欢各种工具,请联系我!我们最近启动了一个专门的设计工具项目,并且持续招聘中。

感谢 Jon Lax, Charlie Deets, Eric Eriksson, 以及 George Kedenburg III.

原作者:
使用 Sketch 搭建动态布局
欢迎大家到Medium上去关注他

原文出自:掘金 作者:MrMuscles

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

(0)
iouedioued
上一篇 2017-12-28
下一篇 2018-01-03

相关推荐

  • Justinmind 和 Axure谁更适合做原型?

    Justinmind 和 Axure 都是目前很强大的原型设计工具,被业界推为原型设计神器,在很多项目中起着不可估量的作用,但这两者的之间的作用是相互竞争还是相辅相成呢,我们应该客观地进行分析,使之更好地服务于我们的…

    Axure 2015-08-25
  • Sketch49交互原型新功能测评教程!

    昨天,Sketch49新版本发布,小编朋友圈又被刷了一波屏。对于该全新版本,具体有哪些新功能,以及如何使用呢?「10000个知识点」特邀讲师UIBANG-乔帮主连夜做了sketch新功能测评教程,分享给大家,希望可以给予你们帮助。深夜给大家整理了Sketch49版本更新的新功能-交互原型,希望大家能有所收获。下午在圈内微信群里,忽然看到2月28日发布了Sketch49新版本的...

    2018-03-03
  • 用户体验对于SEO而言有多重要?

    用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键用户体验对于SEO而言有多重要?SEO优化无论是针对资讯类的门户站,还是原创文章的撰写,都是非常重要的,SEO优化能够帮助网站更合理的定位,能够更好的展现在最重要、最关键的位置,也是现在最具潜力的网络营销方式之一。我们先来了解一下:在百度算法中,如何判定一个页面是否有价...

    2018-02-28
  • 产品原型设计(2):母板的创建和使用

    Axure母板:可以将一些页面中的共同之处,比如导航、背景部分等,提取出来,制作为母板。将母板应用于某个页面,则该页 面相当于将模板的内容复制过来。如果有很多页面具有相同的内容,这些页面如果需要修改这些相同的内容时,仅需要在模板中即可完成所有页面的修改。方式一:直接创建母板步骤一:创建Axure母板:在“母板”区直接创建母板里创建了一个名称为“Axure学习平台”的模板步骤二:使用母板选中“Axure学习平台”母板,邮件选择“添加到页面...

    2018-04-08
  • 交互设计 | 做设计你怎能不了解心理学?

    以用户为中心的设计7个原则:(1)应用存储于外部世界和头脑中的知识(2)简化任务的结构(3)注重可视性,消除执行阶段和评估阶段的鸿沟(4)建立正确的匹配关系(5)利用自然和人为限制性因素(6)考虑可能出现的人为差错(7)最后选择,采用标准化今天分享的【主题】什么是无形的设计?【Giver】IHan,自由设计师有形的通常是指硬体的设计,所以像是越来越小的晶片或者你可以做曲面的屏幕之类,那无形的话通常是指它的一些背后的一些科技的发展,或者是...

    2018-05-02
  • 双十一来了,淘宝的登录页有bug?我有解决方案!

    关于淘宝的登录页设计中的BUG,本文作者就用所学的用户研究、交互设计以及产品经理相关的知识来分析一下,并提出了自己的解决方案。

    2017-05-17
  • 用好的交互设计来管理复杂-“筛选器”

    我们必须按照人们的行为方式来设计,而不是按照我们希望他们应有的行为来设计。

    2017-05-19
  • 案例分析|社交网络产品LOGO设计系统

    在SNG(腾讯社交网络事业群)品牌系统语言里,LOGO系统承载品牌视觉的最核心容器,是整个品牌视觉系统的灵魂,是品牌的精神文化理念、信誉、服务等特点的浓缩表现,直接影响着社交网络品牌的发展。本文核心剖析社交网络产品LOGO设计系统。

    2017-05-09
  • 设计如何操纵人的想法—来自于Google的设计伦理学家

    作者:Tristan Harris 译者:@Steve-Mr 与 @WayneMaa 和 Oscar Wei   愚弄人们,要比让人们相信自己被愚弄了简单。 我十分了解科技如何劫持我们心理上的弱点,这也是过去三年,我在谷歌研究防止上亿人的心智被科技…

    交互专题 2017-08-07
  • 走心!优秀的移动端UI应当如何用微交互打磨细节?

    UI设计的细节很重要,它不仅仅体现在静态的元素上,动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计,微交互和动效设计是绕不开的问题,今天的文章我们来聊聊这个。

    2017-05-19