IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    Sketch3.9 终于发布了原生的响应式设计解决方案

    shendao发表于 2016-06-27 08:46:50
    love 0

    Sketch3.9 终于发布了原生的响应式设计解决方案。

    只需要设置一个属性,便可以快速实现任意尺寸的适配。

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

    Sketch 3.9 (31494) Beta – Sketch全系列下载(持续更新)

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

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

    Sketch3.9 终于发布了原生的响应式设计解决方案

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

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

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

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

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

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

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案

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

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

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

    Sketch 3.9 (31494) Beta – Sketch全系列下载(持续更新)

    IAMUE网站介绍

    1. IAMUE网站iamue.com是一个 专注分享交互设计的干货网站
    2. 交互设计师图书导航: http://books.iamue.com/
    3. 交互设计必备导航 :http://UED.xyz
    4. 交互设计讨论群 Ⅰ群: 156360020
    5. 交互设计讨论群 Ⅱ群: 247123791
    6. 交互设计讨论群 Ⅲ群: 147868955
    7. 交互设计讨论群 Ⅳ群: 362796793
    8. 微博: @IAMUE
    9. Sketch3.9 终于发布了原生的响应式设计解决方案 在微信里搜索: AioUED 并关注后回复关键字:{石头},查看结果,你绝对想不到。

    转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Sketch3.9 终于发布了原生的响应式设计解决方案



沪ICP备19023445号-2号
友情链接