Pixso新手视频教程

入门教程

欢迎来到Pixso 教程,本期我们来学习一下什么是自动布局。

设计页面日常需要适配多种设备,Pixso的自动布局功能可以使界面布局自动适应设计内容的变化,让设计师拥有响应式设计稿!

Pixso的自动布局在编辑器的右侧栏中,选中需要固定布局的容器或图层,点击“+”,即可调出自动布局功能。我们可以通过调整排版方向、间距、边距与对齐方式来制定自动布局的规则。

案例实操展示:

在实际操作中,首先选中所有元素,添加自动布局功能,调整排版方式即可一键切换元素的排版方向。我们再来看看间距设置的变化:选中所有元素 设定间距为“32”,对齐方式设置为水平与垂直居中,随意拉伸画板,元素之间将始终维持32的固定间距。

通过设置自动布局中画板与元素的边距,可以满足多种边距需求。选中列表中的这两个选项,将左侧边距设定为16,实现快速调整。我们还可以通过调整自动布局的对齐方式,一键调整画板内元素的位置实现快速排版。调整复杂界面,我们可以通过自动布局+约束布局来完成。

看这个卡片案例:更改标签的文字,调整标签底板的自动布局,设置为环抱内容,标签底板将自动调整为与文字相适应的大小。同理,将案例中的输入框自动布局设置为“填充容器”,拉伸画板,输入框的大小将根据设置规则自动变化。最后将这两个卡片设置为“垂直缩放”、“水平缩放”,拉伸画板,卡片的大小将自动变化。

同时, Pixso 可支持嵌套多层自动布局组件和图层,达到真正响应式设计的效果。在这个案例中,我们试着复制一列自动布局组件,界面将按原定布局规则自动调整大小,横向添加,同样可以自动适应。调换内容的次序,其他元素也将产生自适应变化。

以上就是关于自动布局的介绍,还有更多高能操作等待你来发现,赶快打开Pixso来体验一下吧~