使用 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

相关推荐

  • 实例分享:交互设计如何赋予产品安全感

    作者:高广淦全文共 4235 字,阅读需要 8 分钟—— BEGIN ——做互联网金融交互设计的这两年,也算是用过上百款竞品了。尤其是一开始做设计的时候,满世界的下载注册体验竞品,以至于我这两年的投资收益还是很可观的,…

    2017-08-04
  • 阿里交互设计师实习期总结的6个新人进阶方法

    这是阿里交互实习生半木对他两个月份实习做的一个总结,以指导后续的项目工作,主要内容为协作方式与职业素养方面的沉淀。都是书本上没有的实战经验,非常适合没有经验的交互新人进阶学习。 作为职场新人,第一次接…

    2016-05-19
  • 立足用户体验 “好换灯”助力雷士赢得好口碑

    2018注定是不平凡之年。全面开展质量提升行动,推进与国际先进水平对标达标,弘扬工匠精神,来一场中国制造的品质革命。2018年,雷士照明将迎来20周年庆典。雷士照明正在以此为契机,潜心修练,以促进雷士品牌再上新台阶。2018年被雷士照明定义为“品质服务提升年”,并于近期在全国开展了“诚信3·15,惠民大行动”为主题的“好换灯”主题推广活动,帮助千家万户升级改造居家光环境,传递雷士照明“全国性升级服务”“免费服务”理念。雷士“好换灯”全国...

    2018-03-16
  • 无框界面的四大优势,为你演绎一种新的设计风格

    无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

    2017-05-10
  • 怎样才算是好的用户体验?

    说今天是一个体验为王的时代,一点也不过分。做大众消费品的人可能已经感觉到,今天消费者的话语权越来越强,如果你的产品做得好,不久就会口口相传;如果你的产品做得烂,不久就会骂声一片。所有这一切在过去是不…

    2014-10-28
  • 不是首发!互联网女皇报告中文完整版发布

    腾讯科技讯 6月1日,有“互联网女皇”之称的玛丽·米克尔今天在美国Code大会上发布了2017年的互联网趋势报告,腾讯科技第一时间推出完整中文版。关注腾讯科技微信号(ID:qqtech),回复“女皇2017”,可获得中英文PDF版…

    2017-06-01
  • 福睿斯幸福号春运列车的背后:营销回归用户体验

    爆竹声中辞旧岁,品牌送暖入屠苏。一年一度的春节,不仅是万家团圆的时刻,也是品牌们“秀肌肉”,送暖消费者的黄金期。每到这时,煽情、怀旧、调侃、明星、红包、互动……各大品牌总会使出浑身解数以俘获消费者“芳心”。而今年最暖的,莫过于福睿斯推出的“幸福号春运列车”。今年春节期间,长安福特福睿斯联手凤凰网、12306客户端、高铁杂志《旅伴》等平台,在1月30日至3月31日期间联手为春节回家的朋友打造往返于成都—上海的“福睿斯幸福号”专属列车(D3...

    2018-03-29
  • 用好的交互设计来管理复杂-“Tab”

    标签可能看起来像一个微小、乏味的图形用户界面设计,但我们合理的运用Tab的特点,易用易理解,就能为你的用户体验加分。

    2017-05-18
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • 用户体验要素(上)

    我们天天挂在嘴边的用户体验为什么如此重要?到底什么才是用户体验?在繁忙的生活中,从你起床关闭闹钟到洗脸刷牙再到坐车去公司上班,在这个过程中,和你关联的东西,闹钟、牙刷、牙膏、公交车、地铁等,如果这一系列的事物都没有注重用户体验,早上起床闹钟响了没起来,急急忙忙去坐地铁到公司上班,地铁标识不清晰,你坐反了,很晚到公司,接着被领导大骂一通,灰扑扑的坐到座位上,然而你这一天才刚刚开始,这么糟心的早上让你一天都不顺利。如果没有好的用户体验,你每...

    2018-04-25