Sketch最近更新了版本58,新的layout功能非常适合用来做多端自适应的页面,这跟我很久之前推荐的 Anima这个插件的其中layout的功能很类似,但是自家的功能肯定就不会出现插件不兼容的问题,所以接下来跟大家分享下sketch 58新功能layout详解
注:新的layout功能只适用于symbol(sketch的灵魂功能之一)
先看下运用layout做出的效果:
可以看出sketch的layout可以根据文字的长短自动换行和排版,拉伸也完全可以做到自适应
主要功能解释:
在symbol页面点击symbol画板或者symbol内的一个组,在右边的操作面板中会看到layout的功能区,有三个选项,none很好理解就是不使用layout功能;
Horizontal是水平方向,意思是symbol内的元素之间保持固定的间距在水平向发生变化;从左向右、中间和从右向左这三个选项的意思是:从左向右变化、从中间向两边变化和从右边向左变化
Vertical是垂直向,意思是symbol内的元素之间保持固定的间距在垂直向发生变化;从上向下,居中,从下向上这三个选项的意思可由上面水平向的意思同理可得。
而且像symbol可以symbol套symbol一样, layout也可以layout套layout!
我下面举例具体说明一下:
比如设计中常见的组件button,我们希望button的长短可以随着里面文字的长短自动变,这个时候就可以运用layout。这个变化是水平向的所以我们选择水平向的选项。
注意:layout识别元素是不会识别组里面的元素的,所以要确保你要自适应的元素们能被识别到!
三个button分别使用了水平向的:从左向右,中间,从右向左,可以看出layout会保持文字和外面圆角矩形的边距自动拉长btn的长度,而三个选项的区别就是拉伸的方向,一个是从左向右拉伸,一个是从中间向两边拉伸,还有一个是从右边向左拉伸,同理可以自己去理解一下垂直方向上的三个选项的意思哦~
下面的card运用layout的功能,配合resize的设置来完成:
首先分析一下这个card我们的需求是什么:
1.card里面的元素:图片、heading、describe text、以及下面的作者信息区块保持上下间距不变;card的高度随着里面内容的变化向下拉高。
2.左右拉伸时保证左右间距
可以得出:
1.整个card作为一个大symbol的里面元素的layout是垂直向的从上到下的
2.resize设置左右间距不变
步骤
1. 先做出一张卡片;
我这里的图片直接用的填充而非蒙版(虽然用蒙版也可以,但是会给symbol增加图层,我个人建议使用填充的方式)
2. 设置好各个元素距离card边界的距离
注意:在上面的button例子中不要设置文本框的宽度,因为水平向的变化,宽度是自适应的,如果设置文字宽度反而会用不了layout。在这里是垂直向上的变化所以我们要固定好文本框的宽度以及与symbol左右边界的距离,这样文字才会自动转行并保持与symbol左右边界的距离
3. 整理元素
在这里作者信息那部分 头像和文字可以打组作为一个整体。而这个组里的文字部分又是可以使用layout的所以可以文字部分再打一个组
4.创建symbol
创建symbol选择垂直向的从上向下,在symbol页面勾选 adjust content on resize
5.在symbol里设置resizing
因为我们希望在拉伸过程中元素左右边距保持不变,所以在这里我们要固定元素的左右边距。
6.在layout的symbol里嵌套layout
在symbol页面所有组也都可以用layout的功能,在这里我在作者信息组里将文字部分打组并且做了一个垂直向的从上到下layout。并且固定左右间距,
tada~到这里就完成了,返回到主页面上 尝试输入大段文字,并且左右拉伸试试看~你会爱上这个功能哦~
Tips:有些时候输入文字页面的排版没有马上自适应可以点击这个地方:
以上~
来源:UI中国
上一篇 B 端产品图标绘制创意指南
热门课程
专业讲师指导 快速摆脱技能困惑相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题,火星帮你解答在杭州学习UE5,掌握未来游戏设计的核心技术。火星时代教育为你提供全面的UE5课程,助力你开启职业新篇章。了解UE5的就业前景......
杭州是一个动漫游戏氛围浓厚的城市,去杭州发展,选火星学习,进入游戏动漫行业,大有可为哦
此篇文章深度介绍了室内3D模型线上课程的内容和结构,并着重强调了其在新时代创新技术中的重要性。最后,我们将介绍火星时代教育公司......
探讨目前各种C++培训班的特点,提出如何挑选适合自己的C++培训班,并介绍火星时代教育的相关信息。
影视动画设计基础课程的深入解析,提供给所有对动画创作有兴趣的人。让我们一起来了解更多动画设计的世界吧!
文章详细描述了剪辑制作培训机构的课程设置以及如何选择一个好的剪辑制作培训机构。
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!