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

相关推荐

  • 画交互原型方案前,你应该思考的三个点

    一个优秀的交互设计师,一定要从用户目标出发,了解用户的核心痛点,满足用户的需求,只有这样才能打造一个好的产品。

    2017-04-29
  • 网页的交互设计and界面与用户体验案例:Nike Tech Pack in store app

    第一段是动效的视频,请注意观看交互效果与配色设计。 图片都可以点击放大,更清楚哦。 原文地址:https://www.behance.net/gallery/26097251/Nike-Tech-Pack-in-store-app 多个作者: Shakir Dzheyranov / Detail …

    2016-01-10
  • 荣格产品走进千家万户,用户体验分享大—放—送。

    荣格之声用声音分享荣格关注日用品篇案例1我从小牙龈出血,吃馒头也出血,吃苹果更出血,怎么都治不好,给生活带来了不便。长大后,我就试用各种牙膏,X利、 X美、X南白药等等,什么贵用什么,结果还是不尽人意。在我41岁也是2011年的时候,经同学介绍,我试用了荣格芦荟牙膏,结果三天后见效了,当时我很兴奋,15元150克,这么便宜的牙膏竟然解决了我几十年的痛苦,太神奇了,口气清新,牙齿又白又亮,牙龈受损的也得到了修复,口腔溃疡再也与我无缘,坚持...

    2018-02-20
  • 新用户首次体验有多重要?又该如何提升?

    一款优秀的移动产品应当有一套可靠的新手体验设计策略。不要把自己限制在产品里面,从核心价值入手准备——抓住每一次可以向用户传达价值的机会。不管是应用的广告或者一个引导页,抓住任何机会去诠释产品的价值与功能吧。

    2017-05-06
  • 京东JDC交互设计揭秘:大促分会场-模块化设计方法总结

    写在前面 在电商的世界,似乎一切时间都可以和购物挂钩,5.20、6.18、11.11、12.12、年货…..;有购物节就要有各种各样的会场进行促销展示;面对越来越细分化的类目会场,作为设计师需要把多达几十个会场一一设计出…

    2017-06-12
  • 今天的扁平化设计中,值得注意的4个要点

    扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王,而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧?

    2017-05-08
  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • MacBook Pro 真机上手:Touch Bar 究竟是不是好设计?

    9 年前,iPhone 的诞生,多点触控开始成为一种全新的人机交互方式。 4 年前,当一票“超极本”不加思索地把触控移植到电脑屏幕上,时任苹果工业设计师的 Jonathan Ive 说: 多点触控放在笔记本的显示屏上……不太适合。…

    交互设计 2023-03-03
  • 【用户体验】Chiphell论坛网友Raise3D N2打印体验实录

    以下是来自Chiphell论坛的一位@xm79 网友的使用Raise3D N2 3D打印机后的体验分享帖。让你看到Raise3D N2 3D打印机最真实的一面。之前用了好一阵工作室的makerbot 之后,也想着买一台自己的。主要每次打都要排个队,十分麻烦。而且每到出图季就要没日没夜的看守在打印机旁,通宵不起了。思量着买一台放家里吧。本来考虑着买makerbot的,因为速度是真的快,软件算法比用ultimaker系的快了一倍。但是问题就...

    2018-02-05