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

相关推荐

  • 干货分享 | 交互领域不可不知的设计法则

    本文转载自“熊猫设计院(ID:MUXDesign)”,已获得作者授权,未经许可禁止转载。前言:交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用。01希克定律(Hick’s Law )简介希克定律指的是:一个人面临的选择...

    2018-04-08
  • 交互设计第一步 了解完整的知识体系架构

    交互设计师犹如一名“翻译官”,主要的使命就是让人与产品之间更容易沟通、更具有人性化,让用户的操作更加有效,这也是交互设计师的价值之所在。今天推荐的这门课程,带你全面了解交互设计的知识体系架构和工作流程,了解交互设计师应具备的能力、应掌握的工具、如何完成进阶,并掌握让你更加专业、更具逻辑性的设计思维与交互设计面试技巧。点击“阅读原文”,开启你的学习之旅~丨我将从这门课中学到什么?了解形成完整的知识体系架构的重要性了解交互体系架构包括哪些部...

    2018-03-12
  • 我们如何有所作为的设计经验?:在DfE的教训- 有效用户体验

    它并非罕见,请参见语句喜欢"让世界更好的地方,在一段时间的一次经历"在用户体验从业者的生物。这些都是崇高的索赔,但当你的工作都是围绕创造产品和服务,使人们更加快乐和多产,很容易看到如何思考这种悄然而至。

    2014-12-28
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • 《用户体验草图设计工具手册》丨NOTES

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HappyPharrell Williams - Happy [From "Despicable Me 2"]本书讲了什么本书将指导你如何一步一步地用草图来表达你的设计理念,并介绍了多种草图方法。适合于所有设计行业的从业人员参考阅读,设计组织的领导者也可以参考阅读,包括设计师、可用性专家、人机交互界人士、产品经理人及商业高管等。作者什么来头Bill Buxton,微软首席用户体验...

    2018-05-08
  • 交互案例实战!三个按钮背后由小见大的交互思考

    @窒息红Leon :初入交互设计工作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽小,五脏俱全』,小小的按钮设计…

    2015-09-18
  • Think in ID 前言

    前言   交互设计师们总觉得,可以用的工具特别少。我们国内目前流行的交互设计工具也非常多,各有各自用着顺手的工具,这些年我见过不少各种各样的工具,例如说:Axure、手绘(姑且也算是工具)、Pencil、Visi…

    交互设计 2014-09-17
  • 交互设计中的视觉基础-格式塔理论

    爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

    2018-04-26
  • 不懂这几个交互原则,你一定是假的UED设计师

    如果你对这个题目很陌生,那请赶紧登上这辆末班车,来不及解释了。在日常工作中,我们总是会遇到产品或者开发对你发问“这个按钮为什么要放在这里”,“这里显示的信息条目为什么只剩这几个”blablabla之类。不管是为了在对接流程中更加有理有据,也为了使自己的设计更人性更好用,了解这几条基本原则,也是非常必要的。除非有更好的选择,否则就遵从标准。交互设计之父 Alan Cooper最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,...

    2018-03-15
  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15