使用 Sketch 3.9 快速实现响应式设计

Sketch3.9 终于发布了原生的响应式设计解决方案。只需要设置一个属性,便可以快速实现任意尺寸的适配。

昨天晚上,Sketch发布了3.9beta版

http://www.sketchapp.com/beta/

其中更新的一个非常重要的功能,就是是可以缩放 Symbol 和图层组。

其实简单来说,只是在图层属性面板增加了一个 Resizing 的属性选项。这个选项看似很不起眼,但只需要其中3个选项,就能实现绝大部分设计的「适配」需求。

Image title


用自带模版的例子举例吧。就一般 bar 里头的控件来说。适配起来无非就是保持边距的情况下,按照某一角对齐。这种情况就可以选择Pin to corner。

这样的话,所设置的图层就会按照中心点所在父级的位置进行适配,这个选项无非就是9种情况,分别是相对四个角的四个点的编剧固定,或者分别保持纵向或横向居中,然后分别保持固定上下左右的距离。

Image title

Image title

Image title


Resize object 则针对希望填满父级单位的元素,比如网站的位图banner,或者填充一个列表的内容。下面的例子中,左右的标题和图标都是设置的 Pin to corner,但段落文字设置的 Resize object。这样的话内容都会保持四个方向的边距,跟着父级单位一起缩放。

Image title

Image title

Image title


最后一种,Float in place,他会根据父级元素的缩放,来等比例缩放图层所处父级图层的边距,这个属性可能可以用于无脑缩放的 tabs。

Image title

Image title

Image title


不得不说Sketch新增的这3种属性是一个天才的想法。逻辑简单,操作也非常快捷。

在此之前,有一个第三方插件也能很好的实现这样的适配,但操作就繁琐很多了。各位也可以参考。

https://github.com/matt-curtis/Fluid-for-Sketch

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/15968/

(0)
交互精选交互精选
上一篇 2016-06-27 10:20
下一篇 2016-06-27

相关推荐

  • 巴塞罗那发团丨LES FONTS DEL LLOBREGAT探寻自然一日游

    看腻了古镇城堡?看够了沙滩海岛?那就跟随我们深入略夫雷加特河的源头Fonts del Llobregat来一次悠闲的探寻自然之旅吧!发团日期:2月17日行程价格:42欧/人行程包含:1.大巴游览2. 西语陪同导游3. 餐食午餐包括:escalivada炭烤蔬菜拼盘,加泰罗尼亚沙拉,咸火腿,白肠、黑肠、香肠拼盘,Escudella炖菜,酱汁bandejas de pies de poco,蘑菇牛肉+烤鸡肉甜品:Bunyols amb mo...

    2018-02-05
  • UED专访 | 众建筑:未来城的边缘

    📌 编辑 | 裴盛📌 采访| 杨紫惺 李思远 李佳琪📌 视频 | 裴盛EXCLUSIVE INTERVIEWUED × 众建筑玻璃框景中,映出木构的筋骨红砖青瓦间,闪烁金属的光芒古老与现代在这座“新生”四合院中交织年轻的的思想碰撞出新时代的活力观察生活、测试构想、生产建造踏进“众建筑”,寻觅空间的更多可能点击观看专访视频UED × 众建筑专访视频 ©UED1“三人成“众”“众建筑”,既是对其由三位合伙人共同创立的直观描绘,更符号化地表达...

    2018-02-07
  • 13毫米:触屏按钮的完美尺寸【UXRen译#170】

    作者:Scott Hurff   |  翻译:taitai,校审:天蛙   有种感觉你无以言表但却了然于心——当你在触屏上不能正确操作时,当你不得不小心翼翼地点屏幕上的一个小按钮来触发某个指令时,那种挫败混杂着气恼的滋味。 但假…

    交互专题 2017-08-07
  • 度秘一下不如营造情景,一个产品的服务分发应该怎么玩?

    刚刚落幕的2015百度世界大会,百度推出了秘书化搜索工具“度秘”。这是李彦宏在宣称All in O2O后,做出的最符合百度风格的一件事情,也是百度希望能继续主导服务分发的尝试。

    2017-06-04
  • 10种交互设计小技巧抓住用户注意力

    如今,设备的屏幕正变得越来越小。主要的挑战在于在有限的屏幕范围内提供优秀的用户体验。 简单来说2015年的移动设计趋势将是在传递更多信息的同时,尽量保持设计的简单。让我们来看看这些应用是如何抓住用户的注意…

    交互设计 2015-09-02
  • 动态响应-应用程序的身体语言设计

    引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

    2014-12-30
  • WEB用户体验

    点击标题下「智业人」可快速关注摘要:随着软件行业的迅速发展,各种软件产品更是形形色色,用户不再满足软件对其所需要的功能实现,更追求一种使用过程中的心里感受,因此用户体验足够好的才能走向最前端。用户体验的定义有很多,用一种比较简单的说法就是“用户对访问网站的感受”。本文主要从用户体验角度出发,从网站的构建到数据渲染完毕的过程提高用户体验。关键字:加载速度、动画、用户体验、布局一个好的网站离不开对用户体验的追求。因为良好的用户体验才能增加用...

    2018-02-03
  • 如何完美碾压用户体验职位面试

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel本文长度3082字,建议阅读5分钟当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否适应公司的文化。在上次西雅图用户体验组见面会主持的谈话之后,我发现很多公司没有在面试中明确表达对面试者的期望,而且并不知道如何去面试。面试的过程其实是个自我展现的机会,作为设计师来说...

    2018-02-07
  • 高保真原型的这几个秘密,你知道吗?

    这不是一篇关于“怎么做高保真原型“的文章,也不是一篇关于交互规范的文章,这篇文章对于交互新人或者想作一些改变的互联网从业者有些许帮助。

    2017-05-23
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03