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

相关推荐

  • 三种形式,浅析手持端日期控件

    日期控件,相信行业内所有的同学都不会陌生,尤其是交互的同学,可能会看得更加的仔细,日前,我们所接触到的各类app很多都有日期或时间的选择,而这些同功能的控件都以各式各样的姿态及交互呈现在我们的面前,出于自己的好奇,对这些不同行业、不同使用场景下的同一功能做了一个收集及总结的分析。

    2017-05-08
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21
  • Sketch迎来重大更新,叫板PS爸爸?

    11月8日晚,Sketch 悄悄的更新至 Sketch 41。至此3X系列已经离我们而去,4X系列正式到来!在此次更新中,还是有不少惊喜的。今天一一做个盘点。全新 LogoSketch 拟物化黄色钻石 Logo 已经成为历史。新Logo 顺应了设计潮流,简化色彩并弱化光影关系。不过有一点令我很在意,就是新Logo的倒角处理(面与面之间的接缝)。之前的Logo倒角很锋利,有种割破手的感觉,典型的 2D 图形拼接效果;新Logo倒角光滑,做...

    2018-04-26
  • 用交互设计思维分析iOS10新特性

    #交互设计# #iOS10#:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验…

    2016-10-26
  • 用户行为的“及时”理论 【UXRen译#184】

    作者:Jeff Atwood   |  翻译:露露,校审:Chen Jing   我一直认为软件设计对用户在使用该软件时的行为有着深远的影响。 从两方面来讲: 有意地让“正确”的操作容易操作。 有意地让 “错误”的操作不容易操作。 无论…

    交互专题 2017-11-01
  • 10个步骤,了解新手入门过程的设计原则

    新手入门是每个应用程序最重要的元素之一。很多时候,它的难易程度决定了用户是否会继续使用应用程序。在用户界面上,新手入门不仅仅是简单的5个介绍软件的页面或说明性的工具提示内容。下面我会使用最有趣的例子来描述新手入门过程的设计原则。

    2017-05-03
  • 译文 | 车载系统交互设计畅想Part3:主动性辅助面板-场景式车载助理

    在第一篇章中,我通过对智能汽车车载中控仪表的重新设计来减少驾驶中过多信息对驾驶员的注意力干扰。我的设计思路是通过多维度的交互操作来帮助驾驶员完成一些简单的操作任务,同时保证双手不离开方向盘。通过更多最对新手驾驶员的采访研究与测试,我又在第二章节中针对消除驾驶过程中的焦虑情绪做了分析与方案设计。在本章节中,我试图总结前两章节的研究发现,并设计一套针对智能驾驶的主动控制系统。

    2017-04-30
  • ios8设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 以内容为核心(Defer to Content) 1.1.2 保证清晰度(Provide Clarity) 1.1.3 用深度来体现层次(Use Depth to Communicate) 1.2 iOS应用解析(iOS App An…

    2016-05-12
  • iOS系统设计细节|人性化带来更好的产品设计

    从今年3月份使用苹果以来,偶尔会在某个不经意的瞬间,感受到ios系统设计的人性化之处,深刻感受到了简约不简单的魅力。

    2017-05-22
  • IAMUE经验分享-APP关于登录 与 注册引起的思考

    1. 何时会触发登录与注册 A. 第一次打开,启动页滑动结束就触发登录与注册 页面没有返回button 根据产品阶段,或强调注册或强调登录 点击注册button,注册页面从右向左进入,左上角是返回icon 如IN 脉脉 注册时的,…

    2015-09-22