整理你的图层
既然我们已经确定了页面其余内容的大致宽度,接下来同步更新板块标题元素。
- 选中板块标题 Section heading 图层
- 将文本尺寸改为自动高度 Auto height,宽度设置为
1000
继续之前,我们先来规整「Case study explorations」画板内的内容。
对齐画板内所有元素
- 选中「Case study explorations」画板,按下回车键 ENTER 一键选中所有子图层。
- 点击 Align horizontal centers 水平居中对齐,让所有元素居中。
- 在「Position」面板点开更多操作,选择 Distibute vertical spacing 垂直均分间距。
这会让所有元素在垂直方向上等距排列,之后就能用智能选择快速调整布局。
用智能选择重排图层
当选中的一组元素横竖间距都均匀时,就可以使用智能选择功能。
智能选择能帮你快速重排多个图层、调整间距,省去手动微调的繁琐步骤。
判断是否启用:鼠标悬浮在选中元素上,出现粉色圆点和粉色控点,即代表可用。了解更多智能选择用法。
Tip
设计初期尝试多种版式时,智能选择非常好用。你可以随意用案例页的元素练习,不用纠结间距和版式完美度。我们后续学习自动布局时,会重新优化这些元素。
本课总结
做得很好!我们完成了案例模块所需的全部元素。
本课要点:
- 学会了画板预设,并用文本、图片、画板搭建设计元素
- 掌握了将图层移入画板的方法
- 理解了约束如何让子图层适配父画板的尺寸变化
- 整理了图层,并学会用智能选择调整图层排布与间距
下一节课,我们将学习:
用自动布局制作自适应按钮,并封装成可全局复用的组件。