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

相关推荐

  • 现在时隔半年,再次分析一下微信读书这个产品

    从15年8月28日 微信读书 APP低调上线到现在已经差不多快半年了,对于这款含着金钥匙出身的产品,一开始似乎并有多得到太多的好评,甚至因为 好友阅读排行 功能而受到很多争议。 现在时隔半年,我以一个普通读书爱好…

    2016-02-23
  • 【IxD案例】国际第一时尚品牌VGUE-iPad端案例

    今天给大家分享一个原型,这是第一个分享原型制作的源文件,还请大家多多见谅,源文件有点小复杂。

    附件内的源文件为高保真的原型,模拟了很多的效果,下面我给大家说一下

    2016-02-22
  • 2016年网页设计趋势:卡片式设计如何在占尽优势?

    在现实生活在,视觉信息总是很吸引人的眼球,卡片设计的应用不仅仅只是一种趋势。

    2017-05-26
  • App加载动画知识体系:交互、视觉都需要掌握!

    我大胆预测了一下,以后App的加载动画都应该遵循越来越简洁的设计原则,突出内容,去掉无用的、过渡的形式设计。也许无文字提示的加载动画确实是一个流行趋势!

    2017-05-12
  • 交互设计中的项目跟进怎么进行?

    交互设计的常见流程可以划分为:需求分析、设计规划、设计实施、项目跟进、成果检验五个流程。很多人以为从无到有的过程才是最重要的环节,观点并没错,但我今天想说的是如何进行项目跟进。

    2017-05-30
  • 传递数据背后的故事——图表设计

    7大洲中最高的山峰:
    南极洲,文森峰,16050呎 4892米
    南美洲,阿空加瓜山,22841呎 6962米
    非洲,乞力马扎罗山,19340呎 5892米
    亚洲,珠穆朗玛峰,29035呎 8848米
    欧洲,厄尔布鲁士山18510呎 5642米
    北美洲,麦金利山20320呎 6194米
    大洋洲,卡斯滕土山16024呎 4884米

    2017-06-04
  • 交互设计面试经验分享

    交互设计面试经验分享 2016年7月12日 星期二 下午2:49 今天去面试,问的问题给大家看下,刚出来面试场所,就记得这些了。 1.你有没有做过一个你认为特别复杂的项目,包括后台结构,它复杂在哪? 2.如果需求一直变更…

    交互设计 2016-07-14
  • 立足用户体验 “好换灯”助力雷士赢得好口碑

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

    2018-03-16
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 【交互设计面试经验】2015年1月20日-交互设计师面试问题分享

    面试时间 2015年1月20日 阿西导读: 今天起我们给交互设计行业的朋友们开一个福利栏目:交互设计师面试分享我们在分类里叫交互设计面试,无论你是新手交互还是UI转UE 或是PM转UE又或者PM兼职UE。 不论怎样你都需要知…

    2015-01-21